refactored and made use of async componenet in form itself

openshift · Apr 6, 2020 · d49ea3b · d49ea3b
1 parent 98a818f
commit d49ea3b
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 23 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
@@ -5,8 +5,17 @@ import { useFormikContext, FormikValues } from 'formik';
 import { FormGroup } from '@patternfly/react-core';
 import { ServiceAccountModel } from '@console/internal/models';
 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';
-import NameValueEditorComponent from './NameValueEditorComponent';
+
+export const AsyncNameValueEditor = (props) => (
+  <AsyncComponent
+    loader={() =>
+      import('@console/internal/components/utils/name-value-editor').then((c) => c.NameValueEditor)
+    }
+    {...props}
+  />
+);
 
 interface ApiServerSectionProps {
   namespace: string;
@@ -62,7 +71,7 @@ const ApiServerSection: React.FC<ApiServerSectionProps> = ({ namespace }) => {
   return (
     <FormSection title="ApiServerSource">
       <FormGroup fieldId={fieldId} label="Resource" isRequired>
-        <NameValueEditorComponent
+        <AsyncNameValueEditor
           nameValuePairs={nameValue}
           valueString="kind"
           nameString="apiVersion"

diff --git a/...end/packages/knative-plugin/src/components/add/event-sources/NameValueEditorComponent.tsx b/...end/packages/knative-plugin/src/components/add/event-sources/NameValueEditorComponent.tsx
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,17 @@ import * as _ from 'lodash';
 import { useFormikContext, FormikValues } from 'formik';
 import { TextInputTypes, FormGroup } from '@patternfly/react-core';
 import { InputField, getFieldId } from '@console/shared';
+import { AsyncComponent } from '@console/internal/components/utils/async';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
-import NameValueEditorComponent from './NameValueEditorComponent';
+
+export const AsyncNameValueEditor = (props) => (
+  <AsyncComponent
+    loader={() =>
+      import('@console/internal/components/utils/name-value-editor').then((c) => c.NameValueEditor)
+    }
+    {...props}
+  />
+);
 
 const SinkBindingSection: React.FC = () => {
   const { values, setFieldValue } = useFormikContext<FormikValues>();
@@ -47,7 +56,7 @@ const SinkBindingSection: React.FC = () => {
         required
       />
       <FormGroup fieldId={fieldId} label="Match Labels">
-        <NameValueEditorComponent
+        <AsyncNameValueEditor
           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
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { shallow } from 'enzyme';
 import { ResourceDropdownField } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
-import ApiServerSection from '../ApiServerSection';
-import NameValueEditorComponent from '../NameValueEditorComponent';
+import ApiServerSection, { AsyncNameValueEditor } from '../ApiServerSection';
 
 jest.mock('formik', () => ({
   useField: jest.fn(() => [{}, {}]),
@@ -26,7 +25,7 @@ describe('ApiServerSection', () => {
 
   it('should render NameValueEditor', () => {
     const wrapper = shallow(<ApiServerSection namespace="test-project" />);
-    const nameValueEditorField = wrapper.find(NameValueEditorComponent);
+    const nameValueEditorField = wrapper.find(AsyncNameValueEditor);
     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
@@ -2,8 +2,7 @@ import * as React from 'react';
 import { shallow, ShallowWrapper } from 'enzyme';
 import { InputField } from '@console/shared';
 import FormSection from '@console/dev-console/src/components/import/section/FormSection';
-import SinkBindingSection from '../SinkBindingSection';
-import NameValueEditorComponent from '../NameValueEditorComponent';
+import SinkBindingSection, { AsyncNameValueEditor } from '../SinkBindingSection';
 
 type SinkBindingSectionProps = React.ComponentProps<typeof SinkBindingSection>;
 
@@ -30,7 +29,7 @@ describe('SinkBindingSection', () => {
   });
 
   it('should render NameValueEditor', () => {
-    const nameValueEditorField = wrapper.find(NameValueEditorComponent);
+    const nameValueEditorField = wrapper.find(AsyncNameValueEditor);
     expect(nameValueEditorField).toHaveLength(1);
     expect(nameValueEditorField.props().nameString).toBe('Name');
     expect(nameValueEditorField.props().valueString).toBe('Value');