Enhanced Not Found Page

public/locales/en/notFoundPage.json

@@ -0,0 +1,5 @@
+{
+  "statusNumberNotFound": "404",
+  "message": "We can't find the <1>{{type}}</1> you're looking for.\n Sorry for the inconvenience.",
+  "backToHomepage": "Back to {{brandName}} Homepage"
+}

public/locales/en/shared.json

@@ -1,4 +1,8 @@
 {
+  "collection": "Collection",
+  "dataset": "Dataset",
+  "file": "File",
+  "page": "Page",
   "asterisksIndicateRequiredFields": "Asterisks indicate required fields",
   "remove": "Remove",
   "add": "Add",
@@ -20,10 +24,6 @@
     "heading": "Page Number Not Found",
     "message": "The page number you requested does not exist. Please try a different page number."
   },
-  "pageNotFound": {
-    "heading": "Page Not Found",
-    "message": "The page you are looking for was not found."
-  },
   "pagination": {
     "results_one": "1 {{item}}",
     "results_other": "{{start}} to {{end}} of {{formattedCount}} {{item}}s",

src/router/routes.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react'
-import { RouteObject } from 'react-router-dom'
+import { Navigate, RouteObject } from 'react-router-dom'
 import { Route } from '../sections/Route.enum'
 import { Layout } from '../sections/layout/Layout'
 import { ErrorPage } from '../sections/error-page/ErrorPage'
@@ -92,6 +92,12 @@ const FeaturedItemPage = lazy(() =>
   }))
 )
 
+const NotFoundPage = lazy(() =>
+  import('../sections/not-found-page/NotFoundPageFactory').then(({ NotFoundPageFactory }) => ({
+    default: () => NotFoundPageFactory.create()
+  }))
+)
+
 export const routes: RouteObject[] = [
   {
     path: '/',
@@ -229,6 +235,15 @@ export const routes: RouteObject[] = [
             errorElement: <ErrorPage />
           }
         ]
+      },
+      // 🕵️‍♂️ Not found page, if the path doesn't match any route we redirect to not found page.
+      {
+        path: Route.NOT_FOUND_PAGE,
+        element: <NotFoundPage />
+      },
+      {
+        path: '*',
+        element: <Navigate to={Route.NOT_FOUND_PAGE} replace />
       }
     ]
   }

src/sections/Route.enum.ts

