Merge pull request #486 from IQSS/480-add-breadcrumb-to-create-datase…

…t-page Add Breadcrumb to Create Dataset Page
IQSS · Sep 13, 2024 · a63007e · a63007e
2 parents 4c8c659 + 473ef5d
commit a63007e
Show file tree

Hide file tree

Showing 7 changed files with 130 additions and 30 deletions.
diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
@@ -143,7 +143,7 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload Cypress screenshots
-        uses: actions/upload-artifact@v2
+        uses: actions/upload-artifact@v3
         if: failure()
         with:
           name: cypress-screenshots

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -23,12 +23,14 @@
     "@types/node": "16.18.12",
     "@types/react": "18.0.27",
     "@types/react-dom": "18.0.10",
+    "async-mutex": "0.5.0",
     "bootstrap": "5.2.3",
     "classnames": "2.5.1",
     "html-react-parser": "3.0.16",
     "i18next": "22.4.9",
     "i18next-browser-languagedetector": "7.0.1",
     "i18next-http-backend": "2.1.1",
+    "js-md5": "0.8.3",
     "lodash": "^4.17.21",
     "moment-timezone": "0.5.43",
     "react-bootstrap": "2.7.2",
@@ -44,9 +46,7 @@
     "typescript": "4.9.5",
     "use-deep-compare": "1.2.1",
     "vite-plugin-istanbul": "4.0.1",
