From 7dc014a71b1df4705150bd89ea4a36e1d9bdceb8 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 21 Jun 2022 10:09:00 +0200 Subject: [PATCH 1/5] fixed form notifications --- .../admin/src/components/BulkMoveDialog/BulkMoveDialog.js | 8 ++------ .../upload/admin/src/components/EditAssetDialog/index.js | 8 ++------ packages/core/upload/admin/src/hooks/useBulkMove.js | 3 --- packages/core/upload/admin/src/hooks/useEditFolder.js | 5 ----- 4 files changed, 4 insertions(+), 20 deletions(-) diff --git a/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js b/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js index 6f612fbbbd..cad1d2fb68 100644 --- a/packages/core/upload/admin/src/components/BulkMoveDialog/BulkMoveDialog.js +++ b/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 - ? { - 'aria-errormessage': 'folder-destination-error', - 'aria-invalid': true, - } - : {})} + error={errors?.destination} + ariaErrorMessage="destination-error" /> {errors.destination && ( diff --git a/packages/core/upload/admin/src/components/EditAssetDialog/index.js b/packages/core/upload/admin/src/components/EditAssetDialog/index.js index 3dfbe94dc6..c499af0bec 100644 --- a/packages/core/upload/admin/src/components/EditAssetDialog/index.js +++ b/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 - ? { - 'aria-errormessage': 'folder-parent-error', - 'aria-invalid': true, - } - : {})} + error={errors?.parent} + ariaErrorMessage="folder-parent-error" /> diff --git a/packages/core/upload/admin/src/hooks/useBulkMove.js b/packages/core/upload/admin/src/hooks/useBulkMove.js index 6d15d42589..0ee60610d6 100644 --- a/packages/core/upload/admin/src/hooks/useBulkMove.js +++ b/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) => diff --git a/packages/core/upload/admin/src/hooks/useEditFolder.js b/packages/core/upload/admin/src/hooks/useEditFolder.js index c5f8d705b4..70769ef102 100644 --- a/packages/core/upload/admin/src/hooks/useEditFolder.js +++ b/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 }); From e198b0ef4ddf5a094f4cdcf905a41508a6e9e1d1 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 21 Jun 2022 11:29:05 +0200 Subject: [PATCH 2/5] translation fixes --- .../src/components/AssetDialog/SelectedStep/index.js | 2 +- .../PendingAssetStep/PendingAssetStep.js | 2 +- .../upload/admin/src/pages/App/components/Header.js | 11 +++++++++-- packages/core/upload/admin/src/translations/en.json | 4 +++- 4 files changed, 14 insertions(+), 5 deletions(-) diff --git a/packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js b/packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js index 75065a75e7..092bfcc8eb 100644 --- a/packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js +++ b/packages/core/upload/admin/src/components/AssetDialog/SelectedStep/index.js @@ -15,7 +15,7 @@ export const SelectedStep = ({ selectedAssets, onSelectAsset, onReorderAsset }) {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', }, diff --git a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js index bf7ece6439..9ac0efef07 100644 --- a/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js +++ b/packages/core/upload/admin/src/components/UploadAssetDialog/PendingAssetStep/PendingAssetStep.js @@ -78,7 +78,7 @@ export const PendingAssetStep = ({ {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', }, diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js index b435d07484..9fbb7187bc 100644 --- a/packages/core/upload/admin/src/pages/App/components/Header.js +++ b/packages/core/upload/admin/src/pages/App/components/Header.js @@ -11,7 +11,6 @@ import { Link } from '@strapi/design-system/Link'; import ArrowLeft from '@strapi/icons/ArrowLeft'; import Plus from '@strapi/icons/Plus'; import { getTrad } from '../../../utils'; -import { FolderDefinition } from '../../../constants'; export const Header = ({ canCreate, @@ -87,7 +86,15 @@ Header.defaultProps = { Header.propTypes = { assetCount: PropTypes.number.isRequired, canCreate: PropTypes.bool.isRequired, - folder: PropTypes.shape(FolderDefinition), + folder: PropTypes.shape({ + id: PropTypes.number.isRequired, + createdAt: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + parent: PropTypes.number, + updatedAt: PropTypes.string.isRequired, + pathId: PropTypes.number.isRequired, + path: PropTypes.string.isRequired, + }), folderCount: PropTypes.number.isRequired, onToggleEditFolderDialog: PropTypes.func.isRequired, onToggleUploadAssetDialog: PropTypes.func.isRequired, diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json index 45a3d212f0..bd9304e8aa 100644 --- a/packages/core/upload/admin/src/translations/en.json +++ b/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", From e8b59315ae63e8c0f5152d4a5f21d1a79980bcf7 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Tue, 21 Jun 2022 18:00:31 +0200 Subject: [PATCH 3/5] updated tests --- .../src/hooks/tests/useEditFolder.test.js | 36 ------------------- .../src/pages/App/tests/MediaLibrary.test.js | 4 +-- 2 files changed, 2 insertions(+), 38 deletions(-) diff --git a/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js b/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js index 6e9d1fe071..cb032ec691 100644 --- a/packages/core/upload/admin/src/hooks/tests/useEditFolder.test.js +++ b/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; - }); }); diff --git a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js b/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js index 9d4c960962..af2c0fc842 100644 --- a/packages/core/upload/admin/src/pages/App/tests/MediaLibrary.test.js +++ b/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(); }); }); }); From 8b54f5c74f8bc4e43091884ffddd809bf27d1df1 Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 22 Jun 2022 11:05:48 +0200 Subject: [PATCH 4/5] added FolderParentDefinition constant --- packages/core/upload/admin/src/constants.js | 11 +++++++++++ .../upload/admin/src/pages/App/components/Header.js | 11 ++--------- 2 files changed, 13 insertions(+), 9 deletions(-) diff --git a/packages/core/upload/admin/src/constants.js b/packages/core/upload/admin/src/constants.js index b6188f5bd1..84eefb235a 100644 --- a/packages/core/upload/admin/src/constants.js +++ b/packages/core/upload/admin/src/constants.js @@ -30,6 +30,17 @@ export const FolderDefinition = PropTypes.shape({ path: PropTypes.string.isRequired, }); +export const FolderParentDefinition = 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, +}); + +FolderParentDefinition.parent = FolderParentDefinition; + const FolderStructure = PropTypes.shape({ value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string.isRequired, diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js index 9fbb7187bc..be4dd95419 100644 --- a/packages/core/upload/admin/src/pages/App/components/Header.js +++ b/packages/core/upload/admin/src/pages/App/components/Header.js @@ -11,6 +11,7 @@ import { Link } from '@strapi/design-system/Link'; import ArrowLeft from '@strapi/icons/ArrowLeft'; import Plus from '@strapi/icons/Plus'; import { getTrad } from '../../../utils'; +import { FolderParentDefinition } from '../../../constants'; export const Header = ({ canCreate, @@ -86,15 +87,7 @@ Header.defaultProps = { Header.propTypes = { assetCount: PropTypes.number.isRequired, canCreate: PropTypes.bool.isRequired, - folder: PropTypes.shape({ - id: PropTypes.number.isRequired, - createdAt: PropTypes.string.isRequired, - name: PropTypes.string.isRequired, - parent: PropTypes.number, - updatedAt: PropTypes.string.isRequired, - pathId: PropTypes.number.isRequired, - path: PropTypes.string.isRequired, - }), + folder: FolderParentDefinition, folderCount: PropTypes.number.isRequired, onToggleEditFolderDialog: PropTypes.func.isRequired, onToggleUploadAssetDialog: PropTypes.func.isRequired, From 07c6dc4ca0b78296e5249886fe3e813ad0f1585a Mon Sep 17 00:00:00 2001 From: ronronscelestes Date: Wed, 22 Jun 2022 17:00:30 +0200 Subject: [PATCH 5/5] feedback fix FolderDefinition --- packages/core/upload/admin/src/constants.js | 26 +++++++++---------- .../admin/src/pages/App/components/Header.js | 4 +-- 2 files changed, 14 insertions(+), 16 deletions(-) diff --git a/packages/core/upload/admin/src/constants.js b/packages/core/upload/admin/src/constants.js index 84eefb235a..175926c550 100644 --- a/packages/core/upload/admin/src/constants.js +++ b/packages/core/upload/admin/src/constants.js @@ -12,35 +12,33 @@ 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, path: PropTypes.string.isRequired, }); -export const FolderParentDefinition = 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, -}); - -FolderParentDefinition.parent = FolderParentDefinition; - const FolderStructure = PropTypes.shape({ value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]), label: PropTypes.string.isRequired, diff --git a/packages/core/upload/admin/src/pages/App/components/Header.js b/packages/core/upload/admin/src/pages/App/components/Header.js index be4dd95419..6c975aff69 100644 --- a/packages/core/upload/admin/src/pages/App/components/Header.js +++ b/packages/core/upload/admin/src/pages/App/components/Header.js @@ -11,7 +11,7 @@ import { Link } from '@strapi/design-system/Link'; import ArrowLeft from '@strapi/icons/ArrowLeft'; import Plus from '@strapi/icons/Plus'; import { getTrad } from '../../../utils'; -import { FolderParentDefinition } from '../../../constants'; +import { FolderDefinition } from '../../../constants'; export const Header = ({ canCreate, @@ -87,7 +87,7 @@ Header.defaultProps = { Header.propTypes = { assetCount: PropTypes.number.isRequired, canCreate: PropTypes.bool.isRequired, - folder: FolderParentDefinition, + folder: FolderDefinition, folderCount: PropTypes.number.isRequired, onToggleEditFolderDialog: PropTypes.func.isRequired, onToggleUploadAssetDialog: PropTypes.func.isRequired,