Added API Keys page into Settings

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: (
+        <ForwardedIconComponent
+          name="Key"
+          className="w-4 flex-shrink-0 justify-start stroke-[1.5]"
+        />
+      ),
+    },
     {
       title: "Shortcuts",
       href: "/settings/shortcuts",

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 !== "" ? (
+      <div>
+        <Badge variant="outline" size="md" className="font-normal">
+          {props.value}
+        </Badge>
+      </div>
+    ) : (
+      <div></div>
+    );
+  };
+
+  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 (
+      <Dropdown options={options} value={value} onSelect={onValueChange}>
+        <div className="-mt-1.5 w-full"></div>
+      </Dropdown>
+    );
+  };
+  // Column Definitions: Defines the columns to be displayed.
+  const [colDefs, setColDefs] = useState<(ColDef<any> | ColGroupDef<any>)[]>([
+    {
+      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<string[]>([]);
+
+  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 (
+    <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">
+            Global Variables
+            <ForwardedIconComponent
+              name="Globe"
+              className="ml-2 h-5 w-5 text-primary"
+            />
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Manage global variables and assign them to fields.
+          </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={removeVariables}
+          >
+            <IconComponent
+              name="Trash2"
+              className={cn(
+                "h-5 w-5 text-destructive group-disabled:text-primary",
+              )}
+            />
+          </Button>
+          <AddNewVariableButton>
+            <Button data-testid="api-key-button-store" variant="primary">
+              <IconComponent name="Plus" className="mr-2 w-4" />
+              Add New
+            </Button>
+          </AddNewVariableButton>
+        </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">
+          <CardContent className="h-full">
+            <TableComponent
+              overlayNoRowsTemplate="No data available"
+              onSelectionChanged={(event: SelectionChangedEvent) => {
+                setSelectedRows(
+                  event.api.getSelectedRows().map((row) => row.name),
+                );
+              }}
+              rowSelection="multiple"
+              suppressRowClickSelection={true}
+              pagination={true}
+              columnDefs={colDefs}
+              rowData={rowData}
+            />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

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 = () => {
       >
         <Route index element={<Navigate replace to={"general"} />} />
         <Route path="global-variables" element={<GlobalVariablesPage />} />
+        <Route path="api-keys" element={<ApiKeysPage />} />
         <Route path="general/:scrollId?" element={<GeneralPage />} />
         <Route path="shortcuts" element={<ShortcutsPage />} />
       </Route>