feat(cluster): add cluster new page

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

@@ -48,6 +48,16 @@ import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSetting
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsDangerZoneRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/danger-zone'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsCredentialsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/credentials'
 import { Route as AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsAdvancedSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/$clusterId/settings/advanced-settings'
+import { Route as AuthenticatedOrganizationOrganizationIdClusterNewRouteImport } from './routes/_authenticated/organization/$organizationId/cluster/new'
+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 AuthenticatedOrganizationOrganizationIdSettingsRouteImport } from './routes/_authenticated/organization/$organizationId/settings'
+import { Route as AuthenticatedOrganizationIndexRouteImport } from './routes/_authenticated/organization/index'
+import { Route as AuthenticatedOrganizationRouteRouteImport } from './routes/_authenticated/organization/route'
+import { Route as IndexRouteImport } from './routes/index'
+import { Route as LoginAuth0CallbackRouteImport } from './routes/login/auth0-callback'
+import { Route as LoginIndexRouteImport } from './routes/login/index'
 
 const AuthenticatedRoute = AuthenticatedRouteImport.update({
   id: '/_authenticated',
@@ -146,6 +156,12 @@ const AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute =
     path: '/$organizationId/$clusterId/',
     getParentRoute: () => AuthenticatedOrganizationRouteRoute,
   } as any)
