fix: remove Breadcrumbs from Account.tsx

README.md

@@ -219,7 +219,11 @@ 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>
 
 <p align="right">(<a href="#readme-top">back to top</a>)</p>

src/sections/account/Account.module.scss

@@ -1,5 +1,10 @@
 @import 'node_modules/@iqss/dataverse-design-system/src/lib/assets/styles/design-tokens/colors.module';
 
+.header {
+  margin-bottom: 20px;
+  padding: 20px 0;
+}
+
 .tab-container {
   padding: 1rem;
 }

src/sections/account/Account.tsx

@@ -2,48 +2,20 @@ import { useTranslation } from 'react-i18next'
 import { Tabs } from '@iqss/dataverse-design-system'
 import { AccountHelper, AccountPanelTabKey } from './AccountHelper'
 import { ApiTokenSection } from './api-token-section/ApiTokenSection'
-import { BreadcrumbsGenerator } from '../shared/hierarchy/BreadcrumbsGenerator'
-import { useCollection } from '@/sections/collection/useCollection'
-import { useLoading } from '../loading/LoadingContext'
-import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
 import styles from './Account.module.scss'
-import {
-  DvObjectType,
-  UpwardHierarchyNode
-} from '../../shared/hierarchy/domain/models/UpwardHierarchyNode'
-
-import { useEffect } from 'react'
-import { BreadcrumbsSkeleton } from '@/sections/shared/hierarchy/BreadcrumbsSkeleton'
 
 const tabsKeys = AccountHelper.ACCOUNT_PANEL_TABS_KEYS
 
 interface AccountProps {
   defaultActiveTabKey: AccountPanelTabKey
-  collectionRepository: CollectionRepository
 }
 
-export const Account = ({ defaultActiveTabKey, collectionRepository }: AccountProps) => {
+export const Account = ({ defaultActiveTabKey }: AccountProps) => {
   const { t } = useTranslation('account')
-  const { collection, isLoading: collectionIsLoading } = useCollection(collectionRepository)
-  const { setIsLoading } = useLoading()
-
-  useEffect(() => {
-    setIsLoading(collectionIsLoading)
-  }, [collectionIsLoading, setIsLoading])
 
-  if (collectionIsLoading || !collection) {
-    return <BreadcrumbsSkeleton />
-  }
-  const rootHierarchy = new UpwardHierarchyNode(
-    collection.name,
-    DvObjectType.COLLECTION,
-    collection.id
-  )
   return (
     <section>
-      <BreadcrumbsGenerator hierarchy={rootHierarchy} withActionItem actionItemText="Account" />
-
-      <header>
+      <header className={styles['header']}>
         <h1>{t('pageTitle')}</h1>
       </header>
 

src/sections/account/AccountFactory.tsx

@@ -2,9 +2,6 @@ import { ReactElement } from 'react'
 import { useSearchParams } from 'react-router-dom'
 import { AccountHelper } from './AccountHelper'
 import { Account } from './Account'
-import { CollectionJSDataverseRepository } from '@/collection/infrastructure/repositories/CollectionJSDataverseRepository'
-
-const collectionRepository = new CollectionJSDataverseRepository()
 
 export class AccountFactory {
   static create(): ReactElement {
@@ -16,10 +13,5 @@ function AccountWithSearchParams() {
   const [searchParams] = useSearchParams()
   const defaultActiveTabKey = AccountHelper.defineSelectedTabKey(searchParams)
 
-  return (
-    <Account
-      collectionRepository={collectionRepository}
-      defaultActiveTabKey={defaultActiveTabKey}
-    />
-  )
+  return <Account defaultActiveTabKey={defaultActiveTabKey} />
 }

src/stories/collection/CollectionErrorMockRepository.ts

@@ -7,7 +7,7 @@ import { CollectionFacet } from '../../collection/domain/models/CollectionFacet'
 import { CollectionMockRepository } from './CollectionMockRepository'
 
 export class CollectionErrorMockRepository extends CollectionMockRepository {
-  getById(_id?: string): Promise<Collection> {
+  getById(_id: string): Promise<Collection> {
     return new Promise((_resolve, reject) => {
       setTimeout(() => {
         reject('Something went wrong')

tests/component/sections/account/Account.spec.tsx

@@ -1,27 +1,16 @@
 import { Account } from '../../../../src/sections/account/Account'
 import { AccountHelper } from '../../../../src/sections/account/AccountHelper'
-import { CollectionRepository } from '@/collection/domain/repositories/CollectionRepository'
-import { CollectionMother } from '@tests/component/collection/domain/models/CollectionMother'
-const collectionRepository = {} as CollectionRepository
-const collection = CollectionMother.create({ name: 'Root' })
 
 describe('Account', () => {
-  beforeEach(() => {
-    collectionRepository.getById = cy.stub().resolves(collection)
-  })
-  it('should render the correct breadcrumbs', () => {
+  it('should render the component', () => {
     cy.mountAuthenticated(
-      <Account
-        collectionRepository={collectionRepository}
-        defaultActiveTabKey={AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken}
-      />
+      <Account defaultActiveTabKey={AccountHelper.ACCOUNT_PANEL_TABS_KEYS.apiToken} />
     )
 
-    cy.findByRole('link', { name: 'Root' }).should('exist')
-
-    cy.get('li[aria-current="page"]')
-      .should('exist')
-      .should('have.text', 'Account')
-      .should('have.class', 'active')
+    cy.get('h1').should('contain.text', 'Account')
+    cy.findByRole('tab', { name: 'My Data' }).should('exist').and('be.disabled')
+    cy.findByRole('tab', { name: 'Account Information' }).should('exist').and('be.disabled')
+    cy.findByRole('tab', { name: 'Notifications' }).should('exist').and('be.disabled')
+    cy.findByRole('tab', { name: 'API Token' }).should('be.enabled')
   })
 })