feat(new-nav): add Project overview page #2305

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged

rmnbrd merged 17 commits into new-navigation from feat/new-nav/project-overview

Jan 29, 2026

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

-Original file line number
+Diff line change
@@ Expand Up / @@ -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),
@@ Expand All / @@ -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) {
@@ Expand Down Expand Up / @@ -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) => (
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ -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'
@@ Expand All / @@ -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>
@@ Expand Down @@

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

Large diffs are not rendered by default.

...ated/organization/$organizationId/project/$projectId/environment/$environmentId/index.tsx

-Original file line number
+Diff line change
@@ -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
+        />
+      )
+    }

...d/organization/$organizationId/project/$projectId/environment/$environmentId/overview.tsx

-Original file line number
+Diff line change
@@ -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>
+      )
+    }

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

-Original file line number
+Diff line change
@@ -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 }} />
+      )
+    }

...v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/overview.tsx

-Original file line number
+Diff line change
@@ -0,0 +1,25 @@
+    import { createFileRoute } from '@tanstack/react-router'
+    import { Suspense } from 'react'
+    import { EnvironmentsTable } from '@qovery/domains/environments/feature'
+    import { LoaderSpinner } from '@qovery/shared/ui'
+    export const Route = createFileRoute('/_authenticated/organization/$organizationId/project/$projectId/overview')({
+      component: RouteComponent,
+    })
+    function RouteComponent() {
+      return (
+        <Suspense
+          fallback={
+            <div
+              data-testid="project-overview-loader"
+              className="container mx-auto mt-6 flex items-center justify-center pb-10"
+            >
+              <LoaderSpinner className="w-6" />
+            </div>
+          }
+        >
+          <EnvironmentsTable />
+        </Suspense>
+      )
+    }

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

-Original file line number
+Diff line change
@@ -1,6 +1,9 @@
-    import { Outlet, createFileRoute } from '@tanstack/react-router'
+    import { Outlet, createFileRoute, useParams } from '@tanstack/react-router'
     import { Suspense } from 'react'
+    import { memo } from 'react'
+    import { useClusters } from '@qovery/domains/clusters/feature'
     import { LoaderSpinner } from '@qovery/shared/ui'
+    import { StatusWebSocketListener } from '@qovery/shared/util-web-sockets'
     import { queries } from '@qovery/state/util-queries'
     export const Route = createFileRoute('/_authenticated/organization/$organizationId')({
@@ Expand Down Expand Up / @@ -28,10 +31,35 @@ const Loader = () => { @@
       )
     }
+    const StatusWebSocketListenerMemo = memo(StatusWebSocketListener)
     function RouteComponent() {
+      const { organizationId = '', projectId = '', environmentId = '', versionId = '' } = useParams({ strict: false })
+      const { data: clusters } = useClusters({ organizationId })
       return (
-        <Suspense fallback={<Loader />}>
-          <Outlet />
-        </Suspense>
+        <>
+          <Suspense fallback={<Loader />}>
+            <Outlet />
+          </Suspense>
+          {/**
+           * Here we are limited by the websocket API which requires a clusterId
+           * We need to instantiate one hook per clusterId to get the complete environment statuses of the page
+           */
+          clusters?.map(
+            ({ id }) =>
+              organizationId && (
+                <StatusWebSocketListenerMemo
+                  key={id}
+                  organizationId={organizationId}
+                  clusterId={id}
+                  projectId={projectId}
+                  environmentId={environmentId}
+                  versionId={versionId}
+                />
+              )
+          )}
+        </>
       )
     }

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

-Original file line number
+Diff line change
@@ -1,6 +1,7 @@
     import { type IconName } from '@fortawesome/fontawesome-common-types'
     import { Outlet, createFileRoute, useLocation, useMatches, useParams } from '@tanstack/react-router'
-    import { Icon, Navbar } from '@qovery/shared/ui'
+    import { Suspense } from 'react'
+    import { Icon, LoaderSpinner, Navbar } from '@qovery/shared/ui'
     import { queries } from '@qovery/state/util-queries'
     import Header from '../../../app/components/header/header'
     import { type FileRouteTypes } from '../../../routeTree.gen'
@@ Expand Down Expand Up / @@ -85,6 +86,24 @@ const CLUSTER_TABS: NavigationTab[] = [ @@
       },
     ]
