Skip to content

Commit

Permalink
feat: update no items message to show correct message based on type o…
Browse files Browse the repository at this point in the history 
…f filters applied and update test
  • Loading branch information
@g-saracca
g-saracca committed Sep 26, 2024
1 parent 5b52f8a commit e35605c
Show file tree
Hide file tree
Showing 6 changed files with 228 additions and 38 deletions.
13 changes: 11 additions & 2 deletions public/locales/en/collection.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,17 @@
"anonymous": "This collection currently has no datasets. Please <1>log in</1> 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</1> 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</1> 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 <anchor>search guide</anchor> for tips.",
"createdAlert": "You have successfully created your collection! To learn more about what you can do with your collection, check out the <anchor>User Guide</anchor>.",
Expand Down
1 change: 1 addition & 0 deletions src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
7 changes: 5 additions & 2 deletions src/sections/collection/collection-items-panel/items-list/ItemsList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ interface ItemsListProps {
hasSearchValue: boolean
paginationInfo: CollectionItemsPaginationInfo
onBottomReach: (paginationInfo: CollectionItemsPaginationInfo) => void
itemsTypesSelected: CollectionItemType[]
}

export const ItemsList = forwardRef(
Expand All @@ -40,7 +41,8 @@ export const ItemsList = forwardRef(
isEmptyItems,
hasSearchValue,
paginationInfo,
onBottomReach
onBottomReach,
itemsTypesSelected
}: ItemsListProps,
ref
) => {
Expand All @@ -67,7 +69,8 @@ export const ItemsList = forwardRef(
tabIndex={0}
ref={ref as ForwardedRef<HTMLDivElement>}
data-testid="items-list-scrollable-container">
{showNoItemsMessage && <NoItemsMessage />}
{showNoItemsMessage && <NoItemsMessage itemsTypesSelected={itemsTypesSelected} />}

{showNoSearchMatchesMessage && <NoSearchMatchesMessage />}

{error && <ErrorItemsMessage errorMessage={error} />}
Expand Down
66 changes: 58 additions & 8 deletions src/sections/collection/collection-items-panel/items-list/NoItemsMessage.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 (
<div className={styles['custom-message-container']}>
{user ? (
<p>{t('noItemsMessage.authenticated')}</p>
<p>{t('noItemsMessage.authenticated', { typeOfEmptyItems: messageKey })}</p>
) : (
<Trans i18nKey="noItemsMessage.anonymous">
<p>
This collection currently has no collections, datasets or files. Please{' '}
<a href={Route.LOG_IN}>log in</a> to see if you are able to add to it.
</p>
</Trans>
<Trans
t={t}
i18nKey="noItemsMessage.anonymous"
values={{ typeOfEmptyItems: messageKey }}
components={{
1: <a href={Route.LOG_IN}>log in</a>
}}
/>
)}
</div>
)
Expand Down
171 changes: 152 additions & 19 deletions tests/component/sections/collection/collection-items-panel/CollectionItemsPanel.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: undefined
}}
addDataSlot={null}
/>
)
cy.customMount(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [
CollectionItemType.COLLECTION,
CollectionItemType.DATASET,
CollectionItemType.FILE
]
}}
addDataSlot={null}
/>
)

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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [CollectionItemType.COLLECTION]
}}
addDataSlot={null}
/>
)

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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [CollectionItemType.DATASET]
}}
addDataSlot={null}
/>
)

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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [CollectionItemType.FILE]
}}
addDataSlot={null}
/>
)

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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [CollectionItemType.COLLECTION, CollectionItemType.DATASET]
}}
addDataSlot={null}
/>
)

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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [CollectionItemType.COLLECTION, CollectionItemType.FILE]
}}
addDataSlot={null}
/>
)

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(
<CollectionItemsPanel
collectionId={ROOT_COLLECTION_ALIAS}
collectionRepository={collectionRepository}
collectionQueryParams={{
pageQuery: 1,
searchQuery: undefined,
typesQuery: [CollectionItemType.DATASET, CollectionItemType.FILE]
}}
addDataSlot={null}
/>
)

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', () => {
Expand Down
8 changes: 1 addition & 7 deletions tests/e2e-integration/e2e/sections/collection/CollectionItemsPanel.spec.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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)

Expand All @@ -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)

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)

Expand Down Expand Up @@ -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)

Expand Down

0 comments on commit e35605c

Please sign in to comment.