feat: added missing breadcrumbs for integration pages

frontend/src/pages/organization/SecretScanningPage/SecretScanningPage.tsx

@@ -210,4 +210,4 @@ export const SecretScanningPage = withPermission(
     action: OrgPermissionActions.Read,
     subject: OrgPermissionSubjects.SecretScanning
   }
-);
+);

frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/IntegrationsDetailsByIDPage.tsx

@@ -1,8 +1,8 @@
 import { Helmet } from "react-helmet";
 import { useTranslation } from "react-i18next";
-import { faChevronLeft, faEllipsis, faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { faRefresh, faTrash } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useNavigate, useParams } from "@tanstack/react-router";
+import { useParams } from "@tanstack/react-router";
 import { twMerge } from "tailwind-merge";
 
 import { OrgPermissionCan } from "@app/components/permissions";
@@ -13,6 +13,7 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
   EmptyState,
+  PageHeader,
   Tooltip
 } from "@app/components/v2";
 import { ROUTE_PATHS } from "@app/const/routes";
@@ -28,7 +29,6 @@ import { integrationSlugNameMapping } from "./IntegrationsDetailsByIDPage.utils"
 
 export const IntegrationDetailsByIDPage = () => {
   const { t } = useTranslation();
-  const navigate = useNavigate();
   const integrationId = useParams({
     from: ROUTE_PATHS.SecretManager.IntegrationDetailsByIDPage.id,
     select: (el) => el.integrationId
@@ -50,38 +50,21 @@ export const IntegrationDetailsByIDPage = () => {
         <meta property="og:title" content="Manage your .env files in seconds" />
         <meta name="og:description" content={t("integrations.description") as string} />
       </Helmet>
-      <div className="container mx-auto flex flex-col justify-between bg-bunker-800 text-white">
+      <div className="mx-auto flex max-w-7xl flex-col justify-between bg-bunker-800 text-white">
         {integration ? (
-          <div className="mx-auto mb-6 w-full max-w-7xl px-6 py-6">
-            <Button
-              variant="link"
-              type="submit"
-              leftIcon={<FontAwesomeIcon icon={faChevronLeft} />}
-              onClick={() => {
-                navigate({
-                  to: "/secret-manager/$projectId/integrations",
-                  params: {
-                    projectId
-                  }
-                });
-              }}
-              className="mb-4"
+          <div className="mx-auto mb-6 w-full max-w-7xl">
+            <PageHeader
+              title={`${integrationSlugNameMapping[integration.integration]} Integration`}
             >
-              Integrations
-            </Button>
-            <div className="mb-4 flex items-center justify-between">
-              <p className="text-3xl font-semibold text-white">
-                {integrationSlugNameMapping[integration.integration]} Integration
-              </p>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild className="rounded-lg">
                   <div className="hover:text-primary-400 data-[state=open]:text-primary-400">
                     <Tooltip content="More options">
-                      <FontAwesomeIcon size="sm" icon={faEllipsis} />
+                      <Button variant="outline_bg">More</Button>
                     </Tooltip>
                   </div>
                 </DropdownMenuTrigger>
-                <DropdownMenuContent align="start" className="p-1">
+                <DropdownMenuContent align="end" className="p-1">
                   <DropdownMenuItem
                     onClick={async () => {
                       await syncIntegration({
@@ -119,13 +102,13 @@ export const IntegrationDetailsByIDPage = () => {
                   </OrgPermissionCan>
                 </DropdownMenuContent>
               </DropdownMenu>
-            </div>
-            <div className="flex justify-center">
+            </PageHeader>
+            <div className="flex">
               <div className="mr-4 w-96">
                 <IntegrationDetailsSection integration={integration} />
                 <IntegrationConnectionSection integration={integration} />
               </div>
-              <div className="space-y-4">
+              <div className="flex-grow space-y-4">
                 <IntegrationSettingsSection integration={integration} />
                 <IntegrationAuditLogsSection integration={integration} />
               </div>

frontend/src/pages/secret-manager/IntegrationsDetailsByIDPage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { IntegrationDetailsByIDPage } from "./IntegrationsDetailsByIDPage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/$integrationId"
 )({
-  component: IntegrationDetailsByIDPage
+  component: IntegrationDetailsByIDPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Details"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/IntegrationsListPage/components/IntegrationsSection/IntegrationsSection.tsx

@@ -1,7 +1,7 @@
 import { faPlus } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
-import { Button, Checkbox, DeleteActionModal } from "@app/components/v2";
+import { Button, Checkbox, DeleteActionModal, PageHeader } from "@app/components/v2";
 import { usePopUp, useToggle } from "@app/hooks";
 import { TCloudIntegration, TIntegration } from "@app/hooks/api/types";
 
@@ -38,11 +38,11 @@ export const IntegrationsSection = ({
   const [shouldDeleteSecrets, setShouldDeleteSecrets] = useToggle(false);
 
   return (
-    <div className="mx-6 mb-8">
-      <div className="mb-4 mt-6 flex flex-col items-start justify-between px-2 text-xl">
-        <h1 className="text-3xl font-semibold">Integrations</h1>
-        <p className="text-base text-bunker-300">Manage integrations with third-party services.</p>
-      </div>
+    <div className="mb-8">
+      <PageHeader
+        title="Integrations"
+        description="Manage integrations with third-party services."
+      />
       <div className="w-full rounded-lg border border-mineshaft-600 bg-mineshaft-900 p-4">
         <div className="mb-4 flex items-center justify-between">
           <p className="text-xl font-semibold text-mineshaft-100">Active Integrations</p>

frontend/src/pages/secret-manager/integrations/AwsParameterStoreAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { AWSParameterStoreAuthorizeIntegrationPage } from "./AwsParameterStoreAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/authorize"
 )({
-  component: AWSParameterStoreAuthorizeIntegrationPage
+  component: AWSParameterStoreAuthorizeIntegrationPage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "AWS Parameter Store"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AwsParameterStoreConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-parameter-store/create"
 )({
   component: AWSParameterStoreConfigurePage,
-  validateSearch: zodValidator(AwsParameterStoreConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(AwsParameterStoreConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "AWS Parameter Store"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AwsSecretManagerAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { AWSSecretManagerAuthorizePage } from "./AwsSecretManagerAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/authorize"
 )({
-  component: AWSSecretManagerAuthorizePage
+  component: AWSSecretManagerAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "AWS Secret Manager"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AwsSecretManagerConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/aws-secret-manager/create"
 )({
   component: AwsSecretManagerConfigurePage,
-  validateSearch: zodValidator(AwsSecretManagerConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(AwsSecretManagerConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "AWS Secret Manager"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/create"
 )({
   component: AzureAppConfigurationConfigurePage,
-  validateSearch: zodValidator(AzureAppConfigurationPageQueryParamsSchema)
+  validateSearch: zodValidator(AzureAppConfigurationPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure App Configuration"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureAppConfigurationOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-app-configuration/oauth2/callback"
 )({
   component: AzureAppConfigurationOauthCallbackPage,
-  validateSearch: zodValidator(AzureAppConfigurationOauthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(AzureAppConfigurationOauthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure App Configuration"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureDevopsAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { AzureDevopsAuthorizePage } from "./AzureDevopsAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-devops/authorize"
 )({
-  component: AzureDevopsAuthorizePage
+  component: AzureDevopsAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure Devops"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureDevopsConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-devops/create"
 )({
   component: AzureDevopsConfigurePage,
-  validateSearch: zodValidator(AzureDevopsConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(AzureDevopsConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure Devops"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureKeyVaultAuthorizePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import z from "zod";
 
 import { AzureKeyVaultAuthorizePage } from "./AzureKeyVaultAuthorizePage";
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/authorize"
 )({
   component: AzureKeyVaultAuthorizePage,
-  validateSearch: PageQueryParamsSchema
+  validateSearch: PageQueryParamsSchema,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure Key Vault"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureKeyVaultConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/create"
 )({
   component: AzureKeyVaultConfigurePage,
-  validateSearch: zodValidator(AzureKeyVaultConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(AzureKeyVaultConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure Key Vault"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/AzureKeyVaultOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/azure-key-vault/oauth2/callback"
 )({
   component: AzureKeyVaultOauthCallbackPage,
-  validateSearch: zodValidator(AzureKeyVaultOauthCallbackQueryParamsSchema)
+  validateSearch: zodValidator(AzureKeyVaultOauthCallbackQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Azure Key Vault"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/BitbucketConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/create"
 )({
   component: BitbucketConfigurePage,
-  validateSearch: zodValidator(BitbucketConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(BitbucketConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Bitbucket"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/BitbucketOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/bitbucket/oauth2/callback"
 )({
   component: BitbucketOauthCallbackPage,
-  validateSearch: zodValidator(BitbucketOauthCallbackQueryParamsSchema)
+  validateSearch: zodValidator(BitbucketOauthCallbackQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Bitbucket"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/ChecklyAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { ChecklyAuthorizePage } from "./ChecklyAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/checkly/authorize"
 )({
-  component: ChecklyAuthorizePage
+  component: ChecklyAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Checkly"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/ChecklyConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/checkly/create"
 )({
   component: ChecklyConfigurePage,
-  validateSearch: zodValidator(ChecklyConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(ChecklyConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Checkly"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CircleCIAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { CircleCIAuthorizePage } from "./CircleCIAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/circleci/authorize"
 )({
-  component: CircleCIAuthorizePage
+  component: CircleCIAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Circle CI"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CircleCIConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/circleci/create"
 )({
   component: CircleCIConfigurePage,
-  validateSearch: zodValidator(CircleCIConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(CircleCIConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Circle CI"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/Cloud66AuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { Cloud66AuthorizePage } from "./Cloud66AuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/cloud-66/authorize"
 )({
-  component: Cloud66AuthorizePage
+  component: Cloud66AuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Cloud 66"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/Cloud66ConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/cloud-66/create"
 )({
   component: Cloud66ConfigurePage,
-  validateSearch: zodValidator(Cloud66ConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(Cloud66ConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Cloud 66"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CloudflarePagesAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { CloudflarePagesAuthorizePage } from "./CloudflarePagesAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-pages/authorize"
 )({
-  component: CloudflarePagesAuthorizePage
+  component: CloudflarePagesAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Cloudflare Pages"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CloudflarePagesConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-pages/create"
 )({
   component: CloudflarePagesConfigurePage,
-  validateSearch: zodValidator(CloudflarePagesConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(CloudflarePagesConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Cloudflare Pages"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CloudflareWorkersAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { CloudflareWorkersAuthorizePage } from "./CloudflareWorkersAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-workers/authorize"
 )({
-  component: CloudflareWorkersAuthorizePage
+  component: CloudflareWorkersAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Cloudflare Workers"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CloudflareWorkersConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/cloudflare-workers/create"
 )({
   component: CloudflareWorkersConfigurePage,
-  validateSearch: zodValidator(CloudflareWorkersConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(CloudflareWorkersConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Cloudflare Workers"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CodefreshAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { CodefreshAuthorizePage } from "./CodefreshAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/codefresh/authorize"
 )({
-  component: CodefreshAuthorizePage
+  component: CodefreshAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Codefresh"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/CodefreshConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/codefresh/create"
 )({
   component: CodefreshConfigurePage,
-  validateSearch: zodValidator(CodefreshConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(CodefreshConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Codefresh"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/DatabricksAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { DatabricksAuthorizePage } from "./DatabricksAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/databricks/authorize"
 )({
-  component: DatabricksAuthorizePage
+  component: DatabricksAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Databricks"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/DatabricksConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/databricks/create"
 )({
   component: DatabricksConfigurePage,
-  validateSearch: zodValidator(DatabricksConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(DatabricksConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Databricks"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { DigitalOceanAppPlatformAuthorizePage } from "./DigitalOceanAppPlatformAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/digital-ocean-app-platform/authorize"
 )({
-  component: DigitalOceanAppPlatformAuthorizePage
+  component: DigitalOceanAppPlatformAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "DigitalOcean App Platform"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/DigitalOceanAppPlatformConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/digital-ocean-app-platform/create"
 )({
   component: DigitalOceanAppPlatformConfigurePage,
-  validateSearch: zodValidator(DigitalOceanAppPlatformConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(DigitalOceanAppPlatformConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "DigitalOcean App Platform"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/FlyioAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { FlyioAuthorizePage } from "./FlyioAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/flyio/authorize"
 )({
-  component: FlyioAuthorizePage
+  component: FlyioAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Fly IO"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/FlyioConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/flyio/create"
 )({
   component: FlyioConfigurePage,
-  validateSearch: zodValidator(FlyioConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(FlyioConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Fly IO"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GcpSecretManagerAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GcpSecretManagerAuthorizePage } from "./GcpSecretManagerAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/authorize"
 )({
-  component: GcpSecretManagerAuthorizePage
+  component: GcpSecretManagerAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GCP Secret Manager"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GcpSecretManagerConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/create"
 )({
   component: GcpSecretManagerConfigurePage,
-  validateSearch: zodValidator(GcpConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(GcpConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GCP Secret Manager"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GcpSecretManagerOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/gcp-secret-manager/oauth2/callback"
 )({
   component: GcpSecretManagerOauthCallbackPage,
-  validateSearch: zodValidator(GcpSecretManagerOAuthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(GcpSecretManagerOAuthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GCP Secret Manager"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GithubAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GithubAuthorizePage } from "./GithubAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/github/auth-mode-selection"
 )({
-  component: GithubAuthorizePage
+  component: GithubAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GitHub"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GithubConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/github/create"
 )({
   component: GithubConfigurePage,
-  validateSearch: zodValidator(GithubConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(GithubConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GitHub"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GithubOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -14,5 +14,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/github/oauth2/callback"
 )({
   component: GithubOauthCallbackPage,
-  validateSearch: zodValidator(GithubOAuthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(GithubOAuthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GitHub"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GitlabAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { GitlabAuthorizePage } from "./GitlabAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/gitlab/authorize"
 )({
-  component: GitlabAuthorizePage
+  component: GitlabAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GitLab"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GitlabConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/gitlab/create"
 )({
   component: GitlabConfigurePage,
-  validateSearch: zodValidator(GitlabConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(GitlabConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GitLab"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/GitlabOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/gitlab/oauth2/callback"
 )({
   component: GitLabOAuthCallbackPage,
-  validateSearch: zodValidator(GitlabOAuthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(GitlabOAuthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "GitLab"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/HashicorpVaultAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { HashicorpVaultAuthorizePage } from "./HashicorpVaultAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/hashicorp-vault/authorize"
 )({
-  component: HashicorpVaultAuthorizePage
+  component: HashicorpVaultAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Hashicorp Vault"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/HashicorpVaultConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/hashicorp-vault/create"
 )({
   component: HashicorpVaultConfigurePage,
-  validateSearch: zodValidator(HashicorpVaultConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(HashicorpVaultConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Hashicorp Vault"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/HasuraCloudAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { HasuraCloudAuthorizePage } from "./HasuraCloudAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/hasura-cloud/authorize"
 )({
-  component: HasuraCloudAuthorizePage
+  component: HasuraCloudAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Hasura Cloud"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/HasuraCloudConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/hasura-cloud/create"
 )({
   component: HasuraCloudConfigurePage,
-  validateSearch: zodValidator(HasuraCloudConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(HasuraCloudConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Hasura Cloud"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/HerokuConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/heroku/create"
 )({
   component: HerokuConfigurePage,
-  validateSearch: zodValidator(HerokuConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(HerokuConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Heroku Cloud"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/HerokuOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/heroku/oauth2/callback"
 )({
   component: HerokuOAuthCallbackPage,
-  validateSearch: zodValidator(HerokuOAuthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(HerokuOAuthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Heroku Cloud"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/LaravelForgeAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { LaravelForgeAuthorizePage } from "./LaravelForgeAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/laravel-forge/authorize"
 )({
-  component: LaravelForgeAuthorizePage
+  component: LaravelForgeAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Laravel Forge"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/LaravelForgeConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/laravel-forge/create"
 )({
   component: LaravelForgeConfigurePage,
-  validateSearch: zodValidator(LaravelForgeConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(LaravelForgeConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Laravel Forge"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/NetlifyConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/netlify/create"
 )({
   component: NetlifyConfigurePage,
-  validateSearch: zodValidator(NetlifyConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(NetlifyConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Netlify"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/NetlifyOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/netlify/oauth2/callback"
 )({
   component: NetlifyOauthCallbackPage,
-  validateSearch: zodValidator(NetlifyOAuthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(NetlifyOAuthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Netlify"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/NorthflankAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { NorthflankAuthorizePage } from "./NorthflankAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/northflank/authorize"
 )({
-  component: NorthflankAuthorizePage
+  component: NorthflankAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Northflank"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/NorthflankConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/northflank/create"
 )({
   component: NorthflankConfigurePage,
-  validateSearch: zodValidator(NorthflankConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(NorthflankConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Northflank"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/OctopusDeployAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { OctopusDeployAuthorizePage } from "./OctopusDeployAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/octopus-deploy/authorize"
 )({
-  component: OctopusDeployAuthorizePage
+  component: OctopusDeployAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Octopus Deploy"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/OctopusDeployConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/octopus-deploy/create"
 )({
   component: OctopusDeployConfigurePage,
-  validateSearch: zodValidator(OctopusDeployConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(OctopusDeployConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Octopus Deploy"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/QoveryAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { QoveryAuthorizePage } from "./QoveryAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/qovery/authorize"
 )({
-  component: QoveryAuthorizePage
+  component: QoveryAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Qovery"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/QoveryConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/qovery/create"
 )({
   component: QoveryConfigurePage,
-  validateSearch: zodValidator(QoveryConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(QoveryConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Qovery"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/RailwayAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { RailwayAuthorizePage } from "./RailwayAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/railway/authorize"
 )({
-  component: RailwayAuthorizePage
+  component: RailwayAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Railway"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/RailwayConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/railway/create"
 )({
   component: RailwayConfigurePage,
-  validateSearch: zodValidator(RailwayConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(RailwayConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Railway"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/RenderAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { RenderAuthorizePage } from "./RenderAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/render/authorize"
 )({
-  component: RenderAuthorizePage
+  component: RenderAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Render"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/RenderConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/render/create"
 )({
   component: RenderConfigurePage,
-  validateSearch: zodValidator(RenderConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(RenderConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Render"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/RundeckAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { RundeckAuthorizePage } from "./RundeckAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/rundeck/authorize"
 )({
-  component: RundeckAuthorizePage
+  component: RundeckAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Rundeck"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/RundeckConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/rundeck/create"
 )({
   component: RundeckConfigurePage,
-  validateSearch: zodValidator(RundeskConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(RundeskConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Rundeck"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/SelectIntegrationAuthPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/select-integration-auth"
 )({
   component: SelectIntegrationAuthPage,
-  validateSearch: zodValidator(SelectIntegrationAuthPageQueryParamsSchema)
+  validateSearch: zodValidator(SelectIntegrationAuthPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Configure"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/SupabaseAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { SupabaseAuthorizePage } from "./SupabaseAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/supabase/authorize"
 )({
-  component: SupabaseAuthorizePage
+  component: SupabaseAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Supabase"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/SupabaseConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/supabase/create"
 )({
   component: SupabaseConfigurePage,
-  validateSearch: zodValidator(SupabaseConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(SupabaseConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Supabase"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/TeamcityAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { TeamcityAuthorizePage } from "./TeamcityAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/teamcity/authorize"
 )({
-  component: TeamcityAuthorizePage
+  component: TeamcityAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Teamcity"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/TeamcityConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/teamcity/create"
 )({
   component: TeamcityConfigurePage,
-  validateSearch: zodValidator(TeamcityConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(TeamcityConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Teamcity"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/TerraformCloudAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { TerraformCloudAuthorizePage } from "./TerraformCloudAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/terraform-cloud/authorize"
 )({
-  component: TerraformCloudAuthorizePage
+  component: TerraformCloudAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Terraform Cloud"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/TerraformCloudConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/terraform-cloud/create"
 )({
   component: TerraformCloudConfigurePage,
-  validateSearch: zodValidator(TerraformCloudConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(TerraformCloudConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Terraform Cloud"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/TravisCIAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { TravisCIAuthorizePage } from "./TravisCIAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/travisci/authorize"
 )({
-  component: TravisCIAuthorizePage
+  component: TravisCIAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Travis CI"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/TravisCIConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/travisci/create"
 )({
   component: TravisCIConfigurePage,
-  validateSearch: zodValidator(TravisCIConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(TravisCIConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Travis CI"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/VercelConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/create"
 )({
   component: VercelConfigurePage,
-  validateSearch: zodValidator(VercelConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(VercelConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Vercel"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/VercelOauthCallbackPage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -13,5 +13,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/vercel/oauth2/callback"
 )({
   component: VercelOauthCallbackPage,
-  validateSearch: zodValidator(VercelOAuthCallbackPageQueryParamsSchema)
+  validateSearch: zodValidator(VercelOAuthCallbackPageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Vercel"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/WindmillAuthorizePage/route.tsx

@@ -1,9 +1,23 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 
 import { WindmillAuthorizePage } from "./WindmillAuthorizePage";
 
 export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/authorize"
 )({
-  component: WindmillAuthorizePage
+  component: WindmillAuthorizePage,
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Windmill"
+        }
+      ]
+    };
+  }
 });

frontend/src/pages/secret-manager/integrations/WindmillConfigurePage/route.tsx

@@ -1,4 +1,4 @@
-import { createFileRoute } from "@tanstack/react-router";
+import { createFileRoute, linkOptions } from "@tanstack/react-router";
 import { zodValidator } from "@tanstack/zod-adapter";
 import { z } from "zod";
 
@@ -12,5 +12,19 @@ export const Route = createFileRoute(
   "/_authenticate/_inject-org-details/secret-manager/$projectId/_secret-manager-layout/integrations/windmill/create"
 )({
   component: WindmillConfigurePage,
-  validateSearch: zodValidator(WindmillConfigurePageQueryParamsSchema)
+  validateSearch: zodValidator(WindmillConfigurePageQueryParamsSchema),
+  beforeLoad: ({ context, params }) => {
+    return {
+      breadcrumbs: [
+        ...context.breadcrumbs,
+        {
+          label: "Integrations",
+          link: linkOptions({ to: "/secret-manager/$projectId/integrations", params })
+        },
+        {
+          label: "Windmill"
+        }
+      ]
+    };
+  }
 });