Merge pull request #6035 from keithjgrant/lists-to-hooks

Refactor remaining lists to hooks

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx

@@ -1,11 +1,12 @@
-import React, { Component } from 'react';
+import React, { useState, useCallback, useEffect } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import { InventoriesAPI } from '@api';
+import useRequest, { useDeleteItems } from '@util/useRequest';
 import AlertModal from '@components/AlertModal';
 import DatalistToolbar from '@components/DataListToolbar';
 import ErrorDetail from '@components/ErrorDetail';
@@ -23,225 +24,172 @@ const QS_CONFIG = getQSConfig('inventory', {
   order_by: 'name',
 });
 
-class InventoriesList extends Component {
+function InventoryList({ i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const match = useRouteMatch();
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const {
-      hasContentLoading: true,
+    result: { inventories, itemCount, actions },
-      contentError: null,
+    error: contentError,
-      deletionError: null,
+    isLoading,
-      selected: [],
+    request: fetchInventories,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const [response, actionsResponse] = await Promise.all([
+        InventoriesAPI.read(params),
+        InventoriesAPI.readOptions(),
+      ]);
+      return {
+        inventories: response.data.results,
+        itemCount: response.data.count,
+        actions: actionsResponse.data.actions,
+      };
+    }, [location]),
+    {
       inventories: [],
       itemCount: 0,
-    };
+      actions: {},
-
-    this.loadInventories = this.loadInventories.bind(this);
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleInventoryDelete = this.handleInventoryDelete.bind(this);
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadInventories();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-
-    if (location !== prevProps.location) {
-      this.loadInventories();
     }
-  }
+  );
 
-  handleDeleteErrorClose() {
+  useEffect(() => {
-    this.setState({ deletionError: null });
+    fetchInventories();
-  }
+  }, [fetchInventories]);
 
-  handleSelectAll(isSelected) {
+  const isAllSelected =
-    const { inventories } = this.state;
+    selected.length === inventories.length && selected.length > 0;
-    const selected = isSelected ? [...inventories] : [];
+  const {
-    this.setState({ selected });
+    isLoading: isDeleteLoading,
-  }
+    deleteItems: deleteTeams,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(selected.map(team => InventoriesAPI.destroy(team.id)));
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchInventories,
+    }
+  );
 
-  handleSelect(inventory) {
+  const handleInventoryDelete = async () => {
-    const { selected } = this.state;
+    await deleteTeams();
-    if (selected.some(s => s.id === inventory.id)) {
+    setSelected([]);
-      this.setState({ selected: selected.filter(s => s.id !== inventory.id) });
+  };
+
+  const hasContentLoading = isDeleteLoading || isLoading;
+  const canAdd = actions && actions.POST;
+
+  const handleSelectAll = isSelected => {
+    setSelected(isSelected ? [...inventories] : []);
+  };
+
+  const handleSelect = row => {
+    if (selected.some(s => s.id === row.id)) {
+      setSelected(selected.filter(s => s.id !== row.id));
     } else {
-      this.setState({ selected: selected.concat(inventory) });
+      setSelected(selected.concat(row));
     }
-  }
+  };
 
-  async handleInventoryDelete() {
+  const addButton = (
-    const { selected, itemCount } = this.state;
+    <AddDropDownButton
-
+      key="add"
-    this.setState({ hasContentLoading: true });
+      dropdownItems={[
-    try {
-      await Promise.all(
-        selected.map(({ id }) => {
-          return InventoriesAPI.destroy(id);
-        })
-      );
-      this.setState({ itemCount: itemCount - selected.length });
-    } catch (err) {
-      this.setState({ deletionError: err });
-    } finally {
-      await this.loadInventories();
-    }
-  }
-
-  async loadInventories() {
-    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 = InventoriesAPI.readOptions();
-    }
-
-    const promises = Promise.all([InventoriesAPI.read(params), optionsPromise]);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-
-    try {
-      const [
         {
-          data: { count, results },
+          label: i18n._(t`Inventory`),
+          url: `${match.url}/inventory/add/`,
         },
         {
-          data: { actions },
+          label: i18n._(t`Smart Inventory`),
+          url: `${match.url}/smart_inventory/add/`,
         },
-      ] = await promises;
+      ]}
-
+    />
-      this.setState({
+  );
-        actions,
+  return (
-        itemCount: count,
+    <PageSection>
-        inventories: results,
+      <Card>
-        selected: [],
+        <PaginatedDataList
-      });
+          contentError={contentError}
-    } catch (err) {
+          hasContentLoading={hasContentLoading}
-      this.setState({ contentError: err });
+          items={inventories}
-    } finally {
+          itemCount={itemCount}
-      this.setState({ hasContentLoading: false });
+          pluralizedItemName={i18n._(t`Inventories`)}
-    }
+          qsConfig={QS_CONFIG}
-  }
+          onRowClick={handleSelect}
-
+          toolbarSearchColumns={[
-  render() {
+            {
-    const {
+              name: i18n._(t`Name`),
-      contentError,
+              key: 'name',
-      hasContentLoading,
+              isDefault: true,
-      deletionError,
+            },
-      inventories,
+            {
-      itemCount,
+              name: i18n._(t`Created By (Username)`),
-      selected,
+              key: 'created_by__username',
-      actions,
+            },
-    } = this.state;
+            {
-    const { match, i18n } = this.props;
+              name: i18n._(t`Modified By (Username)`),
-    const canAdd =
+              key: 'modified_by__username',
-      actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+            },
-    const isAllSelected =
+          ]}
-      selected.length === inventories.length && selected.length !== 0;
+          toolbarSortColumns={[
-    const addButton = (
+            {
-      <AddDropDownButton
+              name: i18n._(t`Name`),
-        key="add"
+              key: 'name',
-        dropdownItems={[
+            },
-          {
+          ]}
-            label: i18n._(t`Inventory`),
+          renderToolbar={props => (
-            url: `${match.url}/inventory/add/`,
+            <DatalistToolbar
-          },
+              {...props}
-          {
+              showSelectAll
-            label: i18n._(t`Smart Inventory`),
+              showExpandCollapse
-            url: `${match.url}/smart_inventory/add/`,
+              isAllSelected={isAllSelected}
-          },
+              onSelectAll={handleSelectAll}
-        ]}
+              qsConfig={QS_CONFIG}
-      />
+              additionalControls={[
-    );
+                ...(canAdd ? [addButton] : []),
-    return (
+                <ToolbarDeleteButton
-      <PageSection>
+                  key="delete"
-        <Card>
+                  onDelete={handleInventoryDelete}
-          <PaginatedDataList
+                  itemsToDelete={selected}
-            contentError={contentError}
+                  pluralizedItemName={i18n._(t`Inventories`)}
-            hasContentLoading={hasContentLoading}
+                />,
-            items={inventories}
+              ]}
-            itemCount={itemCount}
+            />
-            pluralizedItemName={i18n._(t`Inventories`)}
+          )}
-            qsConfig={QS_CONFIG}
+          renderItem={inventory => (
-            onRowClick={this.handleSelect}
+            <InventoryListItem
-            toolbarSearchColumns={[
+              key={inventory.id}
-              {
+              value={inventory.name}
-                name: i18n._(t`Name`),
+              inventory={inventory}
-                key: 'name',
+              detailUrl={
-                isDefault: true,
+                inventory.kind === 'smart'
-              },
+                  ? `${match.url}/smart_inventory/${inventory.id}/details`
-              {
+                  : `${match.url}/inventory/${inventory.id}/details`
-                name: i18n._(t`Created By (Username)`),
+              }
-                key: 'created_by__username',
+              onSelect={() => handleSelect(inventory)}
-              },
+              isSelected={selected.some(row => row.id === inventory.id)}
-              {
+            />
-                name: i18n._(t`Modified By (Username)`),
+          )}
-                key: 'modified_by__username',
+          emptyStateControls={canAdd && addButton}
-              },
+        />
-            ]}
+      </Card>
-            toolbarSortColumns={[
+      <AlertModal
-              {
+        isOpen={deletionError}
-                name: i18n._(t`Name`),
+        variant="error"
-                key: 'name',
+        title={i18n._(t`Error!`)}
-              },
+        onClose={clearDeletionError}
-            ]}
+      >
-            renderToolbar={props => (
+        {i18n._(t`Failed to delete one or more inventories.`)}
-              <DatalistToolbar
+        <ErrorDetail error={deletionError} />
-                {...props}
+      </AlertModal>
-                showSelectAll
+    </PageSection>
-                showExpandCollapse
+  );
-                isAllSelected={isAllSelected}
-                onSelectAll={this.handleSelectAll}
-                qsConfig={QS_CONFIG}
-                additionalControls={[
-                  ...(canAdd ? [addButton] : []),
-                  <ToolbarDeleteButton
-                    key="delete"
-                    onDelete={this.handleInventoryDelete}
-                    itemsToDelete={selected}
-                    pluralizedItemName="Inventories"
-                  />,
-                ]}
-              />
-            )}
-            renderItem={inventory => (
-              <InventoryListItem
-                key={inventory.id}
-                value={inventory.name}
-                inventory={inventory}
-                detailUrl={
-                  inventory.kind === 'smart'
-                    ? `${match.url}/smart_inventory/${inventory.id}/details`
-                    : `${match.url}/inventory/${inventory.id}/details`
-                }
-                onSelect={() => this.handleSelect(inventory)}
-                isSelected={selected.some(row => row.id === inventory.id)}
-              />
-            )}
-            emptyStateControls={canAdd && addButton}
-          />
-        </Card>
-        <AlertModal
-          isOpen={deletionError}
-          variant="error"
-          title={i18n._(t`Error!`)}
-          onClose={this.handleDeleteErrorClose}
-        >
-          {i18n._(t`Failed to delete one or more inventories.`)}
-          <ErrorDetail error={deletionError} />
-        </AlertModal>
-      </PageSection>
-    );
-  }
 }
 
