BulkMoveDialog: add initial error handling

packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js

@@ -20,7 +20,7 @@ import { getTrad } from '../../utils';
 import SelectTree from '../SelectTree';
 import { useFolderStructure } from '../../hooks/useFolderStructure';
 
-export const BulkMoveDialog = ({ onClose }) => {
+export const BulkMoveDialog = ({ onClose, errors }) => {
   const submitButtonRef = useRef(null);
   const { formatMessage } = useIntl();
   const { data: folderStructure, isLoading } = useFolderStructure();
@@ -48,7 +48,12 @@ export const BulkMoveDialog = ({ onClose }) => {
       </ModalHeader>
 
       <ModalBody>
-        <Formik validateOnChange={false} onSubmit={handleSubmit} initialValues={initialFormData}>
+        <Formik
+          validateOnChange={false}
+          onSubmit={handleSubmit}
+          initialValues={initialFormData}
+          initialErrors={errors}
+        >
           {({ values, errors, setFieldValue }) => (
             <Form noValidate>
               <Grid gap={4}>
@@ -118,8 +123,13 @@ export const BulkMoveDialog = ({ onClose }) => {
   );
 };
 
-BulkMoveDialog.defaultProps = {};
+BulkMoveDialog.defaultProps = {
+  errors: null,
+};
 
 BulkMoveDialog.propTypes = {
+  errors: PropTypes.shape({
+    parent: PropTypes.string.isRequired,
+  }),
   onClose: PropTypes.func.isRequired,
 };

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -29,7 +29,6 @@ import { getTrad } from '../../utils';
 import { PaginationFooter } from '../../components/PaginationFooter';
 import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions';
 import { EmptyAssets } from '../../components/EmptyAssets';
-import { useFolderStructure } from '../../hooks/useFolderStructure';
 import { BulkActions } from './components/BulkActions';
 import { Filters } from './components/Filters';
 import { Header } from './components/Header';

packages/core/upload/admin/src/pages/App/components/BulkMoveButton.js

@@ -1,16 +1,20 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
+import isEmpty from 'lodash/isEmpty';
 import { useIntl } from 'react-intl';
 import { Button } from '@strapi/design-system/Button';
 import Folder from '@strapi/icons/Folder';
+import { getAPIInnerErrors } from '@strapi/helper-plugin';
 
 import { BulkMoveDialog } from '../../../components/BulkMoveDialog';
 import { AssetDefinition, FolderDefinition } from '../../../constants';
 import { useBulkMove } from '../../../hooks/useBulkMove';
+import { getTrad } from '../../../utils';
 
 export const BulkMoveButton = ({ selected, onSuccess }) => {
   const { formatMessage } = useIntl();
   const [showConfirmDialog, setShowConfirmDialog] = useState(false);
+  const [dialogErrors, setDialogErrors] = useState(null);
   const { move } = useBulkMove();
 
   const handleConfirmMove = async ({ moved, destinationFolderId } = {}) => {
@@ -23,12 +27,23 @@ export const BulkMoveButton = ({ selected, onSuccess }) => {
       setShowConfirmDialog(false);
       // eslint-ignore-next-line no-empty
     } catch (error) {
-      // TODO:
-      // - keep dialog open
-      // - show error message ?
+      const errors = getAPIInnerErrors(error, { getTrad });
+      const formikErrors = Object.entries(errors).reduce((acc, [key, error]) => {
+        acc[key] = error.defaultMessage;
+
+        return acc;
+      }, {});
+
+      if (!isEmpty(formikErrors)) {
+        setDialogErrors(formikErrors);
+      }
     }
   };
 
+  useEffect(() => {
+    setShowConfirmDialog(!!dialogErrors);
+  }, [dialogErrors, setShowConfirmDialog]);
+
   return (
     <>
       <Button
@@ -40,7 +55,7 @@ export const BulkMoveButton = ({ selected, onSuccess }) => {
         {formatMessage({ id: 'global.move', defaultMessage: 'Move' })}
       </Button>
 
-      {showConfirmDialog && <BulkMoveDialog onClose={handleConfirmMove} />}
+      {showConfirmDialog && <BulkMoveDialog onClose={handleConfirmMove} errors={dialogErrors} />}
     </>
   );
 };