Migrate organization add to functional component

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
@@ -14,19 +14,12 @@ import {
 import { OrganizationsAPI } from '@api';
 import { Config } from '@contexts/Config';
 import CardCloseButton from '@components/CardCloseButton';
-
 import OrganizationForm from '../shared/OrganizationForm';
 
-class OrganizationAdd extends React.Component {
-  constructor(props) {
-    super(props);
-    this.handleSubmit = this.handleSubmit.bind(this);
-    this.handleCancel = this.handleCancel.bind(this);
-    this.state = { error: '' };
-  }
+function OrganizationAdd({ history, i18n }) {
+  const [formError, setFormError] = useState(null);
 
-  async handleSubmit(values, groupsToAssociate) {
-    const { history } = this.props;
+  const handleSubmit = async (values, groupsToAssociate) => {
     try {
       const { data: response } = await OrganizationsAPI.create(values);
       await Promise.all(
@@ -36,43 +29,37 @@ class OrganizationAdd extends React.Component {
       );
       history.push(`/organizations/${response.id}`);
     } catch (error) {
-      this.setState({ error });
+      setFormError(error);
     }
-  }
+  };
 
-  handleCancel() {
-    const { history } = this.props;
+  const handleCancel = () => {
     history.push('/organizations');
-  }
+  };
 
-  render() {
-    const { error } = this.state;
-    const { i18n } = this.props;
-
-    return (
-      <PageSection>
-        <Card>
-          <CardHeader className="at-u-textRight">
-            <Tooltip content={i18n._(t`Close`)} position="top">
-              <CardCloseButton onClick={this.handleCancel} />
-            </Tooltip>
-          </CardHeader>
-          <CardBody>
-            <Config>
-              {({ me }) => (
-                <OrganizationForm
-                  handleSubmit={this.handleSubmit}
-                  handleCancel={this.handleCancel}
-                  me={me || {}}
-                />
-              )}
-            </Config>
-            {error ? <div>error</div> : ''}
-          </CardBody>
-        </Card>
-      </PageSection>
-    );
-  }
+  return (
+    <PageSection>
+      <Card>
+        <CardHeader className="at-u-textRight">
+          <Tooltip content={i18n._(t`Close`)} position="top">
+            <CardCloseButton onClick={handleCancel} />
+          </Tooltip>
+        </CardHeader>
+        <CardBody>
+          <Config>
+            {({ me }) => (
+              <OrganizationForm
+                handleSubmit={handleSubmit}
+                handleCancel={handleCancel}
+                me={me || {}}
+              />
+            )}
+          </Config>
+          {formError ? <div>error</div> : ''}
+        </CardBody>
+      </Card>
+    </PageSection>
+  );
 }
 
 OrganizationAdd.contextTypes = {

awx/ui_next/src/screens/Organization/OrganizationAdd/OrganizationAdd.test.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { createMemoryHistory } from 'history';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 import OrganizationAdd from './OrganizationAdd';
@@ -7,36 +8,42 @@ import { OrganizationsAPI } from '@api';
 jest.mock('@api');
 
 describe('<OrganizationAdd />', () => {
-  test('handleSubmit should post to api', () => {
-    const wrapper = mountWithContexts(<OrganizationAdd />);
+  test('handleSubmit should post to api', async () => {
     const updatedOrgData = {
       name: 'new name',
       description: 'new description',
       custom_virtualenv: 'Buzz',
     };
-    wrapper.find('OrganizationForm').prop('handleSubmit')(
-      updatedOrgData,
-      [],
-      []
-    );
+    await act(async () => {
+      const wrapper = mountWithContexts(<OrganizationAdd />);
+      wrapper.find('OrganizationForm').prop('handleSubmit')(
+        updatedOrgData,
+        [],
+        []
+      );
+    });
     expect(OrganizationsAPI.create).toHaveBeenCalledWith(updatedOrgData);
   });
 
-  test('should navigate to organizations list when cancel is clicked', () => {
+  test('should navigate to organizations list when cancel is clicked', async () => {
     const history = createMemoryHistory({});
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } },
+    await act(async () => {
+      const wrapper = mountWithContexts(<OrganizationAdd />, {
+        context: { router: { history } },
+      });
+      wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
     });
-    wrapper.find('button[aria-label="Cancel"]').prop('onClick')();
     expect(history.location.pathname).toEqual('/organizations');
   });
 
-  test('should navigate to organizations list when close (x) is clicked', () => {
+  test('should navigate to organizations list when close (x) is clicked', async () => {
     const history = createMemoryHistory({});
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } },
+    await act(async () => {
+      const wrapper = mountWithContexts(<OrganizationAdd />, {
+        context: { router: { history } },
+      });
+      wrapper.find('button[aria-label="Close"]').prop('onClick')();
     });
-    wrapper.find('button[aria-label="Close"]').prop('onClick')();
     expect(history.location.pathname).toEqual('/organizations');
   });
 
@@ -56,15 +63,17 @@ describe('<OrganizationAdd />', () => {
         ...orgData,
       },
     });
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { router: { history } },
+    await act(async () => {
+      const wrapper = mountWithContexts(<OrganizationAdd />, {
+        context: { router: { history } },
+      });
+      await waitForElement(wrapper, 'button[aria-label="Save"]');
+      await wrapper.find('OrganizationForm').prop('handleSubmit')(
+        orgData,
+        [3],
+        []
+      );
     });
-    await waitForElement(wrapper, 'button[aria-label="Save"]');
-    await wrapper.find('OrganizationForm').prop('handleSubmit')(
-      orgData,
-      [3],
-      []
-    );
     expect(history.location.pathname).toEqual('/organizations/5');
   });
 
@@ -83,23 +92,25 @@ describe('<OrganizationAdd />', () => {
         ...orgData,
       },
     });
-    const wrapper = mountWithContexts(<OrganizationAdd />);
-    await waitForElement(wrapper, 'button[aria-label="Save"]');
-    await wrapper.find('OrganizationForm').prop('handleSubmit')(
-      orgData,
-      [3],
-      []
-    );
+    await act(async () => {
+      const wrapper = mountWithContexts(<OrganizationAdd />);
+      await waitForElement(wrapper, 'button[aria-label="Save"]');
+      await wrapper.find('OrganizationForm').prop('handleSubmit')(
+        orgData,
+        [3],
+        []
+      );
+    });
     expect(OrganizationsAPI.associateInstanceGroup).toHaveBeenCalledWith(5, 3);
   });
 
-  test('AnsibleSelect component renders if there are virtual environments', () => {
-    const config = {
-      custom_virtualenvs: ['foo', 'bar'],
-    };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { config },
-    }).find('AnsibleSelect');
+  test('AnsibleSelect component renders if there are virtual environments', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationAdd />, {
+        context: { config: { custom_virtualenvs: ['foo', 'bar'] } },
+      }).find('AnsibleSelect');
+    });
     expect(wrapper.find('FormSelect')).toHaveLength(1);
     expect(wrapper.find('FormSelectOption')).toHaveLength(3);
     expect(
@@ -110,13 +121,13 @@ describe('<OrganizationAdd />', () => {
     ).toEqual('/venv/ansible/');
   });
 
-  test('AnsibleSelect component does not render if there are 0 virtual environments', () => {
-    const config = {
-      custom_virtualenvs: [],
-    };
-    const wrapper = mountWithContexts(<OrganizationAdd />, {
-      context: { config },
-    }).find('AnsibleSelect');
+  test('AnsibleSelect component does not render if there are 0 virtual environments', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationAdd />, {
+        context: { config: { custom_virtualenvs: [] } },
+      }).find('AnsibleSelect');
+    });
     expect(wrapper.find('FormSelect')).toHaveLength(0);
   });
 });