Use icon classes instead of strings for history content item states

client/src/components/History/Content/model/states.ts

@@ -1,3 +1,13 @@
+import {
+    faClock,
+    faCloud,
+    faExclamationTriangle,
+    faLock,
+    faPause,
+    faSpinner,
+    type IconDefinition,
+} from "@fortawesome/free-solid-svg-icons";
+
 import type { DCESummary, HDADetailed, HDCADetailed } from "@/api";
 import { ERROR_DATASET_STATES, NON_TERMINAL_DATASET_STATES } from "@/api/datasets";
 import type { HistoryContentsResult } from "@/api/histories";
@@ -34,7 +44,7 @@ interface StateRepresentation {
     status: "success" | "warning" | "info" | "danger" | "secondary";
     text?: string;
     displayName?: string;
-    icon?: string;
+    icon?: IconDefinition;
     spin?: boolean;
     nonDb?: boolean;
 }
@@ -64,86 +74,86 @@ export const STATES: StateMap = {
         status: "warning",
         text: "This is a new dataset and not all of its data are available yet.",
         displayName: "new",
-        icon: "clock",
+        icon: faClock,
     },
     /** the job that will produce the dataset queued in the runner */
     queued: {
         status: "warning",
         text: "This job is waiting to run.",
         displayName: "queued",
-        icon: "clock",
+        icon: faClock,
     },
     /** the job that will produce the dataset is running */
     running: {
         status: "warning",
         text: "This job is currently running.",
         displayName: "running",
-        icon: "spinner",
+        icon: faSpinner,
         spin: true,
     },
     /** metadata for the dataset is being discovered/set */
     setting_metadata: {
         status: "warning",
         text: "Metadata is being auto-detected.",
         displayName: "setting metadata",
-        icon: "spinner",
+        icon: faSpinner,
         spin: true,
     },
     /** is uploading and not ready */
     upload: {
         status: "warning",
         text: "This dataset is currently uploading.",
         displayName: "uploading",
-        icon: "spinner",
+        icon: faSpinner,
         spin: true,
     },
     /** remote dataset */
     deferred: {
         status: "info",
         text: "This dataset is remote, has not been ingested by Galaxy, and full metadata may not be available.",
         displayName: "deferred",
-        icon: "cloud",
+        icon: faCloud,
     },
     /** the job that will produce the dataset paused */
     paused: {
         status: "info",
         text: "This job is paused. Use the 'Resume Paused Jobs' in the history menu to resume.",
         displayName: "paused",
-        icon: "pause",
+        icon: faPause,
     },
     /** deleted while uploading */
     discarded: {
         status: "danger",
         text: "This dataset is discarded - the job creating it may have been cancelled or it may have been imported without file data.",
         displayName: "discarded",
-        icon: "exclamation-triangle",
+        icon: faExclamationTriangle,
     },
     /** the tool producing this dataset has errored */
     error: {
         status: "danger",
         text: "An error occurred with this dataset.",
         displayName: "error",
-        icon: "exclamation-triangle",
+        icon: faExclamationTriangle,
     },
     /** metadata discovery/setting failed or errored (but otherwise ok) */
     failed_metadata: {
         status: "danger",
         text: "Metadata generation failed. Please retry.",
         displayName: "failed metadata",
-        icon: "exclamation-triangle",
+        icon: faExclamationTriangle,
     },
     /** the job has failed, this is not a dataset but a job state used in the collection job state summary. */
     failed: {
         status: "danger",
         displayName: "failed",
-        icon: "exclamation-triangle",
+        icon: faExclamationTriangle,
     },
     /** the dataset is not yet loaded in the UI. This state is only visual and transitional, it does not exist in the database. */
     placeholder: {
         status: "secondary",
         text: "This dataset is being fetched.",
         displayName: "loading",
-        icon: "spinner",
+        icon: faSpinner,
         spin: true,
         nonDb: true,
     },
@@ -152,22 +162,22 @@ export const STATES: StateMap = {
         status: "danger",
         text: "Failed to populate the collection.",
         displayName: "failed",
-        icon: "exclamation-triangle",
+        icon: faExclamationTriangle,
         nonDb: true,
     },
     /** the `populated_state: new`. This state is only visual and transitional, it does not exist in the database. */
     new_populated_state: {
         status: "warning",
         text: "This is a new collection and not all of its data are available yet.",
         displayName: "new",
-        icon: "clock",
+        icon: faClock,
         nonDb: true,
     },
     inaccessible: {
         status: "warning",
         text: "User not allowed to access this dataset.",
         displayName: "inaccessible",
-        icon: "lock",
+        icon: faLock,
         nonDb: true,
     },
 } as const satisfies StateMap;