fix: udpate ui for link display

cypress/e2e/main.cy.ts

@@ -1,3 +1,5 @@
+import { DiscriminatedItem } from '@graasp/sdk';
+
 import { buildContentPagePath } from '../../src/config/paths';
 import {
   FOLDER_NAME_TITLE_CLASS,
@@ -149,7 +151,10 @@ describe('Main Screen', () => {
       const rootId = parentFolder.id;
       cy.visit(buildContentPagePath({ rootId, itemId: rootId }));
 
-      expectFolderLayout({ rootId, items: STATIC_ELECTRICITY.items });
+      expectFolderLayout({
+        rootId,
+        items: STATIC_ELECTRICITY.items as DiscriminatedItem[],
+      });
     });
     it(`Cannot display ${STATIC_ELECTRICITY.items[0].name} if does not have membership`, () => {
       cy.setUpApi({
@@ -167,7 +172,10 @@ describe('Main Screen', () => {
       const rootId = parentFolder.id;
       cy.visit(buildContentPagePath({ rootId, itemId: rootId }));
 
-      expectFolderLayout({ rootId, items: PUBLIC_STATIC_ELECTRICITY.items });
+      expectFolderLayout({
+        rootId,
+        items: PUBLIC_STATIC_ELECTRICITY.items as DiscriminatedItem[],
+      });
     });
   });
 

cypress/fixtures/apps.ts

@@ -1,15 +1,10 @@
-import {
-  AppItemFactory,
-  AppItemType,
-  ItemTagType,
-  ItemType,
-} from '@graasp/sdk';
+import { AppItemFactory, AppItemType, ItemType } from '@graasp/sdk';
 
 import { APP_NAME } from './apps/apps';
 import { DEFAULT_FOLDER_ITEM } from './items';
 import { CURRENT_USER, MEMBERS } from './members';
 import { MockItem } from './mockTypes';
-import { mockItemTag } from './tags';
+import { mockPublicTag } from './tags';
 
 // mock an app with the graasp link
 // eslint-disable-next-line import/prefer-default-export
@@ -91,7 +86,7 @@ export const PUBLIC_APP_USING_CONTEXT_ITEM: MockItem = {
     },
     creator: MEMBERS.BOB,
   }),
-  tags: [mockItemTag({ type: ItemTagType.Public })],
+  public: mockPublicTag(),
 };
 
 export const GRAASP_APP_ITEMS_FIXTURE = [

cypress/fixtures/links.ts

@@ -46,11 +46,12 @@ export const YOUTUBE_LINK_ITEM: LinkItemType = LinkItemFactory({
   path: 'gcafbd2a_5688_11eb_ae93_0242ac130002',
   extra: buildLinkExtra({
     url: 'https://www.youtube.com/watch?v=FmiEgBMTPLo',
-    html: '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"><iframe src="https://www.youtube.com/embed/FmiEgBMTPLo" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media"></iframe></div>',
+    html: '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.5%;"><iframe src="https://www.youtube.com/embed/FmiEgBMTPLo?feature=oembed" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture"></iframe></div>',
     thumbnails: ['https://i.ytimg.com/vi/FmiEgBMTPLo/maxresdefault.jpg'],
     icons: ['https://www.youtube.com/s/desktop/f0ff6c1d/img/favicon_96.png'],
   }),
   settings: {
+    showLinkIframe: true,
     isPinned: false,
     showChatbox: false,
   },

cypress/fixtures/useCases/staticElectricity.ts

@@ -87,6 +87,7 @@ export const STATIC_ELECTRICITY: {
         thumbnails: [],
         icons: [],
       }),
+      settings: { showLinkIframe: true },
     }),
     DocumentItemFactory({
       id: 'gcefbd4e-5688-11eb-fe32-0542bc120002',
@@ -107,9 +108,10 @@ export const STATIC_ELECTRICITY: {
       extra: buildLinkExtra({
         url: 'https://www.dailymotion.com/embed/video/xgh289?autoplay=1',
         thumbnails: [],
-        html: '',
+        html: '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 57.5%;"><iframe src="https://geo.dailymotion.com/player.html?video=xgh289&amp;&amp;" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media"></iframe></div>',
         icons: [],
       }),
+      settings: { showLinkIframe: true },
     }),
     FolderItemFactory({
       id: 'gcafbd2a-4218-31eb-fe32-0542bc120002',
@@ -186,6 +188,7 @@ export const STATIC_ELECTRICITY: {
         thumbnails: [],
         icons: [],
       }),
+      settings: { showLinkIframe: true },
     }),
     FolderItemFactory({
       id: 'gfbfed2a-4218-31eb-fe32-0542bc120002',
@@ -237,9 +240,10 @@ export const STATIC_ELECTRICITY: {
       extra: buildLinkExtra({
         url: 'https://www.youtube.com/watch?v=9HS08L1EIjQ',
         thumbnails: [],
-        html: '',
+        html: '<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 75%;"><iframe src="https://www.youtube.com/embed/9HS08L1EIjQ?feature=oembed" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no" allow="encrypted-media; accelerometer; clipboard-write; gyroscope; picture-in-picture"></iframe></div>',
         icons: [],
       }),
+      settings: { showLinkIframe: true },
     }),
   ],
 };
