♻️ (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
2024-06-05 16:52:01 -03:00 · 2024-06-05 16:52:01 -03:00 · 246de048a5
commit 246de048a5
parent 5e16e8ac4b
9 changed files with 233 additions and 185 deletions
--- a/src/frontend/src/components/tableAutoCellRender/index.tsx
+++ b/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} />;
        }
--- a/src/frontend/src/components/tableComponent/index.tsx
+++ b/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>
    );
--- a/src/frontend/src/modals/editNodeModal/index.tsx
+++ b/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",
-        cellEditor: "agCheckboxCellEditor",
-        valueGetter: (params) => {
-          return !params.data.advanced;
+        cellRenderer: (params) => {
+          const templateParam = params.data;
+          return (
+            <>
+              <ToggleShadComponent
+                id={"show" + templateParam?.name}
+                enabled={!templateParam?.advanced}
+                setEnabled={() => {
+                  changeAdvanced(params.data.key);
+                }}
+                size="small"
+                editNode={true}
+              />
+            </>
+          );
        },
-        valueSetter: (params) => {
-          changeAdvanced(params.data.key);
-          return true;
-        },
-        editable: true,
-        flex: 1,
-        maxWidth: 70,
+
+        editable: false,
+        maxWidth: 80,
        resizable: false,
      },
    ];
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx
+++ b/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;
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts
+++ b/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,
+    },
+  ];
+};
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-api-keys.tsx
+++ b/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;
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/hooks/use-handle-delete-key.tsx
+++ b/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;
--- a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
+++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx
@ -1,37 +1,13 @@
-import IconComponent from "../../../../components/genericIconComponent";
-import { Button } from "../../../../components/ui/button";
-
-import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community";
+import { 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 SecretKeyModal from "../../../../modals/secretKeyModal";
+import useAlertStore from "../../../../stores/alertStore";
+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() {
-    setLoadingKeys(true);
-    if (userData) {
-      getApiKey()
-        .then((keys: [ApiKey]) => {
-          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);
-        });
-    }
-  }
+  const { fetchApiKeys } = useApiKeys(
+    userData,
+    setLoadingKeys,
+    keysList,
+    setUserId,
+  );

  function resetFilter() {
-    getKeys();
+    fetchApiKeys();
  }

-  function handleDeleteKey() {
-    Promise.all(selectedRows.map((selectedRow) => deleteApiKey(selectedRow)))
-      .then((res) => {
-        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"]],
-        });
-      });
-  }
+  const { handleDeleteKey } = useDeleteApiKeys(
+    selectedRows,
+    resetFilter,
+    setSuccessData,
+    setErrorData,
+  );

-  function lastUsedMessage() {
-    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,
-    },
-  ];
+  const columnDefs = getColumnDefs();

  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">
-        <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}
-          >
-            <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>
+      <ApiKeyHeaderComponent
+        selectedRows={selectedRows}
+        handleDeleteKey={handleDeleteKey}
+        fetchApiKeys={fetchApiKeys}
+        userId={userId}
+      />

      <div className="flex h-full w-full flex-col justify-between">
        <Card x-chunk="dashboard-04-chunk-2" className="h-full pt-4">
--- a/src/frontend/src/types/components/index.ts
+++ b/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;