diff --git a/src/frontend/src/pages/SettingsPage/index.tsx b/src/frontend/src/pages/SettingsPage/index.tsx index 0abab2aec..841af6033 100644 --- a/src/frontend/src/pages/SettingsPage/index.tsx +++ b/src/frontend/src/pages/SettingsPage/index.tsx @@ -25,7 +25,6 @@ export default function SettingsPage(): JSX.Element { /> ), }, - { title: "Global Variables", href: "/settings/global-variables", @@ -36,6 +35,16 @@ export default function SettingsPage(): JSX.Element { /> ), }, + { + title: "API Keys", + href: "/settings/api-keys", + icon: ( + + ), + }, { title: "Shortcuts", href: "/settings/shortcuts", diff --git a/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx new file mode 100644 index 000000000..c6eb048d7 --- /dev/null +++ b/src/frontend/src/pages/SettingsPage/pages/ApiKeysPage/index.tsx @@ -0,0 +1,194 @@ +import IconComponent from "../../../../components/genericIconComponent"; +import { Button } from "../../../../components/ui/button"; + +import { ColDef, ColGroupDef, SelectionChangedEvent } from "ag-grid-community"; +import { useEffect, 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 { deleteGlobalVariable } from "../../../../controllers/API"; +import useAlertStore from "../../../../stores/alertStore"; +import { useGlobalVariablesStore } from "../../../../stores/globalVariablesStore/globalVariables"; +import { cn } from "../../../../utils/utils"; + +export default function ApiKeysPage() { + const globalVariablesEntries = useGlobalVariablesStore( + (state) => state.globalVariablesEntries, + ); + const removeGlobalVariable = useGlobalVariablesStore( + (state) => state.removeGlobalVariable, + ); + const globalVariables = useGlobalVariablesStore( + (state) => state.globalVariables, + ); + const setErrorData = useAlertStore((state) => state.setErrorData); + const getVariableId = useGlobalVariablesStore((state) => state.getVariableId); + + const BadgeRenderer = (props) => { + return props.value !== "" ? ( +
+ + {props.value} + +
+ ) : ( +
+ ); + }; + + const [rowData, setRowData] = useState< + { + type: string | undefined; + id: string; + name: string; + default_fields: string | undefined; + }[] + >([]); + + useEffect(() => { + const rows: Array<{ + type: string | undefined; + id: string; + name: string; + default_fields: string | undefined; + }> = []; + if (globalVariablesEntries === undefined) return; + globalVariablesEntries.forEach((entrie) => { + const globalVariableObj = globalVariables[entrie]; + rows.push({ + type: globalVariableObj.type, + id: globalVariableObj.id, + default_fields: (globalVariableObj.default_fields ?? []).join(", "), + name: entrie, + }); + }); + setRowData(rows); + }, [globalVariables]); + + const DropdownEditor = ({ options, value, onValueChange }) => { + return ( + +
+ + ); + }; + // Column Definitions: Defines the columns to be displayed. + const [colDefs, setColDefs] = useState<(ColDef | ColGroupDef)[]>([ + { + headerCheckboxSelection: true, + checkboxSelection: true, + showDisabledCheckboxes: true, + headerName: "Variable Name", + field: "name", + flex: 2, + }, //This column will be twice as wide as the others + { + field: "type", + cellRenderer: BadgeRenderer, + cellEditor: DropdownEditor, + cellEditorParams: { + options: ["Generic", "Credential"], + }, + flex: 1, + editable: false, + }, + // { + // field: "value", + // cellEditor: "agLargeTextCellEditor", + // flex: 2, + // editable: false, + // }, + { + headerName: "Apply To Fields", + field: "default_fields", + flex: 1, + editable: false, + resizable: false, + }, + ]); + + const [selectedRows, setSelectedRows] = useState([]); + + async function removeVariables() { + const deleteGlobalVariablesPromise = selectedRows.map(async (row) => { + const id = getVariableId(row); + const deleteGlobalVariables = deleteGlobalVariable(id!); + await deleteGlobalVariables; + }); + Promise.all(deleteGlobalVariablesPromise) + .then(() => { + selectedRows.forEach((row) => { + removeGlobalVariable(row); + }); + }) + .catch(() => { + setErrorData({ + title: `Error deleting global variables.`, + }); + }); + } + + return ( +
+
+
+

+ Global Variables + +

+

+ Manage global variables and assign them to fields. +

+
+
+ + + + +
+
+ +
+ + + { + setSelectedRows( + event.api.getSelectedRows().map((row) => row.name), + ); + }} + rowSelection="multiple" + suppressRowClickSelection={true} + pagination={true} + columnDefs={colDefs} + rowData={rowData} + /> + + +
+
+ ); +} diff --git a/src/frontend/src/routes.tsx b/src/frontend/src/routes.tsx index d49e035f7..12be22d9e 100644 --- a/src/frontend/src/routes.tsx +++ b/src/frontend/src/routes.tsx @@ -6,7 +6,6 @@ import { CatchAllRoute } from "./components/catchAllRoutes"; import { StoreGuard } from "./components/storeGuard"; import AdminPage from "./pages/AdminPage"; import LoginAdminPage from "./pages/AdminPage/LoginPage"; -import ApiKeysPage from "./pages/ApiKeysPage"; import DeleteAccountPage from "./pages/DeleteAccountPage"; import FlowPage from "./pages/FlowPage"; import LoginPage from "./pages/LoginPage"; @@ -16,6 +15,7 @@ import PlaygroundPage from "./pages/Playground"; import SettingsPage from "./pages/SettingsPage"; import GeneralPage from "./pages/SettingsPage/pages/GeneralPage"; import GlobalVariablesPage from "./pages/SettingsPage/pages/GlobalVariablesPage"; +import ApiKeysPage from "./pages/SettingsPage/pages/ApiKeysPage"; import ShortcutsPage from "./pages/SettingsPage/pages/ShortcutsPage"; import SignUp from "./pages/SignUpPage"; import StorePage from "./pages/StorePage"; @@ -56,6 +56,7 @@ const Router = () => { > } /> } /> + } /> } /> } />