enhancement(CM): bulk delete and unpublish migration to v5

packages/core/admin/admin/src/components/Table.tsx

@@ -410,8 +410,8 @@ const CheckboxCell = ({ id, ...props }: Table.CheckboxCellProps) => {
     <Cell {...props} onClick={(e) => e.stopPropagation()}>
       <BaseCheckbox
         aria-label={formatMessage({
-          id: 'global.select-all-entries',
-          defaultMessage: 'Select all entries',
+          id: 'global.select',
+          defaultMessage: 'Select',
         })}
         disabled={rows.length === 0}
         checked={isChecked}

packages/core/admin/admin/src/features/Tracking.tsx

@@ -98,6 +98,7 @@ interface EventWithoutProperties {
     | 'didAccessAuthenticatedAdministration'
     | 'didAddComponentToDynamicZone'
     | 'didBulkDeleteEntries'
+    | 'didNotBulkDeleteEntries'
     | 'didChangeDisplayedFields'
     | 'didCheckDraftRelations'
     | 'didClickGuidedTourHomepageApiTokens'
@@ -132,6 +133,8 @@ interface EventWithoutProperties {
     | 'didPluginLearnMore'
     | 'didPublishEntry'
     | 'didUnpublishEntry'
+    | 'didBulkUnpublishEntries'
+    | 'didNotBulkUnpublishEntries'
     | 'didSaveComponent'
     | 'didSaveContentType'
     | 'didSearch'

packages/core/content-manager/admin/src/content-manager.ts

@@ -61,9 +61,9 @@ interface ListViewContext {
    */
   collectionType: string;
   /**
-   * TODO: add comment
+   * The current selected documents in the table
    */
-  documentIds: string[];
+  documents: Document[];
   /**
    * The current content-type's model.
    */
@@ -106,7 +106,7 @@ interface BulkActionComponentProps extends ListViewContext {}
 
 interface BulkActionComponent
   extends DescriptionComponent<BulkActionComponentProps, BulkActionDescription> {
-  actionType?: 'delete' | 'publish' | 'unpublish';
+  type?: 'delete' | 'publish' | 'unpublish';
 }
 
 /* -------------------------------------------------------------------------------------------------

packages/core/content-manager/admin/src/hooks/tests/useDocumentActions.test.ts

@@ -15,10 +15,12 @@ describe('useDocumentActions', () => {
       create: expect.any(Function),
       discard: expect.any(Function),
       delete: expect.any(Function),
+      deleteMany: expect.any(Function),
       getDocument: expect.any(Function),
       publish: expect.any(Function),
       update: expect.any(Function),
       unpublish: expect.any(Function),
+      unpublishMany: expect.any(Function),
     });
   });
 
@@ -243,6 +245,71 @@ describe('useDocumentActions', () => {
     });
   });
 
+  describe('bulk delete', () => {
+    it('should return the deleted documents when successful', async () => {
+      const { result } = renderHook(() => useDocumentActions());
+
+      let response;
+
+      await act(async () => {
+        const res = await result.current.deleteMany({
+          model: mockData.contentManager.contentType,
+          documentIds: ['12345', '6789'],
+          params: {
+            locale: 'en',
+          },
+        });
+
+        response = res;
+      });
+
+      expect(response).toMatchInlineSnapshot(`
+        {
+          "count": 2,
+        }
+      `);
+    });
+
+    it('should return the errors when unsuccessful', async () => {
+      server.use(
+        rest.post('/content-manager/collection-types/:uid/actions/bulkDelete', (_, res, ctx) => {
+          return res(
+            ctx.status(500),
+            ctx.json({
+              error: new errors.ApplicationError("Couldn't delete entries."),
+            })
+          );
+        })
+      );
+
+      const { result } = renderHook(() => useDocumentActions());
+
+      let response;
+
+      await act(async () => {
+        const res = await result.current.deleteMany({
+          model: mockData.contentManager.contentType,
+          documentIds: ['12345', '6789'],
+          params: { locale: 'en' },
+        });
+
+        response = res;
+      });
+
+      expect(response).toMatchInlineSnapshot(`
+                {
+                  "error": {
+                    "details": {},
+                    "message": "Couldn't delete entries.",
+                    "name": "ApplicationError",
+                  },
+                }
+              `);
+
+      await screen.findByText("Couldn't delete entries.");
+    });
+  });
+
   describe('discard', () => {
     it('should return the discarded document when successful', async () => {
       const { result } = renderHook(() => useDocumentActions());
@@ -597,4 +664,65 @@ describe('useDocumentActions', () => {
       await screen.findByText("Couldn't unpublish entry.");
     });
   });
+
+  describe('bulk unpublish', () => {
+    it('should return the unpublished document when successful', async () => {
+      const { result } = renderHook(() => useDocumentActions());
+
+      let response;
+
+      await act(async () => {
+        const res = await result.current.unpublishMany({
+          model: mockData.contentManager.contentType,
+          documentIds: ['12345', '6789'],
+        });
+
+        response = res;
+      });
+
+      expect(response).toMatchInlineSnapshot(`
+          {
+            "count": 2,
+          }
+      `);
+    });
+
+    it('should return the errors when unsuccessful', async () => {
+      server.use(
+        rest.post('/content-manager/collection-types/:uid/actions/bulkUnpublish', (_, res, ctx) => {
+          return res(
+            ctx.status(500),
+            ctx.json({
+              error: new errors.ApplicationError("Couldn't unpublish entries."),
+            })
+          );
+        })
+      );
+
+      const { result } = renderHook(() => useDocumentActions());
+
+      let response;
+
+      await act(async () => {
+        const res = await result.current.unpublishMany({
+          model: mockData.contentManager.contentType,
+          documentIds: ['12345', '6789'],
+        });
+
+        response = res;
+      });
+
+      expect(response).toMatchInlineSnapshot(`
+        {
+          "error": {
+            "details": {},
+            "message": "Couldn't unpublish entries.",
+            "name": "ApplicationError",
+          },
+        }
+      `);
+
+      await screen.findByText("Couldn't unpublish entries.");
+    });
+  });
 });

packages/core/content-manager/admin/src/hooks/useDocumentActions.ts

@@ -14,10 +14,12 @@ import {
   useCloneDocumentMutation,
   useCreateDocumentMutation,
   useDeleteDocumentMutation,
+  useDeleteManyDocumentsMutation,
   useDiscardDocumentMutation,
   useLazyGetDocumentQuery,
   usePublishDocumentMutation,
   useUnpublishDocumentMutation,
+  useUnpublishManyDocumentsMutation,
   useUpdateDocumentMutation,
 } from '../services/documents';
 import { BaseQueryError } from '../utils/api';
@@ -29,11 +31,13 @@ import type {
   Clone,
   Create,
   Delete,
+  BulkDelete,
   Discard,
   FindOne,
   Publish,
   Update,
   Unpublish,
+  BulkUnpublish,
 } from '../../../shared/contracts/collection-types';
 
 const DEFAULT_UNEXPECTED_ERROR_MSG = {
@@ -45,6 +49,10 @@ type OperationResponse<TResponse extends { data: any; meta: any; error?: any }>
   | Pick<TResponse, 'data' | 'meta'>
   | { error: BaseQueryError | SerializedError };
 
+type BulkOperationResponse<TResponse extends { data: any; error?: any }> =
+  | Pick<TResponse, 'data'>
+  | { error: BaseQueryError | SerializedError };
+
 type UseDocumentActions = () => {
   /**
    * @description Attempts to clone a document based on the provided sourceId.
@@ -90,6 +98,11 @@ type UseDocumentActions = () => {
       { name: 'willDeleteEntry' | 'didDeleteEntry' | 'didNotDeleteEntry' }
     >['properties']
   ) => Promise<OperationResponse<Delete.Response>>;
+  deleteMany: (args: {
+    model: string;
+    documentIds: string[];
+    params?: object;
+  }) => Promise<BulkOperationResponse<BulkDelete.Response>>;
   discard: (args: {
     collectionType: string;
     model: string;
@@ -133,6 +146,11 @@ type UseDocumentActions = () => {
     },
     discardDraft?: boolean
   ) => Promise<OperationResponse<Unpublish.Response>>;
+  unpublishMany: (args: {
+    model: string;
+    documentIds: string[];
+    params?: object;
+  }) => Promise<BulkOperationResponse<BulkUnpublish.Response>>;
 };
 
 type IUseDocumentActs = ReturnType<UseDocumentActions>;
@@ -213,6 +231,54 @@ const useDocumentActions: UseDocumentActions = () => {
     [trackUsage, deleteDocument, toggleNotification, formatMessage, formatAPIError]
   );
 
+  const [deleteManyDocuments] = useDeleteManyDocumentsMutation();
+
+  const deleteMany: IUseDocumentActs['deleteMany'] = React.useCallback(
+    async ({ model, documentIds, params }) => {
+      try {
+        trackUsage('willBulkDeleteEntries');
+
+        const res = await deleteManyDocuments({
+          model,
+          documentIds,
+          params,
+        });
+
+        if ('error' in res) {
+          toggleNotification({
+            type: 'danger',
+            message: formatAPIError(res.error),
+          });
+
+          return { error: res.error };
+        }
+
+        toggleNotification({
+          type: 'success',
+          title: formatMessage({
+            id: getTranslation('success.records.delete'),
+            defaultMessage: 'Successfully deleted.',
+          }),
+          message: '',
+        });
+
+        trackUsage('didBulkDeleteEntries');
+
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: 'danger',
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG),
+        });
+
+        trackUsage('didNotBulkDeleteEntries');
+
+        throw err;
+      }
+    },
+    [trackUsage, deleteManyDocuments, toggleNotification, formatMessage, formatAPIError]
+  );
+
   const [discardDocument] = useDiscardDocumentMutation();
   const discard: IUseDocumentActs['discard'] = React.useCallback(
     async ({ collectionType, model, documentId }) => {
@@ -386,6 +452,50 @@ const useDocumentActions: UseDocumentActions = () => {
     [trackUsage, unpublishDocument, toggleNotification, formatMessage, formatAPIError]
   );
 
+  const [unpublishManyDocuments] = useUnpublishManyDocumentsMutation();
+  const unpublishMany: IUseDocumentActs['unpublishMany'] = React.useCallback(
+    async ({ model, documentIds, params }) => {
+      try {
+        trackUsage('willBulkUnpublishEntries');
+
+        const res = await unpublishManyDocuments({
+          model,
+          documentIds,
+          params,
+        });
+
+        if ('error' in res) {
+          toggleNotification({ type: 'danger', message: formatAPIError(res.error) });
+
+          return { error: res.error };
+        }
+
+        trackUsage('didBulkUnpublishEntries');
+
+        toggleNotification({
+          type: 'success',
+          title: formatMessage({
+            id: getTranslation('success.records.unpublish'),
+            defaultMessage: 'Successfully unpublished.',
+          }),
+          message: '',
+        });
+
+        return res.data;
+      } catch (err) {
+        toggleNotification({
+          type: 'danger',
+          message: formatMessage(DEFAULT_UNEXPECTED_ERROR_MSG),
+        });
+
+        trackUsage('didNotBulkUnpublishEntries');
+
+        throw err;
+      }
+    },
+    [trackUsage, unpublishManyDocuments, toggleNotification, formatMessage, formatAPIError]
+  );
+
   const [createDocument] = useCreateDocumentMutation();
   const create: IUseDocumentActs['create'] = React.useCallback(
     async ({ model, params }, data, trackerProperty) => {
@@ -530,10 +640,12 @@ const useDocumentActions: UseDocumentActions = () => {
     clone,
     create,
     delete: _delete,
+    deleteMany,
     discard,
     getDocument,
     publish,
     unpublish,
+    unpublishMany,
     update,
   } satisfies IUseDocumentActs;
 };

packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/UID.tsx

@@ -272,6 +272,8 @@ const UIDInput = React.forwardRef<any, UIDInputProps>(
  * -----------------------------------------------------------------------------------------------*/
 
 const FieldActionWrapper = styled(Field.Action)`
+  width: 1.6rem;
+
   svg {
     height: 1.6rem;
     width: 1.6rem;