feat(environment): add version dropdown to env deployment details view

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

@@ -242,7 +242,7 @@ function Loading() {
         to="/organization/$organizationId/project/$projectId/environment/$environmentId/deployments"
         params={{ organizationId, projectId, environmentId }}
         color="neutral"
-        className="flex gap-2 text-neutral-subtle"
+        className="gap-1.5 text-neutral-subtle hover:text-neutral"
       >
         <Icon iconName="arrow-left" />
         Deployment history

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

@@ -2,6 +2,59 @@ import { type ReactNode } from 'react'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { EnvironmentStages, type EnvironmentStagesProps } from './environment-stages'
 
+const mockDeploymentHistory = [
+  {
+    identifier: {
+      execution_id: 'exec-123',
+    },
+    status: 'DEPLOYED',
+    action_status: 'SUCCESS',
+    trigger_action: 'DEPLOY',
+    total_duration: 'PT60M',
+    stages: [
+      {
+        name: 'build',
+        status: 'SUCCESS',
+        duration: 'PT60M',
+        services: [
+          {
+            identifier: {
+              name: 'web-service',
+              service_id: 'service-123',
+              execution_id: 'exec-123',
+              service_type: 'APPLICATION',
+            },
+            status_details: {
+              status: 'SUCCESS',
+            },
+            total_duration: 'PT60M',
+            auditing_data: {
+              created_at: '2024-01-30T12:00:00Z',
+              updated_at: '2024-01-30T12:01:00Z',
+              origin: 'CONSOLE',
+              triggered_by: 'User',
+            },
+          },
+        ],
+      },
+    ],
+    auditing_data: {
+      created_at: '2024-01-30T12:00:00Z',
+      updated_at: '2024-01-30T12:01:00Z',
+      origin: 'CONSOLE',
+      triggered_by: 'User',
+    },
+  },
+]
+
+jest.mock('@qovery/domains/environments/feature', () => ({
+  ...jest.requireActual('@qovery/domains/environments/feature'),
+  useDeploymentHistory: () => ({
+    data: mockDeploymentHistory,
+    isFetched: true,
+  }),
+}))
+
 jest.mock('@tanstack/react-router', () => ({
   useParams: () => ({ organizationId: 'org-1', projectId: 'proj-1', environmentId: 'env-1' }),
   Link: ({ children, ...props }: { children: ReactNode }) => <a {...props}>{children}</a>,

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

@@ -1,4 +1,5 @@
 import { useParams } from '@tanstack/react-router'
+import clsx from 'clsx'
 import {
   type DeploymentHistoryEnvironmentV2,
   type DeploymentStageWithServicesStatuses,
@@ -7,10 +8,20 @@ import {
   type EnvironmentStatusesWithStagesPreCheckStage,
 } from 'qovery-typescript-axios'
 import { type Dispatch, type PropsWithChildren, type SetStateAction } from 'react'
-import { EnvironmentActionToolbar } from '@qovery/domains/environments/feature'
-import { ENVIRONMENT_LOGS_URL, ENVIRONMENT_PRE_CHECK_LOGS_URL } from '@qovery/shared/routes'
-import { Icon, InputToggle, Link, LoaderSpinner, StageStatusChip, StatusChip, Tooltip } from '@qovery/shared/ui'
-import { upperCaseFirstLetter } from '@qovery/shared/util-js'
+import { EnvironmentActionToolbar, useDeploymentHistory } from '@qovery/domains/environments/feature'
+import {
+  Button,
+  DropdownMenu,
+  Icon,
+  InputToggle,
+  Link,
+  LoaderSpinner,
+  StageStatusChip,
+  StatusChip,
+  Tooltip,
+} from '@qovery/shared/ui'
+import { dateYearMonthDayHourMinuteSecond } from '@qovery/shared/util-dates'
+import { trimId, upperCaseFirstLetter } from '@qovery/shared/util-js'
 import { HeaderEnvironmentStages } from '../header-environment-stages/header-environment-stages'
 
 export interface EnvironmentStagesProps extends PropsWithChildren {
@@ -35,8 +46,14 @@ export function EnvironmentStages({
   banner,
   children,
 }: EnvironmentStagesProps) {
-  const { organizationId, projectId, environmentId } = useParams({ strict: false })
+  const { organizationId, projectId, environmentId, deploymentId } = useParams({ strict: false })
   const executionId = environmentStatus.last_deployment_id
+  const { data: environmentDeploymentHistory = [] } = useDeploymentHistory({
+    environmentId: environment.id,
+    suspense: true,
+  })
+  const currentDeploymentHistory = environmentDeploymentHistory.find((d) => d.identifier.execution_id === deploymentId)
+  const isLastVersion = environmentDeploymentHistory?.[0]?.identifier.execution_id === deploymentId || !deploymentId
 
   return (
     <div className="h-full">
@@ -46,36 +63,76 @@ export function EnvironmentStages({
             to="/organization/$organizationId/project/$projectId/environment/$environmentId/deployments"
             params={{ organizationId, projectId, environmentId }}
             color="neutral"
-            className="flex gap-2 text-neutral-subtle"
+            className="gap-1.5 text-neutral-subtle hover:text-neutral"
           >
             <Icon iconName="arrow-left" />
             Deployment history
           </Link>
         </div>
       </div>
-      <HeaderEnvironmentStages
-        environment={environment}
-        environmentStatus={environmentStatus}
-        deploymentHistory={deploymentHistory}
-      >
-        <div className="flex items-center 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"
-          />
+      <HeaderEnvironmentStages environmentStatus={environmentStatus} deploymentHistory={deploymentHistory}>
+        <div className="flex items-center gap-2">
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger asChild>
+              <Button variant="outline" className="gap-1.5" size="md">
+                <Icon iconName="clock-rotate-left" className="text-neutral-subtle" />
+                {isLastVersion
+                  ? 'Latest'
+                  : dateYearMonthDayHourMinuteSecond(
+                      new Date(currentDeploymentHistory?.auditing_data.created_at ?? '')
+                    )}
+                <Icon iconName="angle-down" />
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content align="end" className="z-dropdown max-h-96 w-80 overflow-y-auto">
+              {environmentDeploymentHistory.map((deployment) => (
+                <DropdownMenu.Item
+                  asChild
+                  key={deployment.identifier.execution_id}
+                  className={clsx('min-h-9', {
+                    'bg-surface-brand-component': deployment.identifier.execution_id === deploymentId,
+                  })}
+                >
+                  <Link
+                    className="flex w-full justify-between"
+                    to="/organization/$organizationId/project/$projectId/environment/$environmentId/deployment/$deploymentId"
+                    params={{
+                      organizationId,
+                      projectId,
+                      environmentId: environment.id,
+                      deploymentId: deployment.identifier.execution_id,
+                    }}
+                  >
+                    <Tooltip content={deployment.identifier.execution_id}>
+                      <span>{trimId(deployment.identifier.execution_id ?? '')}</span>
+                    </Tooltip>
+                    <span className="flex items-center gap-2.5 text-xs text-neutral-subtle">
+                      {dateYearMonthDayHourMinuteSecond(new Date(deployment.auditing_data.created_at))}
+                      <StatusChip status={deployment.status} />
+                    </span>
+                  </Link>
+                </DropdownMenu.Item>
+              ))}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
           <EnvironmentActionToolbar variant="header" environment={environment} />
         </div>
       </HeaderEnvironmentStages>
-      <hr className="mt-2 w-full border-neutral" />
-
+      <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}
-          <div className="scroll-shadow flex h-full gap-0.5 overflow-x-auto py-6">
+          <div className="scroll-shadow flex h-full gap-0.5 overflow-x-auto py-4">
             {!deploymentStages ? (
               <div className="mt-6 flex h-full w-full justify-center">
                 <LoaderSpinner className="h-6 w-6" />

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

@@ -1,6 +1,72 @@
+import { type ReactNode } from 'react'
 import { renderWithProviders, screen } from '@qovery/shared/util-tests'
 import { HeaderEnvironmentStages, type HeaderEnvironmentStagesProps } from './header-environment-stages'
 
+const mockDeploymentHistory = [
+  {
+    identifier: {
+      execution_id: 'exec-123',
+    },
+    status: 'DEPLOYED',
+    action_status: 'SUCCESS',
+    trigger_action: 'DEPLOY',
+    total_duration: 'PT60M',
+    stages: [
+      {
+        name: 'build',
+        status: 'SUCCESS',
+        duration: 'PT60M',
+        services: [
+          {
+            identifier: {
+              name: 'web-service',
+              service_id: 'service-123',
+              execution_id: 'exec-123',
+              service_type: 'APPLICATION',
+            },
+            status_details: {
+              status: 'SUCCESS',
+            },
+            total_duration: 'PT60M',
+            auditing_data: {
+              created_at: '2024-01-30T12:00:00Z',
+              updated_at: '2024-01-30T12:01:00Z',
+              origin: 'CONSOLE',
+              triggered_by: 'User',
+            },
+          },
+        ],
+      },
+    ],
+    auditing_data: {
+      created_at: '2024-01-30T12:00:00Z',
+      updated_at: '2024-01-30T12:01:00Z',
+      origin: 'CONSOLE',
+      triggered_by: 'User',
+    },
+  },
+]
+
+jest.mock('@qovery/domains/environments/feature', () => ({
+  ...jest.requireActual('@qovery/domains/environments/feature'),
+  useDeploymentHistory: () => ({
+    data: mockDeploymentHistory,
+    isFetched: true,
+  }),
+}))
+
+jest.mock('@tanstack/react-router', () => ({
+  ...jest.requireActual('@tanstack/react-router'),
+  Link: ({ children, ...props }: { children?: ReactNode; [key: string]: unknown }) => <a {...props}>{children}</a>,
+  useParams: () => ({
+    organizationId: '0',
+    projectId: '1',
+    environmentId: '2',
+    serviceId: '3',
+    versionId: '4',
+  }),
+}))
+
 describe('HeaderEnvironmentStages', () => {
   const defaultProps: HeaderEnvironmentStagesProps = {
     environment: {

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

@@ -1,21 +1,21 @@
+import { useParams } from '@tanstack/react-router'
 import clsx from 'clsx'
-import { type DeploymentHistoryEnvironmentV2, type Environment, type EnvironmentStatus } from 'qovery-typescript-axios'
+import { type DeploymentHistoryEnvironmentV2, type EnvironmentStatus } from 'qovery-typescript-axios'
 import { type PropsWithChildren } from 'react'
-import { Badge, DeploymentAction, Icon, StatusChip } from '@qovery/shared/ui'
-import { dateUTCString } from '@qovery/shared/util-dates'
+import { Badge, DeploymentAction, Icon, StatusChip, Tooltip } from '@qovery/shared/ui'
+import { trimId } from '@qovery/shared/util-js'
 
 export interface HeaderEnvironmentStagesProps extends PropsWithChildren {
-  environment: Environment
   environmentStatus: EnvironmentStatus
   deploymentHistory?: DeploymentHistoryEnvironmentV2
 }
 
 export function HeaderEnvironmentStages({
-  environment,
   environmentStatus,
   deploymentHistory,
   children,
 }: HeaderEnvironmentStagesProps) {
+  const { deploymentId } = useParams({ strict: false })
   const totalDurationSec = environmentStatus?.total_deployment_duration_in_seconds ?? 0
 
   return (
@@ -32,7 +32,7 @@ export function HeaderEnvironmentStages({
               className="gap-3 text-2xl"
               iconClassName="text-neutral-subtle"
             />
-            <StatusChip status={environmentStatus.state} className="h-5 w-5" />
+            <StatusChip status={deploymentHistory?.status} className="h-5 w-5" />
           </div>
 
           <svg width="1" height="16" viewBox="0 0 1 16" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -41,18 +41,20 @@ export function HeaderEnvironmentStages({
 
           {environmentStatus?.state !== 'DEPLOYING' && (
             <div className="flex items-center gap-2">
-              <Badge variant="surface" className="max-w-full whitespace-nowrap">
-                <span className="flex items-center gap-1.5">
-                  <Icon iconName="calendar-day" className="text-xs text-neutral-subtle" />
-                  {dateUTCString(environmentStatus.last_deployment_date ?? '')}
-                </span>
-              </Badge>
               <Badge variant="surface" className="max-w-full whitespace-nowrap">
                 <span className="flex items-center gap-1.5">
                   <Icon iconName="stopwatch" iconStyle="regular" className="text-xs text-neutral-subtle" />
                   {Math.floor(totalDurationSec / 60)}m : {totalDurationSec % 60}s
                 </span>
               </Badge>
+              <Badge variant="surface" className="max-w-full whitespace-nowrap">
+                <Tooltip side="bottom" content={<span>Execution id: {deploymentId}</span>}>
+                  <span className="flex items-center gap-1.5 truncate">
+                    <Icon iconName="code" iconStyle="regular" className="text-xs text-neutral-subtle" />
+                    <span className="font-normal text-neutral">{trimId(deploymentId ?? '')}</span>
+                  </span>
+                </Tooltip>
+              </Badge>
             </div>
           )}
         </div>