fix form view validation and yaml data first load

openshift · Nov 23, 2021 · 74e6b1e · 74e6b1e
1 parent 56f0065
commit 74e6b1e
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 18 deletions.
diff --git a/frontend/packages/knative-plugin/src/components/add/channels/ChannelForm.tsx b/frontend/packages/knative-plugin/src/components/add/channels/ChannelForm.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Alert } from '@patternfly/react-core';
+import { Alert, AlertActionCloseButton } from '@patternfly/react-core';
 import { FormikProps, FormikValues, useFormikContext } from 'formik';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
@@ -21,6 +21,7 @@ import {
   useDefaultChannelConfiguration,
   getCatalogChannelData,
   channelYamltoFormData,
+  getCreateChannelData,
 } from '../../../utils/create-channel-utils';
 import { AddChannelFormData, ChannelListProps, YamlFormSyncData } from '../import-types';
 import ChannelSelector from './form-fields/ChannelSelector';
@@ -55,28 +56,37 @@ const ChannelForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
   const [defaultConfiguredChannel, defaultConfiguredChannelLoaded] = useDefaultChannelConfiguration(
     namespace,
   );
-  // const channelHasFormView = values.type && isDefaultChannel(getChannelKind(values.type));
   const channelKind = getChannelKind(values.formData.type);
   const onTypeChange = React.useCallback(
     (item: string) => {
       setErrors({});
       setStatus({});
       const kind = getChannelKind(item);
+      let formData: AddChannelFormData;
       if (isDefaultChannel(kind)) {
         const nameData = `formData.data.${kind.toLowerCase()}`;
         const sourceData = getChannelData(kind.toLowerCase());
         setFieldValue(nameData, sourceData);
         setFieldTouched(nameData, true);
+        formData = { ...values.formData, data: { [kind.toLowerCase()]: sourceData } };
       }
 
       setFieldValue('formData.type', item);
       setFieldTouched('formData.type', true);
-
       setFieldValue('formData.name', _.kebabCase(`${kind}`));
       setFieldTouched('formData.name', true);
+      formData = { ...values.formData, ...formData, type: item, name: _.kebabCase(`${kind}`) };
+      setFieldValue(
+        'yamlData',
+        safeJSToYAML(getCreateChannelData(formData), 'yamlData', {
+          skipInvalid: true,
+          noRefs: true,
+        }),
+      );
+      setFieldTouched('yamlData', true);
       validateForm();
     },
-    [setErrors, setStatus, setFieldValue, setFieldTouched, validateForm],
+    [setErrors, setStatus, setFieldValue, setFieldTouched, values.formData, validateForm],
   );
 
   const sanitizeToYaml = () => {
@@ -92,7 +102,23 @@ const ChannelForm: React.FC<FormikProps<FormikValues> & OwnProps> = ({
 
   const yamlEditor = <YAMLEditorField name="yamlData" showSamples onSave={handleSubmit} />;
 
-  const formEditor = <FormViewSection namespace={namespace} kind={channelKind} />;
+  const formEditor = (
+    <>
+      {values.showCanUseYAMLMessage && (
+        <Alert
+          actionClose={
+            <AlertActionCloseButton onClose={() => setFieldValue('showCanUseYAMLMessage', false)} />
+          }
+          isInline
+          title={t(
+            'knative-plugin~Note: Some fields may not be represented in this form view. Please select "YAML view" for full control of object creation.',
+          )}
+          variant="info"
+        />
+      )}
+      <FormViewSection namespace={namespace} kind={channelKind} />{' '}
+    </>
+  );
 
   return (
     <FlexForm onSubmit={handleSubmit}>

diff --git a/frontend/packages/knative-plugin/src/components/add/eventSource-validation-utils.ts b/frontend/packages/knative-plugin/src/components/add/eventSource-validation-utils.ts
@@ -6,7 +6,6 @@ import {
 } from '@console/dev-console/src/components/import/validation-schema';
 import { isValidUrl, nameValidationSchema } from '@console/shared';
 import { EditorType } from '@console/shared/src/components/synced-editor/editor-toggle';
-import { isDefaultChannel, getChannelKind } from '../../utils/create-channel-utils';
 import { EventSources, SinkType } from './import-types';
 
 export const sinkTypeUriValidation = (t: TFunction) =>
@@ -189,18 +188,12 @@ export const addChannelValidationSchema = (t: TFunction) =>
     editorType: yup.string(),
     formData: yup.object().when('editorType', {
       is: EditorType.Form,
-      then: yup.lazy((formData) => {
-        if (isDefaultChannel(getChannelKind(formData.type))) {
-          return yup.object().shape({
-            application: applicationNameValidationSchema,
-            name: nameValidationSchema(t),
-            data: sourceDataSpecSchema(t),
-            type: yup.string(),
-          });
-        }
-        return yup.object().shape({
-          yamlData: yup.string(),
-        });
+      then: yup.object().shape({
+        project: projectNameValidationSchema,
+        application: applicationNameValidationSchema,
+        name: nameValidationSchema(t),
+        data: yup.object(),
+        type: yup.string(),
       }),
     }),
     yamlData: yup.string(),