feature: add edit option to global variables table (#3712)

* first attempt to edit variables on the data table

* refactor: Rename AddNewVariableButton to GlobalVariableModal and update its usage

The component AddNewVariableButton has been renamed to GlobalVariableModal to better reflect its purpose. The component is now used in multiple places, including the GlobalVariablesPage and InputGlobalComponent. This change improves code clarity and consistency.

* fix: fix apply to fields on table edit option

* refactor: Trim field names before checking for availability in GlobalVariableModal and GlobalVariablesPage

Trim field names before checking for availability in GlobalVariableModal and GlobalVariablesPage to ensure consistent comparison and avoid any potential issues with leading or trailing spaces.

* Refactor GlobalVariablesPage to remove unused cellRenderer in the "value" field

* [autofix.ci] apply automated fixes

* Add validation for 'value' field in VariableRead model and import CREDENTIAL_TYPE

- Introduced a field validator for the 'value' field in the VariableRead model to handle cases where the variable type is CREDENTIAL_TYPE.
- Added necessary import for CREDENTIAL_TYPE.
- Removed an unnecessary blank line in the variable API.

* Add constants for credential and generic types in variable service

* Refactor import statements in `kubernetes.py` to improve module organization

* Refactor imports in test_service.py for better organization

* refactor: Update import statements in variable.py for better organization

* Refactor import and reorder fields in VariableRead model

- Changed import of `CREDENTIAL_TYPE` from `service` to `constants` module.
- Reordered fields in `VariableRead` model to place `type` before `value`.

* ✨ (userSettings.spec.ts): Add additional randomName variables for testing purposes
📝 (userSettings.spec.ts): Update test to interact with global variables and improve readability and maintainability of the code

* test: fix test_create_variable

---------
Co-authored-by: Gabriel Luiz Freitas Almeida <gabriel@langflow.org>
Co-authored-by: cristhianzl <cristhian.lousa@gmail.com>
Co-authored-by: italojohnny <italojohnnydosanjos@gmail.com>

src/frontend/src/components/GlobalVariableModal/GlobalVariableModal.tsx

@@ -1,8 +1,10 @@
 import {
   useGetGlobalVariables,
+  usePatchGlobalVariables,
   usePostGlobalVariables,
 } from "@/controllers/API/queries/variables";
 import getUnavailableFields from "@/stores/globalVariablesStore/utils/get-unavailable-fields";
+import { GlobalVariable } from "@/types/global_variables";
 import { useEffect, useState } from "react";
 import BaseModal from "../../modals/baseModal";
 import useAlertStore from "../../stores/alertStore";
@@ -17,21 +19,33 @@ import sortByName from "./utils/sort-by-name";
 
 //TODO IMPLEMENT FORM LOGIC
 
-export default function AddNewVariableButton({
+export default function GlobalVariableModal({
   children,
   asChild,
+  initialData,
+  open: myOpen,
+  setOpen: mySetOpen,
 }: {
-  children: JSX.Element;
+  children?: JSX.Element;
   asChild?: boolean;
+  initialData?: GlobalVariable;
+  open?: boolean;
+  setOpen?: (a: boolean | ((o?: boolean) => boolean)) => void;
 }): JSX.Element {
-  const [key, setKey] = useState("");
-  const [value, setValue] = useState("");
-  const [type, setType] = useState("Generic");
-  const [fields, setFields] = useState<string[]>([]);
-  const [open, setOpen] = useState(false);
+  const [key, setKey] = useState(initialData?.name ?? "");
+  const [value, setValue] = useState(initialData?.value ?? "");
+  const [type, setType] = useState(initialData?.type ?? "Generic");
+  const [fields, setFields] = useState<string[]>(
+    initialData?.default_fields ?? [],
+  );
+  const [open, setOpen] =
+    mySetOpen !== undefined && myOpen !== undefined
+      ? [myOpen, mySetOpen]
+      : useState(false);
   const setErrorData = useAlertStore((state) => state.setErrorData);
   const componentFields = useTypesStore((state) => state.ComponentFields);
   const { mutate: mutateAddGlobalVariable } = usePostGlobalVariables();
+  const { mutate: updateVariable } = usePatchGlobalVariables();
   const { data: globalVariables } = useGetGlobalVariables();
   const [availableFields, setAvailableFields] = useState<string[]>([]);
 
@@ -39,12 +53,13 @@ export default function AddNewVariableButton({
     if (globalVariables && componentFields.size > 0) {
       const unavailableFields = getUnavailableFields(globalVariables);
       const fields = Array.from(componentFields).filter(
-        (field) => !unavailableFields.hasOwnProperty(field),
+        (field) => !unavailableFields.hasOwnProperty(field.trim()),
+      );
+      setAvailableFields(
+        sortByName(fields.concat(initialData?.default_fields ?? [])),
       );
-
-      setAvailableFields(sortByName(fields));
     }
-  }, [globalVariables, componentFields]);
+  }, [globalVariables, componentFields, initialData]);
 
   const setSuccessData = useAlertStore((state) => state.setSuccessData);
 
@@ -71,35 +86,52 @@ export default function AddNewVariableButton({
         setOpen(false);
 
         setSuccessData({
-          title: `Variable ${name} created successfully`,
+          title: `Variable ${name} ${initialData ? "updated" : "created"} successfully`,
         });
       },
       onError: (error) => {
         let responseError = error as ResponseErrorDetailAPI;
         setErrorData({
-          title: "Error creating variable",
+          title: `Error ${initialData ? "updating" : "creating"} variable`,
           list: [
             responseError?.response?.data?.detail ??
-              "An unexpected error occurred while adding a new variable. Please try again.",
+              `An unexpected error occurred while ${initialData ? "updating a new" : "creating"} variable. Please try again.`,
           ],
         });
       },
     });
   }
 
