feat: add Vaults page for managing secret connections in settings

Dashboard/src/Pages/Settings/SideMenu.tsx

@@ -201,6 +201,15 @@ const DashboardSideMenu: () => JSX.Element = (): ReactElement => {
           },
           icon: IconProp.Flag,
         },
+        {
+          link: {
+            title: "Vaults",
+            to: RouteUtil.populateRouteParams(
+              RouteMap[PageMap.SETTINGS_VAULTS] as Route,
+            ),
+          },
+          icon: IconProp.Lock,
+        },
         {
           link: {
             title: "Audit Logs",

Dashboard/src/Pages/Settings/Vaults.tsx

@@ -0,0 +1,86 @@
+import PageComponentProps from "../PageComponentProps";
+import React, { FunctionComponent, ReactElement } from "react";
+import Card from "Common/UI/Components/Card/Card";
+import { ButtonStyleType } from "Common/UI/Components/Button/Button";
+import IconProp from "Common/Types/Icon/IconProp";
+
+const Vaults: FunctionComponent<PageComponentProps> = (): ReactElement => {
+  return (
+    <>
+      <Card
+        title="HashiCorp Vault"
+        description="Connect HashiCorp Vault to securely manage and inject secrets, tokens, and encryption keys into your OneUptime workflows and monitors."
+        buttons={[
+          {
+            title: "Connect",
+            buttonStyle: ButtonStyleType.PRIMARY,
+            icon: IconProp.Lock,
+            onClick: () => {},
+          },
+        ]}
+      />
+      <Card
+        title="AWS Secrets Manager"
+        description="Connect AWS Secrets Manager to securely retrieve and manage secrets stored in your AWS account for use with OneUptime monitors and integrations."
+        buttons={[
+          {
+            title: "Connect",
+            buttonStyle: ButtonStyleType.PRIMARY,
+            icon: IconProp.Lock,
+            onClick: () => {},
+          },
+        ]}
+      />
+      <Card
+        title="Google Cloud Secret Manager"
+        description="Connect Google Cloud Secret Manager to securely access and manage secrets stored in your GCP project for use with OneUptime."
+        buttons={[
+          {
+            title: "Connect",
+            buttonStyle: ButtonStyleType.PRIMARY,
+            icon: IconProp.Lock,
+            onClick: () => {},
+          },
+        ]}
+      />
+      <Card
+        title="Azure Key Vault"
+        description="Connect Azure Key Vault to securely manage and access secrets, keys, and certificates stored in your Azure subscription."
+        buttons={[
+          {
+            title: "Connect",
+            buttonStyle: ButtonStyleType.PRIMARY,
+            icon: IconProp.Lock,
+            onClick: () => {},
+          },
+        ]}
+      />
+      <Card
+        title="Doppler"
+        description="Connect Doppler to sync and manage environment variables and secrets across your OneUptime integrations and workflows."
+        buttons={[
+          {
+            title: "Connect",
+            buttonStyle: ButtonStyleType.PRIMARY,
+            icon: IconProp.Lock,
+            onClick: () => {},
+          },
+        ]}
+      />
+      <Card
+        title="1Password"
+        description="Connect 1Password to securely access and manage secrets using 1Password Connect for your OneUptime monitors and automations."
+        buttons={[
+          {
+            title: "Connect",
+            buttonStyle: ButtonStyleType.PRIMARY,
+            icon: IconProp.Lock,
+            onClick: () => {},
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default Vaults;

Dashboard/src/Routes/SettingsRoutes.tsx

@@ -59,6 +59,7 @@ import SettingsUsageHistory from "../Pages/Settings/UsageHistory";
 
 import SettingsSlackIntegration from "../Pages/Settings/SlackIntegration";
 import SettingsAuditLogs from "../Pages/Settings/AuditLogs";
+import SettingsVaults from "../Pages/Settings/Vaults";
 
 const SettingsRoutes: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
@@ -386,6 +387,16 @@ const SettingsRoutes: FunctionComponent<ComponentProps> = (
             />
           }
         />
+
+        <PageRoute
+          path={RouteUtil.getLastPathForKey(PageMap.SETTINGS_VAULTS)}
+          element={
+            <SettingsVaults
+              {...props}
+              pageRoute={RouteMap[PageMap.SETTINGS_VAULTS] as Route}
+            />
+          }
+        />
       </PageRoute>
     </Routes>
   );

Dashboard/src/Utils/Breadcrumbs/SettingsBreadcrumbs.ts

@@ -133,6 +133,11 @@ export function getSettingsBreadcrumbs(path: string): Array<Link> | undefined {
       "Settings",
       "Audit Logs",
     ]),
+    ...BuildBreadcrumbLinksByTitles(PageMap.SETTINGS_VAULTS, [
+      "Project",
+      "Settings",
+      "Vaults",
+    ]),
   };
   return breadcrumpLinksMap[path];
 }

Dashboard/src/Utils/PageMap.ts

@@ -399,6 +399,9 @@ enum PageMap {
   // Audit Logs
   SETTINGS_AUDIT_LOGS = "SETTINGS_AUDIT_LOGS",
 
+  // Vaults
+  SETTINGS_VAULTS = "SETTINGS_VAULTS",
+
   // Misc
   LOGOUT = "LOGOUT",
   USER_PROFILE_OVERVIEW = "USER_PROFILE_OVERVIEW",

Dashboard/src/Utils/RouteMap.ts

@@ -328,6 +328,7 @@ export const SettingsRoutePath: Dictionary<string> = {
   [PageMap.SETTINGS_LLM_PROVIDER_VIEW]: `llm-provider/${RouteParams.ModelID}`,
   [PageMap.SETTINGS_AI_BILLING]: "ai-credits",
   [PageMap.SETTINGS_AUDIT_LOGS]: "audit-logs",
+  [PageMap.SETTINGS_VAULTS]: "vaults",
 };
 
 export const OnCallDutyRoutePath: Dictionary<string> = {
@@ -2273,6 +2274,12 @@ const RouteMap: Dictionary<Route> = {
     }`,
   ),
 
+  [PageMap.SETTINGS_VAULTS]: new Route(
+    `/dashboard/${RouteParams.ProjectID}/settings/${
+      SettingsRoutePath[PageMap.SETTINGS_VAULTS]
+    }`,
+  ),
+
   // workflows.
   [PageMap.WORKFLOWS_ROOT]: new Route(
     `/dashboard/${RouteParams.ProjectID}/workflows/*`,