@strapi/admin 4.10.2 → 4.11.0-alpha.0

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

@@ -0,0 +1,307 @@
+import React, { useState } from 'react';
+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();
+
+  return (
+    <Dialog
+      onClose={onToggleDialog}
+      title={formatMessage({
+        id: 'app.components.ConfirmDialog.title',
+        defaultMessage: 'Confirmation',
+      })}
+      labelledBy="confirmation"
+      describedBy="confirm-description"
+      isOpen={isOpen}
+    >
+      <DialogBody icon={<ExclamationMarkCircle />}>
+        <Flex direction="column" alignItems="stretch" gap={2}>
+          {dialogBody}
+        </Flex>
+      </DialogBody>
+      <DialogFooter
+        startAction={
+          <Button onClick={onToggleDialog} variant="tertiary">
+            {formatMessage({
+              id: 'app.components.Button.cancel',
+              defaultMessage: 'Cancel',
+            })}
+          </Button>
+        }
+        endAction={endAction}
+      />
+    </Dialog>
+  );
+};
+
+ConfirmBulkActionDialog.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+  dialogBody: PropTypes.node.isRequired,
+  endAction: PropTypes.node.isRequired,
+};
+
+const confirmDialogsPropTypes = {
+  isConfirmButtonLoading: PropTypes.bool.isRequired,
+  isOpen: PropTypes.bool.isRequired,
+  onConfirm: PropTypes.func.isRequired,
+  onToggleDialog: PropTypes.func.isRequired,
+};
+
+const ConfirmDialogPublishAll = ({ isOpen, onToggleDialog, isConfirmButtonLoading, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.publish.all'),
+              defaultMessage: 'Are you sure you want to publish these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.publishModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="secondary"
+          startIcon={<Check />}
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.utils.publish',
+            defaultMessage: 'Publish',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogPublishAll.propTypes = confirmDialogsPropTypes;
+
+const ConfirmDialogUnpublishAll = ({
+  isOpen,
+  onToggleDialog,
+  isConfirmButtonLoading,
+  onConfirm,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.unpublish.all'),
+              defaultMessage: 'Are you sure you want to unpublish these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.unpublishModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="secondary"
+          startIcon={<Check />}
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.utils.unpublish',
+            defaultMessage: 'Unpublish',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogUnpublishAll.propTypes = confirmDialogsPropTypes;
+
+const ConfirmDialogDeleteAll = ({ isOpen, onToggleDialog, isConfirmButtonLoading, onConfirm }) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <ConfirmBulkActionDialog
+      isOpen={isOpen}
+      onToggleDialog={onToggleDialog}
+      dialogBody={
+        <>
+          <Typography id="confirm-description" textAlign="center">
+            {formatMessage({
+              id: getTrad('popUpWarning.bodyMessage.contentType.delete.all'),
+              defaultMessage: 'Are you sure you want to delete these entries?',
+            })}
+          </Typography>
+          <InjectionZoneList area="contentManager.listView.deleteModalAdditionalInfos" />
+        </>
+      }
+      endAction={
+        <Button
+          onClick={onConfirm}
+          variant="danger-light"
+          startIcon={<Trash />}
+          id="confirm-delete"
+          loading={isConfirmButtonLoading}
+        >
+          {formatMessage({
+            id: 'app.components.Button.confirm',
+            defaultMessage: 'Confirm',
+          })}
+        </Button>
+      }
+    />
+  );
+};
+
+ConfirmDialogDeleteAll.propTypes = confirmDialogsPropTypes;
+
+const BulkActionsBar = ({
+  showPublish,
+  showDelete,
+  onConfirmDeleteAll,
+  onConfirmPublishAll,
+  onConfirmUnpublishAll,
+  selectedEntries,
+  clearSelectedEntries,
+}) => {
+  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);
+    } else {
+      setDialogToOpen('delete');
+      trackUsage('willBulkDeleteEntries');
+    }
+  };
+
+  const togglePublishModal = () => {
+    if (dialogToOpen === 'publish') {
+      setDialogToOpen(null);
+    } else {
+      setDialogToOpen('publish');
+      trackUsage('willBulkPublishEntries');
+    }
+  };
+
+  const toggleUnpublishModal = () => {
+    if (dialogToOpen === 'unpublish') {
+      setDialogToOpen(null);
+    } else {
+      setDialogToOpen('unpublish');
+      trackUsage('willBulkUnpublishEntries');
+    }
+  };
+
+  const handleBulkAction = async (confirmAction, toggleModal) => {
+    try {
+      setIsConfirmButtonLoading(true);
+      await confirmAction(selectedEntries);
+      setIsConfirmButtonLoading(false);
+      toggleModal();
+      clearSelectedEntries();
+    } catch (error) {
+      setIsConfirmButtonLoading(false);
+      toggleModal();
+    }
+  };
+
+  const handleBulkDelete = () => handleBulkAction(onConfirmDeleteAll, toggleDeleteModal);
+  const handleBulkPublish = () => handleBulkAction(onConfirmPublishAll, togglePublishModal);
+  const handleBulkUnpublish = () => handleBulkAction(onConfirmUnpublishAll, toggleUnpublishModal);
+
+  return (
+    <>
+      {publishButtonIsShown && (
+        <>
+          <Button variant="tertiary" onClick={togglePublishModal}>
+            {formatMessage({ id: 'app.utils.publish', defaultMessage: 'Publish' })}
+          </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}
+            isConfirmButtonLoading={isConfirmButtonLoading}
+            onConfirm={handleBulkUnpublish}
+          />
+        </>
+      )}
+      {showDelete && (
+        <>
+          <Button variant="danger-light" onClick={toggleDeleteModal}>
+            {formatMessage({ id: 'global.delete', defaultMessage: 'Delete' })}
+          </Button>
+          <ConfirmDialogDeleteAll
+            isOpen={dialogToOpen === 'delete'}
+            onToggleDialog={toggleDeleteModal}
+            isConfirmButtonLoading={isConfirmButtonLoading}
+            onConfirm={handleBulkDelete}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+BulkActionsBar.defaultProps = {
+  showPublish: false,
+  showDelete: false,
+  onConfirmDeleteAll() {},
+  onConfirmPublishAll() {},
+  onConfirmUnpublishAll() {},
+};
+
+BulkActionsBar.propTypes = {
+  showPublish: PropTypes.bool,
+  showDelete: PropTypes.bool,
+  onConfirmDeleteAll: PropTypes.func,
+  onConfirmPublishAll: PropTypes.func,
+  onConfirmUnpublishAll: PropTypes.func,
+  selectedEntries: PropTypes.array.isRequired,
+  clearSelectedEntries: PropTypes.func.isRequired,
+};
+
+export default BulkActionsBar;

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -9,19 +9,22 @@ import { INJECT_COLUMN_IN_TABLE } from '../../../exposedHooks';
 import { selectDisplayedHeaders } from '../../pages/ListView/selectors';
 import { getTrad } from '../../utils';
 import TableRows from './TableRows';
-import ConfirmDialogDeleteAll from './ConfirmDialogDeleteAll';
 import ConfirmDialogDelete from './ConfirmDialogDelete';
 import { PublicationState } from './CellContent/PublicationState/PublicationState';
+import BulkActionsBar from './BulkActionsBar';
 
 const DynamicTable = ({
   canCreate,
   canDelete,
+  canPublish,
   contentTypeName,
   action,
   isBulkable,
   isLoading,
   onConfirmDelete,
   onConfirmDeleteAll,
+  onConfirmPublishAll,
+  onConfirmUnpublishAll,
   layout,
   rows,
 }) => {
@@ -89,17 +92,27 @@ const DynamicTable = ({
 
   return (
     <Table
-      components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
+      components={{ ConfirmDialogDelete }}
       contentType={contentTypeName}
       action={action}
       isLoading={isLoading}
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
-      onConfirmDeleteAll={onConfirmDeleteAll}
       onOpenDeleteAllModalTrackedEvent="willBulkDeleteEntries"
       rows={rows}
       withBulkActions
-      withMainAction={canDelete && isBulkable}
+      withMainAction={(canDelete || canPublish) && isBulkable}
+      renderBulkActionsBar={({ selectedEntries, clearSelectedEntries }) => (
+        <BulkActionsBar
+          showPublish={canPublish && hasDraftAndPublish}
+          showDelete={canDelete}
+          onConfirmDeleteAll={onConfirmDeleteAll}
+          onConfirmPublishAll={onConfirmPublishAll}
+          onConfirmUnpublishAll={onConfirmUnpublishAll}
+          selectedEntries={selectedEntries}
+          clearSelectedEntries={clearSelectedEntries}
+        />
+      )}
     >
       <TableRows
         canCreate={canCreate}
@@ -121,6 +134,7 @@ DynamicTable.defaultProps = {
 DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
+  canPublish: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
   action: PropTypes.node,
   isBulkable: PropTypes.bool.isRequired,
@@ -139,6 +153,8 @@ DynamicTable.propTypes = {
   }).isRequired,
   onConfirmDelete: PropTypes.func.isRequired,
   onConfirmDeleteAll: PropTypes.func.isRequired,
+  onConfirmPublishAll: PropTypes.func.isRequired,
+  onConfirmUnpublishAll: PropTypes.func.isRequired,
   rows: PropTypes.array.isRequired,
 };
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/index.js

@@ -21,12 +21,13 @@ import {
   getAPIInnerErrors,
 } from '@strapi/helper-plugin';
 
-import { getTrad } from '../../utils';
+import { createYupSchema, getTrad } from '../../utils';
 
 import selectCrudReducer from '../../sharedReducers/crudReducer/selectors';
 
 import reducer, { initialState } from './reducer';
-import { cleanData, createYupSchema } from './utils';
+import { cleanData } from './utils';
+
 import { clearSetModifiedDataOnly } from '../../sharedReducers/crudReducer/actions';
 import { usePrev } from '../../hooks';
 

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/index.js

@@ -1,4 +1,3 @@
 export { default as moveFields } from './moveFields';
 export { default as cleanData } from './cleanData';
-export { default as createYupSchema } from './schema';
 export { findAllAndReplace } from './findAllAndReplace';