feat(cluster): enable karpenter for production

libs/pages/clusters/src/lib/feature/page-clusters-create-feature/step-features-feature/step-features-feature.tsx

@@ -141,6 +141,7 @@ export function StepFeaturesFeature() {
           cloudProvider={generalData?.cloud_provider}
           goToBack={goToBack}
           isKarpenter={resourcesData?.karpenter?.enabled}
+          isProduction={generalData?.production}
         />
       </FormProvider>
     </FunnelFlowBody>

libs/pages/clusters/src/lib/feature/page-clusters-create-feature/step-general-feature/step-general-feature.spec.tsx

@@ -35,6 +35,7 @@ const ContextWrapper = (props: { children: ReactNode }) => {
         },
         setGeneralData: mockSetGeneralData,
         creationFlowUrl: '/organization/1/clusters/create',
+        setResourcesData: jest.fn(),
       }}
     >
       <StepGeneralFeature />

libs/pages/clusters/src/lib/feature/page-clusters-create-feature/step-general-feature/step-general-feature.tsx

@@ -36,23 +36,22 @@ export function StepGeneralFeature() {
   }, [setCurrentStep])
 
   const onSubmit = methods.handleSubmit((data) => {
-    if (data.production) {
-      setResourcesData((data) => ({
-        cluster_type: data?.cluster_type ?? '',
-        disk_size: data?.disk_size ?? 50,
-        instance_type: data?.instance_type ?? '',
-        nodes: data?.nodes ?? [3, 10],
-        karpenter: {
-          enabled: false,
-          default_service_architecture: 'AMD64',
-          disk_size_in_gib: 50,
-          spot_enabled: false,
-          qovery_node_pools: {
-            requirements: [],
-          },
+    setResourcesData((d) => ({
+      cluster_type: d?.cluster_type ?? '',
+      disk_size: d?.disk_size ?? 50,
+      instance_type: d?.instance_type ?? '',
+      nodes: d?.nodes ?? [3, 10],
+      karpenter: {
+        enabled: data?.production ? false : true,
+        default_service_architecture: 'AMD64',
+        disk_size_in_gib: 50,
+        spot_enabled: false,
+        qovery_node_pools: {
+          requirements: [],
         },
-      }))
-    }
+      },
+    }))
+
     if (credentials.length > 0) {
       // necessary to get the name of credentials
       const currentCredentials = credentials?.filter((item) => item.id === data['credentials'])[0]

libs/pages/clusters/src/lib/ui/page-clusters-create/step-features/step-features.tsx

@@ -12,10 +12,11 @@ export interface StepFeaturesProps {
   features?: ClusterFeatureResponse[]
   goToBack?: () => void
   isKarpenter?: boolean
+  isProduction?: boolean
 }
 
 export function StepFeatures(props: StepFeaturesProps) {
-  const { onSubmit, features, cloudProvider, goToBack, isKarpenter } = props
+  const { onSubmit, features, cloudProvider, goToBack, isKarpenter, isProduction } = props
   const { formState, setValue, control, watch } = useFormContext()
 
   const watchVpcMode = watch('vpc_mode')
@@ -77,6 +78,12 @@ export function StepFeatures(props: StepFeaturesProps) {
                         control={control}
                         watch={watch}
                         setValue={setValue}
+                        disabled={feature.id === 'STATIC_IP' && isKarpenter && isProduction}
+                        tooltip={
+                          feature.id === 'STATIC_IP' && isKarpenter && isProduction
+                            ? 'This feature can not be disabled on a production cluster using Karpenter'
+                            : undefined
+                        }
                       >
                         {feature.id === 'STATIC_IP' && (
                           <Callout.Root color="yellow" className="mt-4">

libs/shared/console-shared/src/lib/cluster-settings/ui/card-cluster-feature/card-cluster-feature.tsx

@@ -1,5 +1,5 @@
 import { type CloudProviderEnum, type ClusterFeatureResponse } from 'qovery-typescript-axios'
-import { type PropsWithChildren, useEffect, useState } from 'react'
+import { type PropsWithChildren, type ReactNode, useEffect, useState } from 'react'
 import { type Control, Controller, type FieldValues, type UseFormSetValue, type UseFormWatch } from 'react-hook-form'
 import { ExternalLink, Icon, InputSelect, InputToggle, Tooltip } from '@qovery/shared/ui'
 
@@ -10,6 +10,7 @@ export interface CardClusterFeatureProps extends PropsWithChildren {
   setValue?: UseFormSetValue<FieldValues>
   watch?: UseFormWatch<FieldValues>
   control?: Control<FieldValues>
+  tooltip?: ReactNode
 }
 
 export function CardClusterFeature({
@@ -20,6 +21,7 @@ export function CardClusterFeature({
   setValue,
   control,
   children,
+  tooltip,
 }: CardClusterFeatureProps) {
   const [currentDisabled, setCurrentDisabled] = useState<boolean>(disabled)
 
@@ -53,20 +55,28 @@ export function CardClusterFeature({
     >
       <div className="flex w-full gap-3">
         {control ? (
-          <Controller
-            name={`features.${feature.id}.value`}
-            control={control}
-            render={({ field }) => (
-              <InputToggle disabled={disabled} small className="relative top-[2px]" value={field.value} />
-            )}
-          />
+          <Tooltip content={tooltip} disabled={!tooltip}>
+            <span>
+              <Controller
+                name={`features.${feature.id}.value`}
+                control={control}
+                render={({ field }) => (
+                  <InputToggle disabled={disabled} small className="relative top-[2px]" value={field.value} />
+                )}
+              />
+            </span>
+          </Tooltip>
         ) : (
-          <InputToggle
-            disabled
-            small
-            className="relative top-[2px]"
-            value={getValue(Boolean(feature?.value_object?.value) || false)}
-          />
+          <Tooltip content={tooltip} disabled={!tooltip}>
+            <span>
+              <InputToggle
+                disabled
+                small
+                className="relative top-[2px]"
+                value={getValue(Boolean(feature?.value_object?.value) || false)}
+              />
+            </span>
+          </Tooltip>
         )}
         <div className="basis-full">
           <h4 className="mb-1 flex justify-between text-ssm font-medium text-neutral-400">