Merge pull request #6014 from keithjgrant/host-list-hooks

Host list hooks

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

awx/ui_next/src/components/AlertModal/AlertModal.jsx

@@ -16,7 +16,13 @@ const Header = styled.div`
   }
 `;
 
-export default ({ isOpen = null, title, variant, children, ...props }) => {
+export default function AlertModal({
+  isOpen = null,
+  title,
+  variant,
+  children,
+  ...props
+}) {
   const variantIcons = {
     danger: <ExclamationCircleIcon size="lg" css="color: #c9190b" />,
     error: <TimesCircleIcon size="lg" css="color: #c9190b" />,
@@ -44,4 +50,4 @@ export default ({ isOpen = null, title, variant, children, ...props }) => {
       {children}
     </Modal>
   );
-};
+}

awx/ui_next/src/components/ResourceAccessList/__snapshots__/DeleteRoleConfirmationModal.test.jsx.snap

@@ -17,7 +17,7 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
   }
   username="jane"
 >
-  <_default
+  <AlertModal
     actions={
       Array [
         <Unknown
@@ -648,6 +648,6 @@ exports[`<DeleteRoleConfirmationModal /> should render initially 1`] = `
         </ModalContent>
       </Portal>
     </Modal>
-  </_default>
+  </AlertModal>
 </DeleteRoleConfirmationModal>
 `;

awx/ui_next/src/screens/Host/HostDetail/HostDetail.jsx

@@ -3,7 +3,7 @@ import { Link, useHistory, useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { Host } from '@types';
-import { Button, Switch } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
 import { CardBody, CardActionsRow } from '@components/Card';
 import AlertModal from '@components/AlertModal';
 import ErrorDetail from '@components/ErrorDetail';
@@ -12,6 +12,7 @@ import { VariablesDetail } from '@components/CodeMirrorInput';
 import Sparkline from '@components/Sparkline';
 import DeleteButton from '@components/DeleteButton';
 import { HostsAPI } from '@api';
+import HostToggle from '../shared/HostToggle';
 
 function HostDetail({ host, i18n, onUpdateHost }) {
   const {
@@ -20,7 +21,6 @@ function HostDetail({ host, i18n, onUpdateHost }) {
     id,
     modified,
     name,
-    enabled,
     summary_fields: {
       inventory,
       recent_jobs,
@@ -36,25 +36,9 @@ function HostDetail({ host, i18n, onUpdateHost }) {
   const { id: inventoryId, hostId: inventoryHostId } = useParams();
   const [isLoading, setIsloading] = useState(false);
   const [deletionError, setDeletionError] = useState(false);
-  const [toggleLoading, setToggleLoading] = useState(false);
-  const [toggleError, setToggleError] = useState(false);
 
   const recentPlaybookJobs = recent_jobs.map(job => ({ ...job, type: 'job' }));
 
-  const handleHostToggle = async () => {
-    setToggleLoading(true);
-    try {
-      const { data } = await HostsAPI.update(id, {
-        enabled: !enabled,
-      });
-      onUpdateHost(data);
-    } catch (err) {
-      setToggleError(err);
-    } finally {
-      setToggleLoading(false);
-    }
-  };
-
   const handleHostDelete = async () => {
     setIsloading(true);
     try {
@@ -66,19 +50,6 @@ function HostDetail({ host, i18n, onUpdateHost }) {
     }
   };
 
-  if (toggleError && !toggleLoading) {
-    return (
-      <AlertModal
-        variant="error"
-        title={i18n._(t`Error!`)}
-        isOpen={toggleError && !toggleLoading}
-        onClose={() => setToggleError(false)}
-      >
-        {i18n._(t`Failed to toggle host.`)}
-        <ErrorDetail error={toggleError} />
-      </AlertModal>
-    );
-  }
   if (!isLoading && deletionError) {
     return (
       <AlertModal
@@ -94,15 +65,15 @@ function HostDetail({ host, i18n, onUpdateHost }) {
   }
   return (
     <CardBody>
-      <Switch
+      <HostToggle
+        host={host}
+        onToggle={enabled =>
+          onUpdateHost({
+            ...host,
+            enabled,
+          })
+        }
         css="padding-bottom: 40px"
-        id={`host-${id}-toggle`}
-        label={i18n._(t`On`)}
-        labelOff={i18n._(t`Off`)}
-        isChecked={enabled}
-        isDisabled={!user_capabilities.edit}
-        onChange={() => handleHostToggle()}
-        aria-label={i18n._(t`Toggle Host`)}
       />
       <DetailList gutter="sm">
         <Detail label={i18n._(t`Name`)} value={name} />

awx/ui_next/src/screens/Host/HostList/HostList.jsx

@@ -1,5 +1,5 @@
-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 } from '@patternfly/react-core';
@@ -12,6 +12,7 @@ import PaginatedDataList, {
   ToolbarAddButton,
   ToolbarDeleteButton,
 } from '@components/PaginatedDataList';
+import useRequest, { useDeleteItems } from '@util/useRequest';
 import { getQSConfig, parseQueryString } from '@util/qs';
 
 import HostListItem from './HostListItem';
@@ -22,173 +23,88 @@ const QS_CONFIG = getQSConfig('host', {
   order_by: 'name',
 });
 
-class HostsList extends Component {
+function HostList({ i18n }) {
-  constructor(props) {
+  const location = useLocation();
-    super(props);
+  const match = useRouteMatch();
+  const [selected, setSelected] = useState([]);
 
-    this.state = {
+  const {
-      hasContentLoading: true,
+    result: { hosts, count, actions },
-      contentError: null,
+    error: contentError,
-      deletionError: null,
+    isLoading,
+    request: fetchHosts,
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+      const results = await Promise.all([
+        HostsAPI.read(params),
+        HostsAPI.readOptions(),
+      ]);
+      return {
+        hosts: results[0].data.results,
+        count: results[0].data.count,
+        actions: results[1].data.actions,
+      };
+    }, [location]),
+    {
       hosts: [],
-      selected: [],
+      count: 0,
-      itemCount: 0,
+      actions: {},
-      actions: null,
+    }
-      toggleError: null,
+  );
-      toggleLoading: null,
+
+  useEffect(() => {
+    fetchHosts();
+  }, [fetchHosts]);
+
+  const isAllSelected = selected.length === hosts.length && selected.length > 0;
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteHosts,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchHosts,
+    }
+  );
+
+  const handleHostDelete = async () => {
+    await deleteHosts();
+    setSelected([]);
   };
 
-    this.handleSelectAll = this.handleSelectAll.bind(this);
+  const handleSelectAll = isSelected => {
-    this.handleSelect = this.handleSelect.bind(this);
+    setSelected(isSelected ? [...hosts] : []);
-    this.handleHostDelete = this.handleHostDelete.bind(this);
+  };
-    this.handleDeleteErrorClose = this.handleDeleteErrorClose.bind(this);
-    this.loadActions = this.loadActions.bind(this);
-    this.loadHosts = this.loadHosts.bind(this);
-    this.handleHostToggle = this.handleHostToggle.bind(this);
-    this.handleHostToggleErrorClose = this.handleHostToggleErrorClose.bind(
-      this
-    );
-  }
 
-  componentDidMount() {
+  const handleSelect = host => {
-    this.loadHosts();
+    if (selected.some(h => h.id === host.id)) {
-  }
+      setSelected(selected.filter(h => h.id !== host.id));
-
-  componentDidUpdate(prevProps) {
-    const { location } = this.props;
-    if (location !== prevProps.location) {
-      this.loadHosts();
-    }
-  }
-
-  handleSelectAll(isSelected) {
-    const { hosts } = this.state;
-
-    const selected = isSelected ? [...hosts] : [];
-    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) });
+      setSelected(selected.concat(host));
     }
-  }
+  };
-
-  handleDeleteErrorClose() {
-    this.setState({ deletionError: null });
-  }
-
-  handleHostToggleErrorClose() {
-    this.setState({ toggleError: null });
-  }
-
-  async handleHostDelete() {
-    const { selected } = this.state;
-
-    this.setState({ hasContentLoading: true });
-    try {
-      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
-    } catch (err) {
-      this.setState({ deletionError: err });
-    } finally {
-      await this.loadHosts();
-    }
-  }
-
-  async handleHostToggle(hostToToggle) {
-    const { hosts } = this.state;
-    this.setState({ toggleLoading: hostToToggle.id });
-    try {
-      const { data: updatedHost } = await HostsAPI.update(hostToToggle.id, {
-        enabled: !hostToToggle.enabled,
-      });
-      this.setState({
-        hosts: hosts.map(host =>
-          host.id === updatedHost.id ? updatedHost : host
-        ),
-      });
-    } catch (err) {
-      this.setState({ toggleError: err });
-    } finally {
-      this.setState({ toggleLoading: null });
-    }
-  }
-
-  async loadActions() {
-    const { actions: cachedActions } = this.state;
-    let optionsPromise;
-    if (cachedActions) {
-      optionsPromise = Promise.resolve({ data: { actions: cachedActions } });
-    } else {
-      optionsPromise = HostsAPI.readOptions();
-    }
-
-    return optionsPromise;
-  }
-
-  async loadHosts() {
-    const { location } = this.props;
-    const params = parseQueryString(QS_CONFIG, location.search);
-
-    const promises = Promise.all([HostsAPI.read(params), this.loadActions()]);
-
-    this.setState({ contentError: null, hasContentLoading: true });
-    try {
-      const [
-        {
-          data: { count, results },
-        },
-        {
-          data: { actions },
-        },
-      ] = await promises;
-      this.setState({
-        actions,
-        itemCount: count,
-        hosts: results,
-        selected: [],
-      });
-    } catch (err) {
-      this.setState({ contentError: err });
-    } finally {
-      this.setState({ hasContentLoading: false });
-    }
-  }
-
-  render() {
-    const {
-      actions,
-      itemCount,
-      contentError,
-      hasContentLoading,
-      deletionError,
-      selected,
-      hosts,
-      toggleLoading,
-      toggleError,
-    } = this.state;
-    const { match, i18n } = this.props;
 
   const canAdd =
     actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
-    const isAllSelected =
-      selected.length > 0 && selected.length === hosts.length;
 
   return (
     <Fragment>
       <Card>
         <PaginatedDataList
           contentError={contentError}
-            hasContentLoading={hasContentLoading}
+          hasContentLoading={isLoading || isDeleteLoading}
           items={hosts}
-            itemCount={itemCount}
+          itemCount={count}
           pluralizedItemName={i18n._(t`Hosts`)}
           qsConfig={QS_CONFIG}
-            onRowClick={this.handleSelect}
+          onRowClick={handleSelect}
           toolbarSearchColumns={[
             {
               name: i18n._(t`Name`),
@@ -215,35 +131,28 @@ class HostsList extends Component {
               {...props}
               showSelectAll
               isAllSelected={isAllSelected}
-                onSelectAll={this.handleSelectAll}
+              onSelectAll={handleSelectAll}
               qsConfig={QS_CONFIG}
               additionalControls={[
                 <ToolbarDeleteButton
                   key="delete"
-                    onDelete={this.handleHostDelete}
+                  onDelete={handleHostDelete}
                   itemsToDelete={selected}
                   pluralizedItemName={i18n._(t`Hosts`)}
                 />,
                 ...(canAdd
-                    ? [
+                  ? [<ToolbarAddButton key="add" linkTo={`${match.url}/add`} />]
-                        <ToolbarAddButton
-                          key="add"
-                          linkTo={`${match.url}/add`}
-                        />,
-                      ]
                   : []),
               ]}
             />
           )}
-            renderItem={o => (
+          renderItem={host => (
             <HostListItem
-                key={o.id}
+              key={host.id}
-                host={o}
+              host={host}
-                detailUrl={`${match.url}/${o.id}/details`}
+              detailUrl={`${match.url}/${host.id}/details`}
-                isSelected={selected.some(row => row.id === o.id)}
+              isSelected={selected.some(row => row.id === host.id)}
-                onSelect={() => this.handleSelect(o)}
+              onSelect={() => handleSelect(host)}
-                onToggleHost={this.handleHostToggle}
-                toggleLoading={toggleLoading === o.id}
             />
           )}
           emptyStateControls={
@@ -253,23 +162,12 @@ class HostsList extends Component {
           }
         />
       </Card>
-        {toggleError && !toggleLoading && (
-          <AlertModal
-            variant="error"
-            title={i18n._(t`Error!`)}
-            isOpen={toggleError && !toggleLoading}
-            onClose={this.handleHostToggleErrorClose}
-          >
-            {i18n._(t`Failed to toggle host.`)}
-            <ErrorDetail error={toggleError} />
-          </AlertModal>
-        )}
       {deletionError && (
         <AlertModal
           isOpen={deletionError}
           variant="error"
           title={i18n._(t`Error!`)}
-            onClose={this.handleDeleteErrorClose}
+          onClose={clearDeletionError}
         >
           {i18n._(t`Failed to delete one or more hosts.`)}
           <ErrorDetail error={deletionError} />
@@ -278,7 +176,5 @@ class HostsList extends Component {
     </Fragment>
   );
 }
-}
 
-export { HostsList as _HostsList };
+export default withI18n()(HostList);
-export default withI18n()(withRouter(HostsList));

awx/ui_next/src/screens/Host/HostList/HostList.test.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
+import { act } from 'react-dom/test-utils';
 import { HostsAPI } from '@api';
 import { mountWithContexts, waitForElement } from '@testUtils/enzymeHelpers';
-import { sleep } from '@testUtils/testUtils';
 
-import HostsList, { _HostsList } from './HostList';
+import HostList from './HostList';
 
 jest.mock('@api');
 
@@ -68,7 +68,15 @@ const mockHosts = [
   },
 ];
 
-describe('<HostsList />', () => {
+function waitForLoaded(wrapper) {
+  return waitForElement(
+    wrapper,
+    'HostList',
+    el => el.find('ContentLoading').length === 0
+  );
+}
+
+describe('<HostList />', () => {
   beforeEach(() => {
     HostsAPI.read.mockResolvedValue({
       data: {
@@ -91,114 +99,114 @@ describe('<HostsList />', () => {
     jest.clearAllMocks();
   });
 
-  test('initially renders successfully', () => {
+  test('initially renders successfully', async () => {
+    await act(async () => {
       mountWithContexts(
-      <HostsList
+        <HostList
           match={{ path: '/hosts', url: '/hosts' }}
           location={{ search: '', pathname: '/hosts' }}
         />
       );
     });
-
-  test('Hosts are retrieved from the api and the components finishes loading', async done => {
-    const loadHosts = jest.spyOn(_HostsList.prototype, 'loadHosts');
-    const wrapper = mountWithContexts(<HostsList />);
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      el => el.state('hasContentLoading') === true
-    );
-    expect(loadHosts).toHaveBeenCalled();
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      el => el.state('hasContentLoading') === false
-    );
-    done();
   });
 
-  test('handleSelect is called when a host list item is selected', async done => {
+  test('Hosts are retrieved from the api and the components finishes loading', async () => {
-    const handleSelect = jest.spyOn(_HostsList.prototype, 'handleSelect');
+    let wrapper;
-    const wrapper = mountWithContexts(<HostsList />);
+    await act(async () => {
-    await waitForElement(
+      wrapper = mountWithContexts(<HostList />);
-      wrapper,
+    });
-      'HostsList',
+    await waitForLoaded(wrapper);
-      el => el.state('hasContentLoading') === false
+
-    );
+    expect(HostsAPI.read).toHaveBeenCalled();
-    await wrapper
+    expect(wrapper.find('HostListItem')).toHaveLength(3);
+  });
+
+  test('should select single item', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<HostList />);
+    });
+    await waitForLoaded(wrapper);
+
+    act(() => {
+      wrapper
         .find('input#select-host-1')
         .closest('DataListCheck')
-      .props()
+        .invoke('onChange')();
-      .onChange();
-    expect(handleSelect).toBeCalled();
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      el => el.state('selected').length === 1
-    );
-    done();
     });
-
+    wrapper.update();
-  test('handleSelectAll is called when select all checkbox is clicked', async done => {
+    expect(
-    const handleSelectAll = jest.spyOn(_HostsList.prototype, 'handleSelectAll');
-    const wrapper = mountWithContexts(<HostsList />);
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      el => el.state('hasContentLoading') === false
-    );
       wrapper
-      .find('Checkbox#select-all')
+        .find('HostListItem')
-      .props()
+        .first()
-      .onChange(true);
+        .prop('isSelected')
-    expect(handleSelectAll).toBeCalled();
+    ).toEqual(true);
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      el => el.state('selected').length === 3
-    );
-    done();
   });
 
-  test('delete button is disabled if user does not have delete capabilities on a selected host', async done => {
+  test('should select all items', async () => {
-    const wrapper = mountWithContexts(<HostsList />);
+    let wrapper;
-    wrapper.find('HostsList').setState({
+    await act(async () => {
-      hosts: mockHosts,
+      wrapper = mountWithContexts(<HostList />);
-      itemCount: 3,
-      isInitialized: true,
-      selected: mockHosts.slice(0, 1),
     });
-    await waitForElement(
+    await waitForLoaded(wrapper);
-      wrapper,
+
-      'ToolbarDeleteButton * button',
+    act(() => {
-      el => el.getDOMNode().disabled === false
+      wrapper.find('DataListToolbar').invoke('onSelectAll')(true);
-    );
+    });
-    wrapper.find('HostsList').setState({
+    wrapper.update();
-      selected: mockHosts,
+
+    wrapper.find('HostListItem').forEach(item => {
+      expect(item.prop('isSelected')).toEqual(true);
     });
-    await waitForElement(
-      wrapper,
-      'ToolbarDeleteButton * button',
-      el => el.getDOMNode().disabled === true
-    );
-    done();
   });
 
-  test('api is called to delete hosts for each selected host.', () => {
+  test('delete button is disabled if user does not have delete capabilities on a selected host', async () => {
+    let wrapper;
+    await act(async () => {
+      wrapper = mountWithContexts(<HostList />);
+    });
+    await waitForLoaded(wrapper);
+
+    act(() => {
+      wrapper
+        .find('HostListItem')
+        .at(2)
+        .invoke('onSelect')();
+    });
+    expect(wrapper.find('ToolbarDeleteButton button').prop('disabled')).toEqual(
+      true
+    );
+  });
+
+  test('api is called to delete hosts for each selected host.', async () => {
     HostsAPI.destroy = jest.fn();
-    const wrapper = mountWithContexts(<HostsList />);
+    let wrapper;
-    wrapper.find('HostsList').setState({
+    await act(async () => {
-      hosts: mockHosts,
+      wrapper = mountWithContexts(<HostList />);
-      itemCount: 2,
+    });
-      isInitialized: true,
+    await waitForLoaded(wrapper);
-      isModalOpen: true,
+
-      selected: mockHosts.slice(0, 2),
+    await act(async () => {
+      wrapper
+        .find('HostListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper
+        .find('HostListItem')
+        .at(1)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
     expect(HostsAPI.destroy).toHaveBeenCalledTimes(2);
   });
 
-  test('error is shown when host not successfully deleted from api', async done => {
+  test('error is shown when host not successfully deleted from api', async () => {
     HostsAPI.destroy.mockRejectedValue(
       new Error({
         response: {
@@ -210,43 +218,40 @@ describe('<HostsList />', () => {
         },
       })
     );
-    const wrapper = mountWithContexts(<HostsList />);
+    let wrapper;
-    wrapper.find('HostsList').setState({
+    await act(async () => {
-      hosts: mockHosts,
+      wrapper = mountWithContexts(<HostList />);
-      itemCount: 1,
+    });
-      isInitialized: true,
+    await waitForLoaded(wrapper);
-      isModalOpen: true,
+
-      selected: mockHosts.slice(0, 1),
+    await act(async () => {
+      wrapper
+        .find('HostListItem')
+        .at(0)
+        .invoke('onSelect')();
+    });
+    wrapper.update();
+    await act(async () => {
+      wrapper.find('ToolbarDeleteButton').invoke('onDelete')();
     });
-    wrapper.find('ToolbarDeleteButton').prop('onDelete')();
-    await sleep(0);
     wrapper.update();
-    await waitForElement(
-      wrapper,
-      'Modal',
-      el => el.props().isOpen === true && el.props().title === 'Error!'
-    );
 
-    done();
+    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('should show Add button according to permissions', async () => {
-    const wrapper = mountWithContexts(<HostsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<HostList />);
-      'HostsList',
+    });
-      el => el.state('hasContentLoading') === true
+    await waitForLoaded(wrapper);
-    );
+
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      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('should hide Add button according to permissions', async () => {
     HostsAPI.readOptions.mockResolvedValue({
       data: {
         actions: {
@@ -254,18 +259,12 @@ describe('<HostsList />', () => {
         },
       },
     });
-    const wrapper = mountWithContexts(<HostsList />);
+    let wrapper;
-    await waitForElement(
+    await act(async () => {
-      wrapper,
+      wrapper = mountWithContexts(<HostList />);
-      'HostsList',
+    });
-      el => el.state('hasContentLoading') === true
+    await waitForLoaded(wrapper);
-    );
+
-    await waitForElement(
-      wrapper,
-      'HostsList',
-      el => el.state('hasContentLoading') === false
-    );
     expect(wrapper.find('ToolbarAddButton').length).toBe(0);
-    done();
   });
 });

awx/ui_next/src/screens/Host/HostList/HostListItem.jsx

@@ -10,7 +10,6 @@ import {
   DataListItem,
   DataListItemRow,
   DataListItemCells,
-  Switch,
   Tooltip,
 } from '@patternfly/react-core';
 import { Link } from 'react-router-dom';
@@ -19,6 +18,7 @@ import { PencilAltIcon } from '@patternfly/react-icons';
 import Sparkline from '@components/Sparkline';
 import { Host } from '@types';
 import styled from 'styled-components';
+import HostToggle from '../shared/HostToggle';
 
 const DataListAction = styled(_DataListAction)`
   align-items: center;
@@ -36,15 +36,7 @@ class HostListItem extends React.Component {
   };
 
   render() {
-    const {
+    const { host, isSelected, onSelect, detailUrl, i18n } = this.props;
-      host,
-      isSelected,
-      onSelect,
-      detailUrl,
-      onToggleHost,
-      toggleLoading,
-      i18n,
-    } = this.props;
 
     const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
       ...job,
@@ -87,6 +79,22 @@ class HostListItem extends React.Component {
                   </Fragment>
                 )}
               </DataListCell>,
+              <DataListCell key="enable" alignRight isFilled={false}>
+                <HostToggle host={host} />
+              </DataListCell>,
+              <DataListCell key="edit" alignRight isFilled={false}>
+                {host.summary_fields.user_capabilities.edit && (
+                  <Tooltip content={i18n._(t`Edit Host`)} position="top">
+                    <Button
+                      variant="plain"
+                      component={Link}
+                      to={`/hosts/${host.id}/edit`}
+                    >
+                      <PencilAltIcon />
+                    </Button>
+                  </Tooltip>
+                )}
+              </DataListCell>,
             ]}
           />
           <DataListAction
@@ -94,25 +102,7 @@ class HostListItem extends React.Component {
             aria-labelledby={labelId}
             id={labelId}
           >
-            <Tooltip
+            <HostToggle host={host} />
-              content={i18n._(
-                t`Indicates if a host is available and should be included in running jobs.  For hosts that are part of an external inventory, this may be reset by the inventory sync process.`
-              )}
-              position="top"
-            >
-              <Switch
-                css="display: inline-flex;"
-                id={`host-${host.id}-toggle`}
-                label={i18n._(t`On`)}
-                labelOff={i18n._(t`Off`)}
-                isChecked={host.enabled}
-                isDisabled={
-                  toggleLoading || !host.summary_fields.user_capabilities.edit
-                }
-                onChange={() => onToggleHost(host)}
-                aria-label={i18n._(t`Toggle host`)}
-              />
-            </Tooltip>
             {host.summary_fields.user_capabilities.edit && (
               <Tooltip content={i18n._(t`Edit Host`)} position="top">
                 <Button

awx/ui_next/src/screens/Host/HostList/HostListItem.test.jsx

@@ -1,5 +1,4 @@
 import React from 'react';
-
 import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
 import HostsListItem from './HostListItem';
@@ -44,6 +43,7 @@ describe('<HostsListItem />', () => {
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
   });
+
   test('edit button hidden from users without edit capabilities', () => {
     const copyMockHost = Object.assign({}, mockHost);
     copyMockHost.summary_fields.user_capabilities.edit = false;
@@ -58,39 +58,4 @@ describe('<HostsListItem />', () => {
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
-  test('handles toggle click when host is enabled', () => {
-    const wrapper = mountWithContexts(
-      <HostsListItem
-        isSelected={false}
-        detailUrl="/host/1"
-        onSelect={() => {}}
-        host={mockHost}
-        onToggleHost={onToggleHost}
-      />
-    );
-    wrapper
-      .find('Switch')
-      .first()
-      .find('input')
-      .simulate('change');
-    expect(onToggleHost).toHaveBeenCalledWith(mockHost);
-  });
-
-  test('handles toggle click when host is disabled', () => {
-    const wrapper = mountWithContexts(
-      <HostsListItem
-        isSelected={false}
-        detailUrl="/host/1"
-        onSelect={() => {}}
-        host={mockHost}
-        onToggleHost={onToggleHost}
-      />
-    );
-    wrapper
-      .find('Switch')
-      .first()
-      .find('input')
-      .simulate('change');
-    expect(onToggleHost).toHaveBeenCalledWith(mockHost);
-  });
 });

awx/ui_next/src/screens/Host/shared/HostToggle.jsx

@@ -0,0 +1,76 @@
+import React, { Fragment, useState, useEffect, useCallback } from 'react';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Switch, Tooltip } from '@patternfly/react-core';
+import AlertModal from '@components/AlertModal';
+import ErrorDetail from '@components/ErrorDetail';
+import useRequest from '@util/useRequest';
+import { HostsAPI } from '@api';
+
+function HostToggle({ host, onToggle, className, i18n }) {
+  const [isEnabled, setIsEnabled] = useState(host.enabled);
+  const [showError, setShowError] = useState(false);
+
+  const { result, isLoading, error, request: toggleHost } = useRequest(
+    useCallback(async () => {
+      await HostsAPI.update(host.id, {
+        enabled: !isEnabled,
+      });
+      return !isEnabled;
+    }, [host, isEnabled]),
+    host.enabled
+  );
+
+  useEffect(() => {
+    if (result !== isEnabled) {
+      setIsEnabled(result);
+      if (onToggle) {
+        onToggle(result);
+      }
+    }
+  }, [result, isEnabled, onToggle]);
+
+  useEffect(() => {
+    if (error) {
+      setShowError(true);
+    }
+  }, [error]);
+
+  return (
+    <Fragment>
+      <Tooltip
+        content={i18n._(
+          t`Indicates if a host is available and should be included in running
+          jobs.  For hosts that are part of an external inventory, this may be
+          reset by the inventory sync process.`
+        )}
+        position="top"
+      >
+        <Switch
+          className={className}
+          css="display: inline-flex;"
+          id={`host-${host.id}-toggle`}
+          label={i18n._(t`On`)}
+          labelOff={i18n._(t`Off`)}
+          isChecked={isEnabled}
+          isDisabled={isLoading || !host.summary_fields.user_capabilities.edit}
+          onChange={toggleHost}
+          aria-label={i18n._(t`Toggle host`)}
+        />
+      </Tooltip>
+      {showError && error && !isLoading && (
+        <AlertModal
+          variant="error"
+          title={i18n._(t`Error!`)}
+          isOpen={error && !isLoading}
+          onClose={() => setShowError(false)}
+        >
+          {i18n._(t`Failed to toggle host.`)}
+          <ErrorDetail error={error} />
+        </AlertModal>
+      )}
+    </Fragment>
+  );
+}
+
+export default withI18n()(HostToggle);

awx/ui_next/src/screens/Host/shared/HostToggle.test.jsx

@@ -0,0 +1,92 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { HostsAPI } from '@api';
+import { mountWithContexts } from '@testUtils/enzymeHelpers';
+import HostToggle from './HostToggle';
+
+jest.mock('@api');
+
+const mockHost = {
+  id: 1,
+  name: 'Host 1',
+  url: '/api/v2/hosts/1',
+  inventory: 1,
+  enabled: true,
+  summary_fields: {
+    inventory: {
+      id: 1,
+      name: 'inv 1',
+    },
+    user_capabilities: {
+      delete: true,
+      update: true,
+    },
+    recent_jobs: [],
+  },
+};
+
+describe('<HostToggle>', () => {
+  test('should should toggle off', async () => {
+    const onToggle = jest.fn();
+    const wrapper = mountWithContexts(
+      <HostToggle host={mockHost} onToggle={onToggle} />
+    );
+    expect(wrapper.find('Switch').prop('isChecked')).toEqual(true);
+
+    await act(async () => {
+      wrapper.find('Switch').invoke('onChange')();
+    });
+    expect(HostsAPI.update).toHaveBeenCalledWith(1, {
+      enabled: false,
+    });
+    wrapper.update();
+    expect(wrapper.find('Switch').prop('isChecked')).toEqual(false);
+    expect(onToggle).toHaveBeenCalledWith(false);
+  });
+
+  test('should should toggle on', async () => {
+    const onToggle = jest.fn();
+    const wrapper = mountWithContexts(
+      <HostToggle
+        host={{
+          ...mockHost,
+          enabled: false,
+        }}
+        onToggle={onToggle}
+      />
+    );
+    expect(wrapper.find('Switch').prop('isChecked')).toEqual(false);
+
+    await act(async () => {
+      wrapper.find('Switch').invoke('onChange')();
+    });
+    expect(HostsAPI.update).toHaveBeenCalledWith(1, {
+      enabled: true,
+    });
+    wrapper.update();
+    expect(wrapper.find('Switch').prop('isChecked')).toEqual(true);
+    expect(onToggle).toHaveBeenCalledWith(true);
+  });
+
+  test('should show error modal', async () => {
+    HostsAPI.update.mockImplementation(() => {
+      throw new Error('nope');
+    });
+    const wrapper = mountWithContexts(<HostToggle host={mockHost} />);
+    expect(wrapper.find('Switch').prop('isChecked')).toEqual(true);
+
+    await act(async () => {
+      wrapper.find('Switch').invoke('onChange')();
+    });
+    wrapper.update();
+    const modal = wrapper.find('AlertModal');
+    expect(modal).toHaveLength(1);
+    expect(modal.prop('isOpen')).toEqual(true);
+
+    act(() => {
+      modal.invoke('onClose')();
+    });
+    wrapper.update();
+    expect(wrapper.find('AlertModal')).toHaveLength(0);
+  });
+});