✨(front) trigger upload-ended endpoint after classroom document upload

Trigger the `upload-ended` endpoint after classroom document uploads. This
ensures that the `upload_state` is properly updated.
Since this logic is similar across file types, it has been generalized in the
`lib-components` package for reuse across all packages.

Author: wilbrdt

src/frontend/apps/standalone_site/src/features/Contents/features/Video/components/Manage/VideoCreateForm.tsx

@@ -8,15 +8,11 @@ import {
   UploadManagerStatus,
   Video,
   modelName,
+  uploadEnded,
   useResponsive,
   useUploadManager,
 } from 'lib-components';
-import {
-  LicenseSelect,
-  UploadVideoForm,
-  uploadEnded,
-  useCreateVideo,
-} from 'lib-video';
+import { LicenseSelect, UploadVideoForm, useCreateVideo } from 'lib-video';
 import { Fragment, useEffect, useState } from 'react';
 import { defineMessages, useIntl } from 'react-intl';
 import { useNavigate } from 'react-router-dom';
@@ -93,7 +89,7 @@ const VideoCreateForm = () => {
           video.videoFile,
           undefined,
           (presignedPost) => {
-            uploadEnded(data.id, presignedPost.fields['key']);
+            uploadEnded(modelName.VIDEOS, data.id, presignedPost.fields['key']);
           },
         );
         setIsUploading(true);

src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/index.spec.tsx

@@ -132,6 +132,7 @@ describe('<UploadDocuments />', () => {
       classroomDocument.id,
       file,
       '1',
+      expect.any(Function),
     );
   });
 

src/frontend/packages/lib_classroom/src/components/ClassroomWidgetProvider/widgets/SupportSharing/UploadDocuments/index.tsx

@@ -9,6 +9,7 @@ import {
   formatSizeErrorScale,
   ClassroomModelName as modelName,
   report,
+  uploadEnded,
   useUploadManager,
 } from 'lib-components';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
@@ -124,7 +125,20 @@ export const UploadDocuments = ({ classroomId }: UploadDocumentsProps) => {
         size: file.size,
         classroom_id: classroomId,
       });
