♻️ (tableAutoCellRender): remove console.log statement for cleaner code

♻️ (tableComponent): remove unused useCallback import and fix formatting
♻️ (editNodeModal): refactor advanced column to use ToggleShadComponent
✨ (ApiKeyHeader): add new ApiKeyHeaderComponent for API keys management
✨ (ApiKeysPage): add column definitions helper for API keys table

✨ (ApiKeysPage): add custom hooks for fetching and deleting API keys
♻️ (ApiKeysPage): refactor ApiKeysPage to use new custom hooks

♻️ (types): change optional type syntax for better readability
✅ (dropdownComponent.spec.ts): remove trailing commas in test assertions

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

@@ -24,7 +24,6 @@ export default function TableAutoCellRender({
         }
         break;
       case "string":
-        console.log(isTimeStampString(value), value);
         if (isTimeStampString(value)) {
           return <DateReader date={value} />;
         }

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

@@ -1,7 +1,7 @@
 import "ag-grid-community/styles/ag-grid.css"; // Mandatory CSS required by the grid
 import "ag-grid-community/styles/ag-theme-quartz.css"; // Optional Theme applied to the grid
 import { AgGridReact, AgGridReactProps } from "ag-grid-react";
-import { ElementRef, forwardRef, useCallback } from "react";
+import { ElementRef, forwardRef } from "react";
 import {
   DEFAULT_TABLE_ALERT_MSG,
   DEFAULT_TABLE_ALERT_TITLE,
@@ -46,7 +46,6 @@ const TableComponent = forwardRef<
         </div>
       );
     }
-
     return (
       <div
         className={cn(
@@ -61,6 +60,11 @@ const TableComponent = forwardRef<
             minWidth: 100,
           }}
           ref={ref}
+          getRowId={(params) => {
+            console.log(params);
+
+            return params.data.id;
+          }}
         />
       </div>
     );

src/frontend/src/modals/editNodeModal/index.tsx

@@ -1,21 +1,17 @@
-import { cloneDeep } from "lodash";
-import { forwardRef, useEffect, useRef, useState } from "react";
-import IconComponent from "../../components/genericIconComponent";
-import { Badge } from "../../components/ui/badge";
-import {
-  LANGFLOW_SUPPORTED_TYPES,
-  limitScrollFieldsModal,
-} from "../../constants/constants";
-import useFlowStore from "../../stores/flowStore";
-import { NodeDataType } from "../../types/flow";
-import { classNames } from "../../utils/utils";
-import BaseModal from "../baseModal";
-import TableComponent from "../../components/tableComponent";
-import TableAutoCellRender from "../../components/tableAutoCellRender";
-import { TemplateVariableType } from "../../types/api";
-import TableNodeCellRender from "../../components/tableNodeCellRender";
 import { ColDef, ValueGetterParams } from "ag-grid-community";
+import { forwardRef, useEffect, useRef } from "react";
+import IconComponent from "../../components/genericIconComponent";
+import TableAutoCellRender from "../../components/tableAutoCellRender";
+import TableComponent from "../../components/tableComponent";
+import TableNodeCellRender from "../../components/tableNodeCellRender";
 import TableTooltipRender from "../../components/tableTooltipRender";
