feat: add platform switch to builder

package.json

@@ -10,7 +10,7 @@
     "@graasp/query-client": "0.1.3",
     "@graasp/sdk": "0.3.0",
     "@graasp/translations": "1.3.0",
-    "@graasp/ui": "0.8.0",
+    "@graasp/ui": "github:graasp/graasp-ui#215-platform-switch",
     "@mui/icons-material": "5.11.0",
     "@mui/lab": "5.0.0-alpha.117",
     "@mui/material": "5.11.6",

src/components/main/Main.tsx

@@ -6,8 +6,14 @@ import { Link } 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,
@@ -16,10 +22,7 @@ import {
 } from '../../config/constants';
 import { HOME_PATH } from '../../config/paths';
 import { hooks, useMutation } from '../../config/queryClient';
-import {
-  APP_NAVIGATION_DROP_DOWN_ID,
-  HEADER_APP_BAR_ID,
-} from '../../config/selectors';
+import { HEADER_APP_BAR_ID } from '../../config/selectors';
 import CookiesBanner from '../common/CookiesBanner';
 import UserSwitchWrapper from '../common/UserSwitchWrapper';
 import { LayoutContext } from '../context/LayoutContext';
@@ -33,6 +36,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 +67,15 @@ const Main: FC<Props> = ({ children }) => {
   );
   const clearAllMentionsFunction = () => clearAllMentionsMutate({ memberId });
 
+  const navigate = usePlatformNavigation(platformsHostsMap);
+
+  const redirects = Object.fromEntries(
+    [Platform.Player, Platform.Library].map((platform) => [
+      platform,
+      { onClick: () => navigate(platform) },
+    ]),
+  );
+
   const leftContent = (
     <Box display="flex" ml={2}>
       <StyledLink to={HOME_PATH}>
@@ -66,10 +84,14 @@ const Main: FC<Props> = ({ children }) => {
           {APP_NAME}
         </Typography>
       </StyledLink>
-      <Navigation
-        id={APP_NAVIGATION_DROP_DOWN_ID}
-        hostMap={HOST_MAP}
-        currentValue={Context.BUILDER}
+      <PlatformSwitch
+        selected={Platform.Builder}
+        size={32}
+        platformsProps={{
+          ...redirects,
+          [Platform.Analytics]: { disabled: true },
+        }}
+        disabledColor="#999"
       />
     </Box>
   );

yarn.lock

@@ -2525,17 +2525,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:0.7.1":
-  version: 0.7.1
-  resolution: "@graasp/ui@npm:0.7.1"
+"@graasp/ui@github:graasp/graasp-ui#215-platform-switch":
+  version: 0.8.0
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=1ada545cba435d6ef0430c64d533e992c0f05b89"
   dependencies:
-    "@graasp/sdk": "github:graasp/graasp-sdk.git"
+    "@graasp/sdk": 0.2.0
     clsx: 1.1.1
     http-status-codes: 2.2.0
     immutable: 4.1.0
     katex: 0.16.0
     lodash.truncate: 4.4.2
     qs: 6.10.5
+    quill-emoji: 0.2.0
     react-cookie-consent: 7.4.1
     react-i18next: 11.17.0
     react-quill: 2.0.0-beta.4
@@ -2559,22 +2560,21 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: b09b2adaa1f72b82c35dc86d2bb9fc578336c9b2858fee18302ed82c79046143ac371ce8415ad01a9385ece40e9a8634a53f9aee67d33b2e3752052b59eac5bb
+  checksum: 6ddd1734aa2bce9f957572a76119925432be6494f8197e6b32be1c6cae92eb1ff7670bf8686a188d6bdd810a43cba078bbda0c32426d9577048c27c9b361fafd
   languageName: node
   linkType: hard
 
-"@graasp/ui@npm:0.8.0":
-  version: 0.8.0
-  resolution: "@graasp/ui@npm:0.8.0"
+"@graasp/ui@npm:0.7.1":
+  version: 0.7.1
+  resolution: "@graasp/ui@npm:0.7.1"
   dependencies:
-    "@graasp/sdk": 0.2.0
+    "@graasp/sdk": "github:graasp/graasp-sdk.git"
     clsx: 1.1.1
     http-status-codes: 2.2.0
     immutable: 4.1.0
     katex: 0.16.0
     lodash.truncate: 4.4.2
     qs: 6.10.5
-    quill-emoji: 0.2.0
     react-cookie-consent: 7.4.1
     react-i18next: 11.17.0
     react-quill: 2.0.0-beta.4
@@ -2598,7 +2598,7 @@ __metadata:
       optional: true
     ag-grid-react:
       optional: true
-  checksum: 800d6b8d6d444c24594685acc0b7d82b5331bdf8be18676e8f26308b45c8ec131531f4953b11b19882d25c0c4dbd2052d5bf3af0236bbf83fe4bf227909609ae
+  checksum: b09b2adaa1f72b82c35dc86d2bb9fc578336c9b2858fee18302ed82c79046143ac371ce8415ad01a9385ece40e9a8634a53f9aee67d33b2e3752052b59eac5bb
   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": 0.8.0
+    "@graasp/ui": "github:graasp/graasp-ui#215-platform-switch"
     "@graasp/websockets": "github:graasp/graasp-websockets.git"
     "@mui/icons-material": 5.11.0
     "@mui/lab": 5.0.0-alpha.117