feat(content-releases): Release delete action (#19049)

* implement the delete action

* fix missing prop

* fix type errors

* add translation

packages/core/content-releases/admin/src/pages/ReleaseDetailsPage.tsx

@@ -26,10 +26,11 @@ import {
   useAPIErrorHandler,
   useNotification,
   useQueryParams,
+  ConfirmDialog,
 } from '@strapi/helper-plugin';
 import { ArrowLeft, EmptyDocuments, More, Pencil, Trash } from '@strapi/icons';
 import { useIntl } from 'react-intl';
-import { useParams } from 'react-router-dom';
+import { useParams, useHistory } from 'react-router-dom';
 import styled from 'styled-components';
 
 import { ReleaseActionOptions } from '../components/ReleaseActionOptions';
@@ -43,6 +44,7 @@ import {
   useUpdateReleaseMutation,
   useUpdateReleaseActionMutation,
   usePublishReleaseMutation,
+  useDeleteReleaseMutation,
 } from '../services/release';
 
 import type { ReleaseAction } from '../../../shared/contracts/release-actions';
@@ -102,11 +104,13 @@ const PopoverButton = ({ onClick, children }: PopoverButtonProps) => {
 
 interface ReleaseDetailsLayoutProps {
   toggleEditReleaseModal: () => void;
+  toggleWarningSubmit: () => void;
   children: React.ReactNode;
 }
 
 export const ReleaseDetailsLayout = ({
   toggleEditReleaseModal,
+  toggleWarningSubmit,
   children,
 }: ReleaseDetailsLayoutProps) => {
   const { formatMessage } = useIntl();
@@ -156,6 +160,11 @@ export const ReleaseDetailsLayout = ({
     }
   };
 
+  const openWarningConfirmDialog = () => {
+    toggleWarningSubmit();
+    handleTogglePopover();
+  };
+
   if (isLoadingDetails) {
     return (
       <Main aria-busy={isLoadingDetails}>
@@ -237,15 +246,17 @@ export const ReleaseDetailsLayout = ({
                           </Typography>
                         </PopoverButton>
                       </CheckPermissions>
-                      <PopoverButton>
+                      <CheckPermissions permissions={PERMISSIONS.delete}>
-                        <TrashIcon />
+                        <PopoverButton onClick={openWarningConfirmDialog}>
-                        <Typography ellipsis textColor="danger600">
+                          <TrashIcon />
-                          {formatMessage({
+                          <Typography ellipsis textColor="danger600">
-                            id: 'content-releases.header.actions.delete',
+                            {formatMessage({
-                            defaultMessage: 'Delete',
+                              id: 'content-releases.header.actions.delete',
-                          })}
+                              defaultMessage: 'Delete',
-                        </Typography>
+                            })}
-                      </PopoverButton>
+                          </Typography>
+                        </PopoverButton>
+                      </CheckPermissions>
                     </Flex>
                     <ReleaseInfoWrapper
                       direction="column"
@@ -501,7 +512,9 @@ const ReleaseDetailsPage = () => {
   const { releaseId } = useParams<{ releaseId: string }>();
   const toggleNotification = useNotification();
   const { formatAPIError } = useAPIErrorHandler();
+  const { push } = useHistory();
   const [releaseModalShown, setReleaseModalShown] = React.useState(false);
+  const [showWarningSubmit, setWarningSubmit] = React.useState(false);
 
   const {
     isLoading: isLoadingDetails,
@@ -509,14 +522,20 @@ const ReleaseDetailsPage = () => {
     isSuccess: isSuccessDetails,
   } = useGetReleaseQuery({ id: releaseId });
   const [updateRelease, { isLoading: isSubmittingForm }] = useUpdateReleaseMutation();
+  const [deleteRelease, { isLoading: isDeletingRelease }] = useDeleteReleaseMutation();
 
   const toggleEditReleaseModal = () => {
     setReleaseModalShown((prev) => !prev);
   };
 
+  const toggleWarningSubmit = () => setWarningSubmit((prevState) => !prevState);
+
   if (isLoadingDetails) {
     return (
-      <ReleaseDetailsLayout toggleEditReleaseModal={toggleEditReleaseModal}>
+      <ReleaseDetailsLayout
+        toggleEditReleaseModal={toggleEditReleaseModal}
+        toggleWarningSubmit={toggleWarningSubmit}
+      >
         <ContentLayout>
           <LoadingIndicatorPage />
         </ContentLayout>
@@ -558,8 +577,33 @@ const ReleaseDetailsPage = () => {
     toggleEditReleaseModal();
   };
 
+  const handleDeleteRelease = async () => {
+    const response = await deleteRelease({
+      id: releaseId,
+    });
+
+    if ('data' in response) {
+      push('/plugins/content-releases');
+    } else if (isAxiosError(response.error)) {
+      // When the response returns an object with 'error', handle axios error
+      toggleNotification({
+        type: 'warning',
+        message: formatAPIError(response.error),
+      });
+    } else {
+      // Otherwise, the response returns an object with 'error', handle a generic error
+      toggleNotification({
+        type: 'warning',
+        message: formatMessage({ id: 'notification.error', defaultMessage: 'An error occurred' }),
+      });
+    }
+  };
+
   return (
-    <ReleaseDetailsLayout toggleEditReleaseModal={toggleEditReleaseModal}>
+    <ReleaseDetailsLayout
+      toggleEditReleaseModal={toggleEditReleaseModal}
+      toggleWarningSubmit={toggleWarningSubmit}
+    >
       <ReleaseDetailsBody />
       {releaseModalShown && (
         <ReleaseModal
@@ -569,6 +613,16 @@ const ReleaseDetailsPage = () => {
           initialValues={{ name: title || '' }}
         />
       )}
+      <ConfirmDialog
+        bodyText={{
+          id: 'content-releases.dialog.confirmation-message',
+          defaultMessage: 'Are you sure you want to delete this release?',
+        }}
+        isOpen={showWarningSubmit}
+        isConfirmButtonLoading={isDeletingRelease}
+        onToggleDialog={toggleWarningSubmit}
+        onConfirm={handleDeleteRelease}
+      />
     </ReleaseDetailsLayout>
   );
 };

packages/core/content-releases/admin/src/services/release.ts

@@ -14,6 +14,7 @@ import type {
 } from '../../../shared/contracts/release-actions';
 import type {
   CreateRelease,
+  DeleteRelease,
   GetContentTypeEntryReleases,
   GetReleases,
   UpdateRelease,
@@ -230,6 +231,15 @@ const releaseApi = createApi({
         },
         invalidatesTags: (result, error, arg) => [{ type: 'Release', id: arg.id }],
       }),
+      deleteRelease: build.mutation<DeleteRelease.Response, DeleteRelease.Request['params']>({
+        query({ id }) {
+          return {
+            url: `/content-releases/${id}`,
+            method: 'DELETE',
+          };
+        },
+        invalidatesTags: (result, error, arg) => [{ type: 'Release', id: arg.id }],
+      }),
     };
   },
 });
@@ -245,6 +255,7 @@ const {
   useUpdateReleaseActionMutation,
   usePublishReleaseMutation,
   useDeleteReleaseActionMutation,
+  useDeleteReleaseMutation,
 } = releaseApi;
 
 export {
@@ -258,5 +269,6 @@ export {
   useUpdateReleaseActionMutation,
   usePublishReleaseMutation,
   useDeleteReleaseActionMutation,
+  useDeleteReleaseMutation,
   releaseApi,
 };

packages/core/content-releases/admin/src/translations/en.json

@@ -38,5 +38,6 @@
   "page.ReleaseDetails.table.header.label.content-type": "content-type",
   "page.ReleaseDetails.table.header.label.action": "action",
   "page.ReleaseDetails.table.action-published": "This entry was <b>{isPublish, select, true {published} other {unpublished}}</b>.",
-  "pages.ReleaseDetails.publish-notification-success": "Release was published successfully."
+  "pages.ReleaseDetails.publish-notification-success": "Release was published successfully.",
+  "dialog.confirmation-message": "Are you sure you want to delete this release?"
 }