feat: improvements in Player interface (#72)

* feat: improvements in Player interface * change paragraph font size * fix: minor code changes * chore: update yarn.lock * chore: minor changes * chore: update yarn.lock * refactor: update yarn.lock, prettify * test: change tests and minor changes * fix: minor changes Co-authored-by: pyphilia <pyphilia@gmail.com>
graasp · Apr 12, 2022 · 17b239f · 17b239f
1 parent 38e4e28
commit 17b239f
Show file tree

Hide file tree

Showing 18 changed files with 1,819 additions and 981 deletions.
diff --git a/cypress/fixtures/documents.js b/cypress/fixtures/documents.js
@@ -2,6 +2,9 @@ import { ITEM_TYPES } from '../../src/enums';
 import { buildDocumentExtra } from '../../src/utils/itemExtra';
 import { CURRENT_USER } from './members';
 
+const PUBLIC_TAG_ID = Cypress.env('PUBLIC_TAG_ID');
+const HIDDEN_TAG_ID = Cypress.env('HIDDEN_TAG_ID');
+
 // eslint-disable-next-line import/prefer-default-export
 export const GRAASP_DOCUMENT_ITEM = {
  id: 'ecafbd2a-5688-12eb-ae91-0242ac130002',
@@ -18,3 +21,85 @@ export const GRAASP_DOCUMENT_ITEM = {
  showChatbox: false,
  },
 };
+
+export const GRAASP_DOCUMENT_ITEM_VISIBLE = {
+ id: 'fdf09f5a-5688-11eb-ae93-0242ac130009',
+ type: ITEM_TYPES.DOCUMENT,
+ name: 'Visible document',
+ description: 'a description for graasp text',
+ path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130009',
+ creator: CURRENT_USER.id,
+ extra: buildDocumentExtra({
+ content: '<h1>Visible document</h1>',
+ }),
+ settings: {
+ isPinned: false,
+ showChatbox: false,
+ },
+};
+
+export const GRAASP_DOCUMENT_ITEM_HIDDEN = {
+ id: 'fdf09f5a-5688-11eb-ae93-0242ac130010',
+ type: ITEM_TYPES.DOCUMENT,
+ name: 'Hidden document',
+ description: 'a description for graasp text',
+ path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130010',
+ creator: CURRENT_USER.id,
+ extra: buildDocumentExtra({
+ content: '<h1>Hidden document</h1>',
+ }),
+ settings: {
+ isPinned: false,
+ showChatbox: false,
+ },
+ tags: [
+ {
+ tagId: HIDDEN_TAG_ID,
+ },
+ ],
+};
+
+export const GRAASP_DOCUMENT_ITEM_PUBLIC_VISIBLE = {
+ id: 'fdf09f5a-5688-11eb-ae93-0242ac130009',
+ type: ITEM_TYPES.DOCUMENT,
+ name: 'Public visible document',
+ description: 'a description for graasp text',
+ path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130009',
+ creator: CURRENT_USER.id,
+ extra: buildDocumentExtra({
+ content: '<h1>Public visible document</h1>',
+ }),
+ settings: {
+ isPinned: false,
+ showChatbox: false,
+ },
+ tags: [
+ {
+ tagId: PUBLIC_TAG_ID,
+ },
+ ],
+};
+
+export const GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN = {
+ id: 'fdf09f5a-5688-11eb-ae93-0242ac130010',
+ type: ITEM_TYPES.DOCUMENT,
+ name: 'Public hidden document',
+ description: 'a description for graasp text',
+ path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130010',
+ creator: CURRENT_USER.id,
+ extra: buildDocumentExtra({
+ content: '<h1>Public hidden document</h1>',
+ }),
+ settings: {
+ isPinned: false,
+ showChatbox: false,
+ },
+ tags: [
+ {
+ tagId: HIDDEN_TAG_ID,
+ },
+ {
+ tagId: PUBLIC_TAG_ID,
+ },
+ ],
+};
diff --git a/cypress/fixtures/items.js b/cypress/fixtures/items.js
@@ -1,8 +1,8 @@
 import { ITEM_TYPES } from '../../src/enums';
 import { CURRENT_USER } from './members';
+import { GRAASP_DOCUMENT_ITEM_VISIBLE, GRAASP_DOCUMENT_ITEM_HIDDEN, GRAASP_DOCUMENT_ITEM_PUBLIC_VISIBLE, GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN } from './documents'
 
 const PUBLIC_TAG_ID = Cypress.env('PUBLIC_TAG_ID');
-const HIDDEN_TAG_ID = Cypress.env('HIDDEN_TAG_ID');
 
 export const DEFAULT_FOLDER_ITEM = {
  description: '',
@@ -201,37 +201,8 @@ export const FOLDER_WITH_HIDDEN_ITEMS = {
  showChatbox: false,
  },
  },
- {
- ...DEFAULT_FOLDER_ITEM,
- id: 'fdf09f5a-5688-11eb-ae93-0242ac130009',
- name: 'Visible',
- path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130009',
- extra: {
- image: 'someimageurl',
- },
- settings: {
- isPinned: false,
- showChatbox: false,
- },
- },
- {
- ...DEFAULT_FOLDER_ITEM,
- id: 'fdf09f5a-5688-11eb-ae93-0242ac130010',
- name: 'Hidden',
- path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130010',
- extra: {
- image: 'someimageurl',
- },
- settings: {
- isPinned: false,
- showChatbox: false,
- },
- tags: [
- {
- tagId: HIDDEN_TAG_ID,
- },
- ],
- },
+ GRAASP_DOCUMENT_ITEM_VISIBLE,
+ GRAASP_DOCUMENT_ITEM_HIDDEN,
  ],
 };
 
