Merge pull request #294 from graasp/293/appItemUpdate

refactor: update app item data

cypress/fixtures/apps/app.html

@@ -76,9 +76,8 @@
       port2 = e.ports[0];
       port2.onmessage = onMessage;
       console.log(e.data);
-      itemId = e.data.payload.itemId;
-      document.getElementById('requestContext-message').innerHTML =
-        e.data.payload.itemId;
+      itemId = JSON.parse(e.data).payload.itemId;
+      document.getElementById('requestContext-message').innerHTML = itemId;
     }
 
     // Handle messages received on port2

cypress/integration/item/apps/apps.spec.js

@@ -24,7 +24,7 @@ describe('Apps', () => {
     cy.checkContentInElementInIframe(
       iframeSelector,
       'ul',
-      'GET_AUTH_TOKEN_SUCCEEDED',
+      'GET_AUTH_TOKEN_SUCCESS',
     );
 
     // check app can get app-data

cypress/integration/item/copy/listCopyItem.spec.js

@@ -10,6 +10,8 @@ import {
   buildItemMenu,
   ITEM_MENU_COPY_BUTTON_CLASS,
   buildItemMenuButtonId,
+  buildItemsTableId,
+  EDIT_ITEM_BUTTON_CLASS,
 } from '../../../../src/config/selectors';
 import { SAMPLE_ITEMS } from '../../../fixtures/items';
 import { TABLE_ITEM_RENDER_TIME } from '../../../support/constants';
@@ -93,7 +95,7 @@ describe('Copy Item in List', () => {
 
   describe('Error handling', () => {
     it('error while copying item does not create in interface', () => {
-      cy.setUpApi({ ...SAMPLE_ITEMS, copyItemError: true });
+      cy.setUpApi({ ...SAMPLE_ITEMS, copyItemsError: true });
       const { id } = SAMPLE_ITEMS.items[0];
 
       // go to children item
@@ -107,10 +109,13 @@ describe('Copy Item in List', () => {
       const { path: toItemPath } = SAMPLE_ITEMS.items[0];
       copyItem({ id: copyItemId, toItemPath });
 
-      cy.wait('@copyItems').then(({ response: { body } }) => {
+      cy.wait('@copyItems').then(() => {
         // check item is still existing in parent
         cy.get(buildItemsTableRowIdAttribute(copyItemId)).should('exist');
-        cy.get(buildItemsTableRowIdAttribute(body[0].id)).should('not.exist');
+        cy.get(`#${buildItemsTableId(id)} .${EDIT_ITEM_BUTTON_CLASS}`).should(
+          'have.length',
+          3,
+        );
       });
     });
   });

cypress/integration/item/share/itemLogin.spec.js

@@ -160,7 +160,6 @@ describe('Item Login', () => {
   describe('Display Item Login Setting', () => {
     it('edit item login setting', () => {
       cy.setUpApi(ITEM_LOGIN_ITEMS);
-      cy.log('item with item login');
       const item = ITEM_LOGIN_ITEMS.items[0];
       // check item with item login enabled
       cy.visit(buildItemPath(item.id));
@@ -173,7 +172,6 @@ describe('Item Login', () => {
       editItemLoginSetting(SETTINGS.ITEM_LOGIN.OPTIONS.USERNAME_AND_PASSWORD);
 
       // disabled at child level
-      cy.log('child of item with item login');
       const item2 = ITEM_LOGIN_ITEMS.items[5];
       cy.visit(buildItemPath(item2.id));
       cy.get(`#${buildShareButtonId(item2.id)}`).click();

src/components/Root.js

@@ -43,7 +43,7 @@ const Root = () => (
         <App />
       </MuiThemeProvider>
     </I18nextProvider>
-    {NODE_ENV === ENV.DEVELOPMENT && <ReactQueryDevtools initialIsOpen />}
+    {NODE_ENV === ENV.DEVELOPMENT && <ReactQueryDevtools />}
   </QueryClientProvider>
 );
 

src/components/common/HideButton.js

@@ -6,8 +6,7 @@ import VisibilityOff from '@material-ui/icons/VisibilityOff';
 import { useTranslation } from 'react-i18next';
 import Tooltip from '@material-ui/core/Tooltip';
 import { MUTATION_KEYS } from '@graasp/query-client';
-import { useMutation } from 'react-query';
-import { hooks } from '../../config/queryClient';
+import { hooks, useMutation } from '../../config/queryClient';
 import { HIDDEN_ITEM_BUTTON_CLASS } from '../../config/selectors';
 import { HIDDEN_ITEM_TAG_ID } from '../../config/constants';
 

src/components/item/ItemContent.js

@@ -12,7 +12,7 @@ import {
   DOCUMENT_ITEM_TEXT_EDITOR_ID,
   ITEM_SCREEN_ERROR_ALERT_ID,
 } from '../../config/selectors';
-import { ITEM_KEYS, ITEM_TYPES, APP_MODES } from '../../enums';
+import { ITEM_KEYS, ITEM_TYPES } from '../../enums';
 import Loader from '../common/Loader';
 import ErrorAlert from '../common/ErrorAlert';
 import { API_HOST, ITEM_DEFAULT_HEIGHT } from '../../config/constants';
@@ -33,7 +33,7 @@ const useStyles = makeStyles(() => ({
   },
 }));
 
-const ItemContent = ({ item, enableEdition }) => {
+const ItemContent = ({ item, enableEdition, permission }) => {
   const classes = useStyles();
   const itemId = item.get(ITEM_KEYS.ID);
   const itemType = item?.get(ITEM_KEYS.TYPE);
@@ -43,7 +43,7 @@ const ItemContent = ({ item, enableEdition }) => {
   const { editingItemId, setEditingItemId } = useContext(LayoutContext);
 
   // provide user to app
-  const { data: user, isLoading: isLoadingUser } =
+  const { data: member, isLoading: isLoadingUser } =
     useContext(CurrentUserContext);
 
   // display children
@@ -137,9 +137,9 @@ const ItemContent = ({ item, enableEdition }) => {
           onSaveCaption={onSaveCaption}
           saveButtonId={saveButtonId}
           onSettingsUpdate={editItemAsync}
-          user={user}
+          member={member}
           height={ITEM_DEFAULT_HEIGHT}
-          mode={enableEdition ? APP_MODES.TEACHER : APP_MODES.STUDENT}
+          permission={permission}
           requestApiAccessToken={Api.requestApiAccessToken}
         />
       );
@@ -171,6 +171,7 @@ const ItemContent = ({ item, enableEdition }) => {
 ItemContent.propTypes = {
   item: PropTypes.instanceOf(Map).isRequired,
   enableEdition: PropTypes.bool,
+  permission: PropTypes.string.isRequired,
 };
 
 ItemContent.defaultProps = {

src/components/main/ItemScreen.js

@@ -4,7 +4,7 @@ import { ItemLoginAuthorization } from '@graasp/ui';
 import { useParams } from 'react-router';
 import {
   getMembership,
-  isItemUpdateAllowedForUser,
+  getHighestPermissionForMemberFromMemberships,
 } from '../../utils/membership';
 import ErrorAlert from '../common/ErrorAlert';
 import { CurrentUserContext } from '../context/CurrentUserContext';
@@ -24,6 +24,7 @@ import {
   ITEM_LOGIN_SIGN_IN_PASSWORD_ID,
   ITEM_LOGIN_SIGN_IN_USERNAME_ID,
 } from '../../config/selectors';
+import { PERMISSIONS_EDITION_ALLOWED } from '../../config/constants';
 
 const { useItem, useItemMemberships, useCurrentMember, useItemLogin } = hooks;
 
@@ -53,10 +54,12 @@ const ItemScreen = () => {
     return <ErrorAlert />;
   }
 
-  const enableEdition = isItemUpdateAllowedForUser({
+  const itemMembership = getHighestPermissionForMemberFromMemberships({
     memberships: getMembership(memberships),
     memberId: currentMember?.get('id'),
   });
+  const permission = itemMembership?.permission;
+  const enableEdition = PERMISSIONS_EDITION_ALLOWED.includes(permission);
 
   const content = (() => {
     if (enableEdition && isItemSettingsOpen) {
@@ -70,7 +73,13 @@ const ItemScreen = () => {
     if (isDashboardOpen) {
       return <GraaspAnalyzer item={item} />;
     }
-    return <ItemContent item={item} enableEdition={enableEdition} />;
+    return (
+      <ItemContent
+        item={item}
+        enableEdition={enableEdition}
+        permission={permission}
+      />
+    );
   })();
 
   return (

src/utils/membership.js

@@ -4,12 +4,6 @@ import { PERMISSION_LEVELS } from '../enums';
 // todo: better check with typescript
 export const isError = (memberships) => memberships?.statusCode;
 
-export const isSettingsEditionAllowedForUser = ({ memberships, memberId }) =>
-  memberships?.find(
-    ({ memberId: mId, permission }) =>
-      mId === memberId && PERMISSION_LEVELS.ADMIN === permission,
-  );
-
 export const isItemUpdateAllowedForUser = ({ memberships, memberId }) =>
   Boolean(
     memberships?.find(
@@ -18,6 +12,32 @@ export const isItemUpdateAllowedForUser = ({ memberships, memberId }) =>
     ),
   );
 
+// get highest permission a member have over an item,
+// longer the itemPath, deeper is the permission, thus highested
+export const getHighestPermissionForMemberFromMemberships = ({
+  memberships,
+  memberId,
+}) => {
+  const itemMemberships = memberships?.filter(
+    ({ memberId: mId }) => mId === memberId,
+  );
+  if (!itemMemberships) {
+    return null;
+  }
+
+  const sorted = itemMemberships?.sort(
+    (a, b) => a.itemPath.length > b.itemPath.length,
+  );
+
+  return sorted[0];
+};
+
+export const isSettingsEditionAllowedForUser = ({ memberships, memberId }) =>
+  memberships?.find(
+    ({ memberId: mId, permission }) =>
+      mId === memberId && PERMISSION_LEVELS.ADMIN === permission,
+  );
+
 export const membershipsWithoutUser = (memberships, userId) =>
   memberships?.filter(({ memberId }) => memberId !== userId);
 

yarn.lock

@@ -1911,7 +1911,7 @@ __metadata:
 
 "@graasp/ui@github:graasp/graasp-ui.git":
   version: 0.2.0
-  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=f4067389a0868cd84d5417fb02d564cc3a2d2637"
+  resolution: "@graasp/ui@https://github.com/graasp/graasp-ui.git#commit=9effce6baad8cda6cef5095032a0502395a94a75"
   dependencies:
     "@graasp/utils": "github:graasp/graasp-utils.git"
     clsx: 1.1.1
@@ -1930,7 +1930,7 @@ __metadata:
     i18next: 21.3.1
     react: ^16.13.1
     react-dom: 16.13.1
-  checksum: f24aec035b70b465f4f833dc28a30b5da6eda05392a81f9204eddb5b59b0767fcc735f2dcede980223beaa0b7ae0dfab47a09072378432d9d8d744883fc86865
+  checksum: 392c15ef8e0d210de475483606cdcc214de9eddc88522e1cd795a63d4fcbcbf579d8dc84f34e4af01a34d30b0ef20686a3cec0a4e9b92e352f514cbca71b65fa
   languageName: node
   linkType: hard