Implemented Delete function

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

@@ -2,11 +2,15 @@ import { cloneDeep } from "lodash";
 import React, { ReactNode, useEffect, useRef, useState } from "react";
 import { Handle, Position, useUpdateNodeInternals } from "reactflow";
 import ShadTooltip from "../../../../components/ShadTooltipComponent";
+import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
 import CodeAreaComponent from "../../../../components/codeAreaComponent";
 import DictComponent from "../../../../components/dictComponent";
 import Dropdown from "../../../../components/dropdownComponent";
 import FloatComponent from "../../../../components/floatComponent";
-import IconComponent from "../../../../components/genericIconComponent";
+import {
+  default as ForwardedIconComponent,
+  default as IconComponent,
+} from "../../../../components/genericIconComponent";
 import InputComponent from "../../../../components/inputComponent";
 import InputFileComponent from "../../../../components/inputFileComponent";
 import InputListComponent from "../../../../components/inputListComponent";
@@ -24,7 +28,8 @@ import {
   OUTPUT_HANDLER_HOVER,
   TOOLTIP_EMPTY,
 } from "../../../../constants/constants";
-import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import { deleteGlobalVariable } from "../../../../controllers/API";
+import DeleteConfirmationModal from "../../../../modals/DeleteConfirmationModal";
 import useAlertStore from "../../../../stores/alertStore";
 import useFlowStore from "../../../../stores/flowStore";
 import useFlowsManagerStore from "../../../../stores/flowsManagerStore";
