diff --git a/packages/core/upload/admin/src/pages/App/MediaLibrary.js b/packages/core/upload/admin/src/pages/App/MediaLibrary.js index b37dbc2c27..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, @@ -15,8 +14,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 +35,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 +44,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,43 +216,15 @@ 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', - }) - } + )} - {canRead ? ( + {canRead && ( <> {folderCount > 0 && ( { )} - ) : ( - )} 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..dc837658d5 --- /dev/null +++ b/packages/core/upload/admin/src/pages/App/components/EmptyOrNoPermissions.js @@ -0,0 +1,71 @@ +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: 'list.assets-empty.title-withSearch', + defaultMessage: 'There are no elements with the applied filters', + }; + } + + if (canRead) { + if (canCreate) { + return { + id: 'list.assets.empty-upload', + defaultMessage: 'Upload your first assets...', + }; + } + + return { + id: 'list.assets.empty', + defaultMessage: 'Media Library is empty', + }; + } + + return { + id: '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={formatMessage({ + ...content, + id: getTrad(content.id), + })} + /> + ); +}; + +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 864a42f001..35e94fd0e6 100644 --- a/packages/core/upload/admin/src/translations/en.json +++ b/packages/core/upload/admin/src/translations/en.json @@ -44,8 +44,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}",