fix: show link icon in table

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

@@ -44,32 +44,44 @@ describe('Links', () => {
   });
 
   it('view some link', () => {
-    const { id } = GRAASP_LINK_ITEM;
+    const { id, extra } = GRAASP_LINK_ITEM;
     cy.visit(buildItemPath(id));
 
     // should get current item
     cy.wait('@getItem');
 
     expectLinkViewScreenLayout({ item: GRAASP_LINK_ITEM });
+
+    // check home page display link thumbnail
+    cy.visit('/');
+    cy.get(`[src="${extra.embeddedLink.thumbnails[0]}"]`);
   });
 
   it('view some link with iframe', () => {
-    const { id } = GRAASP_LINK_ITEM_IFRAME_ONLY;
+    const { id, extra } = GRAASP_LINK_ITEM_IFRAME_ONLY;
     cy.visit(buildItemPath(id));
 
     // should get current item
     cy.wait('@getItem');
 
     expectLinkViewScreenLayout({ item: GRAASP_LINK_ITEM_IFRAME_ONLY });
+
+    // check home page display link thumbnail
+    cy.visit('/');
+    cy.get(`[src="${extra.embeddedLink.thumbnails[0]}"]`);
   });
 
-  it('view youtube', () => {
-    const { id } = YOUTUBE_LINK_ITEM;
+  it.only('view youtube', () => {
+    const { id, extra } = YOUTUBE_LINK_ITEM;
     cy.visit(buildItemPath(id));
 
     // should get current item
     cy.wait('@getItem');
 
     expectLinkViewScreenLayout({ item: YOUTUBE_LINK_ITEM });
+
+    // check home page display link icon because it does not have thumbnail
+    cy.visit('/');
+    cy.get(`[src="${extra.embeddedLink.icons[0]}"]`);
   });
 });

cypress/fixtures/links.ts

