Add disabled property to DropDownComponentType, fix styleUtils import, and update RefreshButton component

src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx

@@ -253,15 +253,15 @@ export default function ParameterComponent({
                     {item.display_name === "" ? "" : " - "}
                     {item.display_name.split(", ").length > 2
                       ? item.display_name.split(", ").map((el, index) => (
-                        <React.Fragment key={el + name}>
-                          <span>
-                            {index ===
+                          <React.Fragment key={el + name}>
+                            <span>
+                              {index ===
                               item.display_name.split(", ").length - 1
-                              ? el
-                              : (el += `, `)}
-                          </span>
-                        </React.Fragment>
-                      ))
+                                ? el
+                                : (el += `, `)}
+                            </span>
+                          </React.Fragment>
+                        ))
                       : item.display_name}
                   </span>
                 ) : (
@@ -270,14 +270,14 @@ export default function ParameterComponent({
                     {item.type === "" ? "" : " - "}
                     {item.type.split(", ").length > 2
                       ? item.type.split(", ").map((el, index) => (
-                        <React.Fragment key={el + name}>
-                          <span>
-                            {index === item.type.split(", ").length - 1
-                              ? el
-                              : (el += `, `)}
-                          </span>
-                        </React.Fragment>
-                      ))
+                          <React.Fragment key={el + name}>
+                            <span>
+                              {index === item.type.split(", ").length - 1
+                                ? el
+                                : (el += `, `)}
+                            </span>
+                          </React.Fragment>
+                        ))
                       : item.type}
                   </span>
                 )}
