Merge pull request #4918 from invincibleJai/fix-issue-sources-form

fixes issue with form switch for name-value-editor on eventSources
openshift · Apr 6, 2020 · e7d72a5 · e7d72a5
2 parents 566f052 + 080facd
commit e7d72a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 8 deletions.
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,8 +4,8 @@ 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 { AsyncComponent } from '@console/internal/components/utils/async';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 
 interface ApiServerSectionProps {
@@ -62,7 +62,12 @@ const ApiServerSection: React.FC<ApiServerSectionProps> = ({ namespace }) => {
   return (
     <FormSection title="ApiServerSource">
       <FormGroup fieldId={fieldId} label="Resource" isRequired>
-        <NameValueEditor
+        <AsyncComponent
+          loader={() =>
+            import('@console/internal/components/utils/name-value-editor').then(
+              (c) => c.NameValueEditor,
+            )
+          }
           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,7 +3,7 @@ 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 { AsyncComponent } from '@console/internal/components/utils/async';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
 
 const SinkBindingSection: React.FC = () => {
@@ -47,7 +47,12 @@ const SinkBindingSection: React.FC = () => {
         required
       />
       <FormGroup fieldId={fieldId} label="Match Labels">
-        <NameValueEditor
+        <AsyncComponent
+          loader={() =>
+            import('@console/internal/components/utils/name-value-editor').then(
+              (c) => c.NameValueEditor,
+            )
+          }
           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,8 +1,8 @@
 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 { AsyncComponent } from '@console/internal/components/utils/async';
 import ApiServerSection from '../ApiServerSection';
 
 jest.mock('formik', () => ({
@@ -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(AsyncComponent);
     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,8 +1,8 @@
 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 { AsyncComponent } from '@console/internal/components/utils/async';
 import SinkBindingSection from '../SinkBindingSection';
 
 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(AsyncComponent);
     expect(nameValueEditorField).toHaveLength(1);
     expect(nameValueEditorField.props().nameString).toBe('Name');
     expect(nameValueEditorField.props().valueString).toBe('Value');