feat: show item login message on customer pages

cypress/e2e/item/bookmarks/bookmarks.cy.ts

@@ -1,4 +1,6 @@
 import {
+  GuestFactory,
+  ItemLoginSchemaFactory,
   PackedFolderItemFactory,
   PackedItemBookmarkFactory,
 } from '@graasp/sdk';
@@ -14,6 +16,7 @@ import {
   BOOKMARK_ICON_SELECTOR,
   CREATE_ITEM_BUTTON_ID,
   ITEM_SEARCH_INPUT_ID,
+  PREVENT_GUEST_MESSAGE_ID,
   SORTING_ORDERING_SELECTOR_ASC,
   SORTING_ORDERING_SELECTOR_DESC,
   SORTING_SELECT_SELECTOR,
@@ -38,6 +41,16 @@ const addToBookmark = (itemId: string) => {
 };
 
 describe('Bookmarked Item', () => {
+  it('Show message for guest', () => {
+    const item = PackedFolderItemFactory();
+    const guest = GuestFactory({
+      itemLoginSchema: ItemLoginSchemaFactory({ item }),
+    });
+    cy.setUpApi({ items: [item], currentMember: guest });
+    cy.visit(BOOKMARKED_ITEMS_PATH);
+    cy.get(`#${PREVENT_GUEST_MESSAGE_ID}`).should('be.visible');
+  });
+
   describe('Member has no bookmarked items', () => {
     beforeEach(() => {
       cy.setUpApi({

cypress/e2e/item/home/home.cy.ts

@@ -1,4 +1,6 @@
 import {
+  GuestFactory,
+  ItemLoginSchemaFactory,
   PackedFolderItemFactory,
   PackedLocalFileItemFactory,
 } from '@graasp/sdk';
@@ -14,6 +16,7 @@ import {
   DROPZONE_SELECTOR,
   HOME_LOAD_MORE_BUTTON_SELECTOR,
   ITEM_SEARCH_INPUT_ID,
+  PREVENT_GUEST_MESSAGE_ID,
   SORTING_ORDERING_SELECTOR_ASC,
   SORTING_ORDERING_SELECTOR_DESC,
   SORTING_SELECT_SELECTOR,
@@ -211,4 +214,15 @@ describe('Home', () => {
       });
     });
   });
+
+  it('Show message for guest', () => {
+    const item = PackedFolderItemFactory();
+    const guest = GuestFactory({
+      itemLoginSchema: ItemLoginSchemaFactory({ item }),
+    });
+    cy.setUpApi({ items: [item], currentMember: guest });
+    cy.visit(HOME_PATH);
+
+    cy.get(`#${PREVENT_GUEST_MESSAGE_ID}`).should('be.visible');
+  });
 });

cypress/e2e/item/publish/viewPublished.cy.ts

@@ -1,4 +1,8 @@
-import { PackedFolderItemFactory } from '@graasp/sdk';
+import {
+  GuestFactory,
+  ItemLoginSchemaFactory,
+  PackedFolderItemFactory,
+} from '@graasp/sdk';
 
 import { SortingOptions } from '@/components/table/types';
 import { BUILDER } from '@/langs/constants';
@@ -8,6 +12,7 @@ import { PUBLISHED_ITEMS_PATH } from '../../../../src/config/paths';
 import {
   CREATE_ITEM_BUTTON_ID,
   ITEM_SEARCH_INPUT_ID,
+  PREVENT_GUEST_MESSAGE_ID,
   PUBLISHED_ITEMS_ERROR_ALERT_ID,
   PUBLISHED_ITEMS_ID,
   SORTING_ORDERING_SELECTOR_ASC,
@@ -26,6 +31,16 @@ const items = [
 const publishedItemData = items.map(({ published }) => published);
 
 describe('Published Items', () => {
+  it('Show message for guest', () => {
+    const item = PackedFolderItemFactory();
+    const guest = GuestFactory({
+      itemLoginSchema: ItemLoginSchemaFactory({ item }),
+    });
+    cy.setUpApi({ items: [item], currentMember: guest });
+    cy.visit(PUBLISHED_ITEMS_PATH);
+    cy.get(`#${PREVENT_GUEST_MESSAGE_ID}`).should('be.visible');
+  });
+
   describe('Member has no published items', () => {
     it('Show empty table', () => {
       cy.setUpApi({

cypress/e2e/item/trash/viewTrash.cy.ts

@@ -1,4 +1,9 @@
-import { PackedRecycledItemDataFactory } from '@graasp/sdk';
+import {
+  GuestFactory,
+  ItemLoginSchemaFactory,
+  PackedFolderItemFactory,
+  PackedRecycledItemDataFactory,
+} from '@graasp/sdk';
 
 import { SortingOptions } from '@/components/table/types';
 import { BUILDER } from '@/langs/constants';
@@ -8,6 +13,7 @@ import { RECYCLE_BIN_PATH } from '../../../../src/config/paths';
 import {
   CREATE_ITEM_BUTTON_ID,
   ITEM_SEARCH_INPUT_ID,
+  PREVENT_GUEST_MESSAGE_ID,
   RECYCLED_ITEMS_ERROR_ALERT_ID,
   RECYCLED_ITEMS_ROOT_CONTAINER,
   SORTING_ORDERING_SELECTOR_ASC,
@@ -24,6 +30,16 @@ const recycledItemData = [
 ];
 
 describe('View trash', () => {
+  it('Show message for guest', () => {
+    const item = PackedFolderItemFactory();
+    const guest = GuestFactory({
+      itemLoginSchema: ItemLoginSchemaFactory({ item }),
+    });
+    cy.setUpApi({ items: [item], currentMember: guest });
+    cy.visit(RECYCLE_BIN_PATH);
+    cy.get(`#${PREVENT_GUEST_MESSAGE_ID}`).should('be.visible');
+  });
+
   describe('Member has no recycled items', () => {
     it('Show empty table', () => {
       cy.setUpApi({

cypress/e2e/item/view/viewFolder.cy.ts

@@ -1,10 +1,19 @@
-import { PackedFolderItemFactory } from '@graasp/sdk';
+import {
+  GuestFactory,
+  ItemLoginSchemaFactory,
+  PackedFolderItemFactory,
+  PermissionLevel,
+} from '@graasp/sdk';
 
 import { SortingOptionsForFolder } from '../../../../src/components/table/types';
 import i18n from '../../../../src/config/i18n';
 import { buildItemPath } from '../../../../src/config/paths';
 import {
   CREATE_ITEM_BUTTON_ID,
+  ITEM_HEADER_ID,
+  ITEM_MENU_BOOKMARK_BUTTON_CLASS,
+  ITEM_MENU_FLAG_BUTTON_CLASS,
+  ITEM_MENU_SHORTCUT_BUTTON_CLASS,
   ITEM_SEARCH_INPUT_ID,
   NAVIGATION_HOME_ID,
   SORTING_ORDERING_SELECTOR_ASC,
@@ -28,8 +37,63 @@ const child4 = PackedFolderItemFactory({ parentItem });
 const children = [child1, child2, child3, child4];
 
 const items = [parentItem, item1, ...children];
+describe('View folder as guest', () => {
+  it('Show limited features', () => {
+    const item = PackedFolderItemFactory(
+      {},
+      { permission: PermissionLevel.Read },
+    );
+    const guest = GuestFactory({
+      itemLoginSchema: ItemLoginSchemaFactory({
+        item,
+      }),
+    });
+    cy.setUpApi({
+      items: [item],
+      currentMember: guest,
+    });
+    cy.visit(buildItemPath(item.id));
+
+    // no add button
+    cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('not.exist');
+
+    // menu item only contains flag
+    cy.get(`#${ITEM_HEADER_ID} [data-testid="MoreVertIcon"]`).click();
+    cy.get(`.${ITEM_MENU_FLAG_BUTTON_CLASS}`).should('be.visible');
+    cy.get(`.${ITEM_MENU_SHORTCUT_BUTTON_CLASS}`).should('not.exist');
+  });
+});
+
+describe('View folder as reader', () => {
+  it('Show limited features', () => {
+    const item = PackedFolderItemFactory(
+      {},
+      { permission: PermissionLevel.Read },
+    );
+    cy.setUpApi({
+      items: [item],
+    });
+    cy.visit(buildItemPath(item.id));
+
+    // no add button
+    cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('not.exist');
+
+    // menu item contains flag, duplicate, shortcut, bookmark
+    cy.get(`#${ITEM_HEADER_ID} [data-testid="MoreVertIcon"]`).click();
+    cy.get(`.${ITEM_MENU_FLAG_BUTTON_CLASS}`).should('be.visible');
+    cy.get(`.${ITEM_MENU_SHORTCUT_BUTTON_CLASS}`).should('be.visible');
+    cy.get(`.${ITEM_MENU_BOOKMARK_BUTTON_CLASS}`).should('be.visible');
+  });
+});
+
+describe('view Folder as admin', () => {
+  beforeEach(() => {
+    cy.setUpApi({
+      items,
+    });
+    i18n.changeLanguage(CURRENT_USER.extra.lang as string);
+  });
 
-describe('View Folder', () => {
   it('View folder on map by default', () => {
     cy.setUpApi({
       items,
@@ -52,13 +116,6 @@ describe('View Folder', () => {
     cy.get(`#${CREATE_ITEM_BUTTON_ID}`).should('be.visible');
   });
 
-  beforeEach(() => {
-    cy.setUpApi({
-      items,
-    });
-    i18n.changeLanguage(CURRENT_USER.extra.lang as string);
-  });
-
   it('visit item by id', () => {
     const { id } = parentItem;
     cy.visit(buildItemPath(id, { mode: ItemLayoutMode.Grid }));

package.json

@@ -20,11 +20,11 @@
     "@emotion/styled": "11.13.0",
     "@graasp/chatbox": "3.3.0",
     "@graasp/map": "1.18.0",
-    "@graasp/query-client": "3.22.3",
+    "@graasp/query-client": "3.22.4",
     "@graasp/sdk": "4.29.1",
     "@graasp/stylis-plugin-rtl": "2.2.0",
     "@graasp/translations": "1.37.0",
-    "@graasp/ui": "5.0.1",
+    "@graasp/ui": "5.1.0",
     "@mui/icons-material": "5.16.4",
     "@mui/lab": "5.0.0-alpha.172",
     "@mui/material": "5.16.4",