Merge pull request #8503 from AlexSCorey/8237-FixKebabifiedToolbarBtns

Fixes toolbar buttons in Advanced Search mode

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

awx/ui_next/src/components/DataListToolbar/DataListToolbar.jsx

@@ -110,7 +110,7 @@ function DataListToolbar({
             </>
           </ToolbarGroup>
         )}
-        {isAdvancedSearchShown && (
+        {isAdvancedSearchShown && additionalControls.length > 0 && (
           <ToolbarItem>
             <KebabifiedProvider
               value={{

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

@@ -28,7 +28,7 @@ function ToolbarAddButton({
       <DropdownItem
         key="add"
         isDisabled={isDisabled}
-        component={linkTo ? Link : Button}
+        component={linkTo ? Link : 'button'}
         to={linkTo}
         onClick={!onClick ? undefined : onClick}
       >

awx/ui_next/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.jsx

@@ -1,8 +1,10 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useContext } from 'react';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
 import { useParams } from 'react-router-dom';
 import styled from 'styled-components';
+import { Button, DropdownItem } from '@patternfly/react-core';
+import { KebabifiedContext } from '../../contexts/Kebabified';
 import useRequest, { useDismissableError } from '../../util/useRequest';
 import SelectableCard from '../SelectableCard';
 import AlertModal from '../AlertModal';
@@ -20,21 +22,21 @@ const Grid = styled.div`
   grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
 `;
 
-function UserAndTeamAccessAdd({
+function UserAndTeamAccessAdd({ i18n, title, onFetchData, apiModel }) {
-  i18n,
-  isOpen,
-  title,
-  onSave,
-  apiModel,
-  onClose,
-}) {
   const [selectedResourceType, setSelectedResourceType] = useState(null);
+  const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [stepIdReached, setStepIdReached] = useState(1);
   const { id: userId } = useParams();
+  const { isKebabified, onKebabModalChange } = useContext(KebabifiedContext);
   const {
     selected: resourcesSelected,
     handleSelect: handleResourceSelect,
   } = useSelected([]);
+  useEffect(() => {
+    if (isKebabified) {
+      onKebabModalChange(isWizardOpen);
+    }
+  }, [isKebabified, isWizardOpen, onKebabModalChange]);
 
   const {
     selected: rolesSelected,
@@ -57,8 +59,9 @@ function UserAndTeamAccessAdd({
       );
 
       await Promise.all(roleRequests);
-      onSave();
+      onFetchData();
-    }, [onSave, rolesSelected, apiModel, userId, resourcesSelected]),
+      setIsWizardOpen(false);
+    }, [onFetchData, rolesSelected, apiModel, userId, resourcesSelected]),
     {}
   );
 
@@ -141,16 +144,39 @@ function UserAndTeamAccessAdd({
   }
 
   return (
-    <Wizard
+    <>
-      isOpen={isOpen}
+      {isKebabified ? (
-      title={title}
+        <DropdownItem
-      steps={steps}
+          key="add"
-      onClose={onClose}
+          component="button"
-      onNext={({ id }) =>
+          aria-label={i18n._(t`Add`)}
-        setStepIdReached(stepIdReached < id ? id : stepIdReached)
+          onClick={() => setIsWizardOpen(true)}
-      }
+        >
-      onSave={handleWizardSave}
+          {i18n._(t`Add`)}
-    />
+        </DropdownItem>
+      ) : (
+        <Button
+          variant="primary"
+          aria-label={i18n._(t`Add`)}
+          onClick={() => setIsWizardOpen(true)}
+          key="add"
+        >
+          {i18n._(t`Add`)}
+        </Button>
+      )}
+      {isWizardOpen && (
+        <Wizard
+          isOpen={isWizardOpen}
+          title={title}
+          steps={steps}
+          onClose={() => setIsWizardOpen(false)}
+          onNext={({ id }) =>
+            setStepIdReached(stepIdReached < id ? id : stepIdReached)
+          }
+          onSave={handleWizardSave}
+        />
+      )}
+    </>
   );
 }
 

awx/ui_next/src/components/UserAndTeamAccessAdd/UserAndTeamAccessAdd.test.jsx

@@ -58,23 +58,26 @@ describe('<UserAndTeamAccessAdd/>', () => {
       wrapper = mountWithContexts(
         <UserAndTeamAccessAdd
           apiModel={UsersAPI}
-          isOpen
+          onFetchData={() => {}}
-          onSave={() => {}}
-          onClose={() => {}}
           title="Add user permissions"
         />
       );
     });
-    await waitForElement(wrapper, 'PFWizard');
+    await waitForElement(wrapper, 'Button[aria-label="Add"]');
   });
   afterEach(() => {
     wrapper.unmount();
     jest.clearAllMocks();
   });
   test('should mount properly', async () => {
+    expect(wrapper.find('Button[aria-label="Add"]').length).toBe(1);
+    act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
+    wrapper.update();
     expect(wrapper.find('PFWizard').length).toBe(1);
   });
   test('should disable steps', async () => {
+    act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
+    wrapper.update();
     expect(wrapper.find('Button[type="submit"]').prop('isDisabled')).toBe(true);
     expect(
       wrapper
@@ -122,7 +125,8 @@ describe('<UserAndTeamAccessAdd/>', () => {
     JobTemplatesAPI.read.mockResolvedValue(resources);
     JobTemplatesAPI.readOptions.mockResolvedValue(options);
     UsersAPI.associateRole.mockResolvedValue({});
-
+    act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
+    wrapper.update();
     await act(async () =>
       wrapper.find('SelectableCard[label="Job templates"]').prop('onClick')({
         fetchItems: JobTemplatesAPI.read,
@@ -178,6 +182,14 @@ describe('<UserAndTeamAccessAdd/>', () => {
     await expect(UsersAPI.associateRole).toHaveBeenCalled();
   });
 
+  test('should close wizard', async () => {
+    act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
+    wrapper.update();
+    act(() => wrapper.find('PFWizard').prop('onClose')());
+    wrapper.update();
+    expect(wrapper.find('PFWizard').length).toBe(0);
+  });
+
   test('should throw error', async () => {
     JobTemplatesAPI.read.mockResolvedValue(resources);
     JobTemplatesAPI.readOptions.mockResolvedValue(options);
@@ -201,6 +213,9 @@ describe('<UserAndTeamAccessAdd/>', () => {
       }),
     }));
 
+    act(() => wrapper.find('Button[aria-label="Add"]').prop('onClick')());
+    wrapper.update();
+
     await act(async () =>
       wrapper.find('SelectableCard[label="Job templates"]').prop('onClick')({
         fetchItems: JobTemplatesAPI.read,

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

@@ -14,7 +14,6 @@ import {
   UserDateDetail,
 } from '../../../components/DetailList';
 import InventoryGroupsDeleteModal from '../shared/InventoryGroupsDeleteModal';
-import { GroupsAPI, InventoriesAPI } from '../../../api';
 
 function InventoryGroupDetail({ i18n, inventoryGroup }) {
   const {
@@ -26,27 +25,9 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
     variables,
   } = inventoryGroup;
   const [error, setError] = useState(false);
-  const [isDeleteModalOpen, setIsDeleteModalOpen] = useState(false);
   const history = useHistory();
   const params = useParams();
 
-  const handleDelete = async option => {
-    const inventoryId = parseInt(params.id, 10);
-    const groupId = parseInt(params.groupId, 10);
-    setIsDeleteModalOpen(false);
-
-    try {
-      if (option === 'delete') {
-        await GroupsAPI.destroy(groupId);
-      } else {
-        await InventoriesAPI.promoteGroup(inventoryId, groupId);
-      }
-      history.push(`/inventories/inventory/${inventoryId}/groups`);
-    } catch (err) {
-      setError(err);
-    }
-  };
-
   return (
     <CardBody>
       <DetailList gutter="sm">
@@ -84,22 +65,14 @@ function InventoryGroupDetail({ i18n, inventoryGroup }) {
         >
           {i18n._(t`Edit`)}
         </Button>
-        <Button
-          variant="secondary"
-          aria-label={i18n._(t`Delete`)}
-          onClick={() => setIsDeleteModalOpen(true)}
-        >
-          {i18n._(t`Delete`)}
-        </Button>
-      </CardActionsRow>
-      {isDeleteModalOpen && (
         <InventoryGroupsDeleteModal
           groups={[inventoryGroup]}
-          onClose={() => setIsDeleteModalOpen(false)}
+          isDisabled={false}
-          isModalOpen={isDeleteModalOpen}
+          onAfterDelete={() =>
-          onDelete={handleDelete}
+            history.push(`/inventories/inventory/${params.id}/groups`)
+          }
         />
-      )}
+      </CardActionsRow>
       {error && (
         <AlertModal
           variant="error"

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

@@ -59,10 +59,12 @@ describe('<InventoryGroupDetail />', () => {
   });
   afterEach(() => {
     wrapper.unmount();
+    jest.clearAllMocks();
   });
   test('InventoryGroupDetail renders successfully', () => {
     expect(wrapper.length).toBe(1);
   });
+
   test('should open delete modal and then call api to delete the group', async () => {
     await act(async () => {
       wrapper.find('button[aria-label="Delete"]').simulate('click');
@@ -73,19 +75,22 @@ describe('<InventoryGroupDetail />', () => {
       wrapper.find('Radio[id="radio-delete"]').invoke('onChange')();
     });
     wrapper.update();
-    await act(async () => {
+    expect(
-      wrapper
+      wrapper.find('Button[aria-label="Confirm Delete"]').prop('isDisabled')
-        .find('ModalBoxFooter Button[aria-label="Delete"]')
+    ).toBe(false);
-        .invoke('onClick')();
+    await act(() =>
-    });
+      wrapper.find('Button[aria-label="Confirm Delete"]').prop('onClick')()
+    );
     expect(GroupsAPI.destroy).toBeCalledWith(1);
   });
+
   test('should navigate user to edit form on edit button click', async () => {
     wrapper.find('button[aria-label="Edit"]').simulate('click');
     expect(history.location.pathname).toEqual(
       '/inventories/inventory/1/groups/1/edit'
     );
   });
+
   test('details should render with the proper values', () => {
     expect(wrapper.find('Detail[label="Name"]').prop('value')).toBe('Foo');
     expect(wrapper.find('Detail[label="Description"]').prop('value')).toBe(

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.jsx

@@ -1,14 +1,12 @@
-import React, { useCallback, useState, useEffect } from 'react';
+import React, { useCallback, useEffect } from 'react';
 import { useParams, useLocation } from 'react-router-dom';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Button, Tooltip } from '@patternfly/react-core';
+import { Tooltip } from '@patternfly/react-core';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import useSelected from '../../../util/useSelected';
 import useRequest from '../../../util/useRequest';
-import { InventoriesAPI, GroupsAPI } from '../../../api';
+import { InventoriesAPI } from '../../../api';
-import AlertModal from '../../../components/AlertModal';
-import ErrorDetail from '../../../components/ErrorDetail';
 import DataListToolbar from '../../../components/DataListToolbar';
 import PaginatedDataList, {
   ToolbarAddButton,
@@ -29,25 +27,8 @@ function cannotDelete(item) {
   return !item.summary_fields.user_capabilities.delete;
 }
 
-const useModal = () => {
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  function toggleModal() {
-    setIsModalOpen(!isModalOpen);
-  }
-
-  return {
-    isModalOpen,
-    toggleModal,
-  };
-};
-
 function InventoryGroupsList({ i18n }) {
-  const [deletionError, setDeletionError] = useState(null);
-  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
-
   const location = useLocation();
-  const { isModalOpen, toggleModal } = useModal();
   const { id: inventoryId } = useParams();
 
   const {
@@ -119,31 +100,6 @@ function InventoryGroupsList({ i18n }) {
     return i18n._(t`Select a row to delete`);
   };
 
-  const handleDelete = async option => {
-    setIsDeleteLoading(true);
-
-    try {
-      /* eslint-disable no-await-in-loop */
-      /* Delete groups sequentially to avoid api integrity errors */
-      /* https://eslint.org/docs/rules/no-await-in-loop#when-not-to-use-it */
-      for (let i = 0; i < selected.length; i++) {
-        const group = selected[i];
-        if (option === 'delete') {
-          await GroupsAPI.destroy(+group.id);
-        } else if (option === 'promote') {
-          await InventoriesAPI.promoteGroup(inventoryId, +group.id);
-        }
-      }
-      /* eslint-enable no-await-in-loop */
-    } catch (error) {
-      setDeletionError(error);
-    }
-
-    toggleModal();
-    fetchData();
-    setSelected([]);
-    setIsDeleteLoading(false);
-  };
   const canAdd =
     actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
 
@@ -151,7 +107,7 @@ function InventoryGroupsList({ i18n }) {
     <>
       <PaginatedDataList
         contentError={contentError}
-        hasContentLoading={isLoading || isDeleteLoading}
+        hasContentLoading={isLoading}
         items={groups}
         itemCount={groupCount}
         qsConfig={QS_CONFIG}
@@ -220,18 +176,16 @@ function InventoryGroupsList({ i18n }) {
                 hasListItems={groupCount > 0}
               />,
               <Tooltip content={renderTooltip()} position="top" key="delete">
-                <div>
+                <InventoryGroupsDeleteModal
-                  <Button
+                  groups={selected}
-                    variant="danger"
+                  isDisabled={
-                    aria-label={i18n._(t`Delete`)}
+                    selected.length === 0 || selected.some(cannotDelete)
-                    onClick={toggleModal}
+                  }
-                    isDisabled={
+                  onAfterDelete={() => {
-                      selected.length === 0 || selected.some(cannotDelete)
+                    fetchData();
-                    }
+                    setSelected([]);
-                  >
+                  }}
-                    {i18n._(t`Delete`)}
+                />
-                  </Button>
-                </div>
               </Tooltip>,
             ]}
           />
@@ -245,24 +199,6 @@ function InventoryGroupsList({ i18n }) {
           )
         }
       />
-      {deletionError && (
-        <AlertModal
-          isOpen={deletionError}
-          variant="error"
-          aria-label={i18n._(t`deletion error`)}
-          title={i18n._(t`Error!`)}
-          onClose={() => setDeletionError(null)}
-        >
-          {i18n._(t`Failed to delete one or more groups.`)}
-          <ErrorDetail error={deletionError} />
-        </AlertModal>
-      )}
-      <InventoryGroupsDeleteModal
-        groups={selected}
-        isModalOpen={isModalOpen}
-        onClose={toggleModal}
-        onDelete={handleDelete}
-      />
     </>
   );
 }

awx/ui_next/src/screens/Inventory/InventoryGroups/InventoryGroupsList.test.jsx

@@ -230,7 +230,7 @@ describe('<InventoryGroupsList/> error handling', () => {
     wrapper.update();
     await act(async () => {
       wrapper
-        .find('ModalBoxFooter Button[aria-label="Delete"]')
+        .find('ModalBoxFooter Button[aria-label="Confirm Delete"]')
         .invoke('onClick')();
     });
     await waitForElement(

awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.jsx

@@ -1,11 +1,14 @@
 import 'styled-components/macro';
-import React, { useState } from 'react';
+import React, { useState, useContext, useEffect } from 'react';
-import ReactDOM from 'react-dom';
+import { useParams } from 'react-router-dom';
 import { func, bool, arrayOf, object } from 'prop-types';
 import { withI18n } from '@lingui/react';
 import { t } from '@lingui/macro';
-import { Button, Radio } from '@patternfly/react-core';
+import { Button, Radio, DropdownItem } from '@patternfly/react-core';
 import styled from 'styled-components';
+import { KebabifiedContext } from '../../../contexts/Kebabified';
+import { GroupsAPI, InventoriesAPI } from '../../../api';
+import ErrorDetail from '../../../components/ErrorDetail';
 import AlertModal from '../../../components/AlertModal';
 
 const ListItem = styled.li`
@@ -15,83 +18,151 @@ const ListItem = styled.li`
 `;
 
 const InventoryGroupsDeleteModal = ({
-  onClose,
+  onAfterDelete,
-  onDelete,
+  isDisabled,
-  isModalOpen,
   groups,
   i18n,
 }) => {
   const [radioOption, setRadioOption] = useState(null);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDeleteLoading, setIsDeleteLoading] = useState(false);
+  const [deletionError, setDeletionError] = useState(null);
+  const { id: inventoryId } = useParams();
+  const { isKebabified, onKebabModalChange } = useContext(KebabifiedContext);
 
-  return ReactDOM.createPortal(
+  useEffect(() => {
-    <AlertModal
+    if (isKebabified) {
-      isOpen={isModalOpen}
+      onKebabModalChange(isModalOpen);
-      variant="danger"
+    }
-      title={
+  }, [isKebabified, isModalOpen, onKebabModalChange]);
-        groups.length > 1 ? i18n._(t`Delete Groups?`) : i18n._(t`Delete Group?`)
+  const handleDelete = async option => {
+    setIsDeleteLoading(true);
+
+    try {
+      /* eslint-disable no-await-in-loop */
+      /* Delete groups sequentially to avoid api integrity errors */
+      /* https://eslint.org/docs/rules/no-await-in-loop#when-not-to-use-it */
+      for (let i = 0; i < groups.length; i++) {
+        const group = groups[i];
+        if (option === 'delete') {
+          await GroupsAPI.destroy(+group.id);
+        } else if (option === 'promote') {
+          await InventoriesAPI.promoteGroup(inventoryId, +group.id);
+        }
       }
-      onClose={onClose}
+      /* eslint-enable no-await-in-loop */
-      actions={[
+    } catch (error) {
-        <Button
+      setDeletionError(error);
-          aria-label={i18n._(t`Delete`)}
+    } finally {
-          onClick={() => onDelete(radioOption)}
+      setIsModalOpen(false);
-          variant="danger"
+      setIsDeleteLoading(false);
+      onAfterDelete();
+    }
+  };
+  return (
+    <>
+      {isKebabified ? (
+        <DropdownItem
           key="delete"
-          isDisabled={radioOption === null}
+          isDisabled={isDisabled || isDeleteLoading}
+          component="button"
+          aria-label={i18n._(t`Delete`)}
+          onClick={() => setIsModalOpen(true)}
         >
           {i18n._(t`Delete`)}
-        </Button>,
+        </DropdownItem>
+      ) : (
         <Button
-          aria-label={i18n._(t`Close`)}
-          onClick={onClose}
           variant="secondary"
-          key="cancel"
+          aria-label={i18n._(t`Delete`)}
+          onClick={() => setIsModalOpen(true)}
+          isDisabled={isDisabled || isDeleteLoading}
         >
-          {i18n._(t`Cancel`)}
+          {i18n._(t`Delete`)}
-        </Button>,
+        </Button>
-      ]}
-    >
-      {i18n._(
-        t`Are you sure you want to delete the ${
-          groups.length > 1 ? i18n._(t`groups`) : i18n._(t`group`)
-        } below?`
       )}
-      <div css="padding: 24px 0;">
+      {isModalOpen && (
-        {groups.map(group => {
+        <AlertModal
-          return <ListItem key={group.id}>{group.name}</ListItem>;
+          isOpen={isModalOpen}
-        })}
+          variant="danger"
-      </div>
+          title={
-      <div>
+            groups.length > 1
-        <Radio
+              ? i18n._(t`Delete Groups?`)
-          id="radio-delete"
+              : i18n._(t`Delete Group?`)
-          key="radio-delete"
+          }
-          label={i18n._(t`Delete All Groups and Hosts`)}
+          onClose={() => setIsModalOpen(false)}
-          name="option"
+          actions={[
-          onChange={() => setRadioOption('delete')}
+            <Button
-        />
+              aria-label={i18n._(t`Confirm Delete`)}
-        <Radio
+              onClick={() => handleDelete(radioOption)}
-          css="margin-top: 5px;"
+              variant="danger"
-          id="radio-promote"
+              key="delete"
-          key="radio-promote"
+              isDisabled={radioOption === null}
-          label={i18n._(t`Promote Child Groups and Hosts`)}
+            >
-          name="option"
+              {i18n._(t`Delete`)}
-          onChange={() => setRadioOption('promote')}
+            </Button>,
-        />
+            <Button
-      </div>
+              aria-label={i18n._(t`Close`)}
-    </AlertModal>,
+              onClick={() => setIsModalOpen(false)}
-    document.body
+              variant="secondary"
+              key="cancel"
+            >
+              {i18n._(t`Cancel`)}
+            </Button>,
+          ]}
+        >
+          {i18n._(
+            t`Are you sure you want to delete the ${
+              groups.length > 1 ? i18n._(t`groups`) : i18n._(t`group`)
+            } below?`
+          )}
+          <div css="padding: 24px 0;">
+            {groups.map(group => {
+              return <ListItem key={group.id}>{group.name}</ListItem>;
+            })}
+          </div>
+          <div>
+            <Radio
+              id="radio-delete"
+              key="radio-delete"
+              label={i18n._(t`Delete All Groups and Hosts`)}
+              name="option"
+              onChange={() => setRadioOption('delete')}
+            />
+            <Radio
+              css="margin-top: 5px;"
+              id="radio-promote"
+              key="radio-promote"
+              label={i18n._(t`Promote Child Groups and Hosts`)}
+              name="option"
+              onChange={() => setRadioOption('promote')}
+            />
+          </div>
+        </AlertModal>
+      )}
+      {deletionError && (
+        <AlertModal
+          isOpen={deletionError}
+          variant="error"
+          aria-label={i18n._(t`deletion error`)}
+          title={i18n._(t`Error!`)}
+          onClose={() => setDeletionError(null)}
+        >
+          {i18n._(t`Failed to delete one or more groups.`)}
+          <ErrorDetail error={deletionError} />
+        </AlertModal>
+      )}
+    </>
   );
 };
 
 InventoryGroupsDeleteModal.propTypes = {
-  onClose: func.isRequired,
+  onAfterDelete: func.isRequired,
-  onDelete: func.isRequired,
-  isModalOpen: bool,
   groups: arrayOf(object),
+  isDisabled: bool.isRequired,
 };
 
 InventoryGroupsDeleteModal.defaultProps = {
-  isModalOpen: false,
   groups: [],
 };
 

awx/ui_next/src/screens/Inventory/shared/InventoryGroupsDeleteModal.test.jsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { act } from 'react-dom/test-utils';
+import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
+
+import { InventoriesAPI } from '../../../api';
+import InventoryGroupsDeleteModal from './InventoryGroupsDeleteModal';
+
+jest.mock('../../../api');
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useParams: () => ({
+    id: 1,
+  }),
+}));
+describe('<InventoryGroupsDeleteModal />', () => {
+  let wrapper;
+  beforeEach(() => {
+    act(() => {
+      wrapper = mountWithContexts(
+        <InventoryGroupsDeleteModal
+          onAfterDelete={() => {}}
+          isDisabled={false}
+          groups={[
+            { id: 1, name: 'Foo' },
+            { id: 2, name: 'Bar' },
+          ]}
+        />
+      );
+    });
+  });
+  afterEach(() => {
+    wrapper.unmount();
+    jest.clearAllMocks();
+  });
+  test('should mount properly', async () => {
+    expect(wrapper.find('Button[aria-label="Delete"]').length).toBe(1);
+    act(() => wrapper.find('Button[aria-label="Delete"]').prop('onClick')());
+    wrapper.update();
+    expect(wrapper.find('AlertModal').length).toBe(1);
+  });
+
+  test('should close modal', () => {
+    act(() => wrapper.find('Button[aria-label="Delete"]').prop('onClick')());
+    wrapper.update();
+    act(() => wrapper.find('ModalBoxCloseButton').prop('onClose')());
+    wrapper.update();
+    expect(wrapper.find('AlertModal').length).toBe(0);
+  });
+
+  test('should delete properly', async () => {
+    act(() => wrapper.find('Button[aria-label="Delete"]').prop('onClick')({}));
+    wrapper.update();
+    act(() =>
+      wrapper
+        .find('Radio[label="Promote Child Groups and Hosts"]')
+        .invoke('onChange')()
+    );
+    wrapper.update();
+    expect(
+      wrapper.find('Button[aria-label="Confirm Delete"]').prop('isDisabled')
+    ).toBe(false);
+    await act(() =>
+      wrapper.find('Button[aria-label="Confirm Delete"]').prop('onClick')()
+    );
+    expect(InventoriesAPI.promoteGroup).toBeCalledWith(1, 1);
+  });
+
+  test('should throw deletion error ', async () => {
+    InventoriesAPI.promoteGroup.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'post',
+            url: '/api/v2/inventories/1/groups',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+    act(() => wrapper.find('Button[aria-label="Delete"]').prop('onClick')({}));
+    wrapper.update();
+    act(() =>
+      wrapper
+        .find('Radio[label="Promote Child Groups and Hosts"]')
+        .invoke('onChange')()
+    );
+    wrapper.update();
+    expect(
+      wrapper.find('Button[aria-label="Confirm Delete"]').prop('isDisabled')
+    ).toBe(false);
+    await act(() =>
+      wrapper.find('Button[aria-label="Confirm Delete"]').prop('onClick')()
+    );
+    expect(InventoriesAPI.promoteGroup).toBeCalledWith(1, 1);
+    wrapper.update();
+    expect(wrapper.find('ErrorDetail').length).toBe(1);
+  });
+});

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

@@ -110,8 +110,16 @@ describe('<ProjectAdd />', () => {
       project_local_paths: ['foobar', 'qux'],
       project_base_dir: 'dir/foo/bar',
     };
-    const error = new Error('oops');
+    const error = {
-    ProjectsAPI.create.mockImplementation(() => Promise.reject(error));
+      response: {
+        config: {
+          method: 'create',
+          url: '/api/v2/projects/',
+        },
+        data: { detail: 'An error occurred' },
+      },
+    };
+    ProjectsAPI.create.mockRejectedValue(error);
     await act(async () => {
       wrapper = mountWithContexts(<ProjectAdd />, {
         context: { config },

awx/ui_next/src/screens/Team/TeamRoles/TeamRolesList.jsx

@@ -29,7 +29,6 @@ const QS_CONFIG = getQSConfig('roles', {
 });
 
 function TeamRolesList({ i18n, me, team }) {
-  const [isWizardOpen, setIsWizardOpen] = useState(false);
   const { search } = useLocation();
   const [roleToDisassociate, setRoleToDisassociate] = useState(null);
 
@@ -85,10 +84,6 @@ function TeamRolesList({ i18n, me, team }) {
     fetchRoles();
   }, [fetchRoles]);
 
-  const saveRoles = () => {
-    setIsWizardOpen(false);
-    fetchRoles();
-  };
   const {
     isLoading: isDisassociateLoading,
     deleteItems: disassociateRole,
@@ -170,15 +165,11 @@ function TeamRolesList({ i18n, me, team }) {
             additionalControls={[
               ...(canAdd
                 ? [
-                    <Button
+                    <UserAndTeamAccessAdd
-                      key="add"
+                      apiModel={TeamsAPI}
-                      aria-label={i18n._(t`Add resource roles`)}
+                      onFetchData={fetchRoles}
-                      onClick={() => {
+                      title={i18n._(t`Add team permissions`)}
-                        setIsWizardOpen(true);
+                    />,
-                      }}
-                    >
-                      {i18n._(t`Add`)}
-                    </Button>,
                   ]
                 : []),
             ]}
@@ -195,15 +186,6 @@ function TeamRolesList({ i18n, me, team }) {
           />
         )}
       />
-      {isWizardOpen && (
-        <UserAndTeamAccessAdd
-          apiModel={TeamsAPI}
-          isOpen={isWizardOpen}
-          onSave={saveRoles}
-          onClose={() => setIsWizardOpen(false)}
-          title={i18n._(t`Add team permissions`)}
-        />
-      )}
 
       {roleToDisassociate && (
         <AlertModal

awx/ui_next/src/screens/User/UserRoles/UserRolesList.jsx

@@ -31,7 +31,6 @@ const QS_CONFIG = getQSConfig('roles', {
 // we can't really search using the normal search parameters.
 function UserRolesList({ i18n, user }) {
   const { search } = useLocation();
-  const [isWizardOpen, setIsWizardOpen] = useState(false);
   const [roleToDisassociate, setRoleToDisassociate] = useState(null);
 
   const {
@@ -102,11 +101,6 @@ function UserRolesList({ i18n, user }) {
     user?.summary_fields?.user_capabilities?.edit ||
     (actions && Object.prototype.hasOwnProperty.call(actions, 'POST'));
 
-  const saveRoles = () => {
-    setIsWizardOpen(false);
-    fetchRoles();
-  };
-
   const detailUrl = role => {
     const { resource_id, resource_type } = role.summary_fields;
 
@@ -183,30 +177,17 @@ function UserRolesList({ i18n, user }) {
             additionalControls={[
               ...(canAdd
                 ? [
-                    <Button
+                    <UserAndTeamAccessAdd
-                      key="add"
+                      apiModel={UsersAPI}
-                      aria-label={i18n._(t`Add resource roles`)}
+                      onFetchData={fetchRoles}
-                      onClick={() => {
+                      title={i18n._(t`Add user permissions`)}
-                        setIsWizardOpen(true);
+                    />,
-                      }}
-                    >
-                      {i18n._(t`Add`)}
-                    </Button>,
                   ]
                 : []),
             ]}
           />
         )}
       />
-      {isWizardOpen && (
-        <UserAndTeamAccessAdd
-          apiModel={UsersAPI}
-          isOpen={isWizardOpen}
-          onSave={saveRoles}
-          onClose={() => setIsWizardOpen(false)}
-          title={i18n._(t`Add user permissions`)}
-        />
-      )}
       {roleToDisassociate && (
         <AlertModal
           aria-label={i18n._(t`Disassociate role`)}

awx/ui_next/src/screens/User/UserRoles/UserRolesList.test.jsx

@@ -218,7 +218,7 @@ describe('<UserRolesList />', () => {
     });
     wrapper.update();
     await act(async () =>
-      wrapper.find('Button[aria-label="Add resource roles"]').prop('onClick')()
+      wrapper.find('Button[aria-label="Add"]').prop('onClick')()
     );
     wrapper.update();
     expect(wrapper.find('PFWizard').length).toBe(1);