fix: open builder using the current item, not the root

.github/workflows/cypress.yml

@@ -3,7 +3,7 @@ name: Cypress CI
 on:
   push:
     branches:
-      - "main"
+      - 'main'
   pull_request:
   merge_group:
 
@@ -39,6 +39,7 @@ jobs:
           VITE_GRAASP_API_HOST: http://localhost:3636
           VITE_GRAASP_AUTH_HOST: http://localhost:3001
           VITE_GRAASP_BUILDER_HOST: http://localhost:3111
+          VITE_GRAASP_ANALYTICS_HOST: http://localhost:3113
           VITE_SHOW_NOTIFICATIONS: false
 
       #  use the Cypress GitHub Action to run Cypress tests within the chrome browser
@@ -58,6 +59,7 @@ jobs:
           VITE_GRAASP_API_HOST: http://localhost:3636
           VITE_GRAASP_AUTH_HOST: http://localhost:3001
           VITE_GRAASP_BUILDER_HOST: http://localhost:3111
+          VITE_GRAASP_ANALYTICS_HOST: http://localhost:3113
           VITE_SHOW_NOTIFICATIONS: false
 
       # after the test run completes

cypress.config.ts

@@ -8,16 +8,17 @@ export default defineConfig({
     runMode: 2,
   },
   env: {
-    GRAASP_COMPOSE_HOST:
+    GRAASP_BUILDER_HOST:
       process.env.VITE_GRAASP_BUILDER_HOST || 'http://localhost:3111',
     GRAASP_LIBRARY_HOST:
       process.env.VITE_GRAASP_LIBRARY_HOST || 'http://localhost:3005',
     GRAASP_ANALYTICS_HOST:
       process.env.VITE_GRAASP_ANALYTICS_HOST || 'http://localhost:3012',
-    API_HOST: process.env.VITE_GRAASP_API_HOST || 'http://localhost:3000',
-    AUTHENTICATION_HOST:
+    GRAASP_API_HOST:
+      process.env.VITE_GRAASP_API_HOST || 'http://localhost:3000',
+    GRAASP_AUTH_HOST:
       process.env.VITE_GRAASP_AUTH_HOST || 'http://localhost:3001',
-    ACCOUNT_HOST:
+    GRAASP_ACCOUNT_HOST:
       process.env.VITE_GRAASP_ACCOUNT_HOST || 'http://localhost:3114',
   },
   e2e: {

cypress/e2e/header.cy.ts

@@ -6,9 +6,10 @@ import {
   HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID,
   HEADER_MEMBER_MENU_SIGN_OUT_BUTTON_ID,
 } from '../../src/config/selectors';
+import { ACCOUNT_HOST, AUTH_HOST } from '../support/env';
 
 const SIGN_IN_PATH = buildSignInPath({
-  host: Cypress.env('AUTHENTICATION_HOST'),
+  host: AUTH_HOST,
 });
 
 // catch hook warning from react
@@ -30,7 +31,7 @@ describe('Header', () => {
       cy.get(`#${HEADER_MEMBER_MENU_BUTTON_ID}`).click();
       cy.get(`#${HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID}`).click();
       cy.wait('@goToMemberProfile');
-      cy.url().should('contain', Cypress.env('ACCOUNT_HOST'));
+      cy.url().should('contain', ACCOUNT_HOST);
     });
 
     // todo: not available currently because cookie is httpOnly

cypress/e2e/redirections.cy.ts

@@ -1,4 +1,4 @@
-import { buildMainPath } from '@/config/paths';
+import { buildContentPagePath, buildMainPath } from '@/config/paths';
 import { USER_SWITCH_SIGN_IN_BUTTON_ID } from '@/config/selectors';
 
 import { FOLDER_WITH_SUBFOLDER_ITEM } from '../fixtures/items';
@@ -18,6 +18,7 @@ describe('Home Page', () => {
     });
   });
 });
+
 describe('Item page', () => {
   describe('Logged out', () => {
     beforeEach(() => {
@@ -38,3 +39,22 @@ describe('Item page', () => {
     });
   });
 });
+
+describe('Platform switch', () => {
+  const parent = FOLDER_WITH_SUBFOLDER_ITEM.items[0];
+  const child = FOLDER_WITH_SUBFOLDER_ITEM.items[1];
+  beforeEach(() => {
+    cy.setUpApi({
+      items: FOLDER_WITH_SUBFOLDER_ITEM.items,
+    });
+    // go to child
+    cy.visit(buildContentPagePath({ rootId: parent.id, itemId: child.id }));
+  });
+  ['Builder', 'Analytics'].forEach((platform) => {
+    it(platform, () => {
+      cy.get(`[data-testid="${platform}"]`).click();
+      cy.wait(`@${platform.toLowerCase()}`);
+      cy.url().should('contain', child.id);
+    });
+  });
+});

cypress/fixtures/apps.ts

@@ -1,5 +1,6 @@
 import { AppItemFactory, AppItemType, ItemType } from '@graasp/sdk';
 
+import { API_HOST } from '../support/env';
 import { APP_NAME } from './apps/apps';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER, MEMBERS } from './members';
@@ -23,8 +24,6 @@ export const GRAASP_APP_ITEM: AppItemType = AppItemFactory({
   },
 });
 
