feat(DatasetsList): add no datasets message

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</1> to see if you are able to add to it."
+  }
 }

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;
+}

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<DatasetPaginationInfo>(
@@ -30,21 +32,29 @@ export function DatasetsList({ datasetRepository }: DatasetsListProps) {
 
   return (
     <section className={styles.container}>
-      <div>
-        <PaginationResultsInfo paginationInfo={paginationInfo} />
-      </div>
-      {datasets.map((dataset) => (
-        <article key={dataset.persistentId}>
-          <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: dataset.persistentId }}>
-            {dataset.title}
-          </LinkToPage>
-        </article>
-      ))}
-      <PaginationControls
-        onPaginationInfoChange={setPaginationInfo}
-        initialPaginationInfo={paginationInfo}
-        showPageSizeSelector={false}
-      />
+      {datasets.length === NO_DATASETS ? (
+        <NoDatasetsMessage />
+      ) : (
+        <>
+          <div>
+            <PaginationResultsInfo paginationInfo={paginationInfo} />
+          </div>
+          {datasets.map((dataset) => (
+            <article key={dataset.persistentId}>
+              <LinkToPage
+                page={Route.DATASETS}
+                searchParams={{ persistentId: dataset.persistentId }}>
+                {dataset.title}
+              </LinkToPage>
+            </article>
+          ))}
+          <PaginationControls
+            onPaginationInfoChange={setPaginationInfo}
+            initialPaginationInfo={paginationInfo}
+            showPageSizeSelector={false}
+          />
+        </>
+      )}
     </section>
   )
 }

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 (
+    <div className={styles['empty-message-container']}>
+      {user ? (
+        <p>{t('noDatasetsMessage.authenticated')}</p>
+      ) : (
+        <Trans i18nKey="noDatasetsMessage.anonymous">
+          <p>
+            This dataverse currently has no datasets. Please <a href={Route.LOG_IN}>log in</a> to
+            see if you are able to add to it.
+          </p>
+        </Trans>
+      )}
+    </div>
+  )
+}

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

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<DatasetPreview[]> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve([])
+      }, 1000)
+    })
+  }
+
+  getTotalDatasetsCount(): Promise<TotalDatasetsCount> {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(0)
+      }, 1000)
+    })
+  }
+}

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<typeof Home> = {
   title: 'Pages/Home',
@@ -21,3 +22,7 @@ export const Default: Story = {
 export const Loading: Story = {
   render: () => <Home datasetRepository={new DatasetLoadingMockRepository()} />
 }
+
+export const NoResults: Story = {
+  render: () => <Home datasetRepository={new NoDatasetsMockRepository()} />
+}

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<typeof Home> = {
   title: 'Sections/Home/DatasetsList',
@@ -14,5 +17,17 @@ export default meta
 type Story = StoryObj<typeof Home>
 
 export const Default: Story = {
-  render: () => <DatasetsList datasetRepository={new DatasetMockRepository()} />
+  render: () => (
+    <MemoryRouter>
+      <DatasetsList datasetRepository={new DatasetMockRepository()} />
+    </MemoryRouter>
+  )
+}
+
+export const Loading: Story = {
+  render: () => <DatasetsList datasetRepository={new DatasetLoadingMockRepository()} />
+}
+
+export const NoResults: Story = {
+  render: () => <DatasetsList datasetRepository={new NoDatasetsMockRepository()} />
 }

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<typeof Home> = {
+  title: 'Sections/Home/NoDatasetsMessage',
+  component: Home,
+  decorators: [WithI18next]
+}
+
+export default meta
+type Story = StoryObj<typeof Home>
+
+export const AnonymousUser: Story = {
+  render: () => <NoDatasetsMessage />
+}
+
+export const AuthenticatedUser: Story = {
+  decorators: [WithLoggedInUser],
+  render: () => <NoDatasetsMessage />
+}

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(<DatasetsList datasetRepository={datasetRepository} />)
+
+    cy.findByText(/This dataverse currently has no datasets./).should('exist')
+  })
+
   it('renders the datasets list', () => {
     cy.customMount(<DatasetsList datasetRepository={datasetRepository} />)
 

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(<NoDatasetsMessage />)
+    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(<NoDatasetsMessage />)
+    cy.findByText(
+      'This dataverse currently has no datasets. You can add to it by using the Add Data button on this page.'
+    ).should('exist')
+  })
+})