From 418a173febb9c7e6f1670b0045c5fdd235dddde1 Mon Sep 17 00:00:00 2001
From: Cristhian Zanforlin Lousa
 <72977554+Cristhianzl@users.noreply.github.com>
Date: Thu, 18 Jul 2024 17:40:41 -0300
Subject: [PATCH] fix: adjust UI on nodetoolbar caused by svg icon without
 props (#2809)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* 📝 (GenericNode/index.tsx): Remove commented-out code for openWDoubleClick in GenericNode component
🔧 (freezeAll.jsx): Refactor FreezeAllSvg component to use cn utility function for className and spread props
📝 (nodeToolbarComponent/index.tsx): Clean up commented-out code and unused elements in NodeToolbarComponent to improve code readability and maintainability

* [autofix.ci] apply automated fixes

---------

Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
---
 .../src/CustomNodes/GenericNode/index.tsx     |  2 -
 .../src/icons/freezeAll/freezeAll.jsx         |  7 ++-
 .../components/nodeToolbarComponent/index.tsx | 57 ++-----------------
 3 files changed, 9 insertions(+), 57 deletions(-)

diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx
index c71313b3b..f52cc514c 100644
--- a/src/frontend/src/CustomNodes/GenericNode/index.tsx
+++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx
@@ -320,8 +320,6 @@ export default function GenericNode({
     return (
       <NodeToolbar>
         <NodeToolbarComponent
-          //          openWDoubleClick={openWDoubleCLick}
-          //          setOpenWDoubleClick={setOpenWDoubleCLick}
           data={data}
           deleteNode={(id) => {
             takeSnapshot();
diff --git a/src/frontend/src/icons/freezeAll/freezeAll.jsx b/src/frontend/src/icons/freezeAll/freezeAll.jsx
index 4c2b22bc3..de98a92e3 100644
--- a/src/frontend/src/icons/freezeAll/freezeAll.jsx
+++ b/src/frontend/src/icons/freezeAll/freezeAll.jsx
@@ -1,10 +1,13 @@
-const FreezeAllSvg = (props) => {
+import { cn } from "../../utils/utils";
+
+const FreezeAllSvg = ({ className, ...props }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
       version="1.2"
       viewBox="0 0 24 24"
-      className="h-4 w-4 stroke-[1.5]"
+      className={cn("h-4 w-4 stroke-[1.5]", className)}
+      {...props}
     >
       <title>snowflake-svg</title>
       <path
diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
index 684298f77..f3cbebf96 100644
--- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
+++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx
@@ -219,10 +219,6 @@ export default function NodeToolbarComponent({
     },
   });
 
-  //  useEffect(() => {
-  //    if (openWDoubleClick) setShowModalAdvanced(true);
-  //  }, [openWDoubleClick, setOpenWDoubleClick]);
-
   const openInNewTab = (url) => {
     window.open(url, "_blank", "noreferrer");
   };
@@ -492,24 +488,6 @@ export default function NodeToolbarComponent({
             </ShadTooltip>
           )}
 
-          {/*<ShadTooltip content={"Save"} side="top">
-            <button
-              data-testid="save-button-modal"
-              className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-                hasCode ? " " : " rounded-l-md ",
-              )}
-              onClick={(event) => {
-                event.preventDefault();
-                if (isSaved) {
-                  return setShowOverrideModal(true);
-                }
-                saveComponent(cloneDeep(data), false);
-              }}
-            >
-              <IconComponent name="SaveAll" className="h-4 w-4" />
-            </button>
-          </ShadTooltip>*/}
           <ShadTooltip
             content={displayShortcut(
               shortcuts.find(
@@ -542,21 +520,6 @@ export default function NodeToolbarComponent({
             </button>
           </ShadTooltip>
 
-          {/*<ShadTooltip content={"Duplicate"} side="top">
-            <button
-              data-testid="duplicate-button-modal"
-              className={classNames(
-                "relative -ml-px inline-flex items-center bg-background px-2 py-2 text-foreground shadow-md ring-1 ring-inset ring-ring  transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
-              )}
-              onClick={(event) => {
-                event.preventDefault();
-                handleSelectChange("duplicate");
-              }}
-            >
-              <IconComponent name="Copy" className="h-4 w-4" />
-            </button>
-          </ShadTooltip>*/}
-
           <Select onValueChange={handleSelectChange} value="">
             <ShadTooltip content="All" side="top">
               <SelectTrigger>
@@ -564,7 +527,7 @@ export default function NodeToolbarComponent({
                   <div
                     data-testid="more-options-modal"
                     className={classNames(
-                      "relative -ml-px inline-flex h-8 w-[31px] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
+                      "relative -ml-px inline-flex h-8 w-[2rem] items-center rounded-r-md bg-background text-foreground shadow-md ring-1 ring-inset ring-ring transition-all duration-500 ease-in-out hover:bg-muted focus:z-10",
                     )}
                   >
                     <IconComponent
@@ -659,19 +622,7 @@ export default function NodeToolbarComponent({
                   />
                 </SelectItem>
               )}
-              {/* {(!hasStore || !hasApiKey || !validApiKey) && (
-                <SelectItem value={"Download"}>
-                  <ToolbarSelectItem
-                    shortcut={
-                      shortcuts.find((obj) => obj.name === "Download")
-                        ?.shortcut!
-                    }
-                    value={"Download"}
-                    icon={"Download"}
-                    dataTestId="Download-button-modal"
-                  />
-                </SelectItem>
-              )} */}
+
               <SelectItem
                 value={"documentation"}
                 disabled={data.node?.documentation === ""}
@@ -717,7 +668,7 @@ export default function NodeToolbarComponent({
                   }
                   value={"Freeze"}
                   icon={"Snowflake"}
-                  dataTestId="group-button-modal"
+                  dataTestId="freeze-button"
                   style={`${frozen ? " text-ice" : ""} transition-all`}
                 />
               </SelectItem>
@@ -729,7 +680,7 @@ export default function NodeToolbarComponent({
                   }
                   value={"Freeze Path"}
                   icon={"FreezeAll"}
-                  dataTestId="group-button-modal"
+                  dataTestId="freeze-path-button"
                   style={`${frozen ? " text-ice" : ""} transition-all`}
                 />
               </SelectItem>