fix(new-nav): remove deprecated checkRunningStatusClosed query and fix service table re-rendering issue

__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,

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() {

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>

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

libs/domains/services/feature/src/lib/hooks/use-services/use-services.ts

@@ -32,67 +32,67 @@ export function useServices({ environmentId, suspense = false }: UseServicesProp
     })),
   })
 
-  const data = useMemo(
-    () =>
-      (services ?? []).map((service, index) => {
-        const runningStatus = runningStatusResults[index].data
-        const deploymentStatus = deploymentStatusResults[index].data
+  const data = useMemo(() => {
+    const nextData = (services ?? []).map((service, index) => {
+      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,
-                },
-              }
-            : {}),
-        }
-      }),
-    [
-      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 {
+        ...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),
+    ]),
+  ])
 
   return {
     data,

libs/domains/services/feature/src/lib/select-commit-modal/__snapshots__/select-commit-modal.spec.tsx.snap

@@ -60,9 +60,9 @@ exports[`SelectCommitModal should match snapshot 1`] = `
               aria-hidden="true"
               class="fa-regular fa-code-commit absolute left-0 top-1 -translate-x-1/2 text-neutral-subtle"
             />
-            Commit
+            Commits
              on 
-            Jan 15, 2024
+            Apr 03, 2026
           </div>
           <div
             class="border-l border-neutral pb-5 pl-5 pt-3"
@@ -96,7 +96,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                   class="text-neutral-subtle"
                 >
                   committed 
-                  2 years
+                  0 seconds
                    ago
                 </span>
               </div>
@@ -150,25 +150,6 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                 </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"
             >
@@ -211,7 +192,7 @@ exports[`SelectCommitModal should match snapshot 1`] = `
                   class="text-neutral-subtle"
                 >
                   committed 
-                  2 years
+                  0 seconds
                    ago
                 </span>
               </div>

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',