fix(deployment-logs): redirect latest version and dark mode modal red…

…eploy (#1788)

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

@@ -15,6 +15,7 @@ describe('EnvironmentStages', () => {
     },
     environmentStatus: {
       state: 'RUNNING',
+      last_deployment_id: 'exec-1',
     },
     hideSkipped: false,
     setHideSkipped: jest.fn(),
@@ -54,7 +55,7 @@ describe('EnvironmentStages', () => {
     const logLink = screen.getByText('Pre-check logs').closest('a')
     expect(logLink).toHaveAttribute(
       'href',
-      ENVIRONMENT_LOGS_URL('org-1', 'proj-1', 'env-1') + ENVIRONMENT_PRE_CHECK_LOGS_URL()
+      ENVIRONMENT_LOGS_URL('org-1', 'proj-1', 'env-1') + ENVIRONMENT_PRE_CHECK_LOGS_URL('exec-1')
     )
   })
 })

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

@@ -32,7 +32,7 @@ export function EnvironmentStages({
   setHideSkipped,
   children,
 }: EnvironmentStagesProps) {
-  const executionId = environmentStatus.last_deployment_id ?? undefined
+  const executionId = environmentStatus.last_deployment_id
 
   return (
     <div className="h-[calc(100vh-64px)] w-[calc(100vw-64px)] p-1">
@@ -75,21 +75,26 @@ export function EnvironmentStages({
                           </span>
                         </div>
                       </div>
-                      <div className="flex flex-col gap-1.5 bg-neutral-800 p-1.5">
-                        <NavLink
-                          to={
-                            ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
-                            ENVIRONMENT_PRE_CHECK_LOGS_URL(executionId)
-                          }
-                          className="flex w-full items-center gap-2.5 rounded border border-neutral-400 bg-neutral-550 px-2.5 py-2 hover:border-brand-400"
-                        >
-                          <span className="flex h-8 w-8 items-center justify-center rounded-full border border-neutral-400 text-neutral-250">
-                            <Icon iconName="list-check" iconStyle="solid" />
-                          </span>
-                          <span className="text-sm">Pre-check logs</span>
-                          <StatusChip className="ml-auto" status={preCheckStage.status} />
-                        </NavLink>
-                      </div>
+                      {executionId && (
+                        <div className="flex flex-col gap-1.5 bg-neutral-800 p-1.5">
+                          <NavLink
+                            to={
+                              ENVIRONMENT_LOGS_URL(
+                                environment.organization.id,
+                                environment.project.id,
+                                environment.id
+                              ) + ENVIRONMENT_PRE_CHECK_LOGS_URL(executionId)
+                            }
+                            className="flex w-full items-center gap-2.5 rounded border border-neutral-400 bg-neutral-550 px-2.5 py-2 hover:border-brand-400"
+                          >
+                            <span className="flex h-8 w-8 items-center justify-center rounded-full border border-neutral-400 text-neutral-250">
+                              <Icon iconName="list-check" iconStyle="solid" />
+                            </span>
+                            <span className="text-sm">Pre-check logs</span>
+                            <StatusChip className="ml-auto" status={preCheckStage.status} />
+                          </NavLink>
+                        </div>
+                      )}
                     </div>
                     <div className="mt-4 w-4">
                       <svg xmlns="http://www.w3.org/2000/svg" width="17" height="9" fill="none" viewBox="0 0 17 9">

libs/domains/service-logs/feature/src/lib/deployment-logs-placeholder/deployment-logs-placeholder.spec.tsx

@@ -22,14 +22,14 @@ describe('DeploymentLogsPlaceholder', () => {
   const props: DeploymentLogsPlaceholderProps = {
     serviceStatus: undefined,
     itemsLength: 0,
-    deploymentHistoryEnvironment: [],
+    environmentDeploymentHistory: [],
   }
 
   it('should render deployment history', () => {
     renderWithProviders(
       <DeploymentLogsPlaceholder
         itemsLength={1}
-        deploymentHistoryEnvironment={[
+        environmentDeploymentHistory={[
           {
             identifier: {
               execution_id: 'exec-1',
@@ -98,7 +98,7 @@ describe('DeploymentLogsPlaceholder', () => {
     renderWithProviders(
       <DeploymentLogsPlaceholder
         itemsLength={0}
-        deploymentHistoryEnvironment={[]}
+        environmentDeploymentHistory={[]}
         serviceStatus={{
           id: '0',
           state: 'DEPLOYED',

libs/domains/service-logs/feature/src/lib/deployment-logs-placeholder/deployment-logs-placeholder.tsx

@@ -73,13 +73,13 @@ function DeploymentHistoryPlaceholder({
 export interface DeploymentLogsPlaceholderProps {
   serviceStatus?: Status
   itemsLength?: number
-  deploymentHistoryEnvironment?: DeploymentHistoryEnvironmentV2[]
+  environmentDeploymentHistory?: DeploymentHistoryEnvironmentV2[]
 }
 
 export function DeploymentLogsPlaceholder({
   serviceStatus,
   itemsLength,
-  deploymentHistoryEnvironment,
+  environmentDeploymentHistory,
 }: DeploymentLogsPlaceholderProps) {
   const { environmentId = '', serviceId = '' } = useParams()
 
@@ -105,7 +105,7 @@ export function DeploymentLogsPlaceholder({
     )
     .otherwise(() => false)
 
-  const deploymentsByServiceId = mergeDeploymentServices(deploymentHistoryEnvironment).filter(
+  const deploymentsByServiceId = mergeDeploymentServices(environmentDeploymentHistory).filter(
     (deploymentHistory) => deploymentHistory.identifier.service_id === serviceId
   )
 

libs/domains/service-logs/feature/src/lib/hooks/use-deployment-logs/use-deployment-logs.ts

@@ -6,6 +6,7 @@ import { useEnvironment } from '@qovery/domains/environments/feature'
 import { QOVERY_WS } from '@qovery/shared/util-node-env'
 import { useReactQueryWsSubscription } from '@qovery/state/util-queries'
 import { ServiceStageIdsContext } from '../../service-stage-ids-context/service-stage-ids-context'
+import { useDeploymentHistory } from '../use-deployment-history/use-deployment-history'
 
 export interface UseDeploymentLogsProps {
   organizationId?: string
@@ -31,6 +32,7 @@ export function useDeploymentLogs({
   versionId,
 }: UseDeploymentLogsProps) {
   const { hash } = useLocation()
+  const { data: deploymentHistory = [] } = useDeploymentHistory({ environmentId: environmentId ?? '' })
   const { data: environment } = useEnvironment({ environmentId })
 
   // States for controlling log actions, showing new, previous or paused logs
@@ -60,14 +62,17 @@ export function useDeploymentLogs({
     [setMessageChunks]
   )
 
+  // XXX: If we don't have a version, it works like WS otherwise, it works like a REST API
+  const isLatestVersion = deploymentHistory[0]?.identifier.execution_id === versionId
+
   useReactQueryWsSubscription({
     url: QOVERY_WS + '/deployment/logs',
     urlSearchParams: {
       organization: organizationId,
       cluster: environment?.cluster_id,
       project: projectId,
       environment: environmentId,
-      version: versionId,
+      version: isLatestVersion ? undefined : versionId,
     },
     enabled:
       Boolean(organizationId) && Boolean(environment?.cluster_id) && Boolean(projectId) && Boolean(environmentId),

libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.spec.tsx

@@ -21,17 +21,22 @@ jest.mock('react-router-dom', () => ({
   }),
 }))
 
+jest.mock('../hooks/use-deployment-history/use-deployment-history', () => ({
+  ...jest.requireActual('../hooks/use-deployment-history/use-deployment-history'),
+  useDeploymentHistory: () => ({
+    data: [
+      {
+        identifier: {
+          execution_id: '4',
+        },
+      },
+    ],
+  }),
+}))
+
 describe('ListDeploymentLogs', () => {
   const mockEnvironment = environmentFactoryMock(1)[0]
 
-  const mockDeploymentHistoryEnvironment: DeploymentHistoryEnvironmentV2[] = [
-    {
-      identifier: {
-        execution_id: '4',
-      },
-    },
-  ]
-
   const mockServiceStatus: Status = {
     id: '111',
     state: 'DELETE_ERROR',
@@ -120,35 +125,21 @@ describe('ListDeploymentLogs', () => {
 
   it('should render successfully', () => {
     const { baseElement } = renderWithProviders(
-      <ListDeploymentLogs
-        environment={mockEnvironment}
-        deploymentHistoryEnvironment={mockDeploymentHistoryEnvironment}
-        serviceStatus={mockServiceStatus}
-      />
+      <ListDeploymentLogs environment={mockEnvironment} serviceStatus={mockServiceStatus} />
     )
     expect(baseElement).toBeTruthy()
   })
 
   it('should display logs', () => {
-    renderWithProviders(
-      <ListDeploymentLogs
-        environment={mockEnvironment}
-        deploymentHistoryEnvironment={mockDeploymentHistoryEnvironment}
-        serviceStatus={mockServiceStatus}
-      />
-    )
+    renderWithProviders(<ListDeploymentLogs environment={mockEnvironment} serviceStatus={mockServiceStatus} />)
 
     expect(screen.getByText('Log 1')).toBeInTheDocument()
     expect(screen.getByText('Log 2')).toBeInTheDocument()
   })
 
   it('should filter logs by stage step', async () => {
     const { userEvent } = renderWithProviders(
-      <ListDeploymentLogs
-        environment={mockEnvironment}
-        deploymentHistoryEnvironment={mockDeploymentHistoryEnvironment}
-        serviceStatus={mockServiceStatus}
-      />
+      <ListDeploymentLogs environment={mockEnvironment} serviceStatus={mockServiceStatus} />
     )
 
     const buildButton = screen.getByRole('button', { name: /build/i })
@@ -165,13 +156,7 @@ describe('ListDeploymentLogs', () => {
       data: { state: 'BUILDING' },
     })
 
-    renderWithProviders(
-      <ListDeploymentLogs
-        environment={mockEnvironment}
-        deploymentHistoryEnvironment={mockDeploymentHistoryEnvironment}
-        serviceStatus={mockServiceStatus}
-      />
-    )
+    renderWithProviders(<ListDeploymentLogs environment={mockEnvironment} serviceStatus={mockServiceStatus} />)
 
     expect(screen.getByText('Streaming deployment logs')).toBeInTheDocument()
   })

libs/domains/service-logs/feature/src/lib/list-deployment-logs/list-deployment-logs.tsx

@@ -7,13 +7,7 @@ import {
   useReactTable,
 } from '@tanstack/react-table'
 import download from 'downloadjs'
-import {
-  type DeploymentHistoryEnvironmentV2,
-  type Environment,
-  type EnvironmentStatus,
-  type Stage,
-  type Status,
-} from 'qovery-typescript-axios'
+import { type Environment, type EnvironmentStatus, type Stage, type Status } from 'qovery-typescript-axios'
 import { memo, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { useLocation, useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
@@ -22,6 +16,7 @@ import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_STAGES_URL, SERVICE_LOGS_URL } from '
 import { Button, Icon, Indicator, Link, TablePrimitives } from '@qovery/shared/ui'
 import { DeploymentLogsPlaceholder } from '../deployment-logs-placeholder/deployment-logs-placeholder'
 import HeaderLogs from '../header-logs/header-logs'
+import { useDeploymentHistory } from '../hooks/use-deployment-history/use-deployment-history'
 import { type EnvironmentLogIds, useDeploymentLogs } from '../hooks/use-deployment-logs/use-deployment-logs'
 import { ProgressIndicator } from '../progress-indicator/progress-indicator'
 import { ServiceStageIdsContext } from '../service-stage-ids-context/service-stage-ids-context'
@@ -126,19 +121,12 @@ const getFilterStep = (step: EnvironmentEngineStep): FilterType =>
 
 export interface ListDeploymentLogsProps {
   environment: Environment
-  deploymentHistoryEnvironment: DeploymentHistoryEnvironmentV2[]
   serviceStatus: Status
   stage?: Stage
   environmentStatus?: EnvironmentStatus
 }
 
-export function ListDeploymentLogs({
-  environment,
-  deploymentHistoryEnvironment,
-  environmentStatus,
-  serviceStatus,
-  stage,
-}: ListDeploymentLogsProps) {
+export function ListDeploymentLogs({ environment, environmentStatus, serviceStatus, stage }: ListDeploymentLogsProps) {
   const { hash } = useLocation()
   const { organizationId, projectId, serviceId, versionId } = useParams()
   const refScrollSection = useRef<HTMLDivElement>(null)
@@ -150,6 +138,7 @@ export function ListDeploymentLogs({
 
   const { data: service } = useService({ environmentId: environment.id, serviceId })
   const { data: deploymentStatus } = useDeploymentStatus({ environmentId: environment.id, serviceId })
+  const { data: environmentDeploymentHistory = [] } = useDeploymentHistory({ environmentId: environment.id })
   const {
     data: logs = [],
     pauseLogs,
@@ -272,7 +261,7 @@ export function ListDeploymentLogs({
     [columnFilters]
   )
 
-  const isLastVersion = deploymentHistoryEnvironment?.[0]?.identifier.execution_id === versionId || !versionId
+  const isLastVersion = environmentDeploymentHistory?.[0]?.identifier.execution_id === versionId || !versionId
   const isDeploymentProgressing = isLastVersion
     ? match(deploymentStatus?.state)
         .with(
@@ -302,8 +291,8 @@ export function ListDeploymentLogs({
         environmentStatus={environmentStatus}
         deploymentHistory={
           versionId
-            ? deploymentHistoryEnvironment.find((d) => d.identifier.execution_id === versionId)
-            : deploymentHistoryEnvironment[0]
+            ? environmentDeploymentHistory.find((d) => d.identifier.execution_id === versionId)
+            : environmentDeploymentHistory[0]
         }
       >
         <div className="flex items-center gap-4">
@@ -365,7 +354,7 @@ export function ListDeploymentLogs({
             <DeploymentLogsPlaceholder
               serviceStatus={serviceStatus}
               itemsLength={logs.length}
-              deploymentHistoryEnvironment={deploymentHistoryEnvironment}
+              environmentDeploymentHistory={environmentDeploymentHistory}
             />
           </div>
         </div>
@@ -426,11 +415,13 @@ export function ListDeploymentLogs({
             <ProgressIndicator className="mb-2 pl-2" pauseLogs={pauseLogs} message="Streaming deployment logs" />
           )}
         </div>
-        <ShowNewLogsButton
-          pauseLogs={pauseLogs}
-          setPauseLogs={setPauseLogs}
-          newMessagesAvailable={newMessagesAvailable}
-        />
+        {isLastVersion && (
+          <ShowNewLogsButton
+            pauseLogs={pauseLogs}
+            setPauseLogs={setPauseLogs}
+            newMessagesAvailable={newMessagesAvailable}
+          />
+        )}
       </div>
     </div>
   )

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

@@ -33,12 +33,12 @@ exports[`RedeployModal should match snapshot 1`] = `
               value="redeploy"
             />
             <label
-              class="font-medium leading-5 text-neutral-400 text-ssm"
+              class="font-medium leading-5 text-neutral-400 dark:text-neutral-50 text-ssm"
               for="redeploy"
             >
               Redeploy
               <p
-                class="mt-1 text-xs font-normal text-neutral-350"
+                class="mt-1 text-xs font-normal text-neutral-350 dark:text-neutral-50"
               >
                 This action will not restart your service but it will allow to align again your configuration with your cluster.
               </p>
@@ -55,12 +55,12 @@ exports[`RedeployModal should match snapshot 1`] = `
               value="restart"
             />
             <label
-              class="font-medium leading-5 text-neutral-400 text-ssm"
+              class="font-medium leading-5 text-neutral-400 dark:text-neutral-50 text-ssm"
               for="restart"
             >
               Restart service
               <p
-                class="mt-1 text-xs font-normal text-neutral-350"
+                class="mt-1 text-xs font-normal text-neutral-350 dark:text-neutral-50"
               >
                 To restart the pods of your service.
               </p>