feat: use pdf viewer (#504)

.github/workflows/cdelivery-s3-caller.yml

@@ -24,6 +24,7 @@ jobs:
       domain: ${{ secrets.REACT_APP_DOMAIN_STAGE }}
       ga-measurement-id: ${{ secrets.REACT_APP_GA_MEASUREMENT_ID_STAGE }}
       graasp-analyzer-host: ${{ secrets.ANALYZER_CLIENT_HOST_STAGE }}
+      graasp-assets-url: ${{ secrets.REACT_APP_GRAASP_ASSETS_URL_STAGE }}
       graasp-explorer-host: ${{ secrets.EXPLORER_CLIENT_HOST_STAGE }}
       graasp-perform-host: ${{ secrets.PLAYER_CLIENT_HOST_STAGE }}
       h5p-integration-url: ${{ secrets.H5P_INTEGRATION_URL_STAGE }}

.github/workflows/cdeployment-s3-caller.yml

@@ -30,6 +30,7 @@ jobs:
       domain: ${{ secrets.REACT_APP_DOMAIN_PROD }}
       ga-measurement-id: ${{ secrets.REACT_APP_GA_MEASUREMENT_ID_PROD }}
       graasp-analyzer-host: ${{ secrets.ANALYZER_CLIENT_HOST_PROD }}
+      graasp-assets-url: ${{ secrets.REACT_APP_GRAASP_ASSETS_URL_PROD }}
       graasp-explorer-host: ${{ secrets.EXPLORER_CLIENT_HOST_PROD }}
       graasp-perform-host: ${{ secrets.PLAYER_CLIENT_HOST_PROD }}
       h5p-integration-url: ${{ secrets.H5P_INTEGRATION_URL_PROD }}

.github/workflows/cintegration-s3-caller.yml

@@ -30,6 +30,7 @@ jobs:
       domain: ${{ secrets.REACT_APP_DOMAIN_DEV }}
       ga-measurement-id: ${{ secrets.REACT_APP_GA_MEASUREMENT_ID_DEV }}
       graasp-analyzer-host: ${{ secrets.ANALYZER_CLIENT_HOST_DEV }}
+      graasp-assets-url: ${{ secrets.REACT_APP_GRAASP_ASSETS_URL_DEV }}
       graasp-explorer-host: ${{ secrets.EXPLORER_CLIENT_HOST_DEV }}
       graasp-perform-host: ${{ secrets.PLAYER_CLIENT_HOST_DEV }}
       h5p-integration-url: ${{ secrets.H5P_INTEGRATION_URL_DEV }}

cypress/fixtures/fileLinks.js

@@ -0,0 +1,9 @@
+// we use real links for items
+// because we cannot return fixture urls?
+// todo: internal links? host our own links?
+
+export const MOCK_IMAGE_URL = 'https://picsum.photos/100';
+export const MOCK_VIDEO_URL =
+  'http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4';
+export const MOCK_PDF_URL =
+  'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf';

cypress/fixtures/files.js

@@ -1,8 +1,10 @@
 import { ITEM_TYPES, MIME_TYPES } from '../../src/enums';
 import { buildFileExtra, buildS3FileExtra } from '../../src/utils/itemExtra';
+import { MOCK_IMAGE_URL, MOCK_PDF_URL, MOCK_VIDEO_URL } from './fileLinks';
 import { CURRENT_USER } from './members';
 
 export const ICON_FILEPATH = 'files/icon.png';
+export const VIDEO_FILEPATH = 'files/video.mp4';
 export const TEXT_FILEPATH = 'files/sometext.txt';
 
 export const IMAGE_ITEM_DEFAULT = {
@@ -21,8 +23,9 @@ export const IMAGE_ITEM_DEFAULT = {
     encoding: '7bit',
     mimetype: 'image/png',
   }),
-  // for testing
-  filepath: 'files/icon.png',
+  // for testing: creating needs a fixture, reading needs an url
+  createFilepath: ICON_FILEPATH,
+  readFilepath: MOCK_IMAGE_URL,
 };
 
 export const VIDEO_ITEM_DEFAULT = {
@@ -41,8 +44,9 @@ export const VIDEO_ITEM_DEFAULT = {
     encoding: '7bit',
     mimetype: MIME_TYPES.VIDEO[0],
   }),
