Merge pull request #7724 from AlexSCorey/7434-UserTokensDelete

Adds delete functionality to user tokens list

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

awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx

@@ -5,11 +5,14 @@ import { t } from '@lingui/macro';
 import { getQSConfig, parseQueryString } from '../../../util/qs';
 import PaginatedDataList, {
   ToolbarAddButton,
+  ToolbarDeleteButton,
 } from '../../../components/PaginatedDataList';
 import useSelected from '../../../util/useSelected';
-import useRequest from '../../../util/useRequest';
+import useRequest, { useDeleteItems } from '../../../util/useRequest';
-import { UsersAPI } from '../../../api';
+import { UsersAPI, TokensAPI } from '../../../api';
 import DataListToolbar from '../../../components/DataListToolbar';
+import AlertModal from '../../../components/AlertModal';
+import ErrorDetail from '../../../components/ErrorDetail';
 import UserTokensListItem from './UserTokenListItem';
 
 const QS_CONFIG = getQSConfig('user', {
@@ -54,11 +57,34 @@ function UserTokenList({ i18n }) {
     tokens
   );
 
+  const {
+    isLoading: isDeleteLoading,
+    deleteItems: deleteTokens,
+    deletionError,
+    clearDeletionError,
+  } = useDeleteItems(
+    useCallback(async () => {
+      return Promise.all(
+        selected.map(({ id: tokenId }) => TokensAPI.destroy(tokenId))
+      );
+    }, [selected]),
+    {
+      qsConfig: QS_CONFIG,
+      allItemsSelected: isAllSelected,
+      fetchItems: fetchTokens,
+    }
+  );
+  const handleDelete = async () => {
+    await deleteTokens();
+    setSelected([]);
+  };
+
   const canAdd = true;
   return (
+    <>
       <PaginatedDataList
         contentError={error}
-      hasContentLoading={isLoading}
+        hasContentLoading={isLoading || isDeleteLoading}
         items={tokens}
         itemCount={itemCount}
         pluralizedItemName={i18n._(t`Tokens`)}
@@ -103,7 +129,9 @@ function UserTokenList({ i18n }) {
             showSelectAll
             isAllSelected={isAllSelected}
             qsConfig={QS_CONFIG}
-          onSelectAll={isSelected => setSelected(isSelected ? [...tokens] : [])}
+            onSelectAll={isSelected =>
+              setSelected(isSelected ? [...tokens] : [])
+            }
             additionalControls={[
               ...(canAdd
                 ? [
@@ -113,6 +141,12 @@ function UserTokenList({ i18n }) {
                     />,
                   ]
                 : []),
+              <ToolbarDeleteButton
+                key="delete"
+                onDelete={handleDelete}
+                itemsToDelete={selected}
+                pluralizedItemName={i18n._(t`User tokens`)}
+              />,
             ]}
           />
         )}
@@ -132,6 +166,18 @@ function UserTokenList({ i18n }) {
           ) : null
         }
       />
+      {deletionError && (
+        <AlertModal
+          isOpen={deletionError}
+          variant="danger"
+          title={i18n._(t`Error!`)}
+          onClose={clearDeletionError}
+        >
+          {i18n._(t`Failed to delete one or more user tokens.`)}
+          <ErrorDetail error={deletionError} />
+        </AlertModal>
+      )}
+    </>
   );
 }
 

awx/ui_next/src/screens/User/UserTokenList/UserTokenList.test.jsx

@@ -4,10 +4,11 @@ import {
   mountWithContexts,
   waitForElement,
 } from '../../../../testUtils/enzymeHelpers';
-import { UsersAPI } from '../../../api';
+import { UsersAPI, TokensAPI } from '../../../api';
 import UserTokenList from './UserTokenList';
 
 jest.mock('../../../api/models/Users');
+jest.mock('../../../api/models/Tokens');
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'),
@@ -162,4 +163,96 @@ describe('<UserTokenList />', () => {
       wrapper.find('DataListCheck[id="select-token-3"]').props().checked
     ).toBe(true);
   });
+  test('delete button should be disabled', async () => {
+    UsersAPI.readTokens.mockResolvedValue(tokens);
+    await act(async () => {
+      wrapper = mountWithContexts(<UserTokenList />);
+    });
+    waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      true
+    );
+  });
+  test('should select and then delete item properly', async () => {
+    UsersAPI.readTokens.mockResolvedValue(tokens);
+    await act(async () => {
+      wrapper = mountWithContexts(<UserTokenList />);
+    });
+    waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      true
+    );
+    await act(async () => {
+      wrapper
+        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .prop('onChange')(tokens.data.results[0]);
+    });
+    wrapper.update();
+    expect(
+      wrapper
+        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .prop('checked')
+    ).toBe(true);
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      false
+    );
+    await act(async () =>
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    await act(async () => expect(wrapper.find('AlertModal').length).toBe(1));
+    await act(async () =>
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(TokensAPI.destroy).toHaveBeenCalledWith(3);
+  });
+  test('should select and then delete item properly', async () => {
+    UsersAPI.readTokens.mockResolvedValue(tokens);
+    TokensAPI.destroy.mockRejectedValue(
+      new Error({
+        response: {
+          config: {
+            method: 'delete',
+            url: '/api/v2/tokens',
+          },
+          data: 'An error occurred',
+          status: 403,
+        },
+      })
+    );
+    await act(async () => {
+      wrapper = mountWithContexts(<UserTokenList />);
+    });
+    waitForElement(wrapper, 'ContentEmpty', el => el.length === 0);
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      true
+    );
+    await act(async () => {
+      wrapper
+        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .prop('onChange')(tokens.data.results[0]);
+    });
+    wrapper.update();
+    expect(
+      wrapper
+        .find('DataListCheck[aria-labelledby="check-action-3"]')
+        .prop('checked')
+    ).toBe(true);
+    expect(wrapper.find('Button[aria-label="Delete"]').prop('isDisabled')).toBe(
+      false
+    );
+    await act(async () =>
+      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    await act(async () => expect(wrapper.find('AlertModal').length).toBe(1));
+    await act(async () =>
+      wrapper.find('Button[aria-label="confirm delete"]').prop('onClick')()
+    );
+    wrapper.update();
+    expect(TokensAPI.destroy).toHaveBeenCalledWith(3);
+    wrapper.update();
+    expect(wrapper.find('ErrorDetail').length).toBe(1);
+  });
 });