From 11d021507c3607f775358096fbee294c469d7a7a Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 4 Aug 2022 11:55:16 +0200 Subject: [PATCH 1/3] ML: Improve canRead and canCreate permission messages --- .../admin/src/pages/App/MediaLibrary.js | 42 ++---------- .../App/components/EmptyOrNoPermissions.js | 68 +++++++++++++++++++ .../tests/EmptyOrNoPermissions.test.js | 53 +++++++++++++++ .../src/pages/App/tests/MediaLibrary.test.js | 20 ------ .../upload/admin/src/translations/en.json | 5 +- 5 files changed, 130 insertions(+), 58 deletions(-) create mode 100644 packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js create mode 100644 packages/core/upload/admin/src/pages/App/components/tests/EmptyOrNoPermissions.test.js diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index b37dbc2c27..cbfc841d75 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -15,8 +15,6 @@ import { } from '@strapi/helper-plugin'; import { Layout, ContentLayout, ActionLayout } from '@strapi/design-system/Layout'; import { Main } from '@strapi/design-system/Main'; -import { Button } from '@strapi/design-system/Button'; -import Plus from '@strapi/icons/Plus'; import { Box } from '@strapi/design-system/Box'; import { Divider } from '@strapi/design-system/Divider'; import { BaseCheckbox } from '@strapi/design-system/BaseCheckbox'; @@ -38,7 +36,6 @@ import { getTrad, containsAssetFilter } from '../../utils'; import { PaginationFooter } from '../../components/PaginationFooter'; import { useMediaLibraryPermissions } from '../../hooks/useMediaLibraryPermissions'; import { useFolder } from '../../hooks/useFolder'; -import { EmptyAssets } from '../../components/EmptyAssets'; import { BulkActions } from './components/BulkActions'; import { FolderCard, @@ -48,6 +45,7 @@ import { } from '../../components/FolderCard'; import { Filters } from './components/Filters'; import { Header } from './components/Header'; +import { EmptyOrNoPermissions } from './components/EmptyOrNoPermissions'; const BoxWithHeight = styled(Box)` height: ${32 / 16}rem; @@ -219,39 +217,11 @@ export const MediaLibrary = () => { {(assetsError || foldersError) && } {folderCount === 0 && assetCount === 0 && ( - } - onClick={toggleUploadAssetDialog} - > - {formatMessage({ - id: getTrad('header.actions.add-assets'), - defaultMessage: 'Add new assets', - })} - - ) - } - content={ - // eslint-disable-next-line no-nested-ternary - isFiltering - ? formatMessage({ - id: getTrad('list.assets-empty.title-withSearch'), - defaultMessage: 'There are no elements with the applied filters', - }) - : canCreate - ? formatMessage({ - id: getTrad('list.assets.empty'), - defaultMessage: 'Upload your first assets...', - }) - : formatMessage({ - id: getTrad('list.assets.empty.no-permissions'), - defaultMessage: 'The asset list is empty', - }) - } + )} diff --git a/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js b/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js new file mode 100644 index 0000000000..48e0c1273c --- /dev/null +++ b/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js @@ -0,0 +1,68 @@ +import PropTypes from 'prop-types'; +import React from 'react'; +import { useIntl } from 'react-intl'; + +import { Button } from '@strapi/design-system/Button'; +import EmptyPermissions from '@strapi/icons/EmptyPermissions'; +import Plus from '@strapi/icons/Plus'; + +import { EmptyAssets } from '../../../components/EmptyAssets'; +import { getTrad } from '../../../utils'; + +const getContentIntlMessage = ({ isFiltering, canCreate, canRead }) => { + if (isFiltering) { + return { + id: getTrad('list.assets-empty.title-withSearch'), + defaultMessage: 'There are no elements with the applied filters', + }; + } + + if (canRead) { + if (canCreate) { + return { + id: getTrad('list.assets.empty-upload'), + defaultMessage: 'Upload your first assets...', + }; + } + + return { + id: getTrad('list.assets.empty'), + defaultMessage: 'Media Library is empty', + }; + } + + return { + id: getTrad('header.actions.no-permissions'), + defaultMessage: 'No permissions to view', + }; +}; + +export const EmptyOrNoPermissions = ({ canCreate, isFiltering, canRead, onActionClick }) => { + const { formatMessage } = useIntl(); + const content = getContentIntlMessage({ isFiltering, canCreate, canRead }); + + return ( + } onClick={onActionClick}> + {formatMessage({ + id: getTrad('header.actions.add-assets'), + defaultMessage: 'Add new assets', + })} + + ) + } + content={content && formatMessage(content)} + /> + ); +}; + +EmptyOrNoPermissions.propTypes = { + canCreate: PropTypes.bool.isRequired, + canRead: PropTypes.bool.isRequired, + isFiltering: PropTypes.bool.isRequired, + onActionClick: PropTypes.func.isRequired, +}; diff --git a/packages/core/upload/admin/src/pages/App/components/tests/EmptyOrNoPermissions.test.js b/packages/core/upload/admin/src/pages/App/components/tests/EmptyOrNoPermissions.test.js new file mode 100644 index 0000000000..f0e71b160b --- /dev/null +++ b/packages/core/upload/admin/src/pages/App/components/tests/EmptyOrNoPermissions.test.js @@ -0,0 +1,53 @@ +import React from 'react'; +import { ThemeProvider, lightTheme } from '@strapi/design-system'; +import { render } from '@testing-library/react'; +import { IntlProvider } from 'react-intl'; + +import { EmptyOrNoPermissions } from '../EmptyOrNoPermissions'; + +const setup = props => + render( + + + {}} + isFiltering={false} + canCreate + canRead + {...props} + /> + + + ); + +describe('EmptyOrNoPermissions', () => { + test('isFiltering', () => { + const { queryByText } = setup({ isFiltering: true }); + + expect(queryByText('There are no elements with the applied filters')).toBeInTheDocument(); + }); + + test('canCreate', () => { + const { queryByText } = setup({}); + + expect(queryByText('Add new assets')).toBeInTheDocument(); + }); + + test('isFiltering and canCreate', () => { + const { queryByText } = setup({ isFiltering: true }); + + expect(queryByText('Add new assets')).not.toBeInTheDocument(); + }); + + test('canRead and not canCreate', () => { + const { queryByText } = setup({ canCreate: false }); + + expect(queryByText('Media Library is empty')).toBeInTheDocument(); + }); + + test('not canRead', () => { + const { queryByText } = setup({ canRead: false }); + + expect(queryByText('No permissions to view')).toBeInTheDocument(); + }); +}); 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 90c57ee72a..8b130c205e 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 @@ -500,26 +500,6 @@ describe('Media library homepage', () => { expect(screen.queryByText('Upload your first assets...')).toBeInTheDocument(); }); - it('does not display empty assets action, if there are no assets and the user does not have create permissions', () => { - useMediaLibraryPermissions.mockReturnValueOnce({ - isLoading: false, - canCreate: false, - canRead: false, - }); - useAssets.mockReturnValueOnce({ - isLoading: false, - error: null, - data: { - pagination: FIXTURE_ASSET_PAGINATION, - results: FIXTURE_ASSETS, - }, - }); - - renderML(); - - expect(screen.queryByText('header.actions.add-assets')).not.toBeInTheDocument(); - }); - it('does not display empty assets action, if there are no assets, no folders and the user is currently filtering', () => { useQueryParams.mockReturnValueOnce([{ rawQuery: '', query: { filters: 'true' } }, jest.fn()]); useAssets.mockReturnValueOnce({ diff --git a/packages/core/upload/admin/src/translations/en.json b/packages/core/upload/admin/src/translations/en.json index 440658908c..96eff85318 100644 --- a/packages/core/upload/admin/src/translations/en.json +++ b/packages/core/upload/admin/src/translations/en.json @@ -43,8 +43,9 @@ "list.assets-empty.subtitle": "Add one to the list.", "list.assets-empty.title": "There are no assets yet", "list.assets-empty.title-withSearch": "There are no elements with the applied filters", - "list.assets.empty": "Upload your first assets...", - "list.assets.empty.no-permissions": "The asset list is empty.", + "list.assets.empty": "Media Library is empty", + "list.assets.empty-upload": "Upload your first assets...", + "list.assets.empty.no-permissions": "No permissions to view", "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}", From 3c6a58aaea65a8ed6ad6d8625b5f8ec7200c0e5b Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 4 Aug 2022 15:14:39 +0200 Subject: [PATCH 2/3] ML: Remove default NoPermissions component --- packages/core/upload/admin/src/pages/App/MediaLibrary.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index cbfc841d75..d07a852eab 100644 --- a/packages/core/upload/admin/src/pages/App/MediaLibrary.js +++ b/packages/core/upload/admin/src/pages/App/MediaLibrary.js @@ -6,7 +6,6 @@ import { stringify } from 'qs'; import { LoadingIndicatorPage, useFocusWhenNavigate, - NoPermissions, AnErrorOccurred, SearchURLQuery, useSelectionState, @@ -225,7 +224,7 @@ export const MediaLibrary = () => { /> )} - {canRead ? ( + {canRead && ( <> {folderCount > 0 && ( { )} - ) : ( - )} From 838dcc5a0154cf482a96a47ab503d493893143b5 Mon Sep 17 00:00:00 2001 From: Gustav Hansen Date: Thu, 4 Aug 2022 15:36:15 +0200 Subject: [PATCH 3/3] EmptyOrNoPermissions: simplify getContent() --- .../pages/App/components/EmptyOrNoPermissions.js | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js b/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js index 48e0c1273c..dc837658d5 100644 --- a/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js +++ b/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js @@ -12,7 +12,7 @@ import { getTrad } from '../../../utils'; const getContentIntlMessage = ({ isFiltering, canCreate, canRead }) => { if (isFiltering) { return { - id: getTrad('list.assets-empty.title-withSearch'), + id: 'list.assets-empty.title-withSearch', defaultMessage: 'There are no elements with the applied filters', }; } @@ -20,19 +20,19 @@ const getContentIntlMessage = ({ isFiltering, canCreate, canRead }) => { if (canRead) { if (canCreate) { return { - id: getTrad('list.assets.empty-upload'), + id: 'list.assets.empty-upload', defaultMessage: 'Upload your first assets...', }; } return { - id: getTrad('list.assets.empty'), + id: 'list.assets.empty', defaultMessage: 'Media Library is empty', }; } return { - id: getTrad('header.actions.no-permissions'), + id: 'header.actions.no-permissions', defaultMessage: 'No permissions to view', }; }; @@ -55,7 +55,10 @@ export const EmptyOrNoPermissions = ({ canCreate, isFiltering, canRead, onAction ) } - content={content && formatMessage(content)} + content={formatMessage({ + ...content, + id: getTrad(content.id), + })} /> ); };