Revert "feat: add upload progress modal (openedx#1113)" (openedx#1128)

This reverts commit 8ef804b.

src/files-and-videos/files-page/FilesPage.test.jsx

@@ -563,10 +563,7 @@ describe('FilesAndUploads', () => {
           const addStatus = store.getState().assets.addingStatus;
           expect(addStatus).toEqual(RequestStatus.FAILED);
         });
-        const addStatus = store.getState().assets.addingStatus;
-        expect(addStatus).toEqual(RequestStatus.FAILED);
-
-        expect(screen.getByText('Upload error')).toBeVisible();
+        expect(screen.getByText('Error')).toBeVisible();
       });
 
       it('404 validation should show error', async () => {
@@ -578,7 +575,7 @@ describe('FilesAndUploads', () => {
         const addStatus = store.getState().assets.addingStatus;
         expect(addStatus).toEqual(RequestStatus.FAILED);
 
-        expect(screen.getByText('Upload error')).toBeVisible();
+        expect(screen.getByText('Error')).toBeVisible();
       });
 
       it('404 upload should show error', async () => {
@@ -591,7 +588,7 @@ describe('FilesAndUploads', () => {
         const addStatus = store.getState().assets.addingStatus;
         expect(addStatus).toEqual(RequestStatus.FAILED);
 
-        expect(screen.getByText('Upload error')).toBeVisible();
+        expect(screen.getByText('Error')).toBeVisible();
       });
 
       it('404 delete should show error', async () => {

src/files-and-videos/files-page/messages.js

@@ -111,15 +111,6 @@ const messages = defineMessages({
     defaultMessage: 'Cancel',
     description: 'The message displayed in the button to confirm cancelling the upload',
   },
-  lockFileTooltipContent: {
-    id: 'course-authoring.files-and-uploads.file-info.lockFile.tooltip.content',
-    defaultMessage: `By default, anyone can access a file you upload if
-      they know the web URL, even if they are not enrolled in your course.
-      You can prevent outside access to a file by locking the file. When
-      you lock a file, the web URL only allows learners who are enrolled
-      in your course and signed in to access the file.`,
-    description: 'Tooltip message for the lock icon in the table view of files',
-  },
 });
 
 export default messages;

src/files-and-videos/generic/EditFileErrors.jsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
-import { Alert } from '@openedx/paragon';
 import { ErrorAlert } from '@edx/frontend-lib-content-components';
 import { RequestStatus } from '../../data/constants';
 import messages from './messages';
@@ -25,13 +24,10 @@ const EditFileErrors = ({
       {intl.formatMessage(messages.errorAlertMessage, { message: errorMessages.loading })}
     </ErrorAlert>
     <ErrorAlert
-      hideHeading
+      hideHeading={false}
       dismissError={() => resetErrors({ errorType: 'add' })}
       isError={addFileStatus === RequestStatus.FAILED}
     >
-      <Alert.Heading>
-        {intl.formatMessage(messages.uploadErrorAlertTitle)}
-      </Alert.Heading>
       <ul className="p-0">
         {errorMessages.add.map(message => (
           <li key={`add-error-${message}`} style={{ listStyle: 'none' }}>

src/files-and-videos/generic/messages.js

@@ -202,12 +202,6 @@ const messages = defineMessages({
   failedLabel: {
     id: 'course-authoring.files-and-uploads.filter.failed.label',
     defaultMessage: 'Failed',
-    description: 'Label for failed sort button in sort and filter modal',
-  },
-  uploadErrorAlertTitle: {
-    id: 'course-authoring.files-and-uploads.error.upload.title',
-    defaultMessage: 'Upload error',
-    description: 'Title for upload error alert',
   },
 });
 

src/files-and-videos/videos-page/VideosPage.jsx

@@ -1,18 +1,19 @@
 import React, { useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
-import { Helmet } from 'react-helmet';
 import { useDispatch, useSelector } from 'react-redux';
 import {
   injectIntl,
   FormattedMessage,
   intlShape,
 } from '@edx/frontend-platform/i18n';
 import {
+  useToggle,
   ActionRow,
   Button,
   CheckboxFilter,
   Container,
-  useToggle,
+  Alert,
+  Spinner,
 } from '@openedx/paragon';
 import Placeholder from '@edx/frontend-lib-content-components';
 
@@ -28,7 +29,6 @@ import {
   markVideoUploadsInProgressAsFailed,
   resetErrors,
   updateVideoOrder,
-  cancelAllUploads,
 } from './data/thunks';
 import messages from './messages';
 import VideosPageProvider from './VideosPageProvider';
@@ -41,12 +41,11 @@ import {
   ThumbnailColumn,
   TranscriptColumn,
 } from '../generic';
+import TranscriptSettings from './transcript-settings';
+import VideoThumbnail from './VideoThumbnail';
 import { getFormattedDuration, resampleFile } from './data/utils';
 import FILES_AND_UPLOAD_TYPE_FILTERS from '../generic/constants';
-import TranscriptSettings from './transcript-settings';
 import VideoInfoModalSidebar from './info-sidebar';
-import VideoThumbnail from './VideoThumbnail';
-import UploadModal from './upload-modal';
 
 const VideosPage = ({
   courseId,
@@ -59,12 +58,11 @@ const VideosPage = ({
     openTranscriptSettings,
     closeTranscriptSettings,
   ] = useToggle(false);
-  const [
-    isUploadTrackerOpen,
-    openUploadTracker,
-    closeUploadTracker,
-  ] = useToggle(false);
   const courseDetails = useModel('courseDetails', courseId);
+  document.title = getPageHeadTitle(
+    courseDetails?.name,
+    intl.formatMessage(messages.heading),
+  );
 
   useEffect(() => {
     dispatch(fetchVideos(courseId));
@@ -82,7 +80,7 @@ const VideosPage = ({
     pageSettings,
   } = useSelector((state) => state.videos);
 
-  const uploadingIdsRef = useRef({ uploadData: {}, uploadCount: 0 });
+  const uploadingIdsRef = useRef([]);
 
   useEffect(() => {
     window.onbeforeunload = () => {
@@ -92,11 +90,6 @@ const VideosPage = ({
       }
       return undefined;
     };
-    if (addVideoStatus === RequestStatus.IN_PROGRESS) {
-      openUploadTracker();
-    } else {
-      closeUploadTracker();
-    }
   }, [addVideoStatus]);
 
   const {
@@ -110,12 +103,11 @@ const VideosPage = ({
   const supportedFileFormats = {
     'video/*': videoSupportedFileFormats || FILES_AND_UPLOAD_TYPE_FILTERS.video,
   };
-  const handleUploadCancel = () => dispatch(cancelAllUploads(courseId, uploadingIdsRef.current.uploadData));
+
   const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleAddFile = (files) => {
     handleErrorReset({ errorType: 'add' });
-    uploadingIdsRef.current.uploadCount = files.length;
-    dispatch(addVideoFile(courseId, files, videoIds, uploadingIdsRef));
+    files.forEach((file) => dispatch(addVideoFile(courseId, file, videoIds, uploadingIdsRef)));
   };
   const handleDeleteFile = (id) => dispatch(deleteVideoFile(courseId, id));
   const handleDownloadFile = (selectedRows) => dispatch(fetchVideoDownload({ selectedRows, courseId }));
@@ -230,9 +222,6 @@ const VideosPage = ({
 
   return (
     <VideosPageProvider courseId={courseId}>
-      <Helmet>
-        <title>{getPageHeadTitle(courseDetails?.name, intl.formatMessage(messages.heading))}</title>
-      </Helmet>
       <Container size="xl" className="p-4 pt-4.5">
         <EditFileErrors
           resetErrors={handleErrorReset}
@@ -242,6 +231,11 @@ const VideosPage = ({
           updateFileStatus={updateVideoStatus}
           loadingStatus={loadingStatus}
         />
+        <Alert variant="warning" show={addVideoStatus === RequestStatus.IN_PROGRESS}>
+          <div className="video-upload-warning-text"><Spinner animation="border" variant="warning" className="video-upload-spinner mr-3" screenReaderText="loading" />
+            <p className="d-inline"><FormattedMessage {...messages.videoUploadAlertLabel} /></p>
+          </div>
+        </Alert>
         <ActionRow>
           <div className="h2">
             <FormattedMessage {...messages.heading} />
@@ -293,13 +287,6 @@ const VideosPage = ({
             />
           </>
         )}
-        <UploadModal
-          {...{
-            isUploadTrackerOpen,
-            currentUploadingIdsRef: uploadingIdsRef.current,
-            handleUploadCancel,
-          }}
-        />
       </Container>
     </VideosPageProvider>
   );