feat(clusters): allows self-managed cluster to change image registry (#…

…1685)
Qovery · Sep 24, 2024 · c622891 · c622891
1 parent bc8bccd
commit c622891
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 11 deletions.
diff --git a/...domains/organizations/feature/src/lib/container-registry-form/container-registry-form.tsx b/...domains/organizations/feature/src/lib/container-registry-form/container-registry-form.tsx
@@ -1,4 +1,8 @@
-import { type AvailableContainerRegistryResponse, ContainerRegistryKindEnum } from 'qovery-typescript-axios'
+import {
+  type AvailableContainerRegistryResponse,
+  type Cluster,
+  ContainerRegistryKindEnum,
+} from 'qovery-typescript-axios'
 import { useState } from 'react'
 import { useDropzone } from 'react-dropzone'
 import { Controller, useFormContext } from 'react-hook-form'
@@ -9,8 +13,8 @@ import { containerRegistryKindToIcon } from '@qovery/shared/util-js'
 import { useAvailableContainerRegistries } from '../hooks/use-available-container-registries/use-available-container-registries'
 
 export interface ContainerRegistryFormProps {
-  disabledFieldsExceptConfig?: boolean
-  isClusterManaged?: boolean
+  fromEditClusterSettings?: boolean
+  cluster?: Cluster
   isEdit?: boolean
 }
 
@@ -30,8 +34,8 @@ export const getOptionsContainerRegistry = (containerRegistry: AvailableContaine
     .filter(Boolean)
 
 export function ContainerRegistryForm({
-  disabledFieldsExceptConfig = false,
-  isClusterManaged = false,
+  fromEditClusterSettings = false,
+  cluster,
   isEdit = false,
 }: ContainerRegistryFormProps) {
   const methods = useFormContext()
@@ -75,6 +79,9 @@ export function ContainerRegistryForm({
   const isEditDirty = isEdit && methods.formState.isDirty
   const watchKind: undefined | ContainerRegistryKindEnum = methods.watch('kind')
   const watchLoginType = methods.watch('config.login_type')
+  const isClusterManaged = cluster?.kubernetes === 'MANAGED'
+  const isClusterSelfManaged = cluster?.kubernetes === 'SELF_MANAGED'
+  const isClusterDemo = cluster?.is_demo
 
   return (
     <div className="flex flex-col gap-y-4">
@@ -87,7 +94,7 @@ export function ContainerRegistryForm({
         render={({ field, fieldState: { error } }) => (
           <InputText
             dataTestId="input-name"
-            disabled={disabledFieldsExceptConfig}
+            disabled={fromEditClusterSettings}
             name={field.name}
             onChange={field.onChange}
             value={field.value}
@@ -101,7 +108,7 @@ export function ContainerRegistryForm({
         control={methods.control}
         render={({ field, fieldState: { error } }) => (
           <InputTextArea
-            disabled={disabledFieldsExceptConfig}
+            disabled={fromEditClusterSettings}
             name={field.name}
             onChange={field.onChange}
             value={field.value}
@@ -118,7 +125,7 @@ export function ContainerRegistryForm({
         }}
         render={({ field, fieldState: { error } }) => (
           <InputSelect
-            disabled={disabledFieldsExceptConfig}
+            disabled={fromEditClusterSettings ? !(isClusterSelfManaged && !isClusterDemo) : false}
             onChange={(value) => {
               methods.setValue('url', defaultRegistryUrls[value as keyof typeof defaultRegistryUrls])
               methods.resetField('config')
@@ -127,7 +134,11 @@ export function ContainerRegistryForm({
             value={field.value}
             label="Type"
             error={error?.message}
-            options={getOptionsContainerRegistry(availableContainerRegistries)}
+            options={getOptionsContainerRegistry(
+              availableContainerRegistries.filter(({ kind }) =>
+                fromEditClusterSettings ? kind === 'GITHUB_CR' || kind === 'GENERIC_CR' : true
+              )
+            )}
             isSearchable
             portal
           />

diff --git a/...lib/feature/page-settings-image-registry-feature/page-settings-image-registry-feature.tsx b/...lib/feature/page-settings-image-registry-feature/page-settings-image-registry-feature.tsx
@@ -8,7 +8,7 @@ import {
   useEditContainerRegistry,
 } from '@qovery/domains/organizations/feature'
 import { SettingsHeading } from '@qovery/shared/console-shared'
-import { Button, Section } from '@qovery/shared/ui'
+import { Button, Callout, Icon, Section } from '@qovery/shared/ui'
 
 export function SettingsImageRegistryFeature({ containerRegistry }: { containerRegistry: ContainerRegistryResponse }) {
   const { organizationId = '', clusterId = '' } = useParams()
@@ -39,7 +39,17 @@ export function SettingsImageRegistryFeature({ containerRegistry }: { containerR
         />
         <FormProvider {...methods}>
           <form className="flex flex-col" onSubmit={onSubmit}>
-            <ContainerRegistryForm disabledFieldsExceptConfig isClusterManaged={cluster?.kubernetes === 'MANAGED'} />
+            <ContainerRegistryForm fromEditClusterSettings cluster={cluster} />
+            {(methods.formState.dirtyFields.kind || methods.formState.dirtyFields.url) && (
+              <Callout.Root className="mt-4" color="yellow">
+                <Callout.Icon>
+                  <Icon iconName="triangle-exclamation" iconStyle="regular" />
+                </Callout.Icon>
+                <Callout.Text>
+                  You will have to delete any image stored in the previous container registry manually
+                </Callout.Text>
+              </Callout.Root>
+            )}
             <div className="mt-2 flex justify-end">
               <Button
                 type="submit"