Refactor task state to icon mapping

Follow the mapping used by the drawer with following changes:
1. use PauseCircleIcon also for QuotaBlocked state
2. use TaskIcon for Ready state (instead of CheckCircleIcon)
3. use CheckCircleIcon for state Succeeded

Signed-off-by: Radoslaw Szwajkowski <[email protected]>

Author: rszwajko

client/src/app/components/Icons/taskStateToIcon.tsx

@@ -1,11 +1,16 @@
 import { TaskState } from "@app/api/models";
 import React from "react";
 import { Icon } from "@patternfly/react-core";
-import CheckCircleIcon from "@patternfly/react-icons/dist/esm/icons/check-circle-icon";
-import TimesCircleIcon from "@patternfly/react-icons/dist/esm/icons/times-circle-icon";
-import InProgressIcon from "@patternfly/react-icons/dist/esm/icons/in-progress-icon";
-import ExclamationCircleIcon from "@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon";
-import UnknownIcon from "@patternfly/react-icons/dist/esm/icons/unknown-icon";
+import {
+  CheckCircleIcon,
+  TimesCircleIcon,
+  InProgressIcon,
+  ExclamationCircleIcon,
+  UnknownIcon,
+  PendingIcon,
+  TaskIcon,
+  PauseCircleIcon,
+} from "@patternfly/react-icons";
 
 export const taskStateToIcon = (state?: TaskState) => {
   switch (state) {
@@ -26,14 +31,17 @@ export const taskStateToIcon = (state?: TaskState) => {
           <ExclamationCircleIcon />
         </Icon>
       );
-    case "Pending":
+    case "Running":
       return <InProgressIcon />;
-    case "Created":
+    case "Pending":
+      return <PendingIcon />;
     case "QuotaBlocked":
-    case "Running":
-    case "Ready":
     case "Postponed":
+      return <PauseCircleIcon />;
+    case "Created":
+    case "Ready":
+      return <TaskIcon />;
     default:
-      return <></>;
+      return <TaskIcon />;
   }
 };

client/src/app/components/task-manager/TaskManagerDrawer.tsx

@@ -18,21 +18,15 @@ import {
   NotificationDrawerListItemHeader,
   Tooltip,
 } from "@patternfly/react-core";
-import {
-  CubesIcon,
-  InProgressIcon,
-  PauseCircleIcon,
-  PendingIcon,
-  CheckCircleIcon,
-  TaskIcon,
-} from "@patternfly/react-icons";
+import { CubesIcon } from "@patternfly/react-icons";
 import { css } from "@patternfly/react-styles";
 
 import { TaskState } from "@app/api/models";
 import { useTaskManagerContext } from "./TaskManagerContext";
 import { useServerTasks } from "@app/queries/tasks";
 
 import "./TaskManagerDrawer.css";
+import { taskStateToIcon } from "../Icons";
 
 /** A version of `Task` specific for the task manager drawer components */
 interface TaskManagerTask {
@@ -126,28 +120,9 @@ export const TaskManagerDrawer: React.FC<TaskManagerDrawerProps> = forwardRef(
 );
 TaskManagerDrawer.displayName = "TaskManagerDrawer";
 
-const TaskStateToIcon: React.FC<{ task: TaskManagerTask }> = ({ task }) =>
-  task.state === "Ready" ? (
-    <Tooltip content="Ready">
-      <CheckCircleIcon />
-    </Tooltip>
-  ) : task.state === "Postponed" ? (
-    <Tooltip content="Postponed">
-      <PauseCircleIcon />
-    </Tooltip>
-  ) : task.state === "Pending" ? (
-    <Tooltip content="Pending">
-      <PendingIcon />
-    </Tooltip>
-  ) : task.state === "Running" ? (
-    <Tooltip content="Running">
-      <InProgressIcon />
-    </Tooltip>
-  ) : (
-    <Tooltip content="Unknown">
-      <TaskIcon />
-    </Tooltip>
-  );
+const TaskStateToIcon: React.FC<{ taskState: TaskState }> = ({ taskState }) => (
+  <Tooltip content={taskState}>{taskStateToIcon(taskState)}</Tooltip>
+);
 
 const TaskItem: React.FC<{
   task: TaskManagerTask;
@@ -174,7 +149,7 @@ const TaskItem: React.FC<{
       <NotificationDrawerListItemHeader
         variant="custom"
         title={title}
-        icon={<TaskStateToIcon task={task} />}
+        icon={<TaskStateToIcon taskState={task.state} />}
       >
         {/* Put the item's action menu here */}
       </NotificationDrawerListItemHeader>