Merge pull request #16586 from strapi/bulk-publish/entries-status

[Bulk Publish] Show publish/unpublish button sbased on entries publishedAt status

packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js

@@ -3,9 +3,11 @@ import PropTypes from 'prop-types';
 import { Button, Dialog, DialogBody, DialogFooter, Flex, Typography } from '@strapi/design-system';
 import { Check, ExclamationMarkCircle, Trash } from '@strapi/icons';
 import { useIntl } from 'react-intl';
+import { useSelector } from 'react-redux';
 import { useTracking } from '@strapi/helper-plugin';
 import { getTrad } from '../../../utils';
 import InjectionZoneList from '../../InjectionZoneList';
+import { listViewDomain } from '../../../pages/ListView/selectors';
 
 const ConfirmBulkActionDialog = ({ onToggleDialog, isOpen, dialogBody, endAction }) => {
   const { formatMessage } = useIntl();
@@ -183,9 +185,18 @@ const BulkActionsBar = ({
 }) => {
   const { formatMessage } = useIntl();
   const { trackUsage } = useTracking();
+  const { data } = useSelector(listViewDomain());
+
   const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false);
   const [dialogToOpen, setDialogToOpen] = useState(null);
 
+  // Filters for Bulk actions
+  const selectedEntriesObjects = data.filter((entry) => selectedEntries.includes(entry.id));
+  const publishButtonIsShown =
+    showPublish && selectedEntriesObjects.some((entry) => !entry.publishedAt);
+  const unpublishButtonIsShown =
+    showPublish && selectedEntriesObjects.some((entry) => entry.publishedAt);
+
   const toggleDeleteModal = () => {
     if (dialogToOpen === 'delete') {
       setDialogToOpen(null);
@@ -232,20 +243,24 @@ const BulkActionsBar = ({
 
   return (
     <>
-      {showPublish && (
+      {publishButtonIsShown && (
         <>
           <Button variant="tertiary" onClick={togglePublishModal}>
             {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
           </Button>
-          <Button variant="tertiary" onClick={toggleUnpublishModal}>
-            {formatMessage({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' })}
-          </Button>
           <ConfirmDialogPublishAll
             isOpen={dialogToOpen === 'publish'}
             onToggleDialog={togglePublishModal}
             isConfirmButtonLoading={isConfirmButtonLoading}
             onConfirm={handleBulkPublish}
           />
+        </>
+      )}
+      {unpublishButtonIsShown && (
+        <>
+          <Button variant="tertiary" onClick={toggleUnpublishModal}>
+            {formatMessage({ id: 'app.utils.unpublish', defaultMessage: 'Unpublish' })}
+          </Button>
           <ConfirmDialogUnpublishAll
             isOpen={dialogToOpen === 'unpublish'}
             onToggleDialog={toggleUnpublishModal}

packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/tests/index.test.js

@@ -12,6 +12,15 @@ jest.mock('@strapi/helper-plugin', () => ({
   }),
 }));
 
+jest.mock('react-redux', () => ({
+  useSelector: () => ({
+    data: [
+      { id: 1, publishedAt: null },
+      { id: 2, publishedAt: '2023-01-01T10:10:10.408Z' },
+    ],
+  }),
+}));
+
 jest.mock('../../../../../shared/hooks', () => ({
   ...jest.requireActual('../../../../../shared/hooks'),
   useInjectionZone: () => [],
@@ -21,7 +30,7 @@ const user = userEvent.setup();
 
 describe('BulkActionsBar', () => {
   const requiredProps = {
-    selectedEntries: [],
+    selectedEntries: [1, 2],
     clearSelectedEntries: jest.fn(),
   };
 
@@ -82,7 +91,19 @@ describe('BulkActionsBar', () => {
       await user.click(screen.getByRole('button', { name: /confirm/i }));
     });
 
-    expect(mockConfirmDeleteAll).toHaveBeenCalledWith([]);
+    expect(mockConfirmDeleteAll).toHaveBeenCalledWith([1, 2]);
+  });
+
+  it('should not show publish button if selected entries are all published', () => {
+    setup({ showPublish: true, selectedEntries: [2] });
+
+    expect(screen.queryByRole('button', { name: /\bPublish\b/ })).not.toBeInTheDocument();
+  });
+
+  it('should not show unpublish button if selected entries are all unpublished', () => {
+    setup({ showPublish: true, selectedEntries: [1] });
+
+    expect(screen.queryByRole('button', { name: /\bUnpublish\b/ })).not.toBeInTheDocument();
   });
 
   it('should show publish modal if publish button is clicked', async () => {
@@ -96,7 +117,7 @@ describe('BulkActionsBar', () => {
       );
     });
 
-    expect(onConfirmPublishAll).toHaveBeenCalledWith([]);
+    expect(onConfirmPublishAll).toHaveBeenCalledWith([1, 2]);
   });
 
   it('should show unpublish modal if unpublish button is clicked', async () => {
@@ -110,6 +131,6 @@ describe('BulkActionsBar', () => {
       );
     });
 
-    expect(onConfirmUnpublishAll).toHaveBeenCalledWith([]);
+    expect(onConfirmUnpublishAll).toHaveBeenCalledWith([1, 2]);
   });
 });