fix: allow apps to render even when member is null

.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": "yarn@3.6.4"
+ "packageManager": "yarn@4.0.2"
 }

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',