chore: merge origin/master back into 55/pagination

graasp · Jul 8, 2021 · 932ea89 · 932ea89
2 parents b14ebaa + fba88ec
commit 932ea89
Show file tree

Hide file tree

Showing 19 changed files with 253 additions and 134 deletions.
diff --git a/cypress/fixtures/apps.js b/cypress/fixtures/apps.js
@@ -9,7 +9,7 @@ export const GRAASP_APP_ITEM = {
   description: 'my app description',
   type: ITEM_TYPES.APP,
   extra: {
-    [ITEM_TYPES.APP]: { url: 'http://localhost:3333' },
+    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333' },
   },
   creator: CURRENT_USER.id,
 };
@@ -32,7 +32,7 @@ export const GRAASP_APP_CHILDREN_ITEM = {
   description: 'my app description',
   type: ITEM_TYPES.APP,
   extra: {
-    [ITEM_TYPES.APP]: { url: 'http://localhost:3333' },
+    [ITEM_TYPES.APP]: { url: 'http://localhost.com:3333' },
   },
   creator: CURRENT_USER.id,
 };

diff --git a/cypress/integration/item/edit/utils.js b/cypress/integration/item/edit/utils.js
@@ -6,7 +6,7 @@ import {
   EDIT_ITEM_BUTTON_CLASS,
   TEXT_EDITOR_CLASS,
   buildSaveButtonId,
-  VIEW_ITEM_EDIT_ITEM_BUTTON_ID,
+  buildEditButtonId,
 } from '../../../../src/config/selectors';
 import { CAPTION_EDIT_PAUSE } from '../../../support/constants';
 
