diff --git a/src/editors/VideoSelector.jsx b/src/editors/VideoSelector.jsx index ae5961f73..a427eb1e6 100644 --- a/src/editors/VideoSelector.jsx +++ b/src/editors/VideoSelector.jsx @@ -5,6 +5,7 @@ import VideoGallery from './containers/VideoGallery'; import * as hooks from './hooks'; export const VideoSelector = ({ + blockId, learningContextId, lmsEndpointUrl, studioEndpointUrl, @@ -13,7 +14,7 @@ export const VideoSelector = ({ hooks.initializeApp({ dispatch, data: { - blockId: '', + blockId, blockType: 'video', learningContextId, lmsEndpointUrl, @@ -26,6 +27,7 @@ export const VideoSelector = ({ }; VideoSelector.propTypes = { + blockId: PropTypes.string.isRequired, learningContextId: PropTypes.string.isRequired, lmsEndpointUrl: PropTypes.string.isRequired, studioEndpointUrl: PropTypes.string.isRequired, diff --git a/src/editors/VideoSelector.test.jsx b/src/editors/VideoSelector.test.jsx index fa518a0cb..69c3b6034 100644 --- a/src/editors/VideoSelector.test.jsx +++ b/src/editors/VideoSelector.test.jsx @@ -11,13 +11,13 @@ jest.mock('./hooks', () => ({ jest.mock('./containers/VideoGallery', () => 'VideoGallery'); const props = { + blockId: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4', learningContextId: 'course-v1:edX+DemoX+Demo_Course', lmsEndpointUrl: 'evenfakerurl.com', studioEndpointUrl: 'fakeurl.com', }; const initData = { - blockId: '', blockType: 'video', ...props, }; diff --git a/src/editors/VideoSelectorPage.jsx b/src/editors/VideoSelectorPage.jsx index 5f754b46c..0d9609b04 100644 --- a/src/editors/VideoSelectorPage.jsx +++ b/src/editors/VideoSelectorPage.jsx @@ -6,6 +6,7 @@ import VideoSelector from './VideoSelector'; import store from './data/store'; const VideoSelectorPage = ({ + blockId, courseId, lmsEndpointUrl, studioEndpointUrl, @@ -19,6 +20,7 @@ const VideoSelectorPage = ({ > React.useState(val), searchString: (val) => React.useState(val), @@ -91,6 +100,8 @@ export const videoListProps = ({ searchSortProps, videos }) => { setShowSizeError, ] = module.state.showSizeError(false); const filteredList = module.filterList({ ...searchSortProps, videos }); + const learningContextId = useSelector(selectors.app.learningContextId); + const blockId = useSelector(selectors.app.blockId); return { galleryError: { show: showSelectVideoError, @@ -116,8 +127,10 @@ export const videoListProps = ({ searchSortProps, videos }) => { height: '100%', }, selectBtnProps: { - onclick: () => { - // TODO Update this when implementing the selection feature + onClick: () => { + // TODO save the metadata of the video on the block to fill it into the cideo editor + + navigateTo(`/course/${learningContextId}/editor/video/${blockId}`); }, }, }; @@ -135,6 +148,14 @@ export const fileInputProps = () => { }; }; +export const handleCancel = () => ( + navigateCallback({ + destination: useSelector(selectors.app.returnUrl), + analytics: useSelector(selectors.app.analytics), + analyticsEvent: analyticsEvt.videoGalleryCancelClick, + }) +); + export const buildVideos = ({ rawVideos }) => { let videos = []; const rawVideoList = Object.values(rawVideos); @@ -191,4 +212,5 @@ export const videoProps = ({ videos }) => { export default { videoProps, buildVideos, + handleCancel, }; diff --git a/src/editors/containers/VideoGallery/hooks.test.js b/src/editors/containers/VideoGallery/hooks.test.js index d3ad83e97..3dd163636 100644 --- a/src/editors/containers/VideoGallery/hooks.test.js +++ b/src/editors/containers/VideoGallery/hooks.test.js @@ -1,7 +1,11 @@ +import * as reactRedux from 'react-redux'; import * as hooks from './hooks'; import { filterKeys, sortKeys } from './utils'; import { MockUseState } from '../../../testUtils'; import { keyStore } from '../../utils'; +import * as appHooks from '../../hooks'; +import { selectors } from '../../data/redux'; +import analyticsEvt from '../../data/constants/analyticsEvt'; jest.mock('react', () => ({ ...jest.requireActual('react'), @@ -16,9 +20,24 @@ jest.mock('react-redux', () => { ...jest.requireActual('react-redux'), dispatch: dispatchFn, useDispatch: jest.fn(() => dispatchFn), + useSelector: jest.fn(), }; }); +jest.mock('../../data/redux', () => ({ + selectors: { + app: { + returnUrl: 'returnUrl', + analytics: 'analytics', + }, + }, +})); + +jest.mock('../../hooks', () => ({ + ...jest.requireActual('../../hooks'), + navigateCallback: jest.fn((args) => ({ navigateCallback: args })), +})); + const state = new MockUseState(hooks); const hookKeys = keyStore(hooks); let hook; @@ -250,4 +269,15 @@ describe('VideoGallery hooks', () => { expect(hook.selectBtnProps).toEqual(videoList.selectBtnProps); }); }); + describe('handleCancel', () => { + it('calls navigateCallback', () => { + expect(hooks.handleCancel()).toEqual( + appHooks.navigateCallback({ + destination: reactRedux.useSelector(selectors.app.returnUrl), + analyticsEvent: analyticsEvt.videoGalleryCancelClick, + analytics: reactRedux.useSelector(selectors.app.analytics), + }), + ); + }); + }); }); diff --git a/src/editors/containers/VideoGallery/index.jsx b/src/editors/containers/VideoGallery/index.jsx index 8ea788349..ac51e48de 100644 --- a/src/editors/containers/VideoGallery/index.jsx +++ b/src/editors/containers/VideoGallery/index.jsx @@ -24,6 +24,7 @@ export const VideoGallery = ({ searchSortProps, selectBtnProps, } = hooks.videoProps({ videos }); + const handleCancel = hooks.handleCancel(); const modalMessages = { confirmMsg: messages.selectVideoButtonlabel, @@ -38,7 +39,7 @@ export const VideoGallery = ({ { /* TODO */ }, + close: handleCancel, size: 'fullscreen', isFullscreenScroll: false, galleryError, diff --git a/src/editors/containers/VideoGallery/index.test.jsx b/src/editors/containers/VideoGallery/index.test.jsx index 31d3896ba..8acd355f0 100644 --- a/src/editors/containers/VideoGallery/index.test.jsx +++ b/src/editors/containers/VideoGallery/index.test.jsx @@ -39,6 +39,7 @@ jest.mock('./hooks', () => ({ searchSortProps: { search: 'sortProps' }, selectBtnProps: { select: 'btnProps' }, })), + handleCancel: jest.fn(), })); jest.mock('../../data/redux', () => ({ @@ -51,6 +52,11 @@ jest.mock('../../data/redux', () => ({ }, })); +jest.mock('../../hooks', () => ({ + ...jest.requireActual('../../hooks'), + navigateCallback: jest.fn((args) => ({ navigateCallback: args })), +})); + describe('VideoGallery', () => { describe('component', () => { const props = { diff --git a/src/editors/data/constants/analyticsEvt.js b/src/editors/data/constants/analyticsEvt.js index ef3099002..1b201956d 100644 --- a/src/editors/data/constants/analyticsEvt.js +++ b/src/editors/data/constants/analyticsEvt.js @@ -1,6 +1,7 @@ export const analyticsEvt = { editorSaveClick: 'edx.ui.authoring.editor.save', editorCancelClick: 'edx.ui.authoring.editor.cancel', + videoGalleryCancelClick: 'edx.ui.authoring.videogallery.cancel', }; export default analyticsEvt;