From 9cde3ef1eee2af2d280c21d7ae887c533bb79581 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Tue, 11 Jun 2024 12:32:58 -0300
Subject: [PATCH] Added Status button and fixed positioning of Node Header
 elements

---
 .../src/CustomNodes/GenericNode/index.tsx     | 88 ++++++++++---------
 .../CustomNodes/hooks/use-icons-status.tsx    | 42 +++------
 src/frontend/src/style/applies.css            |  4 +-
 3 files changed, 59 insertions(+), 75 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index 653ced0af..244b29f68 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -1,5 +1,6 @@
 import emojiRegex from "emoji-regex";
 import { useEffect, useMemo, useState } from "react";
+import Markdown from "react-markdown";
 import { NodeToolbar, useUpdateNodeInternals } from "reactflow";
 import IconComponent from "../../components/genericIconComponent";
 import InputComponent from "../../components/inputComponent";
@@ -19,6 +20,7 @@ import useAlertStore from "../../stores/alertStore";
 import { useDarkStore } from "../../stores/darkStore";
 import useFlowStore from "../../stores/flowStore";
 import useFlowsManagerStore from "../../stores/flowsManagerStore";
+import { useShortcutsStore } from "../../stores/shortcuts";
 import { useTypesStore } from "../../stores/typesStore";
 import { VertexBuildTypeAPI } from "../../types/api";
 import { NodeDataType } from "../../types/flow";
@@ -36,8 +38,6 @@ import useValidationStatusString from "../hooks/use-validation-status-string";
 import getFieldTitle from "../utils/get-field-title";
 import sortFields from "../utils/sort-fields";
 import ParameterComponent from "./components/parameterComponent";
