feat(new-nav): add deployment history for envs

apps/console-v5/src/app/components/header/breadcrumbs/breadcrumbs.tsx

@@ -1,6 +1,7 @@
 import { useParams, useRouter } from '@tanstack/react-router'
 import { useMemo } from 'react'
 import { ClusterAvatar, useClusters } from '@qovery/domains/clusters/feature'
+import { EnvironmentMode, useEnvironments } from '@qovery/domains/environments/feature'
 import { useOrganization, useOrganizations } from '@qovery/domains/organizations/feature'
 import { useProjects } from '@qovery/domains/projects/feature'
 import { Avatar } from '@qovery/shared/ui'
@@ -9,7 +10,7 @@ import { BreadcrumbItem, type BreadcrumbItemData } from './breadcrumb-item'
 
 export function Breadcrumbs() {
   const { buildLocation } = useRouter()
-  const { organizationId = '', clusterId = '', projectId = '' } = useParams({ strict: false })
+  const { organizationId = '', clusterId = '', projectId = '', environmentId = '' } = useParams({ strict: false })
 
   const { data: organizations = [] } = useOrganizations({
     enabled: true,
@@ -18,6 +19,7 @@ export function Breadcrumbs() {
   const { data: organization } = useOrganization({ organizationId, enabled: !!organizationId, suspense: true })
   const { data: clusters = [] } = useClusters({ organizationId, suspense: true })
   const { data: projects = [] } = useProjects({ organizationId, suspense: true })
+  const { data: environments = [] } = useEnvironments({ projectId, suspense: true })
 
   // Necessary to keep the organization from client by Qovery team
   const allOrganizations =
@@ -59,6 +61,18 @@ export function Breadcrumbs() {
       }).href,
     }))
 
+  const environmentItems: BreadcrumbItemData[] = environments
+    .sort((a, b) => a.name.trim().localeCompare(b.name.trim()))
+    .map((environment) => ({
+      id: environment.id,
+      label: environment.name,
+      prefix: <EnvironmentMode mode={environment.mode} variant="shrink" />,
+      path: buildLocation({
+        to: '/organization/$organizationId/project/$projectId/environment/$environmentId/overview',
+        params: { organizationId, projectId: environment.project.id, environmentId: environment.id },
+      }).href,
+    }))
+
   const currentCluster = useMemo(
     () => clusterItems.find((cluster) => cluster.id === clusterId),
     [clusterId, clusterItems]
@@ -69,6 +83,11 @@ export function Breadcrumbs() {
     [projectId, projectItems]
   )
 
+  const currentEnvironment = useMemo(
+    () => environmentItems.find((environment) => environment.id === environmentId),
+    [environmentId, environmentItems]
+  )
+
   const breadcrumbData: Array<{ item: BreadcrumbItemData; items: BreadcrumbItemData[] }> = []
 
   if (currentOrg) {
@@ -106,6 +125,13 @@ export function Breadcrumbs() {
     })
   }
 
