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

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

@@ -355,20 +355,25 @@ 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"} />
+              <IconComponent className="h-5 w-5 text-ice" name={"Snowflake"} />
-            </div>}
+            </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 ? " *" : ""}
@@ -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}

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/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(
+  const classNames = cn(className, disabled ? "cursor-not-allowed" : "");
-    className,
-    disabled ? "cursor-not-allowed" : "cursor-pointer"
-  );
 
   // 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,