feat(argocd): add ArgoCD associated services modal (#2717)

RemiBonnet · web-flow · commit 42cbf690dc57 · 2026-06-01T13:28:30.000+02:00
* feat(argocd): add ArgoCD associated services modal

* fix(dependencies): pin qovery-typescript-axios version to 1.1.895 in package.json and yarn.lock
diff --git a/libs/domains/organizations/data-access/src/lib/domains-organizations-data-access.ts b/libs/domains/organizations/data-access/src/lib/domains-organizations-data-access.ts
@@ -202,6 +202,13 @@ export const organizations = createQueryKeys('organizations', {
       return response.data.results
     },
   }),
+  argoCdAssociatedServices: ({ clusterId }: { clusterId: string }) => ({
+    queryKey: [clusterId],
+    async queryFn() {
+      const response = await argoCdApi.getArgoCdAssociatedServices(clusterId)
+      return response.data.results
+    },
+  }),
   authProviders: ({ organizationId }: { organizationId: string }) => ({
     queryKey: [organizationId],
     async queryFn() {
diff --git a/libs/domains/organizations/feature/src/index.ts b/libs/domains/organizations/feature/src/index.ts
@@ -19,6 +19,7 @@ export * from './lib/label-create-edit-modal/label-create-edit-modal'
 export * from './lib/label-setting/label-setting'
 export * from './lib/helm-repository-services-list-modal/helm-repository-services-list-modal'
 export * from './lib/container-registry-services-list-modal/container-registry-services-list-modal'
+export * from './lib/argocd-associated-services-list-modal/argocd-associated-services-list-modal'
 export * from './lib/organization-overview/organization-overview'
 export * from './lib/hooks/use-add-credit-card/use-add-credit-card'
 export * from './lib/hooks/use-add-credit-code/use-add-credit-code'
@@ -87,6 +88,7 @@ export * from './lib/hooks/use-container-images/use-container-images'
 export * from './lib/hooks/use-container-versions/use-container-versions'
 export * from './lib/hooks/use-helm-repository-associated-services/use-helm-repository-associated-services'
 export * from './lib/hooks/use-container-registry-associated-services/use-container-registry-associated-services'
+export * from './lib/hooks/use-argocd-associated-services/use-argocd-associated-services'
 export * from './lib/hooks/use-organization-credentials/use-organization-credentials'
 export * from './lib/hooks/use-organization-argocd-integrations/use-organization-argocd-integrations'
 export * from './lib/hooks/use-save-argocd-destination-cluster-mapping/use-save-argocd-destination-cluster-mapping'
diff --git a/libs/domains/organizations/feature/src/lib/argocd-associated-services-list-modal/argocd-associated-services-list-modal.spec.tsx b/libs/domains/organizations/feature/src/lib/argocd-associated-services-list-modal/argocd-associated-services-list-modal.spec.tsx
@@ -0,0 +1,82 @@
+import { ArgocdAssociatedServiceType } from 'qovery-typescript-axios'
+import { renderWithProviders } from '@qovery/shared/util-tests'
+import * as useArgoCdAssociatedServices from '../hooks/use-argocd-associated-services/use-argocd-associated-services'
+import ArgoCdAssociatedServicesListModal, {
+  type ArgoCdAssociatedServicesListModalProps,
+  argoCdGroupByProjectEnvironmentsServices,
+} from './argocd-associated-services-list-modal'
+
+const useArgoCdAssociatedServicesMockSpy = jest.spyOn(
+  useArgoCdAssociatedServices,
+  'useArgoCdAssociatedServices'
+) as jest.Mock
+
+const props: ArgoCdAssociatedServicesListModalProps = {
+  organizationId: 'organization-id',
+  clusterId: 'cluster-id',
+  onClose: jest.fn(),
+  associatedServicesCount: 3,
+}
+
+const data = [
+  {
+    project_id: '1',
+    project_name: 'Project 1',
+    environment_id: '1',
+    environment_name: 'Development',
+    service_id: '101',
+    service_name: 'Service 1',
+    service_type: ArgocdAssociatedServiceType.ARGOCD_APP,
+  },
+  {
+    project_id: '1',
+    project_name: 'Project 1',
+    environment_id: '1',
+    environment_name: 'Development',
+    service_id: '102',
+    service_name: 'Service 2',
+    service_type: ArgocdAssociatedServiceType.ARGOCD_APP,
+  },
+  {
+    project_id: '2',
+    project_name: 'Project 2',
+    environment_id: '1',
+    environment_name: 'Staging',
+    service_id: '201',
+    service_name: 'Service 3',
+    service_type: ArgocdAssociatedServiceType.ARGOCD_APP,
+  },
+]
+
+describe('ArgoCdAssociatedServicesListModal', () => {
+  beforeEach(() => {
+    useArgoCdAssociatedServicesMockSpy.mockReturnValue({
+      data,
+    })
+  })
+
+  it('should render successfully', () => {
+    const { baseElement } = renderWithProviders(<ArgoCdAssociatedServicesListModal {...props} />)
+    expect(baseElement).toBeTruthy()
+  })
+
+  it('should group data by projects, environments, and services correctly', () => {
+    const result = argoCdGroupByProjectEnvironmentsServices(data)
+
+    expect(result).toHaveLength(2)
+
+    expect(result[0].project_id).toBe('1')
+    expect(result[0].project_name).toBe('Project 1')
+    expect(result[0].environments).toHaveLength(1)
+    expect(result[0].environments[0].environment_id).toBe('1')
+    expect(result[0].environments[0].environment_name).toBe('Development')
+    expect(result[0].environments[0].services).toHaveLength(2)
+
+    expect(result[1].project_id).toBe('2')
+    expect(result[1].project_name).toBe('Project 2')
+    expect(result[1].environments).toHaveLength(1)
+    expect(result[1].environments[0].environment_id).toBe('1')
+    expect(result[1].environments[0].environment_name).toBe('Staging')
+    expect(result[1].environments[0].services).toHaveLength(1)
+  })
+})
diff --git a/libs/domains/organizations/feature/src/lib/argocd-associated-services-list-modal/argocd-associated-services-list-modal.tsx b/libs/domains/organizations/feature/src/lib/argocd-associated-services-list-modal/argocd-associated-services-list-modal.tsx
@@ -0,0 +1,187 @@
+import { type ArgocdAssociatedServicesResponse } from 'qovery-typescript-axios'
+import { Suspense, useState } from 'react'
+import { IconEnum } from '@qovery/shared/enums'
+import { Heading, Icon, InputSearch, Link, LoaderSpinner, Section, TreeView } from '@qovery/shared/ui'
+import { useArgoCdAssociatedServices } from '../hooks/use-argocd-associated-services/use-argocd-associated-services'
+
+export interface ArgoCdAssociatedServicesListModalProps {
+  organizationId: string
+  clusterId: string
+  onClose: () => void
+  associatedServicesCount: number
+}
+
+interface Service {
+  service_id: string
+  service_name: string
+}
+
+interface Environment {
+  environment_id: string
+  environment_name: string
+  services: Service[]
+}
+
+interface Project {
+  project_id: string
+  project_name: string
+  environments: Environment[]
+}
+
+export function argoCdGroupByProjectEnvironmentsServices(
+  data: ArgocdAssociatedServicesResponse[],
+  searchValue?: string
+) {
+  const projects: Project[] = []
+
+  data.forEach(({ project_id, project_name, environment_id, environment_name, service_id, service_name }) => {
+    if (
+      searchValue === undefined ||
+      project_name.toLowerCase().includes(searchValue.toLowerCase()) ||
+      environment_name.toLowerCase().includes(searchValue.toLowerCase()) ||
+      service_name.toLowerCase().includes(searchValue.toLowerCase())
+    ) {
+      let project = projects.find((proj) => proj.project_id === project_id)
+      if (!project) {
+        project = {
+          project_id,
+          project_name,
+          environments: [],
+        }
+        projects.push(project)
+      }
+
+      let environment = project.environments.find((env) => env.environment_id === environment_id)
+      if (!environment) {
+        environment = {
+          environment_id,
+          environment_name,
+          services: [],
+        }
+        project.environments.push(environment)
+      }
+
+      environment.services.push({ service_id, service_name })
+    }
+  })
+
+  return projects
+}
+
+export function ArgoCdAssociatedServicesListModal({
+  organizationId,
+  clusterId,
+  associatedServicesCount,
+  onClose,
+}: ArgoCdAssociatedServicesListModalProps) {
+  return (
+    <Section className="p-6">
+      <Heading className="mb-6 text-2xl text-neutral">Associated services ({associatedServicesCount})</Heading>
+      <Suspense fallback={<ArgoCdAssociatedServicesListModalSkeleton />}>
+        <ArgoCdAssociatedServicesListModalContent
+          organizationId={organizationId}
+          clusterId={clusterId}
+          onClose={onClose}
+        />
+      </Suspense>
+    </Section>
+  )
+}
+
+function ArgoCdAssociatedServicesListModalSkeleton() {
+  return (
+    <div className="flex h-40 items-start justify-center p-5">
+      <LoaderSpinner className="w-5" />
+    </div>
+  )
+}
+
+function ArgoCdAssociatedServicesListModalContent({
+  organizationId,
+  clusterId,
+  onClose,
+}: Omit<ArgoCdAssociatedServicesListModalProps, 'associatedServicesCount'>) {
+  const { data: argoCdAssociatedServices = [] } = useArgoCdAssociatedServices({
+    clusterId,
+    suspense: true,
+  })
+  const [searchValue, setSearchValue] = useState<string | undefined>()
+
+  const data = argoCdGroupByProjectEnvironmentsServices(argoCdAssociatedServices, searchValue)
+
+  return (
+    <>
+      <InputSearch
+        className="mb-3"
+        placeholder="Search by project, environment, service name"
+        onChange={(value) => setSearchValue(value)}
+      />
+      {data.length > 0 ? (
+        <TreeView.Root
+          type="single"
+          collapsible
+          className="rounded border border-neutral bg-surface-neutral-subtle px-4 py-2"
+        >
+          {data.map((project) => (
+            <TreeView.Item key={project.project_id} value={project.project_name}>
+              <TreeView.Trigger>{project.project_name}</TreeView.Trigger>
+              <TreeView.Content>
+                {project.environments.map((environment) => (
+                  <TreeView.Root key={environment.environment_id} type="single" collapsible>
+                    <TreeView.Item value={environment.environment_name}>
+                      <TreeView.Trigger>
+                        <Link
+                          color="brand"
+                          onClick={() => onClose()}
+                          to="/organization/$organizationId/project/$projectId/environment/$environmentId"
+                          params={{
+                            organizationId,
+                            environmentId: environment.environment_id,
+                            projectId: project.project_id,
+                          }}
+                          className="text-sm"
+                        >
+                          {environment.environment_name}
+                        </Link>
+                      </TreeView.Trigger>
+                      <TreeView.Content>
+                        <ul>
+                          {environment.services.map((service) => (
+                            <li key={service.service_id} className="border-l border-neutral">
+                              <Link
+                                color="brand"
+                                onClick={() => onClose()}
+                                to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId"
+                                params={{
+                                  organizationId,
+                                  environmentId: environment.environment_id,
+                                  serviceId: service.service_id,
+                                  projectId: project.project_id,
+                                }}
+                                className="flex items-center py-1.5 pl-5 text-sm"
+                              >
+                                <Icon name={IconEnum.ARGOCD} width={20} className="mr-2" />
+                                {service.service_name}
+                              </Link>
+                            </li>
+                          ))}
+                        </ul>
+                      </TreeView.Content>
+                    </TreeView.Item>
+                  </TreeView.Root>
+                ))}
+              </TreeView.Content>
+            </TreeView.Item>
+          ))}
+        </TreeView.Root>
+      ) : (
+        <div className="px-5 py-4 text-center">
+          <Icon iconName="wave-pulse" className="text-neutral-subtle" />
+          <p className="mt-1 text-xs font-medium text-neutral-subtle">No value found</p>
+        </div>
+      )}
+    </>
+  )
+}
+
+export default ArgoCdAssociatedServicesListModal
diff --git a/libs/domains/organizations/feature/src/lib/hooks/use-argocd-associated-services/use-argocd-associated-services.ts b/libs/domains/organizations/feature/src/lib/hooks/use-argocd-associated-services/use-argocd-associated-services.ts
@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query'
+import { queries } from '@qovery/state/util-queries'
+
+export interface UseArgoCdAssociatedServicesProps {
+  clusterId: string
+  suspense?: boolean
+}
+
+export function useArgoCdAssociatedServices({ clusterId, suspense = false }: UseArgoCdAssociatedServicesProps) {
+  return useQuery({
+    ...queries.organizations.argoCdAssociatedServices({ clusterId }),
+    suspense,
+  })
+}
+
+export default useArgoCdAssociatedServices
diff --git a/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.spec.tsx b/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.spec.tsx
@@ -107,6 +107,23 @@ describe('SettingsArgoCdIntegration', () => {
     expect(screen.getByText('Unlinked clusters (1)')).toBeInTheDocument()
     expect(screen.getByText('AWS EKS Demo')).toBeInTheDocument()
 
+    await userEvent.click(screen.getByTestId('argocd-associated-services-cluster-1'))
+
+    expect(mockOpenModal).toHaveBeenCalledWith(
+      expect.objectContaining({
+        content: expect.objectContaining({
+          props: expect.objectContaining({
+            organizationId: 'org-1',
+            clusterId: 'cluster-1',
+            associatedServicesCount: 4,
+          }),
+        }),
+        options: {
+          width: 680,
+        },
+      })
+    )
+
     await userEvent.click(screen.getByText('Unlinked clusters (1)'))
 
     expect(
diff --git a/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx b/libs/domains/organizations/feature/src/lib/settings-argocd-integration/settings-argocd-integration.tsx
diff --git a/package.json b/package.json
diff --git a/yarn.lock b/yarn.lock
