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

This change add plugin slots for the file and video upload components, and the alerts components on those pages.

Author: xitij2000

src/course-outline/page-alerts/PageAlerts.jsx

@@ -1,4 +1,3 @@
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import CourseOutlinePageAlertsSlot from 'CourseAuthoring/plugin-slots/CourseOutlinePageAlertsSlot';
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';

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

@@ -9,8 +9,8 @@ import { RequestStatus } from '../../data/constants';
 import Placeholder from '../../editors/Placeholder';
 import { useModel } from '../../generic/model-store';
 import getPageHeadTitle from '../../generic/utils';
-import { EditFileErrors, } from '../generic';
-import { fetchAssets, resetErrors, } from './data/thunks';
+import { EditFileErrors } from '../generic';
+import { fetchAssets, resetErrors } from './data/thunks';
 import FilesPageProvider from './FilesPageProvider';
 import messages from './messages';
 

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

@@ -1,4 +1,3 @@
-import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import EditFileErrorAlertsSlot from 'CourseAuthoring/plugin-slots/EditFileErrorAlertsSlot';
 import React from 'react';
 import PropTypes from 'prop-types';

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

@@ -1,4 +1,4 @@
-import { useIntl, } from '@edx/frontend-platform/i18n';
+import { useIntl } from '@edx/frontend-platform/i18n';
 import { Container } from '@openedx/paragon';
 import CourseVideosSlot from 'CourseAuthoring/plugin-slots/CourseVideosSlot';
 import PropTypes from 'prop-types';
@@ -10,7 +10,7 @@ import { RequestStatus } from '../../data/constants';
 import Placeholder from '../../editors/Placeholder';
 import { useModel } from '../../generic/model-store';
 import getPageHeadTitle from '../../generic/utils';
-import { EditFileErrors, } from '../generic';
+import { EditFileErrors } from '../generic';
 import { resetErrors } from './data/thunks';
 import messages from './messages';
 import VideosPageProvider from './VideosPageProvider';

src/plugin-slots/CourseFilesSlot/index.jsx

@@ -9,15 +9,18 @@ import {
   resetErrors,
   updateAssetLock,
   updateAssetOrder,
-  validateAssetFiles
+  validateAssetFiles,
 } from 'CourseAuthoring/files-and-videos/files-page/data/thunks';
 import FileInfoModalSidebar from 'CourseAuthoring/files-and-videos/files-page/FileInfoModalSidebar';
 import FileThumbnail from 'CourseAuthoring/files-and-videos/files-page/FileThumbnail';
 import FileValidationModal from 'CourseAuthoring/files-and-videos/files-page/FileValidationModal';
 import messages from 'CourseAuthoring/files-and-videos/files-page/messages';
-import { AccessColumn, ActiveColumn, FileTable, ThumbnailColumn } from 'CourseAuthoring/files-and-videos/generic';
+import {
+  AccessColumn, ActiveColumn, FileTable, ThumbnailColumn,
+} from 'CourseAuthoring/files-and-videos/generic';
 import { useModels } from 'CourseAuthoring/generic/model-store';
 import { getFileSizeToClosestByte } from 'CourseAuthoring/utils';
+import PropTypes from 'prop-types';
 import React from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -166,4 +169,9 @@ const CourseFilesSlot = ({ courseId }) => {
     </PluginSlot>
   );
 };
+
+CourseFilesSlot.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
 export default CourseFilesSlot;

src/plugin-slots/CourseOutlinePageAlertsSlot/index.jsx

@@ -1,5 +1,5 @@
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 import React from 'react';
 
-const CourseOutlinePageAlertsSlot = () => <PluginSlot id="course_outline_page_alerts_slots" />
-export default CourseOutlinePageAlertsSlot
+const CourseOutlinePageAlertsSlot = () => <PluginSlot id="course_outline_page_alerts_slots" />;
+export default CourseOutlinePageAlertsSlot;

src/plugin-slots/CourseVideosSlot/index.jsx

@@ -1,13 +1,15 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
-import { ActionRow, Button, CheckboxFilter, useToggle } from '@openedx/paragon';
+import {
+  ActionRow, Button, CheckboxFilter, useToggle,
+} from '@openedx/paragon';
 import { RequestStatus } from 'CourseAuthoring/data/constants';
 import {
   ActiveColumn,
   FileTable,
   StatusColumn,
   ThumbnailColumn,
-  TranscriptColumn
+  TranscriptColumn,
 } from 'CourseAuthoring/files-and-videos/generic';
 import FILES_AND_UPLOAD_TYPE_FILTERS from 'CourseAuthoring/files-and-videos/generic/constants';
 import {
@@ -16,15 +18,16 @@ import {
   deleteVideoFile,
   fetchVideoDownload, fetchVideos,
   getUsagePaths, markVideoUploadsInProgressAsFailed, resetErrors,
-  updateVideoOrder
+  updateVideoOrder,
 } from 'CourseAuthoring/files-and-videos/videos-page/data/thunks';
 import { getFormattedDuration, resampleFile } from 'CourseAuthoring/files-and-videos/videos-page/data/utils';
 import VideoInfoModalSidebar from 'CourseAuthoring/files-and-videos/videos-page/info-sidebar';
 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 { useModel, useModels } from 'CourseAuthoring/generic/model-store';
+import { useModels } from 'CourseAuthoring/generic/model-store';
+import PropTypes from 'prop-types';
 import React, { useEffect, useRef } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -113,8 +116,6 @@ const CourseVideosSlot = ({ courseId }) => {
     }
   }, [addVideoStatus]);
 
-
-
   const data = {
     supportedFileFormats,
     encodingsDownloadUrl,
@@ -268,4 +269,8 @@ const CourseVideosSlot = ({ courseId }) => {
   );
 };
 
+CourseVideosSlot.propTypes = {
+  courseId: PropTypes.string.isRequired,
+};
+
 export default CourseVideosSlot;

src/plugin-slots/EditFileErrorAlertsSlot/index.jsx

@@ -1,8 +1,5 @@
 import { PluginSlot } from '@openedx/frontend-plugin-framework';
 
-
-const EditFileErrorAlertsSlot = () =>
-  <PluginSlot id="edit_file_error_alerts_slot" />
-
+const EditFileErrorAlertsSlot = () => <PluginSlot id="edit_file_error_alerts_slot" />;
 
 export default EditFileErrorAlertsSlot;