Merge pull request #7633 from nixocio/ui_add_list_instance_group

Add feature list instance groups

Reviewed-by: Alex Corey <Alex.swansboro@gmail.com>
             https://github.com/AlexSCorey

awx/ui_next/src/components/PaginatedDataList/ToolbarDeleteButton.jsx

@@ -63,10 +63,12 @@ class ToolbarDeleteButton extends React.Component {
     onDelete: func.isRequired,
     itemsToDelete: arrayOf(ItemToDelete).isRequired,
     pluralizedItemName: string,
+    errorMessage: string,
   };
 
   static defaultProps = {
     pluralizedItemName: 'Items',
+    errorMessage: '',
   };
 
   constructor(props) {
@@ -96,7 +98,12 @@ class ToolbarDeleteButton extends React.Component {
   }
 
   renderTooltip() {
-    const { itemsToDelete, pluralizedItemName, i18n } = this.props;
+    const {
+      itemsToDelete,
+      pluralizedItemName,
+      errorMessage,
+      i18n,
+    } = this.props;
 
     const itemsUnableToDelete = itemsToDelete
       .filter(cannotDelete)
@@ -105,9 +112,11 @@ class ToolbarDeleteButton extends React.Component {
     if (itemsToDelete.some(cannotDelete)) {
       return (
         <div>
-          {i18n._(
+          {errorMessage.length > 0
-            t`You do not have permission to delete the following ${pluralizedItemName}: ${itemsUnableToDelete}`
+            ? errorMessage
-          )}
+            : i18n._(
+                t`You do not have permission to delete ${pluralizedItemName}: ${itemsUnableToDelete}`
+              )}
         </div>
       );
     }

awx/ui_next/src/components/PaginatedDataList/__snapshots__/ToolbarDeleteButton.test.jsx.snap

@@ -2,6 +2,7 @@
 
 exports[`<ToolbarDeleteButton /> should render button 1`] = `
 <ToolbarDeleteButton
+  errorMessage=""
   i18n={"/i18n/"}
   itemsToDelete={Array []}
   onDelete={[Function]}

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx

@@ -1,14 +1,213 @@
-import React from 'react';
+import React, { useEffect, useCallback } from 'react';
+import { useLocation, useRouteMatch } from 'react-router-dom';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
 import { Card, PageSection } from '@patternfly/react-core';
 
-function InstanceGroupList() {
+import { InstanceGroupsAPI } from '../../../api';
+import { getQSConfig, parseQueryString } from '../../../util/qs';
+import useRequest, { useDeleteItems } from '../../../util/useRequest';
+import useSelected from '../../../util/useSelected';
+import PaginatedDataList, {
+  ToolbarDeleteButton,
+  ToolbarAddButton,
+} from '../../../components/PaginatedDataList';
+import ErrorDetail from '../../../components/ErrorDetail';
+import AlertModal from '../../../components/AlertModal';
+import DatalistToolbar from '../../../components/DataListToolbar';
+import InstanceGroupListItem from './InstanceGroupListItem';
+
+const QS_CONFIG = getQSConfig('instance_group', {
+  page: 1,
+  page_size: 20,
+});
+
+function modifyInstanceGroups(items = []) {
+  return items.map(item => {
+    const clonedItem = {
+      ...item,
+      summary_fields: {
+        ...item.summary_fields,
+        user_capabilities: {
+          ...item.summary_fields.user_capabilities,
+        },
+      },
+    };
+    if (clonedItem.name === 'tower') {
+      clonedItem.summary_fields.user_capabilities.delete = false;
+    }
+    return clonedItem;
+  });
+}
+
+function InstanceGroupList({ i18n }) {
+  const location = useLocation();
+  const match = useRouteMatch();
+
+  const {
+    error: contentError,
+    isLoading,
+    request: fetchInstanceGroups,
+    result: { instanceGroups, instanceGroupsCount, actions },
+  } = useRequest(
+    useCallback(async () => {
+      const params = parseQueryString(QS_CONFIG, location.search);
+
+      const [response, responseActions] = await Promise.all([
+        InstanceGroupsAPI.read(params),
+        InstanceGroupsAPI.readOptions(),
+      ]);
+
+      return {
+        instanceGroups: response.data.results,
+        instanceGroupsCount: response.data.count,
+        actions: responseActions.data.actions,
+      };
+    }, [location]),
+    {
+      instanceGroups: [],
+      instanceGroupsCount: 0,
+      actions: {},
+    }
+  );
+
+  useEffect(() => {
+    fetchInstanceGroups();
+  }, [fetchInstanceGroups]);
+
+  const { selected, isAllSelected, handleSelect, setSelected } = useSelected(
+    instanceGroups
+  );
+
+  const modifiedSelected = modifyInstanceGroups(selected);
+
+  const {
+    isLoading: deleteLoading,
+    deletionError,
+    deleteItems: deleteInstanceGroups,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      await Promise.all(
+        selected.map(({ id }) => InstanceGroupsAPI.destroy(id))
+      );
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchInstanceGroups,
+    }
+  );
+
+  const handleDelete = async () => {
+    await deleteInstanceGroups();
+    setSelected([]);
+  };
+
+  const canAdd = actions && actions.POST;
+
+  function cannotDelete(item) {
+    return !item.summary_fields.user_capabilities.delete;
+  }
+
+  const pluralizedItemName = i18n._(t`Instance Groups`);
+
+  let errorMessageDelete = '';
+
+  if (modifiedSelected.some(item => item.name === 'tower')) {
+    const itemsUnableToDelete = modifiedSelected
+      .filter(cannotDelete)
+      .filter(item => item.name !== 'tower')
+      .map(item => item.name)
+      .join(', ');
+
+    if (itemsUnableToDelete) {
+      if (modifiedSelected.some(cannotDelete)) {
+        errorMessageDelete = i18n._(
+          t`You do not have permission to delete ${pluralizedItemName}: ${itemsUnableToDelete}. `
+        );
+      }
+    }
+
+    if (errorMessageDelete.length > 0) {
+      errorMessageDelete = errorMessageDelete.concat('\n');
+    }
+    errorMessageDelete = errorMessageDelete.concat(
+      i18n._(t`The tower instance group cannot be deleted.`)
+    );
+  }
+
   return (
-    <PageSection>
+    <>
-      <Card>
+      <PageSection>
-        <div>Instance Group List</div>
+        <Card>
-      </Card>
+          <PaginatedDataList
-    </PageSection>
+            contentError={contentError}
+            hasContentLoading={isLoading || deleteLoading}
+            items={instanceGroups}
+            itemCount={instanceGroupsCount}
+            pluralizedItemName={pluralizedItemName}
+            qsConfig={QS_CONFIG}
+            onRowClick={handleSelect}
+            renderToolbar={props => (
+              <DatalistToolbar
+                {...props}
+                showSelectAll
+                showExpandCollapse
+                isAllSelected={isAllSelected}
+                onSelectAll={isSelected =>
+                  setSelected(isSelected ? [...instanceGroups] : [])
+                }
+                qsConfig={QS_CONFIG}
+                additionalControls={[
+                  ...(canAdd
+                    ? [
+                        <ToolbarAddButton
+                          key="add"
+                          linkTo={`${match.url}/add`}
+                        />,
+                      ]
+                    : []),
+                  <ToolbarDeleteButton
+                    key="delete"
+                    onDelete={handleDelete}
+                    itemsToDelete={modifiedSelected}
+                    pluralizedItemName={i18n._(t`Instance Groups`)}
+                    errorMessage={errorMessageDelete}
+                  />,
+                ]}
+              />
+            )}
+            renderItem={instanceGroup => (
+              <InstanceGroupListItem
+                key={instanceGroup.id}
+                value={instanceGroup.name}
+                instanceGroup={instanceGroup}
+                detailUrl={`${match.url}/${instanceGroup.id}/details`}
+                onSelect={() => handleSelect(instanceGroup)}
+                isSelected={selected.some(row => row.id === instanceGroup.id)}
+              />
+            )}
+            emptyStateControls={
+              canAdd && (
+                <ToolbarAddButton key="add" linkTo={`${match.url}/add`} />
+              )
+            }
+          />
+        </Card>
+      </PageSection>
+      <AlertModal
+        aria-label={i18n._(t`Deletion error`)}
+        isOpen={deletionError}
+        onClose={clearDeletionError}
+        title={i18n._(t`Error`)}
+        variant="error"
+      >
+        {i18n._(t`Failed to delete one or more instance groups.`)}
+        <ErrorDetail error={deletionError} />
+      </AlertModal>
+    </>
   );
 }
 
-export default InstanceGroupList;
+export default withI18n()(InstanceGroupList);

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.test.jsx

@@ -0,0 +1,193 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import {
+  mountWithContexts,
+  waitForElement,
+} from '../../../../testUtils/enzymeHelpers';
+
+import { InstanceGroupsAPI } from '../../../api';
+import InstanceGroupList from './InstanceGroupList';
+
+jest.mock('../../../api/models/InstanceGroups');
+
+const instanceGroups = {
+  data: {
+    results: [
+      {
+        id: 1,
+        name: 'Foo',
+        type: 'instance_group',
+        url: '/api/v2/instance_groups/1',
+        consumed_capacity: 10,
+        summary_fields: { user_capabilities: { edit: true, delete: true } },
+      },
+      {
+        id: 2,
+        name: 'tower',
+        type: 'instance_group',
+        url: '/api/v2/instance_groups/2',
+        consumed_capacity: 42,
+        summary_fields: { user_capabilities: { edit: true, delete: true } },
+      },
+      {
+        id: 3,
+        name: 'Bar',
+        type: 'instance_group',
+        url: '/api/v2/instance_groups/3',
+        consumed_capacity: 42,
+        summary_fields: { user_capabilities: { edit: true, delete: false } },
+      },
+    ],
+    count: 3,
+  },
+};
+
+const options = { data: { actions: { POST: true } } };
+
+describe('<InstanceGroupList', () => {
+  let wrapper;
+
+  test('should have data fetched and render 3 rows', async () => {
+    InstanceGroupsAPI.read.mockResolvedValue(instanceGroups);
+    InstanceGroupsAPI.readOptions.mockResolvedValue(options);
+
+    await act(async () => {
+      wrapper = mountWithContexts(<InstanceGroupList />);
+    });
+    await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
+    expect(wrapper.find('InstanceGroupListItem').length).toBe(3);
+    expect(InstanceGroupsAPI.read).toBeCalled();
+    expect(InstanceGroupsAPI.readOptions).toBeCalled();
+  });
+
+  test('should delete item successfully', async () => {
+    InstanceGroupsAPI.read.mockResolvedValue(instanceGroups);
+    InstanceGroupsAPI.readOptions.mockResolvedValue(options);
+
+    await act(async () => {
+      wrapper = mountWithContexts(<InstanceGroupList />);
+    });
+    await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
+
+    wrapper
+      .find('input#select-instance-groups-1')
+      .simulate('change', instanceGroups);
+    wrapper.update();
+
+    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
+      true
+    );
+
+    await act(async () => {
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')();
+    });
+    wrapper.update();
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
+    );
+
+    expect(InstanceGroupsAPI.destroy).toBeCalledWith(
+      instanceGroups.data.results[0].id
+    );
+  });
+
+  test('should not be able to delete tower instance group', async () => {
+    InstanceGroupsAPI.read.mockResolvedValue(instanceGroups);
+    InstanceGroupsAPI.readOptions.mockResolvedValue(options);
+
+    await act(async () => {
+      wrapper = mountWithContexts(<InstanceGroupList />);
+    });
+    await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
+
+    const instanceGroupIndex = [1, 2, 3];
+
+    instanceGroupIndex.forEach(element => {
+      wrapper
+        .find(`input#select-instance-groups-${element}`)
+        .simulate('change', instanceGroups);
+      wrapper.update();
+
+      expect(
+        wrapper.find(`input#select-instance-groups-${element}`).prop('checked')
+      ).toBe(true);
+    });
+
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      true
+    );
+  });
+
+  test('should thrown content error', async () => {
+    InstanceGroupsAPI.read.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'GET',
+            url: '/api/v2/instance_groups',
+          },
+          data: 'An error occurred',
+        },
+      })
+    );
+    InstanceGroupsAPI.readOptions.mockResolvedValue(options);
+    await act(async () => {
+      wrapper = mountWithContexts(<InstanceGroupList />);
+    });
+    await waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
+    expect(wrapper.find('ContentError').length).toBe(1);
+  });
+
+  test('should render deletion error modal', async () => {
+    InstanceGroupsAPI.destroy.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'DELETE',
+            url: '/api/v2/instance_groups',
+          },
+          data: 'An error occurred',
+        },
+      })
+    );
+    InstanceGroupsAPI.read.mockResolvedValue(instanceGroups);
+    InstanceGroupsAPI.readOptions.mockResolvedValue(options);
+    await act(async () => {
+      wrapper = mountWithContexts(<InstanceGroupList />);
+    });
+    waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
+
+    wrapper.find('input#select-instance-groups-1').simulate('change', 'a');
+    wrapper.update();
+    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
+      true
+    );
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
+    );
+    wrapper.update();
+
+    await act(async () =>
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(wrapper.find('ErrorDetail').length).toBe(1);
+  });
+
+  test('should not render add button', async () => {
+    InstanceGroupsAPI.read.mockResolvedValue(instanceGroups);
+    InstanceGroupsAPI.readOptions.mockResolvedValue({
+      data: { actions: { POST: false } },
+    });
+    await act(async () => {
+      wrapper = mountWithContexts(<InstanceGroupList />);
+    });
+    waitForElement(wrapper, 'InstanceGroupList', el => el.length > 0);
+    expect(wrapper.find('ToolbarAddButton').length).toBe(0);
+  });
+});
+
+describe('modifyInstanceGroups', () => {});

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.jsx