@@ -44,7 +44,7 @@ export const editItem = (payload, mode = DEFAULT_ITEM_LAYOUT_MODE) => {
 
 export const editCaptionFromViewPage = ({ id, caption }) => {
   cy.wait(CAPTION_EDIT_PAUSE);
-  cy.get(`#${VIEW_ITEM_EDIT_ITEM_BUTTON_ID}`).click();
+  cy.get(`#${buildEditButtonId(id)}`).click();
   cy.get(`.${TEXT_EDITOR_CLASS}`).type(`{selectall}${caption}`);
   cy.get(`#${buildSaveButtonId(id)}`).click();
 };
diff --git a/cypress/integration/item/view/utils.js b/cypress/integration/item/view/utils.js
@@ -1,7 +1,13 @@
+import { ITEM_TYPES_WITH_CAPTIONS } from '../../../../src/config/constants';
 import {
+  buildEditButtonId,
   buildFileItemId,
+  buildPerformButtonId,
   buildS3FileItemId,
+  buildSettingsButtonId,
+  buildShareButtonId,
   DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR,
+  ITEM_HEADER_ID,
   ITEM_INFORMATION_BUTTON_ID,
   ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
   ITEM_PANEL_ID,
@@ -42,7 +48,24 @@ const expectPanelLayout = ({ name, extra, creator, mimetype }) => {
   }
 };
 
-export const expectDocumentViewScreenLayout = ({ name, extra, creator }) => {
+export const expectItemHeaderLayout = ({ id, type }) => {
+  const header = cy.get(`#${ITEM_HEADER_ID}`);
+
+  if (ITEM_TYPES_WITH_CAPTIONS.includes(type)) {
+    header.get(`#${buildEditButtonId(id)}`).should('exist');
+  }
+  header.get(`#${buildShareButtonId(id)}`).should('exist');
+  header.get(`#${buildPerformButtonId(id)}`).should('exist');
+  header.get(`#${buildSettingsButtonId(id)}`).should('exist');
+};
+
+export const expectDocumentViewScreenLayout = ({
+  name,
+  extra,
+  creator,
+  type,
+  id,
+}) => {
   cy.get(DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR).then((editor) => {
     expect(editor.html()).to.contain(getDocumentExtra(extra)?.content);
   });
@@ -52,6 +75,8 @@ export const expectDocumentViewScreenLayout = ({ name, extra, creator }) => {
     extra,
     creator,
   });
+
+  expectItemHeaderLayout({ type, id });
 };
 
 export const expectFileViewScreenLayout = ({
@@ -78,6 +103,8 @@ export const expectFileViewScreenLayout = ({
 
   // table
   expectPanelLayout({ name, extra, creator, mimetype });
+
+  expectItemHeaderLayout({ type, id });
 };
 
 export const expectLinkViewScreenLayout = ({
@@ -86,6 +113,7 @@ export const expectLinkViewScreenLayout = ({
   extra,
   creator,
   description,
+  type,
 }) => {
   const { url, html } = getEmbeddedLinkExtra(extra);
 
@@ -106,9 +134,13 @@ export const expectLinkViewScreenLayout = ({
 
   // table
   expectPanelLayout({ name, extra, creator });
+
+  expectItemHeaderLayout({ type, id });
 };
 
-export const expectFolderViewScreenLayout = ({ name, creator }) => {
+export const expectFolderViewScreenLayout = ({ name, creator, id, type }) => {
   // table
   expectPanelLayout({ name, creator });
+
+  expectItemHeaderLayout({ type, id });
 };
diff --git a/cypress/support/server.js b/cypress/support/server.js
@@ -26,6 +26,7 @@ import {
 import { SETTINGS } from '../../src/config/constants';
 import { ITEM_LOGIN_TAG } from '../fixtures/itemTags';
 import { getMemberById } from '../../src/utils/member';
+import { PERMISSION_LEVELS } from '../../src/enums';
 
 const {
   buildCopyItemRoute,
@@ -596,7 +597,14 @@ export const mockGetItemMembershipsForItem = (items) => {
     },
     ({ reply, url }) => {
       const { itemId } = qs.parse(url.slice(url.indexOf('?') + 1));
-      const result = items.find(({ id }) => id === itemId).memberships || [];
+      const item = items.find(({ id }) => id === itemId);
+      const result = item.memberships || [
+        {
+          permission: PERMISSION_LEVELS.ADMIN,
+          memberId: item.creator,
+          itemId: item.id,
+        },
+      ];
       reply(result);
     },
   ).as('getItemMemberships');

diff --git a/src/components/common/Authorization.js b/src/components/common/Authorization.js
@@ -9,15 +9,18 @@ import {
 import { hooks } from '../../config/queryClient';
 import Loader from './Loader';
 import RedirectPage from './RedirectionContent';
+import { redirect } from '../../utils/navigation';
 
 const Authorization = () => (ChildComponent) => {
   const ComposedComponent = (props) => {
     const { pathname } = useLocation();
 
     const redirectToSignIn = () => {
-      window.location.href = `${AUTHENTICATION_HOST}/${API_ROUTES.buildSignInPath(
-        `${window.location.origin}${pathname}`,
-      )}`;
+      redirect(
+        `${AUTHENTICATION_HOST}/${API_ROUTES.buildSignInPath(
+          `${window.location.origin}${pathname}`,
+        )}`,
+      );
     };
 
     const {

diff --git a/src/components/common/PerformViewButton.js b/src/components/common/PerformViewButton.js
@@ -0,0 +1,35 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import PlayCircleFilledIcon from '@material-ui/icons/PlayCircleFilled';
+import { useTranslation } from 'react-i18next';
+import Tooltip from '@material-ui/core/Tooltip';
+import { redirect } from '../../utils/navigation';
+import { buildGraaspPerformView } from '../../config/paths';
+import { buildPerformButtonId } from '../../config/selectors';
+
+const PerformViewButton = ({ itemId }) => {
+  const { t } = useTranslation();
+
+  const onClickPerformView = () => {
+    redirect(buildGraaspPerformView(itemId), { openInNewTab: true });
+  };
+
+  return (
+    <Tooltip title={t('Show Perform View')}>
+      <IconButton
+        aria-label={t('perform view')}
+        onClick={onClickPerformView}
+        id={buildPerformButtonId(itemId)}
+      >
+        <PlayCircleFilledIcon fontSize="small" />
+      </IconButton>
+    </Tooltip>
+  );
+};
+
+PerformViewButton.propTypes = {
+  itemId: PropTypes.string.isRequired,
+};
+
+export default PerformViewButton;
diff --git a/src/components/common/ShareButton.js b/src/components/common/ShareButton.js
@@ -4,7 +4,10 @@ import IconButton from '@material-ui/core/IconButton';
 import ShareIcon from '@material-ui/icons/Share';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@material-ui/core/Tooltip';
-import { SHARE_ITEM_BUTTON_CLASS } from '../../config/selectors';
+import {
+  buildShareButtonId,
+  SHARE_ITEM_BUTTON_CLASS,
+} from '../../config/selectors';
 import { ShareItemModalContext } from '../context/ShareItemModalContext';
 
 const ShareButton = ({ itemId }) => {
@@ -21,6 +24,7 @@ const ShareButton = ({ itemId }) => {
         aria-label="share"
         className={SHARE_ITEM_BUTTON_CLASS}
         onClick={handleShare}
+        id={buildShareButtonId(itemId)}
       >
         <ShareIcon fontSize="small" />
       </IconButton>

diff --git a/src/components/item/header/ItemHeader.js b/src/components/item/header/ItemHeader.js
@@ -7,6 +7,7 @@ import Navigation from '../../layout/Navigation';
 import ItemHeaderActions from './ItemHeaderActions';
 import { buildItemPath } from '../../../config/paths';
 import Loader from '../../common/Loader';
+import { ITEM_HEADER_ID } from '../../../config/selectors';
 
 const { useCurrentMember, useItem } = hooks;
 
@@ -34,7 +35,7 @@ const ItemHeader = ({ onClick }) => {
   }
 
   return (
-    <div className={classes.root}>
+    <div className={classes.root} id={ITEM_HEADER_ID}>
       <Navigation item={item} user={user} />
       <ItemHeaderActions item={item} onClick={onClick} />
     </div>

diff --git a/src/components/item/header/ItemHeaderActions.js b/src/components/item/header/ItemHeaderActions.js
@@ -5,18 +5,21 @@ import clsx from 'clsx';
 import EditIcon from '@material-ui/icons/Edit';
 import { Map } from 'immutable';
 import InfoIcon from '@material-ui/icons/Info';
+import Tooltip from '@material-ui/core/Tooltip';
+import { useTranslation } from 'react-i18next';
 import { makeStyles } from '@material-ui/core/styles';
 import ModeButton from './ModeButton';
 import { ITEM_TYPES } from '../../../enums';
 import { LayoutContext } from '../../context/LayoutContext';
 import {
+  buildEditButtonId,
   ITEM_INFORMATION_BUTTON_ID,
   ITEM_INFORMATION_ICON_IS_OPEN_CLASS,
-  VIEW_ITEM_EDIT_ITEM_BUTTON_ID,
 } from '../../../config/selectors';
 import ShareButton from '../../common/ShareButton';
 import { ITEM_TYPES_WITH_CAPTIONS } from '../../../config/constants';
 import ItemSettingsButton from '../settings/ItemSettingsButton';
+import PerformViewButton from '../../common/PerformViewButton';
 
 const useStyles = makeStyles((theme) => ({
   root: {
@@ -31,6 +34,7 @@ const useStyles = makeStyles((theme) => ({
 }));
 const ItemHeaderActions = ({ onClick, item }) => {
   const classes = useStyles();
+  const { t } = useTranslation();
   const {
     setEditingItemId,
     editingItemId,
@@ -50,17 +54,20 @@ const ItemHeaderActions = ({ onClick, item }) => {
       const activeActions = (
         <>
           {showEditButton && (
-            <IconButton
-              aria-label="edit"
-              onClick={() => {
-                setEditingItemId(id);
-              }}
-              id={VIEW_ITEM_EDIT_ITEM_BUTTON_ID}
-            >
-              <EditIcon fontSize="small" />
-            </IconButton>
+            <Tooltip title={t('Edit')}>
+              <IconButton
+                aria-label="edit"
+                onClick={() => {
+                  setEditingItemId(id);
+                }}
+                id={buildEditButtonId(id)}
+              >
+                <EditIcon fontSize="small" />
+              </IconButton>
+            </Tooltip>
           )}
           <ShareButton itemId={id} />
+          <PerformViewButton itemId={id} />
         </>
       );
 

diff --git a/src/components/item/settings/ItemSettingsButton.js b/src/components/item/settings/ItemSettingsButton.js
@@ -2,12 +2,17 @@ import React, { useContext } from 'react';
 import { Loader } from '@graasp/ui';
 import PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
+import Tooltip from '@material-ui/core/Tooltip';
 import SettingsIcon from '@material-ui/icons/Settings';
+import { useTranslation } from 'react-i18next';
 import CloseIcon from '@material-ui/icons/Close';
 import { hooks } from '../../../config/queryClient';
 import { LayoutContext } from '../../context/LayoutContext';
 import { isSettingsEditionAllowedForUser } from '../../../utils/membership';
-import { ITEM_SETTINGS_BUTTON_CLASS } from '../../../config/selectors';
+import {
+  buildSettingsButtonId,
+  ITEM_SETTINGS_BUTTON_CLASS,
+} from '../../../config/selectors';
 
 function ItemSettingsButton({ id }) {
   const { setIsItemSettingsOpen, isItemSettingsOpen } = useContext(
@@ -19,6 +24,7 @@ function ItemSettingsButton({ id }) {
   } = hooks.useItemMemberships(id);
   const { data: user, isLoading: isMemberLoading } = hooks.useCurrentMember();
   const memberId = user?.get('id');
+  const { t } = useTranslation();
 
   if (isMembershipsLoading || isMemberLoading) {
     return <Loader />;
@@ -34,12 +40,15 @@ function ItemSettingsButton({ id }) {
   };
 
   return (
-    <IconButton
-      onClick={onClickSettings}
-      className={ITEM_SETTINGS_BUTTON_CLASS}
-    >
-      {isItemSettingsOpen ? <CloseIcon /> : <SettingsIcon />}
-    </IconButton>
+    <Tooltip title={t('Settings')}>
+      <IconButton
+        onClick={onClickSettings}
+        className={ITEM_SETTINGS_BUTTON_CLASS}
+        id={buildSettingsButtonId(id)}
+      >
+        {isItemSettingsOpen ? <CloseIcon /> : <SettingsIcon />}
+      </IconButton>
+    </Tooltip>
   );
 }
 

diff --git a/src/config/constants.js b/src/config/constants.js
@@ -11,9 +11,9 @@ const {
   S3_FILES_HOST: ENV_S3_FILES_HOST,
   UPLOAD_METHOD: ENV_UPLOAD_METHOD,
   SHOW_NOTIFICATIONS: ENV_SHOW_NOTIFICATIONS,
+  GRAASP_PERFORM_HOST: ENV_GRAASP_PERFORM_HOST,
   AUTHENTICATION_HOST: ENV_AUTHENTICATION_HOST,
   NODE_ENV: ENV_NODE_ENV,
-  PERFORM_VIEW_HOST: ENV_PERFORM_VIEW_HOST,
 } = env;
 
 export const APP_NAME = 'Graasp';
@@ -44,10 +44,10 @@ export const AUTHENTICATION_HOST =
   process.env.REACT_APP_AUTHENTICATION_HOST ||
   'http://localhost:3111';
 
-export const PERFORM_VIEW_HOST =
-  ENV_PERFORM_VIEW_HOST ||
-  process.env.REACT_APP_PERFORM_VIEW_HOST ||
-  'http://localhost:3111';
+export const GRAASP_PERFORM_HOST =
+  ENV_GRAASP_PERFORM_HOST ||
+  process.env.REACT_APP_GRAASP_PERFORM_HOST ||
+  'http://localhost:3113';
 
 export const DESCRIPTION_MAX_LENGTH = 30;
 

diff --git a/src/config/paths.js b/src/config/paths.js
@@ -1,3 +1,5 @@
+import { GRAASP_PERFORM_HOST } from './constants';
+
 export const HOME_PATH = '/';
 export const SHARED_ITEMS_PATH = '/shared';
 export const FAVORITE_ITEMS_PATH = '/favorite';
@@ -8,3 +10,4 @@ export const REDIRECT_PATH = '/redirect';
 export const MEMBER_PROFILE_PATH = '/profile';
 export const buildItemSettingsPath = (id = ':itemId') =>
   `${ITEMS_PATH}/${id}/settings`;
+export const buildGraaspPerformView = (id) => `${GRAASP_PERFORM_HOST}/${id}`;
diff --git a/src/config/selectors.js b/src/config/selectors.js
@@ -83,7 +83,6 @@ export const DOCUMENT_ITEM_TEXT_EDITOR_ID = 'documentItemTextEditor';
 export const DOCUMENT_ITEM_TEXT_EDITOR_SELECTOR = `#${DOCUMENT_ITEM_TEXT_EDITOR_ID} .ql-editor`;
 export const CREATE_ITEM_APP_ID = 'createItemApp';
 export const ITEM_FORM_APP_URL_ID = 'itemFormAppUrl';
-export const VIEW_ITEM_EDIT_ITEM_BUTTON_ID = 'viewItemEditItemButton';
 export const TEXT_EDITOR_CLASS = 'ql-editor';
 export const buildSaveButtonId = (id) => `saveButton-${id}`;
 export const MEMBER_PROFILE_MEMBER_ID_ID = 'memberProfileMemberId';
@@ -112,3 +111,8 @@ export const ITEMS_GRID_ITEMS_PER_PAGE_SELECT_ID =
 export const ITEMS_GRID_ITEMS_PER_PAGE_SELECT_LABEL_ID =
   'itemsGridItemsPerPageSelectLabel';
 export const ITEMS_GRID_PAGINATION_ID = 'itemsGridPagination';
+export const ITEM_HEADER_ID = 'itemHeader';
+export const buildShareButtonId = (id) => `shareButton-${id}`;
+export const buildPerformButtonId = (id) => `performButton-${id}`;
+export const buildEditButtonId = (id) => `editButton-${id}`;
+export const buildSettingsButtonId = (id) => `settingsButton-${id}`;