From 1da98ecb114a9ca9387fbbd41320babaec56d75f Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:09:58 +0200
Subject: [PATCH 01/19] fix(clusters): keep profile edits made while saving

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../cluster-profile-context.tsx               | 17 +++++++++++++---
 .../cluster-profile/cluster-profile.spec.tsx  | 20 +++++++++++++++++++
 2 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
index 58038318120..0826c5c5353 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-context.tsx
@@ -62,6 +62,17 @@ function countProfileChanges(
   return profileChanges.length + clusterInputChanges.length
 }
 
+function omitSubmittedValues<T extends Record<string, Record<string, unknown>>>(currentValues: T, submittedValues: T) {
+  return Object.fromEntries(
+    Object.entries(currentValues).flatMap(([componentKey, values]) => {
+      const remainingValues = Object.fromEntries(
+        Object.entries(values).filter(([key, value]) => !equal(value, submittedValues[componentKey]?.[key]))
+      )
+      return Object.keys(remainingValues).length ? [[componentKey, remainingValues]] : []
+    })
+  ) as T
+}
+
 // PUT replaces the whole configuration: unedited components and inputs are sent back as saved.
 function getConfigurationRequest(
   template: PlatformTemplateSummaryResponse,
@@ -148,9 +159,9 @@ export function ClusterProfileProvider({ children }: PropsWithChildren) {
       clusterId,
       configurationRequest: getConfigurationRequest(selectedTemplate, configuration, profileValues, clusterInputs),
     })
