Move routed org views to functional components

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useEffect, useState } from 'react';
 import { Link, withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -16,46 +16,11 @@ const CardBody = styled(PFCardBody)`
   padding-top: 20px;
 `;
 
-class OrganizationDetail extends Component {
+function OrganizationDetail({ i18n, match, organization }) {
-  constructor(props) {
-    super(props);
-
-    this.state = {
-      contentError: null,
-      hasContentLoading: true,
-      instanceGroups: [],
-    };
-    this.loadInstanceGroups = this.loadInstanceGroups.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadInstanceGroups();
-  }
-
-  async loadInstanceGroups() {
   const {
-      match: {
     params: { id },
-      },
+  } = match;
-    } = this.props;
-
-    this.setState({ hasContentLoading: true });
-    try {
   const {
-        data: { results = [] },
-      } = await OrganizationsAPI.readInstanceGroups(id);
-      this.setState({ instanceGroups: [...results] });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  render() {
-    const { hasContentLoading, contentError, instanceGroups } = this.state;
-    const {
-      organization: {
     name,
     description,
     custom_virtualenv,
@@ -63,10 +28,27 @@ class OrganizationDetail extends Component {
     created,
     modified,
     summary_fields,
-      },
+  } = organization;
-      match,
+  const [contentError, setContentError] = useState(null);
-      i18n,
+  const [hasContentLoading, setHasContentLoading] = useState(true);
-    } = this.props;
+  const [instanceGroups, setInstanceGroups] = useState([]);
+
+  useEffect(() => {
+    (async () => {
+      setContentError(null);
+      setHasContentLoading(true);
+      try {
+        const {
+          data: { results = [] },
+        } = await OrganizationsAPI.readInstanceGroups(id);
+        setInstanceGroups(results);
+      } catch (error) {
+        setContentError(error);
+      } finally {
+        setHasContentLoading(false);
+      }
+    })();
+  }, [id]);
 
   if (hasContentLoading) {
     return <ContentLoading />;
@@ -90,10 +72,7 @@ class OrganizationDetail extends Component {
           label={i18n._(t`Ansible Environment`)}
           value={custom_virtualenv}
         />
-          <Detail
+        <Detail label={i18n._(t`Created`)} value={formatDateString(created)} />
-            label={i18n._(t`Created`)}
-            value={formatDateString(created)}
-          />
         <Detail
           label={i18n._(t`Last Modified`)}
           value={formatDateString(modified)}
@@ -116,10 +95,7 @@ class OrganizationDetail extends Component {
       </DetailList>
       {summary_fields.user_capabilities.edit && (
         <div css="margin-top: 10px; text-align: right;">
-            <Button
+          <Button component={Link} to={`/organizations/${id}/edit`}>
-              component={Link}
-              to={`/organizations/${match.params.id}/edit`}
-            >
             {i18n._(t`Edit`)}
           </Button>
         </div>
@@ -127,6 +103,5 @@ class OrganizationDetail extends Component {
     </CardBody>
   );
 }
-}
 
 export default withI18n()(withRouter(OrganizationDetail));

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 
 import { OrganizationsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
@@ -35,30 +36,42 @@ describe('<OrganizationDetail />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders succesfully', () => {
+  test('initially renders succesfully', async () => {
+    await act(async () => {
       mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
     });
+  });
 
-  test('should request instance groups from api', () => {
+  test('should request instance groups from api', async () => {
+    await act(async () => {
       mountWithContexts(<OrganizationDetail organization={mockOrganization} />);
+    });
     expect(OrganizationsAPI.readInstanceGroups).toHaveBeenCalledTimes(1);
   });
 
-  test('should handle setting instance groups to state', async done => {
+  test('should render the expected instance group', async () => {
-    const wrapper = mountWithContexts(
+    let component;
+    await act(async () => {
+      component = mountWithContexts(
         <OrganizationDetail organization={mockOrganization} />
       );
-    const component = await waitForElement(wrapper, 'OrganizationDetail');
+    });
-    expect(component.state().instanceGroups).toEqual(
+    await waitForElement(component, 'ContentLoading', el => el.length === 0);
-      mockInstanceGroups.data.results
+    expect(
-    );
+      component
-    done();
+        .find('Chip')
+        .findWhere(el => el.text() === 'One')
+        .exists()
+    ).toBe(true);
   });
 
-  test('should render Details', async done => {
+  test('should render Details', async () => {
-    const wrapper = mountWithContexts(
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
         <OrganizationDetail organization={mockOrganization} />
       );
+    });
     const testParams = [
       { label: 'Name', value: 'Foo' },
       { label: 'Description', value: 'Bar' },
@@ -74,30 +87,34 @@ describe('<OrganizationDetail />', () => {
       expect(detail.find('dt').text()).toBe(label);
       expect(detail.find('dd').text()).toBe(value);
     }
-    done();
   });
 
-  test('should show edit button for users with edit permission', async done => {
+  test('should show edit button for users with edit permission', async () => {
-    const wrapper = mountWithContexts(
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
         <OrganizationDetail organization={mockOrganization} />
       );
+    });
     const editButton = await waitForElement(
       wrapper,
       'OrganizationDetail Button'
     );
     expect(editButton.text()).toEqual('Edit');
     expect(editButton.prop('to')).toBe('/organizations/undefined/edit');
-    done();
   });
 
-  test('should hide edit button for users without edit permission', async done => {
+  test('should hide edit button for users without edit permission', async () => {
     const readOnlyOrg = { ...mockOrganization };
     readOnlyOrg.summary_fields.user_capabilities.edit = false;
-    const wrapper = mountWithContexts(
+
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(
         <OrganizationDetail organization={readOnlyOrg} />
       );
+    });
     await waitForElement(wrapper, 'OrganizationDetail');
     expect(wrapper.find('OrganizationDetail Button').length).toBe(0);
-    done();
   });
 });

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

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 import { CardBody } from '@patternfly/react-core';
@@ -8,50 +8,17 @@ import { Config } from '@contexts/Config';
 
 import OrganizationForm from '../shared/OrganizationForm';
 
-class OrganizationEdit extends Component {
+function OrganizationEdit({ history, organization }) {
-  constructor(props) {
+  const detailsUrl = `/organizations/${organization.id}/details`;
-    super(props);
+  const [formError, setFormError] = useState(null);
 
-    this.handleSubmit = this.handleSubmit.bind(this);
+  const handleSubmit = async (
-    this.submitInstanceGroups = this.submitInstanceGroups.bind(this);
+    values,
-    this.handleCancel = this.handleCancel.bind(this);
+    groupsToAssociate,
-    this.handleSuccess = this.handleSuccess.bind(this);
+    groupsToDisassociate
-
+  ) => {
-    this.state = {
-      error: '',
-    };
-  }
-
-  async handleSubmit(values, groupsToAssociate, groupsToDisassociate) {
-    const { organization } = this.props;
     try {
       await OrganizationsAPI.update(organization.id, values);
-      await this.submitInstanceGroups(groupsToAssociate, groupsToDisassociate);
-      this.handleSuccess();
-    } catch (err) {
-      this.setState({ error: err });
-    }
-  }
-
-  handleCancel() {
-    const {
-      organization: { id },
-      history,
-    } = this.props;
-    history.push(`/organizations/${id}/details`);
-  }
-
-  handleSuccess() {
-    const {
-      organization: { id },
-      history,
-    } = this.props;
-    history.push(`/organizations/${id}/details`);
-  }
-
-  async submitInstanceGroups(groupsToAssociate, groupsToDisassociate) {
-    const { organization } = this.props;
-    try {
       await Promise.all(
         groupsToAssociate.map(id =>
           OrganizationsAPI.associateInstanceGroup(organization.id, id)
@@ -62,14 +29,15 @@ class OrganizationEdit extends Component {
           OrganizationsAPI.disassociateInstanceGroup(organization.id, id)
         )
       );
-    } catch (err) {
+      history.push(detailsUrl);
-      this.setState({ error: err });
+    } catch (error) {
-    }
+      setFormError(error);
     }
+  };
 
-  render() {
+  const handleCancel = () => {
-    const { organization } = this.props;
+    history.push(detailsUrl);
-    const { error } = this.state;
+  };
 
   return (
     <CardBody>
@@ -77,17 +45,16 @@ class OrganizationEdit extends Component {
         {({ me }) => (
           <OrganizationForm
             organization={organization}
-              handleSubmit={this.handleSubmit}
+            handleSubmit={handleSubmit}
-              handleCancel={this.handleCancel}
+            handleCancel={handleCancel}
             me={me || {}}
           />
         )}
       </Config>
-        {error ? <div>error</div> : null}
+      {formError ? <div>error</div> : null}
     </CardBody>
   );
 }
-}
 
 OrganizationEdit.propTypes = {
   organization: PropTypes.shape().isRequired,

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

@@ -1,4 +1,4 @@
-import React, { Component, Fragment } from 'react';
+import React, { useEffect, useState } from 'react';
 import { withRouter } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
@@ -22,90 +22,24 @@ const QS_CONFIG = getQSConfig('organization', {
   order_by: 'name',
 });
 
-class OrganizationsList extends Component {
+function OrganizationsList({ i18n, location, match }) {
-  constructor(props) {
+  const [contentError, setContentError] = useState(null);
-    super(props);
+  const [deletionError, setDeletionError] = useState(null);
+  const [hasContentLoading, setHasContentLoading] = useState(true);
+  const [itemCount, setItemCount] = useState(0);
+  const [organizations, setOrganizations] = useState([]);
+  const [orgActions, setOrgActions] = useState(null);
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const addUrl = `${match.url}/add`;
-      hasContentLoading: true,
+  const canAdd = orgActions && orgActions.POST;
-      contentError: null,
+  const isAllSelected =
-      deletionError: null,
+    selected.length === organizations.length && selected.length > 0;
-      organizations: [],
-      selected: [],
-      itemCount: 0,
-      actions: null,
-    };
 
-    this.handleSelectAll = this.handleSelectAll.bind(this);
+  const loadOrganizations = async ({ search }) => {
-    this.handleSelect = this.handleSelect.bind(this);
+    const params = parseQueryString(QS_CONFIG, search);
-    this.handleOrgDelete = this.handleOrgDelete.bind(this);
+    setContentError(null);
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
+    setHasContentLoading(true);
-    this.loadOrganizations = this.loadOrganizations.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadOrganizations();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadOrganizations();
-    }
-  }
-
-  handleSelectAll(isSelected) {
-    const { organizations } = this.state;
-
-    const selected = isSelected ? [...organizations] : [];
-    this.setState({ selected });
-  }
-
-  handleSelect(row) {
-    const { selected } = this.state;
-
-    if (selected.some(s => s.id === row.id)) {
-      this.setState({ selected: selected.filter(s => s.id !== row.id) });
-    } else {
-      this.setState({ selected: selected.concat(row) });
-    }
-  }
-
-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
-  }
-
-  async handleOrgDelete() {
-    const { selected } = this.state;
-
-    this.setState({ hasContentLoading: true });
-    try {
-      await Promise.all(selected.map(org => OrganizationsAPI.destroy(org.id)));
-    } catch (err) {
-      this.setState({ deletionError: err });
-    } finally {
-      await this.loadOrganizations();
-    }
-  }
-
-  async loadOrganizations() {
-    const { location } = this.props;
-    const { actions: cachedActions } = this.state;
-    const params = parseQueryString(QS_CONFIG, location.search);
-
-    let optionsPromise;
-    if (cachedActions) {
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
-    } else {
-      optionsPromise = OrganizationsAPI.readOptions();
-    }
-
-    const promises = Promise.all([
-      OrganizationsAPI.read(params),
-      optionsPromise,
-    ]);
-
-    this.setState({ contentError: null, hasContentLoading: true });
     try {
       const [
         {
@@ -114,39 +48,65 @@ class OrganizationsList extends Component {
         {
           data: { actions },
         },
-      ] = await promises;
+      ] = await Promise.all([
-      this.setState({
+        OrganizationsAPI.read(params),
-        actions,
+        loadOrganizationActions(),
-        itemCount: count,
+      ]);
-        organizations: results,
+      setItemCount(count);
-        selected: [],
+      setOrganizations(results);
-      });
+      setOrgActions(actions);
-    } catch (err) {
+      setSelected([]);
-      this.setState({ contentError: err });
+    } catch (error) {
+      setContentError(error);
     } finally {
-      this.setState({ hasContentLoading: false });
+      setHasContentLoading(false);
     }
+  };
+
+  const loadOrganizationActions = () => {
+    if (orgActions) {
+      return Promise.resolve({ data: { actions: orgActions } });
     }
+    return OrganizationsAPI.readOptions();
+  };
 
-  render() {
+  const handleOrgDelete = async () => {
-    const {
+    setHasContentLoading(true);
-      actions,
+    try {
-      itemCount,
+      await Promise.all(selected.map(({ id }) => OrganizationsAPI.destroy(id)));
-      contentError,
+    } catch (error) {
-      hasContentLoading,
+      setDeletionError(error);
-      deletionError,
+    } finally {
-      selected,
+      await loadOrganizations(location);
-      organizations,
+    }
-    } = this.state;
+  };
-    const { match, i18n } = this.props;
 
-    const canAdd =
+  const handleSelectAll = isSelected => {
-      actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+    if (isSelected) {
-    const isAllSelected =
+      setSelected(organizations);
-      selected.length === organizations.length && selected.length > 0;
+    } else {
+      setSelected([]);
+    }
+  };
+
+  const handleSelect = row => {
+    if (selected.some(s => s.id === row.id)) {
+      setSelected(selected.filter(s => s.id !== row.id));
+    } else {
+      setSelected(selected.concat(row));
+    }
+  };
+
+  const handleDeleteErrorClose = () => {
+    setDeletionError(null);
+  };
+
+  useEffect(() => {
+    loadOrganizations(location);
+  }, [location]); // eslint-disable-line react-hooks/exhaustive-deps
 
   return (
-      <Fragment>
+    <>
       <PageSection>
         <Card>
           <PaginatedDataList
@@ -181,17 +141,17 @@ class OrganizationsList extends Component {
                 {...props}
                 showSelectAll
                 isAllSelected={isAllSelected}
-                  onSelectAll={this.handleSelectAll}
+                onSelectAll={handleSelectAll}
                 qsConfig={QS_CONFIG}
                 additionalControls={[
                   <ToolbarDeleteButton
                     key="delete"
-                      onDelete={this.handleOrgDelete}
+                    onDelete={handleOrgDelete}
                     itemsToDelete={selected}
                     pluralizedItemName="Organizations"
                   />,
                   canAdd ? (
-                      <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+                    <ToolbarAddButton key="add" linkTo={addUrl} />
                   ) : null,
                 ]}
               />
@@ -202,13 +162,11 @@ class OrganizationsList extends Component {
                 organization={o}
                 detailUrl={`${match.url}/${o.id}`}
                 isSelected={selected.some(row => row.id === o.id)}
-                  onSelect={() => this.handleSelect(o)}
+                onSelect={() => handleSelect(o)}
               />
             )}
             emptyStateControls={
-                canAdd ? (
+              canAdd ? <ToolbarAddButton key="add" linkTo={addUrl} /> : null
-                  <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                ) : null
             }
           />
         </Card>
@@ -217,15 +175,14 @@ class OrganizationsList extends Component {
         isOpen={deletionError}
         variant="danger"
         title={i18n._(t`Error!`)}
-          onClose={this.handleDeleteErrorClose}
+        onClose={handleDeleteErrorClose}
       >
         {i18n._(t`Failed to delete one or more organizations.`)}
         <ErrorDetail error={deletionError} />
       </AlertModal>
-      </Fragment>
+    </>
   );
 }
-}
 
 export { OrganizationsList as _OrganizationsList };
 export default withI18n()(withRouter(OrganizationsList));

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

@@ -1,12 +1,14 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+
 import { OrganizationsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
 
-import OrganizationsList, { _OrganizationsList } from './OrganizationList';
+import OrganizationsList from './OrganizationList';
 
 jest.mock('@api');
 
-const mockAPIOrgsList = {
+const mockOrganizations = {
   data: {
     count: 3,
     results: [
@@ -61,17 +63,9 @@ const mockAPIOrgsList = {
 
 describe('<OrganizationsList />', () => {
   let wrapper;
-
   beforeEach(() => {
-    OrganizationsAPI.read = () =>
+    OrganizationsAPI.read.mockResolvedValue(mockOrganizations);
-      Promise.resolve({
+    OrganizationsAPI.readOptions.mockResolvedValue({
-        data: {
-          count: 0,
-          results: [],
-        },
-      });
-    OrganizationsAPI.readOptions = () =>
-      Promise.resolve({
       data: {
         actions: {
           GET: {},
@@ -80,78 +74,154 @@ describe('<OrganizationsList />', () => {
       },
     });
   });
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
 
-  test('initially renders succesfully', () => {
+  test('Initially renders succesfully', async () => {
+    await act(async () => {
       mountWithContexts(<OrganizationsList />);
     });
-
-  test('Puts 1 selected Org in state when handleSelect is called.', () => {
-    wrapper = mountWithContexts(<OrganizationsList />).find(
-      'OrganizationsList'
-    );
-
-    wrapper.setState({
-      organizations: mockAPIOrgsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
   });
+
+  test('Items are rendered after loading', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationsList />);
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find('ContentLoading').length === 0
+    );
+    expect(wrapper.find('OrganizationListItem').length).toBe(3);
+  });
+
+  test('Item appears selected after selecting it', async () => {
+    const itemCheckboxInput = 'input#select-organization-1';
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationsList />);
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find('ContentLoading').length === 0
+    );
+    await act(async () => {
+      wrapper
+        .find(itemCheckboxInput)
+        .closest('DataListCheck')
+        .props()
+        .onChange();
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find(itemCheckboxInput).props().checked === true
+    );
+  });
+
+  test('All items appear selected after select-all and unselected after unselect-all', async () => {
+    const itemCheckboxInputs = [
+      'input#select-organization-1',
+      'input#select-organization-2',
+      'input#select-organization-3',
+    ];
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationsList />);
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find('ContentLoading').length === 0
+    );
+    // Check for initially unselected items
+    await waitForElement(
+      wrapper,
+      'input#select-all',
+      el => el.props().checked === false
+    );
+    itemCheckboxInputs.forEach(inputSelector => {
+      const checkboxInput = wrapper
+        .find('OrganizationsList')
+        .find(inputSelector);
+      expect(checkboxInput.props().checked === false);
+    });
+    // Check select-all behavior
+    await act(async () => {
+      wrapper
+        .find('Checkbox#select-all')
+        .props()
+        .onChange(true);
+    });
+    await waitForElement(
+      wrapper,
+      'input#select-all',
+      el => el.props().checked === true
+    );
+    itemCheckboxInputs.forEach(inputSelector => {
+      const checkboxInput = wrapper
+        .find('OrganizationsList')
+        .find(inputSelector);
+      expect(checkboxInput.props().checked === true);
+    });
+    // Check unselect-all behavior
+    await act(async () => {
+      wrapper
+        .find('Checkbox#select-all')
+        .props()
+        .onChange(false);
+    });
+    await waitForElement(
+      wrapper,
+      'input#select-all',
+      el => el.props().checked === false
+    );
+    itemCheckboxInputs.forEach(inputSelector => {
+      const checkboxInput = wrapper
+        .find('OrganizationsList')
+        .find(inputSelector);
+      expect(checkboxInput.props().checked === false);
+    });
+  });
+
+  test('Expected api calls are made for multi-delete', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(<OrganizationsList />);
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find('ContentLoading').length === 0
+    );
+    expect(OrganizationsAPI.read).toHaveBeenCalledTimes(1);
+    await act(async () => {
+      wrapper
+        .find('Checkbox#select-all')
+        .props()
+        .onChange(true);
+    });
+    await waitForElement(
+      wrapper,
+      'input#select-all',
+      el => el.props().checked === true
+    );
+    await act(async () => {
+      wrapper.find('button[aria-label="Delete"]').simulate('click');
       wrapper.update();
-    expect(wrapper.state('selected').length).toBe(0);
-    wrapper.instance().handleSelect(mockAPIOrgsList.data.results.slice(0, 1));
-    expect(wrapper.state('selected').length).toBe(1);
     });
-
+    const deleteButton = global.document.querySelector(
-  test('Puts all Orgs in state when handleSelectAll is called.', () => {
+      'body div[role="dialog"] button[aria-label="confirm delete"]'
-    wrapper = mountWithContexts(<OrganizationsList />);
-    const list = wrapper.find('OrganizationsList');
-    list.setState({
-      organizations: mockAPIOrgsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-    });
-    expect(list.state('selected').length).toBe(0);
-    list.instance().handleSelectAll(true);
-    wrapper.update();
-    expect(list.state('selected').length).toEqual(
-      list.state('organizations').length
     );
+    expect(deleteButton).not.toEqual(null);
+    await act(async () => {
+      deleteButton.click();
+    });
+    expect(OrganizationsAPI.destroy).toHaveBeenCalledTimes(3);
+    expect(OrganizationsAPI.read).toHaveBeenCalledTimes(2);
   });
 
-  test('api is called to delete Orgs for each org in selected.', () => {
+  test('Error dialog shown for failed deletion', async () => {
-    wrapper = mountWithContexts(<OrganizationsList />);
+    const itemCheckboxInput = 'input#select-organization-1';
-    const component = wrapper.find('OrganizationsList');
-    wrapper.find('OrganizationsList').setState({
-      organizations: mockAPIOrgsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      isModalOpen: mockAPIOrgsList.isModalOpen,
-      selected: mockAPIOrgsList.data.results,
-    });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
-    expect(OrganizationsAPI.destroy).toHaveBeenCalledTimes(
-      component.state('selected').length
-    );
-  });
-
-  test('call loadOrganizations after org(s) have been deleted', () => {
-    const fetchOrgs = jest.spyOn(
-      _OrganizationsList.prototype,
-      'loadOrganizations'
-    );
-    const event = { preventDefault: () => {} };
-    wrapper = mountWithContexts(<OrganizationsList />);
-    wrapper.find('OrganizationsList').setState({
-      organizations: mockAPIOrgsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockAPIOrgsList.data.results.slice(0, 1),
-    });
-    const component = wrapper.find('OrganizationsList');
-    component.instance().handleOrgDelete(event);
-    expect(fetchOrgs).toBeCalled();
-  });
-
-  test('error is shown when org not successfully deleted from api', async done => {
     OrganizationsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -163,60 +233,72 @@ describe('<OrganizationsList />', () => {
         },
       })
     );
-
+    await act(async () => {
       wrapper = mountWithContexts(<OrganizationsList />);
-    wrapper.find('OrganizationsList').setState({
-      organizations: mockAPIOrgsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockAPIOrgsList.data.results.slice(0, 1),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find('ContentLoading').length === 0
+    );
+    await act(async () => {
+      wrapper
+        .find(itemCheckboxInput)
+        .closest('DataListCheck')
+        .props()
+        .onChange();
+    });
+    await waitForElement(
+      wrapper,
+      'OrganizationsList',
+      el => el.find(itemCheckboxInput).props().checked === true
+    );
+    await act(async () => {
+      wrapper.find('button[aria-label="Delete"]').simulate('click');
+      wrapper.update();
+    });
+    const deleteButton = global.document.querySelector(
+      'body div[role="dialog"] button[aria-label="confirm delete"]'
+    );
+    expect(deleteButton).not.toEqual(null);
+    await act(async () => {
+      deleteButton.click();
+    });
     await waitForElement(
       wrapper,
       'Modal',
       el => el.props().isOpen === true && el.props().title === 'Error!'
     );
-    done();
   });
 
-  test('Add button shown for users without ability to POST', async done => {
+  test('Add button shown for users with ability to POST', async () => {
+    await act(async () => {
       wrapper = mountWithContexts(<OrganizationsList />);
+    });
     await waitForElement(
       wrapper,
       'OrganizationsList',
-      el => el.state('hasContentLoading') === true
+      el => el.find('ContentLoading').length === 0
-    );
-    await waitForElement(
-      wrapper,
-      'OrganizationsList',
-      el => el.state('hasContentLoading') === false
     );
     expect(wrapper.find('ToolbarAddButton').length).toBe(1);
-    done();
   });
 
-  test('Add button hidden for users without ability to POST', async done => {
+  test('Add button hidden for users without ability to POST', async () => {
-    OrganizationsAPI.readOptions = () =>
+    OrganizationsAPI.readOptions.mockResolvedValue({
-      Promise.resolve({
       data: {
         actions: {
           GET: {},
         },
       },
     });
+    await act(async () => {
       wrapper = mountWithContexts(<OrganizationsList />);
+    });
     await waitForElement(
       wrapper,
       'OrganizationsList',
-      el => el.state('hasContentLoading') === true
+      el => el.find('ContentLoading').length === 0
-    );
-    await waitForElement(
-      wrapper,
-      'OrganizationsList',
-      el => el.state('hasContentLoading') === false
     );
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    done();
   });
 });

awx/ui_next/src/screens/Organization/OrganizationList/OrganizationListItem.jsx

@@ -40,16 +40,13 @@ const ListGroup = styled.span`
   }
 `;
 
-class OrganizationListItem extends React.Component {
+function OrganizationListItem({
-  static propTypes = {
+  organization,
-    organization: Organization.isRequired,
+  isSelected,
-    detailUrl: string.isRequired,
+  onSelect,
-    isSelected: bool.isRequired,
+  detailUrl,
-    onSelect: func.isRequired,
+  i18n,
-  };
+}) {
-
-  render() {
-    const { organization, isSelected, onSelect, detailUrl, i18n } = this.props;
   const labelId = `check-action-${organization.id}`;
   return (
     <DataListItem key={organization.id} aria-labelledby={labelId}>
@@ -86,10 +83,7 @@ class OrganizationListItem extends React.Component {
             </DataListCell>,
             <ActionButtonCell lastcolumn="true" key="action">
               {organization.summary_fields.user_capabilities.edit && (
-                  <Tooltip
+                <Tooltip content={i18n._(t`Edit Organization`)} position="top">
-                    content={i18n._(t`Edit Organization`)}
-                    position="top"
-                  >
                   <ListActionButton
                     variant="plain"
                     component={Link}
@@ -106,5 +100,12 @@ class OrganizationListItem extends React.Component {
     </DataListItem>
   );
 }
-}
+
+OrganizationListItem.propTypes = {
+  organization: Organization.isRequired,
+  detailUrl: string.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
 export default withI18n()(OrganizationListItem);

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { withRouter } from 'react-router-dom';
 
@@ -12,53 +12,31 @@ const QS_CONFIG = getQSConfig('team', {
   order_by: 'name',
 });
 
-class OrganizationTeams extends React.Component {
+function OrganizationTeams({ id, location }) {
-  constructor(props) {
+  const [contentError, setContentError] = useState(null);
-    super(props);
+  const [hasContentLoading, setHasContentLoading] = useState(false);
+  const [itemCount, setItemCount] = useState(0);
+  const [teams, setTeams] = useState([]);
 
-    this.loadOrganizationTeamsList = this.loadOrganizationTeamsList.bind(this);
+  useEffect(() => {
-
+    (async () => {
-    this.state = {
-      contentError: null,
-      hasContentLoading: true,
-      itemCount: 0,
-      teams: [],
-    };
-  }
-
-  componentDidMount() {
-    this.loadOrganizationTeamsList();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadOrganizationTeamsList();
-    }
-  }
-
-  async loadOrganizationTeamsList() {
-    const { id, location } = this.props;
       const params = parseQueryString(QS_CONFIG, location.search);
-
+      setContentError(null);
-    this.setState({ hasContentLoading: true, contentError: null });
+      setHasContentLoading(true);
       try {
         const {
           data: { count = 0, results = [] },
         } = await OrganizationsAPI.readTeams(id, params);
-      this.setState({
+        setItemCount(count);
-        itemCount: count,
+        setTeams(results);
-        teams: results,
+      } catch (error) {
-      });
+        setContentError(error);
-    } catch (err) {
-      this.setState({ contentError: err });
       } finally {
-      this.setState({ hasContentLoading: false });
+        setHasContentLoading(false);
-    }
       }
+    })();
+  }, [id, location]);
 
-  render() {
-    const { contentError, hasContentLoading, teams, itemCount } = this.state;
   return (
     <PaginatedDataList
       contentError={contentError}
@@ -70,7 +48,6 @@ class OrganizationTeams extends React.Component {
     />
   );
 }
-}
 
 OrganizationTeams.propTypes = {
   id: PropTypes.number.isRequired,

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { shallow } from 'enzyme';
 
 import { OrganizationsAPI } from '@api';
@@ -41,10 +42,12 @@ describe('<OrganizationTeams />', () => {
     );
   });
 
-  test('should load teams on mount', () => {
+  test('should load teams on mount', async () => {
+    await act(async () => {
       mountWithContexts(<OrganizationTeams id={1} searchString="" />).find(
         'OrganizationTeams'
       );
+    });
     expect(OrganizationsAPI.readTeams).toHaveBeenCalledWith(1, {
       page: 1,
       page_size: 5,
@@ -53,10 +56,10 @@ describe('<OrganizationTeams />', () => {
   });
 
   test('should pass fetched teams to PaginatedDatalist', async () => {
-    const wrapper = mountWithContexts(
+    let wrapper;
-      <OrganizationTeams id={1} searchString="" />
+    await act(async () => {
-    );
+      wrapper = mountWithContexts(<OrganizationTeams id={1} searchString="" />);
-
+    });
     await sleep(0);
     wrapper.update();
 

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

@@ -1,11 +1,14 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
+
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 import Organizations from './Organizations';
 
 jest.mock('@api');
 
 describe('<Organizations />', () => {
-  test('initially renders succesfully', () => {
+  test('initially renders succesfully', async () => {
+    await act(async () => {
       mountWithContexts(
         <Organizations
           match={{ path: '/organizations', url: '/organizations' }}
@@ -14,3 +17,4 @@ describe('<Organizations />', () => {
       );
     });
   });
+});