@@ -250,7 +254,7 @@ PUBLIC_STATIC_ELECTRICITY.items = PUBLIC_STATIC_ELECTRICITY.items.map(
   (item) => {
     const newItem = {
       ...item,
-      tags: [...(item?.tags ?? []), mockItemTag({ type: ItemTagType.Public })],
+      public: mockItemTag({ type: ItemTagType.Public }),
     };
     return newItem;
   },

cypress/support/integrationUtils.ts

@@ -49,13 +49,13 @@ export const expectLinkViewScreenLayout = ({
       if (settings?.isCollapsible) {
         cy.get(`#${buildLinkItemId(id)}`).click();
       }
-      cy.get(`#${buildLinkItemId(id)} [data-testid="OpenInNewIcon"]`)
+      cy.get('[data-testid="fancy-link-card"]')
         .scrollIntoView()
         .should('be.visible');
     } else {
       // button should not be shown when the setting is false
       cy.get(`#${buildLinkItemId(id)}`).scrollIntoView();
-      cy.get(`#${buildLinkItemId(id)} [data-testid="OpenInNewIcon"]`).should(
+      cy.get(`#${buildLinkItemId(id)} [data-testid="fancy-link-card"]`).should(
         'not.exist',
       );
     }

cypress/support/server.ts

@@ -426,10 +426,10 @@ export const mockGetItemTags = (
       }
 
       const itemTags = items
-        .filter((i) => item.path.startsWith(i.path) && Boolean(i.tags))
+        .filter((i) => item.path.startsWith(i.path) && (i.public || i.hidden))
         .map(
           (i) =>
-            i.tags?.map((t) => ({
+            [i.public, i.hidden].filter(Boolean).map((t) => ({
               ...t,
               item: i as DiscriminatedItem,
             })) as ItemTag[],
@@ -466,7 +466,9 @@ export const mockGetItemsTags = (
                   ...acc,
                   data: {
                     ...acc.data,
-                    [item.id]: item.tags?.map((t) => ({ item, ...t })) ?? [],
+                    [item.id]: ([item.public, item.hidden]
+                      .filter(Boolean)
+                      .map((t) => ({ item, ...t })) ?? []) as ItemTag[],
                   },
                 };
           },

cypress/support/utils.ts

@@ -1,6 +1,5 @@
 import {
   ChatMessage,
-  ItemTagType,
   Member,
   PermissionLevel,
   PermissionLevelCompare,
@@ -133,17 +132,9 @@ export const checkMemberHasAccess = ({
     ) ?? false;
 
   const isHidden =
-    items.find(
-      (i) =>
-        item.path.startsWith(i.path) &&
-        i?.tags?.find(({ type }) => type === ItemTagType.Hidden),
-    ) ?? false;
+    items.find((i) => item.path.startsWith(i.path) && i?.hidden) ?? false;
   const isPublic =
-    items.find(
-      (i) =>
-        item.path.startsWith(i.path) &&
-        i?.tags?.find(({ type }) => type === ItemTagType.Public),
-    ) ?? false;
+    items.find((i) => item.path.startsWith(i.path) && i?.public) ?? false;
   // user is more than a reader so he can access the item
   if (isHidden && haveWriteMembership) {
     return undefined;

package.json

@@ -37,10 +37,10 @@
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
     "@graasp/chatbox": "3.1.0",
-    "@graasp/query-client": "3.8.0",
+    "@graasp/query-client": "3.9.0",
     "@graasp/sdk": "4.12.0",
     "@graasp/translations": "1.28.0",
-    "@graasp/ui": "4.18.2",
+    "@graasp/ui": "4.19.1",
     "@mui/icons-material": "5.15.17",
     "@mui/lab": "5.0.0-alpha.170",
     "@mui/material": "5.15.17",

src/modules/common/ItemCard.tsx

@@ -1,6 +1,6 @@
 import { Link } from 'react-router-dom';
 
-import { Stack } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import Card from '@mui/material/Card';
 import CardActionArea from '@mui/material/CardActionArea';
 import CardContent from '@mui/material/CardContent';
@@ -26,7 +26,15 @@ const SimpleCard = ({ item }: Props): JSX.Element => {
       <CardActionArea component={Link} to={link}>
         <CardContent>
           <Stack direction="row" alignItems="center" spacing={2}>
-            <ItemThumbnail item={item} />
+            <Box
+              display="flex"
+              justifyContent="center"
+              alignItems="center"
+              // do not allow icons to shrink
+              flexShrink={0}
+            >
+              <ItemThumbnail item={item} />
+            </Box>
             <Stack minWidth={0}>
               <Typography
                 variant="h5"

src/modules/navigation/tree/Node.tsx

@@ -36,6 +36,7 @@ const Node = ({
     {...getNodeProps()}
     className={`${buildTreeItemClass(element.id as string)}`}
     display="flex"
+    alignItems="center"
     sx={{
       width: '100%',
       pl: 1,