feat: introduce new engine

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey.tsx

@@ -0,0 +1,48 @@
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+import { ClusterProfileFeature, resolveProfileSelection, useClusterProfileTree } from '@qovery/domains/clusters/feature'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile/$componentKey'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { componentKey } = Route.useParams()
+  const { search } = Route.useSearch()
+  const navigate = Route.useNavigate()
+  const { profileTree, isLoading } = useClusterProfileTree({ organizationId, clusterId })
+  // Disabled layers and components with nothing to configure cannot be opened: the URL follows what is displayed.
+  const resolvedComponentKey = resolveProfileSelection(profileTree, componentKey).component?.key
+
+  if (!isLoading && resolvedComponentKey && resolvedComponentKey !== componentKey) {
+    return (
+      <Navigate
+        to="/organization/$organizationId/cluster/$clusterId/profile/$componentKey"
+        params={{ organizationId, clusterId, componentKey: resolvedComponentKey }}
+        search={(previous) => previous}
+        replace
+      />
+    )
+  }
+
+  return (
+    <ClusterProfileFeature
+      // The route is reused across clusters: remount so unsaved edits never carry over to another cluster.
+      key={clusterId}
+      activeComponentKey={componentKey}
+      search={search}
+      onActiveComponentChange={(nextComponentKey) =>
+        navigate({
+          to: '/organization/$organizationId/cluster/$clusterId/profile/$componentKey',
+          params: (previous) => ({ ...previous, componentKey: nextComponentKey }),
+          search: (previous) => previous,
+        })
+      }
+      onSearchChange={(nextSearch) =>
+        navigate({ search: (previous) => ({ ...previous, search: nextSearch || undefined }), replace: true })
+      }
+    />
+  )
+}

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/index.tsx