-    // The saved configuration now carries the edits, so the local copies can go.
-    setProfileValues({})
-    setClusterInputs({})
+    // The saved configuration now carries the submitted edits, so their local copies can go.
+    setProfileValues((currentValues) => omitSubmittedValues(currentValues, profileValues))
+    setClusterInputs((currentValues) => omitSubmittedValues(currentValues, clusterInputs))
   }
 
   const saveChanges = async () => {
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index 6b06985bb46..76594f890fc 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -767,6 +767,26 @@ describe('ClusterProfileFeature', () => {
       expect(mockDeployCluster).not.toHaveBeenCalled()
     })
 
+    it('keeps the edits made while saving', async () => {
+      let resolveSave = () => undefined as unknown
+      mockUpdatePlatformConfiguration.mockReturnValue(new Promise((resolve) => (resolveSave = resolve)))
+      const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Save' }))
+      await userEvent.clear(screen.getByRole('spinbutton', { name: 'Retention period' }))
+      await userEvent.type(screen.getByRole('spinbutton', { name: 'Retention period' }), '24')
+      await act(async () => {
+        resolveSave()
+      })
+
+      expect(screen.getByRole('spinbutton', { name: 'Retention period' })).toHaveValue(24)
+      expect(screen.getByRole('switch', { name: 'High availability' })).not.toBeChecked()
+      expect(
+        within(screen.getByRole('region', { name: 'Unsaved profile changes' })).getByText(/1 change/)
+      ).toBeInTheDocument()
+    })
+
     it('deploys the cluster once the changes are saved', async () => {
       const { userEvent } = renderWithProviders(<ClusterProfileFeature />)
 

From 79eccbca1abb7cc31f618762cdc6080dc886091a Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:10:55 +0200
Subject: [PATCH 02/19] fix(clusters): redirect only once when the Operator
 connects

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 ...elf-managed-cluster-creation-flow.spec.tsx | 25 +++++++++++++++++++
 .../self-managed-cluster-creation-flow.tsx    |  8 ++++--
 2 files changed, 31 insertions(+), 2 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
index e61cefba221..035d0616ce5 100644
--- a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
@@ -1,5 +1,6 @@
 import download from 'downloadjs'
 import { CloudProviderEnum } from 'qovery-typescript-axios'
+import { useState } from 'react'
 import selectEvent from 'react-select-event'
 import * as cloudProvidersDomain from '@qovery/domains/cloud-providers/feature'
 import { renderWithProviders, screen, waitFor, within } from '@qovery/shared/util-tests'
@@ -437,6 +438,30 @@ describe('SelfManagedClusterCreationFlow', () => {
     expect(refetch).toHaveBeenCalled()
   })
 
+  it('redirects only once while the parent keeps re-rendering', async () => {
+    function ClusterCreationWithParentState() {
+      const [, setCloseCount] = useState(0)
+      return (
+        <SelfManagedClusterCreationFlow
+          organizationId="org-123"
+          onClose={() => {
+            mockOnClose()
+            setCloseCount((count) => count + 1)
+          }}
+        />
+      )
+    }
+    const { userEvent } = renderWithProviders(<ClusterCreationWithParentState />)
+
+    await goToOperatorStep(userEvent)
+    mockUseClusterOperatorStatus.mockReturnValue({ data: { operator_connected: true } })
+    await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
+
+    await waitFor(() => expect(mockNavigate).toHaveBeenCalled())
+    expect(mockOnClose).toHaveBeenCalledTimes(1)
+    expect(mockNavigate).toHaveBeenCalledTimes(1)
+  })
+
   it('redirects to the cluster profile once the Operator is connected', async () => {
     const { userEvent } = renderWithProviders(
       <SelfManagedClusterCreationFlow organizationId="org-123" onClose={mockOnClose} />
diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
index 3388e12d8f9..935aa57e30c 100644
--- a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
@@ -7,7 +7,7 @@ import {
   type PlatformTemplateComponentResponse,
   type SelfManagedClusterPlatformSelection,
 } from 'qovery-typescript-axios'
-import { type ReactNode, useEffect, useMemo, useState } from 'react'
+import { type ReactNode, useEffect, useMemo, useRef, useState } from 'react'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
 import { useCloudProviders } from '@qovery/domains/cloud-providers/feature'
 import {
@@ -357,8 +357,12 @@ function InstallStep({
     refetchInterval: OPERATOR_STATUS_POLL_INTERVAL,
   })
 
+  const hasNotifiedInstallRef = useRef(false)
+
   useEffect(() => {
-    if (operatorStatus?.operator_connected) onInstalled()
+    if (!operatorStatus?.operator_connected || hasNotifiedInstallRef.current) return
+    hasNotifiedInstallRef.current = true
+    onInstalled()
   }, [onInstalled, operatorStatus?.operator_connected])
 
   return (

From 3cca8df545041a33883207a66cfff66c9322079b Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:11:54 +0200
Subject: [PATCH 03/19] fix(clusters): track the item modal however it is
 dismissed

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../cluster-profile/cluster-profile.spec.tsx  | 30 +++++++++++++++++++
 .../profile-array-item-modal.tsx              |  5 ++++
 .../profile-configuration-field.tsx           | 10 +++----
 3 files changed, 39 insertions(+), 6 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index 76594f890fc..c1e02f5f0e4 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -5,6 +5,7 @@ import {
   type PlatformTemplateSummaryResponse,
 } from 'qovery-typescript-axios'
 import { useState } from 'react'
+import { useModal } from '@qovery/shared/ui'
 import { act, renderWithProviders, screen, waitFor, within } from '@qovery/shared/util-tests'
 import { useCluster } from '../hooks/use-cluster/use-cluster'
 import { useDeployCluster } from '../hooks/use-deploy-cluster/use-deploy-cluster'
@@ -476,6 +477,35 @@ describe('ClusterProfileFeature', () => {
       await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
     })
 
+    it('does not close another modal after the item modal was dismissed', async () => {
+      let hideProfile: () => void = () => undefined
+      function ClusterProfileWithOtherModal() {
+        const [isShown, setIsShown] = useState(true)
+        const { openModal } = useModal()
+        hideProfile = () => setIsShown(false)
+        return (
+          <>
+            <button type="button" onClick={() => openModal({ content: <p>Other modal</p> })}>
+              Open other modal
+            </button>
+            {isShown ? <ClusterProfileFeature activeComponentKey="envoy" /> : null}
+          </>
+        )
+      }
+      const { userEvent } = renderWithProviders(<ClusterProfileWithOtherModal />)
+
+      await userEvent.click(screen.getByRole('button', { name: 'Add item to Client-validation CA certificates' }))
+      expect(await screen.findByRole('dialog')).toBeInTheDocument()
+      await userEvent.keyboard('{Escape}')
+      await waitFor(() => expect(screen.queryByRole('dialog')).not.toBeInTheDocument())
+
+      await userEvent.click(screen.getByRole('button', { name: 'Open other modal' }))
+      expect(await screen.findByText('Other modal')).toBeInTheDocument()
+      act(() => hideProfile())
+
+      expect(screen.getByText('Other modal')).toBeInTheDocument()
+    })
+
     it('disables the add button once the item limit is reached', () => {
       mockUsePlatformConfiguration.mockReturnValue({
         data: {
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
index 0d64fdd3fab..c202e44e05e 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
@@ -1,3 +1,4 @@
+import { useEffect } from 'react'
 import { Controller, FormProvider, useForm } from 'react-hook-form'
 import { CatalogVariableInput } from '@qovery/shared/console-shared'
 import { ModalCrud } from '@qovery/shared/ui'
@@ -20,6 +21,7 @@ export interface ProfileArrayItemModalProps {
   values: Record<string, unknown>
   isEdit: boolean
   onClose: () => void
+  onUnmount?: () => void
   onSubmit: (values: Record<string, unknown>) => void
 }
 
@@ -33,8 +35,11 @@ export function ProfileArrayItemModal({
   values,
   isEdit,
   onClose,
+  onUnmount,
   onSubmit,
 }: ProfileArrayItemModalProps) {
+  useEffect(() => onUnmount, [onUnmount])
+
   const methods = useForm<Record<string, CatalogVariableValue | undefined>>({
     mode: 'onChange',
     defaultValues: Object.fromEntries(
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
index 14eaae7358d..b0d3bbc9399 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
@@ -165,11 +165,6 @@ function ProfileArrayField({
   const canRemove = typeof minItems !== 'number' || items.length > minItems
   const error = getFieldViolation(violations, path)
 
-  const closeItemModal = () => {
-    isItemModalOpenRef.current = false
-    closeModal()
-  }
-
   useEffect(
     () => () => {
       if (isItemModalOpenRef.current) closeModal()
@@ -195,7 +190,10 @@ function ProfileArrayField({
           fields={itemFields}
           values={itemValues}
           isEdit={isEdit}
-          onClose={closeItemModal}
+          onClose={closeModal}
+          onUnmount={() => {
+            isItemModalOpenRef.current = false
+          }}
           onSubmit={(submittedValues) => {
             // Keep keys the modal does not edit (non-scalar or unevaluated fields) on existing object items.
             const nextItem = isObjectItem

From 0f8101bc9589c12dd91f88ef4b44e1d899deab43 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:12:50 +0200
Subject: [PATCH 04/19] perf(clusters): only debounce profile edits, not
 component switches

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../cluster-profile/cluster-profile.spec.tsx  | 24 ++++++++++++++++++-
 .../lib/cluster-profile/cluster-profile.tsx   |  9 ++++---
 2 files changed, 29 insertions(+), 4 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index c1e02f5f0e4..a4a128d9cc7 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -16,9 +16,10 @@ import { useUpdatePlatformConfiguration } from '../platform-configuration/hooks/
 import { ClusterProfileFeature } from './cluster-profile'
 
 jest.mock('@tanstack/react-router', () => ({ useParams: jest.fn() }))
+const mockUseDebounce = jest.fn(<T,>(value: T) => value)
 jest.mock('@qovery/shared/util-hooks', () => ({
   ...jest.requireActual('@qovery/shared/util-hooks'),
-  useDebounce: <T,>(value: T) => value,
+  useDebounce: <T,>(value: T) => mockUseDebounce(value),
 }))
 jest.mock('@qovery/shared/ui', () => {
   const React = jest.requireActual('react')
@@ -242,6 +243,7 @@ function createComponentQueries(componentKeys: string[], isFetching = false, isE
 describe('ClusterProfileFeature', () => {
   beforeEach(() => {
     jest.clearAllMocks()
+    mockUseDebounce.mockImplementation(<T,>(value: T) => value)
     mockUseParams.mockReturnValue({ organizationId: 'organization-id', clusterId: 'cluster-id' })
     mockUseCluster.mockReturnValue({
       data: { cloud_provider: 'AWS', kubernetes: 'SELF_MANAGED' },
@@ -408,6 +410,26 @@ describe('ClusterProfileFeature', () => {
     expect(onActiveComponentChange).toHaveBeenCalledWith('loki')
   })
 
+  it('resolves another component without waiting for the edit debounce', async () => {
+    // A debounce that never settles: only edits may wait for it.
+    mockUseDebounce.mockImplementation(<T,>(value: T) => jest.requireActual('react').useRef(value).current)
+    mockUsePlatformComponentConfigurations.mockImplementation(({ requests }) =>
+      createComponentQueries(Object.keys(requests))
+    )
+    function ClusterProfileWithNavigation() {
+      const [componentKey, setComponentKey] = useState<string>()
+      return <ClusterProfileFeature activeComponentKey={componentKey} onActiveComponentChange={setComponentKey} />
+    }
+    const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+    await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+
+    expect(mockUsePlatformComponentConfigurations).toHaveBeenLastCalledWith(
+      expect.objectContaining({ requests: { envoy: expect.anything() } })
+    )
+    expect(screen.queryByRole('status', { name: 'Loading configuration' })).not.toBeInTheDocument()
+  })
+
   it('moves between the component tabs with the arrow keys', async () => {
     const onActiveComponentChange = jest.fn()
     const { userEvent } = renderWithProviders(
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
index 5c9284cd80d..ed163928539 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -351,12 +351,15 @@ function ClusterProfileView({
     [profileConfigs, resolvedClusterInputs, resolvedComponents]
   )
   const debouncedPreviewRequests = useDebounce(previewRequests, 300)
+  const settledPreviewRequests = equal(Object.keys(debouncedPreviewRequests), Object.keys(previewRequests))
+    ? debouncedPreviewRequests
+    : previewRequests
   const componentQueries = usePlatformComponentConfigurations({
     clusterId,
-    requests: debouncedPreviewRequests,
+    requests: settledPreviewRequests,
     enabled: Boolean(resolvedComponents.length),
   })
-  const requestedComponentKeys = Object.keys(debouncedPreviewRequests)
+  const requestedComponentKeys = Object.keys(settledPreviewRequests)
   const componentQueriesByKey = Object.fromEntries(
     requestedComponentKeys.flatMap((componentKey, index) => {
       const query = componentQueries[index]
@@ -417,7 +420,7 @@ function ClusterProfileView({
   const isBackgroundResolverError = hasResolverError && hasResolvedConfiguration
   // Saving needs every displayed or edited component resolved for the latest edits, with no violation or missing input.
   const isConfigurationReady =
-    equal(debouncedPreviewRequests, previewRequests) &&
+    equal(settledPreviewRequests, previewRequests) &&
     Object.keys(previewRequests).every((componentKey) => {
       const query = componentQueriesByKey[componentKey]
       const preview = query?.data

From f9a3eed571496f2dbe8056dc7240bc7251741e17 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:13:28 +0200
Subject: [PATCH 05/19] fix(clusters): use the brand focus outline on profile
 sidebar buttons

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../src/lib/cluster-profile/cluster-profile-sidebar.tsx       | 4 ++--
 .../src/lib/cluster-profile/profile-operator-footer.tsx       | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
index 72f10878696..51005b7ef60 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
@@ -62,7 +62,7 @@ function LayerSectionRow({
           type="button"
           disabled={isDisabled}
           aria-current={isSelected && !selectedItemId ? 'page' : undefined}
-          className={`focus-visible:ring-brand flex h-8 w-full items-center gap-1.5 rounded px-3 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:text-neutral-disabled ${
+          className={`flex h-8 w-full items-center gap-1.5 rounded px-3 text-left text-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong disabled:cursor-not-allowed disabled:text-neutral-disabled ${
             isDisabled
               ? ''
               : `${isSelected ? 'text-neutral' : 'text-neutral-subtle'} hover:bg-surface-neutral-component hover:text-neutral`
@@ -93,7 +93,7 @@ function LayerSectionRow({
               type="button"
               disabled={isItemDisabled}
               aria-current={isItemSelected ? 'page' : undefined}
-              className={`focus-visible:ring-brand group flex h-7 w-full items-center gap-1.5 px-3 text-left text-sm outline-none focus-visible:ring-2 focus-visible:ring-inset disabled:cursor-not-allowed disabled:text-neutral-disabled ${
+              className={`group flex h-7 w-full items-center gap-1.5 px-3 text-left text-sm outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong disabled:cursor-not-allowed disabled:text-neutral-disabled ${
                 isItemDisabled
                   ? ''
                   : isItemSelected
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
index 162176c8cc8..89d05472308 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
@@ -27,7 +27,7 @@ export function ProfileOperatorFooter({ organizationId, clusterId }: { organizat
     <button
       type="button"
       aria-label={`Qovery operator: ${display?.label ?? (isError ? 'status unavailable' : 'loading')}`}
-      className="focus-visible:ring-brand flex w-full shrink-0 items-center gap-2 bg-background-secondary p-3 text-left text-sm font-medium text-neutral outline-none focus-visible:ring-2 focus-visible:ring-inset"
+      className="flex w-full shrink-0 items-center gap-2 bg-background-secondary p-3 text-left text-sm font-medium text-neutral outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong"
     >
       Qovery operator
       {display ? (

From 774eb98fb980b282d6e93955b53efcbf91b596fe Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:14:21 +0200
Subject: [PATCH 06/19] fix(clusters): show OVH, Oracle and IBM icons in
 cluster avatars

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../cluster-avatar/cluster-avatar.spec.tsx    | 35 +++++++++++++++++++
 .../src/lib/cluster-avatar/cluster-avatar.tsx |  8 +++--
 2 files changed, 41 insertions(+), 2 deletions(-)
 create mode 100644 libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx

diff --git a/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx
new file mode 100644
index 00000000000..a99d790af0d
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.spec.tsx
@@ -0,0 +1,35 @@
+import { renderWithProviders } from '@qovery/shared/util-tests'
+import { ClusterAvatar } from './cluster-avatar'
+
+jest.mock('@qovery/shared/ui', () => {
+  const React = jest.requireActual('react')
+  const ui = jest.requireActual('@qovery/shared/ui')
+  return {
+    ...ui,
+    Icon: (props: { name?: string; iconName?: string }) =>
+      React.createElement('span', { 'data-icon-name': props.name ?? props.iconName }),
+  }
+})
+
+describe('ClusterAvatar', () => {
+  it.each([
+    ['AWS', 'AWS'],
+    ['GCP', 'GCP'],
+    ['ON_PREMISE', 'KUBERNETES'],
+    ['OVH', 'OVH_CLOUD'],
+    ['ORACLE', 'ORACLE_CLOUD'],
+    ['IBM', 'IBM_CLOUD'],
+  ] as const)('shows the %s provider icon', (cloudProvider, iconName) => {
+    const { container } = renderWithProviders(<ClusterAvatar cloudProvider={cloudProvider} />)
+
+    expect(container.querySelector(`[data-icon-name="${iconName}"]`)).toBeInTheDocument()
+  })
+
+  it('shows a demo icon for demo clusters', () => {
+    const { container } = renderWithProviders(
+      <ClusterAvatar cluster={{ id: 'cluster-id', is_demo: true, cloud_provider: 'ON_PREMISE' } as never} />
+    )
+
+    expect(container.querySelector('[data-icon-name="laptop-code"]')).toBeInTheDocument()
+  })
+})
diff --git a/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx
index 10ed95a8863..045ae72bd7c 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx
@@ -1,10 +1,11 @@
-import { type CloudProviderEnum, type Cluster, type ClusterOverviewResponse } from 'qovery-typescript-axios'
+import { type CloudVendorEnum, type Cluster, type ClusterOverviewResponse } from 'qovery-typescript-axios'
 import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react'
 import { match } from 'ts-pattern'
+import { IconEnum } from '@qovery/shared/enums'
 import { Avatar, Icon } from '@qovery/shared/ui'
 
 export interface ClusterAvatarProps extends Omit<ComponentPropsWithoutRef<typeof Avatar>, 'fallback'> {
-  cloudProvider?: CloudProviderEnum
+  cloudProvider?: CloudVendorEnum
   cluster?: Cluster | ClusterOverviewResponse
 }
 
@@ -18,6 +19,9 @@ export const ClusterAvatar = forwardRef<ElementRef<typeof Avatar>, ClusterAvatar
       <Icon iconName="laptop-code" className="text-base text-neutral-subtle" />
     ))
     .with({ localCloudProvider: 'ON_PREMISE' }, () => <Icon name="KUBERNETES" height="65%" width="65%" />)
+    .with({ localCloudProvider: 'OVH' }, () => <Icon name={IconEnum.OVH_CLOUD} height="65%" width="65%" />)
+    .with({ localCloudProvider: 'ORACLE' }, () => <Icon name={IconEnum.ORACLE_CLOUD} height="65%" width="65%" />)
+    .with({ localCloudProvider: 'IBM' }, () => <Icon name={IconEnum.IBM_CLOUD} height="65%" width="65%" />)
     .otherwise(() => <Icon name={localCloudProvider} height="65%" width="65%" />)
 
   return <Avatar ref={ref} fallback={fallback} {...props} />

From 2c80cc3e9cc3a81fd6a0d4eee1037b1370440901 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:14:59 +0200
Subject: [PATCH 07/19] refactor(clusters): use ClusterAvatar in the profile
 header

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../lib/cluster-profile/cluster-profile.tsx   | 19 ++++---------------
 1 file changed, 4 insertions(+), 15 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
index ed163928539..365c950ef0e 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -1,13 +1,12 @@
 import equal from 'fast-deep-equal'
-import { type CloudVendorEnum, type PlatformComponentConfigurationResolutionResponse } from 'qovery-typescript-axios'
+import { type PlatformComponentConfigurationResolutionResponse } from 'qovery-typescript-axios'
 import { useEffect, useMemo, useRef } from 'react'
-import { match } from 'ts-pattern'
 import { CatalogVariableInput } from '@qovery/shared/console-shared'
-import { IconEnum } from '@qovery/shared/enums'
-import { EmptyState, Heading, Icon, Navbar, Skeleton } from '@qovery/shared/ui'
+import { EmptyState, Heading, Navbar, Skeleton } from '@qovery/shared/ui'
 import { useDebounce } from '@qovery/shared/util-hooks'
 import { type CatalogVariableValue, getCatalogVariableValue } from '@qovery/shared/util-js'
 import { NODE_ENV } from '@qovery/shared/util-node-env'
+import { ClusterAvatar } from '../cluster-avatar/cluster-avatar'
 import { usePlatformComponentConfigurations } from '../platform-configuration/hooks/use-platform-component-configurations'
 import {
   type PlatformFieldDescriptor,
@@ -74,14 +73,6 @@ function filterProfileTree(profileTree: ProfileTreeItem[], query: string): Profi
   })
 }
 
-function getCloudProviderIconName(cloudProvider: CloudVendorEnum) {
-  return match(cloudProvider)
-    .with('OVH', () => IconEnum.OVH_CLOUD)
-    .with('ORACLE', () => IconEnum.ORACLE_CLOUD)
-    .with('IBM', () => IconEnum.IBM_CLOUD)
-    .otherwise((provider) => provider)
-}
-
 function getProfileSections(
   component: ProfileComponent | undefined,
   layer: ProfileTreeItem | undefined,
@@ -446,9 +437,7 @@ function ClusterProfileView({
     <div className="flex h-page-container min-h-0 flex-col overflow-hidden bg-background-secondary text-sm">
       <header className="flex min-h-11 items-center justify-between gap-4 px-4 py-2">
         <div className="flex min-w-0 items-center gap-2">
-          {cluster?.cloud_provider ? (
-            <Icon name={getCloudProviderIconName(cluster.cloud_provider)} width={20} height={20} />
-          ) : null}
+          {cluster ? <ClusterAvatar cluster={cluster} size="sm" /> : null}
           <p className="truncate font-medium text-neutral">{cluster?.name ?? 'Cluster'}</p>
         </div>
       </header>

From 7c98a9643df7552b891e46c9820764eb820aa8d1 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:15:41 +0200
Subject: [PATCH 08/19] fix(clusters): align Operator and profile search copy

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../feature/src/lib/cluster-add/cluster-add.tsx    |  2 +-
 .../cluster-profile/cluster-profile-sidebar.tsx    | 12 +++++++-----
 .../lib/cluster-profile/cluster-profile.spec.tsx   |  4 ++--
 .../src/lib/cluster-profile/cluster-profile.tsx    |  4 +---
 .../profile-operator-footer.spec.tsx               | 14 +++++++-------
 .../cluster-profile/profile-operator-footer.tsx    |  6 +++---
 .../self-managed-cluster-creation-flow.spec.tsx    |  4 ++--
 .../self-managed-cluster-creation-flow.tsx         |  4 ++--
 8 files changed, 25 insertions(+), 25 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
index d043f577350..8c7ab62ae48 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-add/cluster-add.tsx
@@ -200,7 +200,7 @@ export function ClusterAdd() {
 
       <ProviderSection
         title="Connect existing cluster (BYOK)"
-        description="Install the Qovery operator on a cluster you already run"
+        description="Install the Qovery Operator on a cluster you already run"
       >
         <ProviderCard
           title="Local machine (Demo)"
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
index 51005b7ef60..c7b02971acf 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
@@ -179,13 +179,15 @@ export function ClusterProfileSidebar({
         <h2 className="flex h-8 shrink-0 items-center px-3 text-sm font-medium">Layers</h2>
         <nav aria-label="Layers" className="min-h-0 flex-1 overflow-y-auto">
           <ul>
-            {isLoading ? <li className="px-3 py-1 text-xs text-neutral-subtle">Loading layers...</li> : null}
-            {isError ? <li className="px-3 py-1 text-xs text-negative">Unable to load layers.</li> : null}
-            {showEmptyState ? (
-              <li className="px-3 py-1 text-ssm text-neutral-subtle">
-                No results found. Review your search or applied filters.
+            {isLoading ? <li className="px-3 py-1 text-xs text-neutral-subtle">Loading layers…</li> : null}
+            {isError ? (
+              <li className="px-3 py-1 text-xs text-negative">
+                Layers could not be loaded. Refresh the page to try again.
               </li>
             ) : null}
+            {showEmptyState ? (
+              <li className="px-3 py-1 text-ssm text-neutral-subtle">No layers match your search</li>
+            ) : null}
             {!isLoading && !isError
               ? layers.map((section) => (
                   <LayerSectionRow
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index a4a128d9cc7..0ba043e08ff 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -660,8 +660,8 @@ describe('ClusterProfileFeature', () => {
     it('shows empty states when nothing matches', () => {
       renderWithProviders(<ClusterProfileFeature search="CPUza" />)
 
-      expect(screen.getByText('No results found. Review your search or applied filters.')).toBeInTheDocument()
-      expect(screen.getByText('No settings found matching your search and filters.')).toBeInTheDocument()
+      expect(screen.getByText('No layers match your search')).toBeInTheDocument()
+      expect(screen.getByText('No settings match your search')).toBeInTheDocument()
       expect(screen.getByRole('heading', { name: 'Log infra' })).toBeInTheDocument()
       expect(screen.queryByRole('link')).not.toBeInTheDocument()
     })
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
index 365c950ef0e..dcbf14ae9b9 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -497,9 +497,7 @@ function ClusterProfileView({
                 <div className="p-4">
                   <EmptyState
                     icon="wave-pulse"
-                    title={
-                      <span className="font-normal leading-5">No settings found matching your search and filters.</span>
-                    }
+                    title={<span className="font-normal leading-5">No settings match your search</span>}
                     className="h-auto w-full p-8 shadow-sm"
                   />
                 </div>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
index 9981644752a..3f54437ff2b 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
@@ -47,7 +47,7 @@ describe('ProfileOperatorFooter', () => {
       clusterId: 'cluster-123',
       refetchInterval: 30_000,
     })
-    expect(screen.getByRole('button', { name: 'Qovery operator: Update available' })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: 'Qovery Operator: Update available' })).toBeInTheDocument()
   })
 
   it('tells when the Operator status cannot be retrieved', async () => {
@@ -56,9 +56,9 @@ describe('ProfileOperatorFooter', () => {
       <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
     )
 
-    await userEvent.hover(screen.getByRole('button', { name: 'Qovery operator: status unavailable' }))
+    await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' }))
 
-    expect((await screen.findAllByText('The Operator status could not be retrieved.'))[0]).toBeInTheDocument()
+    expect((await screen.findAllByText('The Operator status could not be retrieved'))[0]).toBeInTheDocument()
   })
 
   it('does not keep showing a stale status once a refresh fails', async () => {
@@ -67,9 +67,9 @@ describe('ProfileOperatorFooter', () => {
       <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
     )
 
-    await userEvent.hover(screen.getByRole('button', { name: 'Qovery operator: status unavailable' }))
+    await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' }))
 
-    expect((await screen.findAllByText('The Operator status could not be retrieved.'))[0]).toBeInTheDocument()
+    expect((await screen.findAllByText('The Operator status could not be retrieved'))[0]).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Update Operator' })).not.toBeInTheDocument()
   })
 
@@ -79,7 +79,7 @@ describe('ProfileOperatorFooter', () => {
       <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
     )
 
-    await userEvent.hover(screen.getByRole('button', { name: 'Qovery operator: Update available' }))
+    await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: Update available' }))
 
     const status = (await screen.findAllByRole('region', { name: 'Qovery Operator status' }))[0]
     expect(status).toHaveTextContent('Update available')
@@ -107,7 +107,7 @@ describe('ProfileOperatorFooter', () => {
       <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
     )
 
-    await userEvent.hover(screen.getByRole('button', { name: 'Qovery operator: Disconnected' }))
+    await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: Disconnected' }))
 
     expect((await screen.findAllByText('No recent heartbeat was received from the Operator.'))[0]).toBeInTheDocument()
     expect(screen.queryByRole('button', { name: 'Update Operator' })).not.toBeInTheDocument()
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
index 89d05472308..4dedbf8a1fe 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
@@ -26,10 +26,10 @@ export function ProfileOperatorFooter({ organizationId, clusterId }: { organizat
   const trigger = (
     <button
       type="button"
-      aria-label={`Qovery operator: ${display?.label ?? (isError ? 'status unavailable' : 'loading')}`}
+      aria-label={`Qovery Operator: ${display?.label ?? (isError ? 'status unavailable' : 'loading')}`}
       className="flex w-full shrink-0 items-center gap-2 bg-background-secondary p-3 text-left text-sm font-medium text-neutral outline-none focus-visible:outline focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-brand-strong"
     >
-      Qovery operator
+      Qovery Operator
       {display ? (
         <Icon iconName={display.icon.name} iconStyle="regular" className={`text-sm ${display.icon.className}`} />
       ) : isError ? (
@@ -42,7 +42,7 @@ export function ProfileOperatorFooter({ organizationId, clusterId }: { organizat
 
   if (isError) {
     return (
-      <Tooltip side="right" content="The Operator status could not be retrieved.">
+      <Tooltip side="right" content="The Operator status could not be retrieved">
         {trigger}
       </Tooltip>
     )
diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
index 035d0616ce5..04d3c57b14b 100644
--- a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
@@ -267,7 +267,7 @@ describe('SelfManagedClusterCreationFlow', () => {
         },
       },
     })
-    expect(await screen.findByRole('heading', { name: 'Install Qovery operator' })).toBeInTheDocument()
+    expect(await screen.findByRole('heading', { name: 'Install Qovery Operator' })).toBeInTheDocument()
   })
 
   it('sends no Operator configuration when it is left untouched', async () => {
@@ -407,7 +407,7 @@ describe('SelfManagedClusterCreationFlow', () => {
 
     await goToOperatorStep(userEvent)
     await userEvent.click(screen.getByRole('button', { name: 'Continue' }))
-    await screen.findByRole('heading', { name: 'Install Qovery operator' })
+    await screen.findByRole('heading', { name: 'Install Qovery Operator' })
 
     expect(mockUseClusterOperatorBootstrap).toHaveBeenLastCalledWith({
       organizationId: 'org-123',
diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
index 935aa57e30c..20004fc1dc5 100644
--- a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.tsx
@@ -368,7 +368,7 @@ function InstallStep({
   return (
     <div className="flex flex-col gap-4 p-5">
       <div>
-        <h2 className="h4 text-neutral">Install Qovery operator</h2>
+        <h2 className="h4 text-neutral">Install Qovery Operator</h2>
       </div>
       {isBootstrapLoading ? (
         <div className="flex justify-center py-6">
@@ -434,7 +434,7 @@ function InstallStep({
         </Callout.Icon>
         <Callout.Text>
           Do not close this tab. The Operator will connect to Qovery shortly once its installation completes. You'll be
-          redirected to the cluster profile settings once the operator is installed.
+          redirected to the cluster profile settings once the Operator is installed.
         </Callout.Text>
       </Callout.Root>
       <p className="text-ssm text-neutral-subtle">

From 49f03ec955311903a7e453f8d2024af8de22d8d4 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:16:37 +0200
Subject: [PATCH 09/19] refactor(clusters): use the layer-group icon in the
 profile sidebar

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 apps/console/public/assets/sidebar-test/layer.svg      | 10 ----------
 .../lib/cluster-profile/cluster-profile-sidebar.tsx    |  9 ++-------
 2 files changed, 2 insertions(+), 17 deletions(-)
 delete mode 100644 apps/console/public/assets/sidebar-test/layer.svg

diff --git a/apps/console/public/assets/sidebar-test/layer.svg b/apps/console/public/assets/sidebar-test/layer.svg
deleted file mode 100644
index 1c776882883..00000000000
--- a/apps/console/public/assets/sidebar-test/layer.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<svg preserveAspectRatio="none" overflow="visible" style="display: block;" width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g id="layer" clip-path="url(#clip0_0_131)">
-<path id="Primary" d="M13.6199 8.59144C13.8523 8.69808 14 8.9305 14 9.18753C14 9.44456 13.8523 9.67698 13.6199 9.78362L7.64258 12.5453L7.48672 12.6055C7.11758 12.7285 6.71289 12.7094 6.35742 12.5453L0.380078 9.78089C0.147656 9.67425 0 9.44183 0 9.18753C0 8.93323 0.147656 8.69808 0.380078 8.59144L2.25859 7.7219L3.82266 8.44378L2.21758 9.18479L6.90703 11.3532C6.96445 11.3805 7.03281 11.3805 7.09023 11.3532L11.777 9.18479L10.1719 8.44378L11.7359 7.71917L13.6172 8.5887L13.6199 8.59144ZM6.35742 1.45472C6.76484 1.26604 7.23516 1.26604 7.64258 1.45472L13.6199 4.21643C13.8523 4.32308 14 4.5555 14 4.81253C14 5.06956 13.8523 5.30198 13.6199 5.40862L7.64258 8.17034L7.48672 8.2305C7.11758 8.35354 6.71289 8.3344 6.35742 8.17034L0.380078 5.40589C0.147656 5.29925 0 5.06683 0 4.81253C0 4.55823 0.147656 4.32308 0.380078 4.21643L6.35742 1.45472ZM7.09023 2.6469C7.03281 2.61956 6.96445 2.61956 6.90703 2.6469L2.22031 4.81253L6.90977 6.97815C6.96719 7.0055 7.03555 7.0055 7.09297 6.97815L11.7797 4.81253L7.09023 2.64417V2.6469Z" fill="#7C7A85"/>
-</g>
-<defs>
-<clipPath id="clip0_0_131">
-<rect width="14" height="14" fill="white"/>
-</clipPath>
-</defs>
-</svg>
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
index c7b02971acf..756e7706245 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
@@ -31,13 +31,8 @@ interface LayerSectionRowProps {
   onSelectItem: (itemId: string) => void
 }
 
-function LayerIcon({ className = '' }: { className?: string }) {
-  return (
-    <span
-      aria-hidden="true"
-      className={`size-3.5 shrink-0 bg-current [mask-image:url('/assets/sidebar-test/layer.svg')] [mask-position:center] [mask-repeat:no-repeat] [mask-size:contain] ${className}`}
-    />
-  )
+function LayerIcon() {
+  return <Icon iconName="layer-group" iconStyle="regular" aria-hidden="true" className="shrink-0 text-sm" />
 }
 
 export function ClusterProfileItemIcon() {

From f27a8c0dcb67cbb699e73c85eaae0e014078194c Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:17:05 +0200
Subject: [PATCH 10/19] refactor(clusters): keep the HTTP status helper private
 to data-access

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 libs/domains/clusters/data-access/src/index.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/libs/domains/clusters/data-access/src/index.ts b/libs/domains/clusters/data-access/src/index.ts
index 3a75ad8d8f5..8e8229f53d9 100644
--- a/libs/domains/clusters/data-access/src/index.ts
+++ b/libs/domains/clusters/data-access/src/index.ts
@@ -1,5 +1,4 @@
 export * from './lib/domains-clusters-data-access'
-export * from './lib/http/is-http-status'
 export * from './lib/platform-configuration/platform-configuration'
 export { isGcpCluster } from './lib/cluster-checks/is-gcp-cluster'
 export { isAwsCluster } from './lib/cluster-checks/is-aws-cluster'

From 9dc6724a0615bb3620fd6abaf7b2c1c56fdd4f8a Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:17:45 +0200
Subject: [PATCH 11/19] test(ui): drive InputSearch with userEvent

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../inputs/input-search/input-search.spec.tsx | 25 ++++++++++++-------
 1 file changed, 16 insertions(+), 9 deletions(-)

diff --git a/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx b/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx
index 7842511ca8c..c2c92bfa3ff 100644
--- a/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx
+++ b/libs/shared/ui/src/lib/components/inputs/input-search/input-search.spec.tsx
@@ -1,4 +1,6 @@
-import { fireEvent, render, screen } from '__tests__/utils/setup-jest'
+import { render, screen } from '__tests__/utils/setup-jest'
+import { useState } from 'react'
+import { act, renderWithProviders } from '@qovery/shared/util-tests'
 import InputSearch, { type InputSearchProps } from './input-search'
 
 let props: InputSearchProps
@@ -10,13 +12,13 @@ describe('InputSearch', () => {
   })
 
   it('should set the text value when the input event is emitted', async () => {
-    render(<InputSearch {...props} />)
+    const { userEvent } = renderWithProviders(<InputSearch {...props} />)
 
     const input = screen.getByRole('textbox')
 
-    fireEvent.change(input, { target: { value: 'some new text value' } })
+    await userEvent.type(input, 'some new text value')
 
-    expect(input as HTMLInputElement).toHaveValue('some new text value')
+    expect(input).toHaveValue('some new text value')
   })
 
   it('follows default value changes', () => {
@@ -39,13 +41,18 @@ describe('InputSearch', () => {
     expect(screen.getByRole('button', { name: 'Clear search' })).toBeInTheDocument()
   })
 
-  it('keeps the typed value while focused', () => {
-    const { rerender } = render(<InputSearch defaultValue="lo" />)
+  it('keeps the typed value while focused', async () => {
+    let setDefaultValue: (value: string) => void = () => undefined
+    function InputSearchWithExternalValue() {
+      const [defaultValue, setValue] = useState('lo')
+      setDefaultValue = setValue
+      return <InputSearch defaultValue={defaultValue} />
+    }
+    const { userEvent } = renderWithProviders(<InputSearchWithExternalValue />)
     const input = screen.getByRole('textbox')
 
-    input.focus()
-    fireEvent.change(input, { target: { value: 'loki' } })
-    rerender(<InputSearch defaultValue="lok" />)
+    await userEvent.type(input, 'ki')
+    act(() => setDefaultValue('lok'))
 
     expect(input).toHaveValue('loki')
   })

From f9d6c6ce8c8bd101a0ec3684bc3ca2e6f395e2cb Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:18:42 +0200
Subject: [PATCH 12/19] refactor(clusters): read route ids in the Operator
 status components

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../cluster-operator-status.spec.tsx          | 28 ++++++-------------
 .../cluster-operator-status.tsx               |  6 ++--
 .../lib/cluster-profile/cluster-profile.tsx   |  3 +-
 .../profile-operator-footer.spec.tsx          | 26 +++++++----------
 .../profile-operator-footer.tsx               |  8 +++---
 5 files changed, 26 insertions(+), 45 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx
index ba0e8533049..d5aadc2dd5c 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.spec.tsx
@@ -3,6 +3,10 @@ import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { useUpdateClusterOperator } from '../hooks/use-update-cluster-operator/use-update-cluster-operator'
 import { ClusterOperatorStatus } from './cluster-operator-status'
 
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useParams: () => ({ organizationId: 'organization-id', clusterId: 'cluster-id' }),
+}))
 jest.mock('../hooks/use-update-cluster-operator/use-update-cluster-operator')
 
 const mockUseUpdateClusterOperator = useUpdateClusterOperator as jest.Mock
@@ -22,9 +26,7 @@ describe('ClusterOperatorStatus', () => {
   })
 
   it('updates the Operator to the target versions', async () => {
-    const { userEvent } = renderWithProviders(
-      <ClusterOperatorStatus organizationId="organization-id" clusterId="cluster-id" operatorStatus={operatorStatus} />
-    )
+    const { userEvent } = renderWithProviders(<ClusterOperatorStatus operatorStatus={operatorStatus} />)
 
     await userEvent.click(screen.getByRole('button', { name: 'Update Operator' }))
 
@@ -38,9 +40,7 @@ describe('ClusterOperatorStatus', () => {
 
   it('does not start another update while one is in progress', async () => {
     mockUseUpdateClusterOperator.mockReturnValue({ mutate: mockUpdateOperator, isLoading: true })
-    const { userEvent } = renderWithProviders(
-      <ClusterOperatorStatus organizationId="organization-id" clusterId="cluster-id" operatorStatus={operatorStatus} />
-    )
+    const { userEvent } = renderWithProviders(<ClusterOperatorStatus operatorStatus={operatorStatus} />)
 
     const button = screen.getByRole('button', { name: 'Update Operator' })
     expect(button).toBeDisabled()
@@ -51,25 +51,13 @@ describe('ClusterOperatorStatus', () => {
   })
 
   it('hides the update action while the Operator is not connected', () => {
-    renderWithProviders(
-      <ClusterOperatorStatus
-        organizationId="organization-id"
-        clusterId="cluster-id"
-        operatorStatus={{ ...operatorStatus, operator_connected: false }}
-      />
-    )
+    renderWithProviders(<ClusterOperatorStatus operatorStatus={{ ...operatorStatus, operator_connected: false }} />)
 
     expect(screen.queryByRole('button', { name: 'Update Operator' })).not.toBeInTheDocument()
   })
 
   it('disables the update action without a target chart version', () => {
-    renderWithProviders(
-      <ClusterOperatorStatus
-        organizationId="organization-id"
-        clusterId="cluster-id"
-        operatorStatus={{ ...operatorStatus, desired_chart_version: null }}
-      />
-    )
+    renderWithProviders(<ClusterOperatorStatus operatorStatus={{ ...operatorStatus, desired_chart_version: null }} />)
 
     expect(screen.getByRole('button', { name: 'Update Operator' })).toBeDisabled()
   })
diff --git a/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx
index e69e78c6f02..5e8599de14f 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-operator-status/cluster-operator-status.tsx
@@ -1,4 +1,5 @@
 import { type IconName } from '@fortawesome/fontawesome-common-types'
+import { useParams } from '@tanstack/react-router'
 import { type ClusterOperatorFleetStatus, type ClusterOperatorStatusResponse } from 'qovery-typescript-axios'
 import { match } from 'ts-pattern'
 import { Badge, Button, StatusChip } from '@qovery/shared/ui'
@@ -76,12 +77,11 @@ function Version({ installed, target }: { installed?: string | null; target?: st
 }
 
 export interface ClusterOperatorStatusProps {
-  organizationId: string
-  clusterId: string
   operatorStatus: ClusterOperatorStatusResponse
 }
 
-export function ClusterOperatorStatus({ organizationId, clusterId, operatorStatus }: ClusterOperatorStatusProps) {
+export function ClusterOperatorStatus({ operatorStatus }: ClusterOperatorStatusProps) {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
   const { mutate: updateOperator, isLoading: isUpdating } = useUpdateClusterOperator()
   const display = getClusterOperatorStatusDisplay(operatorStatus.status)
 
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
index dcbf14ae9b9..0193c9c2b3c 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -240,7 +240,6 @@ function ClusterProfileView({
   onSearchChange,
 }: ClusterProfileFeatureProps) {
   const {
-    organizationId,
     clusterId,
     cluster,
     templates,
@@ -453,7 +452,7 @@ function ClusterProfileView({
           onSearchChange={(nextSearch) => onSearchChange?.(nextSearch)}
           onSelectSection={handleSelectSection}
           onSelectItem={handleSelectItem}
-          footer={<ProfileOperatorFooter organizationId={organizationId} clusterId={clusterId} />}
+          footer={<ProfileOperatorFooter />}
         />
 
         <section className="relative flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden rounded-t-xl border-x border-t border-neutral bg-background">
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
index 3f54437ff2b..c40866bfdfd 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.spec.tsx
@@ -4,6 +4,10 @@ import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/u
 import { useUpdateClusterOperator } from '../hooks/use-update-cluster-operator/use-update-cluster-operator'
 import { ProfileOperatorFooter } from './profile-operator-footer'
 
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  useParams: () => ({ organizationId: 'org-123', clusterId: 'cluster-123' }),
+}))
 jest.mock('../hooks/use-cluster-operator-status/use-cluster-operator-status')
 jest.mock('../hooks/use-update-cluster-operator/use-update-cluster-operator')
 
@@ -31,16 +35,14 @@ describe('ProfileOperatorFooter', () => {
 
   it('renders nothing for a cluster without Operator', () => {
     mockUseClusterOperatorStatus.mockReturnValue({ data: null, isLoading: false })
-    const { container } = renderWithProviders(
-      <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
-    )
+    const { container } = renderWithProviders(<ProfileOperatorFooter />)
 
     expect(container).toBeEmptyDOMElement()
   })
 
   it('configures polling for the Operator status', () => {
     mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false })
-    renderWithProviders(<ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />)
+    renderWithProviders(<ProfileOperatorFooter />)
 
     expect(mockUseClusterOperatorStatus).toHaveBeenCalledWith({
       organizationId: 'org-123',
@@ -52,9 +54,7 @@ describe('ProfileOperatorFooter', () => {
 
   it('tells when the Operator status cannot be retrieved', async () => {
     mockUseClusterOperatorStatus.mockReturnValue({ data: undefined, isLoading: false, isError: true })
-    const { userEvent } = renderWithProviders(
-      <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
-    )
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
 
     await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' }))
 
@@ -63,9 +63,7 @@ describe('ProfileOperatorFooter', () => {
 
   it('does not keep showing a stale status once a refresh fails', async () => {
     mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false, isError: true })
-    const { userEvent } = renderWithProviders(
-      <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
-    )
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
 
     await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: status unavailable' }))
 
@@ -75,9 +73,7 @@ describe('ProfileOperatorFooter', () => {
 
   it('shows the Operator versions in a tooltip and starts an update', async () => {
     mockUseClusterOperatorStatus.mockReturnValue({ data: operatorStatus, isLoading: false })
-    const { userEvent } = renderWithProviders(
-      <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
-    )
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
 
     await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: Update available' }))
 
@@ -103,9 +99,7 @@ describe('ProfileOperatorFooter', () => {
       data: { ...operatorStatus, operator_connected: false, status: 'DISCONNECTED' },
       isLoading: false,
     })
-    const { userEvent } = renderWithProviders(
-      <ProfileOperatorFooter organizationId="org-123" clusterId="cluster-123" />
-    )
+    const { userEvent } = renderWithProviders(<ProfileOperatorFooter />)
 
     await userEvent.hover(screen.getByRole('button', { name: 'Qovery Operator: Disconnected' }))
 
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
index 4dedbf8a1fe..33b2e9cfd71 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-operator-footer.tsx
@@ -1,3 +1,4 @@
+import { useParams } from '@tanstack/react-router'
 import { Icon, LoaderSpinner, Tooltip } from '@qovery/shared/ui'
 import {
   ClusterOperatorStatus,
@@ -7,7 +8,8 @@ import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/u
 
 const OPERATOR_STATUS_REFRESH_INTERVAL = 30_000
 
-export function ProfileOperatorFooter({ organizationId, clusterId }: { organizationId: string; clusterId: string }) {
+export function ProfileOperatorFooter() {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
   const {
     data: operatorStatus,
     isLoading,
@@ -55,9 +57,7 @@ export function ProfileOperatorFooter({ organizationId, clusterId }: { organizat
       collisionPadding={8}
       classNameContent="w-[480px] rounded-lg border border-neutral bg-surface-neutral p-4 text-neutral shadow-lg"
       classNameArrow="fill-surface-neutral"
-      content={
-        <ClusterOperatorStatus organizationId={organizationId} clusterId={clusterId} operatorStatus={operatorStatus} />
-      }
+      content={<ClusterOperatorStatus operatorStatus={operatorStatus} />}
     >
       {trigger}
     </Tooltip>

From 4ecf7a6e1f917b87edb98b03c3e70462812a9f04 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:19:29 +0200
Subject: [PATCH 13/19] test(clusters): cover the platform configuration
 helpers

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../platform-configuration-utils.spec.ts      | 109 ++++++++++++++++++
 1 file changed, 109 insertions(+)
 create mode 100644 libs/domains/clusters/feature/src/lib/platform-configuration/platform-configuration-utils.spec.ts

diff --git a/libs/domains/clusters/feature/src/lib/platform-configuration/platform-configuration-utils.spec.ts b/libs/domains/clusters/feature/src/lib/platform-configuration/platform-configuration-utils.spec.ts
new file mode 100644
index 00000000000..698255dc138
--- /dev/null
+++ b/libs/domains/clusters/feature/src/lib/platform-configuration/platform-configuration-utils.spec.ts
@@ -0,0 +1,109 @@
+import { type FieldSchemaResponse } from 'qovery-typescript-axios'
+import {
+  applyPlatformConfigurationDefaults,
+  getFieldViolation,
+  getPlatformFieldPaths,
+  getUnmappedViolations,
+  isPlatformConfigurationReady,
+  omitEmptyValues,
+  toPlatformCloudVendor,
+  toPlatformClusterMode,
+  toPlatformConfigurationValue,
+  updateComponentValue,
+} from './platform-configuration-utils'
+
+const scalarField = (key: string, type: 'string' | 'number' | 'bool', defaultValue: string | null = null) =>
+  ({ key, label: key, type, required: false, sensitive: false, defaultValue, constraints: {} }) as FieldSchemaResponse
+
+const listenersField = {
+  key: 'listeners',
+  label: 'Listeners',
+  type: 'array',
+  required: false,
+  sensitive: false,
+  constraints: {},
+  items: { type: 'object', fields: [scalarField('port', 'number')] },
+  itemFields: [],
+} as unknown as FieldSchemaResponse
+
+const tlsField = {
+  key: 'tls',
+  label: 'TLS',
+  type: 'object',
+  required: false,
+  sensitive: false,
+  constraints: {},
+  fields: [scalarField('secret', 'string')],
+} as unknown as FieldSchemaResponse
+
+describe('platform configuration utils', () => {
+  it('maps clusters to the platform vocabulary', () => {
+    expect(toPlatformClusterMode('MANAGED')).toBe('QOVERY_MANAGED')
+    expect(toPlatformClusterMode('SELF_MANAGED')).toBe('CUSTOMER_MANAGED')
+    expect(toPlatformClusterMode('PARTIALLY_MANAGED')).toBeUndefined()
+    expect(toPlatformCloudVendor('ON_PREMISE')).toBe('UNKNOWN')
+    expect(toPlatformCloudVendor('AWS')).toBe('AWS')
+    expect(toPlatformCloudVendor(undefined)).toBeUndefined()
+  })
+
+  it('fills scalar defaults without overriding values', () => {
+    const fields = [scalarField('retention', 'number', '12'), scalarField('enabled', 'bool', 'true')]
+
+    expect(applyPlatformConfigurationDefaults(fields, {})).toEqual({ retention: 12, enabled: true })
+    expect(applyPlatformConfigurationDefaults(fields, { retention: '' })).toEqual({ retention: '', enabled: true })
+  })
+
+  it('converts number inputs, keeping cleared and invalid values', () => {
+    const numberField = { type: 'number' as const }
+
+    expect(toPlatformConfigurationValue(numberField, '24')).toBe(24)
+    expect(toPlatformConfigurationValue(numberField, ' ')).toBe('')
+    expect(toPlatformConfigurationValue(numberField, '1e')).toBe('1e')
+    expect(toPlatformConfigurationValue(numberField, true)).toBeUndefined()
+    expect(toPlatformConfigurationValue({ type: 'string' }, 'value')).toBe('value')
+  })
+
+  it('omits empty values while keeping array rows in place', () => {
+    expect(
+      omitEmptyValues({ name: '', port: undefined, tls: { secret: '' }, listeners: [{ port: '' }, { port: 80 }] })
+    ).toEqual({ tls: {}, listeners: [{}, { port: 80 }] })
+  })
+
+  it('sets and unsets a component value', () => {
+    const values = updateComponentValue({ loki: { retention: 12 } }, 'loki', 'storage', 's3')
+
+    expect(values).toEqual({ loki: { retention: 12, storage: 's3' } })
+    expect(updateComponentValue(values, 'loki', 'retention', undefined)).toEqual({ loki: { storage: 's3' } })
+  })
+
+  it('lists the paths of nested fields and array rows', () => {
+    expect(getPlatformFieldPaths([tlsField, listenersField], { listeners: [{ port: 80 }] })).toEqual([
+      'tls',
+      'tls.secret',
+      'listeners',
+      'listeners[0]',
+      'listeners[0].port',
+    ])
+  })
+
+  it('maps violations to fields and cluster inputs', () => {
+    const violations = [
+      { fieldPath: 'tls.secret', code: 'REQUIRED', message: 'Secret is required.' },
+      { fieldPath: 'clusterInputs.domain', code: 'REQUIRED', message: 'Domain is required.' },
+      { fieldPath: 'unknown', code: 'INVALID', message: 'Something is wrong.' },
+    ]
+    const requirements = [{ key: 'domain', status: 'MISSING' }] as never
+
+    expect(getFieldViolation(violations, 'tls.secret')).toBe('Secret is required.')
+    expect(getFieldViolation(violations, 'domain', 'clusterInputs')).toBe('Domain is required.')
+    expect(getUnmappedViolations(violations, [tlsField], {}, requirements)).toEqual([violations[2]])
+  })
+
+  it('is ready without violations and with every requirement ready', () => {
+    expect(isPlatformConfigurationReady([], [{ key: 'domain', status: 'READY' }] as never)).toBe(true)
+    expect(isPlatformConfigurationReady([], [{ key: 'domain', status: 'MISSING' }] as never)).toBe(false)
+    expect(isPlatformConfigurationReady([{ fieldPath: 'storage', code: 'REQUIRED', message: 'Required.' }], [])).toBe(
+      false
+    )
+  })
+})

From 8c417dec6aa5c41eff721238c3e0a75fedf99576 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:20:37 +0200
Subject: [PATCH 14/19] test(clusters): drop an unused testing import

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../self-managed-cluster-creation-flow.spec.tsx                 | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
index 04d3c57b14b..48ed9777948 100644
--- a/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/self-managed-cluster-creation/self-managed-cluster-creation-flow.spec.tsx
@@ -3,7 +3,7 @@ import { CloudProviderEnum } from 'qovery-typescript-axios'
 import { useState } from 'react'
 import selectEvent from 'react-select-event'
 import * as cloudProvidersDomain from '@qovery/domains/cloud-providers/feature'
-import { renderWithProviders, screen, waitFor, within } from '@qovery/shared/util-tests'
+import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
 import { useClusterOperatorBootstrap } from '../hooks/use-cluster-operator-bootstrap/use-cluster-operator-bootstrap'
 import { useClusterOperatorStatus } from '../hooks/use-cluster-operator-status/use-cluster-operator-status'
 import { useCreateSelfManagedCluster } from '../hooks/use-create-self-managed-cluster/use-create-self-managed-cluster'

From e8a571cea36b4d6961e3b998af60f7d0e2383338 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:41:58 +0200
Subject: [PATCH 15/19] UI tweak

---
 .../feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
index 756e7706245..ffac24a3c1a 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
@@ -36,7 +36,7 @@ function LayerIcon() {
 }
 
 export function ClusterProfileItemIcon() {
-  return <Icon name={IconEnum.HELM_OFFICIAL} width="14" height="14" className="shrink-0" aria-hidden="true" />
+  return <Icon name={IconEnum.HELM_OFFICIAL} width="15" height="15" className="shrink-0" aria-hidden="true" />
 }
 
 function LayerSectionRow({

From f5a577c9110e8d638579ebbb2a33619b4c8a1705 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:49:30 +0200
Subject: [PATCH 16/19] perf(clusters): debounce profile edits instead of
 preview requests

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../cluster-profile/cluster-profile.spec.tsx  | 42 +++++++++++++++++++
 .../lib/cluster-profile/cluster-profile.tsx   | 26 +++++++-----
 2 files changed, 58 insertions(+), 10 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index 0ba043e08ff..b63028535e5 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -430,6 +430,48 @@ describe('ClusterProfileFeature', () => {
     expect(screen.queryByRole('status', { name: 'Loading configuration' })).not.toBeInTheDocument()
   })
 
+  describe('edits debounce across component switches', () => {
+    function ClusterProfileWithNavigation() {
+      const [componentKey, setComponentKey] = useState<string>()
+      return <ClusterProfileFeature activeComponentKey={componentKey} onActiveComponentChange={setComponentKey} />
+    }
+    const getLastLokiRequest = () =>
+      mockUsePlatformComponentConfigurations.mock.calls.at(-1)?.[0].requests['loki']?.profileConfig
+
+    beforeEach(() => {
+      mockUsePlatformComponentConfigurations.mockImplementation(({ requests }) =>
+        createComponentQueries(Object.keys(requests))
+      )
+    })
+
+    it('keeps an edit debounced after switching to another component', async () => {
+      // A debounce that never settles.
+      mockUseDebounce.mockImplementation(<T,>(value: T) => jest.requireActual('react').useRef(value).current)
+      const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      const bar = screen.getByRole('region', { name: 'Unsaved profile changes' })
+      await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+
+      expect(getLastLokiRequest()).not.toHaveProperty('high-availability', true)
+      expect(within(bar).getByRole('button', { name: 'Save' })).toBeDisabled()
+    })
+
+    it('checks the latest edit when coming back to its component', async () => {
+      const { userEvent } = renderWithProviders(<ClusterProfileWithNavigation />)
+
+      await userEvent.click(screen.getByRole('switch', { name: 'High availability' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Envoy' }))
+      await userEvent.click(screen.getByRole('button', { name: 'Log infra' }))
+
+      expect(screen.getByRole('switch', { name: 'High availability' })).toBeChecked()
+      expect(getLastLokiRequest()).toHaveProperty('high-availability', true)
+      expect(
+        within(screen.getByRole('region', { name: 'Unsaved profile changes' })).getByRole('button', { name: 'Save' })
+      ).toBeEnabled()
+    })
+  })
+
   it('moves between the component tabs with the arrow keys', async () => {
     const onActiveComponentChange = jest.fn()
     const { userEvent } = renderWithProviders(
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
index 0193c9c2b3c..f65da0142f5 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -326,30 +326,36 @@ function ClusterProfileView({
       ),
     [configuration?.clusterInputs, clusterInputs, resolvedComponents]
   )
+  const edits = useMemo(() => ({ profileValues, clusterInputs }), [clusterInputs, profileValues])
+  const debouncedEdits = useDebounce(edits, 300)
   const previewRequests = useMemo(
     () =>
       Object.fromEntries(
         resolvedComponents.map((component) => [
           component.key,
           {
-            profileConfig: omitEmptyValues(profileConfigs[component.key] ?? {}),
-            clusterInputs: resolvedClusterInputs[component.key] ?? {},
+            profileConfig: omitEmptyValues(
+              applyPlatformConfigurationDefaults(component.fields, {
+                ...configuration?.platform.managedConfig?.[component.key],
+                ...debouncedEdits.profileValues[component.key],
+              })
+            ),
+            clusterInputs: {
+              ...configuration?.clusterInputs[component.key],
+              ...debouncedEdits.clusterInputs[component.key],
+            },
             componentOutputs: {},
           },
         ])
       ),
-    [profileConfigs, resolvedClusterInputs, resolvedComponents]
+    [configuration, debouncedEdits, resolvedComponents]
   )
-  const debouncedPreviewRequests = useDebounce(previewRequests, 300)
-  const settledPreviewRequests = equal(Object.keys(debouncedPreviewRequests), Object.keys(previewRequests))
-    ? debouncedPreviewRequests
-    : previewRequests
   const componentQueries = usePlatformComponentConfigurations({
     clusterId,
-    requests: settledPreviewRequests,
+    requests: previewRequests,
     enabled: Boolean(resolvedComponents.length),
   })
-  const requestedComponentKeys = Object.keys(settledPreviewRequests)
+  const requestedComponentKeys = Object.keys(previewRequests)
   const componentQueriesByKey = Object.fromEntries(
     requestedComponentKeys.flatMap((componentKey, index) => {
       const query = componentQueries[index]
@@ -410,7 +416,7 @@ function ClusterProfileView({
   const isBackgroundResolverError = hasResolverError && hasResolvedConfiguration
   // Saving needs every displayed or edited component resolved for the latest edits, with no violation or missing input.
   const isConfigurationReady =
-    equal(settledPreviewRequests, previewRequests) &&
+    equal(debouncedEdits, edits) &&
     Object.keys(previewRequests).every((componentKey) => {
       const query = componentQueriesByKey[componentKey]
       const preview = query?.data

From b9ca9ee61ec9df64fada4a8f33de25d4d9b2c04d Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:50:06 +0200
Subject: [PATCH 17/19] fix(clusters): only mention the search when the sidebar
 has one

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../lib/cluster-profile/cluster-profile-sidebar.tsx  |  4 +++-
 .../src/lib/cluster-profile/cluster-profile.spec.tsx | 12 ++++++++++++
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
index ffac24a3c1a..eb4843f8bb9 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile-sidebar.tsx
@@ -181,7 +181,9 @@ export function ClusterProfileSidebar({
               </li>
             ) : null}
             {showEmptyState ? (
-              <li className="px-3 py-1 text-ssm text-neutral-subtle">No layers match your search</li>
+              <li className="px-3 py-1 text-ssm text-neutral-subtle">
+                {search.trim() ? 'No layers match your search' : 'No layers available'}
+              </li>
             ) : null}
             {!isLoading && !isError
               ? layers.map((section) => (
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
index b63028535e5..4f287054a0d 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.spec.tsx
@@ -903,6 +903,18 @@ describe('ClusterProfileFeature', () => {
     })
   })
 
+  it('tells when the profile has no layers', () => {
+    mockUsePlatformTemplates.mockReturnValue({
+      data: [{ ...mockTemplates[0], layers: [] }],
+      isError: false,
+      isLoading: false,
+    } as unknown as ReturnType<typeof usePlatformTemplates>)
+    renderWithProviders(<ClusterProfileFeature />)
+
+    expect(screen.getByText('No layers available')).toBeInTheDocument()
+    expect(screen.queryByText('No layers match your search')).not.toBeInTheDocument()
+  })
+
   it('greys out the layers skipped or disabled in the cluster configuration', async () => {
     mockUsePlatformConfiguration.mockReturnValue({
       data: {

From 1b54b612089170b435062a3da55d99f550bb4758 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 17:50:47 +0200
Subject: [PATCH 18/19] fix(clusters): report the item modal mount state
 explicitly

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../profile-array-item-modal.spec.tsx         | 24 +++++++++++++++++++
 .../profile-array-item-modal.tsx              |  9 ++++---
 .../profile-configuration-field.tsx           |  5 ++--
 3 files changed, 32 insertions(+), 6 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx
index 3b2cca80fb2..0db5ccfe8f3 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.spec.tsx
@@ -1,3 +1,4 @@
+import { StrictMode } from 'react'
 import { renderWithProviders, screen, waitFor } from '@qovery/shared/util-tests'
 import { type PlatformFieldDescriptor } from '../platform-configuration/platform-configuration-utils'
 import { ProfileArrayItemModal } from './profile-array-item-modal'
@@ -34,4 +35,27 @@ describe('ProfileArrayItemModal', () => {
 
     expect(onSubmit).toHaveBeenCalledWith(submittedValues)
   })
+
+  it('reports being mounted until it unmounts, including under StrictMode', () => {
+    const onMountedChange = jest.fn()
+    const { unmount } = renderWithProviders(
+      <StrictMode>
+        <ProfileArrayItemModal
+          title="Trusted CIDRs"
+          fields={[cidrField]}
+          values={{}}
+          isEdit={false}
+          onClose={jest.fn()}
+          onMountedChange={onMountedChange}
+          onSubmit={jest.fn()}
+        />
+      </StrictMode>
+    )
+
+    expect(onMountedChange).toHaveBeenLastCalledWith(true)
+
+    unmount()
+
+    expect(onMountedChange).toHaveBeenLastCalledWith(false)
+  })
 })
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
index c202e44e05e..c009a5470d1 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-array-item-modal.tsx
@@ -21,7 +21,7 @@ export interface ProfileArrayItemModalProps {
   values: Record<string, unknown>
   isEdit: boolean
   onClose: () => void
-  onUnmount?: () => void
+  onMountedChange?: (isMounted: boolean) => void
   onSubmit: (values: Record<string, unknown>) => void
 }
 
@@ -35,10 +35,13 @@ export function ProfileArrayItemModal({
   values,
   isEdit,
   onClose,
-  onUnmount,
+  onMountedChange,
   onSubmit,
 }: ProfileArrayItemModalProps) {
-  useEffect(() => onUnmount, [onUnmount])
+  useEffect(() => {
+    onMountedChange?.(true)
+    return () => onMountedChange?.(false)
+  }, [onMountedChange])
 
   const methods = useForm<Record<string, CatalogVariableValue | undefined>>({
     mode: 'onChange',
diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
index b0d3bbc9399..8880c8d5672 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/profile-configuration-field.tsx
@@ -181,7 +181,6 @@ function ProfileArrayField({
       ? getPlatformArrayItemFields(field, index ?? items.length).filter(isPlatformScalarField)
       : [toPlatformArrayItemDescriptor(field)]
 
-    isItemModalOpenRef.current = true
     openModal({
       content: (
         <ProfileArrayItemModal
@@ -191,8 +190,8 @@ function ProfileArrayField({
           values={itemValues}
           isEdit={isEdit}
           onClose={closeModal}
-          onUnmount={() => {
-            isItemModalOpenRef.current = false
+          onMountedChange={(isMounted) => {
+            isItemModalOpenRef.current = isMounted
           }}
           onSubmit={(submittedValues) => {
             // Keep keys the modal does not edit (non-scalar or unevaluated fields) on existing object items.

From 47340906f3418ef026c85a4917dee71965e11849 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Fri, 2 Oct 2026 18:25:28 +0200
Subject: [PATCH 19/19] chore(clusters): remove profile API response logging

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
 .../lib/cluster-profile/cluster-profile.tsx   | 22 +------------------
 1 file changed, 1 insertion(+), 21 deletions(-)

diff --git a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
index f65da0142f5..b3666f8df5a 100644
--- a/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
+++ b/libs/domains/clusters/feature/src/lib/cluster-profile/cluster-profile.tsx
@@ -1,11 +1,10 @@
 import equal from 'fast-deep-equal'
 import { type PlatformComponentConfigurationResolutionResponse } from 'qovery-typescript-axios'
-import { useEffect, useMemo, useRef } from 'react'
+import { useMemo } from 'react'
 import { CatalogVariableInput } from '@qovery/shared/console-shared'
 import { EmptyState, Heading, Navbar, Skeleton } from '@qovery/shared/ui'
 import { useDebounce } from '@qovery/shared/util-hooks'
 import { type CatalogVariableValue, getCatalogVariableValue } from '@qovery/shared/util-js'
-import { NODE_ENV } from '@qovery/shared/util-node-env'
 import { ClusterAvatar } from '../cluster-avatar/cluster-avatar'
 import { usePlatformComponentConfigurations } from '../platform-configuration/hooks/use-platform-component-configurations'
 import {
@@ -242,7 +241,6 @@ function ClusterProfileView({
   const {
     clusterId,
     cluster,
-    templates,
     configuration,
     profileTree,
     isLoading,
@@ -362,24 +360,6 @@ function ClusterProfileView({
       return query ? [[componentKey, query]] : []
     })
   )
-  const loggedSchemaResponses = useRef(new WeakSet<object>())
-
-  useEffect(() => {
-    if (NODE_ENV !== 'development') return
-
-    if (templates && !loggedSchemaResponses.current.has(templates)) {
-      loggedSchemaResponses.current.add(templates)
-      console.log('[Cluster profile] Platform template catalog API response', templates)
-    }
-
-    componentQueries.forEach(({ data }) => {
-      if (!data || loggedSchemaResponses.current.has(data)) return
-
-      loggedSchemaResponses.current.add(data)
-      console.log(`[Cluster profile] Component configuration API response (${data.componentKey})`, data)
-    })
-  }, [componentQueries, templates])
-
   const previewsByComponent = Object.fromEntries(
     componentQueries.flatMap((query) => (query.data ? [[query.data.componentKey, query.data]] : []))
   )