fix: uploading progress percentage (openedx#763)

src/import-page/data/api.js

@@ -12,13 +12,12 @@ export const getImportStatusApiUrl = (courseId, fileName) => `${getApiBaseUrl()}
  * @param {Object} requestConfig
  * @returns {Promise<Object>}
  */
-export async function startCourseImporting(courseId, fileData, requestConfig) {
+export async function startCourseImporting(courseId, fileData, requestConfig, updateProgress) {
   const chunkSize = 20 * 1000000; // 20 MB
   const fileSize = fileData.size || 0;
   const chunkLength = Math.ceil(fileSize / chunkSize);
   let resp;
-
-  const upload = async (blob, start, stop) => {
+  const upload = async (blob, start, stop, index) => {
     const contentRange = `bytes ${start}-${stop}/${fileSize}`;
     const contentDisposition = `attachment; filename="${fileData.name}"`;
     const headers = {
@@ -33,14 +32,16 @@ export async function startCourseImporting(courseId, fileData, requestConfig) {
         formData,
         { headers, ...requestConfig },
       );
+    const percent = Math.trunc(((1 / chunkLength) * (index + 1)) * 100);
+    updateProgress(percent);
     resp = camelCaseObject(data);
   };
 
   const chunkUpload = async (file, index) => {
     const start = index * chunkSize;
     const stop = start + chunkSize < fileSize ? start + chunkSize : fileSize;
     const blob = file.slice(start, stop, file.type);
-    await upload(blob, start, stop - 1);
+    await upload(blob, start, stop - 1, index);
   };
 
   /* eslint-disable no-await-in-loop */

src/import-page/data/api.test.jsx

@@ -29,7 +29,7 @@ describe('API Functions', () => {
     const data = { importStatus: 1 };
     axiosMock.onPost(postImportCourseApiUrl(courseId)).reply(200, data);
 
-    const result = await startCourseImporting(courseId, file);
+    const result = await startCourseImporting(courseId, file, {}, jest.fn());
     expect(axiosMock.history.post[0].url).toEqual(postImportCourseApiUrl(courseId));
     expect(result).toEqual(data);
   });

src/import-page/data/thunks.js

@@ -6,7 +6,7 @@ import { RequestStatus } from '../../data/constants';
 import { setImportCookie } from '../utils';
 import { getImportStatus, startCourseImporting } from './api';
 import {
-  reset, updateCurrentStage, updateError, updateFileName,
+  reset, updateCurrentStage, updateError, updateFileName, updateProgress,
   updateImportTriggered, updateLoadingStatus, updateSavingStatus, updateSuccessDate,
 } from './slice';
 import { IMPORT_STAGES, LAST_IMPORT_COOKIE_NAME } from './constants';
@@ -44,9 +44,14 @@ export function handleProcessUpload(courseId, fileData, requestConfig, handleErr
       const file = fileData.get('file');
       dispatch(reset());
       dispatch(updateSavingStatus(RequestStatus.PENDING));
-      dispatch(updateImportTriggered(true));
       dispatch(updateFileName(file.name));
-      const { importStatus } = await startCourseImporting(courseId, file, requestConfig);
+      dispatch(updateImportTriggered(true));
+      const { importStatus } = await startCourseImporting(
+        courseId,
+        file,
+        requestConfig,
+        (percent) => dispatch(updateProgress(percent)),
+      );
       dispatch(updateCurrentStage(importStatus));
       setImportCookie(moment().valueOf(), importStatus === IMPORT_STAGES.SUCCESS, file.name);
       dispatch(updateSavingStatus(RequestStatus.SUCCESSFUL));

src/import-page/file-section/FileSection.jsx

@@ -11,7 +11,6 @@ import { IMPORT_STAGES } from '../data/constants';
 import {
   getCurrentStage, getError, getFileName, getImportTriggered,
 } from '../data/selectors';
-import { updateProgress } from '../data/slice';
 import messages from './messages';
 import { handleProcessUpload } from '../data/thunks';
 
@@ -42,7 +41,6 @@ const FileSection = ({ intl, courseId }) => {
                   handleError,
                 ))
               }
-              onUploadProgress={(percent) => dispatch(updateProgress(percent))}
               accept={{ 'application/gzip': ['.tar.gz'] }}
               data-testid="dropzone"
             />

src/import-page/import-stepper/ImportStepper.jsx

@@ -95,7 +95,7 @@ const ImportStepper = ({ intl, courseId }) => {
       <h3 className="mt-4">{intl.formatMessage(messages.stepperHeaderTitle)}</h3>
       <CourseStepper
         courseId={courseId}
-        percent={progress}
+        percent={currentStage === IMPORT_STAGES.UPLOADING ? progress : null}
         steps={steps}
         activeKey={currentStage}
         hasError={hasError}