diff --git a/public/locales/en/home.json b/public/locales/en/home.json index fb3bcc5c2..2da05e5f9 100644 --- a/public/locales/en/home.json +++ b/public/locales/en/home.json @@ -1,3 +1,7 @@ { - "title": "Root" + "title": "Root", + "noDatasetsMessage": { + "authenticated": "This dataverse currently has no datasets. You can add to it by using the Add Data button on this page.", + "anonymous": "This dataverse currently has no datasets. Please <1>log in to see if you are able to add to it." + } } diff --git a/src/sections/home/datasets-list/DatasetsList.module.scss b/src/sections/home/datasets-list/DatasetsList.module.scss index 338ba8e11..852fa280c 100644 --- a/src/sections/home/datasets-list/DatasetsList.module.scss +++ b/src/sections/home/datasets-list/DatasetsList.module.scss @@ -1,9 +1,12 @@ @import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module"; -@import "node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/typography.module"; -@import "src/sections/assets/variables"; .container { padding:15px; border: 1px solid #ddd; border-radius: 4px; } + +.empty-message-container { + padding: .5em 1em; + background: $dv-warning-box-color; +} \ No newline at end of file diff --git a/src/sections/home/datasets-list/DatasetsList.tsx b/src/sections/home/datasets-list/DatasetsList.tsx index aa1aa0944..c2f902295 100644 --- a/src/sections/home/datasets-list/DatasetsList.tsx +++ b/src/sections/home/datasets-list/DatasetsList.tsx @@ -9,10 +9,12 @@ import { LinkToPage } from '../../shared/link-to-page/LinkToPage' import { Route } from '../../Route.enum' import { useLoading } from '../../loading/LoadingContext' import { DatasetsListSkeleton } from './DatasetsListSkeleton' +import { NoDatasetsMessage } from './NoDatasetsMessage' interface DatasetsListProps { datasetRepository: DatasetRepository } +const NO_DATASETS = 0 export function DatasetsList({ datasetRepository }: DatasetsListProps) { const { setIsLoading } = useLoading() const [paginationInfo, setPaginationInfo] = useState( @@ -30,21 +32,29 @@ export function DatasetsList({ datasetRepository }: DatasetsListProps) { return (
-
- -
- {datasets.map((dataset) => ( -
- - {dataset.title} - -
- ))} - + {datasets.length === NO_DATASETS ? ( + + ) : ( + <> +
+ +
+ {datasets.map((dataset) => ( +
+ + {dataset.title} + +
+ ))} + + + )}
) } diff --git a/src/sections/home/datasets-list/NoDatasetsMessage.tsx b/src/sections/home/datasets-list/NoDatasetsMessage.tsx new file mode 100644 index 000000000..a7ad3cfc0 --- /dev/null +++ b/src/sections/home/datasets-list/NoDatasetsMessage.tsx @@ -0,0 +1,24 @@ +import styles from './DatasetsList.module.scss' +import { Trans, useTranslation } from 'react-i18next' +import { useSession } from '../../session/SessionContext' +import { Route } from '../../Route.enum' + +export function NoDatasetsMessage() { + const { t } = useTranslation('home') + const { user } = useSession() + + return ( +
+ {user ? ( +

{t('noDatasetsMessage.authenticated')}

+ ) : ( + +

+ This dataverse currently has no datasets. Please log in to + see if you are able to add to it. +

+
+ )} +
+ ) +} diff --git a/src/sections/home/datasets-list/useDatasets.tsx b/src/sections/home/datasets-list/useDatasets.tsx index 3ed943fac..8bb900423 100644 --- a/src/sections/home/datasets-list/useDatasets.tsx +++ b/src/sections/home/datasets-list/useDatasets.tsx @@ -29,7 +29,7 @@ export function useDatasets( }) } const fetchDatasets = (totalDatasetsCount: TotalDatasetsCount) => { - if (totalDatasetsCount) { + if (typeof totalDatasetsCount !== 'undefined') { if (totalDatasetsCount === 0) { setIsLoading(false) return diff --git a/src/stories/dataset/NoDatasetsMockRepository.ts b/src/stories/dataset/NoDatasetsMockRepository.ts new file mode 100644 index 000000000..b5fa7b41c --- /dev/null +++ b/src/stories/dataset/NoDatasetsMockRepository.ts @@ -0,0 +1,22 @@ +import { DatasetMockRepository } from './DatasetMockRepository' +import { DatasetPaginationInfo } from '../../dataset/domain/models/DatasetPaginationInfo' +import { DatasetPreview } from '../../dataset/domain/models/DatasetPreview' +import { TotalDatasetsCount } from '../../dataset/domain/models/TotalDatasetsCount' +export class NoDatasetsMockRepository extends DatasetMockRepository { + // eslint-disable-next-line unused-imports/no-unused-vars + getAll(paginationInfo: DatasetPaginationInfo): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve([]) + }, 1000) + }) + } + + getTotalDatasetsCount(): Promise { + return new Promise((resolve) => { + setTimeout(() => { + resolve(0) + }, 1000) + }) + } +} diff --git a/src/stories/home/Home.stories.tsx b/src/stories/home/Home.stories.tsx index e06527b30..800bb977e 100644 --- a/src/stories/home/Home.stories.tsx +++ b/src/stories/home/Home.stories.tsx @@ -4,6 +4,7 @@ import { WithI18next } from '../WithI18next' import { WithLayout } from '../WithLayout' import { DatasetMockRepository } from '../dataset/DatasetMockRepository' import { DatasetLoadingMockRepository } from '../dataset/DatasetLoadingMockRepository' +import { NoDatasetsMockRepository } from '../dataset/NoDatasetsMockRepository' const meta: Meta = { title: 'Pages/Home', @@ -21,3 +22,7 @@ export const Default: Story = { export const Loading: Story = { render: () => } + +export const NoResults: Story = { + render: () => +} diff --git a/src/stories/home/datasets-list/DatasetsList.stories.tsx b/src/stories/home/datasets-list/DatasetsList.stories.tsx index b12cec54e..b164bd98f 100644 --- a/src/stories/home/datasets-list/DatasetsList.stories.tsx +++ b/src/stories/home/datasets-list/DatasetsList.stories.tsx @@ -3,6 +3,9 @@ import { Home } from '../../../sections/home/Home' import { WithI18next } from '../../WithI18next' import { DatasetMockRepository } from '../../dataset/DatasetMockRepository' import { DatasetsList } from '../../../sections/home/datasets-list/DatasetsList' +import { DatasetLoadingMockRepository } from '../../dataset/DatasetLoadingMockRepository' +import { NoDatasetsMockRepository } from '../../dataset/NoDatasetsMockRepository' +import { MemoryRouter } from 'react-router-dom' const meta: Meta = { title: 'Sections/Home/DatasetsList', @@ -14,5 +17,17 @@ export default meta type Story = StoryObj export const Default: Story = { - render: () => + render: () => ( + + + + ) +} + +export const Loading: Story = { + render: () => +} + +export const NoResults: Story = { + render: () => } diff --git a/src/stories/home/datasets-list/NoDatasetsMessage.stories.tsx b/src/stories/home/datasets-list/NoDatasetsMessage.stories.tsx new file mode 100644 index 000000000..d81a48e90 --- /dev/null +++ b/src/stories/home/datasets-list/NoDatasetsMessage.stories.tsx @@ -0,0 +1,23 @@ +import { Meta, StoryObj } from '@storybook/react' +import { Home } from '../../../sections/home/Home' +import { WithI18next } from '../../WithI18next' +import { NoDatasetsMessage } from '../../../sections/home/datasets-list/NoDatasetsMessage' +import { WithLoggedInUser } from '../../WithLoggedInUser' + +const meta: Meta = { + title: 'Sections/Home/NoDatasetsMessage', + component: Home, + decorators: [WithI18next] +} + +export default meta +type Story = StoryObj + +export const AnonymousUser: Story = { + render: () => +} + +export const AuthenticatedUser: Story = { + decorators: [WithLoggedInUser], + render: () => +} diff --git a/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx b/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx index be8ec45d3..2623da1d7 100644 --- a/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx +++ b/tests/component/sections/home/datasets-list/DatasetsList.spec.tsx @@ -21,6 +21,13 @@ describe('Datasets List', () => { }) }) + it('renders no datasets message when there are no datasets', () => { + datasetRepository.getAll = cy.stub().resolves([]) + cy.customMount() + + cy.findByText(/This dataverse currently has no datasets./).should('exist') + }) + it('renders the datasets list', () => { cy.customMount() diff --git a/tests/component/sections/home/datasets-list/NoDatasetsMessage.spec.tsx b/tests/component/sections/home/datasets-list/NoDatasetsMessage.spec.tsx new file mode 100644 index 000000000..c8b580bea --- /dev/null +++ b/tests/component/sections/home/datasets-list/NoDatasetsMessage.spec.tsx @@ -0,0 +1,20 @@ +import { NoDatasetsMessage } from '../../../../../src/sections/home/datasets-list/NoDatasetsMessage' + +describe('No Datasets Message', () => { + it('renders the message for anonymous user', () => { + cy.customMount() + cy.findByText(/This dataverse currently has no datasets. Please /).should('exist') + cy.findByRole('link', { name: 'log in' }).should( + 'have.attr', + 'href', + '/loginpage.xhtml?redirectPage=%2Fdataverse.xhtml' + ) + }) + + it('renders the message for authenticated user', () => { + cy.mountAuthenticated() + cy.findByText( + 'This dataverse currently has no datasets. You can add to it by using the Add Data button on this page.' + ).should('exist') + }) +})