-export { InventoriesList as _InventoriesList };
+export default withI18n()(InventoryList);
-export default withI18n()(withRouter(InventoriesList));

awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.test.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { InventoriesAPI } from '@api';
-import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
-import InventoriesList, { _InventoriesList } from './InventoryList';
+import InventoryList from './InventoryList';
 
 jest.mock('@api');
 
@@ -117,7 +118,7 @@ const mockInventories = [
   },
 ];
 
-describe('<InventoriesList />', () => {
+describe('<InventoryList />', () => {
   beforeEach(() => {
     InventoriesAPI.read.mockResolvedValue({
       data: {
@@ -140,186 +141,174 @@ describe('<InventoriesList />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders successfully', () => {
+  test('should load and render inventories', async () => {
-    mountWithContexts(
+    let wrapper;
-      <InventoriesList
+    await act(async () => {
-        match={{ path: '/inventories', url: '/inventories' }}
+      wrapper = mountWithContexts(<InventoryList />);
-        location={{ search: '', pathname: '/inventories' }}
-      />
-    );
-  });
-
-  test('Inventories are retrieved from the api and the components finishes loading', async done => {
-    const loadInventories = jest.spyOn(
-      _InventoriesList.prototype,
-      'loadInventories'
-    );
-    const wrapper = mountWithContexts(<InventoriesList />);
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('hasContentLoading') === true
-    );
-    expect(loadInventories).toHaveBeenCalled();
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('hasContentLoading') === false
-    );
-    expect(wrapper.find('InventoryListItem').length).toBe(3);
-    done();
-  });
-
-  test('handleSelect is called when a inventory list item is selected', async done => {
-    const handleSelect = jest.spyOn(_InventoriesList.prototype, 'handleSelect');
-    const wrapper = mountWithContexts(<InventoriesList />);
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('hasContentLoading') === false
-    );
-    await wrapper
-      .find('input#select-inventory-1')
-      .closest('DataListCheck')
-      .props()
-      .onChange();
-    expect(handleSelect).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('selected').length === 1
-    );
-    done();
-  });
-
-  test('handleSelectAll is called when a inventory list item is selected', async done => {
-    const handleSelectAll = jest.spyOn(
-      _InventoriesList.prototype,
-      'handleSelectAll'
-    );
-    const wrapper = mountWithContexts(<InventoriesList />);
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('hasContentLoading') === false
-    );
-    wrapper
-      .find('Checkbox#select-all')
-      .props()
-      .onChange(true);
-    expect(handleSelectAll).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('selected').length === 3
-    );
-    done();
-  });
-
-  test('delete button is disabled if user does not have delete capabilities on a selected inventory', async done => {
-    const wrapper = mountWithContexts(<InventoriesList />);
-    wrapper.find('InventoriesList').setState({
-      inventories: mockInventories,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockInventories.slice(0, 2),
     });
-    await waitForElement(
+    wrapper.update();
-      wrapper,
+
-      'ToolbarDeleteButton * button',
+    expect(wrapper.find('InventoryListItem')).toHaveLength(3);
-      el => el.getDOMNode().disabled === false
-    );
-    wrapper.find('InventoriesList').setState({
-      selected: mockInventories,
-    });
-    await waitForElement(
-      wrapper,
-      'ToolbarDeleteButton * button',
-      el => el.getDOMNode().disabled === true
-    );
-    done();
   });
 
-  test('api is called to delete inventories for each selected inventory.', () => {
+  test('should select inventory when checked', async () => {
-    InventoriesAPI.destroy = jest.fn();
+    let wrapper;
-    const wrapper = mountWithContexts(<InventoriesList />);
+    await act(async () => {
-    wrapper.find('InventoriesList').setState({
+      wrapper = mountWithContexts(<InventoryList />);
-      inventories: mockInventories,
-      itemCount: 3,
-      isInitialized: true,
-      isModalOpen: true,
-      selected: mockInventories.slice(0, 2),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('InventoryListItem')
+        .first()
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('InventoryListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should select all', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
+    });
+    wrapper.update();
+
+    const items = wrapper.find('InventoryListItem');
+    expect(items).toHaveLength(3);
+    items.forEach(item => {
+      expect(item.prop('isSelected')).toEqual(true);
+    });
+
+    expect(
+      wrapper
+        .find('InventoryListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should disable delete button', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('InventoryListItem')
+        .at(2)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(wrapper.find('ToolbarDeleteButton button').prop('disabled')).toEqual(
+      true
+    );
+  });
+
+  test('should call delete api', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('InventoryListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper
+        .find('InventoryListItem')
+        .at(1)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+
     expect(InventoriesAPI.destroy).toHaveBeenCalledTimes(2);
   });
 
-  test('error is shown when inventory not successfully deleted from api', async done => {
+  test('should show deletion error', async () => {
     InventoriesAPI.destroy.mockRejectedValue(
       new Error({
         response: {
           config: {
             method: 'delete',
-            url: '/api/v2/inventories/1',
+            url: '/api/v2/inventory/1',
           },
           data: 'An error occurred',
         },
       })
     );
-    const wrapper = mountWithContexts(<InventoriesList />);
+    let wrapper;
-    wrapper.find('InventoriesList').setState({
+    await act(async () => {
-      inventories: mockInventories,
+      wrapper = mountWithContexts(<InventoryList />);
-      itemCount: 1,
-      isInitialized: true,
-      isModalOpen: true,
-      selected: mockInventories.slice(0, 1),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
-    await waitForElement(
+    expect(InventoriesAPI.read).toHaveBeenCalledTimes(1);
-      wrapper,
+    await act(async () => {
-      'Modal',
+      wrapper
-      el => el.props().isOpen === true && el.props().title === 'Error!'
+        .find('InventoryListItem')
-    );
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
 
-    done();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+    wrapper.update();
+
+    const modal = wrapper.find('Modal');
+    expect(modal).toHaveLength(1);
+    expect(modal.prop('title')).toEqual('Error!');
   });
 
-  test('Add button shown for users with ability to POST', async done => {
+  test('Add button shown for users without ability to POST', async () => {
-    const wrapper = mountWithContexts(<InventoriesList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<InventoryList />);
-      'InventoriesList',
+    });
-      el => el.state('hasContentLoading') === true
+    wrapper.update();
-    );
+
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      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 () => {
-    InventoriesAPI.readOptions.mockResolvedValue({
+    InventoriesAPI.readOptions = () =>
-      data: {
+      Promise.resolve({
-        actions: {
+        data: {
-          GET: {},
+          actions: {
+            GET: {},
+          },
         },
-      },
+      });
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<InventoryList />);
     });
-    const wrapper = mountWithContexts(<InventoriesList />);
+    wrapper.update();
-    await waitForElement(
+
-      wrapper,
-      'InventoriesList',
-      el => el.state('hasContentLoading') === true
-    );
-    await waitForElement(
-      wrapper,
-      'InventoriesList',
-      el => el.state('hasContentLoading') === false
-    );
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    done();
   });
 });

awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx

@@ -1,10 +1,11 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import { ProjectsAPI } from '@api';
+import useRequest, { useDeleteItems } from '@util/useRequest';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
 import ErrorDetail from '@components/ErrorDetail';
@@ -22,231 +23,179 @@ const QS_CONFIG = getQSConfig('project', {
   order_by: 'name',
 });
 
-class ProjectsList extends Component {
+function ProjectList({ i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const match = useRouteMatch();
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const {
-      hasContentLoading: true,
+    result: { projects, itemCount, actions },
-      contentError: null,
+    error: contentError,
-      deletionError: null,
+    isLoading,
+    request: fetchProjects,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const [response, actionsResponse] = await Promise.all([
+        ProjectsAPI.read(params),
+        ProjectsAPI.readOptions(),
+      ]);
+      return {
+        projects: response.data.results,
+        itemCount: response.data.count,
+        actions: actionsResponse.data.actions,
+      };
+    }, [location]),
+    {
       projects: [],
-      selected: [],
       itemCount: 0,
-      actions: null,
+      actions: {},
-    };
-
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleProjectDelete = this.handleProjectDelete.bind(this);
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-    this.loadProjects = this.loadProjects.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadProjects();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadProjects();
     }
-  }
+  );
 
-  handleSelectAll(isSelected) {
+  useEffect(() => {
-    const { projects } = this.state;
+    fetchProjects();
+  }, [fetchProjects]);
 
-    const selected = isSelected ? [...projects] : [];
+  const isAllSelected =
-    this.setState({ selected });
+    selected.length === projects.length && selected.length > 0;
-  }
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteProjects,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(selected.map(({ id }) => ProjectsAPI.destroy(id)));
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchProjects,
+    }
+  );
 
-  handleSelect(row) {
+  const handleProjectDelete = async () => {
-    const { selected } = this.state;
+    await deleteProjects();
+    setSelected([]);
+  };
 
+  const hasContentLoading = isDeleteLoading || isLoading;
+  const canAdd = actions && actions.POST;
+
+  const handleSelectAll = isSelected => {
+    setSelected(isSelected ? [...projects] : []);
+  };
+
+  const handleSelect = row => {
     if (selected.some(s => s.id === row.id)) {
-      this.setState({ selected: selected.filter(s => s.id !== row.id) });
+      setSelected(selected.filter(s => s.id !== row.id));
     } else {
-      this.setState({ selected: selected.concat(row) });
+      setSelected(selected.concat(row));
     }
-  }
+  };
 
-  handleDeleteErrorClose() {
+  return (
-    this.setState({ deletionError: null });
+    <Fragment>
-  }
+      <PageSection>
-
+        <Card>
-  async handleProjectDelete() {
+          <PaginatedDataList
-    const { selected } = this.state;
+            contentError={contentError}
-
+            hasContentLoading={hasContentLoading}
-    this.setState({ hasContentLoading: true });
+            items={projects}
-    try {
+            itemCount={itemCount}
-      await Promise.all(
+            pluralizedItemName={i18n._(t`Projects`)}
-        selected.map(project => ProjectsAPI.destroy(project.id))
+            qsConfig={QS_CONFIG}
-      );
+            onRowClick={handleSelect}
-    } catch (err) {
+            toolbarSearchColumns={[
-      this.setState({ deletionError: err });
+              {
-    } finally {
+                name: i18n._(t`Name`),
-      await this.loadProjects();
+                key: 'name',
-    }
+                isDefault: true,
-  }
+              },
-
+              {
-  async loadProjects() {
+                name: i18n._(t`Type`),
-    const { location } = this.props;
+                key: 'type',
-    const { actions: cachedActions } = this.state;
+                options: [
-    const params = parseQueryString(QS_CONFIG, location.search);
+                  [``, i18n._(t`Manual`)],
-
+                  [`git`, i18n._(t`Git`)],
-    let optionsPromise;
+                  [`hg`, i18n._(t`Mercurial`)],
-    if (cachedActions) {
+                  [`svn`, i18n._(t`Subversion`)],
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
+                  [`insights`, i18n._(t`Red Hat Insights`)],
-    } else {
+                ],
-      optionsPromise = ProjectsAPI.readOptions();
+              },
-    }
+              {
-
+                name: i18n._(t`SCM URL`),
-    const promises = Promise.all([ProjectsAPI.read(params), optionsPromise]);
+                key: 'scm_url',
-
+              },
-    this.setState({ contentError: null, hasContentLoading: true });
+              {
-    try {
+                name: i18n._(t`Modified By (Username)`),
-      const [
+                key: 'modified_by__username',
-        {
+              },
-          data: { count, results },
+              {
-        },
+                name: i18n._(t`Created By (Username)`),
-        {
+                key: 'created_by__username',
-          data: { actions },
+              },
-        },
+            ]}
-      ] = await promises;
+            toolbarSortColumns={[
-      this.setState({
+              {
-        actions,
+                name: i18n._(t`Name`),
-        itemCount: count,
+                key: 'name',
-        projects: results,
+              },
-        selected: [],
+            ]}
-      });
+            renderToolbar={props => (
-    } catch (err) {
+              <DataListToolbar
-      this.setState({ contentError: err });
+                {...props}
-    } finally {
+                showSelectAll
-      this.setState({ hasContentLoading: false });
+                isAllSelected={isAllSelected}
-    }
+                onSelectAll={handleSelectAll}
-  }
+                qsConfig={QS_CONFIG}
-
+                additionalControls={[
-  render() {
+                  ...(canAdd
-    const {
+                    ? [
-      actions,
+                        <ToolbarAddButton
-      itemCount,
+                          key="add"
-      contentError,
+                          linkTo={`${match.url}/add`}
-      hasContentLoading,
+                        />,
-      deletionError,
+                      ]
-      selected,
+                    : []),
-      projects,
+                  <ToolbarDeleteButton
-    } = this.state;
+                    key="delete"
-    const { match, i18n } = this.props;
+                    onDelete={handleProjectDelete}
-
+                    itemsToDelete={selected}
-    const canAdd =
+                    pluralizedItemName={i18n._(t`Projects`)}
-      actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+                  />,
-    const isAllSelected =
+                ]}
-      selected.length > 0 && selected.length === projects.length;
+              />
-
+            )}
-    return (
+            renderItem={o => (
-      <Fragment>
+              <ProjectListItem
-        <PageSection>
+                key={o.id}
-          <Card>
+                project={o}
-            <PaginatedDataList
+                detailUrl={`${match.url}/${o.id}`}
-              contentError={contentError}
+                isSelected={selected.some(row => row.id === o.id)}
-              hasContentLoading={hasContentLoading}
+                onSelect={() => handleSelect(o)}
-              items={projects}
+              />
-              itemCount={itemCount}
+            )}
-              pluralizedItemName={i18n._(t`Projects`)}
+            emptyStateControls={
-              qsConfig={QS_CONFIG}
+              canAdd ? (
-              onRowClick={this.handleSelect}
+                <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-              toolbarSearchColumns={[
+              ) : null
-                {
+            }
-                  name: i18n._(t`Name`),
+          />
-                  key: 'name',
+        </Card>
-                  isDefault: true,
+      </PageSection>
-                },
+      <AlertModal
-                {
+        isOpen={deletionError}
-                  name: i18n._(t`Type`),
+        variant="error"
-                  key: 'type',
+        title={i18n._(t`Error!`)}
-                  options: [
+        onClose={clearDeletionError}
-                    [``, i18n._(t`Manual`)],
+      >
-                    [`git`, i18n._(t`Git`)],
+        {i18n._(t`Failed to delete one or more projects.`)}
-                    [`hg`, i18n._(t`Mercurial`)],
+        <ErrorDetail error={deletionError} />
-                    [`svn`, i18n._(t`Subversion`)],
+      </AlertModal>
-                    [`insights`, i18n._(t`Red Hat Insights`)],
+    </Fragment>
-                  ],
+  );
-                },
-                {
-                  name: i18n._(t`SCM URL`),
-                  key: 'scm_url',
-                },
-                {
-                  name: i18n._(t`Modified By (Username)`),
-                  key: 'modified_by__username',
-                },
-                {
-                  name: i18n._(t`Created By (Username)`),
-                  key: 'created_by__username',
-                },
-              ]}
-              toolbarSortColumns={[
-                {
-                  name: i18n._(t`Name`),
-                  key: 'name',
-                },
-              ]}
-              renderToolbar={props => (
-                <DataListToolbar
-                  {...props}
-                  showSelectAll
-                  isAllSelected={isAllSelected}
-                  onSelectAll={this.handleSelectAll}
-                  qsConfig={QS_CONFIG}
-                  additionalControls={[
-                    ...(canAdd
-                      ? [
-                          <ToolbarAddButton
-                            key="add"
-                            linkTo={`${match.url}/add`}
-                          />,
-                        ]
-                      : []),
-                    <ToolbarDeleteButton
-                      key="delete"
-                      onDelete={this.handleProjectDelete}
-                      itemsToDelete={selected}
-                      pluralizedItemName={i18n._(t`Projects`)}
-                    />,
-                  ]}
-                />
-              )}
-              renderItem={o => (
-                <ProjectListItem
-                  key={o.id}
-                  project={o}
-                  detailUrl={`${match.url}/${o.id}`}
-                  isSelected={selected.some(row => row.id === o.id)}
-                  onSelect={() => this.handleSelect(o)}
-                />
-              )}
-              emptyStateControls={
-                canAdd ? (
-                  <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                ) : null
-              }
-            />
-          </Card>
-        </PageSection>
-        <AlertModal
-          isOpen={deletionError}
-          variant="error"
-          title={i18n._(t`Error!`)}
-          onClose={this.handleDeleteErrorClose}
-        >
-          {i18n._(t`Failed to delete one or more projects.`)}
-          <ErrorDetail error={deletionError} />
-        </AlertModal>
-      </Fragment>
-    );
-  }
 }
 
-export { ProjectsList as _ProjectsList };
+export default withI18n()(ProjectList);
-export default withI18n()(withRouter(ProjectsList));

awx/ui_next/src/screens/Project/ProjectList/ProjectList.test.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { ProjectsAPI } from '@api';
-import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
-
+import ProjectList from './ProjectList';
-import ProjectsList, { _ProjectsList } from './ProjectList';
 
 jest.mock('@api');
 
@@ -63,7 +63,7 @@ const mockProjects = [
   },
 ];
 
-describe('<ProjectsList />', () => {
+describe('<ProjectList />', () => {
   beforeEach(() => {
     ProjectsAPI.read.mockResolvedValue({
       data: {
@@ -86,117 +86,114 @@ describe('<ProjectsList />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders successfully', () => {
+  test('should load and render projects', async () => {
-    mountWithContexts(
+    let wrapper;
-      <ProjectsList
+    await act(async () => {
-        match={{ path: '/projects', url: '/projects' }}
+      wrapper = mountWithContexts(<ProjectList />);
-        location={{ search: '', pathname: '/projects' }}
-      />
-    );
-  });
-
-  test('Projects are retrieved from the api and the components finishes loading', async done => {
-    const loadProjects = jest.spyOn(_ProjectsList.prototype, 'loadProjects');
-    const wrapper = mountWithContexts(<ProjectsList />);
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('hasContentLoading') === true
-    );
-    expect(loadProjects).toHaveBeenCalled();
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('hasContentLoading') === false
-    );
-    done();
-  });
-
-  test('handleSelect is called when a project list item is selected', async done => {
-    const handleSelect = jest.spyOn(_ProjectsList.prototype, 'handleSelect');
-    const wrapper = mountWithContexts(<ProjectsList />);
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('hasContentLoading') === false
-    );
-    await wrapper
-      .find('input#select-project-1')
-      .closest('DataListCheck')
-      .props()
-      .onChange();
-    expect(handleSelect).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('selected').length === 1
-    );
-    done();
-  });
-
-  test('handleSelectAll is called when select all checkbox is clicked', async done => {
-    const handleSelectAll = jest.spyOn(
-      _ProjectsList.prototype,
-      'handleSelectAll'
-    );
-    const wrapper = mountWithContexts(<ProjectsList />);
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('hasContentLoading') === false
-    );
-    wrapper
-      .find('Checkbox#select-all')
-      .props()
-      .onChange(true);
-    expect(handleSelectAll).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('selected').length === 3
-    );
-    done();
-  });
-
-  test('delete button is disabled if user does not have delete capabilities on a selected project', async done => {
-    const wrapper = mountWithContexts(<ProjectsList />);
-    wrapper.find('ProjectsList').setState({
-      projects: mockProjects,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockProjects.slice(0, 1),
     });
-    await waitForElement(
+    wrapper.update();
-      wrapper,
+
-      'ToolbarDeleteButton * button',
+    expect(wrapper.find('ProjectListItem')).toHaveLength(3);
-      el => el.getDOMNode().disabled === false
-    );
-    wrapper.find('ProjectsList').setState({
-      selected: mockProjects,
-    });
-    await waitForElement(
-      wrapper,
-      'ToolbarDeleteButton * button',
-      el => el.getDOMNode().disabled === true
-    );
-    done();
   });
 
-  test('api is called to delete projects for each selected project.', () => {
+  test('should select project when checked', async () => {
-    ProjectsAPI.destroy = jest.fn();
+    let wrapper;
-    const wrapper = mountWithContexts(<ProjectsList />);
+    await act(async () => {
-    wrapper.find('ProjectsList').setState({
+      wrapper = mountWithContexts(<ProjectList />);
-      projects: mockProjects,
-      itemCount: 2,
-      isInitialized: true,
-      isModalOpen: true,
-      selected: mockProjects.slice(0, 2),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('ProjectListItem')
+        .first()
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('ProjectListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should select all', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<ProjectList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
+    });
+    wrapper.update();
+
+    const items = wrapper.find('ProjectListItem');
+    expect(items).toHaveLength(3);
+    items.forEach(item => {
+      expect(item.prop('isSelected')).toEqual(true);
+    });
+
+    expect(
+      wrapper
+        .find('ProjectListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should disable delete button', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<ProjectList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('ProjectListItem')
+        .at(2)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(wrapper.find('ToolbarDeleteButton button').prop('disabled')).toEqual(
+      true
+    );
+  });
+
+  test('should call delete api', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<ProjectList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('ProjectListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper
+        .find('ProjectListItem')
+        .at(1)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+
     expect(ProjectsAPI.destroy).toHaveBeenCalledTimes(2);
   });
 
-  test('error is shown when project not successfully deleted from api', async done => {
+  test('should show deletion error', async () => {
     ProjectsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -208,60 +205,55 @@ describe('<ProjectsList />', () => {
         },
       })
     );
-    const wrapper = mountWithContexts(<ProjectsList />);
+    let wrapper;
-    wrapper.find('ProjectsList').setState({
+    await act(async () => {
-      projects: mockProjects,
+      wrapper = mountWithContexts(<ProjectList />);
-      itemCount: 1,
-      isInitialized: true,
-      isModalOpen: true,
-      selected: mockProjects.slice(0, 1),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
-    await waitForElement(
+    expect(ProjectsAPI.read).toHaveBeenCalledTimes(1);
-      wrapper,
+    await act(async () => {
-      'Modal',
+      wrapper
-      el => el.props().isOpen === true && el.props().title === 'Error!'
+        .find('ProjectListItem')
-    );
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
 
-    done();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+    wrapper.update();
+
+    const modal = wrapper.find('Modal');
+    expect(modal).toHaveLength(1);
+    expect(modal.prop('title')).toEqual('Error!');
   });
 
-  test('Add button shown for users without ability to POST', async done => {
+  test('Add button shown for users without ability to POST', async () => {
-    const wrapper = mountWithContexts(<ProjectsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<ProjectList />);
-      'ProjectsList',
+    });
-      el => el.state('hasContentLoading') === true
+    wrapper.update();
-    );
+
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      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 () => {
-    ProjectsAPI.readOptions.mockResolvedValue({
+    ProjectsAPI.readOptions = () =>
-      data: {
+      Promise.resolve({
-        actions: {
+        data: {
-          GET: {},
+          actions: {
+            GET: {},
+          },
         },
-      },
+      });
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<ProjectList />);
     });
-    const wrapper = mountWithContexts(<ProjectsList />);
+    wrapper.update();
-    await waitForElement(
+
-      wrapper,
-      'ProjectsList',
-      el => el.state('hasContentLoading') === true
-    );
-    await waitForElement(
-      wrapper,
-      'ProjectsList',
-      el => el.state('hasContentLoading') === false
-    );
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    done();
   });
 });

awx/ui_next/src/screens/Team/TeamList/TeamList.jsx

@@ -1,10 +1,11 @@
-import React, { Component, Fragment } from 'react';
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
-import { withRouter } from 'react-router-dom';
+import { useLocation, useRouteMatch } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 
 import { TeamsAPI } from '@api';
+import useRequest, { useDeleteItems } from '@util/useRequest';
 import AlertModal from '@components/AlertModal';
 import DataListToolbar from '@components/DataListToolbar';
 import ErrorDetail from '@components/ErrorDetail';
@@ -22,218 +23,167 @@ const QS_CONFIG = getQSConfig('team', {
   order_by: 'name',
 });
 
-class TeamsList extends Component {
+function TeamList({ i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const match = useRouteMatch();
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const {
-      hasContentLoading: true,
+    result: { teams, itemCount, actions },
-      contentError: null,
+    error: contentError,
-      deletionError: null,
+    isLoading,
+    request: fetchTeams,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const [response, actionsResponse] = await Promise.all([
+        TeamsAPI.read(params),
+        TeamsAPI.readOptions(),
+      ]);
+      return {
+        teams: response.data.results,
+        itemCount: response.data.count,
+        actions: actionsResponse.data.actions,
+      };
+    }, [location]),
+    {
       teams: [],
-      selected: [],
       itemCount: 0,
-      actions: null,
+      actions: {},
-    };
-
-    this.handleSelectAll = this.handleSelectAll.bind(this);
-    this.handleSelect = this.handleSelect.bind(this);
-    this.handleTeamDelete = this.handleTeamDelete.bind(this);
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-    this.loadTeams = this.loadTeams.bind(this);
-  }
-
-  componentDidMount() {
-    this.loadTeams();
-  }
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadTeams();
     }
-  }
+  );
 
-  handleSelectAll(isSelected) {
+  useEffect(() => {
-    const { teams } = this.state;
+    fetchTeams();
+  }, [fetchTeams]);
 
-    const selected = isSelected ? [...teams] : [];
+  const isAllSelected = selected.length === teams.length && selected.length > 0;
-    this.setState({ selected });
+  const {
-  }
+    isLoading: isDeleteLoading,
+    deleteItems: deleteTeams,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchTeams,
+    }
+  );
 
-  handleSelect(row) {
+  const handleTeamDelete = async () => {
-    const { selected } = this.state;
+    await deleteTeams();
+    setSelected([]);
+  };
 
+  const hasContentLoading = isDeleteLoading || isLoading;
+  const canAdd = actions && actions.POST;
+
+  const handleSelectAll = isSelected => {
+    setSelected(isSelected ? [...teams] : []);
+  };
+
+  const handleSelect = row => {
     if (selected.some(s => s.id === row.id)) {
-      this.setState({ selected: selected.filter(s => s.id !== row.id) });
+      setSelected(selected.filter(s => s.id !== row.id));
     } else {
-      this.setState({ selected: selected.concat(row) });
+      setSelected(selected.concat(row));
     }
-  }
+  };
 
-  handleDeleteErrorClose() {
+  return (
-    this.setState({ deletionError: null });
+    <Fragment>
-  }
+      <PageSection>
-
+        <Card>
-  async handleTeamDelete() {
+          <PaginatedDataList
-    const { selected } = this.state;
+            contentError={contentError}
-
+            hasContentLoading={hasContentLoading}
-    this.setState({ hasContentLoading: true });
+            items={teams}
-    try {
+            itemCount={itemCount}
-      await Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
+            pluralizedItemName={i18n._(t`Teams`)}
-    } catch (err) {
+            qsConfig={QS_CONFIG}
-      this.setState({ deletionError: err });
+            onRowClick={handleSelect}
-    } finally {
+            toolbarSearchColumns={[
-      await this.loadTeams();
+              {
-    }
+                name: i18n._(t`Name`),
-  }
+                key: 'name',
-
+                isDefault: true,
-  async loadTeams() {
+              },
-    const { location } = this.props;
+              {
-    const { actions: cachedActions } = this.state;
+                name: i18n._(t`Organization Name`),
-    const params = parseQueryString(QS_CONFIG, location.search);
+                key: 'organization__name',
-
+              },
-    let optionsPromise;
+              {
-    if (cachedActions) {
+                name: i18n._(t`Created By (Username)`),
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
+                key: 'created_by__username',
-    } else {
+              },
-      optionsPromise = TeamsAPI.readOptions();
+              {
-    }
+                name: i18n._(t`Modified By (Username)`),
-
+                key: 'modified_by__username',
-    const promises = Promise.all([TeamsAPI.read(params), optionsPromise]);
+              },
-
+            ]}
-    this.setState({ contentError: null, hasContentLoading: true });
+            toolbarSortColumns={[
-    try {
+              {
-      const [
+                name: i18n._(t`Name`),
-        {
+                key: 'name',
-          data: { count, results },
+              },
-        },
+            ]}
-        {
+            renderToolbar={props => (
-          data: { actions },
+              <DataListToolbar
-        },
+                {...props}
-      ] = await promises;
+                showSelectAll
-      this.setState({
+                isAllSelected={isAllSelected}
-        actions,
+                onSelectAll={handleSelectAll}
-        itemCount: count,
+                qsConfig={QS_CONFIG}
-        teams: results,
+                additionalControls={[
-        selected: [],
+                  ...(canAdd
-      });
+                    ? [
-    } catch (err) {
+                        <ToolbarAddButton
-      this.setState({ contentError: err });
+                          key="add"
-    } finally {
+                          linkTo={`${match.url}/add`}
-      this.setState({ hasContentLoading: false });
+                        />,
-    }
+                      ]
-  }
+                    : []),
-
+                  <ToolbarDeleteButton
-  render() {
+                    key="delete"
-    const {
+                    onDelete={handleTeamDelete}
-      actions,
+                    itemsToDelete={selected}
-      itemCount,
+                    pluralizedItemName={i18n._(t`Teams`)}
-      contentError,
+                  />,
-      hasContentLoading,
+                ]}
-      deletionError,
+              />
-      selected,
+            )}
-      teams,
+            renderItem={o => (
-    } = this.state;
+              <TeamListItem
-    const { match, i18n } = this.props;
+                key={o.id}
-
+                team={o}
-    const canAdd =
+                detailUrl={`${match.url}/${o.id}`}
-      actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
+                isSelected={selected.some(row => row.id === o.id)}
-    const isAllSelected =
+                onSelect={() => handleSelect(o)}
-      selected.length > 0 && selected.length === teams.length;
+              />
-
+            )}
-    return (
+            emptyStateControls={
-      <Fragment>
+              canAdd ? (
-        <PageSection>
+                <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-          <Card>
+              ) : null
-            <PaginatedDataList
+            }
-              contentError={contentError}
+          />
-              hasContentLoading={hasContentLoading}
+        </Card>
-              items={teams}
+      </PageSection>
-              itemCount={itemCount}
+      <AlertModal
-              pluralizedItemName={i18n._(t`Teams`)}
+        isOpen={deletionError}
-              qsConfig={QS_CONFIG}
+        variant="error"
-              onRowClick={this.handleSelect}
+        title={i18n._(t`Error!`)}
-              toolbarSearchColumns={[
+        onClose={clearDeletionError}
-                {
+      >
-                  name: i18n._(t`Name`),
+        {i18n._(t`Failed to delete one or more teams.`)}
-                  key: 'name',
+        <ErrorDetail error={deletionError} />
-                  isDefault: true,
+      </AlertModal>
-                },
+    </Fragment>
-                {
+  );
-                  name: i18n._(t`Organization Name`),
-                  key: 'organization__name',
-                },
-                {
-                  name: i18n._(t`Created By (Username)`),
-                  key: 'created_by__username',
-                },
-                {
-                  name: i18n._(t`Modified By (Username)`),
-                  key: 'modified_by__username',
-                },
-              ]}
-              toolbarSortColumns={[
-                {
-                  name: i18n._(t`Name`),
-                  key: 'name',
-                },
-              ]}
-              renderToolbar={props => (
-                <DataListToolbar
-                  {...props}
-                  showSelectAll
-                  isAllSelected={isAllSelected}
-                  onSelectAll={this.handleSelectAll}
-                  qsConfig={QS_CONFIG}
-                  additionalControls={[
-                    ...(canAdd
-                      ? [
-                          <ToolbarAddButton
-                            key="add"
-                            linkTo={`${match.url}/add`}
-                          />,
-                        ]
-                      : []),
-                    <ToolbarDeleteButton
-                      key="delete"
-                      onDelete={this.handleTeamDelete}
-                      itemsToDelete={selected}
-                      pluralizedItemName={i18n._(t`Teams`)}
-                    />,
-                  ]}
-                />
-              )}
-              renderItem={o => (
-                <TeamListItem
-                  key={o.id}
-                  team={o}
-                  detailUrl={`${match.url}/${o.id}`}
-                  isSelected={selected.some(row => row.id === o.id)}
-                  onSelect={() => this.handleSelect(o)}
-                />
-              )}
-              emptyStateControls={
-                canAdd ? (
-                  <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
-                ) : null
-              }
-            />
-          </Card>
-        </PageSection>
-        <AlertModal
-          isOpen={deletionError}
-          variant="error"
-          title={i18n._(t`Error!`)}
-          onClose={this.handleDeleteErrorClose}
-        >
-          {i18n._(t`Failed to delete one or more teams.`)}
-          <ErrorDetail error={deletionError} />
-        </AlertModal>
-      </Fragment>
-    );
-  }
 }
 
-export { TeamsList as _TeamsList };
+export default withI18n()(TeamList);
-export default withI18n()(withRouter(TeamsList));

awx/ui_next/src/screens/Team/TeamList/TeamList.test.jsx

@@ -1,12 +1,13 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { TeamsAPI } from '@api';
-import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
-import TeamsList, { _TeamsList } from './TeamList';
+import TeamList from './TeamList';
 
 jest.mock('@api');
 
-const mockAPITeamsList = {
+const mockAPITeamList = {
   data: {
     count: 3,
     results: [
@@ -50,15 +51,14 @@ const mockAPITeamsList = {
   warningMsg: 'message',
 };
 
-describe('<TeamsList />', () => {
+describe('<TeamList />', () => {
-  let wrapper;
-
   beforeEach(() => {
-    TeamsAPI.read = () =>
+    TeamsAPI.read = jest.fn(() =>
       Promise.resolve({
-        data: mockAPITeamsList.data,
+        data: mockAPITeamList.data,
-      });
+      })
-    TeamsAPI.readOptions = () =>
+    );
+    TeamsAPI.readOptions = jest.fn(() =>
       Promise.resolve({
         data: {
           actions: {
@@ -66,105 +66,119 @@ describe('<TeamsList />', () => {
             POST: {},
           },
         },
-      });
+      })
-  });
-
-  test('initially renders succesfully', () => {
-    mountWithContexts(<TeamsList />);
-  });
-
-  test('Selects one team when row is checked', async () => {
-    wrapper = mountWithContexts(<TeamsList />);
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
     );
-    expect(
-      wrapper
-        .find('input[type="checkbox"]')
-        .findWhere(n => n.prop('checked') === true).length
-    ).toBe(0);
-    wrapper
-      .find('TeamListItem')
-      .at(0)
-      .find('DataListCheck')
-      .props()
-      .onChange(true);
-    wrapper.update();
-    expect(
-      wrapper
-        .find('input[type="checkbox"]')
-        .findWhere(n => n.prop('checked') === true).length
-    ).toBe(1);
   });
 
-  test('Select all checkbox selects and unselects all rows', async () => {
+  test('should load and render teams', async () => {
-    wrapper = mountWithContexts(<TeamsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<TeamList />);
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
-    );
-    expect(
-      wrapper
-        .find('input[type="checkbox"]')
-        .findWhere(n => n.prop('checked') === true).length
-    ).toBe(0);
-    wrapper
-      .find('Checkbox#select-all')
-      .props()
-      .onChange(true);
-    wrapper.update();
-    expect(
-      wrapper
-        .find('input[type="checkbox"]')
-        .findWhere(n => n.prop('checked') === true).length
-    ).toBe(4);
-    wrapper
-      .find('Checkbox#select-all')
-      .props()
-      .onChange(false);
-    wrapper.update();
-    expect(
-      wrapper
-        .find('input[type="checkbox"]')
-        .findWhere(n => n.prop('checked') === true).length
-    ).toBe(0);
-  });
-
-  test('api is called to delete Teams for each team in selected.', () => {
-    wrapper = mountWithContexts(<TeamsList />);
-    const component = wrapper.find('TeamsList');
-    wrapper.find('TeamsList').setState({
-      teams: mockAPITeamsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      isModalOpen: mockAPITeamsList.isModalOpen,
-      selected: mockAPITeamsList.data.results,
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
-    expect(TeamsAPI.destroy).toHaveBeenCalledTimes(
+
-      component.state('selected').length
+    expect(wrapper.find('TeamListItem')).toHaveLength(3);
-    );
   });
 
-  test('call loadTeams after team(s) have been deleted', () => {
+  test('should select team when checked', async () => {
-    const fetchTeams = jest.spyOn(_TeamsList.prototype, 'loadTeams');
+    let wrapper;
-    const event = { preventDefault: () => {} };
+    await act(async () => {
-    wrapper = mountWithContexts(<TeamsList />);
+      wrapper = mountWithContexts(<TeamList />);
-    wrapper.find('TeamsList').setState({
-      teams: mockAPITeamsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockAPITeamsList.data.results.slice(0, 1),
     });
-    const component = wrapper.find('TeamsList');
+    wrapper.update();
-    component.instance().handleTeamDelete(event);
+
-    expect(fetchTeams).toBeCalled();
+    await act(async () => {
+      wrapper
+        .find('TeamListItem')
+        .first()
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    expect(
+      wrapper
+        .find('TeamListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
   });
 
-  test('error is shown when team not successfully deleted from api', async done => {
+  test('should select all', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
+    });
+    wrapper.update();
+
+    const items = wrapper.find('TeamListItem');
+    expect(items).toHaveLength(3);
+    items.forEach(item => {
+      expect(item.prop('isSelected')).toEqual(true);
+    });
+
+    expect(
+      wrapper
+        .find('TeamListItem')
+        .first()
+        .prop('isSelected')
+    ).toEqual(true);
+  });
+
+  test('should call delete api', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper
+        .find('TeamListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper
+        .find('TeamListItem')
+        .at(1)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+
+    expect(TeamsAPI.destroy).toHaveBeenCalledTimes(2);
+  });
+
+  test('should re-fetch teams after team(s) have been deleted', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<TeamList />);
+    });
+    wrapper.update();
+    expect(TeamsAPI.read).toHaveBeenCalledTimes(1);
+    await act(async () => {
+      wrapper
+        .find('TeamListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+
+    expect(TeamsAPI.read).toHaveBeenCalledTimes(2);
+  });
+
+  test('should show deletion error', async () => {
     TeamsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -176,40 +190,41 @@ describe('<TeamsList />', () => {
         },
       })
     );
-
+    let wrapper;
-    wrapper = mountWithContexts(<TeamsList />);
+    await act(async () => {
-    wrapper.find('TeamsList').setState({
+      wrapper = mountWithContexts(<TeamList />);
-      teams: mockAPITeamsList.data.results,
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockAPITeamsList.data.results.slice(0, 1),
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
+    wrapper.update();
-    await waitForElement(
+    expect(TeamsAPI.read).toHaveBeenCalledTimes(1);
-      wrapper,
+    await act(async () => {
-      'Modal',
+      wrapper
-      el => el.props().isOpen === true && el.props().title === 'Error!'
+        .find('TeamListItem')
-    );
+        .at(0)
-    done();
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
+    });
+    wrapper.update();
+
+    const modal = wrapper.find('Modal');
+    expect(modal).toHaveLength(1);
+    expect(modal.prop('title')).toEqual('Error!');
   });
 
-  test('Add button shown for users without ability to POST', async done => {
+  test('Add button shown for users without ability to POST', async () => {
-    wrapper = mountWithContexts(<TeamsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<TeamList />);
-      'TeamsList',
+    });
-      el => el.state('hasContentLoading') === true
+    wrapper.update();
-    );
+
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      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 () => {
     TeamsAPI.readOptions = () =>
       Promise.resolve({
         data: {
@@ -218,18 +233,12 @@ describe('<TeamsList />', () => {
           },
         },
       });
-    wrapper = mountWithContexts(<TeamsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<TeamList />);
-      'TeamsList',
+    });
-      el => el.state('hasContentLoading') === true
+    wrapper.update();
-    );
+
-    await waitForElement(
-      wrapper,
-      'TeamsList',
-      el => el.state('hasContentLoading') === false
-    );
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    done();
   });
 });