From 23593b44fe8a59941e72fb76818f37116487da30 Mon Sep 17 00:00:00 2001
From: XnpioChV <xnpiochv@gmail.com>
Date: Wed, 5 Apr 2023 18:35:11 -0500
Subject: [PATCH] chore: Error message on unselected video added & replace
 video button navigation added

---
 .../components/VideoEditorModal.jsx           | 26 ++++++++++++++---
 .../components/VideoSettingsModal/index.jsx   | 28 ++++++++++++++++++-
 .../containers/VideoEditor/messages.js        |  6 +++-
 src/editors/containers/VideoGallery/hooks.js  |  9 ++++--
 4 files changed, 60 insertions(+), 9 deletions(-)

diff --git a/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx b/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx
index 89df1bf81..836fe2d39 100644
--- a/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoEditorModal.jsx
@@ -1,18 +1,27 @@
 import React from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
-
-import { thunkActions } from '../../../data/redux';
+import * as appHooks from '../../../hooks';
+import { thunkActions, selectors } from '../../../data/redux';
 import VideoSettingsModal from './VideoSettingsModal';
 // import SelectVideoModal from './SelectVideoModal';
 import * as module from './VideoEditorModal';
 
+export const {
+  navigateTo,
+} = appHooks;
+
 export const hooks = {
   initialize: (dispatch) => {
     React.useEffect(() => {
       dispatch(thunkActions.video.loadVideoData());
     }, []);
   },
+  returnToGallery: () => {
+    const learningContextId = useSelector(selectors.app.learningContextId);
+    const blockId = useSelector(selectors.app.blockId);
+    return () => (navigateTo(`/course/${learningContextId}/editor/course-videos/${blockId}`));
+  },
 };
 
 const VideoEditorModal = ({
@@ -21,8 +30,17 @@ const VideoEditorModal = ({
 }) => {
   const dispatch = useDispatch();
   module.hooks.initialize(dispatch);
+  const searchParams = new URLSearchParams(document.location.search);
+  const showReturn = searchParams.get('return') !== null;
+  const onReturn = module.hooks.returnToGallery();
   return (
-    <VideoSettingsModal {...{ close, isOpen }} />
+    <VideoSettingsModal {...{
+      close,
+      isOpen,
+      showReturn,
+      onReturn,
+    }}
+    />
   );
   // TODO: add logic to show SelectVideoModal if no selection
 };
diff --git a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
index 3232d8804..f85269a7d 100644
--- a/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
+++ b/src/editors/containers/VideoEditor/components/VideoSettingsModal/index.jsx
@@ -1,4 +1,10 @@
 import React from 'react';
+import PropTypes from 'prop-types';
+import { Button } from '@edx/paragon';
+import { ArrowBackIos } from '@edx/paragon/icons';
+import {
+  FormattedMessage,
+} from '@edx/frontend-platform/i18n';
 
 // import VideoPreview from './components/VideoPreview';
 import ErrorSummary from './ErrorSummary';
@@ -11,9 +17,24 @@ import VideoSourceWidget from './components/VideoSourceWidget';
 import VideoPreviewWidget from './components/VideoPreviewWidget';
 import './index.scss';
 import SocialShareWidget from './components/SocialShareWidget';
+import messages from '../../messages';
 
-export const VideoSettingsModal = () => (
+export const VideoSettingsModal = ({
+  showReturn,
+  onReturn,
+}) => (
   <>
+    { showReturn && (
+      <Button
+        variant="tertiary"
+        iconBefore={ArrowBackIos}
+        className="mb-2 mb-sm-0"
+        size="sm"
+        onClick={onReturn}
+      >
+        <FormattedMessage {...messages.replaceVideoButtonLabel} />
+      </Button>
+    )}
     <ErrorSummary />
     <VideoPreviewWidget />
     <VideoSourceWidget />
@@ -26,4 +47,9 @@ export const VideoSettingsModal = () => (
   </>
 );
 
+VideoSettingsModal.propTypes = {
+  showReturn: PropTypes.bool.isRequired,
+  onReturn: PropTypes.func.isRequired,
+};
+
 export default VideoSettingsModal;
diff --git a/src/editors/containers/VideoEditor/messages.js b/src/editors/containers/VideoEditor/messages.js
index 515eb4493..c041f69e3 100644
--- a/src/editors/containers/VideoEditor/messages.js
+++ b/src/editors/containers/VideoEditor/messages.js
@@ -1,12 +1,16 @@
 import { defineMessages } from '@edx/frontend-platform/i18n';
 
 const messages = defineMessages({
-
   spinnerScreenReaderText: {
     id: 'authoring.videoEditor.spinnerScreenReaderText',
     defaultMessage: 'loading',
     description: 'Loading message for spinner screenreader text.',
   },
+  replaceVideoButtonLabel: {
+    id: 'authoring.videoEditor.replaceVideoButtonLabel',
+    defaultMessage: 'Replace video',
+    description: 'Text of the replace video button to return to the video gallery',
+  },
 });
 
 export default messages;
diff --git a/src/editors/containers/VideoGallery/hooks.js b/src/editors/containers/VideoGallery/hooks.js
index b7285df92..bebef53c9 100644
--- a/src/editors/containers/VideoGallery/hooks.js
+++ b/src/editors/containers/VideoGallery/hooks.js
@@ -128,9 +128,12 @@ export const videoListProps = ({ searchSortProps, videos }) => {
     },
     selectBtnProps: {
       onClick: () => {
-        // TODO save the metadata of the video on the block to fill it into the cideo editor
-
-        navigateTo(`/course/${learningContextId}/editor/video/${blockId}`);
+        if (highlighted) {
+          // TODO save the metadata of the video on the block to fill it into the cideo editor
+          navigateTo(`/course/${learningContextId}/editor/video/${blockId}?return=true`);
+        } else {
+          setShowSelectVideoError(true);
+        }
       },
     },
   };