Merge pull request #530 from IQSS/fix/489-dynamic-root-alias

Fix/489 dynamic root alias

README.md

@@ -219,6 +219,10 @@ The environment is accessible through the following URLs:
 >
 > Given that at the moment the SPA only supports file uploading through direct upload (S3), the storage selector on the create collection
 > page is disabled. The collection is always created using the default storage, which must be S3
+>
+> #### Account Page BreadCrumbs
+>
+> The Account Page has been updated to remove breadcrumbs, as the page is not part of the main navigation.
 
 </details>
 

package.json

@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@faker-js/faker": "7.6.0",
-    "@iqss/dataverse-client-javascript": "2.0.0-alpha.2",
+    "@iqss/dataverse-client-javascript": "2.0.0-alpha.4",
     "@iqss/dataverse-design-system": "*",
     "@istanbuljs/nyc-config-typescript": "1.0.2",
     "@tanstack/react-table": "8.9.2",

src/collection/domain/models/Collection.ts

@@ -15,5 +15,3 @@ export interface CollectionInputLevel {
   include: boolean
   required: boolean
 }
-
-export const ROOT_COLLECTION_ALIAS = 'root'

src/collection/domain/repositories/CollectionRepository.ts

@@ -7,10 +7,10 @@ import { CollectionUserPermissions } from '../models/CollectionUserPermissions'
 import { CollectionDTO } from '../useCases/DTOs/CollectionDTO'
 
 export interface CollectionRepository {
-  getById: (id: string) => Promise<Collection>
+  getById: (id?: string) => Promise<Collection>
   create(collection: CollectionDTO, hostCollection?: string): Promise<number>
-  getFacets(collectionIdOrAlias: number | string): Promise<CollectionFacet[]>
-  getUserPermissions(collectionIdOrAlias: number | string): Promise<CollectionUserPermissions>
+  getFacets(collectionIdOrAlias?: number | string): Promise<CollectionFacet[]>
+  getUserPermissions(collectionIdOrAlias?: number | string): Promise<CollectionUserPermissions>
   publish(collectionIdOrAlias: number | string): Promise<void>
   getItems(
     collectionId: string,

src/collection/domain/useCases/createCollection.ts

@@ -5,7 +5,7 @@ import { CollectionDTO } from './DTOs/CollectionDTO'
 export function createCollection(
   collectionRepository: CollectionRepository,
   collection: CollectionDTO,
-  hostCollection?: string
+  hostCollection: string
 ): Promise<number> {
   return collectionRepository.create(collection, hostCollection).catch((error: WriteError) => {
     throw error

src/collection/domain/useCases/getCollectionById.ts

@@ -3,8 +3,8 @@ import { CollectionRepository } from '../repositories/CollectionRepository'
 
 export async function getCollectionById(
   collectionRepository: CollectionRepository,
-  id: string
-): Promise<Collection | undefined> {
+  id?: string
+): Promise<Collection> {
   return collectionRepository.getById(id).catch((error: Error) => {
     throw new Error(error.message)
   })

src/collection/domain/useCases/getCollectionUserPermissions.ts

@@ -3,7 +3,7 @@ import { CollectionUserPermissions } from '../models/CollectionUserPermissions'
 
 export function getCollectionUserPermissions(
   collectionRepository: CollectionRepository,
-  collectionIdOrAlias: number | string
+  collectionIdOrAlias?: number | string
 ): Promise<CollectionUserPermissions> {
   return collectionRepository.getUserPermissions(collectionIdOrAlias).catch((error: Error) => {
     throw new Error(error.message)

src/collection/infrastructure/repositories/CollectionJSDataverseRepository.ts

@@ -18,7 +18,7 @@ import { CollectionSearchCriteria } from '../../domain/models/CollectionSearchCr
 import { JSCollectionItemsMapper } from '../mappers/JSCollectionItemsMapper'
 
 export class CollectionJSDataverseRepository implements CollectionRepository {
-  getById(id: string): Promise<Collection> {
+  getById(id?: string): Promise<Collection> {
     return getCollection
       .execute(id)
       .then((jsCollection) => JSCollectionMapper.toCollection(jsCollection))
@@ -30,11 +30,11 @@ export class CollectionJSDataverseRepository implements CollectionRepository {
       .then((newCollectionIdentifier) => newCollectionIdentifier)
   }
 
-  getFacets(collectionIdOrAlias: number | string): Promise<CollectionFacet[]> {
+  getFacets(collectionIdOrAlias?: number | string): Promise<CollectionFacet[]> {
     return getCollectionFacets.execute(collectionIdOrAlias).then((facets) => facets)
   }
 
-  getUserPermissions(collectionIdOrAlias: number | string): Promise<CollectionUserPermissions> {
+  getUserPermissions(collectionIdOrAlias?: number | string): Promise<CollectionUserPermissions> {
     return getCollectionUserPermissions
       .execute(collectionIdOrAlias)
       .then((jsCollectionUserPermissions) => jsCollectionUserPermissions)

src/dataset/domain/repositories/DatasetRepository.ts

@@ -8,7 +8,7 @@ export interface DatasetRepository {
   getByPersistentId: (persistentId: string, version?: string) => Promise<Dataset | undefined>
   getLocks(persistentId: string): Promise<DatasetLock[]>
   getByPrivateUrlToken: (privateUrlToken: string) => Promise<Dataset | undefined>
-  create: (dataset: DatasetDTO, collectionId?: string) => Promise<{ persistentId: string }>
+  create: (dataset: DatasetDTO, collectionId: string) => Promise<{ persistentId: string }>
   updateMetadata: (datasetId: string | number, datasetDTO: DatasetDTO) => Promise<void>
   getAllWithCount: (
     collectionId: string,

src/dataset/infrastructure/repositories/DatasetJSDataverseRepository.ts

@@ -32,7 +32,6 @@ import { DatasetDTO } from '../../domain/useCases/DTOs/DatasetDTO'
 import { DatasetDTOMapper } from '../mappers/DatasetDTOMapper'
 import { DatasetsWithCount } from '../../domain/models/DatasetsWithCount'
 import { VersionUpdateType } from '../../domain/models/VersionUpdateType'
-import { ROOT_COLLECTION_ALIAS } from '../../../collection/domain/models/Collection'
 
 const includeDeaccessioned = true
 type DatasetDetails = [JSDataset, string[], string, JSDatasetPermissions, JSDatasetLock[]]
@@ -223,10 +222,7 @@ export class DatasetJSDataverseRepository implements DatasetRepository {
       })
   }
 
-  create(
-    dataset: DatasetDTO,
-    collectionId = ROOT_COLLECTION_ALIAS
-  ): Promise<{ persistentId: string }> {
+  create(dataset: DatasetDTO, collectionId: string): Promise<{ persistentId: string }> {
     return createDataset
       .execute(DatasetDTOMapper.toJSDatasetDTO(dataset), collectionId)
       .then((jsDatasetIdentifiers: JSDatasetIdentifiers) => ({

src/sections/Route.enum.ts

@@ -1,5 +1,3 @@
-import { ROOT_COLLECTION_ALIAS } from '../collection/domain/models/Collection'
-
 export enum Route {
   HOME = '/',
   SIGN_UP = '/dataverseuser.xhtml?editMode=CREATE&redirectPage=%2Fdataverse.xhtml',
@@ -17,11 +15,10 @@ export enum Route {
 }
 
 export const RouteWithParams = {
-  COLLECTIONS: (collectionId?: string) => `/collections/${collectionId ?? 'root'}`,
-  CREATE_COLLECTION: (ownerCollectionId?: string) =>
-    `/collections/${ownerCollectionId ?? ROOT_COLLECTION_ALIAS}/create`,
-  CREATE_DATASET: (collectionId?: string) =>
-    `/datasets/${collectionId ?? ROOT_COLLECTION_ALIAS}/create`
+  COLLECTIONS: (collectionId?: string) =>
+    collectionId ? `/collections/${collectionId}` : Route.COLLECTIONS_BASE,
+  CREATE_COLLECTION: (ownerCollectionId: string) => `/collections/${ownerCollectionId}/create`,
+  CREATE_DATASET: (collectionId: string) => `/datasets/${collectionId}/create`
 }
 
 export enum QueryParamKey {

src/sections/account/Account.module.scss

@@ -1,5 +1,9 @@
 @import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
 
+.header {
+  padding-block: 1rem;
+}
+
 .tab-container {
   padding: 1rem;
 }

src/sections/account/Account.tsx

@@ -1,16 +1,8 @@
-import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { Tabs } from '@iqss/dataverse-design-system'
-import { useLoading } from '../loading/LoadingContext'
 import { AccountHelper, AccountPanelTabKey } from './AccountHelper'
 import { ApiTokenSection } from './api-token-section/ApiTokenSection'
-import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
 import styles from './Account.module.scss'
-import {
-  DvObjectType,
-  UpwardHierarchyNode
-} from '../../shared/hierarchy/domain/models/UpwardHierarchyNode'
-import { ROOT_COLLECTION_ALIAS } from '../../collection/domain/models/Collection'
 
 const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
 
@@ -20,23 +12,10 @@ interface AccountProps {
 
 export const Account = ({ defaultActiveTabKey }: AccountProps) => {
   const { t } = useTranslation('account')
-  const { setIsLoading } = useLoading()
-
-  const rootHierarchy = new UpwardHierarchyNode(
-    'Root',
-    DvObjectType.COLLECTION,
-    ROOT_COLLECTION_ALIAS
-  )
-
-  useEffect(() => {
-    setIsLoading(false)
-  }, [setIsLoading])
 
   return (
     <section>
-      <BreadcrumbsGenerator hierarchy={rootHierarchy} withActionItem actionItemText="Account" />
-
-      <header>
+      <header className={styles['header']}>
         <h1>{t('pageTitle')}</h1>
       </header>
 

src/sections/collection/Collection.tsx

@@ -18,15 +18,15 @@ import styles from './Collection.module.scss'
 
 interface CollectionProps {
   collectionRepository: CollectionRepository
-  collectionId: string
+  collectionIdFromParams: string | undefined
   created: boolean
   published: boolean
   collectionQueryParams: UseCollectionQueryParamsReturnType
   infiniteScrollEnabled?: boolean
 }
 
 export function Collection({
-  collectionId,
+  collectionIdFromParams,
   collectionRepository,
   created,
   published,
@@ -35,9 +35,13 @@ export function Collection({
   useTranslation('collection')
   useScrollTop()
   const { user } = useSession()
-  const { collection, isLoading } = useCollection(collectionRepository, collectionId, published)
+  const { collection, isLoading } = useCollection(
+    collectionRepository,
+    collectionIdFromParams,
+    published
+  )
   const { collectionUserPermissions } = useGetCollectionUserPermissions({
-    collectionIdOrAlias: collectionId,
+    collectionIdOrAlias: collectionIdFromParams,
     collectionRepository
   })
 
@@ -75,23 +79,24 @@ export function Collection({
                 />
               </div>
             )}
+
+            <CollectionItemsPanel
+              key={collection.id}
+              collectionId={collection.id}
+              collectionRepository={collectionRepository}
+              collectionQueryParams={collectionQueryParams}
+              addDataSlot={
+                showAddDataActions ? (
+                  <AddDataActionsButton
+                    collectionId={collection.id}
+                    canAddCollection={canUserAddCollection}
+                    canAddDataset={canUserAddDataset}
+                  />
+                ) : null
+              }
+            />
           </>
         )}
-        <CollectionItemsPanel
-          key={collectionId}
-          collectionId={collectionId}
-          collectionRepository={collectionRepository}
-          collectionQueryParams={collectionQueryParams}
-          addDataSlot={
-            showAddDataActions ? (
-              <AddDataActionsButton
-                collectionId={collectionId}
-                canAddCollection={canUserAddCollection}
-                canAddDataset={canUserAddDataset}
-              />
-            ) : null
-          }
-        />
       </Col>
     </Row>
   )

src/sections/collection/CollectionFactory.tsx

@@ -14,7 +14,7 @@ export class CollectionFactory {
 
 function CollectionWithSearchParams() {
   const collectionQueryParams = useGetCollectionQueryParams()
-  const { collectionId = 'root' } = useParams<{ collectionId: string }>()
+  const { collectionId } = useParams<{ collectionId: string }>()
   const location = useLocation()
   const state = location.state as { published: boolean; created: boolean } | undefined
   const created = state?.created ?? false
@@ -23,7 +23,7 @@ function CollectionWithSearchParams() {
   return (
     <Collection
       collectionRepository={collectionRepository}
-      collectionId={collectionId}
+      collectionIdFromParams={collectionId}
       created={created}
       collectionQueryParams={collectionQueryParams}
       published={published}

src/sections/collection/collection-items-panel/CollectionItemsPanel.tsx

@@ -206,6 +206,7 @@ export const CollectionItemsPanel = ({
         />
 
         <ItemsList
+          parentCollectionAlias={collectionId}
           items={accumulatedItems}
           error={error}
           accumulatedCount={accumulatedCount}

src/sections/collection/collection-items-panel/items-list/ItemsList.tsx

@@ -16,6 +16,7 @@ import { FileCard } from './file-card/FileCard'
 import styles from './ItemsList.module.scss'
 
 interface ItemsListProps {
+  parentCollectionAlias: string
   items: CollectionItem[]
   error: string | null
   accumulatedCount: number
@@ -32,6 +33,7 @@ interface ItemsListProps {
 export const ItemsList = forwardRef(
   (
     {
+      parentCollectionAlias,
       items,
       error,
       accumulatedCount,
@@ -94,7 +96,10 @@ export const ItemsList = forwardRef(
                 {items.map((collectionItem, index) => (
                   <li key={`${collectionItem.type}-${index}`}>
                     {collectionItem?.type === CollectionItemType.COLLECTION && (
-                      <CollectionCard collectionPreview={collectionItem} />
+                      <CollectionCard
+                        parentCollectionAlias={parentCollectionAlias}
+                        collectionPreview={collectionItem}
+                      />
                     )}
                     {collectionItem?.type === CollectionItemType.DATASET && (
                       <DatasetCard datasetPreview={collectionItem} />

src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCard.tsx

@@ -6,15 +6,19 @@ import styles from './CollectionCard.module.scss'
 
 interface CollectionCardProps {
   collectionPreview: CollectionItemTypePreview
+  parentCollectionAlias: string
 }
 
-export function CollectionCard({ collectionPreview }: CollectionCardProps) {
+export function CollectionCard({ collectionPreview, parentCollectionAlias }: CollectionCardProps) {
   return (
     <article className={styles['card-main-container']} data-testid="collection-card">
       <CollectionCardHeader collectionPreview={collectionPreview} />
       <div className={styles['thumbnail-and-info-wrapper']}>
         <CollectionCardThumbnail collectionPreview={collectionPreview} />
-        <CollectionCardInfo collectionPreview={collectionPreview} />
+        <CollectionCardInfo
+          parentCollectionAlias={parentCollectionAlias}
+          collectionPreview={collectionPreview}
+        />
       </div>
     </article>
   )

src/sections/collection/collection-items-panel/items-list/collection-card/CollectionCardInfo.tsx

@@ -1,6 +1,4 @@
-import { useParams } from 'react-router-dom'
 import { Stack } from '@iqss/dataverse-design-system'
-import { ROOT_COLLECTION_ALIAS } from '@/collection/domain/models/Collection'
 import { CollectionItemTypePreview } from '@/collection/domain/models/CollectionItemTypePreview'
 import { DvObjectType } from '@/shared/hierarchy/domain/models/UpwardHierarchyNode'
 import { DateHelper } from '@/shared/helpers/DateHelper'
@@ -10,11 +8,15 @@ import styles from './CollectionCard.module.scss'
 
 interface CollectionCardInfoProps {
   collectionPreview: CollectionItemTypePreview
+  parentCollectionAlias: string
 }
 
-export function CollectionCardInfo({ collectionPreview }: CollectionCardInfoProps) {
-  const { collectionId = ROOT_COLLECTION_ALIAS } = useParams<{ collectionId: string }>()
-  const isStandingOnParentCollectionPage = collectionPreview.parentCollectionAlias === collectionId
+export function CollectionCardInfo({
+  collectionPreview,
+  parentCollectionAlias
+}: CollectionCardInfoProps) {
+  const isStandingOnParentCollectionPage =
+    collectionPreview.parentCollectionAlias === parentCollectionAlias
 
   return (
     <div className={styles['card-info-container']}>