From e35605cb64c94a0384b19034edc556cc3ee44fee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Germ=C3=A1n=20Saracca?= Date: Thu, 26 Sep 2024 15:56:18 -0300 Subject: [PATCH] feat: update no items message to show correct message based on type of filters applied and update test --- public/locales/en/collection.json | 13 +- .../CollectionItemsPanel.tsx | 1 + .../items-list/ItemsList.tsx | 7 +- .../items-list/NoItemsMessage.tsx | 66 ++++++- .../CollectionItemsPanel.spec.tsx | 171 ++++++++++++++++-- .../collection/CollectionItemsPanel.spec.ts | 8 +- 6 files changed, 228 insertions(+), 38 deletions(-) diff --git a/public/locales/en/collection.json b/public/locales/en/collection.json index 24c83b1e5..d45c4b482 100644 --- a/public/locales/en/collection.json +++ b/public/locales/en/collection.json @@ -4,8 +4,17 @@ "anonymous": "This collection currently has no datasets. Please <1>log in to see if you are able to add to it." }, "noItemsMessage": { - "authenticated": "This collection currently has no collections, datasets or files. You can add to it by using the Add Data button on this page.", - "anonymous": "This collection currently has no collections, datasets or files. Please <1>log in to see if you are able to add to it." + "authenticated": "This collection currently has no {{typeOfEmptyItems}}. You can add to it by using the Add Data button on this page.", + "anonymous": "This collection currently has no {{typeOfEmptyItems}}. Please <1>log in to see if you are able to add to it.", + "itemTypeMessage": { + "all": "collections, datasets or files", + "collection": "collections", + "dataset": "datasets", + "file": "files", + "collectionAndDataset": "collections or datasets", + "collectionAndFile": "collections or files", + "datasetAndFile": "datasets or files" + } }, "noSearchMatches": "There are no collections, datasets, or files that match your search. Please try a new search by using other or broader terms. You can also check out the search guide for tips.", "createdAlert": "You have successfully created your collection! To learn more about what you can do with your collection, check out the User Guide.", diff --git a/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx b/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx index 276a2aba2..df031c29a 100644 --- a/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx +++ b/src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx @@ -216,6 +216,7 @@ export const CollectionItemsPanel = ({ hasNextPage={hasNextPage} isEmptyItems={isEmptyItems} hasSearchValue={currentSearchCriteria.hasSearchText()} + itemsTypesSelected={currentSearchCriteria.itemTypes as CollectionItemType[]} paginationInfo={paginationInfo} onBottomReach={handleLoadMoreOnBottomReach} ref={itemsListContainerRef} diff --git a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx index bd3e9ef30..99bed2d79 100644 --- a/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx +++ b/src/sections/collection/collection-items-panel/items-list/ItemsList.tsx @@ -26,6 +26,7 @@ interface ItemsListProps { hasSearchValue: boolean paginationInfo: CollectionItemsPaginationInfo onBottomReach: (paginationInfo: CollectionItemsPaginationInfo) => void + itemsTypesSelected: CollectionItemType[] } export const ItemsList = forwardRef( @@ -40,7 +41,8 @@ export const ItemsList = forwardRef( isEmptyItems, hasSearchValue, paginationInfo, - onBottomReach + onBottomReach, + itemsTypesSelected }: ItemsListProps, ref ) => { @@ -67,7 +69,8 @@ export const ItemsList = forwardRef( tabIndex={0} ref={ref as ForwardedRef} data-testid="items-list-scrollable-container"> - {showNoItemsMessage && } + {showNoItemsMessage && } + {showNoSearchMatchesMessage && } {error && } diff --git a/src/sections/collection/collection-items-panel/items-list/NoItemsMessage.tsx b/src/sections/collection/collection-items-panel/items-list/NoItemsMessage.tsx index a35be5798..6b568040f 100644 --- a/src/sections/collection/collection-items-panel/items-list/NoItemsMessage.tsx +++ b/src/sections/collection/collection-items-panel/items-list/NoItemsMessage.tsx @@ -1,23 +1,73 @@ import { Trans, useTranslation } from 'react-i18next' import { useSession } from '@/sections/session/SessionContext' import { Route } from '@/sections/Route.enum' +import { CollectionItemType } from '@/collection/domain/models/CollectionItemType' import styles from './ItemsList.module.scss' -export function NoItemsMessage() { +interface NoItemsMessageProps { + itemsTypesSelected: CollectionItemType[] +} + +export function NoItemsMessage({ itemsTypesSelected }: NoItemsMessageProps) { const { t } = useTranslation('collection') const { user } = useSession() + const itemTypeMessages = { + all: t('noItemsMessage.itemTypeMessage.all'), + [CollectionItemType.COLLECTION]: t('noItemsMessage.itemTypeMessage.collection'), + [CollectionItemType.DATASET]: t('noItemsMessage.itemTypeMessage.dataset'), + [CollectionItemType.FILE]: t('noItemsMessage.itemTypeMessage.file'), + collectionAndDataset: t('noItemsMessage.itemTypeMessage.collectionAndDataset'), + collectionAndFile: t('noItemsMessage.itemTypeMessage.collectionAndFile'), + datasetAndFile: t('noItemsMessage.itemTypeMessage.datasetAndFile') + } + + const getMessageKey = (itemsTypesSelected: CollectionItemType[]) => { + const itemCount = itemsTypesSelected.length + + if (itemCount === 3) return itemTypeMessages.all + if (itemCount === 1) { + const itemType = itemsTypesSelected[0] + return itemTypeMessages[itemType] + } + + if (itemCount === 2) { + if ( + itemsTypesSelected.includes(CollectionItemType.COLLECTION) && + itemsTypesSelected.includes(CollectionItemType.DATASET) + ) { + return itemTypeMessages.collectionAndDataset + } + if ( + itemsTypesSelected.includes(CollectionItemType.COLLECTION) && + itemsTypesSelected.includes(CollectionItemType.FILE) + ) { + return itemTypeMessages.collectionAndFile + } + if ( + itemsTypesSelected.includes(CollectionItemType.DATASET) && + itemsTypesSelected.includes(CollectionItemType.FILE) + ) { + return itemTypeMessages.datasetAndFile + } + } + } + + const messageKey = getMessageKey(itemsTypesSelected) + return (
{user ? ( -

{t('noItemsMessage.authenticated')}

+

{t('noItemsMessage.authenticated', { typeOfEmptyItems: messageKey })}

) : ( - -

- This collection currently has no collections, datasets or files. Please{' '} - log in to see if you are able to add to it. -

- + log in + }} + /> )}
) diff --git a/tests/component/sections/collection/collection-items-panel/CollectionItemsPanel.spec.tsx b/tests/component/sections/collection/collection-items-panel/CollectionItemsPanel.spec.tsx index e1f9788a1..4ea332bfa 100644 --- a/tests/component/sections/collection/collection-items-panel/CollectionItemsPanel.spec.tsx +++ b/tests/component/sections/collection/collection-items-panel/CollectionItemsPanel.spec.tsx @@ -6,6 +6,7 @@ import { } from '@/collection/domain/models/CollectionItemSubset' import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository' import { CollectionItemsMother } from '@tests/component/collection/domain/models/CollectionItemsMother' +import { CollectionItemType } from '@/collection/domain/models/CollectionItemType' const collectionRepository: CollectionRepository = {} as CollectionRepository @@ -42,27 +43,159 @@ describe('CollectionItemsPanel', () => { cy.findByTestId('collection-items-list-infinite-scroll-skeleton').should('exist') }) - it('renders no items message when there are no collection, dataset or files', () => { - const emptyItems: CollectionItem[] = [] - const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } - collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + describe('NoItemsMessage', () => { + it('renders correct no items message when there are no collection, dataset or files', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) - cy.customMount( - - ) + cy.customMount( + + ) - cy.findByText(/This collection currently has no collections, datasets or files./).should( - 'exist' - ) + cy.findByText(/This collection currently has no collections, datasets or files./).should( + 'exist' + ) + }) + + it('renders correct no items message when there are no collections', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + + cy.customMount( + + ) + + cy.findByText(/This collection currently has no collections./).should('exist') + }) + + it('renders correct no items message when there are no datasets', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + + cy.customMount( + + ) + + cy.findByText(/This collection currently has no datasets./).should('exist') + }) + + it('renders correct no items message when there are no files', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + + cy.customMount( + + ) + + cy.findByText(/This collection currently has no files./).should('exist') + }) + + it('renders correct no items message when there are no collections and datasets', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + + cy.customMount( + + ) + + cy.findByText(/This collection currently has no collections or datasets./).should('exist') + }) + + it('renders correct no items message when there are no collections and files', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + + cy.customMount( + + ) + + cy.findByText(/This collection currently has no collections or files./).should('exist') + }) + + it('renders correct no items message when there are no datasets and files', () => { + const emptyItems: CollectionItem[] = [] + const emptyItemsWithCount: CollectionItemSubset = { items: emptyItems, totalItemCount: 0 } + collectionRepository.getItems = cy.stub().resolves(emptyItemsWithCount) + + cy.customMount( + + ) + + cy.findByText(/This collection currently has no datasets or files./).should('exist') + }) }) it('renders the no search results message when there are no items matching the search query', () => { diff --git a/tests/e2e-integration/e2e/sections/collection/CollectionItemsPanel.spec.ts b/tests/e2e-integration/e2e/sections/collection/CollectionItemsPanel.spec.ts index 4fe65a57d..37e33b7e2 100644 --- a/tests/e2e-integration/e2e/sections/collection/CollectionItemsPanel.spec.ts +++ b/tests/e2e-integration/e2e/sections/collection/CollectionItemsPanel.spec.ts @@ -53,11 +53,10 @@ describe('Collection Items Panel', () => { }) }) - it.only('performs different search, filtering and respond to back and forward navigation', () => { + it('performs different search, filtering and respond to back and forward navigation', () => { cy.visit(`/spa/collections`) cy.wait('@getCollectionItems').then((interception) => { - console.log('interception', interception) const { totalItemsInResponse, collectionsInResponse, datasetsInResponse, filesInResponse } = extractInfoFromInterceptedResponse(interception) @@ -80,7 +79,6 @@ describe('Collection Items Panel', () => { cy.findByRole('checkbox', { name: /Files/ }).click() cy.wait('@getCollectionItems').then((interception) => { - console.log('interception', interception) const { totalItemsInResponse, collectionsInResponse, datasetsInResponse, filesInResponse } = extractInfoFromInterceptedResponse(interception) @@ -113,7 +111,6 @@ describe('Collection Items Panel', () => { cy.findByPlaceholderText('Search this collection...').type('Darwin{enter}') cy.wait('@getCollectionItems').then((interception) => { - console.log('interception', interception) const { totalItemsInResponse, collectionsInResponse, datasetsInResponse, filesInResponse } = extractInfoFromInterceptedResponse(interception) @@ -148,7 +145,6 @@ describe('Collection Items Panel', () => { cy.findByRole('button', { name: /Search submit/ }).click() cy.wait('@getCollectionItems').then((interception) => { - console.log('interception', interception) const { totalItemsInResponse, collectionsInResponse, datasetsInResponse, filesInResponse } = extractInfoFromInterceptedResponse(interception) @@ -182,7 +178,6 @@ describe('Collection Items Panel', () => { cy.findByRole('checkbox', { name: /Collections/ }).click() cy.wait('@getCollectionItems').then((interception) => { - console.log('interception', interception) const { totalItemsInResponse, collectionsInResponse, datasetsInResponse, filesInResponse } = extractInfoFromInterceptedResponse(interception) @@ -214,7 +209,6 @@ describe('Collection Items Panel', () => { cy.findByRole('checkbox', { name: /Datasets/ }).click() cy.wait('@getCollectionItems').then((interception) => { - console.log('interception', interception) const { totalItemsInResponse, collectionsInResponse, datasetsInResponse, filesInResponse } = extractInfoFromInterceptedResponse(interception)