feat: use graasp ui breadcrumb navigation (#679)

* refactor: use graasp ui navigation
graasp · Jun 26, 2023 · 78f5980 · 78f5980
1 parent b6269b0
commit 78f5980
Show file tree

Hide file tree

Showing 11 changed files with 206 additions and 1,006 deletions.
diff --git a/cypress/e2e/item/publish/tags.cy.ts b/cypress/e2e/item/publish/tags.cy.ts
@@ -26,10 +26,9 @@ const visitItemPage = (item) => {
 };
 
 describe('Customized Tags', () => {
-
   it('Display item without tags', () => {
     // check for not displaying if no tags
-    const item = PUBLISHED_ITEM
+    const item = PUBLISHED_ITEM;
     cy.setUpApi({ items: [item] });
     cy.visit(buildItemPath(item.id));
     openPublishItemTab(item.id);

diff --git a/cypress/e2e/item/share/publicItems.cy.ts b/cypress/e2e/item/share/publicItems.cy.ts
@@ -1,4 +1,5 @@
 import { StatusCodes } from 'http-status-codes';
+
 import { buildItemPath } from '../../../../src/config/paths';
 import { ITEM_LOGIN_SCREEN_FORBIDDEN_ID } from '../../../../src/config/selectors';
 import { SAMPLE_PUBLIC_ITEMS } from '../../../fixtures/items';
@@ -16,7 +17,7 @@ describe('Public Items', () => {
       const item = SAMPLE_PUBLIC_ITEMS.items[4];
       cy.visit(buildItemPath(item.id));
       cy.wait('@getItem').then(({ response: { body } }) => {
-        expect(body.id).to.equal(item.id)
+        expect(body.id).to.equal(item.id);
       });
       expectFolderViewScreenLayout({ item, currentMember });
     });
@@ -30,7 +31,7 @@ describe('Public Items', () => {
       const item = SAMPLE_PUBLIC_ITEMS.items[4];
       cy.visit(buildItemPath(item.id));
       cy.wait('@getItem').then(({ response: { body } }) => {
-        expect(body.id).to.equal(item.id)
+        expect(body.id).to.equal(item.id);
       });
       expectFolderViewScreenLayout({ item, currentMember });
     });
@@ -44,7 +45,7 @@ describe('Public Items', () => {
       const item = SAMPLE_PUBLIC_ITEMS.items[2];
       cy.visit(buildItemPath(item.id));
       cy.wait('@getItem').then(({ response: { body } }) => {
-        expect(body.id).to.equal(item.id)
+        expect(body.id).to.equal(item.id);
       });
       expectFolderViewScreenLayout({ item, currentMember });
     });
@@ -60,7 +61,7 @@ describe('Public Items', () => {
       const item = SAMPLE_PUBLIC_ITEMS.items[1];
       cy.visit(buildItemPath(item.id));
       cy.wait('@getItem').then(({ response: { statusCode } }) => {
-        expect(statusCode).to.equal(StatusCodes.UNAUTHORIZED)
+        expect(statusCode).to.equal(StatusCodes.UNAUTHORIZED);
       });
       cy.get(`#${ITEM_LOGIN_SCREEN_FORBIDDEN_ID}`).should('exist');
     });
@@ -74,7 +75,7 @@ describe('Public Items', () => {
       const item = SAMPLE_PUBLIC_ITEMS.items[1];
       cy.visit(buildItemPath(item.id));
       cy.wait('@getItem').then(({ response: { statusCode } }) => {
-        expect(statusCode).to.equal(StatusCodes.UNAUTHORIZED)
+        expect(statusCode).to.equal(StatusCodes.UNAUTHORIZED);
       });
       cy.get(`#${ITEM_LOGIN_SCREEN_FORBIDDEN_ID}`).should('exist');
     });
@@ -88,7 +89,7 @@ describe('Public Items', () => {
       const item = SAMPLE_PUBLIC_ITEMS.items[6];
       cy.visit(buildItemPath(item.id));
       cy.wait('@getItem').then(({ response: { statusCode } }) => {
-        expect(statusCode).to.equal(StatusCodes.UNAUTHORIZED)
+        expect(statusCode).to.equal(StatusCodes.UNAUTHORIZED);
       });
       cy.get(`#${ITEM_LOGIN_SCREEN_FORBIDDEN_ID}`).should('exist');
     });

diff --git a/cypress/e2e/item/view/viewFolder.cy.ts b/cypress/e2e/item/view/viewFolder.cy.ts
@@ -16,7 +16,6 @@ import {
   ITEMS_GRID_NO_ITEM_ID,
   ITEMS_GRID_PAGINATION_ID,
   ITEMS_TABLE_ROW,
-  NAVIGATION_HOME_LINK_ID,
   NAVIGATION_ROOT_ID,
   buildItemCard,
   buildItemsTableRowIdAttribute,
@@ -78,8 +77,7 @@ describe('View Folder', () => {
       );
 
       // root title
-      cy.get(`#${NAVIGATION_ROOT_ID}`).should(
-        'have.text',
+      cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
         translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
       );
 
@@ -91,8 +89,7 @@ describe('View Folder', () => {
       cy.get(`#${ITEMS_GRID_NO_ITEM_ID}`).should('exist');
 
       // root title
-      cy.get(`#${NAVIGATION_ROOT_ID}`).should(
-        'have.text',
+      cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
         translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
       );
 
@@ -111,8 +108,7 @@ describe('View Folder', () => {
         }
       });
       // root title
-      cy.get(`#${NAVIGATION_ROOT_ID}`).should(
-        'have.text',
+      cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
         translateBuilder(BUILDER.NAVIGATION_MY_ITEMS_TITLE),
       );
     });
@@ -142,8 +138,7 @@ describe('View Folder', () => {
       });
 
       // breadcrumb navigation
-      cy.get(`#${NAVIGATION_ROOT_ID}`).should(
-        'have.text',
+      cy.get(`#${NAVIGATION_ROOT_ID}`).contains(
         translateBuilder(BUILDER.NAVIGATION_SHARED_ITEMS_TITLE),
       );
     });
@@ -167,7 +162,7 @@ describe('View Folder', () => {
       });
 
       // visit home
-      cy.get(`#${NAVIGATION_HOME_LINK_ID}`).click();
+      cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click();
 
       // should get own items
       cy.wait('@getOwnItems').then(({ response: { body } }) => {
@@ -320,7 +315,7 @@ describe('View Folder', () => {
       });
 
       // visit home
-      cy.get(`#${NAVIGATION_HOME_LINK_ID}`).click();
+      cy.get(`#${NAVIGATION_ROOT_ID} [href="${HOME_PATH}"]`).click();
 
       // should get own items
       cy.wait('@getOwnItems').then(({ response: { body } }) => {

diff --git a/cypress/support/commands/navigation.ts b/cypress/support/commands/navigation.ts
@@ -1,14 +1,13 @@
+import { buildItemPath } from '../../../src/config/paths';
 import {
+  NAVIGATION_HOME_LINK_ID,
   buildItemLink,
   buildItemsTableRowIdAttribute,
-  buildNavigationLink,
-  NAVIGATION_HIDDEN_PARENTS_ID,
-  NAVIGATION_HOME_LINK_ID,
 } from '../../../src/config/selectors';
 import {
   NAVIGATE_PAUSE,
-  WAIT_FOR_ITEM_TABLE_ROW_TIME,
   TABLE_ITEM_RENDER_TIME,
+  WAIT_FOR_ITEM_TABLE_ROW_TIME,
 } from '../constants';
 
 Cypress.Commands.add('goToItemInGrid', (id) => {
@@ -28,11 +27,8 @@ Cypress.Commands.add('goToHome', () => {
   cy.get(`#${NAVIGATION_HOME_LINK_ID}`).click();
 });
 
-Cypress.Commands.add('goToItemWithNavigation', (id, openHidden = false) => {
+Cypress.Commands.add('goToItemWithNavigation', (id) => {
   cy.wait(NAVIGATE_PAUSE);
-  if (openHidden) {
-    cy.get(`#${NAVIGATION_HIDDEN_PARENTS_ID}`).click();
-  }
-  cy.get(`#${buildNavigationLink(id)}`).click();
+  cy.get(`[href="${buildItemPath(id)}"]`).click();
   cy.wait(TABLE_ITEM_RENDER_TIME);
 });
diff --git a/cypress/support/server.ts b/cypress/support/server.ts
@@ -182,16 +182,19 @@ export const mockGetSharedItems = ({
   member,
 }: {
   items: ItemForTest[];
-  member: Member;
+  member?: Member;
 }): void => {
   cy.intercept(
     {
       method: HttpMethod.GET,
       url: `${API_HOST}/${SHARED_ITEM_WITH_ROUTE}`,
     },
     (req) => {
-      const own = items.filter(({ creator }) => creator?.id !== member.id);
-      req.reply(own);
+      if (!member) {
+        return req.reply({ statusCode: StatusCodes.UNAUTHORIZED });
+      }
+      const shared = items.filter(({ creator }) => creator?.id !== member.id);
+      return req.reply(shared);
     },
   ).as('getSharedItems');
 };
@@ -226,26 +229,6 @@ export const mockPostItem = (
   ).as('postItem');
 };
 
-// export const mockDeleteItem = (items: ItemForTest[], shouldThrowError: boolean): void => {
-//   cy.intercept(
-//     {
-//       method: HttpMethod.DELETE,
-//       url: new RegExp(`${API_HOST}/${buildDeleteItemRoute(ID_FORMAT)}$`),
-//     },
-//     ({ url, reply }) => {
-//       if (shouldThrowError) {
-//         return reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
-//       }
-
-//       const id = url.slice(API_HOST.length).split('/')[2];
-//       return reply({
-//         statusCode: StatusCodes.OK,
-//         body: getItemById(items, id),
-//       });
-//     },
-//   ).as('deleteItem');
-// };
-
 export const mockDeleteItems = (
   _items: ItemForTest[],
   shouldThrowError: boolean,

diff --git a/package.json b/package.json
@@ -13,10 +13,10 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "2.0.0-rc.1",
-    "@graasp/query-client": "1.0.0",
-    "@graasp/sdk": "1.0.0",
+    "@graasp/query-client": "1.0.1",
+    "@graasp/sdk": "1.1.0",
     "@graasp/translations": "1.15.0",
-    "@graasp/ui": "3.0.0",
+    "@graasp/ui": "3.1.0",
     "@mui/icons-material": "5.11.16",
     "@mui/lab": "5.0.0-alpha.134",
     "@mui/material": "5.13.5",
@@ -147,6 +147,7 @@
     "nth-check": "2.1.1",
     "react-error-overlay": "6.0.11",
     "@types/react": "17.0.62",
+    "@graasp/sdk": "1.1.0",
     "@svgr/webpack": "8.0.1"
   },
   "packageManager": "[email protected]"