feat: Put selectable cards behind the new design flag

Author: ChrisChV

src/course-outline/common/context/SidebarContext.tsx

@@ -6,6 +6,7 @@ import {
   useState,
 } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
+import { getConfig } from '@edx/frontend-platform';
 import { useToggle } from '@openedx/paragon';
 import { HelpOutline, Info } from '@openedx/paragon/icons';
 
@@ -25,6 +26,8 @@ interface OutlineSidebarContextData {
   open: () => void;
   toggle: () => void;
   sidebarPages: OutlineSidebarPages;
+  selectedContainerId?: string;
+  openContainerInfoSidebar: (containerId: string) => void;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
@@ -35,6 +38,14 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
   const [currentPageKey, setCurrentPageKeyState] = useState<OutlineSidebarPageKeys>('info');
   const [isOpen, open, , toggle] = useToggle(true);
 
+  const [selectedContainerId, setSelectedContainerId] = useState<string | undefined>();
+
+  const openContainerInfoSidebar = useCallback((containerId: string) => {
+    if (getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true') {
+      setSelectedContainerId(containerId);
+    }
+  }, [setSelectedContainerId]);
+
   const setCurrentPageKey = useCallback((pageKey: OutlineSidebarPageKeys) => {
     setCurrentPageKeyState(pageKey);
     open();
@@ -61,6 +72,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       isOpen,
       open,
       toggle,
+      selectedContainerId,
+      openContainerInfoSidebar,
     }),
     [
       currentPageKey,
@@ -69,6 +82,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       isOpen,
       open,
       toggle,
+      selectedContainerId,
+      openContainerInfoSidebar,
     ],
   );
 

src/course-outline/outline-sidebar/OutlineSidebarContext.tsx

@@ -1,9 +1,10 @@
+import { getConfig, setConfig } from '@edx/frontend-platform';
 import {
   act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import SectionCard from './SectionCard';
-import { SidebarProvider } from '../common/context/SidebarContext';
+import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -83,7 +84,7 @@ const section = {
 const onEditSectionSubmit = jest.fn();
 
 const renderComponent = (props?: object, entry = '/course/:courseId') => render(
-  <SidebarProvider>
+  <OutlineSidebarProvider>
     <SectionCard
       section={section}
       index={1}
@@ -106,7 +107,7 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     >
       <span>children</span>
     </SectionCard>
-  </SidebarProvider>,
+  </OutlineSidebarProvider>,
   {
     path: '/course/:courseId',
     params: { courseId: '5' },
@@ -133,6 +134,10 @@ describe('<SectionCard />', () => {
   });
 
   it('render SectionCard component in selected state', () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
+    });
     const { container } = renderComponent();
 
     expect(screen.getByTestId('section-card-header')).toBeInTheDocument();

src/course-outline/section-card/SectionCard.test.tsx

@@ -29,7 +29,7 @@ import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import type { XBlock } from '@src/data/types';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import messages from './messages';
-import { useSidebarContext } from '../common/context/SidebarContext';
+import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 
 interface SectionCardProps {
   section: XBlock,
@@ -78,7 +78,7 @@ const SectionCard = ({
   const intl = useIntl();
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
-  const { selectedContainerId, openContainerInfoSidebar } = useSidebarContext();
+  const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === section.id;

src/course-outline/section-card/SectionCard.tsx

@@ -1,11 +1,12 @@
+import { getConfig, setConfig } from '@edx/frontend-platform';
 import { COMPONENT_TYPES } from '@src/generic/block-type-utils/constants';
 import {
   act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 import { XBlock } from '@src/data/types';
 import cardHeaderMessages from '../card-header/messages';
 import SubsectionCard from './SubsectionCard';
-import { SidebarProvider } from '../common/context/SidebarContext';
+import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
 
 let store;
 const containerKey = 'lct:org:lib:unit:1';
@@ -107,7 +108,7 @@ const section: XBlock = {
 const onEditSubectionSubmit = jest.fn();
 
 const renderComponent = (props?: object, entry = '/course/:courseId') => render(
-  <SidebarProvider>
+  <OutlineSidebarProvider>
     <SubsectionCard
       section={section}
       subsection={subsection}
@@ -131,7 +132,7 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     >
       <span>children</span>
     </SubsectionCard>
-  </SidebarProvider>,
+  </OutlineSidebarProvider>,
   {
     path: '/course/:courseId',
     params: { courseId: '5' },
@@ -158,6 +159,10 @@ describe('<SubsectionCard />', () => {
   });
 
   it('render SubsectionCard component in selected state', () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
+    });
     const { container } = renderComponent();
 
     expect(screen.getByTestId('subsection-card-header')).toBeInTheDocument();

src/course-outline/subsection-card/SubsectionCard.test.tsx

@@ -30,7 +30,7 @@ import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import type { XBlock } from '@src/data/types';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import messages from './messages';
-import { useSidebarContext } from '../common/context/SidebarContext';
+import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 
 interface SubsectionCardProps {
   section: XBlock,
@@ -89,7 +89,7 @@ const SubsectionCard = ({
   const intl = useIntl();
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
-  const { selectedContainerId, openContainerInfoSidebar } = useSidebarContext();
+  const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === subsection.id;

src/course-outline/subsection-card/SubsectionCard.tsx

@@ -1,11 +1,12 @@
+import { getConfig, setConfig } from '@edx/frontend-platform';
 import {
   act, fireEvent, initializeMocks, render, screen, waitFor, within,
 } from '@src/testUtils';
 
 import { XBlock } from '@src/data/types';
 import UnitCard from './UnitCard';
 import cardMessages from '../card-header/messages';
-import { SidebarProvider } from '../common/context/SidebarContext';
+import { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -75,7 +76,7 @@ const unit = {
 } satisfies Partial<XBlock> as XBlock;
 
 const renderComponent = (props?: object) => render(
-  <SidebarProvider>
+  <OutlineSidebarProvider>
     <UnitCard
       section={section}
       subsection={subsection}
@@ -98,7 +99,7 @@ const renderComponent = (props?: object) => render(
       }}
       {...props}
     />
-  </SidebarProvider>,
+  </OutlineSidebarProvider>,
   {
     path: '/course/:courseId',
     params: { courseId: '5' },
@@ -125,6 +126,11 @@ describe('<UnitCard />', () => {
   });
 
   it('render UnitCard component in selected state', () => {
+    setConfig({
+      ...getConfig(),
+      ENABLE_COURSE_OUTLINE_NEW_DESIGN: 'true',
+    });
+
     const { container } = renderComponent();
 
     expect(screen.getByTestId('unit-card-header')).toBeInTheDocument();

src/course-outline/unit-card/UnitCard.test.tsx

@@ -25,7 +25,7 @@ import { UpstreamInfoIcon } from '@src/generic/upstream-info-icon';
 import { PreviewLibraryXBlockChanges } from '@src/course-unit/preview-changes';
 import { invalidateLinksQuery } from '@src/course-libraries/data/apiHooks';
 import type { XBlock } from '@src/data/types';
-import { useSidebarContext } from '../common/context/SidebarContext';
+import { useOutlineSidebarContext } from '../outline-sidebar/OutlineSidebarContext';
 
 interface UnitCardProps {
   unit: XBlock;
@@ -72,7 +72,7 @@ const UnitCard = ({
   const currentRef = useRef(null);
   const dispatch = useDispatch();
   const [searchParams] = useSearchParams();
-  const { selectedContainerId, openContainerInfoSidebar } = useSidebarContext();
+  const { selectedContainerId, openContainerInfoSidebar } = useOutlineSidebarContext();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === unit.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);