Merge pull request #453 from IQSS/feat/437-collection-page-url

437 - Collection page url

src/sections/Route.enum.ts

@@ -8,11 +8,12 @@ export enum Route {
   UPLOAD_DATASET_FILES = '/datasets/upload-files',
   EDIT_DATASET_METADATA = '/datasets/edit-metadata',
   FILES = '/files',
-  COLLECTIONS = '/collections',
+  COLLECTIONS = '/collections/:collectionId',
   CREATE_COLLECTION = '/collections/:ownerCollectionId/create'
 }
 
 export const RouteWithParams = {
+  COLLECTIONS: (collectionId?: string) => `/collections/${collectionId ?? 'root'}`,
   CREATE_COLLECTION: (ownerCollectionId?: string) =>
     `/collections/${ownerCollectionId ?? 'root'}/create`
 }

src/sections/collection/CollectionFactory.tsx

@@ -1,7 +1,7 @@
 import { ReactElement } from 'react'
 import { Collection } from './Collection'
 import { DatasetJSDataverseRepository } from '../../dataset/infrastructure/repositories/DatasetJSDataverseRepository'
-import { useLocation, useSearchParams } from 'react-router-dom'
+import { useLocation, useParams, useSearchParams } from 'react-router-dom'
 import { CollectionJSDataverseRepository } from '../../collection/infrastructure/repositories/CollectionJSDataverseRepository'
 import { INFINITE_SCROLL_ENABLED } from './config'
 
