Your commit message

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",
@@ -155,7 +155,7 @@
     "lcov-result-merger": "3.3.0",
     "lerna": "7.1.1",
     "postcss": "8.4.23",
-    "pre-commit": "1.2.2",
+    "pre-commit": "^1.2.2",
     "prettier": "2.8.4",
     "prop-types": "15.8.1",
     "react": "18.2.0",

src/sections/create-dataset/CreateDataset.tsx

@@ -13,6 +13,10 @@ 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 +34,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 +74,11 @@ export function CreateDataset({
     <>
       <NotImplementedModal show={isModalOpen} handleClose={hideModal} />
       <article>
+        <BreadcrumbsGenerator
+          hierarchy={collection?.hierarchy}
+          withActionItem
+          actionItemText={t('pageTitle')}
+        />
         <header>
           <h1>{t('pageTitle')}</h1>
         </header>

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>
+)

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', () => {

tests/e2e-integration/e2e/sections/collection/Collection.spec.ts

@@ -42,7 +42,9 @@ describe('Collection Page', () => {
       cy.findByText('New Dataset').should('be.visible').click({ force: true })
     })
     cy.wait(1000)
-    cy.findByText(/Create Dataset/i).should('exist')
+    cy.get(`.breadcrumb`)
+      .findByText(/Create Dataset/i)
+      .should('exist')
 
     cy.visit('/spa')
     cy.wait(1000)
@@ -53,7 +55,9 @@ describe('Collection Page', () => {
       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', () => {