From 9864ba1ef213f0d34ffd624ce200ba15200abd04 Mon Sep 17 00:00:00 2001 From: MellyGray Date: Wed, 13 Dec 2023 18:04:25 +0100 Subject: [PATCH] feat(FilePage): add route to the page --- .storybook/preview.tsx | 5 +++- src/Router.tsx | 7 +++++- src/files/domain/models/FilePreview.ts | 4 ---- src/sections/Route.enum.ts | 3 ++- .../file-info/file-info-cell/FileInfoCell.tsx | 2 +- .../file-info-data/FileTitle.tsx | 13 +++++++--- src/sections/file/FileFactory.tsx | 24 +++++++++++++++++++ .../shared/link-to-page/LinkToPage.tsx | 20 ++++++++++++++++ src/stories/WithLayout.tsx | 14 +++++------ .../file-info-data/FileTitle.spec.tsx | 11 ++------- .../shared/link-to-page/LinkToPage.spec.tsx | 14 +++++++++++ .../e2e/sections/file/File.spec.tsx | 6 +++++ tests/support/commands.tsx | 9 ++++--- 13 files changed, 101 insertions(+), 31 deletions(-) create mode 100644 src/sections/file/FileFactory.tsx create mode 100644 src/sections/shared/link-to-page/LinkToPage.tsx create mode 100644 tests/component/sections/shared/link-to-page/LinkToPage.spec.tsx create mode 100644 tests/e2e-integration/e2e/sections/file/File.spec.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 030e967bd..a7db0d900 100644 --- a/.storybook/preview.tsx +++ b/.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) => ( - + + + ) ] diff --git a/src/Router.tsx b/src/Router.tsx index 38d016834..47a48ede1 100644 --- a/src/Router.tsx +++ b/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: }, { - path: `${Route.DATASETS}`, + path: Route.DATASETS, element: DatasetFactory.create() + }, + { + path: Route.FILES, + element: FileFactory.create() } ] } diff --git a/src/files/domain/models/FilePreview.ts b/src/files/domain/models/FilePreview.ts index 28ae70723..439452601 100644 --- a/src/files/domain/models/FilePreview.ts +++ b/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 diff --git a/src/sections/Route.enum.ts b/src/sections/Route.enum.ts index a63752a54..f2d93694e 100644 --- a/src/sections/Route.enum.ts +++ b/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' } diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx index f83f18ba1..5265e2391 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx +++ b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/FileInfoCell.tsx @@ -19,7 +19,7 @@ export function FileInfoCell({ file }: { file: FilePreview }) {
- +
diff --git a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTitle.tsx b/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTitle.tsx index 40e9aa172..4b26ef7bf 100644 --- a/src/sections/dataset/dataset-files/files-table/file-info/file-info-cell/file-info-data/FileTitle.tsx +++ b/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 {name} +export function FileTitle({ id, name }: FileTitleProps) { + return ( + + {name} + + ) } diff --git a/src/sections/file/FileFactory.tsx b/src/sections/file/FileFactory.tsx new file mode 100644 index 000000000..27bec3498 --- /dev/null +++ b/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 + } +} + +function FileWithSearchParams() { + const [searchParams] = useSearchParams() + const searchParamId = searchParams.get('id') ?? undefined + const id = searchParamId ? parseInt(searchParamId) : undefined + + if (!id) { + return + } + + return +} diff --git a/src/sections/shared/link-to-page/LinkToPage.tsx b/src/sections/shared/link-to-page/LinkToPage.tsx new file mode 100644 index 000000000..dd38a28af --- /dev/null +++ b/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 +} + +export function LinkToPage({ children, page, searchParams }: PropsWithChildren) { + const searchParamsString: string = searchParams ? '?' + encodeSearchParamsToURI(searchParams) : '' + + return {children} +} + +const encodeSearchParamsToURI = (searchParams: Record) => { + return Object.entries(searchParams) + .map(([key, value]) => `${key}=${value}`) + .join('&') +} diff --git a/src/stories/WithLayout.tsx b/src/stories/WithLayout.tsx index 2dc1dcc0d..34a5af36d 100644 --- a/src/stories/WithLayout.tsx +++ b/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) => ( - - - }> - } /> - - - + + }> + } /> + + ) diff --git a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileTitle.spec.tsx b/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileTitle.spec.tsx index 536fc64c7..55c45df94 100644 --- a/tests/component/sections/dataset/dataset-files/files-table/files-info/file-info-cell/file-info-data/FileTitle.spec.tsx +++ b/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() + cy.customMount() - 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}`) }) }) diff --git a/tests/component/sections/shared/link-to-page/LinkToPage.spec.tsx b/tests/component/sections/shared/link-to-page/LinkToPage.spec.tsx new file mode 100644 index 000000000..25d166231 --- /dev/null +++ b/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() + cy.findByRole('link').should('have.attr', 'href', '/datasets?foo=bar') + }) + + it('renders a link to the page without search params', () => { + cy.customMount() + cy.findByRole('link').should('have.attr', 'href', '/datasets') + }) +}) diff --git a/tests/e2e-integration/e2e/sections/file/File.spec.tsx b/tests/e2e-integration/e2e/sections/file/File.spec.tsx new file mode 100644 index 000000000..dac419c86 --- /dev/null +++ b/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') + }) +}) diff --git a/tests/support/commands.tsx b/tests/support/commands.tsx index 92229d209..d0f69cdf9 100644 --- a/tests/support/commands.tsx +++ b/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( - - {component} - + + + {component} + + ) })