From 5e9ca254ed9d68e8262b017beda4afc3fb0c5101 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 11:15:24 +0200
Subject: [PATCH 1/5] Remove deprecated checkRunningStatusClosed query

---
 .../lib/domains-environments-data-access.ts   |  10 +-
 .../environment-state-chip.tsx                |  11 -
 .../use-check-running-status-closed.ts        |  18 --
 .../src/lib/domains-services-data-access.ts   |  10 +-
 .../use-check-running-status-closed.ts        |  19 --
 .../select-commit-modal.spec.tsx.snap         | 293 ------------------
 .../select-commit-modal.spec.tsx              |  37 ++-
 .../layout/src/lib/feature/layout/layout.tsx  |  45 +--
 .../use-status-web-sockets.ts                 |  19 --
 9 files changed, 61 insertions(+), 401 deletions(-)
 delete mode 100644 libs/domains/environments/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts
 delete mode 100644 libs/domains/services/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts
 delete mode 100644 libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap

diff --git a/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts b/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts
index 05db8f3f683..ae34710c448 100644
--- a/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts
+++ b/libs/domains/environments/data-access/src/lib/domains-environments-data-access.ts
@@ -62,15 +62,7 @@ export const environments = createQueryKeys('environments', {
       )
     },
   }),
