graasp · pyphilia · Apr 8, 2022 · Apr 7, 2022 · Apr 8, 2022
diff --git a/cypress/integration/header.test.js b/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');
+  });
+});
diff --git a/package.json b/package.json
@@ -7,8 +7,8 @@
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git",
     "@graasp/query-client": "github:graasp/graasp-query-client.git",
     "@graasp/translations": "github:graasp/graasp-translations.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git",
-    "@graasp/utils": "github:graasp/graasp-utils.git",
+    "@graasp/ui": "github:graasp/graasp-ui.git#111/logo",
+    "@graasp/utils": "github:graasp/graasp-utils.git#2/contexts",
     "@material-ui/core": "4.12.3",
     "@material-ui/icons": "5.0.0-beta.5",
     "@material-ui/lab": "4.0.0-alpha.60",
@@ -35,7 +35,7 @@
     "react-beautiful-dnd": "13.1.0",
     "react-dom": "^17.0.2",
     "react-ga4": "1.4.1",
-    "react-i18next": "11.16.2",
+    "react-i18next": "11.15.3",
     "react-image-crop": "9.1.1",
     "react-query": "3.34.19",
     "react-quill": "1.3.5",

diff --git a/src/components/layout/Header.js b/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 />

diff --git a/src/components/main/DownloadButton.js b/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;
diff --git a/src/components/main/Item.js b/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} />
         </>
       )}
     </>

diff --git a/src/components/table/ActionsCellRenderer.js b/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;
 };

diff --git a/src/config/constants.js b/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.BUILD]: '/',
+  [Context.EXPLORE]: GRAASP_EXPLORE_HOST,
+  [Context.PLAY]: GRAASP_PERFORM_HOST,
+};
diff --git a/src/config/selectors.js b/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';
diff --git a/src/env.json b/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
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1937,7 +1937,7 @@ __metadata:
 
 "@graasp/chatbox@github:graasp/graasp-chatbox.git":
   version: 0.1.0
-  resolution: "@graasp/chatbox@https://github.com/graasp/graasp-chatbox.git#commit=64d247a39aff7d4ca5acb460976ab2ed3a0b0258"
+  resolution: "@graasp/chatbox@https://github.com/graasp/graasp-chatbox.git#commit=1205f453ff7c26dd26ddd9a7f729bc4687482933"
   dependencies:
     "@graasp/translations": "github:graasp/graasp-translations.git"
     "@graasp/ui": "github:graasp/graasp-ui.git"
@@ -1955,7 +1955,7 @@ __metadata:
     eslint: "*"
     react: "*"
     react-dom: "*"
-  checksum: d63dc8233093ee9e76efa2838abafeb11d829fb69d20215d7cd33677a1fe92782b22f98d23b1544abd564397d81a4d7d5120d4e0d471a4c6e52c76f29e0f6258
+  checksum: 345f8188bab7b2e053c11c30c1345760172555d3883859245bde350ff1f616888dd2de762d5f30f551930b91f5c647ef7861009153e59cf351b5c6df03b58671
   languageName: node
   linkType: hard
 
@@ -2013,13 +2013,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@graasp/ui@github:graasp/graasp-ui.git#111/logo":
+  version: 0.2.0
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=1c603a6e4c0c0edc7edbc8ae5db34800a51c7a5e"
+  dependencies:
+    "@graasp/utils": "github:graasp/graasp-utils.git#2/contexts"
+    clsx: 1.1.1
+    http-status-codes: 2.2.0
+    immutable: 4.0.0
+    katex: 0.15.3
+    qs: 6.10.3
+    react-cookie-consent: 7.4.1
+    react-i18next: 11.16.2
+    react-quill: 1.3.5
+    react-text-mask: 5.4.3
+    uuid: 8.3.2
+  peerDependencies:
+    "@material-ui/core": 4.11.0
+    "@material-ui/icons": 4.9.1
+    "@material-ui/lab": 4.0.0-alpha.58
+    i18next: 21.3.1
+    react: ^16.13.1
+    react-dom: 16.13.1
+  checksum: d6eb28122c09e8287a52e0f2c4cdc8a16b33114f1c949c69cddf9d2dbd2c1daee050cac489952d36c78c994352242474c3034ef7da7e63c26d9c3ba53dad8620
+  languageName: node
+  linkType: hard
+
 "@graasp/utils@github:graasp/graasp-utils.git":
   version: 0.1.0
   resolution: "@graasp/utils@https://github.com/graasp/graasp-utils.git#commit=fd6bb56269e37f1869eba555c198492f9d307f78"
   checksum: 946280e2f85d05921defc5401da2543a96ac8863976e748e97c6b7c77affae7e918af585d732ac8069e79603a83fca0f835cc2a3227356b3425dd2f0d6688e3a
   languageName: node
   linkType: hard
 
+"@graasp/utils@github:graasp/graasp-utils.git#2/contexts":
+  version: 0.1.0
+  resolution: "@graasp/utils@https://github.com/graasp/graasp-utils.git#commit=402507079f4119488c30c6b3da71c0a512710c02"
+  checksum: b8a9546e57c6603891cf221edc76b3373614735c96b688ab3a2fb8d72845a304f2aee15b292cdf99918fc0e191ec51977dbc2c48d6564190d03dc33bb5453085
+  languageName: node
+  linkType: hard
+
 "@graasp/websockets@github:graasp/graasp-websockets.git#master":
   version: 1.0.0
   resolution: "@graasp/websockets@https://github.com/graasp/graasp-websockets.git#commit=46cdafb873d7238b17a2952dd07e9ec7cde80277"
@@ -9941,8 +9974,8 @@ __metadata:
     "@graasp/chatbox": "github:graasp/graasp-chatbox.git"
     "@graasp/query-client": "github:graasp/graasp-query-client.git"
     "@graasp/translations": "github:graasp/graasp-translations.git"
-    "@graasp/ui": "github:graasp/graasp-ui.git"
-    "@graasp/utils": "github:graasp/graasp-utils.git"
+    "@graasp/ui": "github:graasp/graasp-ui.git#111/logo"
+    "@graasp/utils": "github:graasp/graasp-utils.git#2/contexts"
     "@graasp/websockets": "github:graasp/graasp-websockets.git#master"
     "@material-ui/core": 4.12.3
     "@material-ui/icons": 5.0.0-beta.5
@@ -9990,7 +10023,7 @@ __metadata:
     react-beautiful-dnd: 13.1.0
     react-dom: ^17.0.2
     react-ga4: 1.4.1
-    react-i18next: 11.16.2
+    react-i18next: 11.15.3
     react-image-crop: 9.1.1
     react-query: 3.34.19
     react-quill: 1.3.5
@@ -16180,6 +16213,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-cookie-consent@npm:7.4.1":
+  version: 7.4.1
+  resolution: "react-cookie-consent@npm:7.4.1"
+  dependencies:
+    js-cookie: ^2.2.1
+    prop-types: ^15.7.2
+  peerDependencies:
+    react: ^16.13.1 || ^17.0.0 || ^18.0.0
+  checksum: 05ab24f7e028da89160baa51c1c2eb62156a98c8e0b55d6548fc95aba8a7e325b06637c1aa1a974b9456f2f1316082dda73ac3b6448fd79ac4cccecda195e4ed
+  languageName: node
+  linkType: hard
+
 "react-dev-utils@npm:^11.0.3":
   version: 11.0.4
   resolution: "react-dev-utils@npm:11.0.4"
Original file line number	Diff line number	Diff line change
Expand Up		@@ -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';