feat: add private unchecked registry (#1001)

Co-authored-by: Levente Orban <orban.levi.94@gmail.com>

web/crux-ui/src/components/registries/edit-registry-card.tsx

@@ -19,12 +19,12 @@ import {
   EditableGoogleRegistryDetails,
   EditableHubRegistryDetails,
   EditableRegistry,
+  EditableUncheckedRegistryDetails,
   EditableV2RegistryDetails,
   PUBLIC_REGISTRY_TYPES,
   REGISTRY_TYPE_VALUES,
   RegistryDetails,
   RegistryType,
-  UncheckedRegistryDetails,
   UpdateRegistryDto,
   editableRegistryToDto,
 } from '@app/models'
@@ -216,7 +216,7 @@ const EditRegistryCard = (props: EditRegistryCardProps) => {
           ) : registryType === 'google' ? (
             <GoogleRegistryFields formik={formik as FormikProps<EditableGoogleRegistryDetails>} />
           ) : registryType === 'unchecked' ? (
-            <UncheckedRegistryFields formik={formik as FormikProps<UncheckedRegistryDetails>} />
+            <UncheckedRegistryFields formik={formik as FormikProps<EditableUncheckedRegistryDetails>} />
           ) : (
             <div className="bg-red-500">{t('unknownRegistryType', { registryType })}</div>
           )}

web/crux-ui/src/components/registries/registry-fields/unchecked-registry-field.tsx

@@ -1,15 +1,19 @@
 import { DyoInput } from '@app/elements/dyo-input'
 import { DyoLabel } from '@app/elements/dyo-label'
+import DyoPassword from '@app/elements/dyo-password'
 import DyoToggle from '@app/elements/dyo-toggle'
-import { UncheckedRegistryDetails } from '@app/models'
-import { EditRegistryTypeProps } from '@app/utils'
+import { EditableUncheckedRegistryDetails } from '@app/models'
+import { EditRegistryTypeProps, formikSetFieldValueOrIgnore } from '@app/utils'
 import useTranslation from 'next-translate/useTranslation'
 
