diff --git a/src/frontend/src/components/tableAutoCellRender/index.tsx b/src/frontend/src/components/tableAutoCellRender/index.tsx index 5c59f6430..37f58f3ac 100644 --- 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 ; } diff --git a/src/frontend/src/components/tableComponent/index.tsx b/src/frontend/src/components/tableComponent/index.tsx index 6113316be..42211b3a8 100644 --- 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< ); } - return (
{ + console.log(params); + + return params.data.id; + }} />
); diff --git a/src/frontend/src/modals/editNodeModal/index.tsx b/src/frontend/src/modals/editNodeModal/index.tsx index 548dfebb3..417b5bbb9 100644 --- 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 ( + <> + { + 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, }, ]; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/components/ApiKeyHeader/index.tsx new file mode 100644 index 000000000..cdd7c7c27 --- /dev/null +++ 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 ( + <> +
+
+

+ API Keys + +

+

{API_PAGE_PARAGRAPH}

+
+
+ + + + +
+
+ + ); +}; +export default ApiKeyHeaderComponent; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/helpers/column-defs.ts new file mode 100644 index 000000000..b9845098a --- /dev/null +++ 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, + }, + ]; +}; diff --git 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 new file mode 100644 index 000000000..8af9b4a0b --- /dev/null +++ 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; diff --git 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 new file mode 100644 index 000000000..74d5dae99 --- /dev/null +++ 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; diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx index d78a65afb..8efa2e3f9 100644 --- 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 ( -
- - {LAST_USED_SPAN_1} -

{LAST_USED_SPAN_2} - -
- ); - } - - 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 (
-
-
-

- API Keys - -

-

{API_PAGE_PARAGRAPH}

-
-
- - - - -
-
+
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index b87f3c57d..ee7c1cd83 100644 --- 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;