feat(secret): add source secrets

src/components/ImportForm/SecretSection/SecretSection.tsx

@@ -8,7 +8,7 @@ import { useSecrets } from '../../../hooks/useSecrets';
 import { SecretModel } from '../../../models';
 import TextColumnField from '../../../shared/components/formik-fields/text-column-field/TextColumnField';
 import { useNamespace } from '../../../shared/providers/Namespace';
-import { BuildTimeSecret, SecretType } from '../../../types';
+import { BuildTimeSecret, SecretType, SecretTypeDropdownLabel } from '../../../types';
 import { AccessReviewResources } from '../../../types/rbac';
 import { useAccessReviewForModels } from '../../../utils/rbac';
 import { ButtonWithAccessTooltip } from '../../ButtonWithAccessTooltip';
@@ -28,18 +28,27 @@ const SecretSection = () => {
 
   const partnerTaskSecrets: BuildTimeSecret[] =
     secrets && secretsLoaded
-      ? secrets?.map((secret) => ({
-          type: secret.type as SecretType,
-          name: secret.metadata.name,
-          providerUrl: '',
-          tokenKeyName: secret.metadata.name,
-          keyValuePairs: Object.keys(secret.data).map((key) => ({
+      ? secrets?.map((secret) => {
+          const keyValuePairs = Object.keys(secret.data).map((key) => ({
             key,
             value: Base64.decode(secret.data[key]),
             readOnlyKey: true,
             readOnlyValue: true,
-          })),
-        }))
+          }));
+
+          return {
+            type: secret.type as SecretType,
+            name: secret.metadata.name,
+            providerUrl: '',
+            tokenKeyName: secret.metadata.name,
+            opaque: [SecretType.dockercfg, SecretType.dockerconfigjson, SecretType.opaque].includes(
+              secret.type as SecretType,
+            )
+              ? { keyValuePairs }
+              : null,
+            image: secret.type === SecretTypeDropdownLabel.image ? { keyValuePairs } : null,
+          };
+        })
       : [];
 
   const onSubmit = React.useCallback(

src/components/ImportForm/__tests__/submit-utils.spec.ts

@@ -101,18 +101,20 @@ describe('Submit Utils: createResources', () => {
                 type: SecretType.opaque,
                 providerUrl: '',
                 tokenKeyName: 'secret',
-                keyValuePairs: [
-                  {
-                    key: 'secret',
-                    value: 'value',
-                    readOnlyKey: true,
-                  },
-                ],
+                opaque: {
+                  keyValuePairs: [
+                    {
+                      key: 'secret',
+                      value: 'value',
+                      readOnlyKey: true,
+                    },
+                  ],
+                },
               },
             ],
             type: 'Opaque',
             secretName: 'secret',
-            keyValues: [{ key: 'secret', value: 'test-value', readOnlyKey: true }],
+            opaque: { keyValues: [{ key: 'secret', value: 'test-value', readOnlyKey: true }] },
           },
         ],
       },

src/components/ImportForm/submit-utils.ts

@@ -120,7 +120,7 @@ export const createResources = async (
       isPrivate: isPrivateRepo,
       bombinoUrl,
     });
-    await createSecrets(importSecrets, namespace, false);
+    await createSecrets(secretsToCreate, namespace, false);
   }
 
   return {

src/components/Secrets/SecretForm.tsx

@@ -12,6 +12,7 @@
   BuildTimeSecret,
 } from '../../types';
 import { RawComponentProps } from '../modal/createModalLauncher';
+import { SourceSecretForm } from './SecretsForm/SourceSecretForm';
 import SecretTypeSelector from './SecretTypeSelector';
 import {
   supportedPartnerTasksSecrets,
@@ -41,6 +42,7 @@
       .filter((secret) => secret.type !== K8sSecretType[SecretTypeDropdownLabel.image])
       .map((secret) => ({ value: secret.name, lable: secret.name }));
   }, [currentType, existingSecrets]);
