fixes issue with form switch for name-value-editor on eventSources cr…

…eation form
openshift · Apr 3, 2020 · 387091b · 387091b
1 parent baa4cbb
commit 387091b
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 8 deletions.
diff --git a/frontend/packages/knative-plugin/src/components/add/EventSourceForm.tsx b/frontend/packages/knative-plugin/src/components/add/EventSourceForm.tsx
@@ -5,6 +5,7 @@ import { FormFooter } from '@console/shared';
 import { Form } from '@patternfly/react-core';
 import AppSection from '@console/dev-console/src/components/import/app/AppSection';
 import { FirehoseList } from '@console/dev-console/src/components/import/import-types';
+import { AsyncComponent } from '@console/internal/components/utils/async';
 import CronJobSection from './event-sources/CronJobSection';
 import SinkBindingSection from './event-sources/SinkBindingSection';
 import ApiServerSection from './event-sources/ApiServerSection';
@@ -13,6 +14,15 @@ import { EventSources } from './import-types';
 import EventSourcesSelector from './event-sources/EventSourcesSelector';
 import { useEventSourceList } from '../../utils/create-eventsources-utils';
 
+export const NameValueEditorComponent = (props) => (
+  <AsyncComponent
+    loader={() =>
+      import('@console/internal/components/utils/name-value-editor').then((c) => c.NameValueEditor)
+    }
+    {...props}
+  />
+);
+
 interface OwnProps {
   namespace: string;
   projects: FirehoseList;

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
@@ -4,9 +4,9 @@ import * as fuzzy from 'fuzzysearch';
 import { useFormikContext, FormikValues } from 'formik';
 import { FormGroup } from '@patternfly/react-core';
 import { ServiceAccountModel } from '@console/internal/models';
-import { NameValueEditor } from '@console/internal/components/utils/name-value-editor';
 import { ResourceDropdownField, DropdownField, getFieldId } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
+import { NameValueEditorComponent } from '../EventSourceForm';
 
 interface ApiServerSectionProps {
   namespace: string;
@@ -62,7 +62,7 @@ const ApiServerSection: React.FC<ApiServerSectionProps> = ({ namespace }) => {
   return (
     <FormSection title="ApiServerSource">
       <FormGroup fieldId={fieldId} label="Resource" isRequired>
-        <NameValueEditor
+        <NameValueEditorComponent
           nameValuePairs={nameValue}
           valueString="kind"
           nameString="apiVersion"

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
@@ -3,8 +3,8 @@ import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
 import { TextInputTypes, FormGroup } from '@patternfly/react-core';
 import { InputField, getFieldId } from '@console/shared';
-import { NameValueEditor } from '@console/internal/components/utils/name-value-editor';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
+import { NameValueEditorComponent } from '../EventSourceForm';
 
 const SinkBindingSection: React.FC = () => {
   const { values, setFieldValue } = useFormikContext<FormikValues>();
@@ -47,7 +47,7 @@ const SinkBindingSection: React.FC = () => {
         required
       />
       <FormGroup fieldId={fieldId} label="Match Labels">
-        <NameValueEditor
+        <NameValueEditorComponent
           nameValuePairs={nameValue}
           valueString="Value"
           nameString="Name"

diff --git a/...kages/knative-plugin/src/components/add/event-sources/__tests__/ApiServerSection.spec.tsx b/...kages/knative-plugin/src/components/add/event-sources/__tests__/ApiServerSection.spec.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { shallow } from 'enzyme';
 import { ResourceDropdownField } from '@console/shared';
-import { NameValueEditor } from '@console/internal/components/utils/name-value-editor';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import ApiServerSection from '../ApiServerSection';
+import { NameValueEditorComponent } from '../../EventSourceForm';
 
 jest.mock('formik', () => ({
   useField: jest.fn(() => [{}, {}]),
@@ -26,7 +26,7 @@ describe('ApiServerSection', () => {
 
   it('should render NameValueEditor', () => {
     const wrapper = shallow(<ApiServerSection namespace="test-project" />);
-    const nameValueEditorField = wrapper.find(NameValueEditor);
+    const nameValueEditorField = wrapper.find(NameValueEditorComponent);
     expect(nameValueEditorField).toHaveLength(1);
     expect(nameValueEditorField.props().nameString).toBe('apiVersion');
     expect(nameValueEditorField.props().valueString).toBe('kind');

diff --git a/...ges/knative-plugin/src/components/add/event-sources/__tests__/SinkBindingSection.spec.tsx b/...ges/knative-plugin/src/components/add/event-sources/__tests__/SinkBindingSection.spec.tsx
@@ -1,9 +1,9 @@
 import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { InputField } from '@console/shared';
-import { NameValueEditor } from '@console/internal/components/utils/name-value-editor';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 import SinkBindingSection from '../SinkBindingSection';
+import { NameValueEditorComponent } from '../../EventSourceForm';
 
 type SinkBindingSectionProps = React.ComponentProps<typeof SinkBindingSection>;
 
@@ -30,7 +30,7 @@ describe('SinkBindingSection', () => {
   });
 
   it('should render NameValueEditor', () => {
-    const nameValueEditorField = wrapper.find(NameValueEditor);
+    const nameValueEditorField = wrapper.find(NameValueEditorComponent);
     expect(nameValueEditorField).toHaveLength(1);
     expect(nameValueEditorField.props().nameString).toBe('Name');
     expect(nameValueEditorField.props().valueString).toBe('Value');