feat(new-nav): add Project overview page

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

@@ -2,32 +2,37 @@ import { useParams, useRouter } from '@tanstack/react-router'
 import { useMemo } from 'react'
 import { ClusterAvatar, useClusters } from '@qovery/domains/clusters/feature'
 import { useOrganization, useOrganizations } from '@qovery/domains/organizations/feature'
+import { useProjects } from '@qovery/domains/projects/feature'
 import { Avatar } from '@qovery/shared/ui'
 import { Separator } from '../header'
 import { BreadcrumbItem, type BreadcrumbItemData } from './breadcrumb-item'
 
 export function Breadcrumbs() {
   const { buildLocation } = useRouter()
-  const { organizationId, clusterId } = useParams({ strict: false })
+  const { organizationId, clusterId, projectId } = useParams({ strict: false })
 
   const { data: organizations = [] } = useOrganizations({
     enabled: true,
+    suspense: true,
   })
-  const { data: organization } = useOrganization({ organizationId, enabled: !!organizationId })
-  const { data: clusters = [] } = useClusters({ organizationId })
+  const { data: organization } = useOrganization({ organizationId, enabled: !!organizationId, suspense: true })
+  const { data: clusters = [] } = useClusters({ organizationId, suspense: true })
+  const { data: projects = [] } = useProjects({ organizationId, suspense: true })
 
   // Necessary to keep the organization from client by Qovery team
   const allOrganizations =
     organizations.find((org) => org.id !== organizationId) && organization
-      ? [...organizations, organization]
+      ? [...organizations.filter((org) => org.id !== organizationId), organization]
       : organizations
 
-  const orgItems: BreadcrumbItemData[] = allOrganizations.map((organization) => ({
-    id: organization.id,
-    label: organization.name,
-    path: buildLocation({ to: '/organization/$organizationId', params: { organizationId: organization.id } }).href,
-    logo_url: organization.logo_url ?? undefined,
-  }))
+  const orgItems: BreadcrumbItemData[] = allOrganizations
+    .sort((a, b) => a.name.trim().localeCompare(b.name.trim()))
+    .map((organization) => ({
+      id: organization.id,
+      label: organization.name,
+      path: buildLocation({ to: '/organization/$organizationId', params: { organizationId: organization.id } }).href,
+      logo_url: organization.logo_url ?? undefined,
+    }))
 
   const currentOrg = useMemo(
     () => orgItems.find((organization) => organization.id === organizationId),
@@ -43,11 +48,27 @@ export function Breadcrumbs() {
     }).href,
   }))
 
+  const projectItems: BreadcrumbItemData[] = projects
+    .sort((a, b) => a.name.trim().localeCompare(b.name.trim()))
+    .map((project) => ({
+      id: project.id,
+      label: project.name,
+      path: buildLocation({
+        to: '/organization/$organizationId/project/$projectId/overview',
+        params: { organizationId, projectId: project.id },
+      }).href,
+    }))
+
   const currentCluster = useMemo(
     () => clusterItems.find((cluster) => cluster.id === clusterId),
     [clusterId, clusterItems]
   )
 
+  const currentProject = useMemo(
+    () => projectItems.find((project) => project.id === projectId),
+    [projectId, projectItems]
+  )
+
   const breadcrumbData: Array<{ item: BreadcrumbItemData; items: BreadcrumbItemData[] }> = []
 
   if (currentOrg) {
@@ -78,6 +99,16 @@ export function Breadcrumbs() {
     })
   }
 
+  if (currentProject) {
+    breadcrumbData.push({
+      item: {
+        ...currentProject,
+        // prefix: <ProjectAvatar project={projects.find((project) => project.id === projectId)} size="sm" />,
+      },
+      items: projectItems,
+    })
+  }
+
   return (
     <div className="flex items-center gap-2">
       {breadcrumbData.map((data, index) => (

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

@@ -1,3 +1,4 @@
+import { Suspense } from 'react'
 import { LogoIcon } from '@qovery/shared/ui'
 import { Breadcrumbs } from './breadcrumbs/breadcrumbs'
 import { UserMenu } from './user-menu/user-menu'
@@ -21,7 +22,9 @@ export function Header() {
       <div className="flex items-center gap-4">
         <LogoIcon />
         <Separator />
+        {/* <Suspense fallback={<div>Loading...</div>}> */}
         <Breadcrumbs />
+        {/* </Suspense> */}
         <div className="ml-auto">
           <UserMenu />
         </div>

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

@@ -0,0 +1,19 @@
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId, projectId, environmentId } = useParams({ strict: false })
+
+  return (
+    <Navigate
+      to="/organization/$organizationId/project/$projectId/environment/$environmentId/overview"
+      params={{ organizationId, projectId, environmentId }}
+      replace
+    />
+  )
+}

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

@@ -0,0 +1,31 @@
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { Suspense } from 'react'
+import { useEnvironment } from '@qovery/domains/environments/feature'
+import { LoaderSpinner } from '@qovery/shared/ui'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview'
+)({
+  component: RouteComponent,
+})
+
+function EnvironmentOverview() {
+  const { environmentId } = useParams({ strict: false })
+  const { data: environment } = useEnvironment({ environmentId, suspense: true })
+
+  return <div>Environment: {environment?.name}</div>
+}
+
+function RouteComponent() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex min-h-screen items-center justify-center">
+          <LoaderSpinner className="w-6" />
+        </div>
+      }
+    >
+      <EnvironmentOverview />
+    </Suspense>
+  )
+}

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/index.tsx

@@ -0,0 +1,13 @@
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/_authenticated/organization/$organizationId/project/$projectId/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId, projectId } = useParams({ strict: false })
+
+  return (
+    <Navigate to="/organization/$organizationId/project/$projectId/overview" params={{ organizationId, projectId }} />
+  )
+}