validate event sources form and enable create button on yaml form

fix unit tests fix lint error fix unit tests
openshift · May 18, 2020 · 5275820 · 5275820
1 parent dfed4d1
commit 5275820
Show file tree

Hide file tree

Showing 10 changed files with 57 additions and 33 deletions.
diff --git a/frontend/packages/knative-plugin/src/components/add/EventSource.tsx b/frontend/packages/knative-plugin/src/components/add/EventSource.tsx
@@ -91,6 +91,8 @@ const EventSource: React.FC<Props> = ({ namespace, activeApplication, contextSou
       initialValues={initialValues}
       onSubmit={handleSubmit}
       onReset={history.goBack}
+      validateOnBlur={false}
+      validateOnChange={false}
       validationSchema={eventSourceValidationSchema}
     >
       {(props) => <EventSourceForm {...props} namespace={namespace} />}

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/ApiServerSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/ApiServerSection.tsx
@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
 import { FormGroup } from '@patternfly/react-core';
 import { AsyncComponent } from '@console/internal/components/utils/async';
-import { DropdownField, getFieldId } from '@console/shared';
+import { DropdownField, getFieldId, useFormikValidationFix } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import ServiceAccountDropdown from '../../dropdowns/ServiceAccountDropdown';
 
@@ -33,6 +33,7 @@ const ApiServerSection: React.FC = () => {
     Ref: 'Ref',
     Resource: 'Resource',
   };
+  useFormikValidationFix(values);
   const fieldId = getFieldId(values.type, 'res-input');
   return (
     <FormSection title="ApiServerSource" extraMargin>

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/ContainerSourceSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/ContainerSourceSection.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
 import { TextInputTypes, FormGroup } from '@patternfly/react-core';
-import { InputField, MultiColumnField } from '@console/shared';
+import { InputField, MultiColumnField, useFormikValidationFix } from '@console/shared';
 import { AsyncComponent } from '@console/internal/components/utils';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import { getSuggestedName } from '@console/dev-console/src/utils/imagestream-utils';
@@ -35,6 +35,7 @@ const ContainerSourceSection: React.FC = () => {
     },
     [setFieldValue],
   );
+  useFormikValidationFix(values);
   return (
     <FormSection title="ContainerSource" extraMargin>
       <h3 className="co-section-heading-tertiary">Container</h3>

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/CronJobSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/CronJobSection.tsx
@@ -1,19 +1,24 @@
 import * as React from 'react';
+import { useFormikContext } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
-import { InputField } from '@console/shared';
+import { InputField, useFormikValidationFix } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 
-const CronJobSection: React.FC = () => (
-  <FormSection title="CronJobSource" extraMargin>
-    <InputField type={TextInputTypes.text} name="data.cronjobsource.data" label="Data" />
-    <InputField
-      type={TextInputTypes.text}
-      name="data.cronjobsource.schedule"
-      label="Schedule"
-      helpText="Schedule is described using the unix-cron string format (* * * * *)"
-      required
-    />
-  </FormSection>
-);
+const CronJobSection: React.FC = () => {
+  const { values } = useFormikContext();
+  useFormikValidationFix(values);
+  return (
+    <FormSection title="CronJobSource" extraMargin>
+      <InputField type={TextInputTypes.text} name="data.cronjobsource.data" label="Data" />
+      <InputField
+        type={TextInputTypes.text}
+        name="data.cronjobsource.schedule"
+        label="Schedule"
+        helpText="Schedule is described using the unix-cron string format (* * * * *)"
+        required
+      />
+    </FormSection>
+  );
+};
 
 export default CronJobSection;
diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/EventSourcesSelector.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/EventSourcesSelector.tsx
@@ -14,9 +14,12 @@ interface EventSourcesSelectorProps {
 
 const EventSourcesSelector: React.FC<EventSourcesSelectorProps> = ({ eventSourceList }) => {
   const eventSourceItems = Object.keys(eventSourceList).length;
-  const { setFieldValue, setFieldTouched, validateForm } = useFormikContext<FormikValues>();
+  const { setFieldValue, setFieldTouched, validateForm, setErrors } = useFormikContext<
+    FormikValues
+  >();
   const handleItemChange = React.useCallback(
     (item: string) => {
+      setErrors({});
       if (isKnownEventSource(item)) {
         const nameData = `data.${item.toLowerCase()}`;
         const sourceData = getEventSourceData(item.toLowerCase());
@@ -33,7 +36,7 @@ const EventSourcesSelector: React.FC<EventSourcesSelectorProps> = ({ eventSource
       setFieldTouched('apiVersion', true);
       validateForm();
     },
-    [setFieldValue, setFieldTouched, validateForm],
+    [setErrors, setFieldValue, setFieldTouched, validateForm],
   );
 
   const itemSelectorField = (

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/KafkaSourceSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/KafkaSourceSection.tsx
@@ -1,11 +1,14 @@
 import * as React from 'react';
+import { useFormikContext } from 'formik';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
-import { InputField } from '@console/shared';
+import { InputField, useFormikValidationFix } from '@console/shared';
 import { TextInputTypes } from '@patternfly/react-core';
 import KafkaSourceNetSection from './KafkaSourceNetSection';
 import ServiceAccountDropdown from '../../dropdowns/ServiceAccountDropdown';
 
 const KafkaSourceSection: React.FC = () => {
+  const { values } = useFormikContext();
+  useFormikValidationFix(values);
   return (
     <FormSection title="KafkaSource" extraMargin>
       <InputField

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/PingSourceSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/PingSourceSection.tsx
@@ -1,19 +1,24 @@
 import * as React from 'react';
+import { useFormikContext } from 'formik';
 import { TextInputTypes } from '@patternfly/react-core';
-import { InputField } from '@console/shared';
+import { InputField, useFormikValidationFix } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 
-const PingSourceSection: React.FC = () => (
-  <FormSection title="PingSource" extraMargin>
-    <InputField type={TextInputTypes.text} name="data.pingsource.data" label="Data" />
-    <InputField
-      type={TextInputTypes.text}
-      name="data.pingsource.schedule"
-      label="Schedule"
-      helpText="Schedule is described using the unix-cron string format (* * * * *)"
-      required
-    />
-  </FormSection>
-);
+const PingSourceSection: React.FC = () => {
+  const { values } = useFormikContext();
+  useFormikValidationFix(values);
+  return (
+    <FormSection title="PingSource" extraMargin>
+      <InputField type={TextInputTypes.text} name="data.pingsource.data" label="Data" />
+      <InputField
+        type={TextInputTypes.text}
+        name="data.pingsource.schedule"
+        label="Schedule"
+        helpText="Schedule is described using the unix-cron string format (* * * * *)"
+        required
+      />
+    </FormSection>
+  );
+};
 
 export default PingSourceSection;
diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/SinkBindingSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/SinkBindingSection.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
 import { TextInputTypes, FormGroup } from '@patternfly/react-core';
-import { InputField, getFieldId } from '@console/shared';
+import { InputField, getFieldId, useFormikValidationFix } from '@console/shared';
 import { AsyncComponent } from '@console/internal/components/utils/async';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 
@@ -13,6 +13,7 @@ const SinkBindingSection: React.FC = () => {
     ? _.map(initVal, (key, val) => [val, key])
     : [['', '']];
   const [nameValue, setNameValue] = React.useState(initialValueResources);
+  useFormikValidationFix(values);
   const handleNameValuePairs = React.useCallback(
     ({ nameValuePairs }) => {
       let updatedNameValuePairs = {};

diff --git a/frontend/packages/knative-plugin/src/components/add/event-sources/YAMLEditorSection.tsx b/frontend/packages/knative-plugin/src/components/add/event-sources/YAMLEditorSection.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { safeDump } from 'js-yaml';
 import { useFormikContext, FormikValues } from 'formik';
-import { YAMLEditorField } from '@console/shared';
+import { YAMLEditorField, useFormikValidationFix } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import {
   getEventSourcesDepResource,
@@ -26,6 +26,8 @@ const YAMLEditorSection: React.FC = () => {
     }
   }, [values.type, setFieldTouched, setFieldValue]);
 
+  useFormikValidationFix(values);
+
   return (
     <FormSection title={values.type} flexLayout fullWidth>
       <YAMLEditorField name="yamlData" />

diff --git a/...s/knative-plugin/src/components/add/event-sources/__tests__/EventSourcesSelector.spec.tsx b/...s/knative-plugin/src/components/add/event-sources/__tests__/EventSourcesSelector.spec.tsx
@@ -14,6 +14,7 @@ jest.mock('formik', () => ({
     setFieldValue: jest.fn(),
     setFieldTouched: jest.fn(),
     validateForm: jest.fn(),
+    setErrors: jest.fn(),
     values: {
       type: 'SinkBinding',
       name: 'sink-binding',