@@ -15,9 +15,9 @@ export class CollectionFactory {
 
 function CollectionWithSearchParams() {
   const [searchParams] = useSearchParams()
+  const { collectionId = 'root' } = useParams<{ collectionId: string }>()
   const location = useLocation()
   const page = searchParams.get('page') ? parseInt(searchParams.get('page') as string) : undefined
-  const id = searchParams.get('id') ? (searchParams.get('id') as string) : 'root'
   const state = location.state as { created: boolean } | undefined
   const created = state?.created ?? false
 
@@ -26,7 +26,7 @@ function CollectionWithSearchParams() {
       repository={repository}
       datasetRepository={datasetRepository}
       page={page}
-      id={id}
+      id={collectionId}
       created={created}
       infiniteScrollEnabled={INFINITE_SCROLL_ENABLED}
     />

src/sections/collection/datasets-list/dataset-card/DatasetCardHeader.tsx

@@ -8,6 +8,7 @@ import {
   DatasetVersion,
   DatasetNonNumericVersionSearchParam
 } from '../../../../dataset/domain/models/Dataset'
+import { DvObjectType } from '../../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
 
 interface DatasetCardHeaderProps {
   persistentId: string
@@ -29,6 +30,7 @@ export function DatasetCardHeader({ persistentId, version }: DatasetCardHeaderPr
       <div className={styles.title}>
         <LinkToPage
           page={Route.DATASETS}
+          type={DvObjectType.DATASET}
           searchParams={getSearchParams(persistentId, version.publishingStatus)}>
           {version.title}
         </LinkToPage>

src/sections/collection/datasets-list/dataset-card/DatasetCardThumbnail.tsx

@@ -3,6 +3,7 @@ import { LinkToPage } from '../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../Route.enum'
 import { DatasetThumbnail } from '../../../dataset/dataset-thumbnail/DatasetThumbnail'
 import { DatasetPublishingStatus, DatasetVersion } from '../../../../dataset/domain/models/Dataset'
+import { DvObjectType } from '../../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
 
 interface DatasetCardThumbnailProps {
   persistentId: string
@@ -17,7 +18,10 @@ export function DatasetCardThumbnail({
 }: DatasetCardThumbnailProps) {
   return (
     <div className={styles.thumbnail}>
-      <LinkToPage page={Route.DATASETS} searchParams={{ persistentId: persistentId }}>
+      <LinkToPage
+        page={Route.DATASETS}
+        type={DvObjectType.DATASET}
+        searchParams={{ persistentId: persistentId }}>
         <DatasetThumbnail
           title={version.title}
           thumbnail={thumbnail}

src/sections/create-collection/collection-form/top-fields-section/IdentifierField.tsx

@@ -44,9 +44,7 @@ export const IdentifierField = ({ rules }: IdentifierFieldProps) => {
         render={({ field: { onChange, ref, value }, fieldState: { invalid, error } }) => (
           <Col>
             <Form.InputGroup hasValidation>
-              <Form.InputGroup.Text>
-                {window.location.origin}/spa/collections/?id=
-              </Form.InputGroup.Text>
+              <Form.InputGroup.Text>{window.location.origin}/spa/collections/</Form.InputGroup.Text>
               <Form.Group.Input
                 type="text"
                 aria-label="identifier"

src/sections/create-collection/collection-form/useSubmitCollection.ts

@@ -10,7 +10,7 @@ import {
   INPUT_LEVELS_GROUPER,
   METADATA_BLOCKS_NAMES_GROUPER
 } from './CollectionForm'
-import { Route } from '../../Route.enum'
+import { RouteWithParams } from '../../Route.enum'
 import { JSDataverseWriteErrorHandler } from '../../../shared/helpers/JSDataverseWriteErrorHandler'
 import { CollectionFormHelper } from './CollectionFormHelper'
 
@@ -81,7 +81,8 @@ export function useSubmitCollection(
       .then(() => {
         setSubmitError(null)
         setSubmissionStatus(SubmissionStatus.SubmitComplete)
-        navigate(`${Route.COLLECTIONS}?id=${newCollection.alias}`, {
+
+        navigate(RouteWithParams.COLLECTIONS(newCollection.alias), {
           state: { created: true }
         })
         return

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

@@ -1,5 +1,6 @@
 import { LinkToPage } from '../../../../../../shared/link-to-page/LinkToPage'
 import { Route } from '../../../../../../Route.enum'
+import { DvObjectType } from '../../../../../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
 
 interface FileTitleProps {
   id: number
@@ -8,7 +9,7 @@ interface FileTitleProps {
 
 export function FileTitle({ id, name }: FileTitleProps) {
   return (
-    <LinkToPage page={Route.FILES} searchParams={{ id: id.toString() }}>
+    <LinkToPage page={Route.FILES} type={DvObjectType.FILE} searchParams={{ id: id.toString() }}>
       {name}
     </LinkToPage>
   )

src/sections/shared/hierarchy/BreadcrumbsGenerator.tsx

@@ -1,5 +1,8 @@
 import { Breadcrumb } from '@iqss/dataverse-design-system'
-import { UpwardHierarchyNode } from '../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
+import {
+  DvObjectType,
+  UpwardHierarchyNode
+} from '../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
 import { LinkToPage } from '../link-to-page/LinkToPage'
 import { Route } from '../../Route.enum'
 
@@ -67,7 +70,7 @@ export function BreadcrumbsGenerator({
   )
 }
 
-const dvObjectTypeToRoute: Record<string, Route> = {
+const dvObjectTypeToRoute: Record<DvObjectType, Route> = {
   dataset: Route.DATASETS,
   collection: Route.COLLECTIONS,
   file: Route.FILES
@@ -81,14 +84,15 @@ const LinkToDvObject = ({
   version
 }: {
   name: string
-  type: string
+  type: DvObjectType
   id: string
   persistentId?: string
   version?: string
 }) => {
   return (
     <LinkToPage
       page={dvObjectTypeToRoute[type]}
+      type={type}
       searchParams={{
         ...(persistentId ? { persistentId } : { id }),
         ...(version ? { version } : {})

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

@@ -1,15 +1,26 @@
 import { Link } from 'react-router-dom'
 import { PropsWithChildren } from 'react'
-import { Route } from '../../Route.enum'
+import { Route, RouteWithParams } from '../../Route.enum'
+import { DvObjectType } from '../../../shared/hierarchy/domain/models/UpwardHierarchyNode'
 
 interface LinkToPageProps {
   page: Route
   searchParams?: Record<string, string>
+  type: DvObjectType
 }
 
-export function LinkToPage({ children, page, searchParams }: PropsWithChildren<LinkToPageProps>) {
+export function LinkToPage({
+  children,
+  page,
+  searchParams,
+  type
+}: PropsWithChildren<LinkToPageProps>) {
   const searchParamsString: string = searchParams ? '?' + encodeSearchParamsToURI(searchParams) : ''
 
+  if (type === DvObjectType.COLLECTION && searchParams && 'id' in searchParams) {
+    return <Link to={RouteWithParams.COLLECTIONS(searchParams.id)}>{children}</Link>
+  }
+
   return <Link to={`${page}${searchParamsString}`}>{children}</Link>
 }
 

tests/component/sections/dataset/dataset-files/DatasetFilesScrollable.spec.tsx

@@ -67,6 +67,7 @@ const settingsRepository = {} as SettingRepository
 
 describe('DatasetFilesScrollable', () => {
   beforeEach(() => {
+    cy.viewport(1280, 720)
     fileRepository.getAllByDatasetPersistentIdWithCount = cy.stub().resolves(testFiles)
     fileRepository.getFilesCountInfoByDatasetPersistentId = cy.stub().resolves(testFilesCountInfo)
     fileRepository.getFilesTotalDownloadSizeByDatasetPersistentId = cy.stub().resolves(19900)
@@ -494,7 +495,9 @@ describe('DatasetFilesScrollable', () => {
       cy.findByRole('columnheader', { name: '10 of 200 Files displayed' }).should('exist')
       cy.get('table > thead > tr > th > input[type=checkbox]').click()
       cy.findByText('10 files are currently selected.').should('exist')
-      cy.findByRole('button', { name: 'Select all 200 files in this dataset.' }).click()
+      cy.findByRole('button', { name: 'Select all 200 files in this dataset.' }).click({
+        force: true
+      })
       cy.findByText('200 files are currently selected.').should('exist')
 
       cy.findByTestId('scrollable-files-container').as('scrollableFilesContainer')

tests/component/sections/shared/hierarchy/BreadcrumbsGenerator.spec.tsx

@@ -27,7 +27,7 @@ describe('BreadcrumbsGenerator', () => {
       .should('have.attr', 'href', '/datasets?persistentId=doi:10.5072/FK2/ABC123&version=1.0')
     cy.findByRole('link', { name: 'Collection' })
       .should('exist')
-      .should('have.attr', 'href', '/collections?id=collection1')
+      .should('have.attr', 'href', '/collections/collection1')
     cy.findByRole('link', { name: 'Root' }).should('have.attr', 'href', '/')
   })
 

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

@@ -1,14 +1,28 @@
 import { LinkToPage } from '../../../../../src/sections/shared/link-to-page/LinkToPage'
 import { Route } from '../../../../../src/sections/Route.enum'
+import { DvObjectType } from '../../../../../src/shared/hierarchy/domain/models/UpwardHierarchyNode'
 
 describe('LinkToPage', () => {
   it('renders a link to the page with the given search params', () => {
-    cy.customMount(<LinkToPage page={Route.DATASETS} searchParams={{ foo: 'bar' }} />)
+    cy.customMount(
+      <LinkToPage page={Route.DATASETS} type={DvObjectType.DATASET} 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.customMount(<LinkToPage page={Route.DATASETS} type={DvObjectType.DATASET} />)
     cy.findByRole('link').should('have.attr', 'href', '/datasets')
   })
+
+  it('renders a link to the collection page with the given id', () => {
+    cy.customMount(
+      <LinkToPage
+        page={Route.COLLECTIONS}
+        searchParams={{ id: 'collection1' }}
+        type={DvObjectType.COLLECTION}
+      />
+    )
+    cy.findByRole('link').should('have.attr', 'href', '/collections/collection1')
+  })
 })

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

@@ -123,7 +123,7 @@ describe('Collection Page', () => {
 
   it('displays a collection different from the root when accessing a subcollection', () => {
     cy.wrap(CollectionHelper.create('collection-1')).then(() => {
-      cy.visit('/spa/collections?id=collection-1')
+      cy.visit('/spa/collections/collection-1')
 
       cy.findAllByText(/Scientific Research/i).should('exist')
       cy.findByText(/Dataverse Admin/i).should('exist')
@@ -135,7 +135,7 @@ describe('Collection Page', () => {
     cy.wrap(CollectionHelper.create(collectionId)).then(() => {
       cy.wrap(DatasetHelper.createMany(12, collectionId), { timeout: 10_000 }).then(() => {
         cy.wait(2_000) // Wait for the datasets to be created
-        cy.visit(`/spa/collections?id=${collectionId}`)
+        cy.visit(`/spa/collections/${collectionId}`)
 
         cy.findAllByText(/Scientific Research/i).should('exist')
         cy.findByText(/Dataverse Admin/i).should('exist')

tests/e2e-integration/e2e/sections/create-collection/CreateCollection.spec.tsx

@@ -1,4 +1,5 @@
 import { TestsUtils } from '../../../shared/TestsUtils'
+import { faker } from '@faker-js/faker'
 
 describe('Create Collection', () => {
   before(() => {
@@ -12,13 +13,18 @@ describe('Create Collection', () => {
   it('navigates to the collection page after submitting a valid form', () => {
     cy.visit('/spa/collections/root/create')
 
-    cy.findByLabelText(/^Identifier/i).type('some-alias')
+    const collectionName = faker.lorem.words(3)
+
+    cy.findByLabelText(/^Collection Name/i).clear()
+    cy.findByLabelText(/^Collection Name/i).type(collectionName)
+
+    cy.findByRole('button', { name: 'Apply suggestion' }).click()
 
     cy.findByLabelText(/^Category/i).select(1)
 
     cy.findByRole('button', { name: 'Create Collection' }).click()
 
-    cy.findByRole('heading', { name: 'Dataverse Admin Collection' }).should('exist')
+    cy.findByRole('heading', { name: collectionName }).should('exist')
     cy.findByText('Success!').should('exist')
   })
 })