-    "web-vitals": "2.1.4",
-    "js-md5": "0.8.3",
-    "async-mutex": "0.5.0"
+    "web-vitals": "2.1.4"
   },
   "scripts": {
     "start": "vite --base=/spa",

diff --git a/src/sections/create-dataset/CreateDataset.tsx b/src/sections/create-dataset/CreateDataset.tsx
@@ -13,6 +13,11 @@ import { CollectionRepository } from '../../collection/domain/repositories/Colle
 import { useLoading } from '../loading/LoadingContext'
 import { ROOT_COLLECTION_ALIAS } from '../../collection/domain/models/Collection'
 
+import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
+import { useCollection } from '../collection/useCollection'
+import { PageNotFound } from '../page-not-found/PageNotFound'
+import { CreateDatasetSkeleton } from './CreateDatasetSkeleton'
+
 interface CreateDatasetProps {
   datasetRepository: DatasetRepository
   metadataBlockInfoRepository: MetadataBlockInfoRepository
@@ -30,17 +35,31 @@ export function CreateDataset({
   const { isModalOpen, hideModal } = useNotImplementedModal()
   const { setIsLoading } = useLoading()
 
+  const { collection, isLoading: isLoadingCollection } = useCollection(
+    collectionRepository,
+    collectionId
+  )
+
   const { collectionUserPermissions, isLoading: isLoadingCollectionUserPermissions } =
     useGetCollectionUserPermissions({
       collectionIdOrAlias: collectionId,
       collectionRepository: collectionRepository
     })
 
   const canUserAddDataset = Boolean(collectionUserPermissions?.canAddDataset)
+  const isLoadingData = isLoadingCollectionUserPermissions || isLoadingCollection
 
   useEffect(() => {
-    setIsLoading(isLoadingCollectionUserPermissions)
-  }, [isLoadingCollectionUserPermissions, setIsLoading])
+    setIsLoading(isLoadingData)
+  }, [isLoadingData, setIsLoading])
+
+  if (!isLoadingCollection && !collection) {
+    return <PageNotFound />
+  }
+
+  if (isLoadingCollection || !collection) {
+    return <CreateDatasetSkeleton />
+  }
 
   if (collectionUserPermissions && !canUserAddDataset) {
     return (
@@ -56,6 +75,11 @@ export function CreateDataset({
     <>
       <NotImplementedModal show={isModalOpen} handleClose={hideModal} />
       <article>
+        <BreadcrumbsGenerator
+          hierarchy={collection?.hierarchy}
+          withActionItem
+          actionItemText={t('pageTitle')}
+        />
         <header>
           <h1>{t('pageTitle')}</h1>
         </header>

diff --git a/src/sections/create-dataset/CreateDatasetSkeleton.tsx b/src/sections/create-dataset/CreateDatasetSkeleton.tsx
@@ -0,0 +1,35 @@
+import Skeleton, { SkeletonTheme } from 'react-loading-skeleton'
+import { Col, Row } from '@iqss/dataverse-design-system'
+import { BreadcrumbsSkeleton } from '../shared/hierarchy/BreadcrumbsSkeleton'
+import 'react-loading-skeleton/dist/skeleton.css'
+import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
+import { MetadataFormSkeleton } from '../shared/form/DatasetMetadataForm/MetadataForm/MetadataFormSkeleton'
+
+export const CreateDatasetSkeleton = () => (
+  <SkeletonTheme>
+    <section data-testid="create-dataset-skeleton">
+      <BreadcrumbsSkeleton />
+      <Skeleton height="40px" width="350px" style={{ marginBottom: 16 }} />
+
+      <SeparationLine />
+
+      <Row style={{ marginBottom: 16 }}>
+        <Col sm={6}>
+          <Skeleton width={120} />
+        </Col>
+        <Col sm={6}>
+          <Row>
+            <Col md={9}>
+              <Skeleton width="100%" height={38} />
+            </Col>
+            <Col md={3}>
+              <Skeleton height={38} />
+            </Col>
+          </Row>
+        </Col>
+      </Row>
+
+      <MetadataFormSkeleton onEditMode={false} />
+    </section>
+  </SkeletonTheme>
+)
diff --git a/tests/component/sections/create-dataset/CreateDataset.spec.tsx b/tests/component/sections/create-dataset/CreateDataset.spec.tsx
@@ -15,6 +15,9 @@ const userPermissionsMock = CollectionMother.createUserPermissions()
 const collectionMetadataBlocksInfo =
   MetadataBlockInfoMother.getByCollectionIdDisplayedOnCreateTrue()
 
+const COLLECTION_NAME = 'Collection Name'
+const collection = CollectionMother.create({ name: COLLECTION_NAME })
+
 describe('Create Dataset', () => {
   beforeEach(() => {
     datasetRepository.create = cy.stub().resolves({ persistentId: 'persistentId' })
@@ -23,6 +26,47 @@ describe('Create Dataset', () => {
       .resolves(collectionMetadataBlocksInfo)
 
     collectionRepository.getUserPermissions = cy.stub().resolves(userPermissionsMock)
+    collectionRepository.getById = cy.stub().resolves(collection)
+  })
+
+  it('should show page not found when owner collection does not exist', () => {
+    collectionRepository.getById = cy.stub().resolves(null)
+    cy.customMount(
+      <CreateDataset
+        datasetRepository={datasetRepository}
+        metadataBlockInfoRepository={metadataBlockInfoRepository}
+        collectionRepository={collectionRepository}
+      />
+    )
+    cy.findByText('Page Not Found').should('exist')
+  })
+
+  it('should show loading skeleton while loading the collection', () => {
+    cy.customMount(
+      <CreateDataset
+        datasetRepository={datasetRepository}
+        metadataBlockInfoRepository={metadataBlockInfoRepository}
+        collectionRepository={collectionRepository}
+      />
+    )
+    cy.findByTestId('create-dataset-skeleton').should('exist')
+  })
+
+  it('should render the correct breadcrumbs', () => {
+    cy.customMount(
+      <CreateDataset
+        datasetRepository={datasetRepository}
+        metadataBlockInfoRepository={metadataBlockInfoRepository}
+        collectionRepository={collectionRepository}
+      />
+    )
+
+    cy.findByRole('link', { name: 'Root' }).should('exist')
+
+    cy.get('li[aria-current="page"]')
+      .should('exist')
+      .should('have.text', 'Create Dataset')
+      .should('have.class', 'active')
   })
 
   it('renders the Host Collection Form for root collection', () => {

diff --git a/tests/e2e-integration/e2e/sections/collection/Collection.spec.ts b/tests/e2e-integration/e2e/sections/collection/Collection.spec.ts
@@ -41,19 +41,16 @@ describe('Collection Page', () => {
       addDataBtn.click({ force: true })
       cy.findByText('New Dataset').should('be.visible').click({ force: true })
     })
-    cy.wait(1000)
-    cy.findByText(/Create Dataset/i).should('exist')
-
     cy.visit('/spa')
-    cy.wait(1000)
     cy.get('main').within(() => {
       const addDataBtn = cy.findByRole('button', { name: /Add Data/i })
       addDataBtn.should('exist')
       addDataBtn.click({ force: true })
       cy.findByText('New Dataset').should('be.visible').click({ force: true })
     })
-    cy.wait(1000)
-    cy.findByText(/Create Dataset/i).should('exist')
+    cy.get(`h1`)
+      .findByText(/Create Dataset/i)
+      .should('exist')
   })
 
   it('log out Dataverse Admin user', () => {
@@ -68,8 +65,6 @@ describe('Collection Page', () => {
   describe.skip('Currently skipping all tests as we are only rendering an infinite scrollable container. Please refactor these tests if a toggle button is added to switch between pagination and infinite scroll.', () => {
     it('navigates to the correct page of the datasets list when passing the page query param', () => {
       cy.wrap(DatasetHelper.createMany(12), { timeout: 10000 }).then(() => {
-        cy.wait(1500) // Wait for the datasets to be created
-
         cy.visit('/spa?page=2')
         cy.findAllByText(/Root/i).should('exist')
         cy.findByText(/Dataverse Admin/i).should('exist')
@@ -80,8 +75,6 @@ describe('Collection Page', () => {
 
     it('updates the page query param when navigating to another page', () => {
       cy.wrap(DatasetHelper.createMany(12), { timeout: 10000 }).then(() => {
-        cy.wait(2000) // Wait for the datasets to be created
-
         cy.visit('/spa')
 
         cy.findAllByText(/Root/i).should('exist')
@@ -95,26 +88,18 @@ describe('Collection Page', () => {
 
     it('correctly changes the pages when using the back and forward buttons from the browser after using some page number button', () => {
       cy.wrap(DatasetHelper.createMany(12), { timeout: 10000 }).then(() => {
-        cy.wait(1500) // Wait for the datasets to be created
-
         cy.visit('/spa?page=2')
 
         cy.findAllByText(/Root/i).should('exist')
         cy.findByText(/Dataverse Admin/i).should('exist')
         cy.findByText('11 to 12 of 12 Datasets').should('exist')
 
-        cy.wait(1000)
-
         cy.findByRole('button', { name: '1' }).click({ force: true })
         cy.findByText('1 to 10 of 12 Datasets').should('exist')
 
-        cy.wait(1000)
-
         cy.go('back')
         cy.findByText('11 to 12 of 12 Datasets').should('exist')
 
-        cy.wait(1000)
-
         cy.go('forward')
         cy.findByText('1 to 10 of 12 Datasets').should('exist')
       })
@@ -134,7 +119,6 @@ describe('Collection Page', () => {
     const collectionId = 'collection-1' + Date.now().toString()
     cy.wrap(CollectionHelper.create(collectionId)).then(() => {
       cy.wrap(DatasetHelper.createMany(12, collectionId), { timeout: 10_000 }).then(() => {
-        cy.wait(2_000) // Wait for the datasets to be created
         cy.visit(`/spa/collections/${collectionId}`)
 
         cy.findAllByText(/Scientific Research/i).should('exist')
@@ -145,7 +129,6 @@ describe('Collection Page', () => {
         cy.get('[data-testid="scrollable-container"]').scrollTo('bottom', {
           ensureScrollable: false
         })
-        cy.wait(1_500)
         cy.findByText('12 of 12 Datasets displayed').should('exist')
       })
     })