fix: video uploader close button go back instead of closing app

src/editors/containers/VideoGallery/hooks.js

@@ -145,10 +145,14 @@ export const useVideoListProps = ({
   };
 };
 
-export const useVideoUploadHandler = () => {
+export const useVideoUploadHandler = ({ replace }) => {
   const learningContextId = useSelector(selectors.app.learningContextId);
   const blockId = useSelector(selectors.app.blockId);
-  return () => navigateTo(`/course/${learningContextId}/editor/video_upload/${blockId}`);
+  const path = `/course/${learningContextId}/editor/video_upload/${blockId}`;
+  if (replace) {
+    return () => window.location.replace(path);
+  }
+  return () => navigateTo(path);
 };
 
 export const useCancelHandler = () => (
@@ -203,7 +207,7 @@ export const useVideoProps = ({ videos }) => {
     inputError,
     selectBtnProps,
   } = videoList;
-  const fileInput = { click: useVideoUploadHandler() };
+  const fileInput = { click: useVideoUploadHandler({ replace: false }) };
 
   return {
     galleryError,

src/editors/containers/VideoGallery/index.jsx

@@ -19,7 +19,7 @@ export const VideoGallery = () => {
     (state) => selectors.requests.isFailed(state, { requestKey: RequestKeys.uploadVideo }),
   );
   const videos = hooks.buildVideos({ rawVideos });
-  const handleVideoUpload = hooks.useVideoUploadHandler();
+  const handleVideoUpload = hooks.useVideoUploadHandler({ replace: true });
 
   useEffect(() => {
     // If no videos exists redirects to the video upload screen

src/editors/containers/VideoGallery/index.test.jsx

@@ -80,7 +80,7 @@ describe('VideoGallery', () => {
     beforeAll(() => {
       oldLocation = window.location;
       delete window.location;
-      window.location = { assign: jest.fn() };
+      window.location = { replace: jest.fn() };
     });
     afterAll(() => {
       window.location = oldLocation;
@@ -118,10 +118,10 @@ describe('VideoGallery', () => {
       ));
     });
     it('navigates to video upload page when there are no videos', async () => {
-      expect(window.location.assign).not.toHaveBeenCalled();
+      expect(window.location.replace).not.toHaveBeenCalled();
       updateState({ videos: [] });
       await renderComponent();
-      expect(window.location.assign).toHaveBeenCalled();
+      expect(window.location.replace).toHaveBeenCalled();
     });
     it.each([
       [/by date added \(newest\)/i, [2, 1, 3]],

src/editors/containers/VideoUploadEditor/VideoUploader.jsx

@@ -8,7 +8,6 @@ import { ArrowForward, FileUpload, Close } from '@edx/paragon/icons';
 import { useDispatch } from 'react-redux';
 import { thunkActions } from '../../data/redux';
 import * as hooks from './hooks';
-import * as editorHooks from '../EditorContainer/hooks';
 import messages from './messages';
 
 const URLUploader = () => {
@@ -58,10 +57,10 @@ const URLUploader = () => {
   );
 };
 
-export const VideoUploader = ({ setLoading, onClose }) => {
+export const VideoUploader = ({ setLoading }) => {
   const dispatch = useDispatch();
   const intl = useIntl();
-  const handleCancel = editorHooks.handleCancel({ onClose });
+  const goBack = hooks.useHistoryGoBack();
 
   const handleProcessUpload = ({ fileData }) => {
     dispatch(thunkActions.video.uploadVideo({
@@ -79,7 +78,7 @@ export const VideoUploader = ({ setLoading, onClose }) => {
           alt={intl.formatMessage(messages.closeButtonAltText)}
           src={Close}
           iconAs={Icon}
-          onClick={handleCancel}
+          onClick={goBack}
         />
       </div>
       <Dropzone
@@ -93,7 +92,6 @@ export const VideoUploader = ({ setLoading, onClose }) => {
 
 VideoUploader.propTypes = {
   setLoading: PropTypes.func.isRequired,
-  onClose: PropTypes.func.isRequired,
 };
 
 export default VideoUploader;

src/editors/containers/VideoUploadEditor/hooks.js

@@ -31,8 +31,11 @@ export const useUploadVideo = async ({
   }));
 };
 
+export const useHistoryGoBack = () => (() => window.history.back());
+
 export default {
   postUploadRedirect,
   onVideoUpload,
   useUploadVideo,
+  useHistoryGoBack,
 };

src/editors/containers/VideoUploadEditor/index.jsx

@@ -1,24 +1,19 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Spinner } from '@edx/paragon';
 import './index.scss';
 import messages from './messages';
 import { VideoUploader } from './VideoUploader';
 
-export const VideoUploadEditor = (
-  {
-    onClose,
-  },
-) => {
+export const VideoUploadEditor = () => {
   const [loading, setLoading] = React.useState(false);
   const intl = useIntl();
 
   return (
     <div>
       {(!loading) ? (
         <div className="d-flex marked-area flex-column p-3">
-          <VideoUploader setLoading={setLoading} onClose={onClose} />
+          <VideoUploader setLoading={setLoading} />
         </div>
       ) : (
         <div className="text-center p-6">
@@ -33,8 +28,4 @@ export const VideoUploadEditor = (
   );
 };
 
-VideoUploadEditor.propTypes = {
-  onClose: PropTypes.func.isRequired,
-};
-
 export default VideoUploadEditor;

src/editors/containers/VideoUploadEditor/index.test.jsx

@@ -13,13 +13,12 @@ jest.unmock('@edx/paragon');
 jest.unmock('@edx/paragon/icons');
 
 describe('VideoUploadEditor', () => {
-  const onCloseMock = jest.fn();
   let store;
 
-  const renderComponent = async (storeParam, onCloseMockParam) => render(
+  const renderComponent = async (storeParam) => render(
     <AppProvider store={storeParam}>
       <IntlProvider locale="en">
-        <VideoUploadEditor onClose={onCloseMockParam} />
+        <VideoUploadEditor />
       </IntlProvider>,
     </AppProvider>,
   );
@@ -45,14 +44,20 @@ describe('VideoUploadEditor', () => {
   });
 
   it('renders as expected with default behavior', async () => {
-    expect(await renderComponent(store, onCloseMock)).toMatchSnapshot();
+    expect(await renderComponent(store)).toMatchSnapshot();
   });
 
-  it('calls onClose when close button is clicked', async () => {
-    const container = await renderComponent(store, onCloseMock);
+  it('calls window.history.back when close button is clicked', async () => {
+    const container = await renderComponent(store);
     const closeButton = container.getAllByRole('button', { name: /close/i });
+    const oldHistoryBack = window.history.back;
+    window.history.back = jest.fn();
+
     expect(closeButton).toHaveLength(1);
+    expect(window.history.back).not.toHaveBeenCalled();
     closeButton.forEach((button) => fireEvent.click(button));
-    expect(onCloseMock).toHaveBeenCalled();
+    expect(window.history.back).toHaveBeenCalled();
+
+    window.history.back = oldHistoryBack;
   });
 });