From 240e5790f4ce08131704e4464abf1e10550a9820 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa <cristhian.lousa@gmail.com>
Date: Mon, 9 Dec 2024 17:13:28 -0300
Subject: [PATCH] chore(ui): add text-foreground class to NodeStatus build
 element (#5162)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (NodeStatus/index.tsx): add text-foreground class to span element to improve text styling in build status section

* ✨ (NodeStatus/index.tsx): improve styling and readability by adding flex and text-foreground classes to status elements

* ✨ (build-status-display.tsx): Add a new component 'BuildStatusDisplay' to improve code organization and readability in the NodeStatus component.
📝 (index.tsx): Refactor NodeStatus component to use the new 'BuildStatusDisplay' component for displaying build status, validation details, and last run time. This change enhances code maintainability and reduces duplication.
---
 .../components/build-status-display.tsx       | 72 +++++++++++++++++++
 .../components/NodeStatus/index.tsx           | 38 ++--------
 2 files changed, 79 insertions(+), 31 deletions(-)
 create mode 100644 src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx

diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx
new file mode 100644
index 000000000..152834975
--- /dev/null
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/components/build-status-display.tsx
@@ -0,0 +1,72 @@
+import {
+  RUN_TIMESTAMP_PREFIX,
+  STATUS_BUILD,
+  STATUS_BUILDING,
+  STATUS_INACTIVE,
+} from "@/constants/constants";
+import { BuildStatus } from "@/constants/enums";
+
+const StatusMessage = ({ children, className = "text-foreground" }) => (
+  <span className={`flex ${className}`}>{children}</span>
+);
+
+const TimeStamp = ({ prefix, time }) => (
+  <div className="flex items-center text-sm text-secondary-foreground">
+    <div>{prefix}</div>
+    <div className="ml-1 text-secondary-foreground">{time}</div>
+  </div>
+);
+
+const Duration = ({ duration }) => (
+  <div className="flex items-center text-secondary-foreground">
+    <div>Duration:</div>
+    <div className="ml-1">{duration}</div>
+  </div>
+);
+
+const ValidationDetails = ({
+  validationString,
+  lastRunTime,
+  validationStatus,
+}) => (
+  <div className="max-h-100 px-1 py-2.5">
+    <div className="flex max-h-80 flex-col gap-2 overflow-auto">
+      {validationString && (
+        <div className="text-sm text-foreground">{validationString}</div>
+      )}
+      {lastRunTime && (
+        <TimeStamp prefix={RUN_TIMESTAMP_PREFIX} time={lastRunTime} />
+      )}
+      <Duration duration={validationStatus?.data.duration} />
+    </div>
+  </div>
+);
+
+const BuildStatusDisplay = ({
+  buildStatus,
+  validationStatus,
+  validationString,
+  lastRunTime,
+}) => {
+  if (buildStatus === BuildStatus.BUILDING) {
+    return <StatusMessage>{STATUS_BUILDING}</StatusMessage>;
+  }
+
+  if (buildStatus === BuildStatus.INACTIVE) {
+    return <StatusMessage>{STATUS_INACTIVE}</StatusMessage>;
+  }
+
+  if (!validationStatus) {
+    return <StatusMessage>{STATUS_BUILD}</StatusMessage>;
+  }
+
+  return (
+    <ValidationDetails
+      validationString={validationString}
+      lastRunTime={lastRunTime}
+      validationStatus={validationStatus}
+    />
+  );
+};
+
+export default BuildStatusDisplay;
diff --git a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
index 00e5025a4..3104fafef 100644
--- a/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/components/NodeStatus/index.tsx
@@ -25,6 +25,7 @@ import { Check } from "lucide-react";
 import { useEffect, useRef, useState } from "react";
 import { useHotkeys } from "react-hotkeys-hook";
 import IconComponent from "../../../../components/common/genericIconComponent";
+import BuildStatusDisplay from "./components/build-status-display";
 import { normalizeTimeString } from "./utils/format-run-time";
 
 export default function NodeStatus({
@@ -199,37 +200,12 @@ export default function NodeStatus({
                 : "border-destructive bg-error-background",
             )}
             content={
-              buildStatus === BuildStatus.BUILDING ? (
-                <span> {STATUS_BUILDING} </span>
-              ) : buildStatus === BuildStatus.INACTIVE ? (
-                <span> {STATUS_INACTIVE} </span>
-              ) : !validationStatus ? (
-                <span className="flex">{STATUS_BUILD}</span>
-              ) : (
-                <div className="max-h-100 px-1 py-2.5">
-                  <div className="flex max-h-80 flex-col gap-2 overflow-auto">
-                    {validationString && (
-                      <div className="text-sm text-foreground">
-                        {validationString}
-                      </div>
-                    )}
-                    {lastRunTime && (
-                      <div className="flex items-center text-sm text-secondary-foreground">
-                        <div>{RUN_TIMESTAMP_PREFIX}</div>
-                        <div className="ml-1 text-secondary-foreground">
-                          {lastRunTime}
-                        </div>
-                      </div>
-                    )}
-                    <div className="flex items-center text-secondary-foreground">
-                      <div>Duration:</div>
-                      <div className="ml-1">
-                        {validationStatus?.data.duration}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              )
+              <BuildStatusDisplay
+                buildStatus={buildStatus}
+                validationStatus={validationStatus}
+                validationString={validationString}
+                lastRunTime={lastRunTime}
+              />
             }
             side="bottom"
           >