fixup! feat: Add slots for video and file upload components and alerts

Author: xitij2000

src/plugin-slots/CourseFilesSlot/README.md

@@ -1,6 +1,6 @@
 # Course Files Slot
 
-### Slot ID: `files_upload_page_table_slot`
+### Slot ID: `org.openedx.frontend.authoring.files_upload_page_table.v1`
 
 ## Description
 
@@ -11,14 +11,15 @@ This slot is used to replace/modify/hide the course file table UI.
 ### Wrapped with a div with dashed border
 ![Red Border around Files UI](./screenshot_files_border_wrap.png)
 
-The following `env.config.jsx` will wrap the files component with a div that has a large red dashed redborder.
+The following `env.config.jsx` will wrap the files component with a div that has a large red dashed 
+red border.
 
 ```js
 import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
 
 const config = {
   pluginSlots: {
-    files_upload_page_table_slot: {
+    'org.openedx.frontend.authoring.files_upload_page_table.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/CourseFilesSlot/index.jsx

@@ -33,20 +33,18 @@ const CourseFilesSlot = ({ courseId }) => {
     usageStatus: usagePathStatus,
     errors: errorMessages,
   } = useSelector(state => state.assets);
-  const data = {
-    fileIds: assetIds,
-    loadingStatus,
-    usagePathStatus,
-    usageErrorMessages: errorMessages.usageMetrics,
-    fileType: 'file',
-  };
+
   const handleErrorReset = (error) => dispatch(resetErrors(error));
   const handleDeleteFile = (id) => dispatch(deleteAssetFile(courseId, id));
   const handleDownloadFile = (selectedRows) => dispatch(fetchAssetDownload({ selectedRows, courseId }));
   const handleAddFile = (files) => {
     handleErrorReset({ errorType: 'add' });
     dispatch(validateAssetFiles(courseId, files));
   };
+  const handleFileOverwrite = (close, files) => {
+    Object.values(files).forEach(file => dispatch(addAssetFile(courseId, file, true)));
+    close();
+  };
   const handleLockFile = (fileId, locked) => {
     handleErrorReset({ errorType: 'lock' });
     dispatch(updateAssetLock({ courseId, assetId: fileId, locked }));
@@ -56,22 +54,25 @@ const CourseFilesSlot = ({ courseId }) => {
     dispatch(updateAssetOrder(courseId, newFileIdOrder, sortType));
   };
 
-  const handleFileOverwrite = (close, files) => {
-    Object.values(files).forEach(file => dispatch(addAssetFile(courseId, file, true)));
-    close();
-  };
-
   const thumbnailPreview = (props) => FileThumbnail(props);
   const infoModalSidebar = (asset) => FileInfoModalSidebar({
     asset,
     handleLockedAsset: handleLockFile,
   });
+
   const assets = useModels('assets', assetIds);
+  const data = {
+    fileIds: assetIds,
+    loadingStatus,
+    usagePathStatus,
+    usageErrorMessages: errorMessages.usageMetrics,
+    fileType: 'file',
+  };
   const maxFileSize = 20 * 1048576;
 
   const activeColumn = {
     id: 'activeStatus',
-    Header: 'Active',
+    Header: intl.formatMessage(messages.fileActiveColumn),
     accessor: 'activeStatus',
     Cell: ({ row }) => ActiveColumn({ row, pageLoadStatus: loadingStatus }),
     Filter: CheckboxFilter,
@@ -83,7 +84,7 @@ const CourseFilesSlot = ({ courseId }) => {
   };
   const accessColumn = {
     id: 'lockStatus',
-    Header: 'Access',
+    Header: intl.formatMessage(messages.fileAccessColumn),
     accessor: 'lockStatus',
     Cell: ({ row }) => AccessColumn({ row }),
     Filter: CheckboxFilter,
@@ -99,7 +100,7 @@ const CourseFilesSlot = ({ courseId }) => {
   };
   const fileSizeColumn = {
     id: 'fileSize',
-    Header: 'File size',
+    Header: intl.formatMessage(messages.fileSizeColumn),
     accessor: 'fileSize',
     Cell: ({ row }) => {
       const { fileSize } = row.original;
@@ -110,12 +111,12 @@ const CourseFilesSlot = ({ courseId }) => {
   const tableColumns = [
     { ...thumbnailColumn },
     {
-      Header: 'File name',
+      Header: intl.formatMessage(messages.fileNameColumn),
       accessor: 'displayName',
     },
     { ...fileSizeColumn },
     {
-      Header: 'Type',
+      Header: intl.formatMessage(messages.fileTypeColumn),
       accessor: 'wrapperType',
       Filter: CheckboxFilter,
       filter: 'includesValue',
@@ -146,7 +147,7 @@ const CourseFilesSlot = ({ courseId }) => {
     { ...accessColumn },
   ];
   return (
-    <PluginSlot id="files_upload_page_table_slot">
+    <PluginSlot id="org.openedx.frontend.authoring.files_upload_page_table.v1">
       <FileTable
         {...{
           courseId,

src/plugin-slots/CourseVideosSlot/README.md

@@ -1,6 +1,6 @@
 # Course Video Upload Page Slot
 
-### Slot ID: `videos_upload_page_table_slot`
+### Slot ID: `org.openedx.frontend.authoring.videos_upload_page_table.v1`
 
 ## Description
 
@@ -18,7 +18,7 @@ import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
 
 const config = {
   pluginSlots: {
-    videos_upload_page_table_slot: {
+    'org.openedx.frontend.authoring.videos_upload_page_table.v1': {
       keepDefault: true,
       plugins: [
         {

src/plugin-slots/CourseVideosSlot/index.jsx

@@ -17,7 +17,7 @@ import {
   addVideoThumbnail, cancelAllUploads,
   deleteVideoFile,
   fetchVideoDownload, fetchVideos,
-  getUsagePaths, markVideoUploadsInProgressAsFailed, resetErrors,
+  getUsagePaths, markVideoUploadsInProgressAsFailed, newUploadData, resetErrors,
   updateVideoOrder,
 } from 'CourseAuthoring/files-and-videos/videos-page/data/thunks';
 import { getFormattedDuration, resampleFile } from 'CourseAuthoring/files-and-videos/videos-page/data/utils';
@@ -26,7 +26,7 @@ import messages from 'CourseAuthoring/files-and-videos/videos-page/messages';
 import TranscriptSettings from 'CourseAuthoring/files-and-videos/videos-page/transcript-settings';
 import UploadModal from 'CourseAuthoring/files-and-videos/videos-page/upload-modal';
 import VideoThumbnail from 'CourseAuthoring/files-and-videos/videos-page/VideoThumbnail';
-import { useModels } from 'CourseAuthoring/generic/model-store';
+import { useModel, useModels } from 'CourseAuthoring/generic/model-store';
 import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
@@ -39,6 +39,15 @@ const CourseVideosSlot = ({ courseId }) => {
     openTranscriptSettings,
     closeTranscriptSettings,
   ] = useToggle(false);
+  const [
+    isUploadTrackerOpen,
+    openUploadTracker,
+    closeUploadTracker,
+  ] = useToggle(false);
+
+  useEffect(() => {
+    dispatch(fetchVideos(courseId));
+  }, [courseId]);
   const {
     videoIds,
     loadingStatus,
@@ -51,6 +60,30 @@ const CourseVideosSlot = ({ courseId }) => {
 
   const uploadingIdsRef = useRef({ uploadData: {}, uploadCount: 0 });
 
+  useEffect(() => {
+    window.onbeforeunload = () => {
+      dispatch(markVideoUploadsInProgressAsFailed({ uploadingIdsRef, courseId }));
+      if (addVideoStatus === RequestStatus.IN_PROGRESS) {
+        return '';
+      }
+      return undefined;
+    };
+    switch (addVideoStatus) {
+      case RequestStatus.IN_PROGRESS:
+        openUploadTracker();
+        break;
+      case RequestStatus.SUCCESSFUL:
+        setTimeout(() => closeUploadTracker(), 500);
+        break;
+      case RequestStatus.FAILED:
+        setTimeout(() => closeUploadTracker(), 500);
+        break;
+      default:
+        closeUploadTracker();
+        break;
+    }
+  }, [addVideoStatus]);
+
   const {
     isVideoTranscriptEnabled,
     encodingsDownloadUrl,
@@ -66,6 +99,18 @@ const CourseVideosSlot = ({ courseId }) => {
   const handleAddFile = (files) => {
     handleErrorReset({ errorType: 'add' });
     uploadingIdsRef.current.uploadCount = files.length;
+
+    files.forEach((file, idx) => {
+      const name = file?.name || `Video ${idx + 1}`;
+      const progress = 0;
+
+      newUploadData({
+        status: RequestStatus.PENDING,
+        currentData: uploadingIdsRef.current.uploadData,
+        originalValue: { name, progress },
+        key: `video_${idx}`,
+      });
+    });
     dispatch(addVideoFile(courseId, files, videoIds, uploadingIdsRef));
   };
   const handleDeleteFile = (id) => dispatch(deleteVideoFile(courseId, id));
@@ -81,40 +126,8 @@ const CourseVideosSlot = ({ courseId }) => {
     videoId,
     addVideoThumbnail,
   });
-  const videos = useModels('videos', videoIds);
-  const [
-    isUploadTrackerOpen,
-    openUploadTracker,
-    closeUploadTracker,
-  ] = useToggle(false);
-
-  useEffect(() => {
-    dispatch(fetchVideos(courseId));
-  }, [courseId]);
 
-  useEffect(() => {
-    window.onbeforeunload = () => {
-      dispatch(markVideoUploadsInProgressAsFailed({ uploadingIdsRef, courseId }));
-      if (addVideoStatus === RequestStatus.IN_PROGRESS) {
-        return '';
-      }
-      return undefined;
-    };
-    switch (addVideoStatus) {
-      case RequestStatus.IN_PROGRESS:
-        openUploadTracker();
-        break;
-      case RequestStatus.SUCCESSFUL:
-        setTimeout(() => closeUploadTracker(), 500);
-        break;
-      case RequestStatus.FAILED:
-        setTimeout(() => closeUploadTracker(), 500);
-        break;
-      default:
-        closeUploadTracker();
-        break;
-    }
-  }, [addVideoStatus]);
+  const videos = useModels('videos', videoIds);
 
   const data = {
     supportedFileFormats,
@@ -202,14 +215,18 @@ const CourseVideosSlot = ({ courseId }) => {
     { ...activeColumn },
     { ...processingStatusColumn },
   ];
+
   return (
     <PluginSlot
-      id="videos_upload_page_table_slot"
+      id="org.openedx.frontend.authoring.videos_upload_page_table.v1"
       pluginProps={{
         courseId,
       }}
     >
       <ActionRow>
+        <div className="h2">
+          {intl.formatMessage(messages.heading)}
+        </div>
         <ActionRow.Spacer />
         {isVideoTranscriptEnabled ? (
           <Button