diff --git a/cypress/e2e/item/home/home.cy.ts b/cypress/e2e/item/home/home.cy.ts index 93283a3f0..79c15c428 100644 --- a/cypress/e2e/item/home/home.cy.ts +++ b/cypress/e2e/item/home/home.cy.ts @@ -1,6 +1,6 @@ import { ITEM_PAGE_SIZE } from '@/config/constants'; -import i18n, { BUILDER_NAMESPACE } from '../../../../src/config/i18n'; +import i18n from '../../../../src/config/i18n'; import { HOME_PATH, ITEMS_PATH } from '../../../../src/config/paths'; import { ACCESSIBLE_ITEMS_NEXT_PAGE_BUTTON_SELECTOR, @@ -9,21 +9,16 @@ import { ITEMS_GRID_PAGINATION_ID, ITEMS_TABLE_ROW, ITEM_SEARCH_INPUT_ID, - NAVIGATION_ROOT_ID, buildItemCard, buildItemsTableRowIdAttribute, buildItemsTableRowSelector, } from '../../../../src/config/selectors'; import { ItemLayoutMode } from '../../../../src/enums'; -import { BUILDER } from '../../../../src/langs/constants'; import { SAMPLE_ITEMS, generateOwnItems } from '../../../fixtures/items'; import { CURRENT_USER } from '../../../fixtures/members'; import { NAVIGATION_LOAD_PAUSE } from '../../../support/constants'; import { ItemForTest } from '../../../support/types'; -const translateBuilder = (key: string) => - i18n.t(key, { ns: BUILDER_NAMESPACE }); - const sampleItems = generateOwnItems(30); // register a custom one time interceptor to listen specifically @@ -169,11 +164,6 @@ describe('Home', () => { } }); - // root title - cy.get(`#${NAVIGATION_ROOT_ID}`).contains( - translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE), - ); - // visit child const { id: childChildId } = SAMPLE_ITEMS.items[3]; cy.goToItemInGrid(childChildId); @@ -181,11 +171,6 @@ describe('Home', () => { // expect no children cy.get(`#${ITEMS_GRID_NO_ITEM_ID}`).should('exist'); - // root title - cy.get(`#${NAVIGATION_ROOT_ID}`).contains( - translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE), - ); - // return parent with navigation and should display children cy.wait(NAVIGATION_LOAD_PAUSE); cy.goToItemWithNavigation(childId); @@ -200,10 +185,6 @@ describe('Home', () => { cy.get(`#${buildItemCard(item.id)}`).should('exist'); } }); - // root title - cy.get(`#${NAVIGATION_ROOT_ID}`).contains( - translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE), - ); }); }); }); diff --git a/cypress/e2e/item/shared/sharedItems.cy.ts b/cypress/e2e/item/shared/sharedItems.cy.ts deleted file mode 100644 index 19f631055..000000000 --- a/cypress/e2e/item/shared/sharedItems.cy.ts +++ /dev/null @@ -1,73 +0,0 @@ -import i18n, { BUILDER_NAMESPACE } from '@/config/i18n'; -import { - ITEM_MENU_MOVE_BUTTON_CLASS, - NAVIGATION_ROOT_ID, - buildItemCard, - buildItemMenu, - buildItemMenuButtonId, -} from '@/config/selectors'; -import { BUILDER } from '@/langs/constants'; - -import { SHARED_ITEMS_PATH } from '../../../../src/config/paths'; -import ItemLayoutMode from '../../../../src/enums/itemLayoutMode'; -import { SAMPLE_ITEMS } from '../../../fixtures/items'; -import { MEMBERS } from '../../../fixtures/members'; - -const translateBuilder = (key: string) => - i18n.t(key, { ns: BUILDER_NAMESPACE }); - -describe('Shared Items', () => { - beforeEach(() => { - cy.setUpApi({ ...SAMPLE_ITEMS, currentMember: MEMBERS.BOB }); - cy.visit(SHARED_ITEMS_PATH); - cy.wait(5000); - }); - describe('Grid', () => { - it('visit Shared Items', () => { - cy.switchMode(ItemLayoutMode.Grid); - - cy.wait('@getSharedItems').then(({ response: { body } }) => { - // check item is created and displayed - for (const item of body) { - cy.get(`#${buildItemCard(item.id)}`).should('exist'); - } - }); - - // visit child - const { id: childId } = SAMPLE_ITEMS.items[1]; - cy.goToItemInGrid(childId); - - // should get children - cy.wait('@getChildren').then(({ response: { body } }) => { - // check item is created and displayed - for (const item of body) { - cy.get(`#${buildItemCard(item.id)}`).should('exist'); - } - }); - - // breadcrumb navigation - cy.get(`#${NAVIGATION_ROOT_ID}`).contains( - translateBuilder(BUILDER.NAVIGATION_SHARED_ITEMS_TITLE), - ); - }); - it('move should be prevented', () => { - cy.switchMode(ItemLayoutMode.Grid); - const itemId = SAMPLE_ITEMS.items[1].id; - const menuSelector = `#${buildItemMenuButtonId(itemId)}`; - cy.get(menuSelector).click(); - cy.get( - `#${buildItemMenu(itemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`, - ).should('not.exist'); - }); - }); - - it('move should be prevented in list', () => { - cy.switchMode(ItemLayoutMode.List); - const itemId = SAMPLE_ITEMS.items[1].id; - const menuSelector = `#${buildItemMenuButtonId(itemId)}`; - cy.get(menuSelector).click(); - cy.get(`#${buildItemMenu(itemId)} .${ITEM_MENU_MOVE_BUTTON_CLASS}`).should( - 'not.exist', - ); - }); -}); diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts index 9d5e94914..6e50a9102 100644 --- a/cypress/e2e/item/view/viewFolder.cy.ts +++ b/cypress/e2e/item/view/viewFolder.cy.ts @@ -1,8 +1,8 @@ import i18n from '../../../../src/config/i18n'; -import { HOME_PATH, buildItemPath } from '../../../../src/config/paths'; +import { buildItemPath } from '../../../../src/config/paths'; import { ITEM_SEARCH_INPUT_ID, - NAVIGATION_ROOT_ID, + NAVIGATION_HOME_ID, buildItemCard, buildItemsTableRowIdAttribute, } from '../../../../src/config/selectors'; @@ -47,7 +47,7 @@ describe('View Folder', () => { expectFolderViewScreenLayout({ item: SAMPLE_ITEMS.items[0] }); // visit home - cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click(); + cy.get(`#${NAVIGATION_HOME_ID}`).click(); // should get accessible items cy.wait('@getAccessibleItems').then(({ response: { body } }) => { @@ -105,7 +105,7 @@ describe('View Folder', () => { expectFolderViewScreenLayout({ item: SAMPLE_ITEMS.items[0] }); // visit home - cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click(); + cy.get(`#${NAVIGATION_HOME_ID}`).click(); cy.wait('@getAccessibleItems').then(({ response: { body } }) => { // check item is created and displayed diff --git a/src/components/layout/Navigation.tsx b/src/components/layout/Navigation.tsx index 5ad873d2a..e0d01069c 100644 --- a/src/components/layout/Navigation.tsx +++ b/src/components/layout/Navigation.tsx @@ -1,30 +1,23 @@ -import { useLocation, useParams } from 'react-router-dom'; +import { Link, useLocation, useParams } from 'react-router-dom'; -import { HomeMenu, ItemMenu, Navigation } from '@graasp/ui'; +import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos'; +import { IconButton } from '@mui/material'; + +import { Navigation } from '@graasp/ui'; + +import { Home } from 'lucide-react'; import { useBuilderTranslation } from '../../config/i18n'; -import { - BOOKMARKED_ITEMS_PATH, - HOME_PATH, - SHARED_ITEMS_PATH, - buildItemPath, -} from '../../config/paths'; +import { HOME_PATH, buildItemPath } from '../../config/paths'; import { hooks } from '../../config/queryClient'; import { + NAVIGATION_HOME_ID, NAVIGATION_ROOT_ID, buildNavigationLink, } from '../../config/selectors'; -import { BUILDER } from '../../langs/constants'; import { buildExtraItems } from './utils'; -const { - useItem, - useParents, - useCurrentMember, - useChildren, - useOwnItems, - useSharedItems, -} = hooks; +const { useItem, useParents, useCurrentMember, useChildren } = hooks; const Navigator = (): JSX.Element | null => { const { t: translateBuilder } = useBuilderTranslation(); @@ -42,69 +35,31 @@ const Navigator = (): JSX.Element | null => { enabled: !!itemPath, }); - const isParentOwned = - currentMember && - (item?.creator?.id ?? parents?.[0]?.creator?.id) === currentMember?.id; - if (isItemLoading || areParentsLoading) { return null; } const buildToItemPath = (id: string) => buildItemPath(id); - const menu = [ - // todo: remove distinction -> not a good idea to show the whole root in arrow - { - name: translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE), - id: 'home', - to: HOME_PATH, - }, - { - name: translateBuilder(BUILDER.NAVIGATION_SHARED_ITEMS_TITLE), - id: 'shared', - to: SHARED_ITEMS_PATH, - }, - { - name: translateBuilder(BUILDER.NAVIGATION_BOOKMARKED_ITEMS_TITLE), - id: 'bookmark', - to: BOOKMARKED_ITEMS_PATH, - }, - ]; - const renderRoot = () => { // no access to root if signed out if (!currentMember) { return null; } - const selected = - isParentOwned || pathname === HOME_PATH ? menu[0] : menu[1]; - return ( <> - - + + + + + + ); }; - if ( - item === undefined && - pathname !== SHARED_ITEMS_PATH && - pathname !== HOME_PATH - ) { + if (item === undefined && pathname !== HOME_PATH) { return null; } diff --git a/src/config/selectors.ts b/src/config/selectors.ts index d6a3b5dd7..235ded49f 100644 --- a/src/config/selectors.ts +++ b/src/config/selectors.ts @@ -254,6 +254,7 @@ export const buildInvitationTableRowSelector = (id: string): string => export const ITEM_RESEND_INVITATION_BUTTON_CLASS = 'itemResendInvitationButton'; export const CREATE_MEMBERSHIP_FORM_ID = 'createMembershipFormId'; export const NAVIGATION_ROOT_ID = 'navigationRoot'; +export const NAVIGATION_HOME_ID = 'navigationHome'; export const HEADER_MEMBER_MENU_BUTTON_ID = 'headerMemberMenuButton'; export const HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID = 'headerMemberMenuSeeProfileButton';