fix(crux-ui): clear registry fields on type change

fix(crux-ui): clear registry fields on type change fix(crux-ui): google registry url not mapped in edit mode refactor(crux-ui): pr suggestions
dyrector-io · Sep 1, 2022 · e07e3dc · e07e3dc
1 parent 67f25c9
commit e07e3dc
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 15 deletions.
diff --git a/web/crux-ui/src/components/registries/edit-registry-card.tsx b/web/crux-ui/src/components/registries/edit-registry-card.tsx
@@ -34,7 +34,7 @@ interface EditRegistryCardProps {
   className?: string
   registry?: RegistryDetails
   onSubmittingChange?: (submitting: boolean) => void
-  onRegistryEdited: (product: Registry) => void
+  onRegistryEdited: (registry: Registry) => void
   submitRef: MutableRefObject<() => Promise<any>>
 }
 
@@ -105,6 +105,23 @@ const EditRegistryCard = (props: EditRegistryCardProps) => {
 
   const registryType = formik.values.type
 
+  const onRegistryTypeChange = (changedRegistry: RegistryType) => {
+    if (registryType !== changedRegistry) {
+      const meta = registrySchema.describe()
+      const registrySchemaFieldDescription = Object.entries(meta.fields)
+
+      registrySchemaFieldDescription.map(it => {
+        const [field, value]: [string, any] = it
+        if (value.meta?.reset) {
+          formik.setFieldValue(field, '', false)
+          formik.setFieldError(field, '')
+        }
+      })
+    }
+
+    formik.setFieldValue('type', changedRegistry, false)
+  }
+
   return (
     <>
       <DyoCard className={props.className}>
@@ -151,7 +168,7 @@ const EditRegistryCard = (props: EditRegistryCardProps) => {
                 choices={REGISTRY_TYPE_VALUES}
                 initialSelection={formik.values.type}
                 converter={(it: RegistryType) => t(`type.${it}`)}
-                onSelectionChange={it => formik.setFieldValue('type', it, false)}
+                onSelectionChange={it => onRegistryTypeChange(it)}
               />
             </div>
 

diff --git a/web/crux-ui/src/models.ts b/web/crux-ui/src/models.ts
@@ -715,6 +715,7 @@ export const registryUrlOf = (it: RegistryDetails) => {
     case 'hub':
       return REGISTRY_HUB_URL
     case 'v2':
+    case 'google':
       return it.url
     case 'gitlab':
       return it.selfManaged ? it.url : REGISTRY_GITLAB_URLS.registryUrl

diff --git a/web/crux-ui/src/validation.ts b/web/crux-ui/src/validation.ts
@@ -62,11 +62,17 @@ export const createProductSchema = updateProductSchema.concat(
   }),
 )
 
-const registryCredentialRole = yup.mixed().when(['type', '_private'], {
-  is: (type, _private) => type === 'gitlab' || type === 'github' || ((type === 'v2' || type === 'google') && _private),
-  then: yup.string().required(),
-  otherwise: yup.mixed().transform(it => (it ? it : undefined)),
-})
+const shouldResetMetaData = { reset: true }
+
+const registryCredentialRole = yup
+  .mixed()
+  .meta(shouldResetMetaData)
+  .when(['type', '_private'], {
+    is: (type, _private) =>
+      type === 'gitlab' || type === 'github' || ((type === 'v2' || type === 'google') && _private),
+    then: yup.string().required(),
+    otherwise: yup.mixed().transform(it => (it ? it : undefined)),
+  })
 
 const googleRegistryUrls = ['gcr.io', 'us.gcr.io', 'eu.gcr.io', 'asia.gcr.io'] as const
 
@@ -75,21 +81,30 @@ export const registrySchema = yup.object().shape({
   description: descriptionRule,
   type: yup.mixed<RegistryType>().oneOf([...REGISTRY_TYPE_VALUES]),
   icon: iconRule,
-  imageNamePrefix: yup.string().when('type', {
-    is: type => ['hub', 'gitlab', 'github', 'google'].includes(type),
-    then: yup.string().required(),
-  }),
+  imageNamePrefix: yup
+    .string()
+    .meta(shouldResetMetaData)
+    .when('type', {
+      is: type => ['hub', 'gitlab', 'github', 'google'].includes(type),
+      then: yup.string().required(),
+    }),
   url: yup
     .string()
+    .meta(shouldResetMetaData)
     .when(['type', 'selfManaged'], {
       is: (type, selfManaged) => type === 'v2' || type === 'google' || (type === 'gitlab' && selfManaged),
       then: yup.string().required(),
     })
     .when(['type'], { is: type => type === 'google', then: yup.string().oneOf([...googleRegistryUrls]) }),
-  apiUrl: yup.string().when(['type', 'selfManaged'], {
-    is: (type, selfManaged) => type === 'gitlab' && selfManaged,
-    then: yup.string().required(),
-  }),
+  apiUrl: yup
+    .string()
+    .meta(shouldResetMetaData)
+    .when(['type', 'selfManaged'], {
+      is: (type, selfManaged) => type === 'gitlab' && selfManaged,
+      then: yup.string().required(),
+    }),
+  selfManaged: yup.mixed().meta(shouldResetMetaData),
+  _private: yup.mixed().meta(shouldResetMetaData),
   user: registryCredentialRole,
   token: registryCredentialRole,
 })