+const AuthenticatedOrganizationOrganizationIdClusterNewRoute =
+  AuthenticatedOrganizationOrganizationIdClusterNewRouteImport.update({
+    id: '/$organizationId/cluster/new',
+    path: '/$organizationId/cluster/new',
+    getParentRoute: () => AuthenticatedOrganizationRouteRoute,
+  } as any)
 const AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute =
   AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRouteImport.update(
     {
@@ -287,6 +303,7 @@ export interface FileRoutesByFullPath {
   '/organization/$organizationId/overview': typeof AuthenticatedOrganizationOrganizationIdOverviewRoute
   '/organization/$organizationId/settings': typeof AuthenticatedOrganizationOrganizationIdSettingsRoute
   '/organization/$organizationId': typeof AuthenticatedOrganizationOrganizationIdIndexRoute
+  '/organization/$organizationId/cluster/new': typeof AuthenticatedOrganizationOrganizationIdClusterNewRoute
   '/organization/$organizationId/$clusterId': typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
   '/organization/$organizationId/cluster/$clusterId/settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren
   '/organization/$organizationId/cluster/$clusterId/cluster-logs': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute
@@ -317,6 +334,7 @@ export interface FileRoutesByTo {
   '/organization/$organizationId/overview': typeof AuthenticatedOrganizationOrganizationIdOverviewRoute
   '/organization/$organizationId/settings': typeof AuthenticatedOrganizationOrganizationIdSettingsRoute
   '/organization/$organizationId': typeof AuthenticatedOrganizationOrganizationIdIndexRoute
+  '/organization/$organizationId/cluster/new': typeof AuthenticatedOrganizationOrganizationIdClusterNewRoute
   '/organization/$organizationId/$clusterId': typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
   '/organization/$organizationId/cluster/$clusterId/cluster-logs': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute
   '/organization/$organizationId/cluster/$clusterId/overview': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRoute
@@ -349,6 +367,7 @@ export interface FileRoutesById {
   '/_authenticated/organization/$organizationId/overview': typeof AuthenticatedOrganizationOrganizationIdOverviewRoute
   '/_authenticated/organization/$organizationId/settings': typeof AuthenticatedOrganizationOrganizationIdSettingsRoute
   '/_authenticated/organization/$organizationId/': typeof AuthenticatedOrganizationOrganizationIdIndexRoute
+  '/_authenticated/organization/$organizationId/cluster/new': typeof AuthenticatedOrganizationOrganizationIdClusterNewRoute
   '/_authenticated/organization/$organizationId/$clusterId/': typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren
   '/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs': typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute
@@ -382,6 +401,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/overview'
     | '/organization/$organizationId/settings'
     | '/organization/$organizationId'
+    | '/organization/$organizationId/cluster/new'
     | '/organization/$organizationId/$clusterId'
     | '/organization/$organizationId/cluster/$clusterId/settings'
     | '/organization/$organizationId/cluster/$clusterId/cluster-logs'
@@ -412,6 +432,7 @@ export interface FileRouteTypes {
     | '/organization/$organizationId/overview'
     | '/organization/$organizationId/settings'
     | '/organization/$organizationId'
+    | '/organization/$organizationId/cluster/new'
     | '/organization/$organizationId/$clusterId'
     | '/organization/$organizationId/cluster/$clusterId/cluster-logs'
     | '/organization/$organizationId/cluster/$clusterId/overview'
@@ -443,6 +464,7 @@ export interface FileRouteTypes {
     | '/_authenticated/organization/$organizationId/overview'
     | '/_authenticated/organization/$organizationId/settings'
     | '/_authenticated/organization/$organizationId/'
+    | '/_authenticated/organization/$organizationId/cluster/new'
     | '/_authenticated/organization/$organizationId/$clusterId/'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/settings'
     | '/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs'
@@ -587,6 +609,13 @@ declare module '@tanstack/react-router' {
       preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRouteImport
       parentRoute: typeof AuthenticatedOrganizationRouteRoute
     }
+    '/_authenticated/organization/$organizationId/cluster/new': {
+      id: '/_authenticated/organization/$organizationId/cluster/new'
+      path: '/$organizationId/cluster/new'
+      fullPath: '/organization/$organizationId/cluster/new'
+      preLoaderRoute: typeof AuthenticatedOrganizationOrganizationIdClusterNewRouteImport
+      parentRoute: typeof AuthenticatedOrganizationRouteRoute
+    }
     '/_authenticated/organization/$organizationId/cluster/$clusterId/': {
       id: '/_authenticated/organization/$organizationId/cluster/$clusterId/'
       path: '/$organizationId/cluster/$clusterId'
@@ -728,6 +757,7 @@ interface AuthenticatedOrganizationRouteRouteChildren {
   AuthenticatedOrganizationOrganizationIdOverviewRoute: typeof AuthenticatedOrganizationOrganizationIdOverviewRoute
   AuthenticatedOrganizationOrganizationIdSettingsRoute: typeof AuthenticatedOrganizationOrganizationIdSettingsRoute
   AuthenticatedOrganizationOrganizationIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdIndexRoute
+  AuthenticatedOrganizationOrganizationIdClusterNewRoute: typeof AuthenticatedOrganizationOrganizationIdClusterNewRoute
   AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute: typeof AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute
   AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren
   AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute: typeof AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute
@@ -761,6 +791,26 @@ const AuthenticatedOrganizationRouteRouteChildren: AuthenticatedOrganizationRout
     AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute:
       AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute,
   }
+const AuthenticatedOrganizationRouteRouteChildren: AuthenticatedOrganizationRouteRouteChildren = {
+  AuthenticatedOrganizationIndexRoute: AuthenticatedOrganizationIndexRoute,
+  AuthenticatedOrganizationOrganizationIdAlertsRoute: AuthenticatedOrganizationOrganizationIdAlertsRoute,
+  AuthenticatedOrganizationOrganizationIdAuditLogsRoute: AuthenticatedOrganizationOrganizationIdAuditLogsRoute,
+  AuthenticatedOrganizationOrganizationIdClustersRoute: AuthenticatedOrganizationOrganizationIdClustersRoute,
+  AuthenticatedOrganizationOrganizationIdOverviewRoute: AuthenticatedOrganizationOrganizationIdOverviewRoute,
+  AuthenticatedOrganizationOrganizationIdSettingsRoute: AuthenticatedOrganizationOrganizationIdSettingsRoute,
+  AuthenticatedOrganizationOrganizationIdIndexRoute: AuthenticatedOrganizationOrganizationIdIndexRoute,
+  AuthenticatedOrganizationOrganizationIdClusterNewRoute: AuthenticatedOrganizationOrganizationIdClusterNewRoute,
+  AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute:
+    AuthenticatedOrganizationOrganizationIdClusterIdIndexRoute,
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRoute:
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdSettingsRouteRouteWithChildren,
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute:
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdClusterLogsRoute,
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRoute:
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdOverviewRoute,
+  AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute:
+    AuthenticatedOrganizationOrganizationIdClusterClusterIdIndexRoute,
+}
 
 const AuthenticatedOrganizationRouteRouteWithChildren =
   AuthenticatedOrganizationRouteRoute._addFileChildren(

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

@@ -0,0 +1,27 @@
+import { createFileRoute, useParams } from '@tanstack/react-router'
+import { ClusterNew } from '@qovery/domains/clusters/feature'
+import { Heading, Icon, Link, Section } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+
+export const Route = createFileRoute('/_authenticated/organization/$organizationId/cluster/new')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId } = useParams({ strict: false })
+  useDocumentTitle('Create new cluster')
+
+  return (
+    <Section className="flex w-full flex-1 flex-col gap-8 pb-48 pt-8">
+      <Link color="brand" to="/organization/$organizationId/clusters" params={{ organizationId }} className="text-sm">
+        <Icon iconName="arrow-left" className="mr-1" />
+        Back to clusters
+      </Link>
+      <div className="flex flex-col">
+        <Heading className="mb-2 text-2xl">Install cluster</Heading>
+        <hr className="my-4 border-neutral" />
+      </div>
+      <ClusterNew />
+    </Section>
+  )
+}

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

@@ -1,12 +1,14 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
 import { ClusterCard, useClusterStatuses, useClusters } from '@qovery/domains/clusters/feature'
 import { EmptyState, Heading, Icon, Link, LoaderSpinner, Section } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
 export const Route = createFileRoute('/_authenticated/organization/$organizationId/clusters')({
   component: RouteComponent,
 })
 
 function RouteComponent() {
+  useDocumentTitle('Clusters - Manage your clusters')
   const { organizationId = '' } = useParams({ strict: false })
   const { data: clusters = [], isLoading: isLoadingCluster } = useClusters({ organizationId: organizationId })
   const { data: clusterStatuses = [], isLoading: isLoadingClusterStatus } = useClusterStatuses({
@@ -19,7 +21,19 @@ function RouteComponent() {
     <div className="container mx-auto mt-6 pb-10">
       <Section className="gap-8">
         <div className="flex flex-col gap-6">
-          <Heading>Clusters</Heading>
+          <div className="flex justify-between">
+            <Heading>Clusters</Heading>
+            <Link
+              to="/organization/$organizationId/cluster/new"
+              params={{ organizationId }}
+              as="button"
+              className="gap-2"
+              size="md"
+            >
+              New Cluster
+              <Icon iconName="circle-plus" iconStyle="regular" />
+            </Link>
+          </div>
           <hr className="w-full border-neutral" />
         </div>
         <div>

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

@@ -155,6 +155,33 @@ function useNavigationContext(): NavigationContext | null {
   return null
 }
 
+function getBaseRouteSegment(routePath: string): string | null {
+  const segments = routePath.split('/').filter(Boolean)
+  const lastSegment = segments[segments.length - 1]
+  if (!lastSegment) return null
+
+  if (lastSegment.endsWith('s') && lastSegment.length > 1) {
+    return lastSegment.slice(0, -1)
+  }
+  return null
+}
+
+function matchesTabRoute(pathname: string, tabPath: string): boolean {
+  if (pathname === tabPath || pathname.startsWith(tabPath + '/')) {
+    return true
+  }
+
+  const baseSegment = getBaseRouteSegment(tabPath)
+  if (baseSegment) {
+    const basePattern = tabPath.replace(`/${baseSegment}s`, `/${baseSegment}/`)
+    if (pathname.startsWith(basePattern)) {
+      return true
+    }
+  }
+
+  return false
+}
+
 function useActiveTabId(context: NavigationContext | null): string {
   const location = useLocation()
   const pathname = location.pathname
@@ -165,7 +192,9 @@ function useActiveTabId(context: NavigationContext | null): string {
 
   for (const tab of context.tabs) {
     const tabPath = buildRoutePath(tab.routeId, context.params)
-    if (pathname === tabPath || pathname.startsWith(tabPath + '/')) {
+    // Match the tab route with the pathname, including the base route segment
+    // Example: /organization/123/clusters -> /organization/123/cluster/new
+    if (matchesTabRoute(pathname, tabPath)) {
       return tab.id
     }
   }

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

@@ -22,6 +22,7 @@ export * from './lib/cluster-deployment-progress-card/cluster-deployment-progres
 export * from './lib/section-production-health/section-production-health'
 export * from './lib/cluster-logs/cluster-log-row/cluster-log-row'
 export * from './lib/cluster-logs/cluster-header-logs/cluster-header-logs'
+export * from './lib/cluster-creation-flow/cluster-new/cluster-new'
 export * from './lib/hooks/use-cluster-cloud-provider-info/use-cluster-cloud-provider-info'
 export * from './lib/hooks/use-cluster-routing-table/use-cluster-routing-table'
 export * from './lib/hooks/use-cluster-kubeconfig/use-cluster-kubeconfig'