-const API_HOST = Cypress.env('API_HOST');
-
 export const buildAppApiAccessTokenRoute = (id: string): string =>
   `app-items/${id}/api-access-token`;
 export const buildGetAppData = (id: string): string =>

cypress/support/commands.ts

@@ -4,8 +4,10 @@ import { ChatMessage, CookieKeys, Member } from '@graasp/sdk';
 import { CURRENT_USER, MEMBERS } from '../fixtures/members';
 import { MockItem } from '../fixtures/mockTypes';
 import {
+  mockAnalytics,
   mockAppApiAccessToken,
   mockAuthPage,
+  mockBuilder,
   mockDefaultDownloadFile,
   mockDeleteAppData,
   mockGetAccessibleItems,
@@ -73,10 +75,12 @@ Cypress.Commands.add(
 
     mockDefaultDownloadFile({ items, currentMember });
 
+    mockBuilder();
+    mockAnalytics();
     mockSignOut();
+    mockProfilePage();
 
     mockGetMembers(members);
-    mockProfilePage();
     mockAuthPage();
     mockGetAppLink(getAppLinkError);
     mockAppApiAccessToken(getAppLinkError);

cypress/support/env.ts

@@ -0,0 +1,5 @@
+export const API_HOST = Cypress.env('GRAASP_API_HOST');
+export const BUILDER_HOST = Cypress.env('GRAASP_BUILDER_HOST');
+export const ANALYTICS_HOST = Cypress.env('GRAASP_ANALYTICS_HOST');
+export const ACCOUNT_HOST = Cypress.env('GRAASP_ACCOUNT_HOST');
+export const AUTH_HOST = Cypress.env('GRAASP_AUTH_HOST');

cypress/support/server.ts

@@ -22,6 +22,13 @@ import {
 } from '../fixtures/apps';
 import { MEMBERS } from '../fixtures/members';
 import { MockItem, MockItemTag } from '../fixtures/mockTypes';
+import {
+  ACCOUNT_HOST,
+  ANALYTICS_HOST,
+  API_HOST,
+  AUTH_HOST,
+  BUILDER_HOST,
+} from './env';
 import {
   DEFAULT_DELETE,
   DEFAULT_GET,
@@ -52,8 +59,6 @@ const {
   buildGetItemGeolocationRoute,
 } = API_ROUTES;
 
-const API_HOST = Cypress.env('API_HOST');
-
 export const isError = (error?: { statusCode: number }): boolean =>
   Boolean(error?.statusCode);
 
@@ -529,6 +534,30 @@ export const mockSignOut = (): void => {
   ).as('signOut');
 };
 
+export const mockBuilder = (): void => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(`${BUILDER_HOST}`),
+    },
+    ({ reply }) => {
+      reply(redirectionReply);
+    },
+  ).as('builder');
+};
+
+export const mockAnalytics = (): void => {
+  cy.intercept(
+    {
+      method: DEFAULT_GET.method,
+      url: new RegExp(ANALYTICS_HOST),
+    },
+    ({ reply }) => {
+      reply(redirectionReply);
+    },
+  ).as('analytics');
+};
+
 export const mockGetMembers = (members: Member[]): void => {
   cy.intercept(
     {
@@ -559,7 +588,7 @@ export const mockProfilePage = (): void => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
-      url: Cypress.env('ACCOUNT_HOST'),
+      url: new RegExp(ACCOUNT_HOST),
     },
     ({ reply }) => {
       reply(redirectionReply);
@@ -571,7 +600,7 @@ export const mockAuthPage = (): void => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
-      url: new RegExp(`${Cypress.env('AUTHENTICATION_HOST')}`),
+      url: new RegExp(AUTH_HOST),
     },
     ({ reply }) => {
       reply(redirectionReply);

src/modules/layout/PageWrapper.tsx

@@ -59,9 +59,9 @@ const PageWrapper = ({ fullscreen }: PageWrapperProps): JSX.Element => {
   const { t } = usePlayerTranslation();
   const theme = useTheme();
   const { isMobile } = useMobileView();
-  const { rootId } = useParams();
+  const { rootId, itemId } = useParams();
   const { data: item } = hooks.useItem();
-  const getNavigationEvents = usePlatformNavigation(platformsHostsMap, rootId);
+  const getNavigationEvents = usePlatformNavigation(platformsHostsMap, itemId);
 
   const platformProps = {
     [Platform.Builder]: {