From b93476af8790e9b1780787bac8733e171c4ffc57 Mon Sep 17 00:00:00 2001
From: Lucas Oliveira <62335616+lucaseduoli@users.noreply.github.com>
Date: Wed, 27 Mar 2024 23:52:36 +0200
Subject: [PATCH] Fix dropdown on nodes (#1569)

* Fixed dropdown overflow issue by changing it to ShadCN

* Changed name of API modal

* Fixed border on API Modal
---
 .../src/components/cardComponent/index.tsx    |   6 +-
 .../components/codeTabsComponent/index.tsx    |   5 +-
 .../components/dropdownComponent/index.tsx    | 192 +++++++-----------
 src/frontend/src/components/ui/button.tsx     |   3 +-
 src/frontend/src/modals/ApiModal/index.tsx    |   2 +-
 .../src/modals/EditNodeModal/index.tsx        |   1 -
 src/frontend/src/style/applies.css            |   2 +-
 src/frontend/src/types/components/index.ts    |   2 -
 8 files changed, 88 insertions(+), 125 deletions(-)

diff --git a/src/frontend/src/components/cardComponent/index.tsx b/src/frontend/src/components/cardComponent/index.tsx
index a253f1f5e..ecc49606d 100644
--- a/src/frontend/src/components/cardComponent/index.tsx
+++ b/src/frontend/src/components/cardComponent/index.tsx
@@ -250,7 +250,7 @@ export default function CollectionCardComponent({
                     >
                       <Button
                         variant="ghost"
-                        size="xs"
+                        size="icon"
                         className={
                           "whitespace-nowrap" +
                           (!authorized ? " cursor-not-allowed" : "")
@@ -275,7 +275,7 @@ export default function CollectionCardComponent({
                     <Button
                       disabled={loadingLike}
                       variant="ghost"
-                      size="xs"
+                      size="icon"
                       className={
                         "whitespace-nowrap" +
                         (!authorized ? " cursor-not-allowed" : "")
@@ -312,7 +312,7 @@ export default function CollectionCardComponent({
                   <Button
                     disabled={loading}
                     variant="ghost"
-                    size="xs"
+                    size="icon"
                     className={
                       "whitespace-nowrap" +
                       (!authorized ? " cursor-not-allowed" : "") +
diff --git a/src/frontend/src/components/codeTabsComponent/index.tsx b/src/frontend/src/components/codeTabsComponent/index.tsx
index 0675ee198..5f981a938 100644
--- a/src/frontend/src/components/codeTabsComponent/index.tsx
+++ b/src/frontend/src/components/codeTabsComponent/index.tsx
@@ -223,7 +223,7 @@ export default function CodeTabsComponent({
                           <div className="api-modal-table-arrangement">
                             <Table className="table-fixed bg-muted outline-1">
                               <TableHeader className="h-10 border-input text-xs font-medium text-ring">
-                                <TableRow className="dark:border-b-muted">
+                                <TableRow className="">
                                   <TableHead className="h-7 text-center">
                                     PARAM
                                   </TableHead>
@@ -248,7 +248,7 @@ export default function CodeTabsComponent({
                                     return (
                                       <TableRow
                                         key={indx}
-                                        className="h-10 dark:border-b-muted"
+                                        className="h-10"
                                       >
                                         <TableCell className="p-0 text-center text-sm text-foreground">
                                           {templateField}
@@ -515,7 +515,6 @@ export default function CodeTabsComponent({
                                               <div className="mx-auto">
                                                 <Dropdown
                                                   editNode={true}
-                                                  apiModal={true}
                                                   options={
                                                     node.data.node.template[
                                                       templateField
diff --git a/src/frontend/src/components/dropdownComponent/index.tsx b/src/frontend/src/components/dropdownComponent/index.tsx
index d51e81942..983ee4cf0 100644
--- a/src/frontend/src/components/dropdownComponent/index.tsx
+++ b/src/frontend/src/components/dropdownComponent/index.tsx
@@ -1,8 +1,21 @@
-import { Listbox, Transition } from "@headlessui/react";
-import { Fragment, useEffect, useState } from "react";
+import { useRef, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
-import { classNames } from "../../utils/utils";
-import IconComponent from "../genericIconComponent";
+import { cn } from "../../utils/utils";
+import { default as ForwardedIconComponent } from "../genericIconComponent";
+import { Button } from "../ui/button";
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "../ui/command";
+import {
+  Popover,
+  PopoverContentWithoutPortal,
+  PopoverTrigger,
+} from "../ui/popover";
 
 export default function Dropdown({
   disabled,
@@ -11,124 +24,77 @@ export default function Dropdown({
   options,
   onSelect,
   editNode = false,
-  numberOfOptions = 0,
-  apiModal = false,
   id = "",
 }: DropDownComponentType): JSX.Element {
-  let [internalValue, setInternalValue] = useState(
-    value === "" || !value ? "Choose an option" : value
-  );
+  const [open, setOpen] = useState(false);
 
-  useEffect(() => {
-    setInternalValue(value === "" || !value ? "Choose an option" : value);
-  }, [value]);
+  const refButton = useRef<HTMLButtonElement>(null);
 
   return (
     <>
       {Object.keys(options)?.length > 0 ? (
         <>
-          <Listbox
-            value={internalValue}
-            disabled={disabled}
-            onChange={(value) => {
-              setInternalValue(value);
-              onSelect(value);
-            }}
-          >
-            {({ open }) => (
-              <>
-                <div className={"relative"}>
-                  <Listbox.Button
-                    data-test={`${id ?? ""}`}
-                    className={
-                      editNode
-                        ? "dropdown-component-outline"
-                        : "dropdown-component-false-outline"
-                    }
-                  >
-                    <span
-                      className="dropdown-component-display"
-                      data-testid={`${id ?? ""}-display`}
-                    >
-                      {internalValue}
-                    </span>
-                    <span className={"dropdown-component-arrow right-0"}>
-                      <IconComponent
-                        name="ChevronsUpDown"
-                        className="dropdown-component-arrow-color"
-                        aria-hidden="true"
-                      />
-                    </span>
-                  </Listbox.Button>
-
-                  <Transition
-                    show={open}
-                    as={Fragment}
-                    leave="transition ease-in duration-100"
-                    leaveFrom="opacity-100"
-                    leaveTo="opacity-0"
-                  >
-                    <Listbox.Options
-                      className={classNames(
-                        editNode
-                          ? "dropdown-component-true-options nowheel custom-scroll"
-                          : "dropdown-component-false-options nowheel custom-scroll",
-                        apiModal ? "mb-2 w-[250px]" : "absolute w-full"
-                      )}
-                    >
-                      {options?.map((option, id) => (
-                        <Listbox.Option
-                          key={id}
-                          className={({ active }) =>
-                            classNames(
-                              active ? " bg-accent" : "",
-                              editNode
-                                ? "dropdown-component-false-option"
-                                : "dropdown-component-true-option"
-                            )
-                          }
-                          value={option}
-                        >
-                          {({ selected, active }) => (
-                            <>
-                              <span
-                                className={classNames(
-                                  selected ? "font-semibold" : "font-normal",
-                                  "block truncate "
-                                )}
-                                data-testid={`${option}-${id ?? ""}-option`}
-                              >
-                                {option}
-                              </span>
-
-                              {selected ? (
-                                <span
-                                  className={classNames(
-                                    active ? "text-background " : "",
-                                    "dropdown-component-choosal"
-                                  )}
-                                >
-                                  <IconComponent
-                                    name="Check"
-                                    className={
-                                      active
-                                        ? "dropdown-component-check-icon"
-                                        : "dropdown-component-check-icon"
-                                    }
-                                    aria-hidden="true"
-                                  />
-                                </span>
-                              ) : null}
-                            </>
+          <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+              <Button
+                disabled={disabled}
+                variant="primary"
+                size="xs"
+                role="combobox"
+                ref={refButton}
+                aria-expanded={open}
+                data-test={`${id ?? ""}`}
+                className={cn(
+                  editNode
+                    ? "dropdown-component-outline"
+                    : "dropdown-component-false-outline",
+                  "w-full justify-between font-normal",
+                  editNode ? "input-edit-node" : "py-2"
+                )}
+              >
+                {value
+                  ? options.find((option) => option === value)
+                  : "Choose an option..."}
+                <ForwardedIconComponent
+                  name="ChevronsUpDown"
+                  className="ml-2 h-4 w-4 shrink-0 opacity-50"
+                />
+              </Button>
+            </PopoverTrigger>
+            <PopoverContentWithoutPortal
+              className="nocopy nowheel nopan nodelete nodrag noundo w-full p-0"
+              style={{ minWidth: refButton?.current?.clientWidth ?? "200px" }}
+            >
+              <Command>
+                <CommandInput placeholder="Search options..." className="h-9" />
+                <CommandList>
+                  <CommandEmpty>No values found.</CommandEmpty>
+                  <CommandGroup defaultChecked={false}>
+                    {options?.map((option, id) => (
+                      <CommandItem
+                        key={id}
+                        value={option}
+                        onSelect={(currentValue) => {
+                          onSelect(currentValue);
+                          setOpen(false);
+                        }}
+                        data-testid={`${option}-${id ?? ""}-option`}
+                      >
+                        {option}
+                        <ForwardedIconComponent
+                          name="Check"
+                          className={cn(
+                            "ml-auto h-4 w-4 text-primary",
+                            value === option ? "opacity-100" : "opacity-0"
                           )}
-                        </Listbox.Option>
-                      ))}
-                    </Listbox.Options>
-                  </Transition>
-                </div>
-              </>
-            )}
-          </Listbox>
+                        />
+                      </CommandItem>
+                    ))}
+                  </CommandGroup>
+                </CommandList>
+              </Command>
+            </PopoverContentWithoutPortal>
+          </Popover>
         </>
       ) : (
         <>
diff --git a/src/frontend/src/components/ui/button.tsx b/src/frontend/src/components/ui/button.tsx
index 262de49cc..00259a99a 100644
--- a/src/frontend/src/components/ui/button.tsx
+++ b/src/frontend/src/components/ui/button.tsx
@@ -23,8 +23,9 @@ const buttonVariants = cva(
       size: {
         default: "h-10 py-2 px-4",
         sm: "h-9 px-3 rounded-md",
-        xs: "py-1 px-1 rounded-md",
+        xs: "py-0.5 px-3 rounded-md",
         lg: "h-11 px-8 rounded-md",
+        icon: "py-1 px-1 rounded-md",
       },
     },
     defaultVariants: {
diff --git a/src/frontend/src/modals/ApiModal/index.tsx b/src/frontend/src/modals/ApiModal/index.tsx
index 9c451beeb..579a53591 100644
--- a/src/frontend/src/modals/ApiModal/index.tsx
+++ b/src/frontend/src/modals/ApiModal/index.tsx
@@ -225,7 +225,7 @@ const ApiModal = forwardRef(
       <BaseModal open={open} setOpen={setOpen}>
         <BaseModal.Trigger asChild>{children}</BaseModal.Trigger>
         <BaseModal.Header description={EXPORT_CODE_DIALOG}>
-          <span className="pr-2">Code</span>
+          <span className="pr-2">API</span>
           <IconComponent
             name="Code2"
             className="h-6 w-6 pl-1 text-gray-800 dark:text-white"
diff --git a/src/frontend/src/modals/EditNodeModal/index.tsx b/src/frontend/src/modals/EditNodeModal/index.tsx
index 7e6577eb2..55bcd21cf 100644
--- a/src/frontend/src/modals/EditNodeModal/index.tsx
+++ b/src/frontend/src/modals/EditNodeModal/index.tsx
@@ -399,7 +399,6 @@ const EditNodeModal = forwardRef(
                                     .options ? (
                                   <div className="mx-auto">
                                     <Dropdown
-                                      numberOfOptions={nodeLength}
                                       editNode={true}
                                       options={
                                         myData.node.template[templateParam]
diff --git a/src/frontend/src/style/applies.css b/src/frontend/src/style/applies.css
index 146d9aae7..a71a3e606 100644
--- a/src/frontend/src/style/applies.css
+++ b/src/frontend/src/style/applies.css
@@ -480,7 +480,7 @@
     @apply absolute inset-y-0 right-0 flex items-center pr-4;
   }
   .dropdown-component-check-icon {
-    @apply h-5 w-5 text-black;
+    @apply h-5 w-5 text-primary;
   }
 
   .edit-flow-arrangement {
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts
index badf9a385..d19b39feb 100644
--- a/src/frontend/src/types/components/index.ts
+++ b/src/frontend/src/types/components/index.ts
@@ -43,8 +43,6 @@ export type DropDownComponentType = {
   options: string[];
   onSelect: (value: string) => void;
   editNode?: boolean;
-  apiModal?: boolean;
-  numberOfOptions?: number;
   id?: string;
 };
 export type ParameterComponentType = {