feat: Adding blockId to the Gallery. Adding cancel and next navigation

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,

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,
 };

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 = ({
     >
       <VideoSelector
         {...{
+          blockId,
           learningContextId: courseId,
           lmsEndpointUrl,
           studioEndpointUrl,
@@ -29,12 +31,14 @@ const VideoSelectorPage = ({
 );
 
 VideoSelectorPage.defaultProps = {
+  blockId: null,
   courseId: null,
   lmsEndpointUrl: null,
   studioEndpointUrl: null,
 };
 
 VideoSelectorPage.propTypes = {
+  blockId: PropTypes.string,
   courseId: PropTypes.string,
   lmsEndpointUrl: PropTypes.string,
   studioEndpointUrl: PropTypes.string,

src/editors/VideoSelectorPage.test.jsx

@@ -3,6 +3,7 @@ import { shallow } from 'enzyme';
 import VideoSelectorPage from './VideoSelectorPage';
 
 const props = {
+  blockId: 'block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4',
   courseId: 'course-v1:edX+DemoX+Demo_Course',
   lmsEndpointUrl: 'evenfakerurl.com',
   studioEndpointUrl: 'fakeurl.com',

src/editors/__snapshots__/VideoSelectorPage.test.jsx.snap

@@ -17,6 +17,7 @@ exports[`Video Selector Page snapshots rendering correctly with expected Input 1
     studioEndpointUrl="fakeurl.com"
   >
     <VideoSelector
+      blockId="block-v1:edX+DemoX+Demo_Course+type@html+block@030e35c4756a4ddc8d40b95fbbfff4d4"
       learningContextId="course-v1:edX+DemoX+Demo_Course"
       lmsEndpointUrl="evenfakerurl.com"
       studioEndpointUrl="fakeurl.com"
@@ -42,6 +43,7 @@ exports[`Video Selector Page snapshots rendering with props to null 1`] = `
     studioEndpointUrl={null}
   >
     <VideoSelector
+      blockId={null}
       learningContextId={null}
       lmsEndpointUrl={null}
       studioEndpointUrl={null}

src/editors/containers/VideoGallery/hooks.js

@@ -1,6 +1,10 @@
 import React from 'react';
+import { useSelector } from 'react-redux';
 import * as module from './hooks';
 import messages from './messages';
+import * as appHooks from '../../hooks';
+import { selectors } from '../../data/redux';
+import analyticsEvt from '../../data/constants/analyticsEvt';
 import {
   filterKeys,
   filterMessages,
@@ -9,6 +13,11 @@ import {
   sortFunctions,
 } from './utils';
 
+export const {
+  navigateCallback,
+  navigateTo,
+} = appHooks;
+
 export const state = {
   highlighted: (val) => 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,
 };

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),
+        }),
+      );
+    });
+  });
 });

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 = ({
       <SelectionModal
         {...{
           isOpen: true,
-          close: () => { /* TODO */ },
+          close: handleCancel,
           size: 'fullscreen',
           isFullscreenScroll: false,
           galleryError,

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 = {

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;