From 1ce4193a9958159552a04ac5cb2e6db000eb3ea6 Mon Sep 17 00:00:00 2001
From: igorrCarvalho <igorsilvabhz6@gmail.com>
Date: Tue, 12 Mar 2024 16:30:05 -0300
Subject: [PATCH] Feat: Create ToolbarSelectItem to avoid duplicated code

---
 .../components/nodeToolbarComponent/index.tsx | 160 +++++-------------
 .../toolbarSelectItem/index.tsx               |  44 +++++
 src/frontend/src/types/components/index.ts    |  16 ++
 3 files changed, 104 insertions(+), 116 deletions(-)
 create mode 100644 src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx

diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index fa2c4757b..06ee3719e 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -30,6 +30,7 @@ import {
   updateFlowPosition,
 } from "../../../../utils/reactflowUtils";
 import { classNames, cn } from "../../../../utils/utils";
+import ToolbarSelectItem from "./toolbarSelectItem";
 
 export default function NodeToolbarComponent({
   data,
@@ -445,86 +446,42 @@ export default function NodeToolbarComponent({
             <SelectContent>
               {nodeLength > 0 && (
                 <SelectItem value={nodeLength === 0 ? "disabled" : "advanced"}>
-                  <div className="flex">
-                    <IconComponent
-                      name="Settings2"
-                      className="relative top-0.5 mr-2 h-4 w-4 "
-                    />{" "}
-                    <span className="">Edit</span>{" "}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                      <IconComponent
-                        name="Command"
-                        className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                      ></IconComponent>
-                    ) : (
-                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                        Ctrl +{" "}
-                      </span>
-                    )}
-                    <span className="absolute right-2 top-[0.46em]">E</span>
-                  </div>
+                  <ToolbarSelectItem
+                    keyboardKey="E"
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                    shift={false}
+                    value={"Edit"}
+                    icon={"Settings2"}
+                  />
                 </SelectItem>
               )}
               <SelectItem value={"duplicate"}>
-                <div className="flex" data-testid="save-button-modal">
-                  <IconComponent
-                    name="Copy"
-                    className="relative top-0.5 mr-2 h-4 w-4"
-                  />
-                  Duplicate
-                  {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                    <IconComponent
-                      name="Command"
-                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                    ></IconComponent>
-                  ) : (
-                    <span className="absolute right-[1.20rem] top-[0.40em] stroke-2">
-                      Ctrl +{" "}
-                    </span>
-                  )}
-                  <span className="absolute right-2 top-[0.4em]">D</span>
-                </div>{" "}
+                <ToolbarSelectItem
+                  keyboardKey="D"
+                  isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                  shift={false}
+                  value={"Duplicate"}
+                  icon={"Copy"}
+                />
               </SelectItem>
               <SelectItem value={"copy"}>
-                <div className="flex">
-                  <IconComponent
-                    name="Clipboard"
-                    className="relative top-0.5 mr-2 h-4 w-4 "
-                  />{" "}
-                  <span className="">Copy</span>{" "}
-                  {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                    <IconComponent
-                      name="Command"
-                      className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                    ></IconComponent>
-                  ) : (
-                    <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                      Ctrl +{" "}
-                    </span>
-                  )}
-                  <span className="absolute right-2 top-[0.4em]">C</span>
-                </div>
+                <ToolbarSelectItem
+                  keyboardKey="C"
+                  isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                  shift={false}
+                  value={"Copy"}
+                  icon={"Clipboard"}
+                />
               </SelectItem>
               {isOutdated && (
                 <SelectItem value={"update"}>
-                  <div className="flex">
-                    <IconComponent
-                      name="Code"
-                      className="relative top-0.5 mr-2 h-4 w-4 "
-                    />{" "}
-                    <span className="">Update</span>{" "}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                      <IconComponent
-                        name="Command"
-                        className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                      ></IconComponent>
-                    ) : (
-                      <span className="absolute right-[1.15rem] top-[0.40em] stroke-2">
-                        Ctrl +{" "}
-                      </span>
-                    )}
-                    <span className="absolute right-2 top-[0.4em]">U</span>
-                  </div>
+                  <ToolbarSelectItem
+                    keyboardKey="U"
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                    shift={false}
+                    value={"Update"}
+                    icon={"Code"}
+                  />
                 </SelectItem>
               )}
               {hasStore && (
@@ -532,28 +489,14 @@ export default function NodeToolbarComponent({
                   value={"Share"}
                   disabled={!hasApiKey || !validApiKey}
                 >
-                  <div className="flex" data-testid="share-button-modal">
-                    <IconComponent
-                      name="Share3"
-                      className="relative top-0.5 -m-1 mr-1 h-6 w-6"
-                    />{" "}
-                    Share{" "}
-                    {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                      <IconComponent
-                        name="Command"
-                        className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                      ></IconComponent>
-                    ) : (
-                      <span className="absolute right-[2.10rem] top-[0.43em] stroke-2">
-                        Ctrl
-                      </span>
-                    )}
-                    <IconComponent
-                      name="ArrowBigUp"
-                      className="absolute right-[1.09rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                    ></IconComponent>
-                    <span className="absolute right-2 top-[0.45em]">S</span>
-                  </div>{" "}
+                  <ToolbarSelectItem
+                    keyboardKey="S"
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                    shift={true}
+                    value={"Share"}
+                    icon={"Share3"}
+                    styleObj={{iconClasses: "relative top-0.5 -m-1 mr-1 h-6 w-6"}}
+                  />
                 </SelectItem>
               )}
               {!hasStore && (
@@ -571,28 +514,13 @@ export default function NodeToolbarComponent({
                 value={"documentation"}
                 disabled={data.node?.documentation === ""}
               >
-                <div className="flex">
-                  <IconComponent
-                    name="FileText"
-                    className="relative top-0.5 mr-2 h-4 w-4 "
-                  />{" "}
-                  <span className="">Docs</span>{" "}
-                  {navigator.userAgent.toUpperCase().includes("MAC") ? (
-                    <IconComponent
-                      name="Command"
-                      className="absolute right-[2rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                    ></IconComponent>
-                  ) : (
-                    <span className="absolute right-[2.10rem] top-[0.43em] stroke-2">
-                      Ctrl
-                    </span>
-                  )}
-                  <IconComponent
-                    name="ArrowBigUp"
-                    className="absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2"
-                  ></IconComponent>
-                  <span className="absolute right-2 top-[0.43em]">D</span>
-                </div>
+                <ToolbarSelectItem
+                    keyboardKey="D"
+                    isMac={navigator.userAgent.toUpperCase().includes("MAC")}
+                    shift={true}
+                    value={"Docs"}
+                    icon={"FileText"}
+                  />
               </SelectItem>
               {isMinimal && (
                 <SelectItem value={"show"}>
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
new file mode 100644
index 000000000..00e31e08a
--- /dev/null
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/toolbarSelectItem/index.tsx
@@ -0,0 +1,44 @@
+import { useEffect } from "react";
+import ForwardedIconComponent from "../../../../../components/genericIconComponent";
+import { toolbarSelectItemProps } from "../../../../../types/components";
+
+export default function ToolbarSelectItem({
+  shift,
+  isMac,
+  keyboardKey,
+  value,
+  icon,
+  styleObj,
+}: toolbarSelectItemProps) {
+
+  return (
+    <div className="flex">
+      <ForwardedIconComponent
+        name={icon}
+        className={`relative top-0.5 mr-2 h-4 w-4 ${styleObj?.iconClasses}`}
+      />{" "}
+      <span className={styleObj?.valueClasses}>{value}</span>{" "}
+      {isMac ? (
+        <ForwardedIconComponent
+          name="Command"
+          className={`absolute right-[${shift ? "2rem" : "1.15rem"}] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.commandClasses}`}
+        ></ForwardedIconComponent>
+      ) : (
+        <span className={`absolute right-[${shift ? "2.10rem" : "1.15rem"}] top-[0.43em] stroke-2 ${styleObj?.ctrlClasses}`}>
+            {shift ? (
+              "Ctrl"
+            ) : (
+              "Ctrl +"
+            )}
+        </span>
+      )}
+        {shift && (
+          <ForwardedIconComponent
+            name="ArrowBigUp"
+            className={`absolute right-[1.15rem] top-[0.65em] h-3.5 w-3.5 stroke-2 ${styleObj?.shiftClasses}`}
+          />
+        )}
+        <span className={`absolute right-2 top-[0.43em] ${styleObj?.keyClasses}`}>{keyboardKey}</span>
+    </div>
+  );
+}
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 379f5be30..55f33da16 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -688,3 +688,19 @@ export type IOFileInputProps = {
   field: TemplateVariableType;
   updateValue: (e: any, type: string) => void;
 };
+
+export type toolbarSelectItemProps = {
+  isMac: boolean;
+  shift: boolean;
+  keyboardKey: string;
+  value: string;
+  icon: string;
+  styleObj?: {
+    iconClasses?: string;
+    commandClasses?: string;
+    shiftClasses?: string;
+    ctrlClasses?: string;
+    keyClasses?: string;
+    valueClasses?: string;
+  }
+};