API Keys in settings

web/components/templates/settings/settingsLayout.tsx

@@ -6,7 +6,7 @@ import {
   UserGroupIcon,
 } from "@heroicons/react/24/outline";
 import { Divider } from "@tremor/react";
-import { LinkIcon } from "lucide-react";
+import { KeyIcon, LinkIcon } from "lucide-react";
 import Link from "next/link";
 import { useRouter } from "next/router";
 import { ReactNode } from "react";
@@ -18,6 +18,12 @@ const tabs = [
     icon: BuildingOfficeIcon,
     href: "/settings",
   },
+  {
+    id: "api-keys",
+    title: "API Keys",
+    icon: KeyIcon,
+    href: "/settings/api-keys",
+  },
   {
     id: "connections",
     title: "Connections",

web/pages/settings/api-keys.tsx

@@ -0,0 +1,42 @@
+import KeyPage from "@/components/templates/keys/keyPage";
+import SettingsLayout from "@/components/templates/settings/settingsLayout";
+import { ReactElement } from "react";
+import AuthLayout from "../../components/layout/auth/authLayout";
+import { withAuthSSR } from "../../lib/api/handlerWrappers";
+import { SortDirection } from "../../services/lib/sorts/requests/sorts";
+
+const Connections = () => {
+  return <KeyPage />;
+};
+
+Connections.getLayout = function getLayout(page: ReactElement) {
+  return (
+    <AuthLayout>
+      <SettingsLayout>{page}</SettingsLayout>
+    </AuthLayout>
+  );
+};
+
+export default Connections;
+
+export const getServerSideProps = withAuthSSR(async (options) => {
+  const { page, page_size, sortKey, sortDirection, isCustomProperty, tab } =
+    options.context.query;
+
+  const currentPage = parseInt(page as string, 10) || 1;
+  const pageSize = parseInt(page_size as string, 10) || 10;
+
+  return {
+    props: {
+      user: options.userData.user,
+      currentPage,
+      pageSize,
+      sort: {
+        sortKey: sortKey ? (sortKey as string) : null,
+        sortDirection: sortDirection ? (sortDirection as SortDirection) : null,
+        isCustomProperty: isCustomProperty === "true",
+      },
+      defaultIndex: tab ? parseInt(tab as string) : 0,
+    },
+  };
+});