-import { useShortcutsStore } from "../../stores/shortcuts";
-import Markdown from "react-markdown";
 
 export default function GenericNode({
   data,
@@ -108,11 +108,7 @@ export default function GenericNode({
   };
 
   const renderIconStatus = () => {
-    return (
-      <div className="generic-node-status-position flex items-center justify-center">
-        {iconStatus}
-      </div>
-    );
+    return iconStatus;
   };
 
   const getNodeBorderClassName = (
@@ -349,7 +345,7 @@ export default function GenericNode({
                       />
                     </div>
                   ) : (
-                    <div className="group flex items-start gap-1.5">
+                    <div className="group flex items-center gap-2">
                       <ShadTooltip content={data.node?.display_name}>
                         <div
                           onDoubleClick={(event) => {
@@ -366,6 +362,22 @@ export default function GenericNode({
                           {data.node?.display_name}
                         </div>
                       </ShadTooltip>
+                      {isOutdated && (
+                        <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
+                          <Button
+                            onClick={handleUpdateCode}
+                            variant="none"
+                            size="none"
+                            className={"group"}
+                            loading={loadingUpdate}
+                          >
+                            <IconComponent
+                              name="AlertTriangle"
+                              className="h-5 w-5 fill-status-yellow text-muted"
+                            />
+                          </Button>
+                        </ShadTooltip>
+                      )}
                     </div>
                   )}
                 </div>
@@ -482,22 +494,31 @@ export default function GenericNode({
             </div>
             {showNode && (
               <>
-                <div className="flex flex-shrink-0 items-center gap-1">
-                  {isOutdated && (
-                    <ShadTooltip content={TOOLTIP_OUTDATED_NODE}>
-                      <Button
-                        onClick={handleUpdateCode}
-                        variant="secondary"
-                        className={"h-9 px-1.5"}
-                        loading={loadingUpdate}
-                      >
-                        <IconComponent
-                          name="AlertTriangle"
-                          className="h-5 w-5 text-status-yellow"
-                        />
-                      </Button>
-                    </ShadTooltip>
-                  )}
+                <div className="flex flex-shrink-0 items-center gap-3">
+                  <Button
+                    onClick={() => {
+                      if (buildStatus === BuildStatus.BUILDING || isBuilding)
+                        return;
+                      setValidationStatus(null);
+                      buildFlow({ stopNodeId: data.id });
+                    }}
+                    variant="none"
+                    size="none"
+                    className="group"
+                  >
+                    <div
+                      data-testid={
+                        `button_run_` + data?.node?.display_name.toLowerCase()
+                      }
+                    >
+                      <IconComponent
+                        name="Play"
+                        className={
+                          "h-5 w-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100"
+                        }
+                      />
+                    </div>
+                  </Button>
                   <ShadTooltip
                     content={
                       buildStatus === BuildStatus.BUILDING ? (
@@ -527,24 +548,7 @@ export default function GenericNode({
                     }
                     side="bottom"
                   >
-                    <Button
-                      onClick={() => {
-                        if (buildStatus === BuildStatus.BUILDING || isBuilding)
-                          return;
-                        setValidationStatus(null);
-                        buildFlow({ stopNodeId: data.id });
-                      }}
-                      variant="secondary"
-                      className={"group h-9 px-1.5"}
-                    >
-                      <div
-                        data-testid={
-                          `button_run_` + data?.node?.display_name.toLowerCase()
-                        }
-                      >
-                        {renderIconStatus()}
-                      </div>
-                    </Button>
+                    {renderIconStatus()}
                   </ShadTooltip>
                 </div>
               </>
diff --git a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
index 55936c6c9..e433a634d 100644
--- a/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
+++ b/src/frontend/src/CustomNodes/hooks/use-icons-status.tsx
@@ -1,7 +1,4 @@
-import IconComponent from "../../components/genericIconComponent";
-import Checkmark from "../../components/ui/checkmark";
 import Loading from "../../components/ui/loading";
-import Xmark from "../../components/ui/xmark";
 import { BuildStatus } from "../../constants/enums";
 import { VertexBuildTypeAPI } from "../../types/api";
 import { cn } from "../../utils/utils";
@@ -24,35 +21,18 @@ const useIconStatus = (
       return <Loading className="text-medium-indigo" />;
     } else {
       return (
-        <>
-          <IconComponent
-            name="Play"
-            className={cn(
-              !conditionSuccess && !conditionInactive && !conditionError
-                ? "opacity-100"
-                : "opacity-0",
-              "absolute ml-0.5 h-5 fill-current stroke-2 text-muted-foreground transition-all group-hover:text-medium-indigo group-hover/node:opacity-100",
-            )}
-          />
-          {conditionSuccess ? (
-            <Checkmark
-              className="absolute ml-0.5 h-5 stroke-2 text-status-green opacity-100 transition-all group-hover/node:opacity-0"
-              isVisible={true}
-            />
-          ) : conditionInactive ? (
-            <IconComponent
-              name="Play"
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-gray opacity-30 transition-all group-hover/node:opacity-0"
-            />
-          ) : conditionError ? (
-            <Xmark
-              isVisible={true}
-              className="absolute ml-0.5 h-5 fill-current stroke-2 text-status-red opacity-100 transition-all group-hover/node:opacity-0"
-            />
-          ) : (
-            <></>
+        <div
+          className={cn(
+            "h-4 w-4 shrink-0 rounded-full",
+            conditionSuccess
+              ? "bg-status-green"
+              : conditionInactive
+                ? "bg-status-gray"
+                : conditionError
+                  ? "bg-status-red"
+                  : "bg-muted-foreground/40",
           )}
-        </>
+        />
       );
     }
   };
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 550c86d60..fe51b6af4 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -333,13 +333,13 @@
     @apply relative flex flex-col justify-center bg-background transition-all;
   }
   .generic-node-div-title {
-    @apply flex w-full items-center gap-2 border-b bg-muted p-4;
+    @apply flex w-full items-center gap-2 border-b bg-muted p-5;
   }
   .generic-node-title-arrangement {
     @apply flex-max-width items-center truncate;
   }
   .generic-node-icon {
-    @apply h-10 w-10 rounded p-1;
+    @apply h-8 w-8 rounded;
   }
   .generic-node-tooltip-div {
     @apply ml-2 max-w-[220px] truncate;