feat(variables): add external secrets pages

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/addons.tsx

@@ -5,6 +5,7 @@ import { useMemo, useState } from 'react'
 import {
   AddonToggleCard,
   SECRET_MANAGER_OPTIONS,
+  SecretManagerAssociatedExternalSecretsModal,
   SecretManagerIntegrationModal,
   SecretManagerList,
   getSecretManagerOption,
@@ -109,6 +110,21 @@ function RouteComponent() {
     })
   }
 
+  const openSecretManagerAssociatedExternalSecretsModal = (integration: SecretManagerAccess) => {
+    openModal({
+      content: (
+        <SecretManagerAssociatedExternalSecretsModal
+          secretManagerAccessId={integration.id}
+          organizationId={organizationId}
+          onClose={closeModal}
+        />
+      ),
+      options: {
+        fakeModal: true,
+      },
+    })
+  }
+
   const handleSave = async () => {
     if (!cluster) return
 
@@ -193,6 +209,7 @@ function RouteComponent() {
                         openSecretManagerModal(getSecretManagerOption(manager.endpoint.mode), manager)
                       }
                       onDelete={handleDeleteSecretManager}
+                      onViewAssociatedExternalSecrets={openSecretManagerAssociatedExternalSecretsModal}
                     />
                   </div>
                 </div>

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/built-in.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { BuiltInTab } from '@qovery/domains/services/feature'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/built-in'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <BuiltInTab />
+}

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/external-secrets.tsx

@@ -0,0 +1,38 @@
+import { Navigate, createFileRoute } from '@tanstack/react-router'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { getServiceVariableScope, useService } from '@qovery/domains/services/feature'
+import { ExternalSecretsTab } from '@qovery/domains/variables/feature'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/external-secrets'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId, projectId, environmentId, serviceId } = Route.useParams()
+  const secretManagerEnabled = useFeatureFlagEnabled('secret-manager') === true
+
+  if (!secretManagerEnabled) {
+    return (
+      <Navigate
+        to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables"
+        params={{ organizationId, projectId, environmentId, serviceId }}
+        replace
+      />
+    )
+  }
+
+  return <ExternalSecretsRouteContent environmentId={environmentId} serviceId={serviceId} />
+}
+
+function ExternalSecretsRouteContent({ environmentId, serviceId }: { environmentId: string; serviceId: string }) {
+  const { data: service } = useService({ environmentId, serviceId, suspense: true })
+  const scope = getServiceVariableScope(service?.serviceType)
+
+  if (!scope) {
+    return null
+  }
+
+  return <ExternalSecretsTab scope={scope} parentId={serviceId} />
+}

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/index.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { CustomTab } from '@qovery/domains/services/feature'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <CustomTab />
+}

apps/console/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/route.tsx

@@ -0,0 +1,87 @@
+import { type IconName } from '@fortawesome/fontawesome-common-types'
+import { Outlet, createFileRoute, useMatchRoute } from '@tanstack/react-router'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { Suspense } from 'react'
+import { Heading, Icon, LoaderSpinner, Navbar, Section } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables'
+)({
+  component: RouteComponent,
+})
+
+const tabs = [
+  {
+    id: 'custom',
+    label: 'Custom',
+    iconName: 'sliders' as IconName,
+    routeId:
+      '/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/',
+  },
+  {
+    id: 'external-secrets',
+    label: 'External secrets',
+    iconName: 'lock-keyhole' as IconName,
+    routeId:
+      '/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/external-secrets',
+  },
+  {
+    id: 'built-in',
+    label: 'Built-in',
+    iconName: 'cube' as IconName,
+    routeId:
+      '/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/variables/built-in',
+  },
+]
+
+const OutletLoader = () => (
+  <div className="flex h-64 items-center justify-center">
+    <LoaderSpinner className="w-6" />
+  </div>
+)
+
+function RouteComponent() {
+  const matchRoute = useMatchRoute()
+  const secretManagerEnabled = useFeatureFlagEnabled('secret-manager') === true
+  const visibleTabs = secretManagerEnabled ? tabs : tabs.filter((tab) => tab.id !== 'external-secrets')
+  useDocumentTitle('Service - Variables')
+
+  const activeTabId = visibleTabs.find((tab) => matchRoute({ to: tab.routeId }))?.id
+
+  return (
+    <div className="container mx-auto flex min-h-page-container flex-col pb-16 pt-6">
+      <Section className="gap-8">
+        <div className="flex shrink-0 flex-col gap-6">
+          <div className="flex justify-between">
+            <Heading>Service variables</Heading>
+          </div>
+          <hr className="w-full border-neutral" />
+        </div>
+
+        <div className="flex flex-col">
+          <div className="relative overflow-hidden rounded-t-lg border-x border-t border-neutral bg-surface-neutral-subtle">
+            <div className="bg-surface-neutral-subtle px-4 pb-2">
+              <Navbar.Root activeId={activeTabId} className="relative">
+                {visibleTabs.map((tab) => (
+                  <Navbar.Item key={tab.id} id={tab.id} to={tab.routeId}>
+                    <Icon iconName={tab.iconName} iconStyle="regular" />
+                    {tab.label}
+                  </Navbar.Item>
+                ))}
+              </Navbar.Root>
+            </div>
+          </div>
+
+          <div className="relative -mt-2 rounded-lg">
+            <div className="overflow-hidden rounded-lg border border-neutral bg-surface-neutral">
+              <Suspense fallback={<OutletLoader />}>
+                <Outlet />
+              </Suspense>
+            </div>
+          </div>
+        </div>
+      </Section>
+    </div>
+  )
+}