-  // for testing
-  filepath: 'files/video.mp4',
+  // for testing: creating needs a fixture, reading needs an url
+  createFilepath: VIDEO_FILEPATH,
+  readFilepath: MOCK_VIDEO_URL,
 };
 
 export const PDF_ITEM_DEFAULT = {
@@ -61,8 +65,9 @@ export const PDF_ITEM_DEFAULT = {
     encoding: '7bit',
     mimetype: MIME_TYPES.PDF[0],
   }),
-  // for testing
-  filepath: 'files/doc.pdf',
+  // for testing: creating needs a fixture, reading needs an url
+  createFilepath: ICON_FILEPATH,
+  readFilepath: MOCK_PDF_URL,
 };
 
 export const ZIP_DEFAULT = {
@@ -80,10 +85,13 @@ export const IMAGE_ITEM_S3 = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   extra: buildS3FileExtra({
-    path: 'files/icon.png', // for testing
+    path: MOCK_IMAGE_URL, // for testing
     size: 32439,
     mimetype: 'image/png',
   }),
+  // for testing: creating needs a fixture, reading needs an url
+  createFilepath: ICON_FILEPATH,
+  readFilepath: MOCK_IMAGE_URL,
 };
 
 export const VIDEO_ITEM_S3 = {
@@ -96,10 +104,13 @@ export const VIDEO_ITEM_S3 = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   extra: buildS3FileExtra({
-    path: 'files/video.mp4', // for testing
+    path: MOCK_VIDEO_URL, // for testing
     size: 52345,
     mimetype: MIME_TYPES.VIDEO[0],
   }),
+  // for testing: creating needs a fixture, reading needs an url
+  createFilepath: VIDEO_FILEPATH,
+  readFilepath: MOCK_VIDEO_URL,
 };
 
 export const PDF_ITEM_S3 = {
@@ -112,8 +123,11 @@ export const PDF_ITEM_S3 = {
   createdAt: '2021-03-16T16:00:50.968Z',
   updatedAt: '2021-03-16T16:00:52.655Z',
   extra: buildS3FileExtra({
-    path: 'files/doc.pdf', // for testing
+    path: MOCK_PDF_URL, // for testing
     size: 54321,
     mimetype: MIME_TYPES.PDF[0],
   }),
+  // for testing: creating needs a fixture, reading needs an url
+  createFilepath: ICON_FILEPATH,
+  readFilepath: MOCK_PDF_URL,
 };

cypress/support/createUtils.js

@@ -10,7 +10,6 @@ import {
   ZIP_DASHBOARD_UPLOADER_ID,
 } from '../../src/config/selectors';
 import { ITEM_TYPES } from '../../src/enums';
-import { getS3FileExtra } from '../../src/utils/itemExtra';
 
 // eslint-disable-next-line import/prefer-default-export
 export const createItem = (payload, options) => {
@@ -24,7 +23,7 @@ export const createItem = (payload, options) => {
     case ITEM_TYPES.S3_FILE:
     case ITEM_TYPES.FILE: {
       const { confirm = true } = options;
-      const file = [payload?.filepath || getS3FileExtra(payload?.extra)?.path];
+      const file = [payload?.createFilepath];
       cy.get(`#${CREATE_ITEM_FILE_ID}`).click();
 
       // drag-drop a file in the uploader

cypress/support/server.js

@@ -795,7 +795,7 @@ export const mockDefaultDownloadFile = (items, shouldThrowError) => {
   cy.intercept(
     {
       method: DEFAULT_GET.method,
-      url: new RegExp(`${API_HOST}/${buildDownloadFilesRoute(ID_FORMAT)}$`),
+      url: new RegExp(`${API_HOST}/${buildDownloadFilesRoute(ID_FORMAT)}`),
     },
     ({ reply, url }) => {
       if (shouldThrowError) {
@@ -804,8 +804,16 @@ export const mockDefaultDownloadFile = (items, shouldThrowError) => {
       }
 
       const id = url.slice(API_HOST.length).split('/')[2];
-      const { filepath } = items.find(({ id: thisId }) => id === thisId);
-      reply({ fixture: filepath });
+      const { readFilepath } = items.find(({ id: thisId }) => id === thisId);
+      const { replyUrl } = qs.parse(url.slice(url.indexOf('?') + 1));
+
+      // either return the file url or the fixture data
+      // info: we don't test fixture data anymore since the frontend uses url only
+      if (replyUrl) {
+        reply({ url: readFilepath });
+      } else {
+        reply({ fixture: readFilepath });
+      }
     },
   ).as('downloadFile');
 };

package.json

@@ -8,9 +8,9 @@
     "@emotion/styled": "11.10.5",
     "@graasp/chatbox": "github:graasp/graasp-chatbox#v1.0.0",
     "@graasp/query-client": "github:graasp/graasp-query-client.git",
-    "@graasp/sdk": "github:graasp/graasp-sdk.git",
+    "@graasp/sdk": "github:graasp/graasp-sdk.git#60-pdf-link",
     "@graasp/translations": "github:graasp/graasp-translations.git",
-    "@graasp/ui": "github:graasp/graasp-ui.git#v0",
+    "@graasp/ui": "github:graasp/graasp-ui.git#v0.4.1",
     "@mui/icons-material": "5.10.9",
     "@mui/lab": "5.0.0-alpha.104",
     "@mui/material": "5.10.12",

src/components/item/ItemContent.tsx

@@ -5,7 +5,12 @@ import { Container, styled } from '@mui/material';
 import { FC, useContext } from 'react';
 
 import { Api, MUTATION_KEYS } from '@graasp/query-client';
-import { Item, ItemType, PermissionLevel } from '@graasp/sdk';
+import {
+  Item,
+  ItemType,
+  PermissionLevel,
+  buildPdfViewerLink,
+} from '@graasp/sdk';
 import {
   AppItem,
   DocumentItem,
@@ -20,6 +25,7 @@ import {
   CONTEXT_BUILDER,
   DEFAULT_LINK_SHOW_BUTTON,
   DEFAULT_LINK_SHOW_IFRAME,
+  GRAASP_ASSETS_URL,
   H5P_INTEGRATION_URL,
   ITEM_DEFAULT_HEIGHT,
 } from '../../config/constants';
@@ -71,12 +77,13 @@ const ItemContent: FC<Props> = ({ item, enableEditing, permission }) => {
     enabled: item?.type === ItemType.FOLDER,
   });
 
-  const { data: content, isLoading: isLoadingFileContent } = useFileContent(
+  const { data: fileData, isLoading: isLoadingFileContent } = useFileContent(
     itemId,
     {
       enabled:
         item &&
         (itemType === ItemType.LOCAL_FILE || itemType === ItemType.S3_FILE),
+      replyUrl: true,
     },
   );
   const isEditing = enableEditing && editingItemId === itemId;
@@ -113,20 +120,23 @@ const ItemContent: FC<Props> = ({ item, enableEditing, permission }) => {
 
   switch (itemType) {
     case ItemType.LOCAL_FILE:
-    case ItemType.S3_FILE:
+    case ItemType.S3_FILE: {
+      // todo: remove when query client is correctly typed
+      const file = fileData as Record<string, string>;
       return (
         <FileWrapper>
           <FileItem
-            id={buildFileItemId(itemId)}
             editCaption={isEditing}
+            fileUrl={file?.url}
+            id={buildFileItemId(itemId)}
             item={item}
-            // todo: fix with graasp query client
-            content={content as Blob}
             onSaveCaption={onSaveCaption}
+            pdfViewerLink={buildPdfViewerLink(GRAASP_ASSETS_URL)}
             saveButtonId={saveButtonId}
           />
         </FileWrapper>
       );
+    }
     case ItemType.LINK:
       return (
         <FileWrapper>

src/config/constants.js

@@ -261,3 +261,5 @@ export const ITEM_HEADER_ICON_HEIGHT = 30;
 export const AVATAR_ICON_HEIGHT = 30;
 export const DEFAULT_LINK_SHOW_IFRAME = false;
 export const DEFAULT_LINK_SHOW_BUTTON = true;
+
+export const GRAASP_ASSETS_URL = process.env.REACT_APP_GRAASP_ASSETS_URL;