Refactor HostListItem into functional component and add test for host toggle

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

@@ -27,23 +27,13 @@ const DataListAction = styled(_DataListAction)`
   grid-template-columns: min-content 40px;
 `;
 
-class HostListItem extends React.Component {
-  static propTypes = {
-    host: Host.isRequired,
-    detailUrl: string.isRequired,
-    isSelected: bool.isRequired,
-    onSelect: func.isRequired,
-  };
-
-  render() {
-    const { host, isSelected, onSelect, detailUrl, i18n } = this.props;
-
+function HostListItem({ i18n, host, isSelected, onSelect, detailUrl }) {
+  const labelId = `check-action-${host.id}`;
   const recentPlaybookJobs = host.summary_fields.recent_jobs.map(job => ({
     ...job,
     type: 'job',
   }));
 
-    const labelId = `check-action-${host.id}`;
   return (
     <DataListItem key={host.id} aria-labelledby={labelId} id={`${host.id}`}>
       <DataListItemRow>
@@ -79,22 +69,6 @@ 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
@@ -118,6 +92,13 @@ class HostListItem extends React.Component {
       </DataListItemRow>
     </DataListItem>
   );
-  }
 }
+
+HostListItem.propTypes = {
+  host: Host.isRequired,
+  detailUrl: string.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
 export default withI18n()(HostListItem);

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

@@ -3,7 +3,7 @@ import { mountWithContexts } from '@testUtils/enzymeHelpers';
 
 import HostsListItem from './HostListItem';
 
-let onToggleHost;
+const onToggleHost = jest.fn();
 
 const mockHost = {
   id: 1,
@@ -23,16 +23,10 @@ const mockHost = {
 };
 
 describe('<HostsListItem />', () => {
+  let wrapper;
+
   beforeEach(() => {
-    onToggleHost = jest.fn();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  test('edit button shown to users with edit capabilities', () => {
-    const wrapper = mountWithContexts(
+    wrapper = mountWithContexts(
       <HostsListItem
         isSelected={false}
         detailUrl="/host/1"
@@ -41,13 +35,20 @@ describe('<HostsListItem />', () => {
         onToggleHost={onToggleHost}
       />
     );
+  });
+
+  afterEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('edit button shown to users with edit capabilities', () => {
     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;
-    const wrapper = mountWithContexts(
+    wrapper = mountWithContexts(
       <HostsListItem
         isSelected={false}
         detailUrl="/host/1"
@@ -58,4 +59,8 @@ describe('<HostsListItem />', () => {
     );
     expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
   });
+
+  test('should display host toggle', () => {
+    expect(wrapper.find('HostToggle').length).toBe(1);
+  });
 });