Merge pull request #6873 from jerolimov/odc-4906

Improve secret hostname hint

frontend/packages/dev-console/integration-tests/features/pipelines/pipelines-secrets.feature

@@ -13,7 +13,7 @@ Scenario: Add Secrets : P-11-TC01
    When user selects "Start" option from kebab menu for pipeline "pipe-task-with-resource"
    And user clicks on Show Credentials link present in Start Pipeline modal
    And user clicks on "Add Secret" link
-   Then user is able to see Create Source Secret section
+   Then user is able to see Create Secret section
    And user is able to see Secret Name, Access to, Server UrL fields and authernication type fields
 
 

frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json

@@ -73,17 +73,28 @@
   "{{type}} resources": "{{type}} resources",
   "Hide Credential options": "Hide Credential options",
   "Show Credential options": "Show Credential options",
-  "The following secrets are available for all pipelines in this namespace to authenticate to the specified Git server or Docker registry:": "The following secrets are available for all pipelines in this namespace to authenticate to the specified Git server or Docker registry:",
+  "The following secrets are available for all pipelines in this namespace to authenticate to the specified Git server or Image registry:": "The following secrets are available for all pipelines in this namespace to authenticate to the specified Git server or Image registry:",
   "Add Secret": "Add Secret",
   "Secret": "Secret",
   "Add item": "Add item",
   "Config Map": "Config Map",
   "Workspaces": "Workspaces",
-  "Create Source Secret": "Create Source Secret",
+  "Git Server": "Git Server",
+  "Image Registry": "Image Registry",
+  "Basic Authentication": "Basic Authentication",
+  "SSH Key": "SSH Key",
+  "Image Registry Credentials": "Image Registry Credentials",
+  "The base server url (e.g. https://quay.io/)": "The base server url (e.g. https://quay.io/)",
+  "The base server url (e.g. https://github.com)": "The base server url (e.g. https://github.com)",
+  "Server hostname without schema or path (e.g. github.com)": "Server hostname without schema or path (e.g. github.com)",
+  "Create Secret": "Create Secret",
   "Secret name": "Secret name",
   "Unique name of the new secret.": "Unique name of the new secret.",
+  "Access to": "Access to",
+  "Designate provider to be authenticated.": "Designate provider to be authenticated.",
   "Authentication type": "Authentication type",
-  "No source secrets found": "No source secrets found",
+  "Server URL": "Server URL",
+  "No secrets found": "No secrets found",
   "Advanced options": "Advanced options",
   "Start": "Start",
   "Start Pipeline": "Start Pipeline",

frontend/packages/pipelines-plugin/src/components/pipelines/const.ts