+    const PROJECT_TABS: NavigationTab[] = [
+      {
+        id: 'overview',
+        label: 'Overview',
+        iconName: 'table-layout',
+        routeId: '/_authenticated/organization/$organizationId/project/$projectId/overview',
+      },
+    ]
+    const ENVIRONMENT_TABS: NavigationTab[] = [
+      {
+        id: 'overview',
+        label: 'Overview',
+        iconName: 'table-layout',
+        routeId: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/overview',
+      },
+    ]
     function createRoutePatternRegex(routeIdPattern: string): RegExp {
       const patternPath = routeIdPattern.replace('/_authenticated/organization', '/organization')
       return new RegExp('^' + patternPath.replace(/\$(\w+)/g, '[^/]+') + '(/.*)?$')
@@ Expand All / @@ -107,6 +126,18 @@ const NAVIGATION_CONTEXTS: Array<{ @@
       tabs: NavigationTab[]
       paramNames: string[]
     }> = [
+      {
+        type: 'environment',
+        routeIdPattern: '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId',
+        tabs: ENVIRONMENT_TABS,
+        paramNames: ['organizationId', 'projectId', 'environmentId'],
+      },
+      {
+        type: 'project',
+        routeIdPattern: '/_authenticated/organization/$organizationId/project/$projectId',
+        tabs: PROJECT_TABS,
+        paramNames: ['organizationId', 'projectId'],
+      },
       {
         type: 'cluster',
         routeIdPattern: '/_authenticated/organization/$organizationId/cluster/$clusterId',
@@ Expand Down Expand Up / @@ -259,6 +290,14 @@ function useBypassLayout(): boolean { @@
       )
     }
+    function MainLoader() {
+      return (
+        <div className="flex h-full items-center justify-center">
+          <LoaderSpinner />
+        </div>
+      )
+    }
     function OrganizationRoute() {
       const navigationContext = useNavigationContext()
       const activeTabId = useActiveTabId(navigationContext)
@@ Expand All / @@ -273,17 +312,21 @@ function OrganizationRoute() { @@
         <div className="flex h-dvh w-full flex-col bg-background">
           {/* TODO: Conflicts with body main:not(.h-screen, .layout-onboarding) */}
           <div className="min-h-0 flex-1 overflow-auto">
-            <Header />
-            <div className="sticky top-0 z-header border-b border-neutral bg-background-secondary px-4">
-              <Navbar.Root activeId={activeTabId} className="container relative top-[1px] mx-0 -mt-[1px]">
-                {navigationContext && <NavigationBar context={navigationContext} />}
-              </Navbar.Root>
-            </div>
-            <div className={needsFullWidth ? 'min-h-0' : 'container mx-auto min-h-0 px-4'}>
-              <Outlet />
-            </div>
+            <Suspense fallback={<MainLoader />}>
+              <>
+                <Header />
+                <div className="sticky top-0 z-header border-b border-neutral bg-background-secondary px-4">
+                  <Navbar.Root activeId={activeTabId} className="container relative top-[1px] mx-0 -mt-[1px]">
+                    {navigationContext && <NavigationBar context={navigationContext} />}
+                  </Navbar.Root>
+                </div>
+                <div className={needsFullWidth ? 'min-h-0' : 'container mx-auto min-h-0 px-4'}>
+                  <Outlet />
+                </div>
+              </>
+            </Suspense>
           </div>
         </div>
       )
@@ Expand Down @@

libs/domains/clusters/feature/src/lib/cluster-avatar/cluster-avatar.tsx

-Original file line number
+Diff line change
@@ -1,11 +1,11 @@
-    import { type CloudProviderEnum, type Cluster } from 'qovery-typescript-axios'
+    import { type CloudProviderEnum, type Cluster, type ClusterOverviewResponse } from 'qovery-typescript-axios'
     import { type ComponentPropsWithoutRef, type ElementRef, forwardRef } from 'react'
     import { match } from 'ts-pattern'
     import { Avatar, Icon } from '@qovery/shared/ui'
     export interface ClusterAvatarProps extends Omit<ComponentPropsWithoutRef<typeof Avatar>, 'fallback'> {
       cloudProvider?: CloudProviderEnum
-      cluster?: Cluster
+      cluster?: Cluster | ClusterOverviewResponse
     }
     export const ClusterAvatar = forwardRef<ElementRef<typeof Avatar>, ClusterAvatarProps>(function ClusterAvatar(
@@ Expand All @@
       const localCloudProvider = cloudProvider ?? cluster?.cloud_provider
       const fallback = match({ cluster, localCloudProvider })
         .with({ cluster: { is_demo: true } }, () => (
-          <div className="flex h-12 w-12 items-center justify-center rounded-full bg-surface-info-subtle">
-            <Icon iconName="laptop-code" className="text-surface-info-solid" />
-          </div>
+          <Icon iconName="laptop-code" className="text-base text-neutral-subtle" />
         ))
         .with({ localCloudProvider: 'ON_PREMISE' }, () => <Icon name="KUBERNETES" height="65%" width="65%" />)
         .otherwise(() => <Icon name={localCloudProvider} height="65%" width="65%" />)
@@ Expand Down @@

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

-Original file line number
+Diff line change
@@ Expand Up @@
     export * from './lib/hooks/use-lifecycle-template/use-lifecycle-template'
     export * from './lib/hooks/use-deploy-all-services/use-deploy-all-services'
     export * from './lib/hooks/use-service-count/use-service-count'
+    export * from './lib/environments-table/environments-table'

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(new-nav): add Project overview page #2305

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Uh oh!

Uh oh!