Update usage of useDeleteItems

* Update usage of useDeleteItems. * Remove async when not necessary * Update return of promises
2026-01-13 02:50:02 -03:30 · 2020-11-04 14:21:48 -05:00 · 2020-11-04 14:21:48 -05:00 · faec21ed08
commit faec21ed08
parent 1deb4ff5e4
27 changed files with 65 additions and 52 deletions
--- a/awx/ui_next/src/components/JobList/JobList.jsx
+++ b/awx/ui_next/src/components/JobList/JobList.jsx
@ -122,7 +122,7 @@ function JobList({ i18n, defaultParams, showTypeColumn = false }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ type, id }) => {
          switch (type) {
--- a/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
+++ b/awx/ui_next/src/components/ResourceAccessList/ResourceAccessList.jsx
@ -66,7 +66,7 @@ function ResourceAccessList({ i18n, apiModel, resource }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      if (typeof deletionRole.team_id !== 'undefined') {
        return TeamsAPI.disassociateRole(deletionRole.team_id, deletionRole.id);
      }
--- a/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.jsx
@ -4,7 +4,7 @@ import { t } from '@lingui/macro';
 import { Link, useHistory } from 'react-router-dom';
 import { Button } from '@patternfly/react-core';

-import { useDeleteItems } from '../../../util/useRequest';
+import useRequest, { useDismissableError } from '../../../util/useRequest';
 import AlertModal from '../../../components/AlertModal';
 import { CardBody, CardActionsRow } from '../../../components/Card';
 import { Detail, DetailList } from '../../../components/DetailList';
@ -21,16 +21,17 @@ function ApplicationDetails({
  const history = useHistory();
  const {
    isLoading: deleteLoading,
-    deletionError,
-    deleteItems: handleDeleteApplications,
-    clearDeletionError,
-  } = useDeleteItems(
+    error: deletionError,
+    request: deleteApplications,
+  } = useRequest(
    useCallback(async () => {
      await ApplicationsAPI.destroy(application.id);
      history.push('/applications');
    }, [application.id, history])
  );

+  const { error, dismissError } = useDismissableError(deletionError);
+
  const getAuthorizationGrantType = type => {
    let value;
    authorizationOptions.filter(option => {
@ -104,22 +105,22 @@ function ApplicationDetails({
            <DeleteButton
              name={application.name}
              modalTitle={i18n._(t`Delete application`)}
-              onConfirm={handleDeleteApplications}
+              onConfirm={deleteApplications}
              isDisabled={deleteLoading}
            >
              {i18n._(t`Delete`)}
            </DeleteButton>
          )}
      </CardActionsRow>
-      {deletionError && (
+      {error && (
        <AlertModal
-          isOpen={deletionError}
+          isOpen={error}
          variant="error"
          title={i18n._(t`Error!`)}
-          onClose={clearDeletionError}
+          onClose={dismissError}
        >
          {i18n._(t`Failed to delete application.`)}
-          <ErrorDetail error={deletionError} />
+          <ErrorDetail error={error} />
        </AlertModal>
      )}
    </CardBody>
--- a/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.test.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationDetails/ApplicationDetails.test.jsx
@ -1,5 +1,6 @@
 import React from 'react';
 import { act } from 'react-dom/test-utils';
+import { createMemoryHistory } from 'history';

 import { mountWithContexts } from '../../../../testUtils/enzymeHelpers';
 import { ApplicationsAPI } from '../../../api';
@ -126,21 +127,27 @@ describe('<ApplicationDetails/>', () => {
  });

  test('should delete properly', async () => {
-    ApplicationsAPI.destroy.mockResolvedValue({ data: {} });
+    const history = createMemoryHistory({
+      initialEntries: ['/applications/1/details'],
+    });
    await act(async () => {
      wrapper = mountWithContexts(
        <ApplicationDetails
          application={application}
          authorizationOptions={authorizationOptions}
          clientTypeOptions={clientTypeOptions}
-        />
+        />,
+        {
+          context: { router: { history } },
+        }
      );
    });
-    await act(async () =>
-      wrapper.find('Button[aria-label="Delete"]').prop('onClick')()
-    );
-    wrapper.update();
-    await act(async () => wrapper.find('DeleteButton').prop('onConfirm')());
+    expect(history.location.pathname).toEqual('/applications/1/details');
+    await act(async () => {
+      wrapper.find('DeleteButton').invoke('onConfirm')();
+    });
+    expect(ApplicationsAPI.destroy).toHaveBeenCalledTimes(1);
+    expect(history.location.pathname).toBe('/applications');
    expect(ApplicationsAPI.destroy).toBeCalledWith(10);
  });

--- a/awx/ui_next/src/screens/Application/ApplicationTokens/ApplicationTokenList.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationTokens/ApplicationTokenList.jsx
@ -76,8 +76,8 @@ function ApplicationTokenList({ i18n }) {
    deleteItems: handleDeleteApplications,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
-      await Promise.all(
+    useCallback(() => {
+      return Promise.all(
        selected.map(({ id: tokenId }) => TokensAPI.destroy(tokenId))
      );
    }, [selected]),
--- a/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx
+++ b/awx/ui_next/src/screens/Application/ApplicationsList/ApplicationsList.jsx
@ -80,11 +80,11 @@ function ApplicationsList({ i18n }) {
  const {
    isLoading: deleteLoading,
    deletionError,
-    deleteItems: handleDeleteApplications,
+    deleteItems: deleteApplications,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
-      await Promise.all(selected.map(({ id }) => ApplicationsAPI.destroy(id)));
+    useCallback(() => {
+      return Promise.all(selected.map(({ id }) => ApplicationsAPI.destroy(id)));
    }, [selected]),
    {
      qsConfig: QS_CONFIG,
@ -93,8 +93,8 @@ function ApplicationsList({ i18n }) {
    }
  );

-  const handleDelete = async () => {
-    await handleDeleteApplications();
+  const handleDeleteApplications = async () => {
+    await deleteApplications();
    setSelected([]);
  };

@ -163,7 +163,7 @@ function ApplicationsList({ i18n }) {
                    : []),
                  <ToolbarDeleteButton
                    key="delete"
-                    onDelete={handleDelete}
+                    onDelete={handleDeleteApplications}
                    itemsToDelete={selected}
                    pluralizedItemName={i18n._(t`Applications`)}
                  />,
--- a/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
+++ b/awx/ui_next/src/screens/Credential/CredentialList/CredentialList.jsx
@ -62,7 +62,7 @@ function CredentialList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.map(({ id }) => CredentialsAPI.destroy(id)));
    }, [selected]),
    {
--- a/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
+++ b/awx/ui_next/src/screens/CredentialType/CredentialTypeList/CredentialTypeList.jsx
@ -83,8 +83,8 @@ function CredentialTypeList({ i18n }) {
    deleteItems: deleteCredentialTypes,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
-      await Promise.all(
+    useCallback(() => {
+      return Promise.all(
        selected.map(({ id }) => CredentialTypesAPI.destroy(id))
      );
    }, [selected]),
--- a/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx
+++ b/awx/ui_next/src/screens/Dashboard/shared/DashboardTemplateList.jsx
@ -100,7 +100,7 @@ function DashboardTemplateList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ type, id }) => {
          if (type === 'job_template') {
--- a/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx
+++ b/awx/ui_next/src/screens/Host/HostGroups/HostGroupsList.jsx
@ -91,7 +91,7 @@ function HostGroupsList({ i18n, host }) {
    deleteItems: disassociateHosts,
    deletionError: disassociateError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(group => HostsAPI.disassociateGroup(hostId, group))
      );
--- a/awx/ui_next/src/screens/Host/HostList/HostList.jsx
+++ b/awx/ui_next/src/screens/Host/HostList/HostList.jsx
@ -72,7 +72,7 @@ function HostList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
    }, [selected]),
    {
--- a/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/InstanceGroupList/InstanceGroupList.jsx
@ -103,8 +103,8 @@ function InstanceGroupList({ i18n }) {
    deleteItems: deleteInstanceGroups,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
-      await Promise.all(
+    useCallback(() => {
+      return Promise.all(
        selected.map(({ id }) => InstanceGroupsAPI.destroy(id))
      );
    }, [selected]),
--- a/awx/ui_next/src/screens/InstanceGroup/Instances/InstanceList.jsx
+++ b/awx/ui_next/src/screens/InstanceGroup/Instances/InstanceList.jsx
@ -86,7 +86,7 @@ function InstanceList({ i18n }) {
    deleteItems: disassociateInstances,
    deletionError: disassociateError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(instance =>
          InstanceGroupsAPI.disassociateInstance(instanceGroupId, instance.id)
--- a/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryGroupHosts/InventoryGroupHostList.jsx
@ -86,7 +86,7 @@ function InventoryGroupHostList({ i18n }) {
    deleteItems: disassociateHosts,
    deletionError: disassociateErr,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(host => GroupsAPI.disassociateHost(groupId, host))
      );
--- a/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHostGroups/InventoryHostGroupsList.jsx
@ -90,7 +90,7 @@ function InventoryHostGroupsList({ i18n }) {
    deleteItems: disassociateHosts,
    deletionError: disassociateError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(group => HostsAPI.disassociateGroup(hostId, group))
      );
--- a/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryHosts/InventoryHostList.jsx
@ -87,12 +87,17 @@ function InventoryHostList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
-      await Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
+    useCallback(() => {
+      return Promise.all(selected.map(host => HostsAPI.destroy(host.id)));
    }, [selected]),
    { qsConfig: QS_CONFIG, fetchItems: fetchData }
  );

+  const handleDeleteHosts = async () => {
+    await deleteHosts();
+    setSelected([]);
+  };
+
  const canAdd =
    actions && Object.prototype.hasOwnProperty.call(actions, 'POST');
  const isAllSelected = selected.length > 0 && selected.length === hosts.length;
@ -150,7 +155,7 @@ function InventoryHostList({ i18n }) {
              />,
              <ToolbarDeleteButton
                key="delete"
-                onDelete={deleteHosts}
+                onDelete={handleDeleteHosts}
                itemsToDelete={selected}
                pluralizedItemName={i18n._(t`Hosts`)}
              />,
--- a/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventoryList/InventoryList.jsx
@ -96,7 +96,7 @@ function InventoryList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.map(team => InventoriesAPI.destroy(team.id)));
    }, [selected]),
    {
--- a/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx
+++ b/awx/ui_next/src/screens/Inventory/InventorySources/InventorySourceList.jsx
@ -89,7 +89,7 @@ function InventorySourceList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ id: sourceId }) =>
          InventorySourcesAPI.destroy(sourceId)
--- a/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx
+++ b/awx/ui_next/src/screens/NotificationTemplate/NotificationTemplateList/NotificationTemplateList.jsx
@ -67,7 +67,7 @@ function NotificationTemplatesList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ id }) => NotificationTemplatesAPI.destroy(id))
      );
--- a/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
+++ b/awx/ui_next/src/screens/Organization/OrganizationList/OrganizationList.jsx
@ -81,7 +81,7 @@ function OrganizationsList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ id }) => OrganizationsAPI.destroy(id))
      );
--- a/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectJobTemplatesList/ProjectJobTemplatesList.jsx
@ -80,7 +80,7 @@ function ProjectJobTemplatesList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(template => JobTemplatesAPI.destroy(template.id))
      );
--- a/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
+++ b/awx/ui_next/src/screens/Project/ProjectList/ProjectList.jsx
@ -82,7 +82,7 @@ function ProjectList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.map(({ id }) => ProjectsAPI.destroy(id)));
    }, [selected]),
    {
--- a/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
+++ b/awx/ui_next/src/screens/Team/TeamList/TeamList.jsx
@ -78,7 +78,7 @@ function TeamList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.map(team => TeamsAPI.destroy(team.id)));
    }, [selected]),
    {
--- a/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
+++ b/awx/ui_next/src/screens/Template/TemplateList/TemplateList.jsx
@ -92,7 +92,7 @@ function TemplateList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ type, id }) => {
          if (type === 'job_template') {
--- a/awx/ui_next/src/screens/User/UserList/UserList.jsx
+++ b/awx/ui_next/src/screens/User/UserList/UserList.jsx
@ -79,7 +79,7 @@ function UserList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.map(user => UsersAPI.destroy(user.id)));
    }, [selected]),
    {
--- a/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
+++ b/awx/ui_next/src/screens/User/UserTeams/UserTeamList.jsx
@ -110,7 +110,7 @@ function UserTeamList({ i18n }) {
    deleteItems: disassociateTeams,
    deletionError: disassociateError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(selected.flatMap(team => disassociateUserRoles(team)));
      /* eslint-disable-next-line react-hooks/exhaustive-deps */
    }, [selected]),
--- a/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
+++ b/awx/ui_next/src/screens/User/UserTokenList/UserTokenList.jsx
@ -78,7 +78,7 @@ function UserTokenList({ i18n }) {
    deletionError,
    clearDeletionError,
  } = useDeleteItems(
-    useCallback(async () => {
+    useCallback(() => {
      return Promise.all(
        selected.map(({ id: tokenId }) => TokensAPI.destroy(tokenId))
      );