feat(argocd): add manifest view (#2684)

* feat(argocd): add manifest view

* refactor(argocd): streamline ArgoCD manifest handling and improve test coverage

* feat(argocd): implement target state switching in ArgoCD manifest view

* fix: update input class to use rounded-md for consistency across modal snapshots

* feat(argocd): add loading state to ArgoCD manifest view with spinner

* refactor(argocd): enhance resource selection logic and improve segmented control styling

* Potential fix for pull request finding

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

* feat(argocd): implement diff view for ArgoCD manifest comparison

* refactor(argocd): update ArgoCD manifest toggle button for improved accessibility and interaction

* refactor(argocd): integrate ErrorBoundary and remove serviceId prop from ArgoCdManifest for improved error handling and cleaner API

* fix(argocd): ensure serviceId is safely destructured from useParams to prevent potential runtime errors

* refactor(argocd): simplify isArgoCd function and enhance service tab logic for better readability

---------

Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>

Author: RemiBonnet

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

@@ -17,7 +17,7 @@ import {
   useDeploymentStatus,
   useEnvironment,
 } from '@qovery/domains/environments/feature'
-import { isEditableService } from '@qovery/domains/services/data-access'
+import { isArgoCd, isEditableService } from '@qovery/domains/services/data-access'
 import { ArgoCdServiceList, useServices } from '@qovery/domains/services/feature'
 import { Heading, Icon, Link, Navbar, Section, Tooltip } from '@qovery/shared/ui'
 
@@ -58,10 +58,7 @@ function RouteComponent() {
   const activeTabId = tabs.find((tab) => matchRoute({ to: tab.routeId }))?.id
   const isServicesListTab = activeTabId === 'services'
   const qoveryServicesCount = useMemo(() => services.filter(isEditableService).length, [services])
-  const argoCdServicesCount = useMemo(
-    () => services.filter((service) => !isEditableService(service)).length,
-    [services]
-  )
+  const argoCdServicesCount = useMemo(() => services.filter(isArgoCd).length, [services])
   const hasQoveryServices = qoveryServicesCount > 0
   const hasArgoCdServices = argoCdServicesCount > 0
   const shouldDisplayQoveryServicesSubtitle = isServicesListTab && hasArgoCdServices
@@ -129,7 +126,7 @@ function RouteComponent() {
               <div className="flex flex-col gap-3">
                 {shouldDisplayQoveryServicesSubtitle && (
                   <Heading level={3} className="font-medium text-neutral-subtle">
-                    Qovery native services
+                    Qovery services
                   </Heading>
                 )}
                 {shouldDisplayArgoCdServicesAboveQovery ? (

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

@@ -1,4 +1,8 @@
-import { createFileRoute } from '@tanstack/react-router'
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { isArgoCd } from '@qovery/domains/services/data-access'
+import { ArgoCdManifest, useServiceSummary } from '@qovery/domains/services/feature'
+import { ErrorBoundary, LoaderSpinner } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
 export const Route = createFileRoute(
@@ -7,8 +11,44 @@ export const Route = createFileRoute(
   component: RouteComponent,
 })
 
-function RouteComponent() {
+function ManifestLoader() {
+  return (
+    <div className="flex min-h-page-container flex-1 items-center justify-center bg-background">
+      <LoaderSpinner />
+    </div>
+  )
+}
+
+function ManifestRouteContent() {
+  const { organizationId = '', projectId = '', environmentId = '', serviceId = '' } = useParams({ strict: false })
+  const { data: service } = useServiceSummary({
+    environmentId,
+    serviceId,
+    enabled: Boolean(environmentId) && Boolean(serviceId),
+    suspense: true,
+  })
+
   useDocumentTitle('Service - Manifest')
 
-  return <div className="flex min-h-page-container flex-1 bg-background" />
+  if (!service || !isArgoCd(service)) {
+    return (
+      <Navigate
+        to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/overview"
+        params={{ organizationId, projectId, environmentId, serviceId }}
+        replace
+      />
+    )
+  }
+
+  return <ArgoCdManifest />
+}
+
+function RouteComponent() {
+  return (
+    <ErrorBoundary>
+      <Suspense fallback={<ManifestLoader />}>
+        <ManifestRouteContent />
+      </Suspense>
+    </ErrorBoundary>
+  )
 }

apps/console/src/routes/_authenticated/organization/route.tsx

@@ -6,7 +6,7 @@ import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react'
 import { useClusters } from '@qovery/domains/clusters/feature'
 import { useEnvironment } from '@qovery/domains/environments/feature'
 import { useProject } from '@qovery/domains/projects/feature'
-import { type AnyService, isEditableService, isManagedDatabase } from '@qovery/domains/services/data-access'
+import { type AnyService, isArgoCd, isEditableService, isManagedDatabase } from '@qovery/domains/services/data-access'
 import { useRecentServices, useServiceSummary } from '@qovery/domains/services/feature'
 import { AssistantPanelOutlet, AssistantProvider } from '@qovery/shared/assistant/feature'
 import { DevopsCopilotContext } from '@qovery/shared/devops-copilot/context'
@@ -252,9 +252,7 @@ function createRoutePatternRegex(routeIdPattern: string): RegExp {
 }
 
 function getServiceTabs(service?: AnyService, cluster?: Cluster) {
-  const isArgoCdService = service ? !isEditableService(service) : false
-
-  if (isArgoCdService) {
+  if (isArgoCd(service)) {
     return SERVICE_TABS.filter((tab) => ARGOCD_SERVICE_TAB_IDS.includes(tab.id))
   }
 

libs/domains/organizations/feature/src/lib/container-registry-services-list-modal/__snapshots__/container-registry-services-list-modal.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`ContainerRegistryServicesListModal should match snapshots 1`] = `
           class="fa-regular fa-magnifying-glass absolute left-3 top-1/2 block -translate-y-1/2 text-base leading-none text-neutral-subtle"
         />
         <input
-          class="w-full rounded border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
+          class="w-full rounded-md border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
           data-testid="input-search"
           name="search"
           placeholder="Search by project, environment, service name"

libs/domains/organizations/feature/src/lib/git-token-services-list-modal/__snapshots__/git-token-services-list-modal.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`GitTokenServicesListModal should match snapshots 1`] = `
           class="fa-regular fa-magnifying-glass absolute left-3 top-1/2 block -translate-y-1/2 text-base leading-none text-neutral-subtle"
         />
         <input
-          class="w-full rounded border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
+          class="w-full rounded-md border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
           data-testid="input-search"
           name="search"
           placeholder="Search by project, environment, service name"

libs/domains/organizations/feature/src/lib/helm-repository-services-list-modal/__snapshots__/helm-repository-services-list-modal.spec.tsx.snap

@@ -21,7 +21,7 @@ exports[`HelmRepositoryServicesListModal should match snapshots 1`] = `
           class="fa-regular fa-magnifying-glass absolute left-3 top-1/2 block -translate-y-1/2 text-base leading-none text-neutral-subtle"
         />
         <input
-          class="w-full rounded border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
+          class="w-full rounded-md border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
           data-testid="input-search"
           name="search"
           placeholder="Search by project, environment, service name"

libs/domains/organizations/feature/src/lib/label-annotation-items-list-modal/__snapshots__/label-annotation-items-list-modal.spec.tsx.snap

@@ -23,7 +23,7 @@ exports[`LabelAnnotationItemsListModal should match snapshots with annotation 1`
           class="fa-regular fa-magnifying-glass absolute left-3 top-1/2 block -translate-y-1/2 text-base leading-none text-neutral-subtle"
         />
         <input
-          class="w-full rounded border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
+          class="w-full rounded-md border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
           data-testid="input-search"
           name="search"
           placeholder="Search by project, environment, service, or cluster name"
@@ -192,7 +192,7 @@ exports[`LabelAnnotationItemsListModal should match snapshots with label 1`] = `
           class="fa-regular fa-magnifying-glass absolute left-3 top-1/2 block -translate-y-1/2 text-base leading-none text-neutral-subtle"
         />
         <input
-          class="w-full rounded border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
+          class="w-full rounded-md border border-neutral bg-surface-neutral pl-10 pr-6 text-neutral placeholder:text-neutral-subtle focus:border-brand-strong focus:outline-none focus:transition-[border-color] h-9 text-sm"
           data-testid="input-search"
           name="search"
           placeholder="Search by project, environment, service, or cluster name"

libs/domains/service-terraform/feature/src/index.ts

@@ -2,7 +2,6 @@ export * from './source-setting/source-setting'
 export * from './lib/hooks/use-terraform-resources/use-terraform-resources'
 export * from './lib/terraform-resources-section/terraform-resources-section'
 export * from './lib/resource-details/resource-details'
-export * from './lib/resource-tree-list/resource-tree-list'
 export * from './lib/hooks/use-terraform-available-versions/use-terraform-available-versions'
 export * from './lib/terraform-configuration-settings/terraform-configuration-settings'
 export * from './lib/terraform-general-data/terraform-general-data'

libs/domains/service-terraform/feature/src/lib/terraform-resources-section/terraform-resources-section.tsx

@@ -1,8 +1,8 @@
 import { type ReactElement, useEffect, useMemo, useState } from 'react'
+import { ResourceTreeList } from '@qovery/shared/console-shared'
 import { EmptyState, InputSearch, LoaderSpinner } from '@qovery/shared/ui'
 import { useTerraformResources } from '../hooks/use-terraform-resources/use-terraform-resources'
 import { ResourceDetails } from '../resource-details/resource-details'
-import { ResourceTreeList } from '../resource-tree-list/resource-tree-list'
 import { matchesSearch } from '../utils/matches-search'
 
 export interface TerraformResourcesSectionProps {
@@ -73,17 +73,11 @@ export function TerraformResourcesSection({ terraformId }: TerraformResourcesSec
 
   return (
     <div className="flex h-page-container flex-col gap-4">
-      {/* Split panel: Tree list (with search) and Details */}
       <div className="flex h-full">
-        {/* Left panel: Search + Resource tree list */}
-        <div className="flex w-1/4 flex-shrink-0 flex-col overflow-y-scroll border-r border-neutral">
-          {/* Search bar */}
-          <div className="flex-shrink-0 p-4 pb-0">
-            <InputSearch placeholder="Search resources…" className="w-full" onChange={setSearchQuery} />
-          </div>
+        <div className="flex w-[266px] flex-shrink-0 flex-col gap-4 overflow-x-hidden overflow-y-scroll rounded-r-md border-r border-neutral bg-surface-neutral-subtle p-3">
+          <InputSearch placeholder="Search resources…" className="w-full" onChange={setSearchQuery} />
 
-          {/* Tree list */}
-          <div className="flex-1 p-4">
+          <div className="min-h-0 flex-1">
             <ResourceTreeList
               resources={data}
               selectedResourceId={selectedResourceId}
@@ -93,8 +87,7 @@ export function TerraformResourcesSection({ terraformId }: TerraformResourcesSec
           </div>
         </div>
 
-        {/* Right panel: Resource details */}
-        <div className="w-3/4 flex-1 overflow-y-scroll">
+        <div className="min-w-0 flex-1 overflow-y-scroll bg-surface-neutral">
           <ResourceDetails resource={selectedResource} />
         </div>
       </div>

libs/domains/services/data-access/src/lib/domains-services-data-access.ts

@@ -218,8 +218,12 @@ export function isHelm(service: AnyService): service is Helm {
   return service.service_type === 'HELM'
 }
 
+export function isArgoCd(service?: AnyService): service is ArgoCd {
+  return service?.service_type === 'ARGOCD_APP'
+}
+
 export function isEditableService(service: AnyService): service is EditableService {
-  return service.service_type !== 'ARGOCD_APP'
+  return !isArgoCd(service)
 }
 
 export function isEditableServiceType(serviceType?: ServiceType): serviceType is EditableServiceType {
@@ -270,6 +274,13 @@ export const services = createQueryKeys('services', {
       return (response.data.results ?? []).filter((service) => service.service_type === 'ARGOCD_APP')
     },
   }),
+  argocdManifest: (serviceId: string) => ({
+    queryKey: [serviceId],
+    async queryFn() {
+      const response = await argoCdApi.getArgoCdAppManifest(serviceId)
+      return response.data
+    },
+  }),
   list: (environmentId: string) => ({
     queryKey: [environmentId],
     async queryFn() {