Improve secret hostname hint

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

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import * as _ from 'lodash';
-import { FormikValues, useFormikContext } from 'formik';
+import { FormikProps } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
 import { ButtonBar } from '@console/internal/components/utils';
 import {
@@ -10,15 +10,9 @@ import {
   CreateConfigSubform,
 } from '@console/internal/components/secrets/create-secret';
 import { DropdownField, InputField, ActionGroupWithIcons } from '@console/shared';
-import SecretAnnotation from './SecretAnnotation';
+import { SecretAnnotationId, SecretAnnotationType } 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: {
@@ -47,19 +41,64 @@ 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,
   handleSubmit,
   handleReset,
   status,
   isSubmitting,
 }) => {
-  const { values, setFieldValue } = useFormikContext<FormikValues>();
   const [stringData, setStringData] = React.useState({
     [SecretType.basicAuth]: {},
     [SecretType.sshAuth]: {},
     [SecretType.dockerconfigjson]: {},
   });
 
+  const authTypes = React.useMemo<Record<string, string>>(() => {
+    switch (values.annotations.key) {
+      case SecretAnnotationId.Git:
+        return {
+          [SecretType.basicAuth]: 'Basic Authentication',
+          [SecretType.sshAuth]: 'SSH Key',
+        };
+      case SecretAnnotationId.Image:
+        return {
+          [SecretType.basicAuth]: 'Basic Authentication',
+          [SecretType.dockerconfigjson]: 'Image Registry Credentials',
+        };
+      default:
+        return {};
+    }
+  }, [values.annotations.key]);
+
+  React.useEffect(() => {
+    const availableAuthTypes = Object.keys(authTypes);
+    if (!availableAuthTypes.includes(values.type)) {
+      setFieldValue('type', SecretType.basicAuth);
+    }
+  }, [authTypes, values.type, setFieldValue]);
+
+  // Uses a memo instead of const outside of the function so that we can add i18n right here
+  const helpText = React.useMemo(
+    () => ({
+      [SecretType.dockerconfigjson]: 'The base server url (e.g. https://quay.io/)',
+      [SecretType.basicAuth]: 'The base server url (e.g. https://github.com)',
+      [SecretType.sshAuth]: 'Server hostname without schema or path (e.g. github.com)',
+    }),
+    [],
+  );
+
   const setValues = (type: SecretType) => {
     if (type === SecretType.dockerconfigjson) {
       setFieldValue(
@@ -89,7 +128,13 @@ const SecretForm: React.FC<FormikValues> = ({
         />
       </div>
       <div className="form-group">
-        <SecretAnnotation fieldName="annotations" />
+        <DropdownField
+          name="annotations.key"
+          items={SecretAnnotationType}
+          label="Access to"
+          fullWidth
+          required
+        />
       </div>
       <div className="form-group">
         <DropdownField
@@ -102,6 +147,15 @@ const SecretForm: React.FC<FormikValues> = ({
           required
         />
       </div>
+      <div className="form-group">
+        <InputField
+          name="annotations.value"
+          helpText={helpText[values.type]}
+          type={TextInputTypes.text}
+          label="Server URL"
+          required
+        />
+      </div>
       {renderSecretForm(values.type, stringData, onDataChanged)}
       <ButtonBar errorMessage={status?.submitError} inProgress={isSubmitting}>
         <ActionGroupWithIcons onSubmit={handleSubmit} onClose={handleReset} />