feat: add platform switch to builder

cypress/e2e/header.cy.js

@@ -1,9 +1,11 @@
 import { getCurrentSession } from '@graasp/sdk';
+import { Platform } from '@graasp/ui';
 
 import { SIGN_IN_PATH } from '../../src/config/constants';
 import { HOME_PATH } from '../../src/config/paths';
 import {
-  APP_NAVIGATION_DROP_DOWN_ID,
+  APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
+  APP_NAVIGATION_PLATFORM_SWITCH_ID,
   HEADER_MEMBER_MENU_BUTTON_ID,
   HEADER_MEMBER_MENU_SEE_PROFILE_BUTTON_ID,
   HEADER_MEMBER_MENU_SIGN_IN_BUTTON_ID,
@@ -20,9 +22,11 @@ describe('Header', () => {
     cy.setUpApi();
     cy.visit(HOME_PATH);
     // check navigation and display and interface doesn't crash
-    cy.get(`#${APP_NAVIGATION_DROP_DOWN_ID}`).click();
+    cy.get(
+      `#${APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Builder]}`,
+    ).click();
     cy.wait(3000);
-    cy.get(`#${APP_NAVIGATION_DROP_DOWN_ID}`).should('exist');
+    cy.get(`#${APP_NAVIGATION_PLATFORM_SWITCH_ID}`).should('exist');
   });
 
   describe('User Menu', () => {

package.json

@@ -16,7 +16,7 @@
     "@graasp/query-client": "0.1.3",
     "@graasp/sdk": "0.3.0",
     "@graasp/translations": "1.3.0",
-    "@graasp/ui": "github:graasp/graasp-ui#226-table-menu-a11y",
+    "@graasp/ui": "0.11.1",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "5.11.6",

src/components/main/Main.tsx

@@ -2,12 +2,18 @@ import { Grid, Typography, styled } from '@mui/material';
 import Box from '@mui/material/Box';
 
 import { FC, useContext } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useParams } from 'react-router-dom';
 
 import { MentionButton } from '@graasp/chatbox';
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { Context } from '@graasp/sdk';
-import { GraaspLogo, Main as GraaspMain, Navigation } from '@graasp/ui';
+import {
+  GraaspLogo,
+  Main as GraaspMain,
+  Platform,
+  PlatformSwitch,
+  defaultHostsMapper,
+  usePlatformNavigation,
+} from '@graasp/ui';
 
 import {
   APP_NAME,
@@ -17,7 +23,8 @@ import {
 import { HOME_PATH } from '../../config/paths';
 import { hooks, useMutation } from '../../config/queryClient';
 import {
-  APP_NAVIGATION_DROP_DOWN_ID,
+  APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS,
+  APP_NAVIGATION_PLATFORM_SWITCH_ID,
   HEADER_APP_BAR_ID,
 } from '../../config/selectors';
 import CookiesBanner from '../common/CookiesBanner';
@@ -33,6 +40,12 @@ const StyledLink = styled(Link)(() => ({
 }));
 type Props = { children: JSX.Element | (JSX.Element & string) };
 
+// small converter for HOST_MAP into a usePlatformNavigation mapper
+export const platformsHostsMap = defaultHostsMapper({
+  [Platform.Player]: HOST_MAP.player,
+  [Platform.Library]: HOST_MAP.library,
+});
+
 const Main: FC<Props> = ({ children }) => {
   const { isMainMenuOpen, setIsMainMenuOpen } = useContext(LayoutContext);
   const { data: currentMember } = hooks.useCurrentMember();
@@ -58,6 +71,27 @@ const Main: FC<Props> = ({ children }) => {
   );
   const clearAllMentionsFunction = () => clearAllMentionsMutate({ memberId });
 
+  const { itemId } = useParams();
+  const getNavigationEvents = usePlatformNavigation(platformsHostsMap, itemId);
+
+  const platformProps = {
+    [Platform.Builder]: {
+      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Builder],
+    },
+    [Platform.Player]: {
+      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Player],
+      ...getNavigationEvents(Platform.Player),
+    },
+    [Platform.Library]: {
+      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Library],
+      ...getNavigationEvents(Platform.Library),
+    },
+    [Platform.Analytics]: {
+      id: APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS[Platform.Analytics],
+      disabled: true,
+    },
+  };
+
   const leftContent = (
     <Box display="flex" ml={2}>
       <StyledLink to={HOME_PATH}>
@@ -66,10 +100,11 @@ const Main: FC<Props> = ({ children }) => {
           {APP_NAME}
         </Typography>
       </StyledLink>
-      <Navigation
-        id={APP_NAVIGATION_DROP_DOWN_ID}
-        hostMap={HOST_MAP}
-        currentValue={Context.BUILDER}
+      <PlatformSwitch
+        id={APP_NAVIGATION_PLATFORM_SWITCH_ID}
+        selected={Platform.Builder}
+        platformsProps={platformProps}
+        disabledColor="#999"
       />
     </Box>
   );

src/config/selectors.ts

@@ -1,3 +1,5 @@
+import { Platform } from '@graasp/ui';
+
 export const ITEM_DELETE_BUTTON_CLASS = 'itemDeleteButton';
 export const ITEM_COPY_BUTTON_CLASS = 'itemCopyButton';
 export const ITEM_MOVE_BUTTON_CLASS = 'itemMoveButton';
@@ -214,7 +216,13 @@ export const buildPlayerTabName = (id: string): string => `builder-tab-${id}`;
 export const ITEM_PUBLISH_SECTION_TITLE_ID = 'itemPublishSectionTitle';
 export const ITEM_VALIDATION_BUTTON_ID = 'itemValidationButton';
 export const ITEM_VALIDATION_REFRESH_BUTTON_ID = 'itemValidationRefreshButton';
-export const APP_NAVIGATION_DROP_DOWN_ID = 'appNavigationDropDown';
+export const APP_NAVIGATION_PLATFORM_SWITCH_ID = 'appNavigationPlatformSwitch';
+export const APP_NAVIGATION_PLATFORM_SWITCH_BUTTON_IDS = {
+  [Platform.Builder]: 'appNavigationPlatformSwitchButtonBuilder',
+  [Platform.Player]: 'appNavigationPlatformSwitchButtonPlayer',
+  [Platform.Library]: 'appNavigationPlatformSwitchButtonLibrary',
+  [Platform.Analytics]: 'appNavigationPlatformSwitchButtonAnalytics',
+};
 
 export const ITEM_PUBLISH_BUTTON_ID = 'itemPublishButton';
 export const ITEM_UNPUBLISH_BUTTON_ID = 'itemUnpublishButton';

yarn.lock

@@ -2525,30 +2525,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@github:graasp/graasp-ui#226-table-menu-a11y":
-  version: 0.10.2
-  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=a6e8bee0e668e8a7332b6489548cd08c8a354444"
+"@graasp/ui@npm:0.11.1":
+  version: 0.11.1
+  resolution: "@graasp/ui@npm:0.11.1"
   dependencies:
-    "@graasp/sdk": 0.2.0
+    "@graasp/sdk": 0.4.0
     clsx: 1.1.1
     http-status-codes: 2.2.0
-    immutable: 4.1.0
+    immutable: 4.2.4
     katex: 0.16.0
     lodash.truncate: 4.4.2
-    qs: 6.10.5
+    qs: 6.11.0
     quill-emoji: 0.2.0
     react-cookie-consent: 7.4.1
     react-i18next: 11.17.0
     react-quill: 2.0.0-beta.4
     react-rnd: 10.3.7
     react-text-mask: 5.4.3
-    uuid: 8.3.2
+    uuid: 9.0.0
   peerDependencies:
-    "@emotion/react": 11.10.4
-    "@emotion/styled": 11.10.4
-    "@mui/icons-material": 5.8.3
-    "@mui/lab": ~5.0.0-alpha.85
-    "@mui/material": 5.10.7
+    "@emotion/react": ~11.10.5
+    "@emotion/styled": ~11.10.5
+    "@mui/icons-material": ~5.11.0
+    "@mui/lab": ~5.0.0-alpha.120
+    "@mui/material": ~5.11.9
     ag-grid-community: 28.1.1
     ag-grid-react: 28.1.1
     i18next: ~21.8.9
@@ -2560,7 +2560,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: dec2af8df6186414fe5b6822dd6dc78e59245143243863afa1edcd84669000bfb2ab85a9dcd151a872d943322686820f00deabe8f4d23506c61e566760701663
+  checksum: 599961399ee145e1a82555e6de86a927ae5408b4e145cc88de4eb0da3a22bc9b896b4145d44982e615a61d680b16c40832034f321d738458ea42266874c11627
   languageName: node
   linkType: hard
 
@@ -10142,7 +10142,7 @@ __metadata:
     "@graasp/query-client": 0.1.3
     "@graasp/sdk": 0.3.0
     "@graasp/translations": 1.3.0
-    "@graasp/ui": "github:graasp/graasp-ui#226-table-menu-a11y"
+    "@graasp/ui": 0.11.1
     "@graasp/websockets": "github:graasp/graasp-websockets.git"
     "@mui/icons-material": 5.11.0
     "@mui/lab": 5.0.0-alpha.117