+
   const optionsValues = useMemo(() => {
     return existingSecrets
       .filter((secret) => secret.type === K8sSecretType[currentType])
@@ -55,28 +57,28 @@
   }, [currentType, existingSecrets]);
 
   const clearKeyValues = () => {
-    const newKeyValues = values.keyValues.filter((kv) => !kv.readOnlyKey);
+    const newKeyValues = values.opaque.keyValues.filter((kv) => !kv.readOnlyKey);
     void setFieldValue('keyValues', [...(newKeyValues.length ? newKeyValues : defaultKeyValues)]);
   };
 
   const resetKeyValues = () => {
     options = [];
-    const newKeyValues = values.keyValues.filter(
+    const newKeyValues = values.opaque.keyValues.filter(
       (kv) => !kv.readOnlyKey && (!!kv.key || !!kv.value),
     );
     void setFieldValue('keyValues', [...newKeyValues, ...defaultImageKeyValues]);
   };
 
   const dropdownItems: DropdownItemObject[] = Object.entries(SecretTypeDropdownLabel).reduce(
     (acc, [key, value]) => {
-      value !== SecretTypeDropdownLabel.source && acc.push({ key, value });
+      acc.push({ key, value });
       return acc;
     },
     [],
   );
 
   return (
-    <Form>
+    <Form data-test="secret-form">
       <SecretTypeSelector
         dropdownItems={dropdownItems}
         onChange={(type) => {
@@ -86,6 +88,12 @@
             values.secretName &&
               isPartnerTask(values.secretName, optionsValues) &&
               void setFieldValue('secretName', '');
+          }
+          if (type === SecretTypeDropdownLabel.source) {
+            resetKeyValues();
+            values.secretName &&
+              isPartnerTask(values.secretName) &&
+              void setFieldValue('secretName', '');
           } else {
             clearKeyValues();
           }
@@ -94,6 +102,7 @@
       <SelectInputField
         required
         key={values.type}
+        data-test="secret-name"
         name="secretName"
         label="Select or enter secret name"
         helpText="Unique name of the new secret."
@@ -111,20 +120,27 @@
         }}
         onSelect={(_, value: string) => {
           if (isPartnerTask(value, optionsValues)) {
-            void setFieldValue('keyValues', [
-              ...values.keyValues.filter((kv) => !kv.readOnlyKey && (!!kv.key || !!kv.value)),
+            void setFieldValue('opaque.keyValues', [
+              ...values.opaque.keyValues.filter(
+                (kv) => !kv.readOnlyKey && (!!kv.key || !!kv.value),
+              ),
               ...getSupportedPartnerTaskKeyValuePairs(value, optionsValues),
             ]);
           }
           void setFieldValue('secretName', value);
         }}
       />
-      <KeyValueFileInputField
-        name="keyValues"
-        data-test="secret-key-value-pair"
-        entries={defaultKeyValues}
-        disableRemoveAction={values.keyValues.length === 1}
-      />
+      {currentType === SecretTypeDropdownLabel.source && <SourceSecretForm />}
+      {currentType !== SecretTypeDropdownLabel.source && (
+        <KeyValueFileInputField
+          required
+          name={
+            currentType === SecretTypeDropdownLabel.opaque ? 'opaque.keyValues' : 'image.keyValues'
+          }
+          entries={defaultKeyValues}
+          disableRemoveAction={values.opaque.keyValues.length === 1}
+        />
+      )}
     </Form>
   );
 };

src/components/Secrets/SecretModal.tsx

@@ -1,14 +1,8 @@
 import * as React from 'react';
-import {
-  Alert,
-  Button,
-  Modal,
-  ModalBoxBody,
-  ModalBoxHeader,
-  ModalVariant,
-} from '@patternfly/react-core';
+import { Button, Modal, ModalBoxBody, ModalVariant } from '@patternfly/react-core';
 import { Formik } from 'formik';
-import { ImportSecret, SecretTypeDropdownLabel, BuildTimeSecret } from '../../types';
+import { isEmpty } from 'lodash-es';
+import { ImportSecret, SecretTypeDropdownLabel, SourceSecretType, BuildTimeSecret } from '../../types';
 import { SecretFromSchema } from '../../utils/validation-utils';
 import { RawComponentProps } from '../modal/createModalLauncher';
 import SecretForm from './SecretForm';
@@ -42,7 +36,15 @@
   const initialValues: SecretModalValues = {
     secretName: '',
     type: SecretTypeDropdownLabel.opaque,
-    keyValues: defaultKeyValues,
+    opaque: {
+      keyValues: defaultKeyValues,
+    },
+    image: {
+      keyValues: defaultKeyValues,
+    },
+    source: {
+      authType: SourceSecretType.basic,
+    },
     existingSecrets,
   };
 
@@ -68,6 +70,7 @@
               onClick={() => {
                 props.handleSubmit();
               }}
+              isDisabled={!props.dirty || !isEmpty(props.errors) || props.isSubmitting}
             >
               Create
             </Button>,
@@ -76,12 +79,6 @@
             </Button>,
           ]}
         >