@@ -346,7 +346,7 @@ export default function ParameterComponent({
       className={
         "relative mt-1 flex w-full flex-wrap items-center justify-between bg-muted px-5 py-2" +
         ((name === "code" && type === "code") ||
-          (name.includes("code") && proxy)
+        (name.includes("code") && proxy)
           ? " hidden "
           : "")
       }
@@ -355,21 +355,26 @@ export default function ParameterComponent({
         <div
           className={
             "w-full truncate text-sm" +
-            (left ? "" : " gap-2 flex justify-end items-center") +
+            (left ? "" : " flex items-center justify-end gap-2") +
             (info !== "" ? " flex items-center" : "")
           }
         >
-          {!left && data.node?.pinned  &&
+          {!left && data.node?.pinned && (
             <div>
-              <IconComponent className="w-5 h-5 text-ice" name={"Snowflake"} />
-            </div>}
+              <IconComponent className="h-5 w-5 text-ice" name={"Snowflake"} />
+            </div>
+          )}
           {proxy ? (
             <ShadTooltip content={<span>{proxy.id}</span>}>
-              <span className={!left && data.node?.pinned?" text-ice":""}>{title}</span>
+              <span className={!left && data.node?.pinned ? " text-ice" : ""}>
+                {title}
+              </span>
             </ShadTooltip>
           ) : (
-            <span className={!left && data.node?.pinned?" text-ice":""}>{title}</span>
-            )}
+            <span className={!left && data.node?.pinned ? " text-ice" : ""}>
+              {title}
+            </span>
+          )}
           <span className={(info === "" ? "" : "ml-1 ") + " text-status-red"}>
             {required ? " *" : ""}
           </span>
@@ -431,8 +436,8 @@ export default function ParameterComponent({
         )}
 
         {left === true &&
-          type === "str" &&
-          !data.node?.template[name].options ? (
+        type === "str" &&
+        !data.node?.template[name].options ? (
           <div className="mt-2 w-full">
             {data.node?.template[name].list ? (
               <div className="w-5/6 flex-grow">
@@ -440,7 +445,7 @@ export default function ParameterComponent({
                   disabled={disabled}
                   value={
                     !data.node.template[name].value ||
-                      data.node.template[name].value === ""
+                    data.node.template[name].value === ""
                       ? [""]
                       : data.node.template[name].value
                   }
@@ -523,6 +528,7 @@ export default function ParameterComponent({
           <div className="mt-2 flex w-full items-center">
             <div className="w-5/6 flex-grow">
               <Dropdown
+                disabled={disabled}
                 isLoading={isLoading}
                 options={data.node.template[name].options}
                 onSelect={handleOnNewValue}
@@ -603,10 +609,10 @@ export default function ParameterComponent({
               editNode={false}
               value={
                 !data.node!.template[name].value ||
-                  data.node!.template[name].value?.toString() === "{}"
+                data.node!.template[name].value?.toString() === "{}"
                   ? {
-                    yourkey: "value",
-                  }
+                      yourkey: "value",
+                    }
                   : data.node!.template[name].value
               }
               onChange={handleOnNewValue}
@@ -620,7 +626,7 @@ export default function ParameterComponent({
               editNode={false}
               value={
                 data.node!.template[name].value?.length === 0 ||
-                  !data.node!.template[name].value
+                !data.node!.template[name].value
                   ? [{ "": "" }]
                   : convertObjToArray(data.node!.template[name].value)
               }

src/frontend/src/components/dropdownComponent/index.tsx

@@ -5,6 +5,7 @@ import { classNames } from "../../utils/utils";
 import IconComponent from "../genericIconComponent";
 
 export default function Dropdown({
+  disabled,
   isLoading,
   value,
   options,
@@ -28,6 +29,7 @@ export default function Dropdown({
         <>
           <Listbox
             value={internalValue}
+            disabled={disabled}
             onChange={(value) => {
               setInternalValue(value);
               onSelect(value);

src/frontend/src/components/ui/button.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { cn } from "../../utils/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none  ring-offset-background",
   {
     variants: {
       variant: {

src/frontend/src/components/ui/refreshButton.tsx

@@ -1,6 +1,7 @@
 import IconComponent from "../../components/genericIconComponent";
 import { NodeDataType } from "../../types/flow";
 import { cn } from "../../utils/utils";
+import { Button } from "./button";
 
 function RefreshButton({
   isLoading,
@@ -24,10 +25,7 @@ function RefreshButton({
     handleUpdateValues(name, data);
   };
 
-  const classNames = cn(
-    className,
-    disabled ? "cursor-not-allowed" : "cursor-pointer"
-  );
+  const classNames = cn(className, disabled ? "cursor-not-allowed" : "");
 
   // icon class name should take into account the disabled state and the loading state
   const disabledIconTextClass = disabled ? "text-muted-foreground" : "";
@@ -38,13 +36,19 @@ function RefreshButton({
   );
 
   return (
-    <button className={classNames} onClick={handleClick} id={id}>
+    <Button
+      variant="primary"
+      disabled={disabled}
+      className={classNames}
+      onClick={handleClick}
+      id={id}
+    >
       <IconComponent
         name={isLoading ? "Loader2" : "RefreshCcw"}
         className={iconClassName}
         id={id + "-icon"}
       />
-    </button>
+    </Button>
   );
 }
 

src/frontend/src/style/applies.css

@@ -316,7 +316,7 @@
     @apply border-none ring ring-[#FF9090];
   }
   .built-invalid-status-dark {
-    @apply border-none ring ring-[#751C1C]
+    @apply border-none ring ring-[#751C1C];
   }
   .building-status {
     @apply border-none ring;
@@ -431,7 +431,9 @@
   .code-area-external-link:hover {
     @apply hover:text-accent-foreground;
   }
-
+  .dropdown-component-disabled {
+    @apply pointer-events-none cursor-not-allowed;
+  }
   .dropdown-component-outline {
     @apply input-edit-node relative pr-8;
   }
@@ -441,11 +443,17 @@
   .dropdown-component-display {
     @apply block w-full truncate bg-background;
   }
+  .dropdown-component-display-disabled {
+    @apply text-muted-foreground;
+  }
   .dropdown-component-arrow {
     @apply pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2;
   }
   .dropdown-component-arrow-color {
-    @apply extra-side-bar-save-disable h-5 w-5;
+    @apply h-5 w-5 text-accent-foreground;
+  }
+  .dropdown-component-arrow-color-disable {
+    @apply h-5 w-5 text-muted-foreground;
   }
   .dropdown-component-options {
     @apply z-10 mt-1 max-h-60 overflow-auto rounded-md bg-background py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm;
@@ -902,7 +910,7 @@
     @apply flex-max-width px-2 py-6 pl-4 pr-9;
   }
   .form-modal-chatbot-icon {
-    @apply flex flex-col mb-3 ml-3 mr-6 mt-1;
+    @apply mb-3 ml-3 mr-6 mt-1 flex flex-col;
   }
   .form-modal-chat-image {
     @apply flex flex-col items-center gap-1;

src/frontend/src/types/components/index.ts

@@ -30,6 +30,7 @@ export type ToggleComponentType = {
   editNode?: boolean;
 };
 export type DropDownComponentType = {
+  disabled?: boolean;
   isLoading?: boolean;
   value: string;
   options: string[];

src/frontend/src/utils/styleUtils.ts

@@ -6,7 +6,6 @@ import {
   BookMarked,
   BookmarkPlus,
   Bot,
-  Snowflake,
   Boxes,
   Braces,
   Cable,
@@ -100,6 +99,7 @@ import {
   Share2,
   Shield,
   Sliders,
+  Snowflake,
   Sparkles,
   Square,
   Store,
@@ -443,6 +443,7 @@ export const nodeIconsLucide: iconsType = {
   Link,
   ToyBrick,
   RefreshCcw,
+  ListRestart,
   Combine,
   TerminalIcon,
   TerminalSquare,