feat(service-variables): enhance service variables management with new tabs and external secrets integration

Author: TheoGrandin74

apps/console-v5/src/routeTree.gen.ts

@@ -1,12 +1,18 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
 import { Suspense, useState } from 'react'
 import { match } from 'ts-pattern'
-import { useDeployService, useService } from '@qovery/domains/services/feature'
+import {
+  BuiltInTab,
+  CustomTab,
+  EXTERNAL_SECRETS_USE_CASES,
+  ExternalSecretsTab,
+  type ExternalSecretsUseCaseId,
+  useDeployService,
+  useService,
+} from '@qovery/domains/services/feature'
 import { Heading, Icon, LoaderSpinner, Navbar, Section } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
-import { BuiltInTab } from './variables-built-in-tab'
-import { CustomTab } from './variables-custom-tab'
-import { ExternalSecretsTab } from './variables-external-secrets-tab'
+import { useUseCasePage } from '../../../../../../../../../../app/components/use-cases/use-case-context'
 
 type VariableTab = 'custom' | 'external-secrets' | 'built-in'
 
@@ -21,6 +27,11 @@ function RouteComponent() {
   useDocumentTitle('Service - Variables')
 
   const [activeTab, setActiveTab] = useState<VariableTab>('custom')
+  const { selectedCaseId } = useUseCasePage({
+    pageId: 'service-variables-external-secrets',
+    options: EXTERNAL_SECRETS_USE_CASES,
+    defaultCaseId: 'filled',
+  })
 
   const { data: service } = useService({
     environmentId,
@@ -104,7 +115,9 @@ function RouteComponent() {
                     toasterCallback={toasterCallback}
                   />
                 )}
-                {activeTab === 'external-secrets' && <ExternalSecretsTab />}
+                {activeTab === 'external-secrets' && (
+                  <ExternalSecretsTab selectedCaseId={selectedCaseId as ExternalSecretsUseCaseId} />
+                )}
                 {activeTab === 'built-in' && scope && (
                   <BuiltInTab
                     scope={scope}

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

@@ -66,3 +66,6 @@ export * from './lib/service-deployment-list/service-deployment-list-skeleton'
 export * from './lib/pod-details/pod-details'
 export * from './lib/force-unlock-modal/force-unlock-modal'
 export * from './lib/application-settings-resources/application-settings-resources'
+export * from './lib/service-variables-tabs/service-variables-built-in-tab'
+export * from './lib/service-variables-tabs/service-variables-custom-tab'
+export * from './lib/service-variables-tabs/service-variables-external-secrets-tab'

libs/domains/services/feature/src/index.ts

@@ -35,13 +35,16 @@ import {
   useModalConfirmation,
 } from '@qovery/shared/ui'
 import { pluralize, twMerge } from '@qovery/shared/util-js'
-import {
-  type UseCaseOption,
-  useUseCasePage,
-} from '../../../../../../../../../../app/components/use-cases/use-case-context'
 
 const { Table } = TablePrimitives
 
+export type ExternalSecretsUseCaseId =
+  | 'filled'
+  | 'secret-manager-addon-not-detected'
+  | 'secret-manager-addon-no-manager'
+  | 'secret-manager-addon-not-redeployed'
+  | 'empty'
+
 interface ExternalSecret {
   id: string
   name: string
@@ -131,7 +134,7 @@ const FAKE_SECRETS: ExternalSecret[] = [
 
 const EMPTY_SECRETS: ExternalSecret[] = []
 
-const EXTERNAL_SECRETS_USE_CASES: UseCaseOption[] = [
+export const EXTERNAL_SECRETS_USE_CASES: { id: ExternalSecretsUseCaseId; label: string }[] = [
   { id: 'filled', label: 'Filled' },
   { id: 'secret-manager-addon-not-detected', label: 'Secret manager add-on not detected' },
   { id: 'secret-manager-addon-no-manager', label: 'Secret manager add-on with no manager' },
@@ -486,14 +489,11 @@ function AttachSecretsModal({ selectedCount, onClose, onAttach }: AttachSecretsM
   )
 }
 
-export function ExternalSecretsTab() {
-  const useCaseOptions = EXTERNAL_SECRETS_USE_CASES
-  const { selectedCaseId } = useUseCasePage({
-    pageId: 'service-variables-external-secrets',
-    options: useCaseOptions,
-    defaultCaseId: 'filled',
-  })
+interface ExternalSecretsTabProps {
+  selectedCaseId?: ExternalSecretsUseCaseId
+}
 
+export function ExternalSecretsTab({ selectedCaseId = 'filled' }: ExternalSecretsTabProps) {
   const baseSecrets = useMemo(
     () =>
       match(selectedCaseId)