feat: add drop down between apps in header

cypress/integration/header.test.js

@@ -0,0 +1,13 @@
+import { HOME_PATH } from '../../src/config/paths';
+import { APP_NAVIGATION_DROP_DOWN_ID } from '../../src/config/selectors';
+
+describe('Header', () => {
+  it('App Navigation', () => {
+    // check navigation and display and interface doesn't crash
+    cy.setUpApi();
+    cy.visit(HOME_PATH);
+    cy.get(`#${APP_NAVIGATION_DROP_DOWN_ID}`).click();
+    cy.wait(3000);
+    cy.get(`#${APP_NAVIGATION_DROP_DOWN_ID}`).should('exist');
+  });
+});

package.json

@@ -126,7 +126,8 @@
     "nth-check": "2.0.1",
     "immer": "9.0.6",
     "glob-parent": "5.1.2",
-    "browserslist": "4.16.5"
+    "browserslist": "4.16.5",
+    "ansi-html": "0.0.8"
   },
   "packageManager": "[email protected]"
 }

src/components/layout/Header.js

@@ -6,14 +6,19 @@ import MenuIcon from '@material-ui/icons/Menu';
 import MenuOpenIcon from '@material-ui/icons/MenuOpen';
 import IconButton from '@material-ui/core/IconButton';
 import { AppBar, Toolbar, Typography } from '@material-ui/core';
-import { GraaspLogo } from '@graasp/ui';
+import { GraaspLogo, Navigation } from '@graasp/ui';
+import { Context } from '@graasp/utils';
 import {
   APP_NAME,
   GRAASP_LOGO_HEADER_HEIGHT,
   HEADER_HEIGHT,
+  HOST_MAP,
 } from '../../config/constants';
 import SettingsHeader from '../common/SettingsHeader';
-import { HEADER_APP_BAR_ID } from '../../config/selectors';
+import {
+  APP_NAVIGATION_DROP_DOWN_ID,
+  HEADER_APP_BAR_ID,
+} from '../../config/selectors';
 import { HOME_PATH } from '../../config/paths';
 
 const useStyles = makeStyles((theme) => ({
@@ -31,7 +36,7 @@ const useStyles = makeStyles((theme) => ({
     fill: 'white',
   },
   title: {
-    margin: theme.spacing(0, 2),
+    margin: theme.spacing(0, 2, 0, 1),
   },
   link: {
     textDecoration: 'none',
@@ -75,6 +80,11 @@ const Header = ({ isMenuOpen, toggleMenu }) => {
             <Typography variant="h6" color="inherit" className={classes.title}>
               {APP_NAME}
             </Typography>
+            <Navigation
+              id={APP_NAVIGATION_DROP_DOWN_ID}
+              hostMap={HOST_MAP}
+              currentValue={Context.BUILDER}
+            />
           </Link>
         </div>
         <SettingsHeader />

src/components/main/DownloadButton.js

@@ -5,7 +5,7 @@ import { DownloadButton as Button } from '@graasp/ui';
 import PropTypes from 'prop-types';
 import { useMutation } from '../../config/queryClient';
 
-export const DownloadButton = ({ id }) => {
+export const DownloadButton = ({ id, name }) => {
   const { t } = useTranslation();
 
   const {
@@ -20,10 +20,11 @@ export const DownloadButton = ({ id }) => {
       const url = window.URL.createObjectURL(new Blob([data]));
       const link = document.createElement('a');
       link.href = url;
-      link.setAttribute('download', `${id}.zip`);
+      link.setAttribute('download', `${name}.zip`);
       document.body.appendChild(link);
       link.click();
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [data, isSuccess, id]);
 
   const handleDownload = () => {
@@ -40,6 +41,7 @@ export const DownloadButton = ({ id }) => {
 
 DownloadButton.propTypes = {
   id: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
 };
 
 export default DownloadButton;

src/components/main/Item.js

@@ -74,7 +74,7 @@ const Item = ({ item, memberships }) => {
           <EditButton item={item} />
           <PinButton item={item} />
           <HideButton item={item} />
-          <DownloadButton id={id} />
+          <DownloadButton id={id} name={name} />
         </>
       )}
     </>

src/components/table/ActionsCellRenderer.js

@@ -51,7 +51,7 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
           <EditButton item={item} />
           <PinButton item={item} />
           <HideButton item={item} />
-          <DownloadButton id={item?.id} />
+          <DownloadButton id={item?.id} name={item?.name} />
         </>
       );
     };
@@ -65,7 +65,10 @@ const ActionsCellRenderer = ({ memberships, items, member }) => {
     );
   };
   ChildComponent.propTypes = {
-    data: PropTypes.shape({ id: PropTypes.string.isRequired }).isRequired,
+    data: PropTypes.shape({
+      id: PropTypes.string.isRequired,
+      name: PropTypes.string.isRequired,
+    }).isRequired,
   };
   return ChildComponent;
 };

src/config/constants.js

@@ -1,3 +1,4 @@
+import { Context } from '@graasp/utils';
 import env from '../env.json';
 import { ITEM_LAYOUT_MODES, PERMISSION_LEVELS, ITEM_TYPES } from '../enums';
 
@@ -9,6 +10,7 @@ const {
   NODE_ENV: ENV_NODE_ENV,
   GA_MEASUREMENT_ID: ENV_GA_MEASUREMENT_ID,
   HIDDEN_ITEM_TAG_ID: ENV_HIDDEN_ITEM_TAG_ID,
+  GRAASP_EXPLORE_HOST: ENV_GRAASP_EXPLORE_HOST,
 } = env;
 
 export const APP_NAME = 'Graasp';
@@ -40,6 +42,10 @@ export const GRAASP_PERFORM_HOST =
   ENV_GRAASP_PERFORM_HOST ||
   process.env.REACT_APP_GRAASP_PERFORM_HOST ||
   'http://localhost:3112';
+export const GRAASP_EXPLORE_HOST =
+  ENV_GRAASP_EXPLORE_HOST ||
+  process.env.REACT_APP_GRAASP_EXPLORE_HOST ||
+  'http://localhost:3005';
 
 export const GRAASP_ANALYZER_HOST =
   process.env.REACT_APP_GRAASP_ANALYZER_HOST || 'http://localhost:3113';
@@ -208,3 +214,9 @@ export const ITEM_VALIDATION_REVIEW_STATUSES = {
 };
 
 export const ADMIN_CONTACT = '[email protected]';
+
+export const HOST_MAP = {
+  [Context.BUILDER]: '/',
+  [Context.EXPLORER]: GRAASP_EXPLORE_HOST,
+  [Context.PLAYER]: GRAASP_PERFORM_HOST,
+};

src/config/selectors.js

@@ -179,3 +179,4 @@ export const buildPlayerTabName = (id) => `builder-tab-${id}`;
 
 export const ITEM_PUBLISH_SECTION_TITLE_ID = 'itemPublishSectionTitle';
 export const ITEM_VALIDATION_BUTTON_ID = 'itemValidationButton';
+export const APP_NAVIGATION_DROP_DOWN_ID = 'appNavigationDropDown';

src/env.json

@@ -4,6 +4,7 @@
   "AUTHENTICATION_HOST": false,
   "NODE_ENV": false,
   "GRAASP_PERFORM_HOST": false,
+  "GRAASP_EXPLORE_HOST": false,
   "GA_MEASUREMENT_ID": false,
   "HIDDEN_ITEM_TAG_ID": false
 }