@@ -15,7 +15,8 @@ export enum Route {
   EDIT_COLLECTION = '/collections/:collectionId/edit',
   ACCOUNT = '/account',
   EDIT_COLLECTION_FEATURED_ITEMS = '/collections/:collectionId/edit-featured-items',
-  FEATURED_ITEM = '/featured-item/:parentCollectionId/:featuredItemId'
+  FEATURED_ITEM = '/featured-item/:parentCollectionId/:featuredItemId',
+  NOT_FOUND_PAGE = '/404'
 }
 
 export const RouteWithParams = {

src/sections/collection/Collection.tsx

@@ -11,7 +11,6 @@ import AddDataActionsButton from '../shared/add-data-actions/AddDataActionsButto
 import { CollectionItemsPanel } from './collection-items-panel/CollectionItemsPanel'
 import { CollectionInfo } from './CollectionInfo'
 import { CollectionSkeleton } from './CollectionSkeleton'
-import { PageNotFound } from '../page-not-found/PageNotFound'
 import { CreatedAlert } from './CreatedAlert'
 import { PublishCollectionButton } from './publish-collection/PublishCollectionButton'
 import { ShareCollectionButton } from './share-collection-button/ShareCollectionButton'
@@ -20,8 +19,9 @@ import { EditCollectionDropdown } from './edit-collection-dropdown/EditCollectio
 import { FeaturedItems } from './featured-items/FeaturedItems'
 import { Route } from '../Route.enum'
 import { CollectionHelper } from './CollectionHelper'
-import styles from './Collection.module.scss'
 import { ContactRepository } from '@/contact/domain/repositories/ContactRepository'
+import { NotFoundPage } from '../not-found-page/NotFoundPage'
+import styles from './Collection.module.scss'
 
 interface CollectionProps {
   collectionRepository: CollectionRepository
@@ -72,7 +72,7 @@ export function Collection({
   }
 
   if (!isLoadingCollection && !collection) {
-    return <PageNotFound />
+    return <NotFoundPage dvObjectNotFoundType="collection" />
   }
 
   return (

src/sections/create-collection/CreateCollection.tsx

@@ -11,7 +11,7 @@ import { User } from '@/users/domain/models/User'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
-import { PageNotFound } from '../page-not-found/PageNotFound'
+import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { CreateCollectionSkeleton } from './CreateCollectionSkeleton'
 import { EditCreateCollectionForm } from '../shared/form/EditCreateCollectionForm/EditCreateCollectionForm'
 
@@ -55,7 +55,7 @@ export function CreateCollection({
   }, [isLoading, isLoadingData, setIsLoading])
 
   if (!isLoadingCollection && !collection) {
-    return <PageNotFound />
+    return <NotFoundPage dvObjectNotFoundType="collection" />
   }
 
   if (isLoadingData || !collection) {

src/sections/create-dataset/CreateDataset.tsx

@@ -14,7 +14,7 @@ import { useLoading } from '../loading/LoadingContext'
 
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { useCollection } from '../collection/useCollection'
-import { PageNotFound } from '../page-not-found/PageNotFound'
+import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { CreateDatasetSkeleton } from './CreateDatasetSkeleton'
 
 interface CreateDatasetProps {
@@ -53,7 +53,7 @@ export function CreateDataset({
   }, [isLoadingData, setIsLoading])
 
   if (!isLoadingCollection && !collection) {
-    return <PageNotFound />
+    return <NotFoundPage dvObjectNotFoundType="collection" />
   }
 
   if (isLoadingCollection || !collection) {

src/sections/dataset/Dataset.tsx

@@ -5,7 +5,7 @@ import { useNavigate, useSearchParams } from 'react-router-dom'
 import { DatasetLabels } from './dataset-labels/DatasetLabels'
 import { useLoading } from '../loading/LoadingContext'
 import { DatasetSkeleton, TabsSkeleton } from './DatasetSkeleton'
-import { PageNotFound } from '../page-not-found/PageNotFound'
+import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { useTranslation } from 'react-i18next'
 import { DatasetMetadata } from './dataset-metadata/DatasetMetadata'
 import { DatasetSummary } from './dataset-summary/DatasetSummary'
@@ -87,6 +87,11 @@ export function Dataset({
   if (isDatasetLoading && !dataset) {
     return <DatasetSkeleton />
   }
+
+  if (!dataset) {
+    return <NotFoundPage dvObjectNotFoundType="dataset" />
+  }
+
   const handleCustomTermsClick = () => {
     setActiveTab('terms')
     const newParams = new URLSearchParams(searchParams)
@@ -101,100 +106,96 @@ export function Dataset({
       setActiveTab(key)
     }
   }
+
   return (
     <>
       <NotImplementedModal show={isModalOpen} handleClose={hideModal} />
-      {!dataset ? (
-        <PageNotFound />
-      ) : (
-        <>
-          <BreadcrumbsGenerator hierarchy={dataset.hierarchy} />
-          <article>
-            <div className={styles.container}>
-              <Row>
-                <Col>
-                  <DatasetAlerts />
-                </Col>
-              </Row>
-            </div>
 
-            <header className={styles.header}>
-              <h1>{dataset.version.title}</h1>
-              <DatasetLabels labels={dataset.version.labels} />
-            </header>
-            <div className={styles.container}>
-              <Row>
-                <Col sm={9}>
-                  <DatasetCitation thumbnail={dataset.thumbnail} version={dataset.version} />
-                </Col>
-                <Col sm={3}>
-                  <DatasetActionButtons
-                    datasetRepository={datasetRepository}
-                    collectionRepository={collectionRepository}
-                    dataset={dataset}
-                    contactRepository={contactRepository}
+      <BreadcrumbsGenerator hierarchy={dataset.hierarchy} />
+      <article>
+        <div className={styles.container}>
+          <Row>
+            <Col>
+              <DatasetAlerts />
+            </Col>
+          </Row>
+        </div>
+
+        <header className={styles.header}>
+          <h1>{dataset.version.title}</h1>
+          <DatasetLabels labels={dataset.version.labels} />
+        </header>
+        <div className={styles.container}>
+          <Row>
+            <Col sm={9}>
+              <DatasetCitation thumbnail={dataset.thumbnail} version={dataset.version} />
+            </Col>
+            <Col sm={3}>
+              <DatasetActionButtons
+                datasetRepository={datasetRepository}
+                collectionRepository={collectionRepository}
+                dataset={dataset}
+                contactRepository={contactRepository}
+              />
+            </Col>
+          </Row>
+          <Row>
+            <Col sm={9} className={styles['summary-container']}>
+              <DatasetSummary
+                summaryFields={dataset.summaryFields}
+                license={dataset.license}
+                onCustomTermsClick={handleCustomTermsClick}
+                metadataBlockInfoRepository={metadataBlockInfoRepository}
+              />
+            </Col>
+          </Row>
+          {publishInProgress && <TabsSkeleton />}
+
+          {(!publishInProgress || !isDatasetLoading) && (
+            <Tabs defaultActiveKey={activeTab} onSelect={handleTabSelect}>
+              <Tabs.Tab eventKey="files" title={t('filesTabTitle')}>
+                <div className={styles['tab-container']}>
+                  {filesTabInfiniteScrollEnabled ? (
+                    <DatasetFilesScrollable
+                      filesRepository={fileRepository}
+                      datasetPersistentId={dataset.persistentId}
+                      datasetVersion={dataset.version}
+                      key={dataset.version.publishingStatus}
+                    />
+                  ) : (
+                    <DatasetFiles
+                      filesRepository={fileRepository}
+                      datasetPersistentId={dataset.persistentId}
+                      datasetVersion={dataset.version}
+                    />
+                  )}
+                </div>
+              </Tabs.Tab>
+              <Tabs.Tab eventKey="metadata" title={t('metadataTabTitle')}>
+                <div className={styles['tab-container']}>
+                  <DatasetMetadata
+                    persistentId={dataset.persistentId}
+                    metadataBlocks={dataset.metadataBlocks}
+                    metadataBlockInfoRepository={metadataBlockInfoRepository}
                   />
-                </Col>
-              </Row>
-              <Row>
-                <Col sm={9} className={styles['summary-container']}>
-                  <DatasetSummary
-                    summaryFields={dataset.summaryFields}
+                </div>
+              </Tabs.Tab>
+              <Tabs.Tab title={t('termsTabTitle')} eventKey={'terms'}>
+                <div ref={termsTabRef} className={styles['tab-container']}>
+                  <DatasetTerms
                     license={dataset.license}
-                    onCustomTermsClick={handleCustomTermsClick}
-                    metadataBlockInfoRepository={metadataBlockInfoRepository}
+                    termsOfUse={dataset.termsOfUse}
+                    filesRepository={fileRepository}
+                    datasetPersistentId={dataset.persistentId}
+                    datasetVersion={dataset.version}
                   />
-                </Col>
-              </Row>
-              {publishInProgress && <TabsSkeleton />}
-
-              {(!publishInProgress || !isDatasetLoading) && (
-                <Tabs defaultActiveKey={activeTab} onSelect={handleTabSelect}>
-                  <Tabs.Tab eventKey="files" title={t('filesTabTitle')}>
-                    <div className={styles['tab-container']}>
-                      {filesTabInfiniteScrollEnabled ? (
-                        <DatasetFilesScrollable
-                          filesRepository={fileRepository}
-                          datasetPersistentId={dataset.persistentId}
-                          datasetVersion={dataset.version}
-                          key={dataset.version.publishingStatus}
-                        />
-                      ) : (
-                        <DatasetFiles
-                          filesRepository={fileRepository}
-                          datasetPersistentId={dataset.persistentId}
-                          datasetVersion={dataset.version}
-                        />
-                      )}
-                    </div>
-                  </Tabs.Tab>
-                  <Tabs.Tab eventKey="metadata" title={t('metadataTabTitle')}>
-                    <div className={styles['tab-container']}>
-                      <DatasetMetadata
-                        persistentId={dataset.persistentId}
-                        metadataBlocks={dataset.metadataBlocks}
-                        metadataBlockInfoRepository={metadataBlockInfoRepository}
-                      />
-                    </div>
-                  </Tabs.Tab>
-                  <Tabs.Tab title={t('termsTabTitle')} eventKey={'terms'}>
-                    <div ref={termsTabRef} className={styles['tab-container']}>
-                      <DatasetTerms
-                        license={dataset.license}
-                        termsOfUse={dataset.termsOfUse}
-                        filesRepository={fileRepository}
-                        datasetPersistentId={dataset.persistentId}
-                        datasetVersion={dataset.version}
-                      />
-                    </div>
-                  </Tabs.Tab>
-                </Tabs>
-              )}
-              <SeparationLine />
-            </div>
-          </article>
-        </>
-      )}
+                </div>
+              </Tabs.Tab>
+            </Tabs>
+          )}
+          <SeparationLine />
+        </div>
+      </article>
     </>
   )
 }

src/sections/edit-collection-featured-items/EditCollectionFeaturedItems.tsx

@@ -7,7 +7,7 @@ import { useCollection } from '../collection/useCollection'
 import { useLoading } from '../loading/LoadingContext'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
-import { PageNotFound } from '../page-not-found/PageNotFound'
+import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { FeaturedItemsForm } from './featured-items-form/FeaturedItemsForm'
 import { FeaturedItemsFormHelper } from './featured-items-form/FeaturedItemsFormHelper'
 import { FeaturedItemsFormData } from './types'
@@ -40,7 +40,7 @@ export const EditCollectionFeaturedItems = ({
   }, [isLoadingData, setIsLoading])
 
   if (!isLoading && !collection) {
-    return <PageNotFound />
+    return <NotFoundPage dvObjectNotFoundType="collection" />
   }
 
   if (isLoadingData || !collection) {

src/sections/edit-collection/EditCollection.tsx

@@ -9,7 +9,7 @@ import { useSession } from '../session/SessionContext'
 import { useCollection } from '../collection/useCollection'
 import { User } from '@/users/domain/models/User'
 import { CollectionHelper } from '../collection/CollectionHelper'
-import { PageNotFound } from '../page-not-found/PageNotFound'
+import { NotFoundPage } from '../not-found-page/NotFoundPage'
 import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import { SeparationLine } from '../shared/layout/SeparationLine/SeparationLine'
 import { RequiredFieldText } from '../shared/form/RequiredFieldText/RequiredFieldText'
@@ -55,7 +55,7 @@ export const EditCollection = ({
   }, [setIsLoading, isLoadingData])
 
   if (!isLoadingCollection && !collection) {
-    return <PageNotFound />
+    return <NotFoundPage dvObjectNotFoundType="collection" />
   }
 
   if (isLoadingData || !collection) {