Merge pull request #13610 from strapi/ML-folder/remove-form-notifications

[ML Folder] Remove error notifications + trad fixes

packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js

@@ -15,7 +15,7 @@ export const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset })
         <Typography variant="pi" fontWeight="bold" textColor="neutral800">
           {formatMessage(
             {
-              id: getTrad('list.assets.selected'),
+              id: getTrad('list.assets.to-upload'),
               defaultMessage:
                 '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',
             },

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

@@ -110,12 +110,8 @@ export const BulkMoveDialog = ({ onClose, selected }) => {
                       name="destination"
                       menuPortalTarget={document.querySelector('body')}
                       inputId="folder-destination"
-                      {...(errors.destination
+                      error={errors?.destination}
-                        ? {
+                      ariaErrorMessage="destination-error"
-                            'aria-errormessage': 'folder-destination-error',
-                            'aria-invalid': true,
-                          }
-                        : {})}
                     />
 
                     {errors.destination && (

packages/core/upload/admin/src/components/EditAssetDialog/index.js

@@ -271,12 +271,8 @@ export const EditAssetDialog = ({
                         menuPortalTarget={document.querySelector('body')}
                         inputId="asset-folder"
                         disabled={formDisabled}
-                        {...(errors.parent
+                        error={errors?.parent}
-                          ? {
+                        ariaErrorMessage="folder-parent-error"
-                              'aria-errormessage': 'folder-parent-error',
-                              'aria-invalid': true,
-                            }
-                          : {})}
                       />
                     </Stack>
                   </Stack>

packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js

@@ -78,7 +78,7 @@ export const PendingAssetStep = ({
               <Typography variant="pi" fontWeight="bold" textColor="neutral800">
                 {formatMessage(
                   {
-                    id: getTrad('list.assets.selected'),
+                    id: getTrad('list.assets.to-upload'),
                     defaultMessage:
                       '{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload',
                   },

packages/core/upload/admin/src/constants.js

@@ -12,18 +12,27 @@ export const AssetSource = {
   Computer: 'computer',
 };
 
+const ParentFolderDefinition = PropTypes.shape({
+  id: PropTypes.number.isRequired,
+  createdAt: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  updatedAt: PropTypes.string.isRequired,
+  pathId: PropTypes.number.isRequired,
+  path: PropTypes.string.isRequired,
+});
+
 export const FolderDefinition = PropTypes.shape({
   id: PropTypes.number.isRequired,
   children: PropTypes.shape({
     count: PropTypes.number.isRequired,
-  }).isRequired,
+  }),
   createdAt: PropTypes.string.isRequired,
   createdBy: PropTypes.shape(),
   files: PropTypes.shape({
     count: PropTypes.number.isRequired,
-  }).isRequired,
+  }),
   name: PropTypes.string.isRequired,
-  parent: PropTypes.number,
+  parent: PropTypes.oneOf([ParentFolderDefinition, PropTypes.number]),
   updatedAt: PropTypes.string.isRequired,
   updatedBy: PropTypes.shape(),
   pathId: PropTypes.number.isRequired,

packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js

@@ -177,40 +177,4 @@ describe('useEditFolder', () => {
       })
     );
   });
-
-  test('calls toggleNotification in case of an error', async () => {
-    const originalConsoleError = console.error;
-    console.error = jest.fn();
-
-    axiosInstance.put.mockRejectedValue({ message: 'err-test' });
-
-    const toggleNotification = useNotification();
-    const {
-      result: { current },
-      waitFor,
-    } = await setup();
-    const { editFolder } = current;
-
-    try {
-      await act(async () => {
-        await editFolder(
-          {
-            name: FOLDER_EDIT_FIXTURE.name,
-            parent: FOLDER_EDIT_FIXTURE.parent,
-          },
-          FOLDER_EDIT_FIXTURE.id
-        );
-      });
-    } catch (err) {
-      // ...
-    }
-
-    await waitFor(() =>
-      expect(toggleNotification).toHaveBeenCalledWith(
-        expect.objectContaining({ message: 'err-test' })
-      )
-    );
-
-    console.error = originalConsoleError;
-  });
 });

packages/core/upload/admin/src/hooks/useBulkMove.js

@@ -49,9 +49,6 @@ export const useBulkMove = () => {
         },
       });
     },
-    onError: error => {
-      toggleNotification({ type: 'warning', message: error.message });
-    },
   });
 
   const move = (destinationFolderId, filesAndFolders) =>