@@ -52,7 +52,6 @@ export const YOUTUBE_LINK_ITEM: LinkItemType = PackedLinkItemFactory({
   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>',
-    thumbnails: ['https://i.ytimg.com/vi/FmiEgBMTPLo/maxresdefault.jpg'],
     icons: ['https://www.youtube.com/s/desktop/f0ff6c1d/img/favicon_96.png'],
   }),
   settings: {

package.json

@@ -22,7 +22,7 @@
     "@graasp/chatbox": "3.1.0",
     "@graasp/map": "1.16.0",
     "@graasp/query-client": "3.15.2",
-    "@graasp/sdk": "4.17.0",
+    "@graasp/sdk": "4.18.0",
     "@graasp/translations": "1.32.0",
     "@graasp/ui": "4.21.0",
     "@mui/icons-material": "5.16.4",

src/components/item/ItemContent.tsx

@@ -18,6 +18,7 @@ import {
   S3FileItemType,
   buildPdfViewerLink,
   getH5PExtra,
+  getLinkThumbnailUrl,
 } from '@graasp/sdk';
 import { DEFAULT_LANG } from '@graasp/translations';
 import {
@@ -108,6 +109,7 @@ const LinkContent = ({
     memberId={member?.id}
     isResizable
     item={item}
+    thumbnail={getLinkThumbnailUrl(item.extra)}
     height={ITEM_DEFAULT_HEIGHT}
     showButton={Boolean(item.settings?.showLinkButton)}
     showIframe={Boolean(item.settings?.showLinkIframe)}

src/components/item/form/link/LinkForm.tsx

@@ -18,6 +18,7 @@ import {
   LinkItemType,
   buildLinkExtra,
   getLinkExtra,
+  getLinkThumbnailUrl,
 } from '@graasp/sdk';
 import { LinkCard, LinkItem } from '@graasp/ui';
 
@@ -138,6 +139,8 @@ const LinkForm = ({
           ...updatedProperties.extra?.embeddedLink,
           url: updatedProperties.extra?.embeddedLink.url || '',
           description: linkData.description,
+          thumbnails: linkData.thumbnails,
+          icons: linkData.icons,
         });
       }
       // update props in one call to remove issue of race updates
@@ -213,7 +216,10 @@ const LinkForm = ({
                   <LinkCard
                     title={linkData?.title || ''}
                     url={linkContent}
-                    thumbnail={linkData?.thumbnails[0]}
+                    thumbnail={
+                      updatedProperties.extra &&
+                      getLinkThumbnailUrl(updatedProperties.extra)
+                    }
                     description={description || ''}
                   />
                 }

src/components/item/settings/ThumbnailSetting.tsx

@@ -2,7 +2,12 @@ import { FormEventHandler, useRef, useState } from 'react';
 
 import { Dialog, Stack, styled } from '@mui/material';
 
-import { DiscriminatedItem, ItemType, ThumbnailSize } from '@graasp/sdk';
+import {
+  DiscriminatedItem,
+  ItemType,
+  ThumbnailSize,
+  getLinkThumbnailUrl,
+} from '@graasp/sdk';
 
 import { useUploadWithProgress } from '@/components/hooks/uploadWithProgress';
 import { THUMBNAIL_SETTING_UPLOAD_INPUT_ID } from '@/config/selectors';
@@ -96,22 +101,19 @@ const ThumbnailSetting = ({ item }: Props): JSX.Element | null => {
   };
 
   const alt = translateBuilder(BUILDER.THUMBNAIL_SETTING_MY_THUMBNAIL_ALT);
-  const imgUrl = item.settings?.hasThumbnail
-    ? thumbnailUrl
-    : (item.type === ItemType.LINK ? item.extra[ItemType.LINK] : {})
-        ?.icons?.[0];
+
+  let imgUrl = thumbnailUrl;
+  if (!imgUrl && item.type === ItemType.LINK) {
+    imgUrl = getLinkThumbnailUrl(item.extra);
+  }
 
   return (
     <>
       <Stack spacing={2} mb={3} alignItems="center">
         <ThumbnailWithControls
           item={item}
           alt={alt}
-          url={
-            imgUrl ??
-            (item.type === ItemType.LINK ? item.extra[ItemType.LINK] : {})
-              ?.thumbnails?.[0]
-          }
+          url={imgUrl}
           isLoading={isLoading}
           onDelete={onDelete}
           onEdit={onEdit}

src/components/item/settings/ThumbnailWithControls.tsx

@@ -51,7 +51,7 @@ const ThumbnailWithDeleteButton = ({
               mimetype={getMimetype(item.extra)}
             />
           }
-          url={url}
+          url={url ?? undefined}
           alt={alt}
           maxWidth={THUMBNAIL_SETTING_MAX_WIDTH}
           maxHeight={THUMBNAIL_SETTING_MAX_HEIGHT}

src/components/table/ItemCard.tsx

@@ -1,7 +1,13 @@
 import { Typography } from '@mui/material';
 import Grid2 from '@mui/material/Unstable_Grid2/Grid2';
 
-import { ItemType, PackedItem, ThumbnailSize, formatDate } from '@graasp/sdk';
+import {
+  ItemType,
+  PackedItem,
+  ThumbnailSize,
+  formatDate,
+  getLinkThumbnailUrl,
+} from '@graasp/sdk';
 import { COMMON } from '@graasp/translations';
 import { Card, TextDisplay } from '@graasp/ui';
 
@@ -77,13 +83,19 @@ const ItemCard = ({
     </Grid2>
   );
 
+  // show link thumbnail
+  let thumbnail = thumbnailUrl;
+  if (!thumbnail && item.type === ItemType.LINK) {
+    thumbnail = getLinkThumbnailUrl(item.extra);
+  }
+
   return (
     <Card
       id={buildItemCard(item.id)}
       sx={{ background: disabled ? 'lightgrey' : undefined }}
       dense={dense}
       elevation={false}
-      thumbnail={thumbnailUrl}
+      thumbnail={thumbnail}
       to={to}
       name={item.name}
       alt={item.name}

yarn.lock

@@ -1723,9 +1723,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@graasp/sdk@npm:4.17.0":
-  version: 4.17.0
-  resolution: "@graasp/sdk@npm:4.17.0"
+"@graasp/sdk@npm:4.18.0":
+  version: 4.18.0
+  resolution: "@graasp/sdk@npm:4.18.0"
   dependencies:
     "@faker-js/faker": "npm:8.4.1"
     filesize: "npm:10.1.4"
@@ -1734,7 +1734,7 @@ __metadata:
   peerDependencies:
     date-fns: ^3
     uuid: ^9 || ^10.0.0
-  checksum: 10/5fa444fceb20494898956f921ee8a029b9cca2184c4ebf8a2a65fb581b0252ff76e59f0ee2d5646c53dab29240bc9862d2ed9ac7c3e7568fd2f44cda953f2a61
+  checksum: 10/9a74d520c652429e3432df2a5321179c53628c82067dfd395599cf77558e57100e40cb35dc35065e4314afb436e467512fe3586d15b113923218aacdfb60dc7d
   languageName: node
   linkType: hard
 
@@ -8031,7 +8031,7 @@ __metadata:
     "@graasp/chatbox": "npm:3.1.0"
     "@graasp/map": "npm:1.16.0"
     "@graasp/query-client": "npm:3.15.2"
-    "@graasp/sdk": "npm:4.17.0"
+    "@graasp/sdk": "npm:4.18.0"
     "@graasp/translations": "npm:1.32.0"
     "@graasp/ui": "npm:4.21.0"
     "@mui/icons-material": "npm:5.16.4"