feat(FilePage): add route to the page

.storybook/preview.tsx

@@ -1,5 +1,6 @@
 import type { Preview } from '@storybook/react'
 import { ThemeProvider } from '@iqss/dataverse-design-system'
+import { MemoryRouter } from 'react-router-dom'
 
 const preview: Preview = {
   parameters: {
@@ -14,7 +15,9 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <ThemeProvider>
-        <Story />
+        <MemoryRouter>
+          <Story />
+        </MemoryRouter>
       </ThemeProvider>
     )
   ]

src/Router.tsx

@@ -3,6 +3,7 @@ import { HelloDataverse } from './sections/hello-dataverse/HelloDataverse'
 import { Layout } from './sections/layout/Layout'
 import { Route } from './sections/Route.enum'
 import { DatasetFactory } from './sections/dataset/DatasetFactory'
+import { FileFactory } from './sections/file/FileFactory'
 
 const router = createBrowserRouter(
   [
@@ -15,8 +16,12 @@ const router = createBrowserRouter(
           element: <HelloDataverse />
         },
         {
-          path: `${Route.DATASETS}`,
+          path: Route.DATASETS,
           element: DatasetFactory.create()
+        },
+        {
+          path: Route.FILES,
+          element: FileFactory.create()
         }
       ]
     }

src/files/domain/models/FilePreview.ts

@@ -190,10 +190,6 @@ export class FilePreview {
     readonly checksum?: FileChecksum
   ) {}
 