+  function submitForm() {
+    if (!initialData) {
+      handleSaveVariable();
+    } else {
+      updateVariable({
+        id: initialData.id,
+        name: key,
+        value: value,
+        default_fields: fields,
+      });
+      setOpen(false);
+    }
+  }
+
   return (
     <BaseModal
       open={open}
       setOpen={setOpen}
       size="x-small"
-      onSubmit={handleSaveVariable}
+      onSubmit={submitForm}
     >
       <BaseModal.Header
         description={
           "This variable will be encrypted and will be available for you to use in any of your projects."
         }
       >
-        <span className="pr-2"> Create Variable </span>
+        <span className="pr-2">
+          {" "}
+          {initialData ? "Update" : "Create"} Variable{" "}
+        </span>
         <ForwardedIconComponent
           name="Globe"
           className="h-6 w-6 pl-1 text-primary"
@@ -119,6 +151,7 @@ export default function AddNewVariableButton({
           ></Input>
           <Label>Type (optional)</Label>
           <InputComponent
+            disabled={initialData?.type !== undefined}
             setSelectedOption={(e) => {
               setType(e);
             }}
@@ -161,7 +194,10 @@ export default function AddNewVariableButton({
         </div>
       </BaseModal.Content>
       <BaseModal.Footer
-        submit={{ label: "Save Variable", dataTestId: "save-variable-btn" }}
+        submit={{
+          label: `${initialData ? "Update" : "Save"} Variable`,
+          dataTestId: "save-variable-btn",
+        }}
       />
     </BaseModal>
   );

src/frontend/src/components/inputGlobalComponent/index.tsx

@@ -7,7 +7,7 @@ import DeleteConfirmationModal from "../../modals/deleteConfirmationModal";
 import useAlertStore from "../../stores/alertStore";
 import { InputGlobalComponentType } from "../../types/components";
 import { cn } from "../../utils/utils";
-import AddNewVariableButton from "../addNewVariableButtonComponent/addNewVariableButton";
+import GlobalVariableModal from "../GlobalVariableModal/GlobalVariableModal";
 import ForwardedIconComponent from "../genericIconComponent";
 import InputComponent from "../inputComponent";
 import { CommandItem } from "../ui/command";
@@ -72,7 +72,7 @@ export default function InputGlobalComponent({
       optionsPlaceholder={"Global Variables"}
       optionsIcon="Globe"
       optionsButton={
-        <AddNewVariableButton>
+        <GlobalVariableModal>
           <CommandItem value="doNotFilter-addNewVariable">
             <ForwardedIconComponent
               name="Plus"
@@ -81,7 +81,7 @@ export default function InputGlobalComponent({
             />
             <span>Add New Variable</span>
           </CommandItem>
-        </AddNewVariableButton>
+        </GlobalVariableModal>
       }
       optionButton={(option) => (
         <DeleteConfirmationModal

src/frontend/src/components/tableComponent/components/tableAutoCellRender/index.tsx

@@ -15,6 +15,7 @@ export default function TableAutoCellRender({
   setValue,
   colDef,
   formatter,
+  api,
 }: CustomCellRender) {
   function getCellType() {
     let format: string = formatter ? formatter : typeof value;
@@ -63,7 +64,10 @@ export default function TableAutoCellRender({
         } else {
           return (
             <StringReader
-              editable={!!colDef?.onCellValueChanged}
+              editable={
+                !!colDef?.onCellValueChanged ||
+                !!api.getGridOption("onCellValueChanged")
+              }
               setValue={setValue!}
               string={value}
             />

src/frontend/src/controllers/API/queries/variables/use-patch-global-variables.ts

@@ -1,13 +1,15 @@
 import { useMutationFunctionType } from "@/types/api";
+import { GlobalVariable } from "@/types/global_variables";
 import { UseMutationResult } from "@tanstack/react-query";
 import { api } from "../../api";
 import { getURL } from "../../helpers/constants";
 import { UseRequestProcessor } from "../../services/request-processor";
 
 interface PatchGlobalVariablesParams {
-  name: string;
-  value: string;
+  name?: string;
+  value?: string;
   id: string;
+  default_fields?: string[];
 }
 
 export const usePatchGlobalVariables: useMutationFunctionType<
@@ -16,15 +18,13 @@ export const usePatchGlobalVariables: useMutationFunctionType<
 > = (options?) => {
   const { mutate, queryClient } = UseRequestProcessor();
 
-  async function patchGlobalVariables({
-    name,
-    value,
-    id,
-  }: PatchGlobalVariablesParams): Promise<any> {
-    const res = await api.patch(`${getURL("VARIABLES")}/${id}`, {
-      name,
-      value,
-    });
+  async function patchGlobalVariables(
+    GlobalVariable: PatchGlobalVariablesParams,
+  ): Promise<any> {
+    const res = await api.patch(
+      `${getURL("VARIABLES")}/${GlobalVariable.id}`,
+      GlobalVariable,
+    );
     return res.data;
   }
 

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

@@ -1,13 +1,22 @@
 import IconComponent from "../../../../components/genericIconComponent";
 import { Button } from "../../../../components/ui/button";
 
+import TableAutoCellRender from "@/components/tableComponent/components/tableAutoCellRender";
 import {
   useDeleteGlobalVariables,
   useGetGlobalVariables,
 } from "@/controllers/API/queries/variables";
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
-import { useState } from "react";
-import AddNewVariableButton from "../../../../components/addNewVariableButtonComponent/addNewVariableButton";
+import { useTypesStore } from "@/stores/typesStore";
+import { GlobalVariable } from "@/types/global_variables";
+import {
+  ColDef,
+  ColGroupDef,
+  RowClickedEvent,
+  RowDoubleClickedEvent,
+  SelectionChangedEvent,
+} from "ag-grid-community";
+import { useEffect, useRef, useState } from "react";
+import GlobalVariableModal from "../../../../components/GlobalVariableModal/GlobalVariableModal";
 import Dropdown from "../../../../components/dropdownComponent";
 import ForwardedIconComponent from "../../../../components/genericIconComponent";
 import TableComponent from "../../../../components/tableComponent";
@@ -16,6 +25,9 @@ import useAlertStore from "../../../../stores/alertStore";
 
 export default function GlobalVariablesPage() {
   const setErrorData = useAlertStore((state) => state.setErrorData);
+  const [openModal, setOpenModal] = useState(false);
+  const initialData = useRef<GlobalVariable | undefined>(undefined);
+  const getTypes = useTypesStore((state) => state.getTypes);
   const BadgeRenderer = (props) => {
     return props.value !== "" ? (
       <div>
@@ -28,6 +40,11 @@ export default function GlobalVariablesPage() {
     );
   };
 
+  useEffect(() => {
+    //get the components to build the Aplly To Fields dropdown
+    getTypes(true);
+  }, []);
+
   const DropdownEditor = ({ options, value, onValueChange }) => {
     return (
       <Dropdown options={options} value={value} onSelect={onValueChange}>
@@ -36,7 +53,7 @@ export default function GlobalVariablesPage() {
     );
   };
   // Column Definitions: Defines the columns to be displayed.
-  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+  const colDefs: ColDef[] = [
     {
       headerName: "Variable Name",
       field: "name",
@@ -51,25 +68,20 @@ export default function GlobalVariablesPage() {
         options: ["Generic", "Credential"],
       },
       flex: 1,
-      editable: false,
     },
-    // {
-    //   field: "value",
-    //   cellEditor: "agLargeTextCellEditor",
-    //   flex: 2,
-    //   editable: false,
-    // },
+    {
+      field: "value",
+    },
     {
       headerName: "Apply To Fields",
       field: "default_fields",
       valueFormatter: (params) => {
-        return params.value.join(", ");
+        return params.value?.join(", ") ?? "";
       },
       flex: 1,
-      editable: false,
       resizable: false,
     },
-  ]);
+  ];
 
   const [selectedRows, setSelectedRows] = useState<string[]>([]);
 
@@ -93,6 +105,11 @@ export default function GlobalVariablesPage() {
     });
   }
 
+  function updateVariables(event: RowClickedEvent<GlobalVariable>) {
+    initialData.current = event.data;
+    setOpenModal(true);
+  }
+
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
       <div className="flex w-full items-start justify-between gap-6">
@@ -109,12 +126,12 @@ export default function GlobalVariablesPage() {
           </p>
         </div>
         <div className="flex flex-shrink-0 items-center gap-2">
-          <AddNewVariableButton asChild>
+          <GlobalVariableModal asChild>
             <Button data-testid="api-key-button-store" variant="primary">
               <IconComponent name="Plus" className="w-4" />
               Add New
             </Button>
-          </AddNewVariableButton>
+          </GlobalVariableModal>
         </div>
       </div>
 
@@ -126,12 +143,21 @@ export default function GlobalVariablesPage() {
             setSelectedRows(event.api.getSelectedRows().map((row) => row.name));
           }}
           rowSelection="multiple"
+          onRowClicked={updateVariables}
           suppressRowClickSelection={true}
           pagination={true}
           columnDefs={colDefs}
           rowData={globalVariables ?? []}
           onDelete={removeVariables}
         />
+        {initialData.current && (
+          <GlobalVariableModal
+            key={initialData.current.id}
+            initialData={initialData.current}
+            open={openModal}
+            setOpen={setOpenModal}
+          />
+        )}
       </div>
     </div>
   );

src/frontend/src/types/global_variables/index.ts

@@ -3,4 +3,5 @@ export type GlobalVariable = {
   type: string;
   default_fields: string[];
   name: string;
+  value?: string;
 };

src/frontend/tests/scheduled-end-to-end/userSettings.spec.ts

@@ -21,6 +21,8 @@ test("should see general profile gradient", async ({ page }) => {
 
 test("should interact with global variables", async ({ page }) => {
   const randomName = Math.random().toString(36).substring(2);
+  const randomName2 = Math.random().toString(36).substring(2);
+  const randomName3 = Math.random().toString(36).substring(2);
 
   await page.goto("/");
   await page.waitForTimeout(1000);
@@ -50,29 +52,64 @@ test("should interact with global variables", async ({ page }) => {
     .fill("testtesttesttesttesttesttesttest");
   await page.getByTestId("popover-anchor-apply-to-fields").click();
 
-  await page.waitForTimeout(3000);
+  await page.waitForTimeout(1000);
 
-  await page.getByPlaceholder("Search options...").fill("System Message");
+  await page.getByPlaceholder("Search options...").fill("System");
 
-  await page.waitForSelector("text=System Message", { timeout: 30000 });
+  await page.waitForTimeout(500);
 
-  await page.getByText("System Message").first().click();
+  await page.waitForSelector("text=System", { timeout: 30000 });
+
+  await page.waitForTimeout(500);
+
+  await page.getByText("System").last().click();
 
   await page.getByPlaceholder("Search options...").fill("openAI");
 
-  await page.waitForSelector("text=OpenAI API Base", { timeout: 30000 });
+  await page.waitForSelector("text=openai", { timeout: 30000 });
 
-  await page.getByText("OpenAI API Base").first().click();
+  await page.waitForTimeout(500);
 
-  await page.getByPlaceholder("Search options...").fill("llama");
+  await page.getByText("openai").last().click();
 
-  await page.getByText("Ollama").first().click();
+  await page.waitForTimeout(500);
+
+  await page.getByPlaceholder("Search options...").fill("ollama");
+
+  await page.waitForSelector("text=ollama", { timeout: 30000 });
+
+  await page.getByText("ollama").first().click();
 
   await page.keyboard.press("Escape");
   await page.getByText("Save Variable", { exact: true }).click();
 
   await page.getByText(randomName).last().isVisible();
 
+  await page.getByText(randomName).last().click();
+  await page.getByText(randomName).last().click();
+
+  await page.waitForTimeout(500);
+
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(randomName2);
+
+  await page.getByText("Update Variable", { exact: true }).last().click();
+
+  await page.getByText(randomName2).last().isVisible();
+
+  await page.getByText(randomName2).last().click();
+
+  await page.waitForTimeout(500);
+
+  await page
+    .getByPlaceholder("Insert a name for the variable...")
+    .fill(randomName3);
+
+  await page.getByText("Update Variable", { exact: true }).last().click();
+
+  await page.getByText(randomName3).last().isVisible();
+
   const focusElementsOnBoard = async ({ page }) => {
     await page.waitForSelector(
       '[aria-label="Press Space to toggle all rows selection (unchecked)"]',