-      addUpload(modelName.CLASSROOM_DOCUMENTS, document.id, file, classroomId);
+      addUpload(
+        modelName.CLASSROOM_DOCUMENTS,
+        document.id,
+        file,
+        classroomId,
+        (presignedPost) => {
+          uploadEnded(
+            modelName.CLASSROOM_DOCUMENTS,
+            document.id,
+            presignedPost.fields['key'],
+            classroomId,
+          );
+        },
+      );
       refreshClassroomDocuments();
     } catch (error) {
       if ((error as object).hasOwnProperty('size') && metadata.data) {

src/frontend/packages/lib_components/src/data/sideEffects/index.ts

@@ -2,4 +2,5 @@ export * from './fetchJitsiInfo';
 export * from './getResource';
 export * from './refreshToken';
 export * from './updateResource';
+export * from './uploadEnded';
 export * from './uploadFile';

src/frontend/packages/lib_components/src/data/sideEffects/uploadEnded/index.spec.ts

@@ -0,0 +1,147 @@
+import fetchMock from 'fetch-mock';
+import {
+  modelName,
+  uploadState,
+  uploadableModelName,
+  useJwt,
+} from 'lib-components';
+import {
+  documentMockFactory,
+  timedTextMockFactory,
+  videoMockFactory,
+} from 'lib-components/tests';
+
+import { uploadEnded } from '.';
+
+describe('sideEffects/uploadEnded', () => {
+  beforeEach(() => {
+    useJwt.getState().setJwt('some token');
+  });
+
+  afterEach(() => fetchMock.restore());
+
+  const video = videoMockFactory({
+    upload_state: uploadState.READY,
+  });
+
+  const timedText = timedTextMockFactory({
+    upload_state: uploadState.READY,
+    video: video.id,
+  });
+
+  const document = documentMockFactory({
+    upload_state: uploadState.READY,
+  });
+
+  it('makes a POST request on the upload-ended route & returns the updated object for simple path', async () => {
+    fetchMock.mock(
+      `/api/videos/${video.id}/upload-ended/`,
+      {
+        ...video,
+        upload_state: uploadState.PROCESSING,
+      },
+      { method: 'POST' },
+    );
+
+    const updatedVideo = await uploadEnded<typeof video>(
+      modelName.VIDEOS,
+      video.id,
+      `tmp/${video.id}/video/56456454`,
+    );
+
+    expect(updatedVideo).toEqual({
+      ...video,
+      upload_state: uploadState.PROCESSING,
+    });
+
+    expect(fetchMock.lastCall()![1]!.headers).toEqual({
+      Authorization: 'Bearer some token',
+      'Content-Type': 'application/json',
+      'Accept-Language': 'en',
+    });
+
+    expect(fetchMock.lastCall()![1]!.body).toEqual(
+      JSON.stringify({ file_key: `tmp/${video.id}/video/56456454` }),
+    );
+  });
+
+  it('makes a POST request on the upload-ended route with parent path', async () => {
+    fetchMock.mock(
+      `/api/videos/${video.id}/${modelName.TIMEDTEXTTRACKS}/${timedText.id}/upload-ended/`,
+      {
+        ...timedText,
+        upload_state: uploadState.PROCESSING,
+      },
+      { method: 'POST' },
+    );
+
+    const updatedTimedText = await uploadEnded<typeof video>(
+      modelName.TIMEDTEXTTRACKS,
+      timedText.id,
+      `tmp/${video.id}/video/timedtexttracks/${timedText.id}/56456454`,
+      video.id,
+    );
+
+    expect(updatedTimedText).toEqual({
+      ...timedText,
+      upload_state: uploadState.PROCESSING,
+    });
+
+    expect(fetchMock.lastUrl()).toEqual(
+      `/api/videos/${video.id}/timedtexttracks/${timedText.id}/upload-ended/`,
+    );
+  });
+
+  it('throws when it fails to trigger the upload-ended (request failure)', async () => {
+    fetchMock.mock(
+      `/api/videos/${video.id}/upload-ended/`,
+      Promise.reject(new Error('Failed to perform the request')),
+    );
+
+    await expect(
+      uploadEnded(
+        modelName.VIDEOS as uploadableModelName,
+        video.id,
+        `tmp/${video.id}/video/56456454`,
+      ),
+    ).rejects.toThrow('Failed to perform the request');
+  });
+
+  it('throws when it fails to trigger the upload-ended (API error)', async () => {
+    fetchMock.mock(`/api/videos/${video.id}/upload-ended/`, 400);
+
+    await expect(
+      uploadEnded(
+        modelName.VIDEOS as uploadableModelName,
+        video.id,
+        `tmp/${video.id}/video/56456454`,
+      ),
+    ).rejects.toThrow(`Failed to end the upload for videos/${video.id}.`);
+  });
+
+  it('works with different object types', async () => {
+    fetchMock.mock(
+      `/api/documents/${document.id}/upload-ended/`,
+      {
+        ...document,
+        upload_state: uploadState.PROCESSING,
+      },
+      { method: 'POST' },
+    );
+
+    const updatedDocument = await uploadEnded(
+      modelName.DOCUMENTS,
+      document.id,
+      `document/${document.id}/987654`,
+    );
+
+    expect(updatedDocument).toEqual({
+      ...document,
+      upload_state: uploadState.PROCESSING,
+    });
+
+    expect(fetchMock.lastUrl()).toEqual(
+      `/api/documents/${document.id}/upload-ended/`,
+    );
+  });
+});

src/frontend/packages/lib_components/src/data/sideEffects/uploadEnded/index.ts

@@ -0,0 +1,48 @@
+import { Maybe } from '@lib-common/types';
+import {
+  API_ENDPOINT,
+  UploadableObject,
+  fetchResponseHandler,
+  fetchWrapper,
+  getParentType,
+  uploadableModelName,
+  useJwt,
+} from 'lib-components';
+
+/**
+ * Post to an action endpoint to inform the end of the object upload.
+ * Returns the updated object
+ * @param objectType The kind of object for which we're ending the upload (model name).
+ * @param objectId The ID of the object for which we're ending the upload.
+ * @param fileKey The file key that was uploaded to S3.
+ * @param parentId The ID of the parent object for which we're ending the upload (nullable).
+ */
+export const uploadEnded = async <T = UploadableObject>(
+  objectType: uploadableModelName,
+  objectId: UploadableObject['id'],
+  fileKey: string,
+  parentId?: Maybe<string>,
+): Promise<T> => {
+  let input = `${API_ENDPOINT}/${objectType}/${objectId}/upload-ended/`;
+  const parentType = getParentType(objectType);
+  if (parentId && parentType) {
+    input = `${API_ENDPOINT}/${parentType}/${parentId}/${objectType}/${objectId}/upload-ended/`;
+  }
+
+  const body = {
+    file_key: fileKey,
+  };
+
+  const response = await fetchWrapper(input, {
+    body: JSON.stringify(body),
+    headers: {
+      Authorization: `Bearer ${useJwt.getState().getJwt() ?? ''}`,
+      'Content-Type': 'application/json',
+    },
+    method: 'POST',
+  });
+
+  return (await fetchResponseHandler(response, {
+    errorMessage: `Failed to end the upload for ${objectType}/${objectId}.`,
+  })) as T;
+};

src/frontend/packages/lib_video/src/api/index.ts

@@ -28,4 +28,3 @@ export * from './useStopSharingMedia';
 export * from './useTimedTextMetadata';
 export * from './useVideoMetadata';
 export * from './useVideos';
-export * from './uploadEnded';