Add component TaskStateToIcon

Signed-off-by: Scott J Dickerson <sdickers@redhat.com>

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

@@ -16,12 +16,41 @@ import {
   NotificationDrawerListItemBody,
   NotificationDrawerListItemHeader,
 } from "@patternfly/react-core";
-import CubesIcon from "@patternfly/react-icons/dist/esm/icons/cubes-icon";
+import {
+  CubesIcon,
+  InProgressIcon,
+  PauseCircleIcon,
+  PendingIcon,
+  CheckCircleIcon,
+  TaskIcon,
+} from "@patternfly/react-icons";
 
 import { TaskState } from "@app/api/models";
 import { useTaskManagerContext } from "./TaskManagerContext";
 import { useServerTasks } from "@app/queries/tasks";
 
+/** A version of `Task` specific for the task manager drawer components */
+interface TaskManagerTask {
+  id: number;
+
+  createUser: string;
+  updateUser: string;
+  createTime: string;
+  started?: string;
+  terminated?: string;
+
+  name: string;
+  kind: string;
+  addon: string;
+  extensions: string[];
+  state: TaskState;
+  priority: number;
+  application: { id: number; name: string };
+  preemptEnabled: boolean;
+}
+
+const PAGE_SIZE = 20;
+
 interface TaskManagerDrawerProps {
   ref?: React.ForwardedRef<HTMLElement>;
 }
@@ -77,37 +106,31 @@ export const TaskManagerDrawer: React.FC<TaskManagerDrawerProps> = forwardRef(
 );
 TaskManagerDrawer.displayName = "TaskManagerDrawer";
 
-const TaskItem: React.FC<{ task: TaskManagerTask }> = ({ task }) => (
-  <NotificationDrawerListItem key={task.id} variant="info">
-    <NotificationDrawerListItemHeader
-      variant="success"
-      title={`Task ID ${task.id}`}
-      // icon={}   TODO: Icon based on Task status
-    ></NotificationDrawerListItemHeader>
-    <NotificationDrawerListItemBody timestamp="right about now, funk soul brother"></NotificationDrawerListItemBody>
-  </NotificationDrawerListItem>
-);
-
-interface TaskManagerTask {
-  id: number;
-
-  createUser: string;
-  updateUser: string;
-  createTime: string;
-  started?: string;
-  terminated?: string;
-
-  name: string;
-  kind: string;
-  addon: string;
-  extensions: string[];
-  state: TaskState;
-  priority: number;
-  application: { id: number; name: string };
-  preemptEnabled: boolean;
-}
+const TaskStateToIcon: React.FC<{ task: TaskManagerTask }> = ({ task }) =>
+  task.state === "Ready" ? (
+    <CheckCircleIcon />
+  ) : task.state === "Postponed" ? (
+    <PauseCircleIcon />
+  ) : task.state === "Pending" ? (
+    <PendingIcon />
+  ) : task.state === "Running" ? (
+    <InProgressIcon />
+  ) : (
+    <TaskIcon />
+  );
 
-const PAGE_SIZE = 20;
+const TaskItem: React.FC<{ task: TaskManagerTask }> = ({ task }) => {
+  return (
+    <NotificationDrawerListItem key={task.id} variant="info">
+      <NotificationDrawerListItemHeader
+        variant="custom"
+        title={`Task ID ${task.id}`}
+        icon={<TaskStateToIcon task={task} />}
+      ></NotificationDrawerListItemHeader>
+      <NotificationDrawerListItemBody timestamp="right about now, funk soul brother"></NotificationDrawerListItemBody>
+    </NotificationDrawerListItem>
+  );
+};
 
 const useTaskManagerData = () => {
   const [pageSize, setPageSize] = useState(PAGE_SIZE);
@@ -129,28 +152,6 @@ const useTaskManagerData = () => {
     },
     5000
   );
-
-  const tasks: TaskManagerTask[] = useMemo(
-    () =>
-      result.data.map((task) => ({
-        id: task.id,
-        createUser: task.createUser,
-        updateUser: task.updateUser,
-        createTime: task.createTime, // TODO: date?
-        started: task.started, // TODO: date?
-        terminated: task.terminated, // TODO: date?
-        name: task.name,
-        kind: task.kind,
-        addon: task.addon,
-        extensions: task.extensions,
-        state: task.state,
-        priority: task.priority,
-        application: task.application,
-        preemptEnabled: task?.policy?.preemptEnabled ?? false,
-      })),
-    [result.data]
-  );
-
   // {
   //   id: 999,
   //   createUser: "",
@@ -165,6 +166,36 @@ const useTaskManagerData = () => {
   //   application: { id: 1, name: "App1" },
   // },
 
+  const tasks: TaskManagerTask[] = useMemo(
+    () =>
+      !result.data
+        ? []
+        : result.data.map(
+            (task) =>
+              ({
+                id: task.id ?? -1,
+                createUser: task.createUser ?? "",
+                updateUser: task.updateUser ?? "",
+                createTime: task.createTime ?? "", // TODO: date?
+                started: task.started ?? "", // TODO: date?
+                terminated: task.terminated ?? "", // TODO: date?
+                name: task.name,
+                kind: task.kind,
+                addon: task.addon,
+                extensions: task.extensions,
+                state: task.state ?? "",
+                priority: task.priority,
+                application: task.application,
+                preemptEnabled: task?.policy?.preemptEnabled ?? false,
+
+                // TODO: Add any checks that could be needed later...
+                //  - isCancelable (does the current user own the task? other things to check?)
+                //  - isPreemptionToggleAllowed
+              }) as TaskManagerTask
+          ),
+    [result.data]
+  );
+
   return {
     tasks,
     increasePageSize,