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,16 +27,22 @@ 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}>
+          <Popover open={open} onOpenChange={children ? () => {} : setOpen}>
+            {children ? (
+              <PopoverAnchor>{children}</PopoverAnchor>
+            ) : (
               <PopoverTrigger asChild>
                 <Button
                   disabled={disabled}
@@ -66,9 +74,10 @@ export default function Dropdown({
                   />
                 </Button>
               </PopoverTrigger>
-            <PopoverContentWithoutPortal
+            )}
-              className="nocopy nowheel nopan nodelete nodrag noundo w-full p-0"
+            <PopoverContentDropdown
-              style={{ minWidth: refButton?.current?.clientWidth ?? "200px" }}
+              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"],
+        options: ["Prompt", "Credential"],
-        valueListGap: 10,
       },
       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;