packages/core/upload/admin/src/hooks/useEditFolder.js

@@ -1,5 +1,4 @@
 import { useMutation, useQueryClient } from 'react-query';
-import { useNotification } from '@strapi/helper-plugin';
 
 import pluginId from '../pluginId';
 import { axiosInstance, getRequestUrl } from '../utils';
@@ -13,7 +12,6 @@ const editFolderRequest = ({ attrs, id }) => {
 };
 
 export const useEditFolder = () => {
-  const toggleNotification = useNotification();
   const queryClient = useQueryClient();
 
   const mutation = useMutation((...args) => editFolderRequest(...args), {
@@ -21,9 +19,6 @@ export const useEditFolder = () => {
       queryClient.refetchQueries([pluginId, 'folders'], { active: true });
       queryClient.refetchQueries([pluginId, 'folder', 'structure'], { active: true });
     },
-    onError: reason => {
-      toggleNotification({ type: 'warning', message: reason.message });
-    },
   });
 
   const editFolder = (attrs, id) => mutation.mutateAsync({ attrs, id });

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

@@ -87,7 +87,7 @@ Header.defaultProps = {
 Header.propTypes = {
   assetCount: PropTypes.number.isRequired,
   canCreate: PropTypes.bool.isRequired,
-  folder: PropTypes.shape(FolderDefinition),
+  folder: FolderDefinition,
   folderCount: PropTypes.number.isRequired,
   onToggleEditFolderDialog: PropTypes.func.isRequired,
   onToggleUploadAssetDialog: PropTypes.func.isRequired,

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

@@ -258,7 +258,7 @@ describe('Media library homepage', () => {
       it('shows the create button if the user has create permissions', () => {
         renderML();
 
-        expect(screen.getByText('header.actions.add-folder')).toBeInTheDocument();
+        expect(screen.getByText('Add new folder')).toBeInTheDocument();
       });
 
       it('hides the create button if the user does not have create permissions', () => {
@@ -269,7 +269,7 @@ describe('Media library homepage', () => {
 
         renderML();
 
-        expect(screen.queryByText('header.actions.add-folder')).not.toBeInTheDocument();
+        expect(screen.queryByText('Add new folder')).not.toBeInTheDocument();
       });
     });
   });

packages/core/upload/admin/src/translations/en.json

@@ -21,6 +21,7 @@
   "form.upload-url.error.url.invalid": "One URL is invalid",
   "form.upload-url.error.url.invalids": "{number} URLs are invalids",
   "header.actions.add-assets": "Add new assets",
+  "header.actions.add-folder": "Add new folder",
   "header.actions.add-assets.folder": "folder",
   "header.actions.upload-assets": "Upload assets",
   "header.actions.upload-new-asset": "Upload new asset",
@@ -46,8 +47,9 @@
   "list.assets.loading-asset": "Loading the preview for the media: {path}",
   "list.assets.not-supported-content": "No preview available",
   "list.assets.preview-asset": "Preview for the video at path {path}",
-  "list.assets.selected": "{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload",
+  "list.assets.selected": "{numberFolders, plural, one {1 folder} other {# folders}} - {numberAssets, plural, one {1 asset} other {# assets}}",
   "list.assets.type-not-allowed": "This type of file is not allowed.",
+  "list.assets.to-upload": "{number, plural, =0 {No asset} one {1 asset} other {# assets}} ready to upload",
   "list.folder.edit": "Edit folder",
   "list.folder.subtitle": "{folderCount, plural, =0 {# folder} one {# folder} other {# folders}}, {filesCount, plural, =0 {# asset} one {# asset} other {# assets}}",
   "list.folders.title": "Folders",