fix(deployment-logs): rendering history by service id not all from the environment

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId.tsx

@@ -1,5 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
+import { Suspense } from 'react'
 import { DeploymentLogs } from '@qovery/domains/service-logs/feature'
+import { LoaderPlaceholder } from '@qovery/domains/service-logs/feature'
 
 export const Route = createFileRoute(
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId'
@@ -8,5 +10,15 @@ export const Route = createFileRoute(
 })
 
 function RouteComponent() {
-  return <DeploymentLogs />
+  return (
+    <Suspense
+      fallback={
+        <div className="flex h-[calc(100vh-202px)] w-full flex-col justify-center">
+          <LoaderPlaceholder />
+        </div>
+      }
+    >
+      <DeploymentLogs />
+    </Suspense>
+  )
 }

libs/domains/environment-logs/feature/src/lib/environment-pipeline/environment-pipeline.tsx

@@ -60,8 +60,6 @@ function PipelineContent({
     suspense: true,
   })
 
-  const [hideSkipped, setHideSkipped] = useState<boolean>(true)
-
   if (!environment || !environmentStatus) {
     // Suspend until WS data arrives.
     // The parent Pipeline component will re-render this component once setEnvironmentStatus is called.
@@ -80,8 +78,6 @@ function PipelineContent({
         environmentStatus={environmentStatus}
         deploymentStages={deploymentStages}
         preCheckStage={preCheckStage}
-        hideSkipped={hideSkipped}
-        setHideSkipped={setHideSkipped}
         deploymentHistory={deploymentHistory}
       >
         {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
@@ -90,34 +86,24 @@ function PipelineContent({
             const stageTotalDurationSec = s.stage?.steps?.total_duration_sec ?? 0
             const stageName = s?.stage?.name || ''
 
-            if (hideSkipped && s?.stage?.status === 'SKIPPED') return null
+            if (s?.stage?.status === 'SKIPPED') return null
 
             return (
               <Fragment key={s.stage?.id}>
-                <div
-                  className={clsx(
-                    'h-fit w-60 min-w-60 overflow-hidden rounded border border-neutral bg-surface-neutral',
-                    {
-                      'text-neutral-50': s?.stage?.status !== 'SKIPPED',
-                      'text-neutral-300': s?.stage?.status === 'SKIPPED',
-                    }
-                  )}
-                >
+                <div className="h-fit w-60 min-w-60 overflow-hidden rounded border border-neutral bg-surface-neutral text-neutral">
                   <div className="flex h-[58px] items-center gap-3.5 border-b border-neutral px-3 py-2.5">
                     <Indicator
                       align="end"
                       side="right"
                       content={
-                        s?.stage?.status !== 'SKIPPED' && (
-                          <Tooltip content={upperCaseFirstLetter(deploymentHistory?.trigger_action)}>
-                            <span>
-                              <TriggerActionIcon
-                                triggerAction={deploymentHistory?.trigger_action}
-                                className="relative -left-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-surface-neutral text-xs text-neutral-subtle"
-                              />
-                            </span>
-                          </Tooltip>
-                        )
+                        <Tooltip content={upperCaseFirstLetter(deploymentHistory?.trigger_action)}>
+                          <span>
+                            <TriggerActionIcon
+                              triggerAction={deploymentHistory?.trigger_action}
+                              className="relative -left-0.5 -top-0.5 flex h-4 w-4 items-center justify-center rounded-full bg-surface-neutral text-xs text-neutral-subtle"
+                            />
+                          </span>
+                        </Tooltip>
                       }
                     >
                       <Tooltip content={upperCaseFirstLetter(s.stage?.status)}>
@@ -154,20 +140,23 @@ function PipelineContent({
                         // NOTE: This one is necessary to catch edge case with delete service because we don't have information in the service list and environment status (except their id)
                         const serviceFromDeploymentHistoryId = getServiceFromDeploymentHistoryId(service.id!)
 
-                        if (hideSkipped && !service.is_part_last_deployment) return null
+                        if (!service.is_part_last_deployment) return null
                         if (!fullService)
                           return (
                             <div
                               key={service?.id}
-                              className="bg-neutral flex w-full items-center gap-2.5 rounded border border-neutral px-2.5 py-2"
+                              className="flex w-full items-center gap-2.5 rounded border border-neutral bg-surface-neutral px-2.5 py-2"
                             >
-                              <span className="flex h-8 w-8 items-center justify-center rounded-full border border-neutral text-neutral-250">
+                              <span className="flex h-8 w-8 items-center justify-center rounded-full border border-neutral text-neutral-subtle">
                                 <Icon iconName="trash-can-xmark" iconStyle="solid" />
                               </span>
                               <span className="text-sm">{serviceFromDeploymentHistoryId?.identifier.name}</span>
                             </div>
                           )
 
+                        const serviceItemClassName =
+                          'flex w-full items-center gap-2.5 rounded border border-neutral bg-surface-neutral px-2.5 py-2'
+
                         return (
                           <Link
                             key={service?.id}
@@ -180,20 +169,11 @@ function PipelineContent({
                               executionId: deploymentHistory?.identifier.execution_id ?? '',
                             }}
                             className={clsx(
-                              'flex w-full items-center gap-2.5 rounded border border-neutral bg-surface-neutral px-2.5 py-2 text-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle hover:text-neutral',
-                              {
-                                'text-neutral-300': !service.is_part_last_deployment,
-                              }
+                              serviceItemClassName,
+                              'text-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle hover:text-neutral'
                             )}
                           >
-                            <ServiceAvatar
-                              service={fullService}
-                              border="solid"
-                              size="sm"
-                              className={clsx('border-neutral', {
-                                'opacity-50': !service.is_part_last_deployment,
-                              })}
-                            />
+                            <ServiceAvatar service={fullService} border="solid" size="sm" className="border-neutral" />
                             <span className="flex flex-col gap-0.5 text-sm">
                               <Truncate text={fullService.name} truncateLimit={16} />
                               {serviceTotalDurationSec && (
@@ -202,10 +182,7 @@ function PipelineContent({
                                 </span>
                               )}
                             </span>
-                            <StatusChip
-                              className="ml-auto"
-                              status={!service.is_part_last_deployment ? 'SKIPPED' : service.state}
-                            />
+                            <StatusChip className="ml-auto" status={service.state} />
                           </Link>
                         )
                       })
@@ -220,7 +197,7 @@ function PipelineContent({
                 <div className="mt-4 w-4 last:hidden">
                   <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9" fill="none" viewBox="0 0 17 9">
                     <path
-                      fill="var(--neutral-6)"
+                      className="fill-surface-neutral-component"
                       d="M16.092 4.5L8.592.17v8.66l7.5-4.33zm-16 .75h9.25v-1.5H.092v1.5z"
                     ></path>
                   </svg>

libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.spec.tsx

@@ -75,8 +75,6 @@ describe('EnvironmentStages', () => {
       state: 'RUNNING',
       last_deployment_id: 'exec-1',
     },
-    hideSkipped: false,
-    setHideSkipped: jest.fn(),
     deploymentStages: [],
     preCheckStage: {
       status: 'SUCCESS',
@@ -92,6 +90,7 @@ describe('EnvironmentStages', () => {
   it('renders pre-check stage when preCheckStage is provided', () => {
     renderWithProviders(<EnvironmentStages {...defaultProps} />)
     expect(screen.getByText('Pre-check')).toBeInTheDocument()
+    expect(screen.queryByText('Hide skipped')).not.toBeInTheDocument()
   })
 
   it('renders children when deploymentStages is provided', () => {

libs/domains/environment-logs/feature/src/lib/environment-stages/environment-stages.tsx

@@ -7,13 +7,12 @@ import {
   type EnvironmentStatus,
   type EnvironmentStatusesWithStagesPreCheckStage,
 } from 'qovery-typescript-axios'
-import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react'
+import { type PropsWithChildren } from 'react'
 import { EnvironmentActionToolbar, useDeploymentHistory } from '@qovery/domains/environments/feature'
 import {
   Button,
   DropdownMenu,
   Icon,
-  InputToggle,
   Link,
   LoaderSpinner,
   StageStatusChip,
@@ -27,8 +26,6 @@ import { HeaderEnvironmentStages } from '../header-environment-stages/header-env
 export interface EnvironmentStagesProps extends PropsWithChildren {
   environment: Environment
   environmentStatus: EnvironmentStatus
-  hideSkipped: boolean
-  setHideSkipped: Dispatch<SetStateAction<boolean>>
   deploymentStages?: DeploymentStageWithServicesStatuses[]
   preCheckStage?: EnvironmentStatusesWithStagesPreCheckStage
   deploymentHistory?: DeploymentHistoryEnvironmentV2
@@ -41,8 +38,6 @@ export function EnvironmentStages({
   deploymentStages,
   deploymentHistory,
   preCheckStage,
-  hideSkipped,
-  setHideSkipped,
   banner,
   children,
 }: EnvironmentStagesProps) {
@@ -119,16 +114,6 @@ export function EnvironmentStages({
         </div>
       </HeaderEnvironmentStages>
       <hr className="mb-4 mt-2 w-full border-neutral" />
-      <div className="flex items-center justify-end gap-4 text-sm font-medium text-neutral">
-        <InputToggle
-          name="skipped"
-          value={hideSkipped}
-          onChange={setHideSkipped}
-          small
-          title="Hide skipped"
-          className="flex-row-reverse gap-2"
-        />
-      </div>
       <div className="flex justify-center">
         <div className="relative h-full w-full">
           {banner}

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

@@ -1,8 +1,8 @@
 export * from './lib/list-service-logs/list-service-logs'
 export * from './lib/list-deployment-logs/list-deployment-logs'
 export * from './lib/service-stage-ids-context/service-stage-ids-context'
-export * from './lib/breadcrumb-deployment-history/breadcrumb-deployment-history'
 export * from './lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs'
 export * from './lib/sidebar-pod-statuses/sidebar-pod-statuses'
 export * from './lib/deployment-logs/deployment-logs'
 export * from './lib/deployment-logs/deployment-logs-content/deployment-logs-content'
+export * from './lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder'