feat: Enable view library menu in all container sidebars

Author: ChrisChV

src/course-outline/outline-sidebar/info-sidebar/SectionInfoSidebar.tsx

@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
+import { useNavigate } from 'react-router-dom';
 
 import { getItemIcon } from '@src/generic/block-type-utils';
 
@@ -10,13 +11,15 @@ import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { getLibraryId } from '@src/generic/key-utils';
 import { InfoSection } from './InfoSection';
 import messages from '../messages';
 import { PublishButon } from './PublishButon';
 import { canMoveSection } from '@src/course-outline/drag-helper/utils';
 
 export const SectionSidebar = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
   const { sectionId = '', index } = selectedContainerState ?? {};
@@ -65,7 +68,13 @@ export const SectionSidebar = () => {
           onClickMoveDown: () => handleMove(1),
           onClickUnlink: () => openUnlinkModal({ value: sectionData, sectionId }),
           onClickDelete: openDeleteModal,
-          onClickViewLibrary: () => {},
+          onClickViewLibrary: () => {
+            const upstreamRef = sectionData?.upstreamInfo?.upstreamRef;
+            if (upstreamRef) {
+              const libId = getLibraryId(upstreamRef);
+              navigate(`/library/${libId}/section/${upstreamRef}`);
+            }
+          },
         }}
       />
       {sectionData?.hasChanges && <PublishButon onClick={handlePublish} />}

src/course-outline/outline-sidebar/info-sidebar/SubsectionInfoSidebar.tsx

@@ -3,13 +3,15 @@ import { isEmpty } from 'lodash';
 
 import { useIntl } from '@edx/frontend-platform/i18n';
 import { Tab, Tabs } from '@openedx/paragon';
+import { useNavigate } from 'react-router-dom';
 
 import { getItemIcon } from '@src/generic/block-type-utils';
 import { SidebarTitle } from '@src/generic/sidebar';
 import { useCourseItemData } from '@src/course-outline/data/apiHooks';
 import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import { useOutlineSidebarContext } from '@src/course-outline/outline-sidebar/OutlineSidebarContext';
+import { getLibraryId } from '@src/generic/key-utils';
 import { possibleSubsectionMoves } from '@src/course-outline/drag-helper/utils';
 
 import { InfoSection } from './InfoSection';
@@ -24,6 +26,7 @@ interface Props {
 
 export const SubsectionSidebar = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const [tab, setTab] = useState<'info' | 'settings'>('info');
   const { clearSelection, selectedContainerState, setSelectedContainerState } = useOutlineSidebarContext();
   const { subsectionId = '', index, sectionIndex } = selectedContainerState ?? {};
@@ -110,7 +113,13 @@ export const SubsectionSidebar = () => {
             sectionId: selectedContainerState?.sectionId,
           }),
           onClickDelete: openDeleteModal,
-          onClickViewLibrary: () => {},
+          onClickViewLibrary: () => {
+            const upstreamRef = subsectionData?.upstreamInfo?.upstreamRef;
+            if (upstreamRef) {
+              const libId = getLibraryId(upstreamRef);
+              navigate(`/library/${libId}/subsection/${upstreamRef}`);
+            }
+          },
         }}
       />
       {subsectionData?.hasChanges && <PublishButon onClick={handlePublish} />}

src/course-outline/outline-sidebar/info-sidebar/UnitInfoSidebar.tsx

@@ -18,7 +18,8 @@ import Loading from '@src/generic/Loading';
 import { useCourseAuthoringContext } from '@src/CourseAuthoringContext';
 import XBlockContainerIframe from '@src/course-unit/xblock-container-iframe';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { getLibraryId } from '@src/generic/key-utils';
 import { possibleUnitMoves } from '@src/course-outline/drag-helper/utils';
 import { useOutlineSidebarContext } from '../OutlineSidebarContext';
 import { PublishButon } from './PublishButon';
@@ -27,6 +28,7 @@ import { InfoSection } from './InfoSection';
 
 export const UnitSidebar = () => {
   const intl = useIntl();
+  const navigate = useNavigate();
   const [tab, setTab] = useState<'preview' | 'info' | 'settings'>('info');
   const { selectedContainerState, clearSelection, setSelectedContainerState } = useOutlineSidebarContext();
   const {
@@ -135,7 +137,13 @@ export const UnitSidebar = () => {
             subsectionId: selectedContainerState?.subsectionId,
           }),
           onClickDelete: openDeleteModal,
-          onClickViewLibrary: () => {},
+          onClickViewLibrary: () => {
+            const upstreamRef = unitData?.upstreamInfo?.upstreamRef;
+            if (upstreamRef) {
+              const libId = getLibraryId(upstreamRef);
+              navigate(`/library/${libId}/unit/${upstreamRef}`);
+            }
+          },
           onClickCopy: () => {},
           onClickCopyLocation: () => {},
         }}