@strapi/admin 4.10.4 → 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';

package/admin/src/content-manager/pages/ListView/index.js

@@ -21,6 +21,7 @@ import {
   useTracking,
   Link,
   useAPIErrorHandler,
+  getYupInnerErrors,
 } from '@strapi/helper-plugin';
 
 import {
@@ -35,6 +36,7 @@ import {
 } from '@strapi/design-system';
 
 import { ArrowLeft, Plus, Cog } from '@strapi/icons';
+import { useMutation } from 'react-query';
 
 import DynamicTable from '../../components/DynamicTable';
 import AttributeFilter from '../../components/AttributeFilter';
@@ -42,7 +44,7 @@ import { InjectionZone } from '../../../shared/components';
 
 import permissions from '../../../permissions';
 
-import { getRequestUrl, getTrad } from '../../utils';
+import { createYupSchema, getRequestUrl, getTrad } from '../../utils';
 
 import FieldPicker from './FieldPicker';
 import PaginationFooter from './PaginationFooter';
@@ -64,6 +66,7 @@ function ListView({
   canCreate,
   canDelete,
   canRead,
+  canPublish,
   data,
   getData,
   getDataSucceeded,
@@ -100,6 +103,50 @@ function ListView({
   const fetchClient = useFetchClient();
   const { post, del } = fetchClient;
 
+  const bulkPublishMutation = useMutation(
+    (data) =>
+      post(`/content-manager/collection-types/${contentType.uid}/actions/bulkPublish`, data),
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: { id: 'content-manager.success.record.publish', defaultMessage: 'Published' },
+        });
+
+        fetchData(`/content-manager/collection-types/${slug}${params}`);
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      },
+    }
+  );
+  const bulkUnpublishMutation = useMutation(
+    (data) =>
+      post(`/content-manager/collection-types/${contentType.uid}/actions/bulkUnpublish`, data),
+    {
+      onSuccess() {
+        toggleNotification({
+          type: 'success',
+          message: {
+            id: 'content-manager.success.record.unpublish',
+            defaultMessage: 'Unpublished',
+          },
+        });
+
+        fetchData(`/content-manager/collection-types/${slug}${params}`);
+      },
+      onError(error) {
+        toggleNotification({
+          type: 'warning',
+          message: formatAPIError(error),
+        });
+      },
+    }
+  );
+
   // FIXME
   // Using a ref to avoid requests being fired multiple times on slug on change
   // We need it because the hook as mulitple dependencies so it may run before the permissions have checked
@@ -200,6 +247,70 @@ function ListView({
     [slug, params, fetchData, toggleNotification, formatAPIError, del]
   );
 
+  /**
+   * @param {number[]} selectedEntries - Array of ids to publish
+   * @returns {{validIds: number[], errors: Object.<number, string>}} - Returns an object with the valid ids and the errors
+   */
+  const validateEntriesToPublish = async (selectedEntries) => {
+    const validations = { validIds: [], errors: {} };
+    // Create the validation schema based on the contentType
+    const schema = createYupSchema(
+      contentType,
+      { components: layout.components },
+      { isDraft: false }
+    );
+    // Get the selected entries
+    const entries = data.filter((entry) => {
+      return selectedEntries.includes(entry.id);
+    });
+    // Validate each entry and map the unresolved promises
+    const validationPromises = entries.map((entry) =>
+      schema.validate(entry, { abortEarly: false })
+    );
+    // Resolve all the promises in one go
+    const resolvedPromises = await Promise.allSettled(validationPromises);
+    // Set the validations
+    resolvedPromises.forEach((promise) => {
+      if (promise.status === 'rejected') {
+        const entityId = promise.reason.value.id;
+        validations.errors[entityId] = getYupInnerErrors(promise.reason);
+      }
+
+      if (promise.status === 'fulfilled') {
+        validations.validIds.push(promise.value.id);
+      }
+    });
+
+    return validations;
+  };
+
+  const handleConfirmPublishAllData = async (selectedEntries) => {
+    const validations = await validateEntriesToPublish(selectedEntries);
+
+    if (Object.values(validations.errors).length) {
+      toggleNotification({
+        type: 'warning',
+        title: {
+          id: 'content-manager.listView.validation.errors.title',
+          defaultMessage: 'Action required',
+        },
+        message: {
+          id: 'content-manager.listView.validation.errors.message',
+          defaultMessage:
+            'Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)',
+        },
+      });
+
+      throw new Error('Validation error');
+    }
+
+    return bulkPublishMutation.mutateAsync({ ids: selectedEntries });
+  };
+
+  const handleConfirmUnpublishAllData = (selectedEntries) => {
+    return bulkUnpublishMutation.mutateAsync({ ids: selectedEntries });
+  };
+
   useEffect(() => {
     const CancelToken = axios.CancelToken;
     const source = CancelToken.source();
@@ -331,9 +442,12 @@ function ListView({
             <DynamicTable
               canCreate={canCreate}
               canDelete={canDelete}
+              canPublish={canPublish}
               contentTypeName={headerLayoutTitle}
-              onConfirmDeleteAll={handleConfirmDeleteAllData}
               onConfirmDelete={handleConfirmDeleteData}
+              onConfirmDeleteAll={handleConfirmDeleteAllData}
+              onConfirmPublishAll={handleConfirmPublishAllData}
+              onConfirmUnpublishAll={handleConfirmUnpublishAllData}
               isBulkable={isBulkable}
               isLoading={isLoading}
               // FIXME: remove the layout props drilling
@@ -355,10 +469,12 @@ ListView.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
   canRead: PropTypes.bool.isRequired,
+  canPublish: PropTypes.bool.isRequired,
   data: PropTypes.array.isRequired,
   layout: PropTypes.exact({
     components: PropTypes.object.isRequired,
     contentType: PropTypes.shape({
+      uid: PropTypes.string.isRequired,
       attributes: PropTypes.object.isRequired,
       metadatas: PropTypes.object.isRequired,
       info: PropTypes.shape({ displayName: PropTypes.string.isRequired }).isRequired,

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

@@ -18,3 +18,5 @@ export { default as mergeMetasWithSchema } from './mergeMetasWithSchema';
 
 export { default as removeKeyInObject } from './removeKeyInObject';
 export { default as removePasswordFieldsFromData } from './removePasswordFieldsFromData';
+
+export { default as createYupSchema } from './schema';

package/admin/src/content-manager/{components/EditViewDataManagerProvider/utils → utils}/schema.js

@@ -7,7 +7,7 @@ import toNumber from 'lodash/toNumber';
 import * as yup from 'yup';
 import { translatedErrors as errorsTrads } from '@strapi/helper-plugin';
 
-import isFieldTypeNumber from '../../../utils/isFieldTypeNumber';
+import isFieldTypeNumber from './isFieldTypeNumber';
 
 yup.addMethod(yup.mixed, 'defined', function () {
   return this.test('defined', errorsTrads.required, (value) => value !== undefined);

package/admin/src/injectionZones.js

@@ -13,7 +13,12 @@ const injectionZones = {
   },
   contentManager: {
     editView: { informations: [], 'right-links': [] },
-    listView: { actions: [], deleteModalAdditionalInfos: [] },
+    listView: {
+      actions: [],
+      deleteModalAdditionalInfos: [],
+      publishModalAdditionalInfos: [],
+      unpublishModalAdditionalInfos: [],
+    },
   },
 };
 

package/admin/src/translations/en.json

@@ -793,7 +793,9 @@
   "content-manager.plugin.description.long": "Quick way to see, edit and delete the data in your database.",
   "content-manager.plugin.description.short": "Quick way to see, edit and delete the data in your database.",
   "content-manager.popUpWarning.bodyMessage.contentType.delete": "Are you sure to delete Content-Type?",
-  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure to delete all Content-Types?",
+  "content-manager.popUpWarning.bodyMessage.contentType.delete.all": "Are you sure you want to delete these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.publish.all": "Are you sure you want to publish these entries?",
+  "content-manager.popUpWarning.bodyMessage.contentType.unpublish.all": "Are you sure you want to unpublish these entries?",
   "content-manager.popUpWarning.warning.has-draft-relations.title": "Confirmation",
   "content-manager.popUpWarning.warning.publish-question": "Do you still want to publish?",
   "content-manager.popUpWarning.warning.unpublish": "If you don't publish this content, it will automatically turn into a Draft.",
@@ -816,6 +818,8 @@
   "content-manager.success.record.save": "Saved",
   "content-manager.success.record.unpublish": "Unpublished",
   "content-manager.utils.data-loaded": "The {number, plural, =1 {entry has} other {entries have}} successfully been loaded",
+  "content-manager.listView.validation.errors.title": "Action required",
+  "content-manager.listView.validation.errors.message": "Please make sure all fields are valid before publishing (required field, min/max character limit, etc.)",
   "dark": "Dark",
   "form.button.continue": "Continue",
   "form.button.done": "Done",