feat: add authentication type radio button

Author: arunjaindev

src/components/dockerRegistry/Docker.tsx

@@ -53,6 +53,7 @@ import {
     RegistryIcon,
     ComponentSizeType,
     PasswordField,
+    OtherRegistryAuthenticationType,
 } from '@devtron-labs/devtron-fe-common-lib'
 import Tippy from '@tippyjs/react'
 import { useHistory, useParams, useRouteMatch } from 'react-router-dom'
@@ -100,6 +101,7 @@ import { VALIDATION_STATUS, ValidateForm } from '../common/ValidateForm/Validate
 const RegistryHelmPushCheckbox = importComponentFromFELibrary('RegistryHelmPushCheckbox')
 const RemoteConnectionRadio = importComponentFromFELibrary('RemoteConnectionRadio')
 const getRemoteConnectionConfig = importComponentFromFELibrary('getRemoteConnectionConfig', noop, 'function')
+const AuthenticationTypeRadio = importComponentFromFELibrary('AuthenticationTypeRadio', null, 'function')
 
 enum CERTTYPE {
     SECURE = 'secure',
@@ -259,6 +261,7 @@ const CollapsedList = ({
     repositoryList = [],
     disabledFields = [],
     ociRegistryConfig,
+    credentialsType,
     ...rest
 }) => {
     const [collapsed, toggleCollapse] = useState(true)
@@ -338,6 +341,7 @@ const CollapsedList = ({
                         isPublic,
                         disabledFields,
                         ociRegistryConfig,
+                        credentialsType,
                     }}
                 />
             )}
@@ -377,6 +381,7 @@ const DockerForm = ({
         : {
               CONTAINER: OCIRegistryConfigConstants.PULL_PUSH,
           },
+    credentialsType: authCredentialsType,
     ...rest
 }) => {
     const re = PATTERNS.APP_NAME
@@ -539,6 +544,9 @@ const DockerForm = ({
     const [registryStorageType, setRegistryStorageType] = useState<string>(
         isPublic ? RegistryStorageType.OCI_PUBLIC : RegistryStorageType.OCI_PRIVATE,
     )
+    const [authenticationType, setAuthenticationType] = useState<OtherRegistryAuthenticationType>(
+        id ? authCredentialsType : OtherRegistryAuthenticationType.USERNAME_PASSWORD,
+    )
 
     const InitialValueOfIsContainerStore: boolean =
         ociRegistryConfig?.CONTAINER === OCIRegistryConfigConstants.PULL_PUSH
@@ -712,6 +720,11 @@ const DockerForm = ({
         }
     }
 
+    const handleChangeOtherRegistryAuthType = (e) => {
+        const updatedAuthType = e.target.value as OtherRegistryAuthenticationType
+        setAuthenticationType(updatedAuthType)
+    }
+
     function fetchAWSRegion(): string {
         const pattern =
             registryStorageType === RegistryStorageType.OCI_PUBLIC
@@ -839,6 +852,9 @@ const DockerForm = ({
                 customState.remoteConnectionConfig.connectionMethod.value,
                 sshConnectionType,
             ),
+            ...(AuthenticationTypeRadio && selectedDockerRegistryType.value === RegistryType.OTHER
+                ? { credentialsType: authenticationType }
+                : {}),
         }
     }
 
@@ -1003,6 +1019,7 @@ const DockerForm = ({
                 let error = false
                 if (
                     registryStorageType === RegistryStorageType.OCI_PRIVATE &&
+                    authenticationType === OtherRegistryAuthenticationType.USERNAME_PASSWORD &&
                     (!customState.username.value || !(customState.password.value || id))
                 ) {
                     setCustomState((st) => ({
@@ -1605,13 +1622,25 @@ const DockerForm = ({
                     </>
                 )
             }
+
+            const isUserNamePasswordRequired =
+                selectedDockerRegistryType.value === RegistryType.OTHER
+                    ? authenticationType === OtherRegistryAuthenticationType.USERNAME_PASSWORD
+                    : true
+
             return (
                 <>
+                    {AuthenticationTypeRadio && selectedDockerRegistryType.value === RegistryType.OTHER && (
+                        <AuthenticationTypeRadio
+                            authenticationType={authenticationType}
+                            handleChangeOtherRegistryAuthType={handleChangeOtherRegistryAuthType}
+                        />
+                    )}
                     <div className={`${isGCROrGCP ? '' : 'form__row--two-third'}`}>
                         <div className="form__row">
                             <CustomInput
                                 name="username"
-                                required
+                                required={isUserNamePasswordRequired}
                                 value={customState.username.value || selectedDockerRegistryType.id.defaultValue}
                                 error={customState.username.error}
                                 onChange={customHandleChange}
@@ -1632,7 +1661,7 @@ const DockerForm = ({
                                 <PasswordField
                                     shouldShowDefaultPlaceholderOnBlur={!!id}
                                     name="password"
-                                    required
+                                    required={isUserNamePasswordRequired}
                                     value={customState.password.value}
                                     error={customState.password.error}
                                     onChange={customHandleChange}

src/components/dockerRegistry/service.tsx

@@ -17,6 +17,7 @@
 import { post, put, get, trash } from '@devtron-labs/devtron-fe-common-lib'
 import { Routes } from '../../config'
 
+// Dead code
 export function getDockerRegistryConfig(id: string): Promise<any> {
     const URL = `${Routes.DOCKER_REGISTRY_CONFIG}/${id}`
     return get(URL)

src/config/constants.ts

@@ -21,6 +21,7 @@ import {
     ToastManager,
     ROUTES as COMMON_ROUTES,
     EnvResourceType,
+    OtherRegistryAuthenticationType,
 } from '@devtron-labs/devtron-fe-common-lib'
 export const DEFAULT_STATUS = 'checking'
 export const DEFAULT_STATUS_TEXT = 'Checking Status'
@@ -471,6 +472,7 @@ export type OCIRegistryStorageConfigType = {
     CONTAINER?: OCIRegistryStorageActionType
     CHART?: OCIRegistryStorageActionType
 }
+
 export const OCIRegistryConfigConstants: Record<string, OCIRegistryStorageActionType> = {
     PULL: 'PULL',
     PUSH: 'PUSH',
@@ -541,6 +543,7 @@ export interface RegistryPayloadType {
             sshAuthKey: string
         }
     }
+    credentialsType?: OtherRegistryAuthenticationType
 }
 
 export interface RegistryPayloadWithSelectType extends RegistryPayloadType, SelectPickerOptionType {}

src/services/service.ts

@@ -250,8 +250,7 @@ export function getDockerRegistryStatus(isStorageActionPush?: boolean): Promise<
 }
 
 export function getDockerRegistryList(): Promise<ResponseType> {
-    const URL = `${Routes.DOCKER_REGISTRY_CONFIG}`
-    return get(URL)
+    return get(Routes.DOCKER_REGISTRY_CONFIG)
 }
 
 export function getAppOtherEnvironmentMin(