@@ -41,7 +41,7 @@ export enum SecretAnnotationId {
 
 export const SecretAnnotationType = {
   [SecretAnnotationId.Git]: 'Git Server',
-  [SecretAnnotationId.Image]: 'Docker Registry',
+  [SecretAnnotationId.Image]: 'Image Registry',
 };
 
 export const PIPELINE_SERVICE_ACCOUNT = 'pipeline';

frontend/packages/pipelines-plugin/src/components/pipelines/modals/common/PipelineSecretSection.tsx

@@ -72,7 +72,7 @@ const PipelineSecretSection: React.FC<PipelineSecretSectionProps> = ({ namespace
       <div className="odc-pipeline-secret-section">
         <p>
           {t(
-            'pipelines-plugin~The following secrets are available for all pipelines in this namespace to authenticate to the specified Git server or Docker registry:',
+            'pipelines-plugin~The following secrets are available for all pipelines in this namespace to authenticate to the specified Git server or Image registry:',
           )}
         </p>
         <div className="odc-pipeline-secret-section__secrets">

frontend/packages/pipelines-plugin/src/components/pipelines/modals/common/SecretForm.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
-import { FormikValues, useFormikContext } from 'formik';
+import { FormikProps } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
 import { ButtonBar } from '@console/internal/components/utils';
 import {
@@ -11,15 +11,9 @@ import {
   CreateConfigSubform,
 } from '@console/internal/components/secrets/create-secret';
 import { DropdownField, InputField, ActionGroupWithIcons } from '@console/shared';
-import SecretAnnotation from './SecretAnnotation';
+import { SecretAnnotationId } from '../../const';
 import './SecretForm.scss';
 
-const authTypes = {
-  [SecretType.dockerconfigjson]: 'Image Registry Credentials',
-  [SecretType.basicAuth]: 'Basic Authentication',
-  [SecretType.sshAuth]: 'SSH Key',
-};
-
 const renderSecretForm = (
   type: SecretType,
   stringData: {
@@ -48,20 +42,87 @@ const renderSecretForm = (
   }
 };
 
-const SecretForm: React.FC<FormikValues> = ({
+interface SecretFormValues {
+  secretName: string;
+  type: SecretType;
+  annotations: {
+    key: SecretAnnotationId;
+    value: string; // url
+  };
+  formData: any;
+}
+
+const SecretForm: React.FC<FormikProps<SecretFormValues>> = ({
+  values,
+  setFieldValue,
+  setFieldTouched,
   handleSubmit,
   handleReset,
   status,
   isSubmitting,
 }) => {
   const { t } = useTranslation();
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
   const [stringData, setStringData] = React.useState({
     [SecretType.basicAuth]: {},
     [SecretType.sshAuth]: {},
     [SecretType.dockerconfigjson]: {},
   });
 
+  const secretTypes = React.useMemo<Record<string, string>>(
+    () => ({
+      [SecretAnnotationId.Git]: t('pipelines-plugin~Git Server'),
+      [SecretAnnotationId.Image]: t('pipelines-plugin~Image Registry'),
+    }),
+    [t],
+  );
+
+  const authTypes = React.useMemo<Record<string, string>>(() => {
+    switch (values.annotations.key) {
+      case SecretAnnotationId.Git:
+        return {
+          [SecretType.basicAuth]: t('pipelines-plugin~Basic Authentication'),
+          [SecretType.sshAuth]: t('pipelines-plugin~SSH Key'),
+        };
+      case SecretAnnotationId.Image:
+        return {
+          [SecretType.basicAuth]: t('pipelines-plugin~Basic Authentication'),
+          [SecretType.dockerconfigjson]: t('pipelines-plugin~Image Registry Credentials'),
+        };
+      default:
+        return {};
+    }
+  }, [values.annotations.key, t]);
+
+  const clearServerURL = React.useCallback(() => {
+    setFieldValue('annotations', {
+      key: values.annotations.key,
+      value: '', // clear url
+    });
+    setFieldTouched('annotations', false);
+  }, [setFieldTouched, setFieldValue, values.annotations.key]);
+
+  React.useEffect(() => {
+    const availableAuthTypes = Object.keys(authTypes);
+    if (!availableAuthTypes.includes(values.type)) {
+      setFieldValue('type', SecretType.basicAuth);
+      clearServerURL();
+    }
+  }, [authTypes, values.type, setFieldValue, clearServerURL]);
+
+  // Uses a memo instead of const outside of the function so that we can add i18n right here
+  const helpText = React.useMemo(
+    () => ({
+      [SecretType.dockerconfigjson]: t(
+        'pipelines-plugin~The base server url (e.g. https://quay.io/)',
+      ),
+      [SecretType.basicAuth]: t('pipelines-plugin~The base server url (e.g. https://github.com)'),
+      [SecretType.sshAuth]: t(
+        'pipelines-plugin~Server hostname without schema or path (e.g. github.com)',
+      ),
+    }),
+    [t],
+  );
+
   const setValues = (type: SecretType) => {
     if (type === SecretType.dockerconfigjson) {
       setFieldValue(
@@ -71,6 +132,9 @@ const SecretForm: React.FC<FormikValues> = ({
     } else {
       setFieldValue('formData', stringData[type]);
     }
+    if (values.type !== type) {
+      clearServerURL();
+    }
   };
 
   const onDataChanged = (value: string) => {
@@ -81,19 +145,26 @@ const SecretForm: React.FC<FormikValues> = ({
   return (
     <div className="odc-secret-form">
       <h1 className="co-section-heading-tertiary odc-secret-form__title">
-        {t('pipelines-plugin~Create Source Secret')}
+        {t('pipelines-plugin~Create Secret')}
       </h1>
       <div className="form-group">
         <InputField
           type={TextInputTypes.text}
-          required
           name="secretName"
           label={t('pipelines-plugin~Secret name')}
           helpText={t('pipelines-plugin~Unique name of the new secret.')}
+          required
         />
       </div>
       <div className="form-group">
-        <SecretAnnotation fieldName="annotations" />
+        <DropdownField
+          name="annotations.key"
+          label={t('pipelines-plugin~Access to')}
+          helpText={t('pipelines-plugin~Designate provider to be authenticated.')}
+          items={secretTypes}
+          fullWidth
+          required
+        />
       </div>
       <div className="form-group">
         <DropdownField
@@ -106,6 +177,15 @@ const SecretForm: React.FC<FormikValues> = ({
           required
         />
       </div>
+      <div className="form-group">
+        <InputField
+          name="annotations.value"
+          label={t('pipelines-plugin~Server URL')}
+          helpText={helpText[values.type]}
+          type={TextInputTypes.text}
+          required
+        />
+      </div>
       {renderSecretForm(values.type, stringData, onDataChanged)}
       <ButtonBar errorMessage={status?.submitError} inProgress={isSubmitting}>
         <ActionGroupWithIcons onSubmit={handleSubmit} onClose={handleReset} />

frontend/packages/pipelines-plugin/src/components/pipelines/modals/common/SecretsList.tsx

@@ -52,7 +52,7 @@ const Secrets: React.FC<SecretsProps> = ({ secrets, serviceaccounts }) => {
         );
       })}
       {_.isEmpty(sortedFilterData) && (
-        <SecondaryStatus status={t('pipelines-plugin~No source secrets found')} />
+        <SecondaryStatus status={t('pipelines-plugin~No secrets found')} />
       )}
     </div>
   );