@@ -0,0 +1,35 @@
+import { Navigate, createFileRoute, useParams } from '@tanstack/react-router'
+import { ClusterProfileFeature, resolveProfileSelection, useClusterProfileTree } from '@qovery/domains/clusters/feature'
+import { LoaderSpinner } from '@qovery/shared/ui'
+
+export const Route = createFileRoute('/_authenticated/organization/$organizationId/cluster/$clusterId/profile/')({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { profileTree, isLoading, isError } = useClusterProfileTree({ organizationId, clusterId })
+  const componentKey = resolveProfileSelection(profileTree).component?.key
+
+  if (isLoading) {
+    return (
+      <div className="flex min-h-page-container items-center justify-center">
+        <LoaderSpinner />
+      </div>
+    )
+  }
+
+  // Without a component to open, the feature shows the error or empty state.
+  if (isError || !componentKey) {
+    return <ClusterProfileFeature key={clusterId} />
+  }
+
+  return (
+    <Navigate
+      to="/organization/$organizationId/cluster/$clusterId/profile/$componentKey"
+      params={{ organizationId, clusterId, componentKey }}
+      search={(previous) => previous}
+      replace
+    />
+  )
+}

apps/console/src/routes/_authenticated/organization/$organizationId/cluster/$clusterId/profile/route.tsx

@@ -0,0 +1,39 @@
+import { Navigate, Outlet, createFileRoute, useParams } from '@tanstack/react-router'
+import { z } from 'zod'
+import { useCluster, useIsOperatorAttached } from '@qovery/domains/clusters/feature'
+import { LoaderSpinner } from '@qovery/shared/ui'
+import { useDocumentTitle } from '@qovery/shared/util-hooks'
+
+export const Route = createFileRoute('/_authenticated/organization/$organizationId/cluster/$clusterId/profile')({
+  component: RouteComponent,
+  validateSearch: z.object({ search: z.string().optional() }),
+})
+
+function RouteComponent() {
+  useDocumentTitle('Cluster - Profile')
+  const { organizationId = '', clusterId = '' } = useParams({ strict: false })
+  const { data: cluster, isLoading: isClusterLoading } = useCluster({ organizationId, clusterId })
+  // Only Engine v2 clusters, attached to the Qovery Operator, have a profile.
+  const isOperatorAttached = useIsOperatorAttached(cluster)
+
+  // Redirecting before the flags, the cluster and its Operator status are loaded would turn away users who have access.
+  if (isClusterLoading || (cluster && isOperatorAttached === undefined)) {
+    return (
+      <div className="flex min-h-page-container items-center justify-center">
+        <LoaderSpinner />
+      </div>
+    )
+  }
+
+  if (!isOperatorAttached && organizationId && clusterId) {
+    return (
+      <Navigate
+        to="/organization/$organizationId/cluster/$clusterId/overview"
+        params={{ organizationId, clusterId }}
+        replace
+      />
+    )
+  }
+
+  return <Outlet />
+}

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

@@ -1,5 +1,6 @@
 import { createFileRoute, useParams } from '@tanstack/react-router'
-import { ClusterNew } from '@qovery/domains/clusters/feature'
+import { useFeatureFlagEnabled } from 'posthog-js/react'
+import { ClusterAdd, ClusterNew } from '@qovery/domains/clusters/feature'
 import { Heading, Icon, Link, Section } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
 
@@ -9,7 +10,8 @@ export const Route = createFileRoute('/_authenticated/organization/$organization
 
 function RouteComponent() {
   const { organizationId = '' } = useParams({ strict: false })
-  useDocumentTitle('Create new cluster')
+  const isEngineV2Enabled = Boolean(useFeatureFlagEnabled('engine-v2-platform-configuration'))
+  useDocumentTitle(isEngineV2Enabled ? 'Add cluster' : 'Create new cluster')
 
   return (
     <Section className="flex w-full flex-1 flex-col pb-48 pt-6">
@@ -20,12 +22,12 @@ function RouteComponent() {
         className="mb-2 text-xs"
       >
         <Icon iconName="arrow-left" className="mr-1" />
-        Back to clusters
+        {isEngineV2Enabled ? 'Back to cluster list' : 'Back to clusters'}
       </Link>
       <div className="flex flex-col border-b border-neutral pb-6">
-        <Heading className="text-2xl">Install cluster</Heading>
+        <Heading className="text-2xl">{isEngineV2Enabled ? 'Add cluster' : 'Install cluster'}</Heading>
       </div>
-      <ClusterNew />
+      {isEngineV2Enabled ? <ClusterAdd /> : <ClusterNew />}
     </Section>
   )
 }

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

@@ -4,7 +4,7 @@ import posthog from 'posthog-js'
 import { useFeatureFlagEnabled } from 'posthog-js/react'
 import { type BlueprintDetailsResponse, type Cluster } from 'qovery-typescript-axios'
 import { Suspense, useEffect, useLayoutEffect, useRef, useState } from 'react'
-import { useClusters } from '@qovery/domains/clusters/feature'
+import { useClusters, useIsOperatorAttached } from '@qovery/domains/clusters/feature'
 import { useEnvironment } from '@qovery/domains/environments/feature'
 import { useProject } from '@qovery/domains/projects/feature'
 import {
@@ -118,6 +118,12 @@ const CLUSTER_TABS: NavigationTab[] = [
     iconName: 'terminal',
     routeId: '/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell',
   },
+  {
+    id: 'profile',
+    label: 'Profile',
+    iconName: 'layer-group',
+    routeId: '/_authenticated/organization/$organizationId/cluster/$clusterId/profile',
+  },
   {
     id: 'settings',
     label: 'Settings',
@@ -393,6 +399,8 @@ function useNavigationContext(): NavigationContext | null {
   })
   const hasAlerting = clusters.some((cluster) => cluster.metrics_parameters?.configuration?.alerting?.enabled)
   const currentCluster = clusters.find((cluster) => cluster.id === environment?.cluster_id)
+  // Only Engine v2 clusters, attached to the Qovery Operator, have a profile.
+  const isProfileAvailable = Boolean(useIsOperatorAttached(clusters.find((cluster) => cluster.id === params.clusterId)))
   const blueprintId = service && isBlueprintService(service) && isTerraform(service) ? service.blueprint_id : ''
   const { data: blueprint } = useBlueprint({
     blueprintId,
@@ -423,9 +431,11 @@ function useNavigationContext(): NavigationContext | null {
             ? getServiceTabs(service, currentCluster, isAgenticWorkflowEnabled, blueprint)
             : context.type === 'organization'
               ? context.tabs.filter((tab) => hasAlerting || tab.id !== 'alerts')
-              : context.type === 'environment'
-                ? context.tabs.filter((tab) => isAgenticWorkflowEnabled || tab.id !== 'automation')
-                : context.tabs
+              : context.type === 'cluster'
+                ? context.tabs.filter((tab) => isProfileAvailable || tab.id !== 'profile')
+                : context.type === 'environment'
+                  ? context.tabs.filter((tab) => isAgenticWorkflowEnabled || tab.id !== 'automation')
+                  : context.tabs
 
         return {
           type: context.type,
@@ -546,6 +556,7 @@ const fullWidthRouteIds: FileRouteTypes['id'][] = [
   '/_authenticated/organization/$organizationId/cluster/$clusterId/cluster-logs',
   '/_authenticated/organization/$organizationId/cluster/$clusterId/deployments/logs/$deploymentId',
   '/_authenticated/organization/$organizationId/cluster/$clusterId/cloud-shell',
+  '/_authenticated/organization/$organizationId/cluster/$clusterId/profile',
   '/_authenticated/organization/$organizationId/cluster/$clusterId/settings',
   '/_authenticated/organization/$organizationId/project/$projectId/settings',
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/settings',

apps/console/vite.config.ts

@@ -44,6 +44,7 @@ export default defineConfig(({ mode }) => {
       tanstackRouter({
         target: 'react',
         autoCodeSplitting: true,
+        routeFileIgnorePattern: '\\.(spec|test)\\.tsx?$',
       }),
       viteStaticCopy({
         targets: [

libs/domains/clusters/data-access/src/index.ts

@@ -1,4 +1,5 @@
 export * from './lib/domains-clusters-data-access'
+export * from './lib/platform-configuration/platform-configuration'
 export { isGcpCluster } from './lib/cluster-checks/is-gcp-cluster'
 export { isAwsCluster } from './lib/cluster-checks/is-aws-cluster'
 export { excludeSecretManagerAccess } from './lib/secret-manager/exclude-secret-manager-access'

libs/domains/clusters/data-access/src/lib/domains-clusters-data-access.ts

@@ -9,17 +9,22 @@ import {
   type ClusterDeleteMode,
   ClusterDeploymentHistoryApi,
   type ClusterDnsProviderRequest,
+  ClusterOperatorApi,
+  type ClusterOperatorUpdateRequest,
   type ClusterRequest,
   type ClusterRoutingTableRequest,
   ClustersApi,
   KubernetesEnum,
   OrganizationMainCallsApi,
   SecretManagerAccessApi,
+  type SelfManagedClusterRequest,
 } from 'qovery-typescript-axios'
 import { type ClusterMetricsDto, type ClusterStatusDto } from 'qovery-ws-typescript-axios'
+import { isHttpStatus } from '@qovery/shared/utils'
 
 const clusterApi = new ClustersApi()
 const clusterDeploymentHistoryApi = new ClusterDeploymentHistoryApi()
+const clusterOperatorApi = new ClusterOperatorApi()
 const argoCdApi = new ArgoCDApi()
 const secretManagerApi = new SecretManagerAccessApi()
 const organizationApi = new OrganizationMainCallsApi()
@@ -50,6 +55,26 @@ export const clusters = createQueryKeys('clusters', {
       return response.data
     },
   }),
+  operatorStatus: ({ organizationId, clusterId }: { organizationId: string; clusterId: string }) => ({
+    queryKey: [organizationId, clusterId],
+    async queryFn() {
+      try {
+        const response = await clusterOperatorApi.getClusterOperatorStatus(organizationId, clusterId)
+        return response.data
+      } catch (error) {
+        // No Operator state: the cluster is not enrolled in the Engine v2 Operator path.
+        if (isHttpStatus(error, 404)) return null
+        throw error
+      }
+    },
+  }),
+  operatorBootstrap: ({ organizationId, clusterId }: { organizationId: string; clusterId: string }) => ({
+    queryKey: [organizationId, clusterId],
+    async queryFn() {
+      const response = await clusterOperatorApi.getClusterOperatorBootstrap(organizationId, clusterId)
+      return response.data
+    },
+  }),
   eksAnywhereCommits: ({ organizationId, clusterId }: { organizationId: string; clusterId: string }) => ({
     queryKey: [organizationId, clusterId],
     async queryFn() {
@@ -203,6 +228,33 @@ export const clusters = createQueryKeys('clusters', {
 })
 
 export const mutations = {
+  async updateClusterOperator({
+    organizationId,
+    clusterId,
+    chartVersion,
+    imageVersion,
+  }: {
+    organizationId: string
+    clusterId: string
+    chartVersion: ClusterOperatorUpdateRequest['chart_version']
+    imageVersion?: ClusterOperatorUpdateRequest['image_version']
+  }) {
+    const response = await clusterOperatorApi.updateClusterOperator(organizationId, clusterId, {
+      chart_version: chartVersion,
+      image_version: imageVersion,
+    })
+    return response.data
+  },
+  async createSelfManagedCluster({
+    organizationId,
+    clusterRequest,
+  }: {
+    organizationId: string
+    clusterRequest: SelfManagedClusterRequest
+  }) {
+    const response = await clusterApi.createSelfManagedCluster(organizationId, clusterRequest)
+    return response.data
+  },
   async createCluster({ organizationId, clusterRequest }: { organizationId: string; clusterRequest: ClusterRequest }) {
     const response = await clusterApi.createCluster(organizationId, clusterRequest)
     return response.data