Added own dropdown to Type

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

@@ -1,3 +1,4 @@
+import { PopoverAnchor } from "@radix-ui/react-popover";
 import { useRef, useState } from "react";
 import { DropDownComponentType } from "../../types/components";
 import { cn } from "../../utils/utils";
@@ -13,6 +14,7 @@ import {
 } from "../ui/command";
 import {
   Popover,
+  PopoverContent,
   PopoverContentWithoutPortal,
   PopoverTrigger,
 } from "../ui/popover";
@@ -25,50 +27,57 @@ export default function Dropdown({
   onSelect,
   editNode = false,
   id = "",
+  children,
 }: DropDownComponentType): JSX.Element {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(children ? true : false);
 
   const refButton = useRef<HTMLButtonElement>(null);
 
+  const PopoverContentDropdown = children ? PopoverContent : PopoverContentWithoutPortal;
+
   return (
     <>
       {Object.keys(options)?.length > 0 ? (
         <>
-          <Popover open={open} onOpenChange={setOpen}>
-            <PopoverTrigger asChild>
-              <Button
-                disabled={disabled}
-                variant="primary"
-                size="xs"
-                role="combobox"
-                ref={refButton}
-                aria-expanded={open}
-                data-testid={`${id ?? ""}`}
-                className={cn(
-                  editNode
-                    ? "dropdown-component-outline"
-                    : "dropdown-component-false-outline",
-                  "w-full justify-between font-normal",
-                  editNode ? "input-edit-node" : "py-2"
-                )}
-              >
-                <span data-testid={`value-dropdown-` + id}>
-                  {value &&
-                  value !== "" &&
-                  options.find((option) => option === value)
-                    ? options.find((option) => option === value)
-                    : "Choose an option..."}
-                </span>
+          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
+            {children ? (
+              <PopoverAnchor>{children}</PopoverAnchor>
+            ) : (
+              <PopoverTrigger asChild>
+                <Button
+                  disabled={disabled}
+                  variant="primary"
+                  size="xs"
+                  role="combobox"
+                  ref={refButton}
+                  aria-expanded={open}
+                  data-testid={`${id ?? ""}`}
+                  className={cn(
+                    editNode
+                      ? "dropdown-component-outline"
+                      : "dropdown-component-false-outline",
+                    "w-full justify-between font-normal",
+                    editNode ? "input-edit-node" : "py-2"
+                  )}
+                >
+                  <span data-testid={`value-dropdown-` + id}>
+                    {value &&
+                    value !== "" &&
+                    options.find((option) => option === value)
+                      ? options.find((option) => option === value)
+                      : "Choose an option..."}
+                  </span>
 
-                <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" }}
+                  <ForwardedIconComponent
+                    name="ChevronsUpDown"
+                    className="ml-2 h-4 w-4 shrink-0 opacity-50"
+                  />
+                </Button>
+              </PopoverTrigger>
+            )}
+            <PopoverContentDropdown
+              className="nocopy nowheel nopan nodelete nodrag noundo p-0"
+              style={children ? {} : { minWidth: refButton?.current?.clientWidth ?? "200px" }}
             >
               <Command>
                 <CommandInput placeholder="Search options..." className="h-9" />
@@ -98,7 +107,7 @@ export default function Dropdown({
                   </CommandGroup>
                 </CommandList>
               </Command>
-            </PopoverContentWithoutPortal>
+            </PopoverContentDropdown>
           </Popover>
         </>
       ) : (

src/frontend/src/pages/SettingsPage/pages/GlobalVariablesPage/index.tsx

@@ -4,6 +4,7 @@ import { Button } from "../../../../components/ui/button";
 import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
 import { useState } from "react";
 import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
 import { Badge } from "../../../../components/ui/badge";
@@ -19,6 +20,14 @@ export default function GlobalVariablesPage() {
       </div>
     );
   };
+
+  const DropdownEditor = ({ options, value, onValueChange }) => {
+    return (
+      <Dropdown options={options} value={value} onSelect={onValueChange}>
+        <div className="-mt-1.5 w-full"></div>
+      </Dropdown>
+    );
+  };
   // Column Definitions: Defines the columns to be displayed.
   const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
     {
@@ -32,10 +41,9 @@ export default function GlobalVariablesPage() {
     {
       field: "type",
       cellRenderer: BadgeRenderer,
-      cellEditor: "agSelectCellEditor",
+      cellEditor: DropdownEditor,
       cellEditorParams: {
-        values: ["Prompt", "Credential"],
-        valueListGap: 10,
+        options: ["Prompt", "Credential"],
       },
       flex: 1,
       editable: true,

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

@@ -45,6 +45,7 @@ export type DropDownComponentType = {
   onSelect: (value: string) => void;
   editNode?: boolean;
   id?: string;
+  children?: ReactNode;
 };
 export type ParameterComponentType = {
   data: NodeDataType;
@@ -80,15 +81,6 @@ export type InputGlobalComponentType = {
   editNode?: boolean;
 };
 
-export type InputGlobalComponentType = {
-  disabled: boolean;
-  onChange: (value: string) => void;
-  setDb: (value: boolean) => void;
-  name: string;
-  data: NodeDataType;
-  editNode?: boolean;
-};
-
 export type KeyPairListComponentType = {
   value: any;
   onChange: (value: Object[]) => void;