@@ -77,7 +82,36 @@ export default function ParameterComponent({
   const globalVariablesEntries = useGlobalVariablesStore(
     (state) => state.globalVariablesEntries
   );
-  const setNoticeData = useAlertStore((state) => state.setNoticeData);
+
+  const getVariableId = useGlobalVariablesStore((state) => state.getVariableId);
+  const removeGlobalVariable = useGlobalVariablesStore(
+    (state) => state.removeGlobalVariable
+  );
+  function handleDelete(key: string) {
+    const id = getVariableId(key);
+    if (id !== undefined) {
+      deleteGlobalVariable(id).then((_) => {
+        removeGlobalVariable(key);
+        if (
+          data?.node?.template[name].value === key &&
+          data?.node?.template[name].load_from_db
+        ) {
+          handleOnNewValue("");
+          setNode(data.id, (oldNode) => {
+            let newNode = cloneDeep(oldNode);
+            newNode.data = {
+              ...newNode.data,
+            };
+            newNode.data.node.template[name].load_from_db = false;
+            return newNode;
+          });
+        }
+      });
+    } else {
+      console.error("id is undefined");
+    }
+  }
+
   const [isLoading, setIsLoading] = useState(false);
   const flow = currentFlow?.data?.nodes ?? null;
 
@@ -552,7 +586,7 @@ export default function ParameterComponent({
                     optionsIcon="Globe"
                     optionsButton={
                       <AddNewVariableButton>
-                        <CommandItem value={"new"}>
+                        <CommandItem>
                           <IconComponent
                             name="Plus"
                             className={cn("mr-2 h-4 w-4 text-primary")}
@@ -562,6 +596,32 @@ export default function ParameterComponent({
                         </CommandItem>
                       </AddNewVariableButton>
                     }
+                    optionButton={(option) => (
+                      <DeleteConfirmationModal
+                        onConfirm={(e) => {
+                          e.stopPropagation();
+                          e.preventDefault();
+                          handleDelete(option);
+                        }}
+                        description={'variable "' + option + '"'}
+                        asChild
+                      >
+                        <button
+                          onClick={(e) => {
+                            e.stopPropagation();
+                          }}
+                          className="pr-1"
+                        >
+                          <ForwardedIconComponent
+                            name="Trash2"
+                            className={cn(
+                              "h-4 w-4 text-primary opacity-0 hover:text-status-red group-hover:opacity-100"
+                            )}
+                            aria-hidden="true"
+                          />
+                        </button>
+                      </DeleteConfirmationModal>
+                    )}
                     selectedOption={
                       data?.node?.template[name].load_from_db ?? false
                         ? data?.node?.template[name].value

src/frontend/src/components/inputComponent/index.tsx

@@ -36,6 +36,7 @@ export default function InputComponent({
   options = [],
   optionsPlaceholder = "Search options...",
   optionsButton,
+  optionButton,
 }: InputComponentType): JSX.Element {
   const [pwdVisible, setPwdVisible] = useState(false);
   const refInput = useRef<HTMLInputElement>(null);
@@ -89,7 +90,7 @@ export default function InputComponent({
         </Form.Control>
       ) : (
         <>
-          <Popover open={showOptions} onOpenChange={setShowOptions}>
+          <Popover modal open={showOptions} onOpenChange={setShowOptions}>
             <PopoverAnchor>
               <Input
                 id={id}
@@ -142,7 +143,8 @@ export default function InputComponent({
                   <CommandGroup defaultChecked={false}>
                     {options.map((option, id) => (
                       <CommandItem
-                        key={id}
+                        className="group"
+                        key={option + id}
                         value={option}
                         onSelect={(currentValue) => {
                           setSelectedOption &&
@@ -154,17 +156,22 @@ export default function InputComponent({
                           setShowOptions(false);
                         }}
                       >
-                        <ForwardedIconComponent
-                          name="Check"
-                          className={cn(
-                            "mr-2 h-4 w-4 text-primary",
-                            selectedOption === option
-                              ? "opacity-100"
-                              : "opacity-0"
-                          )}
-                          aria-hidden="true"
-                        />
-                        {option}
+                        <div className="flex w-full items-center justify-between">
+                          <div className="flex items-center">
+                            <ForwardedIconComponent
+                              name="Check"
+                              className={cn(
+                                "mr-2 h-4 w-4 text-primary",
+                                selectedOption === option
+                                  ? "opacity-100"
+                                  : "opacity-0"
+                              )}
+                              aria-hidden="true"
+                            />
+                            {option}
+                          </div>
+                          {optionButton && optionButton(option)}
+                        </div>
                       </CommandItem>
                     ))}
                     {optionsButton && optionsButton}

src/frontend/src/modals/DeleteConfirmationModal/index.tsx

@@ -14,14 +14,18 @@ export default function DeleteConfirmationModal({
   children,
   onConfirm,
   description,
+  asChild,
 }: {
   children: JSX.Element;
-  onConfirm: () => void;
+  onConfirm: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   description?: string;
+  asChild?: boolean;
 }) {
   return (
     <Dialog>
-      <DialogTrigger tabIndex={-1}>{children}</DialogTrigger>
+      <DialogTrigger asChild={asChild} tabIndex={-1}>
+        {children}
+      </DialogTrigger>
       <DialogContent>
         <DialogHeader>
           <DialogTitle>
@@ -39,16 +43,21 @@ export default function DeleteConfirmationModal({
           Note: This action is irreversible.
         </span>
         <DialogFooter>
-          <DialogClose>
-            <Button className="mr-3" variant="outline">
+          <DialogClose asChild>
+            <Button
+              onClick={(e) => e.stopPropagation()}
+              className="mr-3"
+              variant="outline"
+            >
               Cancel
             </Button>
-
+          </DialogClose>
+          <DialogClose asChild>
             <Button
               type="submit"
               variant="destructive"
-              onClick={() => {
-                onConfirm();
+              onClick={(e) => {
+                onConfirm(e);
               }}
             >
               Delete

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

@@ -24,6 +24,7 @@ export type InputComponentType = {
   optionsPlaceholder?: string;
   options?: string[];
   optionsButton?: ReactElement;
+  optionButton?: (option: string) => ReactElement;
   selectedOption?: string;
   setSelectedOption?: (value: string) => void;
 };