fix: adjust UI on nodetoolbar caused by svg icon without props (#2809)

* 📝 (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>
langflow-ai · Jul 18, 2024 · 418a173 · 418a173
1 parent f86e3d3
commit 418a173
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 57 deletions.
diff --git 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
@@ -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
@@ -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,29 +520,14 @@ 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>
                 <div>
                   <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>