-  getLink(): string {
-    return `/file?id=${this.id}&version=${this.version.number}`
-  }
-
   get isActivelyEmbargoed(): boolean {
     if (this.embargo) {
       return this.embargo.isActive

src/sections/Route.enum.ts

@@ -3,5 +3,6 @@ export enum Route {
   SIGN_UP = '/dataverseuser.xhtml?editMode=CREATE&redirectPage=%2Fdataverse.xhtml',
   LOG_IN = '/loginpage.xhtml?redirectPage=%2Fdataverse.xhtml',
   LOG_OUT = '/',
-  DATASETS = 'datasets'
+  DATASETS = '/datasets',
+  FILES = '/files'
 }

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx

@@ -19,7 +19,7 @@ export function FileInfoCell({ file }: { file: FilePreview }) {
         <FileThumbnail file={file} />
       </div>
       <div className={styles['body-container']}>
-        <FileTitle link={file.getLink()} name={file.name} />
+        <FileTitle id={file.id} name={file.name} />
         <div className={styles['body-container__subtext']}>
           <FileDirectory directory={file.directory} />
           <FileType type={file.type} size={file.size} />

src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTitle.tsx

@@ -1,8 +1,15 @@
+import { LinkToPage } from '../../../../../../shared/link-to-page/LinkToPage'
+import { Route } from '../../../../../../Route.enum'
+
 interface FileTitleProps {
-  link: string
+  id: number
   name: string
 }
 
-export function FileTitle({ link, name }: FileTitleProps) {
-  return <a href={link}>{name}</a>
+export function FileTitle({ id, name }: FileTitleProps) {
+  return (
+    <LinkToPage page={Route.FILES} searchParams={{ id: id.toString() }}>
+      {name}
+    </LinkToPage>
+  )
 }

src/sections/file/FileFactory.tsx

@@ -0,0 +1,24 @@
+import { ReactElement } from 'react'
+import { FileJSDataverseRepository } from '../../files/infrastructure/FileJSDataverseRepository'
+import { File } from './File'
+import { useSearchParams } from 'react-router-dom'
+import { PageNotFound } from '../page-not-found/PageNotFound'
+
+const repository = new FileJSDataverseRepository()
+export class FileFactory {
+  static create(): ReactElement {
+    return <FileWithSearchParams />
+  }
+}
+
+function FileWithSearchParams() {
+  const [searchParams] = useSearchParams()
+  const searchParamId = searchParams.get('id') ?? undefined
+  const id = searchParamId ? parseInt(searchParamId) : undefined
+
+  if (!id) {
+    return <PageNotFound />
+  }
+
+  return <File repository={repository} id={id} />
+}

src/sections/shared/link-to-page/LinkToPage.tsx

@@ -0,0 +1,20 @@
+import { Link } from 'react-router-dom'
+import { PropsWithChildren } from 'react'
+import { Route } from '../../Route.enum'
+
+interface LinkToPageProps {
+  page: Route
+  searchParams?: Record<string, string>
+}
+
+export function LinkToPage({ children, page, searchParams }: PropsWithChildren<LinkToPageProps>) {
+  const searchParamsString: string = searchParams ? '?' + encodeSearchParamsToURI(searchParams) : ''
+
+  return <Link to={`${page}${searchParamsString}`}>{children}</Link>
+}
+
+const encodeSearchParamsToURI = (searchParams: Record<string, string>) => {
+  return Object.entries(searchParams)
+    .map(([key, value]) => `${key}=${value}`)
+    .join('&')
+}

src/stories/WithLayout.tsx

@@ -1,16 +1,14 @@
 import { StoryFn } from '@storybook/react'
-import { MemoryRouter as Router, Routes, Route } from 'react-router-dom'
+import { Routes, Route } from 'react-router-dom'
 import { Layout } from '../sections/layout/Layout'
 import { LoadingProvider } from '../sections/loading/LoadingProvider'
 
 export const WithLayout = (Story: StoryFn) => (
   <LoadingProvider>
-    <Router>
-      <Routes>
-        <Route element={<Layout />}>
-          <Route path="/*" element={<Story />} />
-        </Route>
-      </Routes>
-    </Router>
+    <Routes>
+      <Route element={<Layout />}>
+        <Route path="/*" element={<Story />} />
+      </Route>
+    </Routes>
   </LoadingProvider>
 )

tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileTitle.spec.tsx

@@ -1,24 +1,17 @@
 import { FilePreviewMother } from '../../../../../../../files/domain/models/FilePreviewMother'
 import { FileTitle } from '../../../../../../../../../src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTitle'
-import { FilePublishingStatus } from '../../../../../../../../../src/files/domain/models/FilePreview'
 
 describe('FileTitle', () => {
   it('renders the link and name correctly', () => {
     const id = 12345
-    const versionParameter = '&version=1'
     const name = 'file-name.txt'
     const file = FilePreviewMother.create({
       id: id,
-      version: { number: 1, publishingStatus: FilePublishingStatus.RELEASED },
       name: name
     })
 
-    cy.customMount(<FileTitle link={file.getLink()} name={file.name} />)
+    cy.customMount(<FileTitle id={file.id} name={file.name} />)
 
-    cy.findByRole('link', { name: name }).should(
-      'have.attr',
-      'href',
-      `/file?id=${id}${versionParameter}`
-    )
+    cy.findByRole('link', { name: name }).should('have.attr', 'href', `/files?id=${id}`)
   })
 })

tests/component/sections/shared/link-to-page/LinkToPage.spec.tsx

@@ -0,0 +1,14 @@
+import { LinkToPage } from '../../../../../src/sections/shared/link-to-page/LinkToPage'
+import { Route } from '../../../../../src/sections/Route.enum'
+
+describe('LinkToPage', () => {
+  it('renders a link to the page with the given search params', () => {
+    cy.customMount(<LinkToPage page={Route.DATASETS} searchParams={{ foo: 'bar' }} />)
+    cy.findByRole('link').should('have.attr', 'href', '/datasets?foo=bar')
+  })
+
+  it('renders a link to the page without search params', () => {
+    cy.customMount(<LinkToPage page={Route.DATASETS} />)
+    cy.findByRole('link').should('have.attr', 'href', '/datasets')
+  })
+})

tests/e2e-integration/e2e/sections/file/File.spec.tsx

@@ -0,0 +1,6 @@
+describe('File', () => {
+  it('successfully loads', () => {
+    cy.visit('/spa/files?id=23')
+    cy.findAllByText('file.csv').should('exist')
+  })
+})

tests/support/commands.tsx

@@ -45,14 +45,17 @@ import { I18nextProvider } from 'react-i18next'
 import i18next from '../../src/i18n'
 import { UserRepository } from '../../src/users/domain/repositories/UserRepository'
 import { SessionProvider } from '../../src/sections/session/SessionProvider'
+import { MemoryRouter } from 'react-router-dom'
 
 // Define your custom mount function
 
 Cypress.Commands.add('customMount', (component: ReactNode) => {
   return cy.mount(
-    <ThemeProvider>
-      <I18nextProvider i18n={i18next}>{component}</I18nextProvider>
-    </ThemeProvider>
+    <MemoryRouter>
+      <ThemeProvider>
+        <I18nextProvider i18n={i18next}>{component}</I18nextProvider>
+      </ThemeProvider>
+    </MemoryRouter>
   )
 })