fix: allow apps to render even when member is null (#406)

* fix: allow apps to render even when member is null

* fix: update yarn

* fix: add test for public app access

.yarnrc.yml

@@ -1,11 +1,11 @@
 checksumBehavior: update
 
+compressionLevel: mixed
+
 defaultSemverRangePrefix: ""
 
-nodeLinker: node-modules
+enableGlobalCache: false
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
-    spec: "@yarnpkg/plugin-interactive-tools"
+nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-3.6.4.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

cypress/e2e/apps.cy.ts

@@ -3,7 +3,10 @@ import 'cypress-iframe';
 
 import { buildMainPath } from '@/config/paths';
 
-import { APP_USING_CONTEXT_ITEM } from '../fixtures/apps';
+import {
+  APP_USING_CONTEXT_ITEM,
+  PUBLIC_APP_USING_CONTEXT_ITEM,
+} from '../fixtures/apps';
 
 const clickElementInIframe = (
   iframeSelector: string,
@@ -60,3 +63,37 @@ describe('Apps', () => {
     checkContentInElementInIframe(iframeSelector, 'ul', 'patch app data');
   });
 });
+describe('Public Apps', () => {
+  const { id, name } = PUBLIC_APP_USING_CONTEXT_ITEM;
+  beforeEach(() => {
+    cy.setUpApi({
+      items: [PUBLIC_APP_USING_CONTEXT_ITEM],
+      currentMember: null,
+    });
+
+    cy.visit(buildMainPath({ rootId: id }));
+  });
+
+  it('Public App should request context', () => {
+    cy.wait(3000);
+    const iframeSelector = `iframe[title="${name}"]`;
+    cy.frameLoaded(iframeSelector);
+
+    // check app receives successfully the context
+    clickElementInIframe(iframeSelector, '#requestContext');
+    checkContentInElementInIframe(
+      iframeSelector,
+      '#requestContext-message',
+      id,
+    );
+
+    // check app receives successfully the token
+    clickElementInIframe(iframeSelector, '#requestToken');
+    cy.wait('@appApiAccessToken');
+    checkContentInElementInIframe(
+      iframeSelector,
+      'ul',
+      `GET_AUTH_TOKEN_SUCCESS_${id}`,
+    );
+  });
+});

cypress/fixtures/apps.ts

@@ -1,8 +1,10 @@
-import { AppItemType, ItemType } from '@graasp/sdk';
+import { AppItemType, ItemTagType, ItemType } from '@graasp/sdk';
 
 import { APP_NAME } from './apps/apps';
-import { DEFAULT_FOLDER_ITEM, MockItem } from './items';
-import { CURRENT_USER } from './members';
+import { DEFAULT_FOLDER_ITEM } from './items';
+import { CURRENT_USER, MEMBERS } from './members';
+import { MockItem } from './mockTypes';
+import { mockItemTag } from './tags';
 
 // mock an app with the graasp link
 // eslint-disable-next-line import/prefer-default-export
@@ -13,8 +15,8 @@ export const GRAASP_APP_ITEM: AppItemType = {
   description: 'a description for graasp app',
   path: 'baefbd2a_5688_11eb_ae93_0242ac130002',
   creator: CURRENT_USER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
   extra: {
     app: { url: 'https://graasp.eu' },
   },
@@ -72,8 +74,26 @@ export const APP_USING_CONTEXT_ITEM: MockItem = {
     },
   },
   creator: CURRENT_USER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+};
+
+export const PUBLIC_APP_USING_CONTEXT_ITEM: MockItem = {
+  id: 'ecafbd2a-5688-12eb-ae91-0272ac130003',
+  path: 'ecafbd2a_5688_12eb_ae91_0272ac130003',
+  name: 'my app',
+  description: 'my app description',
+  type: ItemType.APP,
+  settings: {},
+  extra: {
+    [ItemType.APP]: {
+      url: `${API_HOST}/${buildAppItemLinkForTest('app.html')}`,
+    },
+  },
+  creator: MEMBERS.BOB,
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
+  tags: [mockItemTag({ type: ItemTagType.Public })],
 };
 
 export const GRAASP_APP_ITEMS_FIXTURE = [

cypress/fixtures/items.ts

@@ -29,8 +29,8 @@ export const DEFAULT_FOLDER_ITEM: MockItem = {
     },
   },
   creator: CURRENT_USER,