@@ -255,45 +226,8 @@ export const PUBLIC_FOLDER_WITH_HIDDEN_ITEMS = {
  },
  ],
  },
- {
- ...DEFAULT_FOLDER_ITEM,
- id: 'fdf09f5a-5688-11eb-ae93-0242ac130009',
- name: 'Visible',
- path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130009',
- extra: {
- image: 'someimageurl',
- },
- settings: {
- isPinned: false,
- showChatbox: false,
- },
- tags: [
- {
- tagId: PUBLIC_TAG_ID,
- },
- ],
- },
- {
- ...DEFAULT_FOLDER_ITEM,
- id: 'fdf09f5a-5688-11eb-ae93-0242ac130010',
- name: 'Hidden',
- path: 'ecafbd2a_5688_11eb_ae93_0242ac130008.fdf09f5a_5688_11eb_ae93_0242ac130010',
- extra: {
- image: 'someimageurl',
- },
- settings: {
- isPinned: false,
- showChatbox: false,
- },
- tags: [
- {
- tagId: HIDDEN_TAG_ID,
- },
- {
- tagId: PUBLIC_TAG_ID,
- },
- ],
- },
+ GRAASP_DOCUMENT_ITEM_PUBLIC_VISIBLE,
+ GRAASP_DOCUMENT_ITEM_PUBLIC_HIDDEN,
  ],
 };
 

diff --git a/cypress/integration/hidden.spec.js b/cypress/integration/hidden.spec.js
@@ -1,6 +1,6 @@
 import { buildMainPath } from '../../src/config/paths';
 import { FOLDER_WITH_HIDDEN_ITEMS } from '../fixtures/items';
