Merge branch 'rpenido/fal-3753-library-home-page-bare-bones' into rpe…

…nido/fal-3764-library-home-filter-by-content-type
open-craft · Jul 9, 2024 · fc84f7f · fc84f7f
2 parents 1718c26 + 905dbb5
commit fc84f7f
Show file tree

Hide file tree

Showing 13 changed files with 147 additions and 66 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/files-and-videos/generic/FileTable.jsx b/src/files-and-videos/generic/FileTable.jsx
@@ -243,14 +243,16 @@ const FileTable = ({
           fileType={fileType}
         />
 
-        <ApiStatusToast
-          actionType={intl.formatMessage(messages.apiStatusAddingAction)}
-          selectedRowCount={selectedRows.length}
-          isOpen={isAddOpen}
-          setClose={setAddClose}
-          setSelectedRows={setSelectedRows}
-          fileType={fileType}
-        />
+        {fileType === 'files' && (
+          <ApiStatusToast
+            actionType={intl.formatMessage(messages.apiStatusAddingAction)}
+            selectedRowCount={selectedRows.length}
+            isOpen={isAddOpen}
+            setClose={setAddClose}
+            setSelectedRows={setSelectedRows}
+            fileType={fileType}
+          />
+        )}
 
         <ApiStatusToast
           actionType={intl.formatMessage(messages.apiStatusDownloadingAction)}

diff --git a/src/files-and-videos/videos-page/VideosPage.jsx b/src/files-and-videos/videos-page/VideosPage.jsx
@@ -92,10 +92,19 @@ const VideosPage = ({
       }
       return undefined;
     };
-    if (addVideoStatus === RequestStatus.IN_PROGRESS) {
-      openUploadTracker();
-    } else {
-      closeUploadTracker();
+    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]);
 
@@ -298,6 +307,7 @@ const VideosPage = ({
             isUploadTrackerOpen,
             currentUploadingIdsRef: uploadingIdsRef.current,
             handleUploadCancel,
+            addVideoStatus,
           }}
         />
       </Container>

diff --git a/src/files-and-videos/videos-page/VideosPage.test.jsx b/src/files-and-videos/videos-page/VideosPage.test.jsx
@@ -685,7 +685,6 @@ describe('Videos page', () => {
           expect(screen.queryByText('Delete mOckID1.mp4')).toBeNull();
         });
 
-        await executeThunk(deleteVideoFile(courseId, 'mOckID1', 5), store.dispatch);
         await waitFor(() => {
           const deleteStatus = store.getState().videos.deletingStatus;
           expect(deleteStatus).toEqual(RequestStatus.FAILED);

diff --git a/src/files-and-videos/videos-page/data/thunks.js b/src/files-and-videos/videos-page/data/thunks.js
@@ -224,6 +224,7 @@ const uploadToBucket = async ({
   const currentController = new AbortController();
   controllers.push(currentController);
   const currentVideoData = uploadingIdsRef.current.uploadData[edxVideoId];
+
   try {
     const putToServerResponse = await uploadVideo(
       uploadUrl,
@@ -279,6 +280,24 @@ const uploadToBucket = async ({
   }
 };
 
+const newUploadData = ({
+  status,
+  edxVideoId,
+  currentData,
+  key,
+  originalValue,
+}) => {
+  const newData = currentData;
+  if (edxVideoId && edxVideoId !== key) {
+    newData[edxVideoId] = { ...originalValue, status };
+    delete newData[key];
+    return newData;
+  }
+
+  newData[key] = { ...originalValue, status };
+  return newData;
+};
+
 export function addVideoFile(
   courseId,
   files,
@@ -292,31 +311,38 @@ export function addVideoFile(
     let hasFailure = false;
     await Promise.all(files.map(async (file, idx) => {
       const name = file?.name || `Video ${idx + 1}`;
+      const progress = 0;
+
+      uploadingIdsRef.current.uploadData = newUploadData({
+        status: RequestStatus.PENDING,
+        currentData: uploadingIdsRef.current.uploadData,
+        originalValue: { name, progress },
+        key: `video_${idx}`,
+      });
+
       const { edxVideoId, uploadUrl } = await addVideoToEdxVal(courseId, file, dispatch);
+
       if (uploadUrl && edxVideoId) {
-        uploadingIdsRef.current.uploadData = {
-          ...uploadingIdsRef.current.uploadData,
-          [edxVideoId]: {
-            name,
-            status: RequestStatus.PENDING,
-            progress: 0,
-          },
-        };
+        uploadingIdsRef.current.uploadData = newUploadData({
+          status: RequestStatus.PENDING,
+          currentData: uploadingIdsRef.current.uploadData,
+          originalValue: { name, progress },
+          key: `video_${idx}`,
+          edxVideoId,
+        });
         hasFailure = await uploadToBucket({
           courseId, uploadUrl, file, uploadingIdsRef, edxVideoId, dispatch,
         });
       } else {
         hasFailure = true;
-        uploadingIdsRef.current.uploadData = {
-          ...uploadingIdsRef.current.uploadData,
-          [idx]: {
-            name,
-            status: RequestStatus.FAILED,
-            progress: 0,
-          },
+        uploadingIdsRef.current.uploadData[idx] = {
+          status: RequestStatus.FAILED,
+          name,
+          progress,
         };
       }
     }));
+
     try {
       const { videos } = await fetchVideoList(courseId);
       const newVideos = videos.filter(
@@ -337,11 +363,13 @@ export function addVideoFile(
         updateErrors({ error: 'add', message: 'Failed to load videos' }),
       );
     }
+
     if (hasFailure) {
       dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.FAILED }));
     } else {
       dispatch(updateEditStatus({ editType: 'add', status: RequestStatus.SUCCESSFUL }));
     }
+
     uploadingIdsRef.current = {
       uploadData: {},
       uploadCount: 0,

diff --git a/src/files-and-videos/videos-page/data/thunks.test.js b/src/files-and-videos/videos-page/data/thunks.test.js
@@ -7,8 +7,8 @@ describe('addVideoFile', () => {
   const courseId = 'course-123';
   const mockFile = {
     name: 'mockName',
-
   };
+  const uploadingIdsRef = { current: { uploadData: {} } };
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -18,7 +18,7 @@ describe('addVideoFile', () => {
       status: 404,
     });
 
-    await addVideoFile(courseId, [mockFile], undefined, { current: [] })(dispatch, getState);
+    await addVideoFile(courseId, [mockFile], undefined, uploadingIdsRef)(dispatch, getState);
 
     expect(dispatch).toHaveBeenCalledWith({
       payload: {
@@ -43,7 +43,7 @@ describe('addVideoFile', () => {
     jest.spyOn(api, 'uploadVideo').mockResolvedValue({
       status: 404,
     });
-    await addVideoFile(courseId, [mockFile], undefined, { current: [] })(dispatch, getState);
+    await addVideoFile(courseId, [mockFile], undefined, uploadingIdsRef)(dispatch, getState);
     expect(videoStatusMock).toHaveBeenCalledWith(courseId, mockEdxVideoId, 'Upload failed', 'upload_failed');
     expect(dispatch).toHaveBeenCalledWith({
       payload: {
@@ -70,7 +70,7 @@ describe('addVideoFile', () => {
     jest.spyOn(api, 'uploadVideo').mockResolvedValue({
       status: 200,
     });
-    await addVideoFile(courseId, [mockFile], undefined, { current: [] })(dispatch, getState);
+    await addVideoFile(courseId, [mockFile], undefined, uploadingIdsRef)(dispatch, getState);
     expect(videoStatusMock).toHaveBeenCalledWith(courseId, mockEdxVideoId, 'Upload completed', 'upload_completed');
   });
 });
diff --git a/src/files-and-videos/videos-page/upload-modal/UploadModal.jsx b/src/files-and-videos/videos-page/upload-modal/UploadModal.jsx
@@ -12,15 +12,18 @@ import {
 import { WarningFilled } from '@openedx/paragon/icons';
 import messages from '../messages';
 import UploadProgressList from './UploadProgressList';
+import { RequestStatus } from '../../../data/constants';
 
 const UploadModal = ({
   isUploadTrackerOpen,
   handleUploadCancel,
   currentUploadingIdsRef,
+  addVideoStatus,
 }) => {
   const intl = useIntl();
   const videosPagePath = '';
   const { uploadData, uploadCount } = currentUploadingIdsRef;
+  const cancelIsDisabled = addVideoStatus === RequestStatus.FAILED || addVideoStatus === RequestStatus.SUCCESSFUL;
 
   return (
     <ModalDialog
@@ -69,7 +72,7 @@ const UploadModal = ({
       </Scrollable>
       <ModalDialog.Footer>
         <ActionRow>
-          <Button onClick={handleUploadCancel}>
+          <Button onClick={handleUploadCancel} disabled={cancelIsDisabled}>
             {intl.formatMessage(messages.videoUploadTrackerAlertCancelLabel)}
           </Button>
         </ActionRow>
@@ -89,6 +92,7 @@ UploadModal.propTypes = {
     }).isRequired,
     uploadCount: PropTypes.number.isRequired,
   }).isRequired,
+  addVideoStatus: PropTypes.string.isRequired,
 };
 
 export default UploadModal;
diff --git a/src/header/Header.jsx → src/header/Header.tsx b/src/header/Header.jsx → src/header/Header.tsx
@@ -1,6 +1,5 @@
-// @ts-check
+/* eslint-disable react/require-default-props */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { getConfig } from '@edx/frontend-platform';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { StudioHeader } from '@edx/frontend-component-header';
@@ -10,14 +9,23 @@ import { SearchModal } from '../search-modal';
 import { getContentMenuItems, getSettingMenuItems, getToolsMenuItems } from './utils';
 import messages from './messages';
 
+interface HeaderProps {
+  contentId?: string,
+  number?: string,
+  org?: string,
+  title?: string,
+  isHiddenMainMenu?: boolean,
+  isLibrary?: boolean,
+}
+
 const Header = ({
-  contentId,
-  org,
-  number,
-  title,
-  isHiddenMainMenu,
-  isLibrary,
-}) => {
+  contentId = '',
+  org = '',
+  number = '',
+  title = '',
+  isHiddenMainMenu = false,
+  isLibrary = false,
+}: HeaderProps) => {
   const intl = useIntl();
 
   const [isShowSearchModalOpen, openSearchModal, closeSearchModal] = useToggle(false);
@@ -65,22 +73,4 @@ const Header = ({
   );
 };
 
-Header.propTypes = {
-  contentId: PropTypes.string,
-  number: PropTypes.string,
-  org: PropTypes.string,
-  title: PropTypes.string,
-  isHiddenMainMenu: PropTypes.bool,
-  isLibrary: PropTypes.bool,
-};
-
-Header.defaultProps = {
-  contentId: '',
-  number: '',
-  org: '',
-  title: '',
-  isHiddenMainMenu: false,
-  isLibrary: false,
-};
-
 export default Header;