-  createdAt: new Date(),
-  updatedAt: new Date(),
+  createdAt: new Date().toISOString(),
+  updatedAt: new Date().toISOString(),
   type: ItemType.FOLDER,
   settings: {
     isPinned: false,

cypress/support/commands.ts

@@ -126,7 +126,7 @@ declare global {
         items?: MockItem[];
         members?: Member[];
         chatMessages?: ChatMessage[];
-        currentMember?: Member;
+        currentMember?: Member | null;
         storedSessions?: { id: string; token: string; createdAt: number }[];
         getItemError?: boolean;
         getMemberError?: boolean;

cypress/support/server.ts

@@ -61,18 +61,18 @@ const checkMemberHasAccess = ({
 }: {
   item: MockItem;
   items: MockItem[];
-  member: Member;
+  member: Member | null;
 }) => {
   // mock membership
   const { creator } = item;
   const haveWriteMembership =
-    creator?.id === member.id ||
+    creator?.id === member?.id ||
     items.find(
       (i) =>
         item.path.startsWith(i.path) &&
         i.memberships?.find(
           ({ memberId, permission }) =>
-            memberId === member.id &&
+            memberId === member?.id &&
             PermissionLevelCompare.gte(permission, PermissionLevel.Write),
         ),
     );
@@ -82,7 +82,7 @@ const checkMemberHasAccess = ({
         item.path.startsWith(i.path) &&
         i.memberships?.find(
           ({ memberId, permission }) =>
-            memberId === member.id &&
+            memberId === member?.id &&
             PermissionLevelCompare.lt(permission, PermissionLevel.Write),
         ),
     ) ?? false;
@@ -118,7 +118,7 @@ export const mockGetOwnItems = ({
   currentMember,
 }: {
   items: MockItem[];
-  currentMember: Member;
+  currentMember: Member | null;
 }): void => {
   cy.intercept(
     {
@@ -143,7 +143,7 @@ export const mockGetSharedItems = ({
   currentMember,
 }: {
   items: MockItem[];
-  currentMember: Member;
+  currentMember: Member | null;
 }): void => {
   cy.intercept(
     {
@@ -165,7 +165,7 @@ export const mockGetSharedItems = ({
 };
 
 export const mockGetCurrentMember = (
-  currentMember = MEMBERS.ANNA,
+  currentMember: Member | null = MEMBERS.ANNA,
   shouldThrowError = false,
 ): void => {
   cy.intercept(
@@ -174,6 +174,10 @@ export const mockGetCurrentMember = (
       url: `${API_HOST}/${GET_CURRENT_MEMBER_ROUTE}`,
     },
     ({ reply }) => {
+      // simulate member accessing without log in
+      if (currentMember == null) {
+        return reply({ statusCode: StatusCodes.UNAUTHORIZED });
+      }
       if (shouldThrowError) {
         return reply({ statusCode: StatusCodes.BAD_REQUEST, body: null });
       }
@@ -185,7 +189,7 @@ export const mockGetCurrentMember = (
 };
 
 export const mockGetItem = (
-  { items, currentMember }: { items: MockItem[]; currentMember: Member },
+  { items, currentMember }: { items: MockItem[]; currentMember: Member | null },
   shouldThrowError?: boolean,
 ): void => {
   cy.intercept(
@@ -245,7 +249,7 @@ export const mockGetItemChat = ({
 
 export const mockGetItemMembershipsForItem = (
   items: MockItem[],
-  currentMember: Member,
+  currentMember: Member | null,
 ): void => {
   cy.intercept(
     {
@@ -291,7 +295,10 @@ export const mockGetItemMembershipsForItem = (
   ).as('getItemMemberships');
 };
 
-export const mockGetChildren = (items: MockItem[], member: Member): void => {
+export const mockGetChildren = (
+  items: MockItem[],
+  member: Member | null,
+): void => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
@@ -322,7 +329,10 @@ export const mockGetChildren = (items: MockItem[], member: Member): void => {
   ).as('getChildren');
 };
 
-export const mockGetDescendants = (items: MockItem[], member: Member): void => {
+export const mockGetDescendants = (
+  items: MockItem[],
+  member: Member | null,
+): void => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
@@ -379,7 +389,7 @@ export const mockGetMemberBy = (
 };
 
 export const mockDefaultDownloadFile = (
-  { items, currentMember }: { items: MockItem[]; currentMember: Member },
+  { items, currentMember }: { items: MockItem[]; currentMember: Member | null },
   shouldThrowError?: boolean,
 ): void => {
   cy.intercept(
@@ -422,7 +432,10 @@ export const mockDefaultDownloadFile = (
   ).as('downloadFile');
 };
 
-export const mockGetItemTags = (items: MockItem[], member: Member): void => {
+export const mockGetItemTags = (
+  items: MockItem[],
+  member: Member | null,
+): void => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
@@ -461,7 +474,10 @@ export const mockGetItemTags = (items: MockItem[], member: Member): void => {
   ).as('getItemTags');
 };
 
-export const mockGetItemsTags = (items: MockItem[], member: Member): void => {
+export const mockGetItemsTags = (
+  items: MockItem[],
+  member: Member | null,
+): void => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
@@ -500,7 +516,7 @@ export const mockGetLoginSchemaType = (
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   items: MockItem[],
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  member: Member,
+  member: Member | null,
 ): void => {
   cy.intercept(
     {

package.json

@@ -25,7 +25,7 @@
     "prettier:write": "prettier --write {src,cypress}/**/*.{js,ts,tsx}",
     "hooks:uninstall": "husky uninstall",
     "hooks:install": "husky install",
-    "cypress:open": "env-cmd -f ./.env.test cypress open",
+    "cypress:open": "env-cmd -f ./.env.development cypress open",
     "cypress": "yarn test",
     "test": "yarn build:test && concurrently -k -s first \"yarn preview:test\" \"yarn cypress:run\"",
     "cypress:run": "env-cmd -f ./.env.test cypress run --browser chrome"
@@ -35,15 +35,15 @@
     "@emotion/react": "11.11.1",
     "@emotion/styled": "11.11.0",
     "@graasp/chatbox": "3.0.0",
-    "@graasp/query-client": "2.0.1",
-    "@graasp/sdk": "2.0.1",
-    "@graasp/translations": "1.19.4",
-    "@graasp/ui": "4.0.0",
+    "@graasp/query-client": "2.0.2",
+    "@graasp/sdk": "2.1.0",
+    "@graasp/translations": "1.20.0",
+    "@graasp/ui": "4.0.1",
     "@mui/icons-material": "5.14.16",
     "@mui/lab": "5.0.0-alpha.151",
     "@mui/material": "5.14.16",
     "@sentry/react": "7.77.0",
-    "i18next": "23.5.1",
+    "i18next": "23.7.6",
     "lodash.truncate": "4.4.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
@@ -92,9 +92,5 @@
     "vite-plugin-checker": "^0.6.2",
     "vite-plugin-istanbul": "5.0.0"
   },
-  "resolutions": {
-    "i18next": "23.5.1",
-    "@graasp/sdk": "2.0.1"
-  },
-  "packageManager": "[email protected]"
+  "packageManager": "[email protected]"
 }

src/modules/item/Item.tsx

@@ -182,16 +182,19 @@ const DocumentContent = ({ item }: { item: DocumentItemType }): JSX.Element => {
 };
 
 const AppContent = ({ item }: { item: AppItemType }): JSX.Element => {
-  const { data: member, isLoading: isLoadingMember } =
-    useCurrentMemberContext();
+  const {
+    data: member,
+    isLoading: isLoadingMember,
+    isSuccess: isSuccessMember,
+  } = useCurrentMemberContext();
   const { t: translateMessage } = useMessagesTranslation();
 
-  if (member)
+  if (member || isSuccessMember)
     return (
       <AppItem
         frameId={buildAppId(item.id)}
         item={item}
-        memberId={member.id}
+        memberId={member?.id}
         requestApiAccessToken={(payload) =>
           Api.requestApiAccessToken(payload, { API_HOST, axios })
         }

vite.config.ts

@@ -22,6 +22,7 @@ export default ({ mode }: { mode: string }): UserConfigExport => {
     preview: {
       port: parseInt(process.env.VITE_PORT, 10),
       strictPort: true,
+      open: mode !== 'test',
     },
     build: {
       outDir: 'build',