+import ToggleShadComponent from "../../components/toggleShadComponent";
+import { Badge } from "../../components/ui/badge";
+import { LANGFLOW_SUPPORTED_TYPES } from "../../constants/constants";
+import useFlowStore from "../../stores/flowStore";
+import { TemplateVariableType } from "../../types/api";
+import { NodeDataType } from "../../types/flow";
+import BaseModal from "../baseModal";
 
 const EditNodeModal = forwardRef(
   (
@@ -42,7 +38,7 @@ const EditNodeModal = forwardRef(
 
     function changeAdvanced(n) {
       myData.current.node!.template[n].advanced =
-        !myData.current.node!.template[n].advanced;
+        !myData.current.node!.template[n]?.advanced;
     }
 
     const handleOnNewValue = (newValue: any, name) => {
@@ -51,7 +47,7 @@ const EditNodeModal = forwardRef(
 
     useEffect(() => {
       if (open) {
-        myData.current = data; // reset data to what it is on node when opening modal
+        myData.current = data;
       }
     }, [open]);
 
@@ -77,6 +73,7 @@ const EditNodeModal = forwardRef(
         return {
           ...templateParam,
           key: key,
+          id: key,
         };
       });
 
@@ -127,18 +124,25 @@ const EditNodeModal = forwardRef(
       {
         headerName: "Show",
         field: "advanced",
-        cellRenderer: "agCheckboxCellRenderer",
+        cellRenderer: (params) => {
-        cellEditor: "agCheckboxCellEditor",
+          const templateParam = params.data;
-        valueGetter: (params) => {
+          return (
-          return !params.data.advanced;
+            <>
+              <ToggleShadComponent
+                id={"show" + templateParam?.name}
+                enabled={!templateParam?.advanced}
+                setEnabled={() => {
+                  changeAdvanced(params.data.key);
+                }}
+                size="small"
+                editNode={true}
+              />
+            </>
+          );
         },
-        valueSetter: (params) => {
+
-          changeAdvanced(params.data.key);
+        editable: false,
-          return true;
+        maxWidth: 80,
-        },
-        editable: true,
-        flex: 1,
-        maxWidth: 70,
         resizable: false,
       },
     ];

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx

@@ -0,0 +1,58 @@
+import ForwardedIconComponent from "../../../../../../components/genericIconComponent";
+import { Button } from "../../../../../../components/ui/button";
+import { API_PAGE_PARAGRAPH } from "../../../../../../constants/constants";
+import SecretKeyModal from "../../../../../../modals/secretKeyModal";
+import { cn } from "../../../../../../utils/utils";
+
+type ApiKeyHeaderComponentProps = {
+  selectedRows: string[];
+  handleDeleteKey: () => void;
+  fetchApiKeys: () => void;
+  userId: string;
+};
+const ApiKeyHeaderComponent = ({
+  selectedRows,
+  handleDeleteKey,
+  fetchApiKeys,
+  userId,
+}: ApiKeyHeaderComponentProps) => {
+  return (
+    <>
+      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+        <div className="flex w-full flex-col">
+          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+            API Keys
+            <ForwardedIconComponent
+              name="Key"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">{API_PAGE_PARAGRAPH}</p>
+        </div>
+        <div className="flex flex-shrink-0 items-center gap-2">
+          <Button
+            data-testid="api-key-button-store"
+            variant="primary"
+            className="group px-2"
+            disabled={selectedRows.length === 0}
+            onClick={handleDeleteKey}
+          >
+            <ForwardedIconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary",
+              )}
+            />
+          </Button>
+          <SecretKeyModal data={userId} onCloseModal={fetchApiKeys}>
+            <Button data-testid="api-key-button-store" variant="primary">
+              <ForwardedIconComponent name="Plus" className="mr-2 w-4" />
+              Add New
+            </Button>
+          </SecretKeyModal>
+        </div>
+      </div>
+    </>
+  );
+};
+export default ApiKeyHeaderComponent;

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts

@@ -0,0 +1,40 @@
+import TableAutoCellRender from "../../../../../components/tableAutoCellRender";
+
+export const getColumnDefs = () => {
+  return [
+    {
+      headerCheckboxSelection: true,
+      checkboxSelection: true,
+      showDisabledCheckboxes: true,
+      headerName: "Name",
+      field: "name",
+      cellRenderer: TableAutoCellRender,
+      flex: 2,
+    },
+    {
+      headerName: "Key",
+      field: "api_key",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+    },
+    {
+      headerName: "Created",
+      field: "created_at",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+    },
+    {
+      headerName: "Last Used",
+      field: "last_used_at",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+    },
+    {
+      headerName: "Total Uses",
+      field: "total_uses",
+      cellRenderer: TableAutoCellRender,
+      flex: 1,
+      resizable: false,
+    },
+  ];
+};

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx

@@ -0,0 +1,26 @@
+import { getApiKey } from "../../../../../controllers/API";
+
+const useApiKeys = (userData, setLoadingKeys, keysList, setUserId) => {
+  const fetchApiKeys = () => {
+    setLoadingKeys(true);
+    getApiKey()
+      .then((keys) => {
+        keysList.current = keys["api_keys"].map((apikey) => ({
+          ...apikey,
+          name: apikey.name && apikey.name !== "" ? apikey.name : "Untitled",
+          last_used_at: apikey.last_used_at ?? "Never",
+        }));
+        setUserId(keys["user_id"]);
+        setLoadingKeys(false);
+      })
+      .catch((error) => {
+        setLoadingKeys(false);
+      });
+  };
+
+  return {
+    fetchApiKeys,
+  };
+};
+
+export default useApiKeys;

src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx

@@ -0,0 +1,42 @@
+import {
+  DEL_KEY_ERROR_ALERT,
+  DEL_KEY_ERROR_ALERT_PLURAL,
+  DEL_KEY_SUCCESS_ALERT,
+  DEL_KEY_SUCCESS_ALERT_PLURAL,
+} from "../../../../../constants/alerts_constants";
+import { deleteApiKey } from "../../../../../controllers/API";
+
+const useDeleteApiKeys = (
+  selectedRows,
+  resetFilter,
+  setSuccessData,
+  setErrorData,
+) => {
+  const handleDeleteKey = () => {
+    Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))
+      .then(() => {
+        resetFilter();
+        setSuccessData({
+          title:
+            selectedRows.length === 1
+              ? DEL_KEY_SUCCESS_ALERT
+              : DEL_KEY_SUCCESS_ALERT_PLURAL,
+        });
+      })
+      .catch((error) => {
+        setErrorData({
+          title:
+            selectedRows.length === 1
+              ? DEL_KEY_ERROR_ALERT
+              : DEL_KEY_ERROR_ALERT_PLURAL,
+          list: [error?.response?.data?.detail],
+        });
+      });
+  };
+
+  return {
+    handleDeleteKey,
+  };
+};
+
+export default useDeleteApiKeys;

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

@@ -1,37 +1,13 @@
-import IconComponent from "../../../../components/genericIconComponent";
+import { SelectionChangedEvent } from "ag-grid-community";
-import { Button } from "../../../../components/ui/button";
-
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
 import { useContext, useEffect, useRef, 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";
 import { Card, CardContent } from "../../../../components/ui/card";
-import {
-  deleteApiKey,
-  deleteGlobalVariable,
-  getApiKey,
-} from "../../../../controllers/API";
-import useAlertStore from "../../../../stores/alertStore";
-import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables";
-import { cn } from "../../../../utils/utils";
-import {
-  API_PAGE_PARAGRAPH,
-  LAST_USED_SPAN_1,
-  LAST_USED_SPAN_2,
-} from "../../../../constants/constants";
-import TableAutoCellRender from "../../../../components/tableAutoCellRender";
-import {
-  DEL_KEY_SUCCESS_ALERT,
-  DEL_KEY_ERROR_ALERT,
-  DEL_KEY_SUCCESS_ALERT_PLURAL,
-  DEL_KEY_ERROR_ALERT_PLURAL,
-} from "../../../../constants/alerts_constants";
 import { AuthContext } from "../../../../contexts/authContext";
-import { ApiKey } from "../../../../types/components";
+import useAlertStore from "../../../../stores/alertStore";
-import SecretKeyModal from "../../../../modals/secretKeyModal";
+import ApiKeyHeaderComponent from "./components/ApiKeyHeader";
+import { getColumnDefs } from "./helpers/column-defs";
+import useApiKeys from "./hooks/use-api-keys";
+import useDeleteApiKeys from "./hooks/use-handle-delete-key";
 
 export default function ApiKeysPage() {
   const [loadingKeys, setLoadingKeys] = useState(true);
@@ -43,138 +19,37 @@ export default function ApiKeysPage() {
   const keysList = useRef([]);
 
   useEffect(() => {
-    getKeys();
+    fetchApiKeys();
   }, [userData]);
 
-  function getKeys() {
+  const { fetchApiKeys } = useApiKeys(
-    setLoadingKeys(true);
+    userData,
-    if (userData) {
+    setLoadingKeys,
-      getApiKey()
+    keysList,
-        .then((keys: [ApiKey]) => {
+    setUserId,
-          keysList.current = keys["api_keys"].map((apikey: ApiKey) => ({
+  );
-            ...apikey,
-            name: apikey.name && apikey.name !== "" ? apikey.name : "Untitled",
-            last_used_at: apikey.last_used_at ?? "Never",
-          }));
-          setUserId(keys["user_id"]);
-          setLoadingKeys(false);
-        })
-        .catch((error) => {
-          setLoadingKeys(false);
-        });
-    }
-  }
 
   function resetFilter() {
-    getKeys();
+    fetchApiKeys();
   }
 
-  function handleDeleteKey() {
+  const { handleDeleteKey } = useDeleteApiKeys(
-    Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))
+    selectedRows,
-      .then((res) => {
+    resetFilter,
-        resetFilter();
+    setSuccessData,
-        setSuccessData({
+    setErrorData,
-          title:
+  );
-            selectedRows.length === 1
-              ? DEL_KEY_SUCCESS_ALERT
-              : DEL_KEY_SUCCESS_ALERT_PLURAL,
-        });
-      })
-      .catch((error) => {
-        setErrorData({
-          title:
-            selectedRows.length === 1
-              ? DEL_KEY_ERROR_ALERT
-              : DEL_KEY_ERROR_ALERT_PLURAL,
-          list: [error["response"]["data"]["detail"]],
-        });
-      });
-  }
 
-  function lastUsedMessage() {
+  const columnDefs = getColumnDefs();
-    return (
-      <div className="text-xs">
-        <span>
-          {LAST_USED_SPAN_1}
-          <br></br> {LAST_USED_SPAN_2}
-        </span>
-      </div>
-    );
-  }
-
-  const columnDefs = [
-    {
-      headerCheckboxSelection: true,
-      checkboxSelection: true,
-      showDisabledCheckboxes: true,
-      headerName: "Name",
-      field: "name",
-      cellRenderer: TableAutoCellRender,
-      flex: 2,
-    },
-    {
-      headerName: "Key",
-      field: "api_key",
-      cellRenderer: TableAutoCellRender,
-      flex: 1,
-    },
-    {
-      headerName: "Created",
-      field: "created_at",
-      cellRenderer: TableAutoCellRender,
-      flex: 1,
-    },
-    {
-      headerName: "Last Used",
-      field: "last_used_at",
-      cellRenderer: TableAutoCellRender,
-      flex: 1,
-    },
-    {
-      headerName: "Total Uses",
-      field: "total_uses",
-      cellRenderer: TableAutoCellRender,
-      flex: 1,
-      resizable: false,
-    },
-  ];
 
   return (
     <div className="flex h-full w-full flex-col justify-between gap-6">
-      <div className="flex w-full items-center justify-between gap-4 space-y-0.5">
+      <ApiKeyHeaderComponent
-        <div className="flex w-full flex-col">
+        selectedRows={selectedRows}
-          <h2 className="flex items-center text-lg font-semibold tracking-tight">
+        handleDeleteKey={handleDeleteKey}
-            API Keys
+        fetchApiKeys={fetchApiKeys}
-            <ForwardedIconComponent
+        userId={userId}
-              name="Key"
+      />
-              className="ml-2 h-5 w-5 text-primary"
-            />
-          </h2>
-          <p className="text-sm text-muted-foreground">{API_PAGE_PARAGRAPH}</p>
-        </div>
-        <div className="flex flex-shrink-0 items-center gap-2">
-          <Button
-            data-testid="api-key-button-store"
-            variant="primary"
-            className="group px-2"
-            disabled={selectedRows.length === 0}
-            onClick={handleDeleteKey}
-          >
-            <IconComponent
-              name="Trash2"
-              className={cn(
-                "h-5 w-5 text-destructive group-disabled:text-primary",
-              )}
-            />
-          </Button>
-          <SecretKeyModal data={userId} onCloseModal={getKeys}>
-            <Button data-testid="api-key-button-store" variant="primary">
-              <IconComponent name="Plus" className="mr-2 w-4" />
-              Add New
-            </Button>
-          </SecretKeyModal>
-        </div>
-      </div>
 
       <div className="flex h-full w-full flex-col justify-between">
         <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">

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

@@ -38,7 +38,7 @@ export type InputComponentType = {
 export type ToggleComponentType = {
   enabled: boolean;
   setEnabled: (state: boolean) => void;
-  disabled: boolean | undefined;
+  disabled?: boolean | undefined;
   size: "small" | "medium" | "large";
   id?: string;
   editNode?: boolean;