@@ -0,0 +1,183 @@
+import React from 'react';
+import { string, bool, func } from 'prop-types';
+import { withI18n } from '@lingui/react';
+import { t } from '@lingui/macro';
+import { Link } from 'react-router-dom';
+import 'styled-components/macro';
+import {
+  Badge as PFBadge,
+  Progress,
+  ProgressMeasureLocation,
+  ProgressSize,
+  Button,
+  DataListAction as _DataListAction,
+  DataListCheck,
+  DataListItem,
+  DataListItemRow,
+  DataListItemCells,
+  Tooltip,
+} from '@patternfly/react-core';
+import { PencilAltIcon } from '@patternfly/react-icons';
+import styled from 'styled-components';
+
+import _DataListCell from '../../../components/DataListCell';
+import { InstanceGroup } from '../../../types';
+
+const DataListCell = styled(_DataListCell)`
+  white-space: nowrap;
+`;
+
+const Badge = styled(PFBadge)`
+  margin-left: 8px;
+`;
+
+const ListGroup = styled.span`
+  margin-left: 12px;
+
+  &:first-of-type {
+    margin-left: 0;
+  }
+`;
+
+const DataListAction = styled(_DataListAction)`
+  align-items: center;
+  display: grid;
+  grid-gap: 16px;
+  grid-template-columns: 40px;
+`;
+
+function InstanceGroupListItem({
+  instanceGroup,
+  detailUrl,
+  isSelected,
+  onSelect,
+  i18n,
+}) {
+  const labelId = `check-action-${instanceGroup.id}`;
+
+  const isAvailable = item => {
+    return (
+      (item.policy_instance_minimum || item.policy_instance_percentage) &&
+      item.capacity
+    );
+  };
+
+  const isContainerGroup = item => {
+    return item.is_containerized;
+  };
+
+  function usedCapacity(item) {
+    if (!isContainerGroup(item)) {
+      if (isAvailable(item)) {
+        return (
+          <Progress
+            value={100 - item.percent_capacity_remaining}
+            measureLocation={ProgressMeasureLocation.top}
+            size={ProgressSize.sm}
+            title={i18n._(t`Used capacity`)}
+          />
+        );
+      }
+      return <span css="color: red">{i18n._(t`Unavailable`)}</span>;
+    }
+    return null;
+  }
+
+  return (
+    <DataListItem
+      key={instanceGroup.id}
+      aria-labelledby={labelId}
+      id={`${instanceGroup.id} `}
+    >
+      <DataListItemRow>
+        <DataListCheck
+          id={`select-instance-groups-${instanceGroup.id}`}
+          checked={isSelected}
+          onChange={onSelect}
+          aria-labelledby={labelId}
+        />
+
+        <DataListItemCells
+          dataListCells={[
+            <DataListCell
+              key="name"
+              aria-label={i18n._(t`instance group name`)}
+            >
+              <span id={labelId}>
+                <Link to={`${detailUrl}`}>
+                  <b>{instanceGroup.name}</b>
+                </Link>
+              </span>
+            </DataListCell>,
+
+            <DataListCell
+              key="type"
+              aria-label={i18n._(t`instance group type`)}
+            >
+              <b css="margin-right: 24px">{i18n._(t`Type`)}</b>
+              <span id={labelId}>
+                {isContainerGroup(instanceGroup)
+                  ? i18n._(t`Container group`)
+                  : i18n._(t`Instance group`)}
+              </span>
+            </DataListCell>,
+            <DataListCell
+              key="related-field-counts"
+              aria-label={i18n._(t`instance counts`)}
+              width={2}
+            >
+              <ListGroup>
+                <b>{i18n._(t`Running jobs`)}</b>
+                <Badge isRead>{instanceGroup.jobs_running}</Badge>
+              </ListGroup>
+              <ListGroup>
+                <b>{i18n._(t`Total jobs`)}</b>
+                <Badge isRead>{instanceGroup.jobs_total}</Badge>
+              </ListGroup>
+
+              {!instanceGroup.is_containerized ? (
+                <ListGroup>
+                  <b>{i18n._(t`Instances`)}</b>
+                  <Badge isRead>{instanceGroup.instances}</Badge>
+                </ListGroup>
+              ) : null}
+            </DataListCell>,
+
+            <DataListCell
+              key="capacity"
+              aria-label={i18n._(t`instance group used capacity`)}
+            >
+              {usedCapacity(instanceGroup)}
+            </DataListCell>,
+          ]}
+        />
+        <DataListAction
+          aria-label="actions"
+          aria-labelledby={labelId}
+          id={labelId}
+        >
+          {instanceGroup.summary_fields.user_capabilities.edit && (
+            <Tooltip content={i18n._(t`Edit instance group`)} position="top">
+              <Button
+                aria-label={i18n._(t`Edit instance group`)}
+                variant="plain"
+                component={Link}
+                to={`/instance_groups/${instanceGroup.id}/edit`}
+              >
+                <PencilAltIcon />
+              </Button>
+            </Tooltip>
+          )}
+        </DataListAction>
+      </DataListItemRow>
+    </DataListItem>
+  );
+}
+InstanceGroupListItem.prototype = {
+  instanceGroup: InstanceGroup.isRequired,
+  detailUrl: string.isRequired,
+  isSelected: bool.isRequired,
+  onSelect: func.isRequired,
+};
+
+export default withI18n()(InstanceGroupListItem);

awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupListItem.test.jsx

@@ -0,0 +1,151 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+
+import InstanceGroupListItem from './InstanceGroupListItem';
+
+describe('<InstanceGroupListItem/>', () => {
+  let wrapper;
+  const instanceGroups = [
+    {
+      id: 1,
+      name: 'Foo',
+      type: 'instance_group',
+      url: '/api/v2/instance_groups/1',
+      capacity: 10,
+      policy_instance_minimum: 10,
+      policy_instance_percentage: 50,
+      percent_capacity_remaining: 60,
+      is_containerized: false,
+      summary_fields: {
+        user_capabilities: {
+          edit: true,
+          delete: true,
+        },
+      },
+    },
+    {
+      id: 2,
+      name: 'Bar',
+      type: 'instance_group',
+      url: '/api/v2/instance_groups/2',
+      capacity: 0,
+      policy_instance_minimum: 0,
+      policy_instance_percentage: 0,
+      percent_capacity_remaining: 0,
+      is_containerized: true,
+      summary_fields: {
+        user_capabilities: {
+          edit: false,
+          delete: false,
+        },
+      },
+    },
+  ];
+
+  test('should mount successfully', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupListItem
+          instanceGroup={instanceGroups[1]}
+          detailUrl="instance_groups/1/details"
+          isSelected={false}
+          onSelect={() => {}}
+        />
+      );
+    });
+    expect(wrapper.find('InstanceGroupListItem').length).toBe(1);
+  });
+
+  test('should render the proper data instance group', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupListItem
+          instanceGroup={instanceGroups[0]}
+          detailUrl="instance_groups/1/details"
+          isSelected={false}
+          onSelect={() => {}}
+        />
+      );
+    });
+    expect(
+      wrapper.find('PFDataListCell[aria-label="instance group name"]').text()
+    ).toBe('Foo');
+    expect(wrapper.find('Progress').prop('value')).toBe(40);
+    expect(
+      wrapper.find('PFDataListCell[aria-label="instance group type"]').text()
+    ).toBe('TypeInstance group');
+    expect(wrapper.find('PencilAltIcon').length).toBe(1);
+    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
+      false
+    );
+  });
+
+  test('should render the proper data container group', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupListItem
+          instanceGroup={instanceGroups[1]}
+          detailUrl="instance_groups/2/details"
+          isSelected={false}
+          onSelect={() => {}}
+        />
+      );
+    });
+    expect(
+      wrapper.find('PFDataListCell[aria-label="instance group name"]').text()
+    ).toBe('Bar');
+
+    expect(
+      wrapper.find('PFDataListCell[aria-label="instance group type"]').text()
+    ).toBe('TypeContainer group');
+    expect(wrapper.find('PencilAltIcon').length).toBe(0);
+  });
+
+  test('should be checked', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupListItem
+          instanceGroup={instanceGroups[0]}
+          detailUrl="instance_groups/1/details"
+          isSelected
+          onSelect={() => {}}
+        />
+      );
+    });
+    expect(wrapper.find('input#select-instance-groups-1').prop('checked')).toBe(
+      true
+    );
+  });
+
+  test('edit button shown to users with edit capabilities', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupListItem
+          instanceGroup={instanceGroups[0]}
+          detailUrl="instance_groups/1/details"
+          isSelected
+          onSelect={() => {}}
+        />
+      );
+    });
+
+    expect(wrapper.find('PencilAltIcon').exists()).toBeTruthy();
+  });
+
+  test('edit button hidden from users without edit capabilities', async () => {
+    await act(async () => {
+      wrapper = mountWithContexts(
+        <InstanceGroupListItem
+          instanceGroup={instanceGroups[1]}
+          detailsUrl="instance_group/2/details"
+          isSelected
+          onSelect={() => {}}
+        />
+      );
+    });
+
+    expect(wrapper.find('PencilAltIcon').exists()).toBeFalsy();
+  });
+});