-          <ModalBoxHeader>
-            <Alert
-              isInline
-              title="For now we only support Opaque secret and Image pull secret types, but we’ll be expanding to more types in the future."
-            />
-          </ModalBoxHeader>
           <ModalBoxBody>
             <SecretForm existingSecrets={existingSecrets} />
           </ModalBoxBody>

src/components/Secrets/SecretsForm/AddSecretForm.tsx

@@ -45,7 +45,7 @@ const AddSecretForm: React.FC = () => {
         navigate(-1);
       }}
       onSubmit={(values, actions) => {
-        addSecret(values, workspace, namespace)
+        addSecret(values, namespace)
           .then(() => {
             navigate(`/workspaces/${workspace}/secrets`);
           })

src/components/Secrets/SecretsForm/MultiImageCredentialForm.tsx

@@ -71,14 +71,14 @@ export const MultiImageCredentialForm: React.FC<
                 name={`${name}.${idx.toString()}.username`}
                 label="Username"
                 helperText="For image registry authentication"
-                required
+                isRequired
               />
               <InputField
                 name={`${name}.${idx.toString()}.password`}
                 label="Password"
                 type={TextInputTypes.password}
                 helperText="For image registry authentication"
-                required
+                isRequired
               />
               <InputField
                 name={`${name}.${idx.toString()}.email`}

src/components/Secrets/SecretsForm/SecretTypeSubForm.tsx

@@ -116,6 +116,7 @@ export const SecretTypeSubForm: React.FC<React.PropsWithChildren<unknown>> = ()
       {isPartnerTaskAvailable(currentTypeRef.current) ? (
         <SelectInputField
           name="name"
+          data-test="secret-name"
           label="Select or enter secret name"
           toggleAriaLabel="Select or enter secret name"
           helpText="Unique name of the new secret"
@@ -144,6 +145,7 @@ export const SecretTypeSubForm: React.FC<React.PropsWithChildren<unknown>> = ()
       ) : (
         <InputField
           name="name"
+          data-test="secret-name"
           label="Secret name"
           helperText="Unique name of the new secret"
           placeholder="Enter name"

src/components/Secrets/SecretsForm/SourceSecretForm.tsx

@@ -26,9 +26,16 @@ export const SourceSecretForm: React.FC<React.PropsWithChildren<unknown>> = () =
       <InputField name="source.repo" label="Repository" helperText="Repository for the secret" />
       {type === SourceSecretType.basic ? (
         <>
-          <InputField name="source.username" label="Username" helperText="For Git authentication" />
+          <InputField
+            name="source.username"
+            data-test="secret-source-username"
+            label="Username"
+            helperText="For Git authentication"
+            isRequired
+          />
           <InputField
             name="source.password"
+            data-test="secret-source-password"
             label="Password"
             type={TextInputTypes.password}
             helperText="For Git authentication"