From 41a69b07e28a904a352294ca183a4cd49f4d3f32 Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Wed, 3 May 2023 13:34:42 +0200 Subject: [PATCH 1/4] show publish/unpublish button based on entries publisedAt status --- .../DynamicTable/BulkActionsBar/index.js | 22 +++++++++++++--- .../BulkActionsBar/tests/index.test.js | 25 +++++++++++++++++-- 2 files changed, 41 insertions(+), 6 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js index 6f77009f1a..d613df51d7 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js @@ -3,7 +3,9 @@ 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 { listViewDomain } from '../../../pages/ListView/selectors'; import { getTrad } from '../../../utils'; import InjectionZoneList from '../../InjectionZoneList'; @@ -183,9 +185,17 @@ const BulkActionsBar = ({ }) => { const { formatMessage } = useIntl(); const { trackUsage } = useTracking(); + const { data } = useSelector(listViewDomain()); + const [isConfirmButtonLoading, setIsConfirmButtonLoading] = useState(false); const [dialogToOpen, setDialogToOpen] = useState(null); + const selectedEntriesObjects = data.filter((entry) => selectedEntries.includes(entry.id)); + const showPublishButton = + showPublish && selectedEntriesObjects.some((entry) => !entry.publishedAt); + const showUnpublishButton = + showPublish && selectedEntriesObjects.some((entry) => entry.publishedAt); + const toggleDeleteModal = () => { if (dialogToOpen === 'delete') { setDialogToOpen(null); @@ -232,20 +242,24 @@ const BulkActionsBar = ({ return ( <> - {showPublish && ( + {showPublishButton && ( <> - + + )} + {showUnpublishButton && ( + <> + ({ }), })); +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 () => { From a61b3cc902943822567cb97ca5b9bc1a6d058cdd Mon Sep 17 00:00:00 2001 From: Fernando Chavez Date: Wed, 3 May 2023 13:57:17 +0200 Subject: [PATCH 2/4] change some variables names on BulkACtionsBar --- .../components/DynamicTable/BulkActionsBar/index.js | 11 ++++++----- .../DynamicTable/BulkActionsBar/tests/index.test.js | 4 ++-- 2 files changed, 8 insertions(+), 7 deletions(-) diff --git a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js index d613df51d7..a5db5ff819 100644 --- a/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js +++ b/packages/core/admin/admin/src/content-manager/components/DynamicTable/BulkActionsBar/index.js @@ -5,9 +5,10 @@ import { Check, ExclamationMarkCircle, Trash } from '@strapi/icons'; import { useIntl } from 'react-intl'; import { useSelector } from 'react-redux'; import { useTracking } from '@strapi/helper-plugin'; -import { listViewDomain } from '../../../pages/ListView/selectors'; +import { useSelector } from 'react-redux'; import { getTrad } from '../../../utils'; import InjectionZoneList from '../../InjectionZoneList'; +import { listViewDomain } from '../../../pages/ListView/selectors'; const ConfirmBulkActionDialog = ({ onToggleDialog, isOpen, dialogBody, endAction }) => { const { formatMessage } = useIntl(); @@ -191,9 +192,9 @@ const BulkActionsBar = ({ const [dialogToOpen, setDialogToOpen] = useState(null); const selectedEntriesObjects = data.filter((entry) => selectedEntries.includes(entry.id)); - const showPublishButton = + const publishButtonIsShown = showPublish && selectedEntriesObjects.some((entry) => !entry.publishedAt); - const showUnpublishButton = + const unpublishButtonIsShown = showPublish && selectedEntriesObjects.some((entry) => entry.publishedAt); const toggleDeleteModal = () => { @@ -242,7 +243,7 @@ const BulkActionsBar = ({ return ( <> - {showPublishButton && ( + {publishButtonIsShown && ( <>