-const UncheckedRegistryFields = (props: EditRegistryTypeProps<UncheckedRegistryDetails>) => {
+const UncheckedRegistryFields = (props: EditRegistryTypeProps<EditableUncheckedRegistryDetails>) => {
   const { formik } = props
+  const { values, errors, handleChange, setFieldValue } = formik
 
   const { t } = useTranslation('registries')
 
+  const editing = !!values.id
+
   return (
     <>
       <DyoLabel className="text-light mt-2">{t('tips.unchecked')}</DyoLabel>
@@ -18,28 +22,83 @@ const UncheckedRegistryFields = (props: EditRegistryTypeProps<UncheckedRegistryD
         className="mt-8"
         name="local"
         label={t('useLocalImages')}
-        checked={formik.values.local ?? false}
+        checked={values.local ?? false}
         setFieldValue={async (field, value, shouldValidate): Promise<void> => {
           if (!value) {
-            await formik.setFieldValue('url', '', false)
+            await setFieldValue('url', '', false)
           }
 
-          await formik.setFieldValue(field, value, shouldValidate)
+          await setFieldValue(field, value, shouldValidate)
         }}
       />
 
-      {!formik.values.local && (
+      {!values.local && (
         <DyoInput
           className="max-w-lg"
           grow
           name="url"
           type="text"
           label={t('url')}
-          onChange={formik.handleChange}
-          value={formik.values.url}
-          message={formik.errors.url}
+          onChange={handleChange}
+          value={values.url}
+          message={errors.url}
         />
       )}
+
+      <DyoToggle
+        className="mt-8"
+        name="public"
+        label={t('common:public')}
+        checked={values.public}
+        setFieldValue={async (field, value, shouldValidate) => {
+          if (!value) {
+            await setFieldValue('user', '', false)
+            await setFieldValue('token', '', false)
+          }
+
+          await setFieldValue(field, value, shouldValidate)
+        }}
+      />
+
+      {!values.public && (
+        <>
+          {editing && (
+            <DyoToggle
+              className="mt-8"
+              disabled={!editing}
+              name="changeCredentials"
+              label={t('common:changeCredentials')}
+              checked={values.changeCredentials}
+              setFieldValue={formikSetFieldValueOrIgnore(formik, !editing)}
+            />
+          )}
+
+          {values.changeCredentials && (
+            <>
+              <DyoInput
+                className="max-w-lg"
+                grow
+                name="user"
+                type="text"
+                label={t('user')}
+                onChange={handleChange}
+                value={values.user}
+                message={errors.user}
+              />
+
+              <DyoPassword
+                className="max-w-lg"
+                grow
+                name="token"
+                label={t('token')}
+                onChange={handleChange}
+                value={values.token}
+                message={errors.token}
+              />
+            </>
+          )}
+        </>
+      )}
     </>
   )
 }

web/crux-ui/src/models/registry.ts

@@ -3,7 +3,7 @@ import { REGISTRY_GITHUB_URL, REGISTRY_GITLAB_URLS, REGISTRY_HUB_URL } from '@ap
 export const REGISTRY_TYPE_VALUES = ['v2', 'hub', 'gitlab', 'github', 'google', 'unchecked'] as const
 export type RegistryType = (typeof REGISTRY_TYPE_VALUES)[number]
 
-export const PUBLIC_REGISTRY_TYPES: RegistryType[] = ['hub', 'v2', 'google']
+export const PUBLIC_REGISTRY_TYPES: RegistryType[] = ['hub', 'v2', 'unchecked', 'google']
 
 export const GITHUB_NAMESPACE_VALUES = ['organization', 'user'] as const
 export const GITLAB_NAMESPACE_VALUES = ['group', 'project'] as const
@@ -104,9 +104,11 @@ type UncheckedRegistryDetailsBase = {
   type: 'unchecked'
   local?: boolean
   url: string
+  public: boolean
 }
 
 export type UncheckedRegistryDetails = RegistryDetailsBase & UncheckedRegistryDetailsBase
+export type EditableUncheckedRegistryDetails = EditableRegistryCredentials & UncheckedRegistryDetails
 
 type UpsertDetailsDto<T> = Omit<T & Partial<EditableRegistryCredentials>, 'type' | 'changeCredentials'>
 
@@ -358,9 +360,12 @@ export const editableRegistryToDto = (ui: EditableRegistry): CreateRegistryDto =
       }
     }
     case 'unchecked': {
-      const details: Omit<UncheckedRegistryDetailsBase, 'type'> = {
+      const details: UpsertDetailsDto<UncheckedRegistryDetailsBase> = {
         url: ui.url,
         local: ui.local,
+        public: ui.public,
+        user: !ui.public && ui.changeCredentials ? ui.user : null,
+        token: !ui.public && ui.changeCredentials ? ui.token : null,
       }
 
       return {

web/crux-ui/src/validations/registry.ts

@@ -27,7 +27,7 @@ const createRegistryCredentialRole = (label: string) =>
     .meta(shouldResetMetaData)
     .requiredWhenTypeIs({
       public: ['gitlab', 'github'],
-      private: ['v2', 'google', 'hub'],
+      private: ['v2', 'unchecked', 'google', 'hub'],
     })
     .label(label)
 
@@ -90,6 +90,7 @@ export const registrySchema = yup.object().shape({
     gitlab: 'token',
     github: 'pat',
     v2: 'token',
+    unchecked: 'token',
     google: 'privateKey',
     hub: 'token',
   }),

web/crux/src/app/registry/registry.dto.ts

@@ -236,6 +236,16 @@ export class CreateUncheckedRegistryDetailsDto {
 
   @IsBoolean()
   local: boolean
+
+  @IsString()
+  @IsOptional()
+  @ValidateIf(privateAndPropertyIsPresent('token'))
+  user?: string
+
+  @IsString()
+  @IsOptional()
+  @ValidateIf(privateAndPropertyIsPresent('user'))
+  token?: string
 }
 
 export class UpdateHubRegistryDetailsDto extends CreateHubRegistryDetailsDto {}

web/crux/src/app/registry/registry.mapper.ts

@@ -85,6 +85,7 @@ export default class RegistryMapper {
         : registry.type === RegistryTypeEnum.unchecked
         ? {
             url: registry.url,
+            public: !registry.user,
           }
         : null
 
@@ -171,12 +172,14 @@ export default class RegistryMapper {
         }
       }
       case 'unchecked': {
-        const details = req.details as CreateUncheckedRegistryDetailsDto | UpdateUncheckedRegistryDetailsDto
+        const details = this.dtoDetailsToDb(
+          req.details as CreateUncheckedRegistryDetailsDto | UpdateUncheckedRegistryDetailsDto,
+        )
         return {
           type: RegistryTypeEnum.unchecked,
           url: details.local ? '' : details.url,
-          user: null,
-          token: null,
+          user: details.user,
+          token: details.token,
           apiUrl: null,
           imageNamePrefix: null,
           namespace: null,