-import { buildFolderButtonId } from '../../src/config/selectors';
+import { buildDocumentId } from '../../src/config/selectors';
 
 describe('Hidden Items', () => {
  it("Don't display Hidden items", () => {
@@ -12,10 +12,10 @@ describe('Hidden Items', () => {
  cy.visit(buildMainPath({ rootId: parent.id, id: null }));
 
  cy.get(
- `#${buildFolderButtonId(FOLDER_WITH_HIDDEN_ITEMS.items[1].id)}`,
+ `#${buildDocumentId(FOLDER_WITH_HIDDEN_ITEMS.items[1].id)}`,
  ).should('exist');
  cy.get(
- `#${buildFolderButtonId(FOLDER_WITH_HIDDEN_ITEMS.items[2].id)}`,
+ `#${buildDocumentId(FOLDER_WITH_HIDDEN_ITEMS.items[2].id)}`,
  ).should('not.exist');
  });
 

diff --git a/cypress/support/integrationUtils.js b/cypress/support/integrationUtils.js
@@ -3,7 +3,6 @@ import {
  buildFileId,
  buildDocumentId,
  buildAppId,
- buildFolderButtonId,
  buildTreeItemClass,
 } from '../../src/config/selectors';
 import { ITEM_TYPES, MIME_TYPES } from '../../src/enums';
@@ -15,8 +14,9 @@ import {
 } from '../../src/utils/itemExtra';
 import { getDirectParentId } from '../../src/utils/item';
 import { LOAD_FOLDER_CONTENT_PAUSE } from './constants';
+import qs from 'qs';
 
-export const expectLinkViewScreenLayout = ({ id, name, extra }) => {
+export const expectLinkViewScreenLayout = ({ id, extra }) => {
  const { url, html } = getEmbeddedLinkExtra(extra);
 
  // embedded element
@@ -31,22 +31,23 @@ export const expectLinkViewScreenLayout = ({ id, name, extra }) => {
  cy.get(`iframe#${id}`).should('have.attr', 'src', url);
  }
 
- // mainmenu
- const menu = cy.get(`#${MAIN_MENU_ID}`);
- menu.get(`#${MAIN_MENU_ID}`).contains(name);
 };
 
-export const expectAppViewScreenLayout = ({ id, name, extra }) => {
+export const expectAppViewScreenLayout = ({ id, extra }) => {
  const { url } = extra.app;
 
- cy.get(`iframe#${buildAppId(id)}`).should('have.attr', 'src', url);
+ const appUrl = `${url}${qs.stringify(
+ { itemId: id },
+ {
+ addQueryPrefix: true,
+ },
+ )}`;
+
+ cy.get(`iframe#${buildAppId(id)}`).should('have.attr', 'src', appUrl);
 
- // mainmenu
- const menu = cy.get(`#${MAIN_MENU_ID}`);
- menu.get(`#${MAIN_MENU_ID}`).contains(name);
 };
 
-export const expectFileViewScreenLayout = ({ id, name, extra }) => {
+export const expectFileViewScreenLayout = ({ id, extra }) => {
  const mimetype =
  getFileExtra(extra)?.mimetype || getS3FileExtra(extra)?.mimetype;
 
@@ -61,9 +62,6 @@ export const expectFileViewScreenLayout = ({ id, name, extra }) => {
  }
  cy.get(selector).should('exist');
 
- // mainmenu
- const menu = cy.get(`#${MAIN_MENU_ID}`);
- menu.get(`#${MAIN_MENU_ID}`).contains(name);
 };
 
 export const expectDocumentViewScreenLayout = ({ id, extra }) => {
@@ -72,8 +70,10 @@ export const expectDocumentViewScreenLayout = ({ id, extra }) => {
  });
 };
 
-export const expectFolderButtonLayout = ({ id, name }) => {
- cy.get(`#${buildFolderButtonId(id)}`).should('contain', name);
+export const expectFolderButtonLayout = ({ name }) => {
+ // mainmenu
+ const menu = cy.get(`#${MAIN_MENU_ID}`);
+ menu.get(`#${MAIN_MENU_ID}`).contains(name);
 };
 
 export const expectFolderLayout = ({ rootId, items }) => {

diff --git a/package.json b/package.json
@@ -3,12 +3,16 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+ "@emotion/react": "11.8.1",
+ "@emotion/styled": "11.8.1",
  "@graasp/chatbox": "github:graasp/graasp-chatbox.git#main",
  "@graasp/query-client": "github:graasp/graasp-query-client.git",
  "@graasp/ui": "github:graasp/graasp-ui.git",
  "@material-ui/core": "4.12.3",
  "@material-ui/icons": "5.0.0-beta.4",
  "@material-ui/lab": "4.0.0-alpha.60",
+ "@mui/lab": "5.0.0-alpha.71",
+ "@mui/material": "5.5.0",
  "clsx": "1.1.1",
  "connected-react-router": "6.9.2",
  "history": "5.2.0",

diff --git a/src/components/Root.js b/src/components/Root.js
@@ -4,7 +4,8 @@ import { I18nextProvider } from 'react-i18next';
 import ReduxToastr from 'react-redux-toastr';
 import { grey } from '@material-ui/core/colors';
 import 'react-redux-toastr/lib/css/react-redux-toastr.min.css';
-import { createMuiTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { createTheme, MuiThemeProvider } from '@material-ui/core/styles';
+import { GlobalStyles } from '@mui/material';
 import App from './App';
 import configureStore from '../store/configure';
 import i18nConfig from '../config/i18n';
@@ -15,7 +16,7 @@ import {
  ReactQueryDevtools,
 } from '../config/queryClient';
 
-const theme = createMuiTheme({
+const theme = createTheme({
  palette: {
  primary: {
  main: '#5050d2',
@@ -35,12 +36,15 @@ const theme = createMuiTheme({
  },
 });
 
+const globalStyles = <GlobalStyles styles={{ p: { fontSize: '1rem' } }} />;
+
 const { store } = configureStore();
 
 const Root = () => (
  <QueryClientProvider client={queryClient}>
  <I18nextProvider i18n={i18nConfig}>
  <Provider store={store}>
+ {globalStyles}
  <MuiThemeProvider theme={theme}>
  {SHOW_NOTIFICATIONS && <ReduxToastr />}
  <App />

diff --git a/src/components/common/BuilderButton.js b/src/components/common/BuilderButton.js
@@ -0,0 +1,55 @@
+import React from 'react';
+import EditIcon from '@material-ui/icons/Edit';
+import { PermissionedComponent, Loader } from '@graasp/ui';
+import PropTypes from 'prop-types';
+import { Tooltip, makeStyles } from '@material-ui/core';
+import { useTranslation } from 'react-i18next';
+import IconButton from '@material-ui/core/IconButton';
+import { hooks } from '../../config/queryClient';
+import { buildGraaspComposeItemRoute } from '../../config/constants';
+import { isRegularUser } from '../../utils/user';
+
+const useStyles = makeStyles(() => ({
+ iconButton: {
+ float: 'right',
+ },
+}));
+
+const BuilderButton = ({ id }) => {
+ const { t } = useTranslation();
+ const classes = useStyles();
+ const { data: user, isLoading } = hooks.useCurrentMember();
+
+ const onClickComposeView = () => {
+ window.location.href = buildGraaspComposeItemRoute(id);
+ };
+
+ if (isLoading) {
+ <Loader />;
+ }
+
+ const ActionButtons = (
+ <Tooltip title={t('Compose View')}>
+ <IconButton
+ className={classes.iconButton}
+ aria-label={t('Compose view')}
+ onClick={onClickComposeView}
+ >
+ <EditIcon />
+ </IconButton>
+ </Tooltip>
+ );
+
+ return (
+ <PermissionedComponent
+ component={ActionButtons}
+ checkPermissions={() => isRegularUser(user)}
+ />
+ );
+};
+
+BuilderButton.propTypes = {
+ id: PropTypes.string.isRequired,
+};
+
+export default BuilderButton;