Feature/file upload page boilerplate

src/Router.tsx

@@ -6,6 +6,7 @@ import { PageNotFound } from './sections/page-not-found/PageNotFound'
 import { CreateDatasetFactory } from './sections/create-dataset/CreateDatasetFactory'
 import { FileFactory } from './sections/file/FileFactory'
 import { CollectionFactory } from './sections/collection/CollectionFactory'
+import { EditDatasetFilesFactory } from './sections/edit-dataset-files/EditDatasetFilesFactory'
 import { DatasetNonNumericVersion } from './dataset/domain/models/Dataset'
 
 const router = createBrowserRouter(
@@ -31,6 +32,10 @@ const router = createBrowserRouter(
           path: Route.CREATE_DATASET,
           element: CreateDatasetFactory.create()
         },
+        {
+          path: Route.EDIT_DATASET_FILES,
+          element: EditDatasetFilesFactory.create()
+        },
         {
           path: Route.FILES,
           element: FileFactory.create()

src/sections/Route.enum.ts

@@ -5,6 +5,7 @@ export enum Route {
   LOG_OUT = '/',
   DATASETS = '/datasets',
   CREATE_DATASET = '/datasets/create',
+  EDIT_DATASET_FILES = '/datasets/edit-files',
   FILES = '/files',
   COLLECTIONS = '/collections'
 }

src/sections/dataset/dataset-action-buttons/edit-dataset-menu/EditDatasetMenu.tsx

@@ -1,45 +1,74 @@
+import { useTranslation } from 'react-i18next'
+import { useNavigate } from 'react-router-dom'
 import { Dataset } from '../../../../dataset/domain/models/Dataset'
 import { DropdownButton, DropdownButtonItem } from '@iqss/dataverse-design-system'
 import { EditDatasetPermissionsMenu } from './EditDatasetPermissionsMenu'
 import { DeleteDatasetButton } from './DeleteDatasetButton'
 import { DeaccessionDatasetButton } from './DeaccessionDatasetButton'
-import { useTranslation } from 'react-i18next'
 import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext'
 import { useSession } from '../../../session/SessionContext'
+import { Route } from '../../../Route.enum'
 
 interface EditDatasetMenuProps {
   dataset: Dataset
 }
 
+enum EditDatasetMenuItems {
+  FILES_UPLOAD = 'filesUpload',
+  METADATA = 'metadata',
+  TERMS = 'terms',
+  PERMISSIONS = 'permissions',
+  PRIVATE_URL = 'privateUrl',
+  THUMBNAILS_PLUS_WIDGETS = 'thumbnailsPlusWidgets'
+}
+
 export function EditDatasetMenu({ dataset }: EditDatasetMenuProps) {
   const { user } = useSession()
+  const { showModal } = useNotImplementedModal()
+  const { t } = useTranslation('dataset')
+  const navigate = useNavigate()
+
+  const handleOnSelect = (eventKey: EditDatasetMenuItems | string | null) => {
+    if (eventKey === EditDatasetMenuItems.FILES_UPLOAD) {
+      navigate(`${Route.EDIT_DATASET_FILES}?persistentId=${dataset.persistentId}`)
+      return
+    }
+    showModal()
+  }
 
   if (!user || !dataset.permissions.canUpdateDataset) {
     return <></>
   }
-  const { showModal } = useNotImplementedModal()
-  const { t } = useTranslation('dataset')
+
   return (
     <DropdownButton
-      onSelect={showModal}
+      onSelect={handleOnSelect}
       id={`edit-dataset-menu`}
       title={t('datasetActionButtons.editDataset.title')}
       asButtonGroup
       variant="secondary"
       disabled={dataset.checkIsLockedFromEdits(user.persistentId)}>
-      <DropdownButtonItem disabled={!dataset.hasValidTermsOfAccess}>
+      <DropdownButtonItem
+        eventKey={EditDatasetMenuItems.FILES_UPLOAD}
+        disabled={!dataset.hasValidTermsOfAccess}>
         {t('datasetActionButtons.editDataset.filesUpload')}
       </DropdownButtonItem>
-      <DropdownButtonItem disabled={!dataset.hasValidTermsOfAccess}>
+      <DropdownButtonItem
+        eventKey={EditDatasetMenuItems.METADATA}
+        disabled={!dataset.hasValidTermsOfAccess}>
         {t('datasetActionButtons.editDataset.metadata')}
       </DropdownButtonItem>
-      <DropdownButtonItem>{t('datasetActionButtons.editDataset.terms')}</DropdownButtonItem>
+      <DropdownButtonItem eventKey={EditDatasetMenuItems.TERMS}>
+        {t('datasetActionButtons.editDataset.terms')}
+      </DropdownButtonItem>
       <EditDatasetPermissionsMenu dataset={dataset} />
       {(dataset.permissions.canManageDatasetPermissions ||
         dataset.permissions.canManageFilesPermissions) && (
-        <DropdownButtonItem>{t('datasetActionButtons.editDataset.privateUrl')}</DropdownButtonItem>
+        <DropdownButtonItem eventKey={EditDatasetMenuItems.PRIVATE_URL}>
+          {t('datasetActionButtons.editDataset.privateUrl')}
+        </DropdownButtonItem>
       )}
-      <DropdownButtonItem>
+      <DropdownButtonItem eventKey={EditDatasetMenuItems.THUMBNAILS_PLUS_WIDGETS}>
         {t('datasetActionButtons.editDataset.thumbnailsPlusWidgets')}
       </DropdownButtonItem>
       <DeleteDatasetButton dataset={dataset} />

src/sections/dataset/dataset-files/dataset-upload-files-button/DatasetUploadFilesButton.tsx

@@ -1,24 +1,26 @@
-import { Button } from '@iqss/dataverse-design-system'
+import { useNavigate } from 'react-router-dom'
+import { useTranslation } from 'react-i18next'
 import { PlusLg } from 'react-bootstrap-icons'
+import { Button } from '@iqss/dataverse-design-system'
 import { useSession } from '../../../session/SessionContext'
-import styles from './DatasetUploadFilesButton.module.scss'
-import { useTranslation } from 'react-i18next'
 import { useDataset } from '../../DatasetContext'
-import { useNotImplementedModal } from '../../../not-implemented/NotImplementedModalContext'
+import { Route } from '../../../Route.enum'
+import styles from './DatasetUploadFilesButton.module.scss'
 
 export function DatasetUploadFilesButton() {
   const { t } = useTranslation('dataset')
   const { user } = useSession()
   const { dataset } = useDataset()
-  const handleClick = () => {
-    // TODO - Implement upload files
-    showModal()
-  }
-  const { showModal } = useNotImplementedModal()
+  const navigate = useNavigate()
+
   if (!user || !dataset?.permissions.canUpdateDataset) {
     return <></>
   }
 
+  const handleClick = () => {
+    navigate(`${Route.EDIT_DATASET_FILES}?persistentId=${dataset.persistentId}`)
+  }
+
   return (
     <Button
       type="button"

src/sections/edit-dataset-files/EditDatasetFiles.tsx

@@ -0,0 +1,38 @@
+import { useEffect } from 'react'
+import { FileRepository } from '../../files/domain/repositories/FileRepository'
+import { useLoading } from '../loading/LoadingContext'
+import { useDataset } from '../dataset/DatasetContext'
+import { PageNotFound } from '../page-not-found/PageNotFound'
+import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
+
+interface EditDatasetFilesProps {
+  fileRepository: FileRepository
+}
+
+export const EditDatasetFiles = ({ fileRepository: _fileRepository }: EditDatasetFilesProps) => {
+  const { setIsLoading } = useLoading()
+  const { dataset, isLoading } = useDataset()
+
+  useEffect(() => {
+    setIsLoading(isLoading)
+  }, [isLoading])
+
+  if (isLoading) {
+    return <p>Temporary Loading until having shape of skeleton</p>
+  }
+
+  return (
+    <>
+      {!dataset ? (
+        <PageNotFound />
+      ) : (
+        <>
+          <BreadcrumbsGenerator hierarchy={dataset.hierarchy} />
+          <article>
+            <p>Metadata Files uploading goes here</p>
+          </article>
+        </>
+      )}
+    </>
+  )
+}

src/sections/edit-dataset-files/EditDatasetFilesFactory.tsx

@@ -0,0 +1,26 @@
+import { ReactElement } from 'react'
+import { useSearchParams } from 'react-router-dom'
+import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
+import { FileJSDataverseRepository } from '../../files/infrastructure/FileJSDataverseRepository'
+import { DatasetProvider } from '../dataset/DatasetProvider'
+import { EditDatasetFiles } from './EditDatasetFiles'
+
+const datasetRepository = new DatasetJSDataverseRepository()
+const fileRepository = new FileJSDataverseRepository()
+
+export class EditDatasetFilesFactory {
+  static create(): ReactElement {
+    return <EditDatasetFilesWithSearchParams />
+  }
+}
+
+function EditDatasetFilesWithSearchParams() {
+  const [searchParams] = useSearchParams()
+  const persistentId = searchParams.get('persistentId') ?? undefined
+
+  return (
+    <DatasetProvider repository={datasetRepository} searchParams={{ persistentId: persistentId }}>
+      <EditDatasetFiles fileRepository={fileRepository} />
+    </DatasetProvider>
+  )
+}

src/stories/edit-dataset-files/EditDatasetFiles.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { WithI18next } from '../WithI18next'
+import { WithLayout } from '../WithLayout'
+import { EditDatasetFiles } from '../../sections/edit-dataset-files/EditDatasetFiles'
+import { FileMockRepository } from '../file/FileMockRepository'
+import { WithDataset } from '../dataset/WithDataset'
+
+const meta: Meta<typeof EditDatasetFiles> = {
+  title: 'Pages/Edit Dataset Files',
+  component: EditDatasetFiles,
+  decorators: [WithI18next],
+  parameters: {
+    // Sets the delay for all stories.
+    chromatic: { delay: 15000, pauseAnimationAtEnd: true }
+  }
+}
+
+export default meta
+type Story = StoryObj<typeof EditDatasetFiles>
+
+export const Default: Story = {
+  decorators: [WithLayout, WithDataset],
+  render: () => <EditDatasetFiles fileRepository={new FileMockRepository()} />
+}