Repository/Remote delete: wait for task before requery, redirect to list screen instead of 404 after delete on detail

src/actions/action.tsx

@@ -4,7 +4,13 @@ import React from 'react';
 import { Tooltip } from 'src/components';
 import { type PermissionContextType } from 'src/permissions';
 
-type ModalType = ({ addAlert, state, setState, query }) => React.ReactNode;
+type ModalType = ({
+  addAlert,
+  listQuery,
+  query,
+  setState,
+  state,
+}) => React.ReactNode;
 
 interface ActionParams {
   buttonVariant?: 'primary' | 'secondary';

src/actions/ansible-remote-delete.tsx

@@ -3,18 +3,23 @@ import React from 'react';
 import { AnsibleRemoteAPI } from 'src/api';
 import { DeleteAnsibleRemoteModal } from 'src/components';
 import { canDeleteAnsibleRemote } from 'src/permissions';
-import { handleHttpError, parsePulpIDFromURL, taskAlert } from 'src/utilities';
+import {
+  handleHttpError,
+  parsePulpIDFromURL,
+  taskAlert,
+  waitForTaskUrl,
+} from 'src/utilities';
 import { Action } from './action';
 
 export const ansibleRemoteDeleteAction = Action({
   condition: canDeleteAnsibleRemote,
   title: msg`Delete`,
-  modal: ({ addAlert, query, setState, state }) =>
+  modal: ({ addAlert, listQuery, setState, state }) =>
     state.deleteModalOpen ? (
       <DeleteAnsibleRemoteModal
         closeAction={() => setState({ deleteModalOpen: null })}
         deleteAction={() =>
-          deleteRemote(state.deleteModalOpen, { addAlert, setState, query })
+          deleteRemote(state.deleteModalOpen, { addAlert, setState, listQuery })
         }
         name={state.deleteModalOpen.name}
       />
@@ -28,14 +33,14 @@ export const ansibleRemoteDeleteAction = Action({
     }),
 });
 
-function deleteRemote({ name, pulpId }, { addAlert, setState, query }) {
+function deleteRemote({ name, pulpId }, { addAlert, setState, listQuery }) {
   return AnsibleRemoteAPI.delete(pulpId)
     .then(({ data }) => {
       addAlert(taskAlert(data.task, t`Removal started for remote ${name}`));
-
       setState({ deleteModalOpen: null });
-      query();
+      return waitForTaskUrl(data.task);
     })
+    .then(() => listQuery())
     .catch(
       handleHttpError(t`Failed to remove remote ${name}`, () => null, addAlert),
     );

src/actions/ansible-repository-delete.tsx

@@ -4,18 +4,27 @@ import { AnsibleDistributionAPI, AnsibleRepositoryAPI } from 'src/api';
 import { DeleteAnsibleRepositoryModal } from 'src/components';
 import { Constants } from 'src/constants';
 import { canDeleteAnsibleRepository } from 'src/permissions';
-import { handleHttpError, parsePulpIDFromURL, taskAlert } from 'src/utilities';
+import {
+  handleHttpError,
+  parsePulpIDFromURL,
+  taskAlert,
+  waitForTaskUrl,
+} from 'src/utilities';
 import { Action } from './action';
 
 export const ansibleRepositoryDeleteAction = Action({
   condition: canDeleteAnsibleRepository,
   title: msg`Delete`,
-  modal: ({ addAlert, query, setState, state }) =>
+  modal: ({ addAlert, listQuery, setState, state }) =>
     state.deleteModalOpen ? (
       <DeleteAnsibleRepositoryModal
         closeAction={() => setState({ deleteModalOpen: null })}
         deleteAction={() =>
-          deleteRepository(state.deleteModalOpen, { addAlert, setState, query })
+          deleteRepository(state.deleteModalOpen, {
+            addAlert,
+            listQuery,
+            setState,
+          })
         }
         name={state.deleteModalOpen.name}
       />
@@ -42,7 +51,7 @@ export const ansibleRepositoryDeleteAction = Action({
 
 async function deleteRepository(
   { name, pulp_href, pulpId },
-  { addAlert, setState, query },
+  { addAlert, setState, listQuery },
 ) {
   const distributionsToDelete = await AnsibleDistributionAPI.list({
     repository: pulp_href,
@@ -60,6 +69,7 @@ async function deleteRepository(
   const deleteRepo = AnsibleRepositoryAPI.delete(pulpId)
     .then(({ data }) => {
       addAlert(taskAlert(data.task, t`Removal started for repository ${name}`));
+      return waitForTaskUrl(data.task);
     })
     .catch(
       handleHttpError(
@@ -72,11 +82,12 @@ async function deleteRepository(
   const deleteDistribution = ({ name, pulp_href }) => {
     const distribution_id = parsePulpIDFromURL(pulp_href);
     return AnsibleDistributionAPI.delete(distribution_id)
-      .then(({ data }) =>
+      .then(({ data }) => {
         addAlert(
           taskAlert(data.task, t`Removal started for distribution ${name}`),
-        ),
-      )
+        );
+        return waitForTaskUrl(data.task);
+      })
       .catch(
         handleHttpError(
           t`Failed to remove distribution ${name}`,
@@ -91,6 +102,6 @@ async function deleteRepository(
     ...distributionsToDelete.map(deleteDistribution),
   ]).then(() => {
     setState({ deleteModalOpen: null });
-    query();
+    listQuery();
   });
 }

src/components/page/list-page.tsx

@@ -64,7 +64,13 @@ export type RenderTableRow<T> = (
   { addAlert, setState = null },
   listItemActions?,
 ) => React.ReactNode;
-type RenderModals = ({ addAlert, state, setState, query }) => React.ReactNode;
+type RenderModals = ({
+  addAlert,
+  listQuery,
+  query,
+  setState,
+  state,
+}) => React.ReactNode;
 type SortHeaders = {
   title: MessageDescriptor;
   type: string;
@@ -222,6 +228,7 @@ export const ListPage = function <T>({
         addAlert: (alert) => this.addAlert(alert),
         hasObjectPermission: () => false, // list items don't load my_permissions .. but superadmin should still work
         hasPermission: this.context.hasPermission,
+        listQuery: () => this.query(),
         navigate: this.props.navigate,
         query: () => this.query(),
         queueAlert: this.context.queueAlert,

src/components/page/page-with-tabs.tsx

@@ -44,7 +44,13 @@ interface IState<T> {
 // unauthorised - only EmptyStateUnauthorized, header and alerts
 // (data) - renders detail
 
-type RenderModals = ({ addAlert, state, setState, query }) => React.ReactNode;
+type RenderModals = ({
+  addAlert,
+  listQuery,
+  query,
+  setState,
+  state,
+}) => React.ReactNode;
 
 interface PageWithTabsParams<T> {
   breadcrumbs: ({ name, tab, params }) => { url?: string; name: string }[];
@@ -53,6 +59,7 @@ interface PageWithTabsParams<T> {
   errorTitle: MessageDescriptor;
   headerActions?: ActionType[];
   headerDetails?: (item) => React.ReactNode;
+  listUrl: string;
   query: ({ name }) => Promise<T>;
   renderModals?: RenderModals;
   renderTab: (tab, item, actionContext) => React.ReactNode;
@@ -75,6 +82,8 @@ export const PageWithTabs = function <
   headerActions,
   // under title
   headerDetails,
+  // formatPath result to navigate to - to get to the list screen
+  listUrl,
   // () => Promise<T>
   query,
   // ({ addAlert, state, setState, query }) => <ConfirmationModal... />
@@ -144,6 +153,7 @@ export const PageWithTabs = function <
         hasObjectPermission: (permission) =>
           item?.my_permissions?.includes?.(permission),
         hasPermission: this.context.hasPermission,
+        listQuery: () => this.props.navigate(listUrl),
         navigate: this.props.navigate,
         query: () => this.query(),
         queueAlert: this.context.queueAlert,

src/components/page/page.tsx

@@ -33,14 +33,21 @@ interface IState<T> {
 // unauthorised - only EmptyStateUnauthorized, header and alerts
 // (data) - renders detail
 
-type RenderModals = ({ addAlert, state, setState, query }) => React.ReactNode;
+type RenderModals = ({
+  addAlert,
+  listQuery,
+  query,
+  setState,
+  state,
+}) => React.ReactNode;
 
 interface PageParams<T> {
   breadcrumbs: ({ name }) => { url?: string; name: string }[];
   condition: PermissionContextType;
   displayName: string;
   errorTitle: MessageDescriptor;
   headerActions?: ActionType[];
+  listUrl: string;
   query: ({ name }) => Promise<T>;
   title: ({ name }) => string;
   transformParams: (routeParams) => Record<string, string>;
@@ -61,6 +68,8 @@ export const Page = function <
   errorTitle,
   // displayed after filters
   headerActions,
+  // formatPath result to navigate to - to get to the list screen
+  listUrl,
   // () => Promise<T>
   query,
   title,
@@ -120,6 +129,7 @@ export const Page = function <
         hasObjectPermission: (permission) =>
           item?.my_permissions?.includes?.(permission),
         hasPermission: this.context.hasPermission,
+        listQuery: () => this.props.navigate(listUrl),
         navigate: this.props.navigate,
         query: () => this.query(),
         queueAlert: this.context.queueAlert,

src/containers/ansible-remote/detail.tsx

@@ -49,6 +49,7 @@ const AnsibleRemoteDetail = PageWithTabs<AnsibleRemoteType>({
     ansibleRemoteDownloadCAAction,
     ansibleRemoteDeleteAction,
   ],
+  listUrl: formatPath(Paths.ansibleRemotes),
   query: ({ name }) => {
     return AnsibleRemoteAPI.list({ name })
       .then(({ data: { results } }) => results[0])

src/containers/ansible-remote/edit.tsx

@@ -41,6 +41,7 @@ const AnsibleRemoteEdit = Page<AnsibleRemoteType>({
     canAddAnsibleRemote(context) || canEditAnsibleRemote(context, item),
   displayName: 'AnsibleRemoteEdit',
   errorTitle: msg`Remote could not be displayed.`,
+  listUrl: formatPath(Paths.ansibleRemotes),
   query: ({ name }) => {
     return AnsibleRemoteAPI.list({ name })
       .then(({ data: { results } }) => results[0])

src/containers/ansible-repository/detail.tsx

@@ -69,6 +69,7 @@ const AnsibleRepositoryDetail = PageWithTabs<AnsibleRepositoryType>({
       )}
     </>
   ),
+  listUrl: formatPath(Paths.ansibleRepositories),
   query: ({ name }) => {
     return AnsibleRepositoryAPI.list({ name })
       .then(({ data: { results } }) => results[0])

src/containers/ansible-repository/edit.tsx

@@ -36,6 +36,7 @@ const AnsibleRepositoryEdit = Page<AnsibleRepositoryType>({
     canAddAnsibleRepository(context) || canEditAnsibleRepository(context, item),
   displayName: 'AnsibleRepositoryEdit',
   errorTitle: msg`Repository could not be displayed.`,
+  listUrl: formatPath(Paths.ansibleRepositories),
   query: ({ name }) => {
     return AnsibleRepositoryAPI.list({ name })
       .then(({ data: { results } }) => results[0])

src/utilities/fail-alerts.ts

@@ -22,27 +22,25 @@ export function errorMessage(
 }
 
 export const handleHttpError = (title, callback, addAlert) => (e) => {
-  const { status, statusText } = e.response;
-  console.log(typeof e.response.data);
+  let description = e.toString();
 
-  let message = '';
-  const err_detail = mapErrorMessages(e);
-  for (const msg in err_detail) {
-    message = message + err_detail[msg] + ' ';
-  }
+  if (e.response) {
+    // HTTP error
+    const { status, statusText } = e.response;
 
-  let description;
+    const err = mapErrorMessages(e);
+    const message = Object.values(err).join(' ');
 
-  if (message !== '') {
-    description = errorMessage(status, statusText, message);
-  } else {
-    description = errorMessage(status, statusText);
+    description = message
+      ? errorMessage(status, statusText, message)
+      : errorMessage(status, statusText);
   }
 
   addAlert({
     title,
     variant: 'danger',
-    description: description,
+    description,
   });
+
   callback();
 };

test/cypress/e2e/collections/collection.js

@@ -82,7 +82,7 @@ describe('collection tests', () => {
       `Started adding ${namespace}.${collection} v1.0.0 from "published" to repository "validated".`,
     );
     cy.get('[data-cy="AlertList"]').contains('detail page').click();
-    cy.contains('Completed');
+    cy.contains('Completed', { timeout: 10000 });
   });
 
   it('deletes an collection from repository', () => {