From 06a568f11426d124134f42d73fd13413e0b46ba1 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <lucas.edu.oli@hotmail.com>
Date: Sun, 2 Jun 2024 23:55:20 -0300
Subject: [PATCH] Disabled accordion when it is empty

---
 .../components/accordionComponent/index.tsx   | 17 ++++++++----
 src/frontend/src/components/ui/accordion.tsx  | 27 +++++++++++++++----
 src/frontend/src/modals/IOModal/index.tsx     |  4 +++
 src/frontend/src/types/components/index.ts    |  1 +
 4 files changed, 39 insertions(+), 10 deletions(-)

diff --git a/src/frontend/src/components/accordionComponent/index.tsx b/src/frontend/src/components/accordionComponent/index.tsx
index fdcf8b96c..7c5562e7f 100644
--- a/src/frontend/src/components/accordionComponent/index.tsx
+++ b/src/frontend/src/components/accordionComponent/index.tsx
@@ -6,10 +6,13 @@ import {
   AccordionTrigger,
 } from "../../components/ui/accordion";
 import { AccordionComponentType } from "../../types/components";
+import { cn } from "../../utils/utils";
+import ShadTooltip from "../shadTooltipComponent";
 
 export default function AccordionComponent({
   trigger,
   children,
+  disabled,
   open = [],
   keyValue,
   sideBar,
@@ -29,7 +32,9 @@ export default function AccordionComponent({
   }
 
   function handleClick(): void {
-    value === "" ? setValue(keyValue!) : setValue("");
+    if (!disabled) {
+      value === "" ? setValue(keyValue!) : setValue("");
+    }
   }
 
   return (
@@ -38,16 +43,18 @@ export default function AccordionComponent({
         type="single"
         className="w-full"
         value={value}
-        onValueChange={setValue}
+        onValueChange={!disabled ? setValue : () => {}}
       >
         <AccordionItem value={keyValue!} className="border-b">
           <AccordionTrigger
             onClick={() => {
               handleClick();
             }}
-            className={
-              sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3"
-            }
+            disabled={disabled}
+            className={cn(
+              sideBar ? "w-full bg-muted px-[0.75rem] py-[0.5rem]" : "ml-3",
+              disabled ? "cursor-not-allowed" : "cursor-pointer",
+            )}
           >
             {trigger}
           </AccordionTrigger>
diff --git a/src/frontend/src/components/ui/accordion.tsx b/src/frontend/src/components/ui/accordion.tsx
index b0eaaf47a..39578095b 100644
--- a/src/frontend/src/components/ui/accordion.tsx
+++ b/src/frontend/src/components/ui/accordion.tsx
@@ -4,6 +4,7 @@ import * as AccordionPrimitive from "@radix-ui/react-accordion";
 import { ChevronDownIcon } from "@radix-ui/react-icons";
 import * as React from "react";
 import { cn } from "../../utils/utils";
+import ShadTooltip from "../shadTooltipComponent";
 
 const Accordion = AccordionPrimitive.Root;
 
@@ -22,17 +23,33 @@ AccordionItem.displayName = "AccordionItem";
 const AccordionTrigger = React.forwardRef<
   React.ElementRef<typeof AccordionPrimitive.Trigger>,
   React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
->(({ className, children, ...props }, ref) => (
+>(({ className, children, disabled, ...props }, ref) => (
   <AccordionPrimitive.Header className="flex">
-    <AccordionPrimitive.Trigger asChild ref={ref} {...props}>
+    <AccordionPrimitive.Trigger
+      disabled={disabled}
+      asChild
+      ref={ref}
+      {...props}
+    >
       <div
         className={cn(
           "flex flex-1 cursor-pointer items-center justify-between py-4 text-sm font-medium transition-all [&[data-state=open]>svg]:rotate-180",
-          className
+          className,
         )}
       >
         {children}
-        <ChevronDownIcon className="h-4 w-4 font-bold text-primary transition-transform duration-200" />
+        <ShadTooltip
+          styleClasses="z-50"
+          content={disabled ? "Empty" : ""}
+          side="top"
+        >
+          <ChevronDownIcon
+            className={cn(
+              "h-4 w-4 font-bold transition-transform duration-200",
+              disabled ? "text-muted-foreground" : "text-primary",
+            )}
+          />
+        </ShadTooltip>
       </div>
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
@@ -47,7 +64,7 @@ const AccordionContent = React.forwardRef<
     ref={ref}
     className={cn(
       "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
-      className
+      className,
     )}
     {...props}
   >
diff --git a/src/frontend/src/modals/IOModal/index.tsx b/src/frontend/src/modals/IOModal/index.tsx
index 4d7453619..a3d00e89c 100644
--- a/src/frontend/src/modals/IOModal/index.tsx
+++ b/src/frontend/src/modals/IOModal/index.tsx
@@ -253,6 +253,10 @@ export default function IOModal({
                             key={index}
                           >
                             <AccordionComponent
+                              disabled={
+                                node.data.node!.template["input_value"]
+                                  ?.value === ""
+                              }
                               trigger={
                                 <div className="file-component-badge-div">
                                   <ShadTooltip
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index 337169f2d..0cc1ea490 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -221,6 +221,7 @@ export type AccordionComponentType = {
   children?: ReactElement;
   open?: string[];
   trigger?: string | ReactElement;
+  disabled?: boolean;
   keyValue?: string;
   openDisc?: boolean;
   sideBar?: boolean;