+  if (currentEnvironment) {
+    breadcrumbData.push({
+      item: currentEnvironment,
+      items: environmentItems,
+    })
+  }
+
   return (
     <div className="flex items-center gap-2">
       {breadcrumbData.map((data, index) => (

apps/console-v5/src/app/components/header/header.tsx

@@ -22,9 +22,7 @@ export function Header() {
       <div className="flex items-center gap-4">
         <LogoIcon />
         <Separator />
-        {/* <Suspense fallback={<div>Loading...</div>}> */}
         <Breadcrumbs />
-        {/* </Suspense> */}
         <div className="ml-auto flex items-center gap-3">
           <SpotlightTrigger />
           <UserMenu />

apps/console-v5/src/routeTree.gen.ts

@@ -40,6 +40,7 @@ import { Route as AuthenticatedOrganizationOrganizationIdClusterNewRouteImport }
 import { Route as AuthenticatedOrganizationOrganizationIdClustersRouteImport } from './routes/_authenticated/organization/$organizationId/clusters'
 import { Route as AuthenticatedOrganizationOrganizationIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/index'
 import { Route as AuthenticatedOrganizationOrganizationIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/overview'
+import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/index'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
 import { Route as AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsDangerZoneRouteImport } from './routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings/danger-zone'
@@ -470,6 +471,12 @@ const AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironm
     path: '/project/$projectId/environment/$environmentId/overview',
     getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
   } as any)
+const AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute =
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRouteImport.update({
+    id: '/project/$projectId/environment/$environmentId/deployments',
+    path: '/project/$projectId/environment/$environmentId/deployments',
+    getParentRoute: () => AuthenticatedOrganizationOrganizationIdRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRoute =
   AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRouteImport.update({
     id: '/project/$projectId/environment/$environmentId/settings',
@@ -581,6 +588,7 @@ export interface FileRoutesByFullPath {
   '/organization/$organizationId/cluster/create/$slug/': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute
   '/organization/$organizationId/project/$projectId/settings/': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId/settings': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRouteWithChildren
+  '/organization/$organizationId/project/$projectId/environment/$environmentId/deployments': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId/overview': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId/variables': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdVariablesRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute
@@ -647,6 +655,7 @@ export interface FileRoutesByTo {
   '/organization/$organizationId/cluster/$clusterId/settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsIndexRoute
   '/organization/$organizationId/cluster/create/$slug': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute
   '/organization/$organizationId/project/$projectId/settings': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRoute
+  '/organization/$organizationId/project/$projectId/environment/$environmentId/deployments': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId/overview': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId/variables': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdVariablesRoute
   '/organization/$organizationId/project/$projectId/environment/$environmentId': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute
@@ -723,6 +732,7 @@ export interface FileRoutesById {
   '/_authenticated/organization/$organizationId/cluster/create/$slug/': typeof AuthenticatedOrganizationOrganizationIdClusterCreateSlugIndexRoute
   '/_authenticated/organization/$organizationId/project/$projectId/settings/': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdSettingsIndexRoute
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRouteWithChildren
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdVariablesRoute
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/': typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute
@@ -799,6 +809,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/cluster/create/$slug/'
     | '/organization/$organizationId/project/$projectId/settings/'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId/settings'
+    | '/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId/variables'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId'
@@ -865,6 +876,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/cluster/$clusterId/settings'
     | '/organization/$organizationId/cluster/create/$slug'
     | '/organization/$organizationId/project/$projectId/settings'
+    | '/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId/variables'
     | '/organization/$organizationId/project/$projectId/environment/$environmentId'
@@ -940,6 +952,7 @@ export interface FileRouteTypes {
     | '/_authenticated/organization/$organizationId/cluster/create/$slug/'
     | '/_authenticated/organization/$organizationId/project/$projectId/settings/'
     | '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings'
+    | '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
     | '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
     | '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/variables'
     | '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/'
@@ -1428,6 +1441,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRouteImport
       parentRoute: typeof AuthenticatedOrganizationOrganizationIdRouteRoute
     }
+    '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments': {
+      id: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
+      path: '/project/$projectId/environment/$environmentId/deployments'
+      fullPath: '/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
+      preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRouteImport
+      parentRoute: typeof AuthenticatedOrganizationOrganizationIdRouteRoute
+    }
     '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings': {
       id: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings'
       path: '/project/$projectId/environment/$environmentId/settings'
@@ -1685,6 +1705,7 @@ interface AuthenticatedOrganizationOrganizationIdRouteRouteChildren {
   AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute
   AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute
   AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRouteWithChildren
+  AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute
   AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute
   AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdVariablesRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdVariablesRoute
   AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdIndexRoute
@@ -1723,6 +1744,8 @@ const AuthenticatedOrganizationOrganizationIdRouteRouteChildren: AuthenticatedOr
       AuthenticatedOrganizationOrganizationIdProjectProjectIdIndexRoute,
     AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRoute:
       AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdSettingsRouteRouteWithChildren,
+    AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute:
+      AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdDeploymentsRoute,
     AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute:
       AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdOverviewRoute,
     AuthenticatedOrganizationOrganizationIdProjectProjectIdEnvironmentEnvironmentIdVariablesRoute:

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

@@ -0,0 +1,31 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { EnvironmentDeploymentListSkeleton } from '@qovery/domains/environments/feature'
+import { EnvironmentDeploymentList } from '@qovery/domains/environments/feature'
+import { Heading, Section } from '@qovery/shared/ui'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return (
+    <div className="container mx-auto flex min-h-page-container flex-col pt-6">
+      <Section className="min-h-0 flex-1 gap-8">
+        <div className="flex shrink-0 flex-col gap-6">
+          <div className="flex justify-between">
+            <Heading>Deployments</Heading>
+          </div>
+          <hr className="w-full border-neutral" />
+        </div>
+        <div className="flex min-h-0 flex-1 flex-col gap-8 pb-20">
+          <Suspense fallback={<EnvironmentDeploymentListSkeleton />}>
+            <EnvironmentDeploymentList />
+          </Suspense>
+        </div>
+      </Section>
+    </div>
+  )
+}

apps/console-v5/src/routes/_authenticated/organization/route.tsx

@@ -114,6 +114,12 @@ const ENVIRONMENT_TABS: NavigationTab[] = [
     iconName: 'table-layout',
     routeId: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview',
   },
+  {
+    id: 'deployments',
+    label: 'Deployments',
+    iconName: 'rocket',
+    routeId: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/deployments',
+  },
   {
     id: 'variables',
     label: 'Variables',

libs/domains/environments/feature/src/index.ts

@@ -40,3 +40,4 @@ export * from './lib/settings-deployment-rules/settings-deployment-rules'
 export * from './lib/settings-general/settings-general'
 export * from './lib/settings-preview-environments/settings-preview-environments'
 export * from './lib/settings-danger-zone/settings-danger-zone'
+export * from './lib/environment-deployment-list/environment-deployment-list-skeleton'