[FAL-3383] Implement new video UX flow on new video editor (#498)

* feat: Video Gallery URL updated to match to the new flow needs

* chore: Video Gallery Url updated and blockId added

src/CourseAuthoringRoutes.jsx

@@ -35,18 +35,18 @@ const CourseAuthoringRoutes = ({ courseId }) => {
         <PageRoute path={`${path}/proctored-exam-settings`}>
           <ProctoredExamSettings courseId={courseId} />
         </PageRoute>
-        <PageRoute path={`${path}/editor/:blockType/:blockId?`}>
+        <PageRoute path={`${path}/editor/course-videos/:blockId`}>
           {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
             && (
-            <EditorContainer
+            <VideoSelectorContainer
               courseId={courseId}
             />
             )}
         </PageRoute>
-        <PageRoute path={`${path}/videos`}>
+        <PageRoute path={`${path}/editor/:blockType/:blockId?`}>
           {process.env.ENABLE_NEW_EDITOR_PAGES === 'true'
             && (
-            <VideoSelectorContainer
+            <EditorContainer
               courseId={courseId}
             />
             )}

src/CourseAuthoringRoutes.test.jsx

@@ -106,7 +106,7 @@ describe('<CourseAuthoringRoutes>', () => {
   it('renders the VideoSelectorContainer component when the course videos route is active', () => {
     render(
       <AppProvider store={store}>
-        <MemoryRouter initialEntries={[`/course/${courseId}/videos`]}>
+        <MemoryRouter initialEntries={[`/course/${courseId}/editor/course-videos/block-id`]}>
           <CourseAuthoringRoutes courseId={courseId} />
         </MemoryRouter>
       </AppProvider>,

src/selectors/VideoSelectorContainer.jsx

@@ -1,19 +1,24 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { useParams } from 'react-router';
 import { VideoSelectorPage } from '@edx/frontend-lib-content-components';
 import { getConfig } from '@edx/frontend-platform';
 
 const VideoSelectorContainer = ({
   courseId,
-}) => (
-  <div className="selector-page">
-    <VideoSelectorPage
-      courseId={courseId}
-      studioEndpointUrl={getConfig().STUDIO_BASE_URL}
-      lmsEndpointUrl={getConfig().LMS_BASE_URL}
-    />
-  </div>
+}) => {
+  const { blockId } = useParams();
+  return (
+    <div className="selector-page">
+      <VideoSelectorPage
+        blockId={blockId}
+        courseId={courseId}
+        studioEndpointUrl={getConfig().STUDIO_BASE_URL}
+        lmsEndpointUrl={getConfig().LMS_BASE_URL}
+      />
+    </div>
   );
+};
 
 VideoSelectorContainer.propTypes = {
   courseId: PropTypes.string.isRequired,

src/selectors/__snapshots__/VideoSelectorContainer.test.jsx.snap

@@ -5,6 +5,7 @@ exports[`Video Selector Container snapshots rendering correctly with expected In
   className="selector-page"
 >
   <VideoSelectorPage
+    blockId="company-id1"
     courseId="cOuRsEId"
     lmsEndpointUrl="http://localhost:18000"
     studioEndpointUrl="http://localhost:18010"