🐛 Refactor task state to icon mapping (#1984)

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 Part-of: #1969 --------- Signed-off-by: Radoslaw Szwajkowski <[email protected]>
konveyor · Jun 27, 2024 · 00689bb · 00689bb
1 parent 91400ed
commit 00689bb
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 46 deletions.
diff --git a/.../app/components/Icons/taskStateToIcon.tsx → ...rc/app/components/Icons/TaskStateIcon.tsx b/.../app/components/Icons/taskStateToIcon.tsx → ...rc/app/components/Icons/TaskStateIcon.tsx
@@ -1,13 +1,18 @@
 import { TaskState } from "@app/api/models";
-import React from "react";
+import React, { FC } 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) => {
+export const TaskStateIcon: FC<{ state?: TaskState }> = ({ state }) => {
   switch (state) {
     case "not supported":
     case "No task":
@@ -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 />;
   }
 };
diff --git a/client/src/app/components/Icons/index.ts b/client/src/app/components/Icons/index.ts
@@ -1,4 +1,4 @@
 export * from "./OptionalTooltip";
 export * from "./IconedStatus";
 export * from "./IconWithLabel";
-export * from "./taskStateToIcon";
+export * from "./TaskStateIcon";
diff --git a/client/src/app/components/task-manager/TaskManagerDrawer.tsx b/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 { TaskStateIcon } from "../Icons";
 
 /** A version of `Task` specific for the task manager drawer components */
 interface TaskManagerTask {
@@ -126,28 +120,11 @@ 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}>
+    <TaskStateIcon state={taskState} />
+  </Tooltip>
+);
 
 const TaskItem: React.FC<{
   task: TaskManagerTask;
@@ -174,7 +151,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>

diff --git a/client/src/app/pages/tasks/tasks-page.tsx b/client/src/app/pages/tasks/tasks-page.tsx
@@ -43,7 +43,7 @@ import { TablePersistenceKeyPrefix } from "@app/Constants";
 import { useSelectionState } from "@migtools/lib-ui";
 import { useServerTasks } from "@app/queries/tasks";
 import { Task } from "@app/api/models";
-import { IconWithLabel, taskStateToIcon } from "@app/components/Icons";
+import { IconWithLabel, TaskStateIcon } from "@app/components/Icons";
 import { ManageColumnsToolbar } from "../applications/applications-table/components/manage-columns-toolbar";
 import dayjs from "dayjs";
 import { useTaskActions } from "./useTaskActions";
@@ -226,7 +226,7 @@ export const TasksPage: React.FC = () => {
     kind: kind ?? addon,
     state: (
       <IconWithLabel
-        icon={taskStateToIcon(state)}
+        icon={<TaskStateIcon state={state} />}
         label={
           <Link
             to={formatPath(Paths.taskDetails, {