wip

openfun · Aug 3, 2023 · 4747f5b · 4747f5b
1 parent a9804d6
commit 4747f5b
Show file tree

Hide file tree

Showing 19 changed files with 193 additions and 79 deletions.
diff --git a/...ps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx b/...ps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.spec.tsx
@@ -96,6 +96,8 @@ describe('<UploadFiles />', () => {
       modelName.DepositedFiles,
       depositedFile.id,
       file,
+      modelName.FileDepositories,
+      depositedFile.file_depository.id,
     );
   });
 

diff --git a/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx b/...nd/apps/lti_site/apps/deposit/components/Dashboard/DashboardStudent/UploadFiles/index.tsx
@@ -91,7 +91,13 @@ export const UploadFiles = () => {
         size: file.size,
         filename: file.name,
       });
-      addUpload(modelName.DepositedFiles, depositedFile.id, file);
+      addUpload(
+        modelName.DepositedFiles,
+        depositedFile.id,
+        file,
+        modelName.FileDepositories,
+        depositedFile.file_depository.id,
+      );
       refreshDepositedFiles();
     } catch (error) {
       if ((error as object).hasOwnProperty('size') && metadata.data) {

diff --git a/src/frontend/apps/lti_site/components/LTIRoutes/index.tsx b/src/frontend/apps/lti_site/components/LTIRoutes/index.tsx
@@ -8,6 +8,7 @@ import {
   UploadForm,
   UploadHandlers,
   UploadManager,
+  UploadingObject,
   WithParams,
   builderFullScreenErrorRoute,
   modelName,
@@ -130,11 +131,13 @@ export const LTIInnerRoutes = () => {
               path={UPLOAD_FORM_ROUTE.default}
               element={
                 <WithParams>
-                  {({ objectId, objectType }) =>
+                  {({ objectId, objectType, parentType, parentId }) =>
                     objectId && objectType ? (
                       <UploadForm
                         objectId={objectId}
                         objectType={objectType as modelName}
+                        parentType={parentType as UploadingObject['parentType']}
+                        parentId={parentId}
                       />
                     ) : (
                       <Navigate

diff --git a/src/frontend/packages/lib_components/src/common/UploadField/index.tsx b/src/frontend/packages/lib_components/src/common/UploadField/index.tsx
@@ -4,7 +4,10 @@ import Dropzone from 'react-dropzone';
 import { defineMessages, useIntl } from 'react-intl';
 import styled from 'styled-components';
 
-import { useUploadManager } from '@lib-components/common/UploadManager';
+import {
+  UploadingObject,
+  useUploadManager,
+} from '@lib-components/common/UploadManager';
 import { uploadableModelName } from '@lib-components/types/models';
 
 import { DropzonePlaceholder } from './DropzonePlaceholder';
@@ -25,16 +28,23 @@ const DropzoneStyled = styled.div`
 export interface UploadFieldProps {
   objectType: uploadableModelName;
   objectId: string;
+  parentType?: Maybe<UploadingObject['parentType']>;
+  parentId?: Maybe<string>;
 }
 
-export const UploadField = ({ objectType, objectId }: UploadFieldProps) => {
+export const UploadField = ({
+  objectType,
+  objectId,
+  parentType,
+  parentId,
+}: UploadFieldProps) => {
   const { addUpload } = useUploadManager();
   const [file, setFile] = useState<Maybe<File>>(undefined);
   const intl = useIntl();
 
   const onDrop = (files: File[]) => {
     setFile(files[0]);
-    addUpload(objectType, objectId, files[0]);
+    addUpload(objectType, objectId, files[0], parentType, parentId);
   };
 
   return (

diff --git a/src/frontend/packages/lib_components/src/common/UploadForm/index.tsx b/src/frontend/packages/lib_components/src/common/UploadForm/index.tsx
@@ -14,6 +14,7 @@ import { Loader } from '@lib-components/common/Loader';
 import { UploadField } from '@lib-components/common/UploadField';
 import {
   UploadManagerStatus,
+  UploadingObject,
   useUploadManager,
 } from '@lib-components/common/UploadManager';
 import { builderDashboardRoute } from '@lib-components/data/routes';
@@ -113,9 +114,16 @@ const UploadFormBack = styled.div`
 export interface UploadFormProps {
   objectId: UploadableObject['id'];
   objectType: uploadableModelName;
+  parentType?: Maybe<UploadingObject['parentType']>;
+  parentId?: Maybe<string>;
 }
 
-export const UploadForm = ({ objectId, objectType }: UploadFormProps) => {
+export const UploadForm = ({
+  objectId,
+  objectType,
+  parentType,
+  parentId,
+}: UploadFormProps) => {
   const appData = useAppConfig();
   const { uploadManagerState, resetUpload } = useUploadManager();
   const objectStatus = uploadManagerState[objectId]?.status;
@@ -199,7 +207,9 @@ export const UploadForm = ({ objectId, objectType }: UploadFormProps) => {
               />
             </IframeHeadingWithLayout>
             <UploadFieldContainer>
-              <UploadField {...{ objectType, objectId }} />
+              <UploadField
+                {...{ objectType, objectId, parentType, parentId }}
+              />
             </UploadFieldContainer>
           </UploadFormContainer>
           <UploadFormBack>

diff --git a/src/frontend/packages/lib_components/src/common/UploadManager/index.tsx b/src/frontend/packages/lib_components/src/common/UploadManager/index.tsx
@@ -1,3 +1,4 @@
+import { Maybe } from '@lib-common/types';
 import React, {
   createContext,
   useCallback,
@@ -31,6 +32,12 @@ export interface UploadingObject {
   progress: number;
   status: UploadManagerStatus;
   message?: string;
+  parentType?:
+    | modelName.VIDEOS
+    | MarkdownDocumentModelName.MARKDOWN_DOCUMENTS
+    | ClassroomModelName.CLASSROOMS
+    | FileDepositoryModelName.FileDepositories;
+  parentId?: string;
 }
 
 export interface UploadManagerState {
@@ -82,7 +89,7 @@ export const UploadManager = ({
 
     Object.values(uploadManagerState)
       .filter(({ status }) => status === UploadManagerStatus.INIT)
-      .forEach(({ file, objectId, objectType }) => {
+      .forEach(({ file, objectId, objectType, parentId, parentType }) => {
         (async () => {
           let presignedPost: AWSPresignedPost;
           try {
@@ -92,6 +99,8 @@ export const UploadManager = ({
               file.name,
               file.type,
               file.size,
+              parentType,
+              parentId,
             );
           } catch (error) {
             if ((error as ApiException).type === 'SizeError') {
@@ -196,7 +205,13 @@ export const useUploadManager = () => {
     useContext(UploadManagerContext);
 
   const addUpload = useCallback(
-    (objectType: uploadableModelName, objectId: string, file: File) => {
+    (
+      objectType: uploadableModelName,
+      objectId: string,
+      file: File,
+      parentType?: Maybe<UploadingObject['parentType']>,
+      parentId?: Maybe<string>,
+    ) => {
       setUploadState((state) => ({
         ...state,
         [objectId]: {
@@ -205,6 +220,8 @@ export const useUploadManager = () => {
           file,
           progress: 0,
           status: UploadManagerStatus.INIT,
+          parentType,
+          parentId,
         },
       }));
     },

diff --git a/src/frontend/packages/lib_components/src/data/sideEffects/initiateUpload/index.ts b/src/frontend/packages/lib_components/src/data/sideEffects/initiateUpload/index.ts
@@ -1,3 +1,6 @@
+import { Maybe } from '@lib-common/types';
+
+import { UploadingObject } from '@lib-components/common';
 import { fetchWrapper } from '@lib-components/common/queries/fetchWrapper';
 import { useJwt } from '@lib-components/hooks/stores';
 import { API_ENDPOINT } from '@lib-components/settings';
@@ -10,29 +13,37 @@ import { UploadableObject } from '@lib-components/types/tracks';
  * policy to authenticate this upload with S3.
  * @param objectType The kind of object for which we're uploading a file (model name).
  * @param objectId The ID of the object for which we're uploading a file.
+ * @param filename The name of the file we're uploading.
+ * @param mimetype The mimetype of the file we're uploading.
+ * @param size The size of the file we're uploading.
+ * @param parentType The kind of parent object for which we're uploading a file (nullable model name).
+ * @param parentId The ID of the parent object for which we're uploading a file (nullable).
  */
 export const initiateUpload = async (
   objectType: uploadableModelName,
   objectId: UploadableObject['id'],
   filename: string,
   mimetype: string,
   size: number,
+  parentType?: Maybe<UploadingObject['parentType']>,
+  parentId?: Maybe<string>,
 ) => {
-  const response = await fetchWrapper(
-    `${API_ENDPOINT}/${objectType}/${objectId}/initiate-upload/`,
-    {
-      body: JSON.stringify({
-        filename,
-        mimetype,
-        size,
-      }),
-      headers: {
-        Authorization: `Bearer ${useJwt.getState().getJwt() ?? ''}`,
-        'Content-Type': 'application/json',
-      },
-      method: 'POST',
+  let input = `${API_ENDPOINT}/${objectType}/${objectId}/initiate-upload/`;
+  if (parentId && parentType) {
+    input = `${API_ENDPOINT}/${parentType}/${parentId}/${objectType}/${objectId}/initiate-upload/`;
+  }
+  const response = await fetchWrapper(input, {
+    body: JSON.stringify({
+      filename,
+      mimetype,
+      size,
+    }),
+    headers: {
+      Authorization: `Bearer ${useJwt.getState().getJwt() ?? ''}`,
+      'Content-Type': 'application/json',
     },
-  );
+    method: 'POST',
+  });
 
   if (!response.ok) {
     const contentType = response.headers.get('content-type');

diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.spec.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.spec.tsx
@@ -551,7 +551,7 @@ describe('<MarkdownEditor />', () => {
     // Drop an image
     const markdownImageId = '5459a5b2-2f81-11ed-ab8f-47c92ec0ac16';
     fetchMock.postOnce(
-      `/api/markdown-images/`,
+      `/api/markdown-documents/1/markdown-images/`,
       markdownImageMockFactory({
         id: markdownImageId,
         active_stamp: null,
@@ -562,7 +562,7 @@ describe('<MarkdownEditor />', () => {
       }),
     );
     fetchMock.postOnce(
-      `/api/markdown-images/${markdownImageId}/initiate-upload/`,
+      `/api/markdown-documents/1/markdown-images/${markdownImageId}/initiate-upload/`,
       {
         fields: {
           key: 'foo',
@@ -589,7 +589,7 @@ describe('<MarkdownEditor />', () => {
 
     // Image is uploaded
     fetchMock.get(
-      `/api/markdown-images/${markdownImageId}/`,
+      `/api/markdown-documents/1/markdown-images/${markdownImageId}/`,
       markdownImageMockFactory({
         id: markdownImageId,
         is_ready_to_show: true,

diff --git a/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx b/src/frontend/packages/lib_markdown/src/components/MarkdownEditor/index.tsx
@@ -125,7 +125,10 @@ export const MarkdownEditor = ({ markdownDocumentId }: MarkdownEditorProps) => {
     );
   };
 
-  const { addImageUpload } = useImageUploadManager(onImageUploadFinished);
+  const { addImageUpload } = useImageUploadManager(
+    markdownDocumentId,
+    onImageUploadFinished,
+  );
 
   // note: we don't want to fetch the markdown document regularly to prevent
   // any editor update while the user has not saved her document.

diff --git a/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.spec.tsx b/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.spec.tsx
@@ -381,15 +381,15 @@ describe('<MdxRenderer />', () => {
     const markdownText = fs.readFileSync(file, { encoding: 'utf8' });
 
     fetchMock.getOnce(
-      '/api/markdown-images/981a52a2-7caf-49a5-bb36-1d8512152214/',
+      `/api/markdown-documents/${markdownDocumentId}/markdown-images/981a52a2-7caf-49a5-bb36-1d8512152214/`,
       markdownImageMockFactory({
         id: '981a52a2-7caf-49a5-bb36-1d8512152214',
         url: 'https://s3.link/easy-to-find.png',
       }),
     );
 
     fetchMock.getOnce(
-      '/api/markdown-images/066036cc-2dde-11ed-89f4-afcf72a20b4c/',
+      `/api/markdown-documents/${markdownDocumentId}/markdown-images/066036cc-2dde-11ed-89f4-afcf72a20b4c/`,
       markdownImageMockFactory({
         id: '066036cc-2dde-11ed-89f4-afcf72a20b4c',
         url: null,

diff --git a/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.tsx b/src/frontend/packages/lib_markdown/src/components/MdxRenderer/index.tsx
@@ -90,7 +90,10 @@ export const MdxRenderer = ({
           remarkLatexPlugin(markdownDocumentId),
           remarkMermaidPlugin,
           remarkMath,
-          remarkLocallyHostedImagePlugin(localImagesUrlCache.current),
+          remarkLocallyHostedImagePlugin(
+            markdownDocumentId,
+            localImagesUrlCache.current,
+          ),
         ];
         const rehypePlugins: PluggableList = [
           options?.useMathjax ? rehypeMathjax : rehypeKatex,

diff --git a/...ntend/packages/lib_markdown/src/components/MdxRenderer/remarkLocallyHostedImagePlugin.tsx b/...ntend/packages/lib_markdown/src/components/MdxRenderer/remarkLocallyHostedImagePlugin.tsx
@@ -11,6 +11,7 @@ import { fetchOneMarkdownImage } from '@lib-markdown/data/queries';
 import { MarkdownImageCache } from './types';
 
 const remarkLocallyHostedImagePlugin = (
+  markdownDocumentId: string,
   localImagesUrlCache: MarkdownImageCache,
 ) => {
   // `markdownDocumentId` is mandatory to allow API calls
@@ -41,7 +42,10 @@ const remarkLocallyHostedImagePlugin = (
             }
 
             if (image.url.startsWith('/uploaded/image/')) {
-              const response = await fetchOneMarkdownImage(imageId);
+              const response = await fetchOneMarkdownImage(
+                markdownDocumentId,
+                imageId,
+              );
               if (response.url) {
                 localImagesUrlCache[imageId] = {
                   url: response.url,