Track HiveGrid Cloud planning reference

hivegrid-cloud/apps/web/app/modules/workflowEngine/components/executions/WorkflowResultBadge.tsx

@@ -0,0 +1,60 @@
+import { Colors } from "~/application/enums/shared/Colors";
+import SimpleBadge from "~/components/ui/badges/SimpleBadge";
+import { WorkflowStatus } from "../../dtos/WorkflowStatus";
+import ShowModalButton from "~/components/ui/json/ShowModalButton";
+import ErrorBanner from "~/components/ui/banners/ErrorBanner";
+import { t as i18nT } from "i18next";
+import { formatWorkflowExecutionErrorText } from "../../utils/workflowExecutionErrorText";
+
+interface Props {
+  createdAt: Date;
+  startedAt: Date | null;
+  completedAt: Date | null;
+  status: WorkflowStatus | (string & {});
+  error: string | null;
+}
+enum State {
+  Running = "running",
+  Success = "success",
+  Error = "error",
+  WaitingForBlock = "waitingBlock",
+  Unknown = "unknown",
+}
+export default function WorkflowResultBadge({ startedAt, completedAt, status, error }: Props) {
+  function getState() {
+    if (status === "waitingBlock") {
+      return State.WaitingForBlock;
+    } else if (status === "running") {
+      return State.Running;
+    } else if (status === "success") {
+      return State.Success;
+    } else if (status === "error") {
+      return State.Error;
+    }
+    return State.Unknown;
+  }
+  function getColor() {
+    if (!status || status === "waitingBlock") {
+      return Colors.YELLOW;
+    } else if (status === "running") {
+      return Colors.BLUE;
+    } else if (status === "success") {
+      return Colors.GREEN;
+    } else if (status === "error") {
+      return Colors.RED;
+    } else {
+      return Colors.UNDEFINED;
+    }
+  }
+  return (
+    <div>
+      {error ? (
+        <ShowModalButton title={<SimpleBadge className="hover:underline" title={i18nT(`workflows.executionStatus.${getState()}`)} color={getColor()} />}>
+          <ErrorBanner title={i18nT("workflows.executionStatus.error")} text={formatWorkflowExecutionErrorText(error, i18nT)} />
+        </ShowModalButton>
+      ) : (
+        <SimpleBadge title={i18nT(`workflows.executionStatus.${getState()}`)} color={getColor()} />
+      )}
+    </div>
+  );
+}