-  // TODO [To update once rust-backed will be deployed]: To remove
-  // NOTE: Value is set by WebSocket
-  checkRunningStatusClosed: (clusterId: string) => ({
-    queryKey: [clusterId],
-    queryFn() {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return new Promise<{ clusterId: string; reason: string }>(() => {})
-    },
-  }),
+
   details: ({ environmentId }: { environmentId: string }) => ({
     queryKey: [environmentId],
     async queryFn() {
diff --git a/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx b/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx
index 130d3a95b81..9d2e7ac784b 100644
--- a/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx
+++ b/libs/domains/environments/feature/src/lib/environment-state-chip/environment-state-chip.tsx
@@ -1,7 +1,5 @@
 import { Skeleton, StatusChip, type StatusChipProps } from '@qovery/shared/ui'
-import { useCheckRunningStatusClosed } from '../hooks/use-check-running-status-closed/use-check-running-status-closed'
 import { useDeploymentStatus } from '../hooks/use-deployment-status/use-deployment-status'
-import { useEnvironment } from '../hooks/use-environment/use-environment'
 import { useRunningStatus } from '../hooks/use-running-status/use-running-status'
 
 /**
@@ -45,16 +43,7 @@ function DeploymentStateChip({ environmentId, mode, ...props }: DeploymentStateC
 type RunningStateChipProps = Omit<EnvironmentStateChipProps, 'mode'>
 
 function RunningStateChip({ environmentId, ...props }: RunningStateChipProps) {
-  const { data: environment } = useEnvironment({ environmentId })
   const { data: runningStatus } = useRunningStatus({ environmentId })
-  const { data: checkRunningStatusClosed } = useCheckRunningStatusClosed({
-    clusterId: environment?.cluster_id ?? '',
-  })
-
-  // TODO [To update once rust-backed will be deployed]: To remove
-  if (checkRunningStatusClosed) {
-    return <StatusChip status="STOPPED" {...props} />
-  }
 
   return (
     <Skeleton width={16} height={16} show={!runningStatus?.state} rounded>
diff --git a/libs/domains/environments/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts b/libs/domains/environments/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts
deleted file mode 100644
index 1628578a62c..00000000000
--- a/libs/domains/environments/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { queries } from '@qovery/state/util-queries'
-
-export interface UseCheckRunningStatusClosedProps {
-  clusterId: string
-}
-
-export function useCheckRunningStatusClosed({ clusterId }: UseCheckRunningStatusClosedProps) {
-  return useQuery({
-    ...queries.environments.checkRunningStatusClosed(clusterId),
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    staleTime: Infinity,
-  })
-}
-
-export default useCheckRunningStatusClosed
diff --git a/libs/domains/services/data-access/src/lib/domains-services-data-access.ts b/libs/domains/services/data-access/src/lib/domains-services-data-access.ts
index afc5f92374e..df008662721 100644
--- a/libs/domains/services/data-access/src/lib/domains-services-data-access.ts
+++ b/libs/domains/services/data-access/src/lib/domains-services-data-access.ts
@@ -224,15 +224,7 @@ export const services = createQueryKeys('services', {
       return new Promise<ApplicationStatusDto | DatabaseStatusDto | TerraformStatusDto | null>(() => {})
     },
   }),
-  // TODO [To update once rust-backed will be deployed]: To remove
-  checkRunningStatusClosed: (clusterId: string, environmentId: string) => ({
-    queryKey: [clusterId, environmentId],
-    // NOTE: Value is set by WebSocket
-    queryFn() {
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      return new Promise<{ clusterId: string; environmentId: string; reason: string }>(() => {})
-    },
-  }),
+
   metrics: (environmentId: string, serviceId: string) => ({
     queryKey: [environmentId, serviceId],
     // NOTE: Value is set by WebSocket
diff --git a/libs/domains/services/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts b/libs/domains/services/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts
deleted file mode 100644
index 962c7be16e1..00000000000
--- a/libs/domains/services/feature/src/lib/hooks/use-check-running-status-closed/use-check-running-status-closed.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { useQuery } from '@tanstack/react-query'
-import { queries } from '@qovery/state/util-queries'
-
-export interface UseCheckRunningStatusClosedProps {
-  clusterId: string
-  environmentId: string
-}
-
-export function useCheckRunningStatusClosed({ clusterId, environmentId }: UseCheckRunningStatusClosedProps) {
-  return useQuery({
-    ...queries.services.checkRunningStatusClosed(clusterId, environmentId),
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-    refetchOnReconnect: false,
-    staleTime: Infinity,
-  })
-}
-
-export default useCheckRunningStatusClosed
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
deleted file mode 100644
index 1ca0f717eb2..00000000000
--- a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
+++ /dev/null
@@ -1,293 +0,0 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
-
-exports[`SelectCommitModal should match snapshot 1`] = `
-<div>
-  <div
-    class="flex flex-col gap-6 p-5"
-  >
-    <div
-      class="flex flex-col gap-2 text-sm"
-    >
-      <h2
-        class="h4 max-w-sm truncate text-neutral"
-      >
-        Deploy other version
-      </h2>
-      <p
-        class="text-neutral-subtle"
-      >
-        Type a version to deploy
-      </p>
-      For X service
-    </div>
-    <div
-      class="relative w-full"
-    >
-      <i
-        aria-hidden="true"
-        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-8 focus:outline-none focus:transition-[border-color] h-9 text-sm"
-        data-testid="input-search"
-        name="search"
-        placeholder="Search by commit message or commit id"
-        type="text"
-      />
-    </div>
-    <div
-      aria-required="false"
-      dir="ltr"
-      role="radiogroup"
-      style="outline: none;"
-      tabindex="0"
-    >
-      <div
-        class="relative overflow-y-auto pr-[1px] max-h-[50vh] pb-[60px]"
-        data-testid="scroll-shadow-wrapper"
-      >
-        <div
-          class="pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 opacity-0"
-          data-testid="scroll-shadow-top"
-        />
-        <div
-          class="pl-2"
-        >
-          <div
-            class="relative pl-5 text-sm font-medium text-neutral-subtle"
-          >
-            <i
-              aria-hidden="true"
-              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
-            />
-            Commit
-             on 
-            Jan 15, 2024
-          </div>
-          <div
-            class="border-l border-neutral pb-5 pl-5 pt-3"
-          >
-            <label
-              class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md cursor-pointer"
-            >
-              <div>
-                <button
-                  aria-checked="false"
-                  class="group transition bg-surface-neutral border border-neutral w-[20px] h-[20px] rounded-full hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid data-[state=checked]:border-0 hover:data-[state=checked]:bg-surface-brand-solidHover disabled:cursor-not-allowed disabled:hover:border disabled:bg-surface-neutral-component disabled:border-neutral-component disabled:data-[state=checked]:border-0 disabled:data-[state=checked]:bg-surface-brand-component"
-                  data-radix-collection-item=""
-                  data-state="unchecked"
-                  role="radio"
-                  tabindex="-1"
-                  type="button"
-                  value="123"
-                />
-              </div>
-              <div
-                class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
-              >
-                <a
-                  class="max-w-full truncate font-medium text-neutral"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  lorem
-                </a>
-                <span
-                  class="text-neutral-subtle"
-                >
-                  committed 
-                  2 years
-                   ago
-                </span>
-              </div>
-              <div
-                class="flex flex-col items-end gap-2"
-              >
-                <div
-                  class="flex items-center gap-1.5"
-                >
-                  <div
-                    class="relative block rounded-full border border-neutral  "
-                    data-state="closed"
-                    data-testid="avatar"
-                    style="width: 28px; height: 28px;"
-                  >
-                    <div
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-center"
-                    >
-                      <span
-                        class="relative text-xs font-medium text-neutral"
-                      >
-                        F
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="block w-fit cursor-pointer"
-                    data-state="closed"
-                    data-testid="tag-commit"
-                  >
-                    <span
-                      class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium  w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                      data-testid="tag"
-                    >
-                      <div
-                        class="mr-1 w-4"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="fa-regular fa-code-commit mr-1"
-                        />
-                      </div>
-                      123
-                    </span>
-                  </div>
-                </div>
-                <span
-                  class="text-xs"
-                >
-                   
-                </span>
-              </div>
-            </label>
-          </div>
-        </div>
-        <div
-          class="pl-2"
-        >
-          <div
-            class="relative pl-5 text-sm font-medium text-neutral-subtle"
-          >
-            <i
-              aria-hidden="true"
-              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
-            />
-            Commit
-             on 
-            Jan 14, 2024
-          </div>
-          <div
-            class="border-l border-neutral pb-5 pl-5 pt-3"
-          >
-            <label
-              class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md bg-surface-neutral-subtle"
-            >
-              <div>
-                <button
-                  aria-checked="true"
-                  class="group transition bg-surface-neutral border border-neutral w-[20px] h-[20px] rounded-full hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid data-[state=checked]:border-0 hover:data-[state=checked]:bg-surface-brand-solidHover disabled:cursor-not-allowed disabled:hover:border disabled:bg-surface-neutral-component disabled:border-neutral-component disabled:data-[state=checked]:border-0 disabled:data-[state=checked]:bg-surface-brand-component"
-                  data-disabled=""
-                  data-radix-collection-item=""
-                  data-state="checked"
-                  disabled=""
-                  role="radio"
-                  tabindex="-1"
-                  type="button"
-                  value="456"
-                >
-                  <span
-                    class="flex items-center justify-center w-full h-full relative"
-                    data-disabled=""
-                    data-state="checked"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="fa-regular fa-check text-xs text-neutral"
-                    />
-                  </span>
-                </button>
-              </div>
-              <div
-                class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
-              >
-                <a
-                  class="max-w-full truncate font-medium text-brand"
-                  rel="noreferrer"
-                  target="_blank"
-                >
-                  ipsum
-                </a>
-                <span
-                  class="text-neutral-subtle"
-                >
-                  committed 
-                  2 years
-                   ago
-                </span>
-              </div>
-              <div
-                class="flex flex-col items-end gap-2"
-              >
-                <div
-                  class="flex items-center gap-1.5"
-                >
-                  <div
-                    class="relative block rounded-full border border-neutral  "
-                    data-state="closed"
-                    data-testid="avatar"
-                    style="width: 28px; height: 28px;"
-                  >
-                    <div
-                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-center"
-                    >
-                      <span
-                        class="relative text-xs font-medium text-neutral"
-                      >
-                        F
-                      </span>
-                    </div>
-                  </div>
-                  <div
-                    class="block w-fit cursor-pointer"
-                    data-state="closed"
-                    data-testid="tag-commit"
-                  >
-                    <span
-                      class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium  w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
-                      data-testid="tag"
-                    >
-                      <div
-                        class="mr-1 w-4"
-                      >
-                        <i
-                          aria-hidden="true"
-                          class="fa-regular fa-code-commit mr-1"
-                        />
-                      </div>
-                      456
-                    </span>
-                  </div>
-                </div>
-                <span
-                  class="text-xs text-brand"
-                >
-                  Current version
-                </span>
-              </div>
-            </label>
-          </div>
-        </div>
-        <div
-          class="pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 opacity-0"
-          data-testid="scroll-shadow-bottom"
-        />
-      </div>
-    </div>
-    <div
-      class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5"
-    >
-      <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
-      >
-        Cancel
-      </button>
-      <button
-        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
-        disabled=""
-      >
-        Deploy
-      </button>
-    </div>
-  </div>
-</div>
-`;
diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.spec.tsx b/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.spec.tsx
index 83b984453a0..76ae8a834f4 100644
--- a/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.spec.tsx
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/select-commit-modal.spec.tsx
@@ -1,18 +1,49 @@
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { SelectCommitModal } from './select-commit-modal'
 
+jest.mock('@qovery/shared/util-dates', () => {
+  const actual = jest.requireActual('@qovery/shared/util-dates')
+  return {
+    ...actual,
+    /** Relative time drifts between runs; snapshot must stay stable. */
+    timeAgo: () => '0 seconds',
+    /**
+     * `commitsByDay` keys use local `toDateString()` but `dateToFormat` uses UTC — CI vs dev timezones
+     * otherwise flip the header (e.g. Apr 02 vs Apr 03).
+     */
+    dateToFormat: (date: string, format: string) => {
+      if (format === 'MMM dd, yyyy') {
+        return 'Apr 03, 2026'
+      }
+      return actual.dateToFormat(date, format)
+    },
+  }
+})
+
 jest.mock('../hooks/use-last-deployed-commit/use-last-deployed-commit', () => {
   return {
     ...jest.requireActual('../hooks/use-last-deployed-commit/use-last-deployed-commit'),
     useLastDeployedCommit: () => ({
       data: {
         commits: [
-          { created_at: '2024-01-15T12:00:00Z', author_name: 'foo', git_commit_id: '123', message: 'lorem', tag: '' },
-          { created_at: '2024-01-14T12:00:00Z', author_name: 'foo', git_commit_id: '456', message: 'ipsum', tag: '' },
+          {
+            created_at: '2026-04-03T13:25:12.247Z',
+            author_name: 'foo',
+            git_commit_id: '123',
+            message: 'lorem',
+            tag: '',
+          },
+          {
+            created_at: '2026-04-03T13:25:12.247Z',
+            author_name: 'foo',
+            git_commit_id: '456',
+            message: 'ipsum',
+            tag: '',
+          },
         ],
         delta: 1,
         deployedCommit: {
-          created_at: '2024-01-14T12:00:00Z',
+          created_at: '2026-04-03T13:25:12.247Z',
           author_name: 'foo',
           git_commit_id: '456',
           message: 'ipsum',
diff --git a/libs/pages/layout/src/lib/feature/layout/layout.tsx b/libs/pages/layout/src/lib/feature/layout/layout.tsx
index 7c9a88bc622..728a8049edc 100644
--- a/libs/pages/layout/src/lib/feature/layout/layout.tsx
+++ b/libs/pages/layout/src/lib/feature/layout/layout.tsx
@@ -1,6 +1,6 @@
 import { useAuth0 } from '@auth0/auth0-react'
 import posthog from 'posthog-js'
-import { type PropsWithChildren, memo, useEffect } from 'react'
+import { type PropsWithChildren, memo, useEffect, useMemo } from 'react'
 import { redirect, useParams } from 'react-router-dom'
 import { useClusters } from '@qovery/domains/clusters/feature'
 import { useEnvironment } from '@qovery/domains/environments/feature'
@@ -29,6 +29,17 @@ export function Layout(props: PropsWithChildren<LayoutProps>) {
 
   const { data: environment } = useEnvironment({ environmentId })
 
+  /** One cluster when env is known; avoid N /status sockets (all org clusters) while env is still loading. */
+  const statusWebSocketClusters = useMemo(() => {
+    if (environmentId) {
+      if (environment) {
+        return [{ id: environment.cluster_id }]
+      }
+      return []
+    }
+    return clusters
+  }, [clusters, environment, environmentId])
+
   useEffect(() => {
     const organizationIds = organizations.map(({ id }) => id)
 
@@ -62,25 +73,19 @@ export function Layout(props: PropsWithChildren<LayoutProps>) {
   return (
     <LayoutPage spotlight={spotlight} topBar={topBar} clusters={clusters} defaultOrganizationId={organizations[0]?.id}>
       <>
-        {
-          /**
-           * XXX: Here we are limited by the websocket API which requires a clusterId
-           * We need to instantiate one hook per clusterId to get the complete environment statuses of the page
-           */
-          (environment ? [{ id: environment.cluster_id }] : clusters).map(
-            ({ id }) =>
-              organizationId && (
-                <StatusWebSocketListenerMemo
-                  key={id}
-                  organizationId={organizationId}
-                  clusterId={id}
-                  projectId={projectId}
-                  environmentId={environmentId}
-                  versionId={versionId}
-                />
-              )
-          )
-        }
+        {statusWebSocketClusters.map(
+          ({ id }) =>
+            organizationId && (
+              <StatusWebSocketListenerMemo
+                key={id}
+                organizationId={organizationId}
+                clusterId={id}
+                projectId={projectId}
+                environmentId={environmentId}
+                versionId={versionId}
+              />
+            )
+        )}
         {children}
       </>
     </LayoutPage>
diff --git a/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts b/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts
index 9fe50d17261..c6918eed1bb 100644
--- a/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts
+++ b/libs/shared/util-web-sockets/src/lib/use-status-web-sockets/use-status-web-sockets.ts
@@ -115,25 +115,6 @@ export function useStatusWebSockets({
         }
       }
     },
-    onClose(queryClient, event: CloseEvent) {
-      // NOTE: API returns a string for the reason, which allows us to know if the status is available or not
-      // clusterId is required everywhere and environmentId is necessary for the service list
-      const isNotFound = event.reason.includes('NotFound') || event.reason.includes('not found')
-      if (isNotFound && clusterId) {
-        if (environmentId) {
-          queryClient.setQueryData(queries.services.checkRunningStatusClosed(clusterId, environmentId).queryKey, {
-            clusterId,
-            environmentId,
-            reason: event.reason,
-          })
-        } else {
-          queryClient.setQueryData(queries.environments.checkRunningStatusClosed(clusterId).queryKey, {
-            clusterId,
-            reason: event.reason,
-          })
-        }
-      }
-    },
   })
 }
 

From 1670674f3481fef5bfdfddb1ba068e92ab2b5cff Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 12:07:35 +0200
Subject: [PATCH 2/5] Fix table re-rendering issue

---
 .../src/lib/hooks/use-services/use-services.ts    | 13 +++++++------
 .../feature/src/lib/service-list/service-list.tsx | 15 ++++++++++-----
 2 files changed, 17 insertions(+), 11 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts b/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts
index e62969706a9..e41d200b168 100644
--- a/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts
+++ b/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts
@@ -32,9 +32,8 @@ export function useServices({ environmentId, suspense = false }: UseServicesProp
     })),
   })
 
-  const data = useMemo(
-    () =>
-      (services ?? []).map((service, index) => {
+  const data = useMemo(() => {
+    const nextData = (services ?? []).map((service, index) => {
         const runningStatus = runningStatusResults[index].data
         const deploymentStatus = deploymentStatusResults[index].data
 
@@ -80,8 +79,10 @@ export function useServices({ environmentId, suspense = false }: UseServicesProp
               }
             : {}),
         }
-      }),
-    [
+      })
+
+    return nextData
+  }, [
       services,
       // https://github.com/TanStack/query/issues/5137
       // As we currently use tanstack query V4, we cannot use combine to avoid infinite renders
@@ -91,7 +92,7 @@ export function useServices({ environmentId, suspense = false }: UseServicesProp
         ...runningStatusResults.map(({ data }) => data?.state),
         ...deploymentStatusResults.map(({ data }) => data?.state),
       ]),
-    ]
+    ],
   )
 
   return {
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index 2eee6ccbfe7..20ea0aa4e5d 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -145,9 +145,10 @@ export function ServiceList({ className, containerClassName, environment, ...pro
     })
   }, [actualServices, skippedServicesMap])
 
-  const columnHelper = createColumnHelper<(typeof actualServices)[number]>()
   const columns = useMemo(
-    () => [
+    () => {
+      const columnHelper = createColumnHelper<(typeof actualServices)[number]>()
+      return [
       columnHelper.display({
         id: 'select',
         enableColumnFilter: false,
@@ -275,13 +276,17 @@ export function ServiceList({ className, containerClassName, environment, ...pro
         cell: (info) => {
           return (
             <div className="flex h-full items-center" onClick={(e) => e.stopPropagation()}>
-              <ServiceActions serviceId={info.row.original.id} environment={environment} />
+              <ServiceActions
+                serviceId={info.row.original.id}
+                environment={environment}
+              />
             </div>
           )
         },
       }),
-    ],
-    [columnHelper, environment, organizationId, projectId]
+      ]
+    },
+    [environment, organizationId, projectId]
   )
 
   const table = useReactTable({

From a9b794d0b812905f15291d4ae0043fe4c345a135 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 12:14:51 +0200
Subject: [PATCH 3/5] Fix lint issue

---
 .../lib/hooks/use-services/use-services.ts    | 107 +++++++++---------
 .../src/lib/service-list/service-list.tsx     |  18 +--
 2 files changed, 59 insertions(+), 66 deletions(-)

diff --git a/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts b/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts
index e41d200b168..c5b34620840 100644
--- a/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts
+++ b/libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts
@@ -34,66 +34,65 @@ export function useServices({ environmentId, suspense = false }: UseServicesProp
 
   const data = useMemo(() => {
     const nextData = (services ?? []).map((service, index) => {
-        const runningStatus = runningStatusResults[index].data
-        const deploymentStatus = deploymentStatusResults[index].data
+      const runningStatus = runningStatusResults[index].data
+      const deploymentStatus = deploymentStatusResults[index].data
 
-        const runningStatusLabel = upperCaseFirstLetter(runningStatus?.state.replace('_', ' ') ?? 'STOPPED')
-        const deploymentStatusLabel = upperCaseFirstLetter(
-          (deploymentStatus?.state === 'READY' ? 'NEVER_DEPLOYED' : deploymentStatus?.state)?.replace('_', ' ') ??
-            'STOPPED'
-        )
-        const isManagedDb = service.serviceType === 'DATABASE' && service.mode === 'MANAGED'
+      const runningStatusLabel = upperCaseFirstLetter(runningStatus?.state.replace('_', ' ') ?? 'STOPPED')
+      const deploymentStatusLabel = upperCaseFirstLetter(
+        (deploymentStatus?.state === 'READY' ? 'NEVER_DEPLOYED' : deploymentStatus?.state)?.replace('_', ' ') ??
+          'STOPPED'
+      )
+      const isManagedDb = service.serviceType === 'DATABASE' && service.mode === 'MANAGED'
 
-        const runningStatusOverride = match({ runningStatus, isManagedDb })
-          .with({ runningStatus: P.any, isManagedDb: true }, () => ({
-            triggered_action: undefined,
-            ...deploymentStatus,
-            state: match(deploymentStatus?.state)
-              .with('DEPLOYED', () => 'RUNNING' as const)
-              .otherwise(() => 'UNKNOWN' as const),
-            stateLabel: match(deploymentStatus?.state)
-              .with('DEPLOYED', () => 'Running')
-              .otherwise(() => 'Unknown'),
-          }))
-          .with({ runningStatus: P.nullish, isManagedDb: false }, () => ({
-            state: undefined,
-            stateLabel: undefined,
-            triggered_action: undefined,
-          }))
-          .with({ runningStatus: P.not(P.nullish) }, ({ runningStatus }) => ({
-            triggered_action: undefined, // will be unpacked from runningStatus if present
-            ...runningStatus,
-            stateLabel: runningStatusLabel,
-          }))
-          .exhaustive()
+      const runningStatusOverride = match({ runningStatus, isManagedDb })
+        .with({ runningStatus: P.any, isManagedDb: true }, () => ({
+          triggered_action: undefined,
+          ...deploymentStatus,
+          state: match(deploymentStatus?.state)
+            .with('DEPLOYED', () => 'RUNNING' as const)
+            .otherwise(() => 'UNKNOWN' as const),
+          stateLabel: match(deploymentStatus?.state)
+            .with('DEPLOYED', () => 'Running')
+            .otherwise(() => 'Unknown'),
+        }))
+        .with({ runningStatus: P.nullish, isManagedDb: false }, () => ({
+          state: undefined,
+          stateLabel: undefined,
+          triggered_action: undefined,
+        }))
+        .with({ runningStatus: P.not(P.nullish) }, ({ runningStatus }) => ({
+          triggered_action: undefined, // will be unpacked from runningStatus if present
+          ...runningStatus,
+          stateLabel: runningStatusLabel,
+        }))
+        .exhaustive()
 
-        return {
-          ...service,
-          runningStatus: runningStatusOverride,
-          ...(deploymentStatus
-            ? {
-                deploymentStatus: {
-                  ...deploymentStatus,
-                  stateLabel: deploymentStatusLabel,
-                },
-              }
-            : {}),
-        }
-      })
+      return {
+        ...service,
+        runningStatus: runningStatusOverride,
+        ...(deploymentStatus
+          ? {
+              deploymentStatus: {
+                ...deploymentStatus,
+                stateLabel: deploymentStatusLabel,
+              },
+            }
+          : {}),
+      }
+    })
 
     return nextData
   }, [
-      services,
-      // https://github.com/TanStack/query/issues/5137
-      // As we currently use tanstack query V4, we cannot use combine to avoid infinite renders
-      // So we need to use service "state" to memoize data for usage like tanstack table.
-      // As useMemo cannot have variable params length, we need JSON.stringify to not be bound by the services length
-      JSON.stringify([
-        ...runningStatusResults.map(({ data }) => data?.state),
-        ...deploymentStatusResults.map(({ data }) => data?.state),
-      ]),
-    ],
-  )
+    services,
+    // https://github.com/TanStack/query/issues/5137
+    // As we currently use tanstack query V4, we cannot use combine to avoid infinite renders
+    // So we need to use service "state" to memoize data for usage like tanstack table.
+    // As useMemo cannot have variable params length, we need JSON.stringify to not be bound by the services length
+    JSON.stringify([
+      ...runningStatusResults.map(({ data }) => data?.state),
+      ...deploymentStatusResults.map(({ data }) => data?.state),
+    ]),
+  ])
 
   return {
     data,
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index 20ea0aa4e5d..5c58024d76b 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -145,10 +145,9 @@ export function ServiceList({ className, containerClassName, environment, ...pro
     })
   }, [actualServices, skippedServicesMap])
 
-  const columns = useMemo(
-    () => {
-      const columnHelper = createColumnHelper<(typeof actualServices)[number]>()
-      return [
+  const columns = useMemo(() => {
+    const columnHelper = createColumnHelper<(typeof actualServices)[number]>()
+    return [
       columnHelper.display({
         id: 'select',
         enableColumnFilter: false,
@@ -276,18 +275,13 @@ export function ServiceList({ className, containerClassName, environment, ...pro
         cell: (info) => {
           return (
             <div className="flex h-full items-center" onClick={(e) => e.stopPropagation()}>
-              <ServiceActions
-                serviceId={info.row.original.id}
-                environment={environment}
-              />
+              <ServiceActions serviceId={info.row.original.id} environment={environment} />
             </div>
           )
         },
       }),
-      ]
-    },
-    [environment, organizationId, projectId]
-  )
+    ]
+  }, [environment, organizationId, projectId])
 
   const table = useReactTable({
     data: sortedServices,

From fb91e377ce345f2236e2dcf8c0af1d20381fdf34 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 13:33:15 +0200
Subject: [PATCH 4/5] Fix checkbox issue and update snapshot

---
 .../select-commit-modal.spec.tsx.snap         | 274 ++++++++++++++++++
 .../src/lib/service-list/service-list.tsx     |  11 -
 2 files changed, 274 insertions(+), 11 deletions(-)
 create mode 100644 libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap

diff --git a/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
new file mode 100644
index 00000000000..089fb11bbfe
--- /dev/null
+++ b/libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap
@@ -0,0 +1,274 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`SelectCommitModal should match snapshot 1`] = `
+<div>
+  <div
+    class="flex flex-col gap-6 p-5"
+  >
+    <div
+      class="flex flex-col gap-2 text-sm"
+    >
+      <h2
+        class="h4 max-w-sm truncate text-neutral"
+      >
+        Deploy other version
+      </h2>
+      <p
+        class="text-neutral-subtle"
+      >
+        Type a version to deploy
+      </p>
+      For X service
+    </div>
+    <div
+      class="relative w-full"
+    >
+      <i
+        aria-hidden="true"
+        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-8 focus:outline-none focus:transition-[border-color] h-9 text-sm"
+        data-testid="input-search"
+        name="search"
+        placeholder="Search by commit message or commit id"
+        type="text"
+      />
+    </div>
+    <div
+      aria-required="false"
+      dir="ltr"
+      role="radiogroup"
+      style="outline: none;"
+      tabindex="0"
+    >
+      <div
+        class="relative overflow-y-auto pr-[1px] max-h-[50vh] pb-[60px]"
+        data-testid="scroll-shadow-wrapper"
+      >
+        <div
+          class="pointer-events-none sticky top-0 z-overlay -mb-4 h-5 w-full bg-scroll-shadow-up transition-opacity duration-300 opacity-0"
+          data-testid="scroll-shadow-top"
+        />
+        <div
+          class="pl-2"
+        >
+          <div
+            class="relative pl-5 text-sm font-medium text-neutral-subtle"
+          >
+            <i
+              aria-hidden="true"
+              class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
+            />
+            Commits
+             on 
+            Apr 03, 2026
+          </div>
+          <div
+            class="border-l border-neutral pb-5 pl-5 pt-3"
+          >
+            <label
+              class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md cursor-pointer"
+            >
+              <div>
+                <button
+                  aria-checked="false"
+                  class="group transition bg-surface-neutral border border-neutral w-[20px] h-[20px] rounded-full hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid data-[state=checked]:border-0 hover:data-[state=checked]:bg-surface-brand-solidHover disabled:cursor-not-allowed disabled:hover:border disabled:bg-surface-neutral-component disabled:border-neutral-component disabled:data-[state=checked]:border-0 disabled:data-[state=checked]:bg-surface-brand-component"
+                  data-radix-collection-item=""
+                  data-state="unchecked"
+                  role="radio"
+                  tabindex="-1"
+                  type="button"
+                  value="123"
+                />
+              </div>
+              <div
+                class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
+              >
+                <a
+                  class="max-w-full truncate font-medium text-neutral"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  lorem
+                </a>
+                <span
+                  class="text-neutral-subtle"
+                >
+                  committed 
+                  0 seconds
+                   ago
+                </span>
+              </div>
+              <div
+                class="flex flex-col items-end gap-2"
+              >
+                <div
+                  class="flex items-center gap-1.5"
+                >
+                  <div
+                    class="relative block rounded-full border border-neutral  "
+                    data-state="closed"
+                    data-testid="avatar"
+                    style="width: 28px; height: 28px;"
+                  >
+                    <div
+                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-center"
+                    >
+                      <span
+                        class="relative text-xs font-medium text-neutral"
+                      >
+                        F
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="block w-fit cursor-pointer"
+                    data-state="closed"
+                    data-testid="tag-commit"
+                  >
+                    <span
+                      class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium  w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
+                      data-testid="tag"
+                    >
+                      <div
+                        class="mr-1 w-4"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="fa-regular fa-code-commit mr-1"
+                        />
+                      </div>
+                      123
+                    </span>
+                  </div>
+                </div>
+                <span
+                  class="text-xs"
+                >
+                   
+                </span>
+              </div>
+            </label>
+            <label
+              class="-mt-px flex w-full flex-row gap-3 border border-neutral p-3 first:rounded-t-md last:rounded-b-md bg-surface-neutral-subtle"
+            >
+              <div>
+                <button
+                  aria-checked="true"
+                  class="group transition bg-surface-neutral border border-neutral w-[20px] h-[20px] rounded-full hover:border-brand-strong data-[state=checked]:bg-surface-brand-solid data-[state=checked]:border-0 hover:data-[state=checked]:bg-surface-brand-solidHover disabled:cursor-not-allowed disabled:hover:border disabled:bg-surface-neutral-component disabled:border-neutral-component disabled:data-[state=checked]:border-0 disabled:data-[state=checked]:bg-surface-brand-component"
+                  data-disabled=""
+                  data-radix-collection-item=""
+                  data-state="checked"
+                  disabled=""
+                  role="radio"
+                  tabindex="-1"
+                  type="button"
+                  value="456"
+                >
+                  <span
+                    class="flex items-center justify-center w-full h-full relative"
+                    data-disabled=""
+                    data-state="checked"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="fa-regular fa-check text-xs text-neutral"
+                    />
+                  </span>
+                </button>
+              </div>
+              <div
+                class="flex min-w-0 flex-1 flex-col items-start gap-1 text-sm"
+              >
+                <a
+                  class="max-w-full truncate font-medium text-brand"
+                  rel="noreferrer"
+                  target="_blank"
+                >
+                  ipsum
+                </a>
+                <span
+                  class="text-neutral-subtle"
+                >
+                  committed 
+                  0 seconds
+                   ago
+                </span>
+              </div>
+              <div
+                class="flex flex-col items-end gap-2"
+              >
+                <div
+                  class="flex items-center gap-1.5"
+                >
+                  <div
+                    class="relative block rounded-full border border-neutral  "
+                    data-state="closed"
+                    data-testid="avatar"
+                    style="width: 28px; height: 28px;"
+                  >
+                    <div
+                      class="flex h-full w-full items-center justify-center rounded-full bg-surface-neutral-subtle text-center"
+                    >
+                      <span
+                        class="relative text-xs font-medium text-neutral"
+                      >
+                        F
+                      </span>
+                    </div>
+                  </div>
+                  <div
+                    class="block w-fit cursor-pointer"
+                    data-state="closed"
+                    data-testid="tag-commit"
+                  >
+                    <span
+                      class="inline-flex items-center rounded text-xs font-bold h-7 px-2   flex items-center justify-center border font-medium  w-[90px] border-neutral text-neutral-subtle hover:bg-surface-neutral-subtle"
+                      data-testid="tag"
+                    >
+                      <div
+                        class="mr-1 w-4"
+                      >
+                        <i
+                          aria-hidden="true"
+                          class="fa-regular fa-code-commit mr-1"
+                        />
+                      </div>
+                      456
+                    </span>
+                  </div>
+                </div>
+                <span
+                  class="text-xs text-brand"
+                >
+                  Current version
+                </span>
+              </div>
+            </label>
+          </div>
+        </div>
+        <div
+          class="pointer-events-none sticky bottom-0 z-overlay -mt-4 h-5 w-full rotate-180 bg-scroll-shadow-bottom transition-opacity duration-300 opacity-0"
+          data-testid="scroll-shadow-bottom"
+        />
+      </div>
+    </div>
+    <div
+      class="absolute bottom-0 left-0 flex w-full justify-end gap-3 rounded-b-md bg-background p-5"
+    >
+      <button
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-neutral-strong text-sm h-10 px-3 rounded-lg bg-surface-neutral border border-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle data-[state=open]:bg-surface-neutral-subtle text-neutral"
+      >
+        Cancel
+      </button>
+      <button
+        class="inline-flex items-center shrink-0 font-medium transition-[background-color,transform] active:scale-[0.97] disabled:scale-100 disabled:pointer-events-none disabled:border disabled:border-neutral disabled:text-neutral-disabled disabled:bg-surface-neutral-component focus-visible:[&:not(:active)]:outline-2 outline-0 select-none outline-brand-strong text-sm h-10 px-3 rounded-lg bg-surface-brand-solid hover:bg-surface-brand-solidHover border border-brand-component text-neutralInvert"
+        disabled=""
+      >
+        Deploy
+      </button>
+    </div>
+  </div>
+</div>
+`;
diff --git a/libs/domains/services/feature/src/lib/service-list/service-list.tsx b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
index 5c58024d76b..9fa5a6623ad 100644
--- a/libs/domains/services/feature/src/lib/service-list/service-list.tsx
+++ b/libs/domains/services/feature/src/lib/service-list/service-list.tsx
@@ -159,9 +159,6 @@ export function ServiceList({ className, containerClassName, environment, ...pro
               ? true
               : 'indeterminate'
             : isAllRowsSelected
-          const toggleAllRowsSelection = () => {
-            table.toggleAllRowsSelected(!isAllRowsSelected)
-          }
 
           return (
             <div className="relative h-full w-full">
@@ -169,7 +166,6 @@ export function ServiceList({ className, containerClassName, environment, ...pro
                 className="absolute inset-0 flex items-center pl-4"
                 onClick={(e) => {
                   e.stopPropagation()
-                  toggleAllRowsSelection()
                 }}
               >
                 <Checkbox
@@ -188,12 +184,6 @@ export function ServiceList({ className, containerClassName, environment, ...pro
         },
         cell: ({ row }) => {
           const isDisabled = !row.getCanSelect()
-          const toggleRowSelection = () => {
-            if (isDisabled) {
-              return
-            }
-            row.toggleSelected(!row.getIsSelected())
-          }
           const checkbox = (
             <div className="h-4">
               <Checkbox
@@ -221,7 +211,6 @@ export function ServiceList({ className, containerClassName, environment, ...pro
               className="absolute inset-0 flex items-center pl-4"
               onClick={(e) => {
                 e.stopPropagation()
-                toggleRowSelection()
               }}
             >
               {checkbox}

From eb20abf5ea98cf9411a04934941f40beb7f81090 Mon Sep 17 00:00:00 2001
From: Romain Billard <billard.rom@gmail.com>
Date: Thu, 23 Apr 2026 13:41:52 +0200
Subject: [PATCH 5/5] Fix unit tests

---
 __tests__/mocks.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/__tests__/mocks.ts b/__tests__/mocks.ts
index fb25844a6b8..c4a4e37ec08 100644
--- a/__tests__/mocks.ts
+++ b/__tests__/mocks.ts
@@ -1,9 +1,9 @@
-import type { ComponentType } from 'react'
+import type { ComponentType, ReactNode } from 'react'
 import * as React from 'react'
 
 jest.mock('@auth0/auth0-react', () => ({
-  Auth0Provider: ({ children }) => children,
-  withAuthenticationRequired: (component) => component,
+  Auth0Provider: ({ children }: { children: ReactNode }) => children,
+  withAuthenticationRequired: (component: ComponentType) => component,
   useAuth0: () => {
     return {
       isLoading: false,