feat: Make sections/subsections/units selectable in course outline [FC-0114]

src/course-outline/OutlineAddChildButtons.tsx

@@ -9,6 +9,7 @@ import messages from './messages';
 interface NewChildButtonsProps {
   handleNewButtonClick: () => void;
   handleUseFromLibraryClick: () => void;
+  onClickCard?: (e: React.MouseEvent) => void;
   childType: ContainerType;
   btnVariant?: string;
   btnClasses?: string;
@@ -18,6 +19,7 @@ interface NewChildButtonsProps {
 const OutlineAddChildButtons = ({
   handleNewButtonClick,
   handleUseFromLibraryClick,
+  onClickCard,
   childType,
   btnVariant = 'outline-primary',
   btnClasses = 'mt-4 border-gray-500 rounded-0',
@@ -59,7 +61,7 @@ const OutlineAddChildButtons = ({
   }
 
   return (
-    <Stack direction="horizontal" gap={3}>
+    <Stack direction="horizontal" gap={3} onClick={onClickCard}>
       <Button
         className={btnClasses}
         variant={btnVariant}

src/course-outline/card-header/CardHeader.tsx

@@ -11,6 +11,7 @@ import {
   Icon,
   IconButton,
   IconButtonWithTooltip,
+  Stack,
   useToggle,
 } from '@openedx/paragon';
 import {
@@ -48,6 +49,7 @@ interface CardHeaderProps {
   onClickMoveUp: () => void;
   onClickMoveDown: () => void;
   onClickCopy?: () => void;
+  onClickCard?: (e: React.MouseEvent) => void;
   titleComponent: ReactNode;
   namePrefix: string;
   proctoringExamConfigurationLink?: string,
@@ -90,6 +92,7 @@ const CardHeader = ({
   onClickMoveUp,
   onClickMoveDown,
   onClickCopy,
+  onClickCard,
   titleComponent,
   namePrefix,
   actions,
@@ -154,10 +157,16 @@ const CardHeader = ({
 
   return (
     <>
-      <div
+      {
+        /* This is a special case; we can skip accessibility here since the
+           {Container}Card handles that. This onClick allows the user to select the card
+           by clicking on white areas of this component. */
+      }
+      <div // eslint-disable-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events
         className="item-card-header"
         data-testid={`${namePrefix}-card-header`}
         ref={cardHeaderRef}
+        onClick={onClickCard}
       >
         {isFormOpen ? (
           <Form.Group className="m-0 w-75">
@@ -178,7 +187,7 @@ const CardHeader = ({
             />
           </Form.Group>
         ) : (
-          <>
+          <Stack direction="horizontal" gap={2}>
             {titleComponent}
             <IconButtonWithTooltip
               className="item-card-button-icon"
@@ -190,7 +199,7 @@ const CardHeader = ({
               // @ts-ignore
               disabled={isSaving}
             />
-          </>
+          </Stack>
         )}
         <div className="ml-auto d-flex">
           {(isVertical || isSequential) && (

src/course-outline/card-header/TitleButton.tsx

@@ -1,8 +1,7 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
 import {
-  Button,
-  OverlayTrigger,
-  Tooltip,
+  IconButtonWithTooltip,
+  Stack,
 } from '@openedx/paragon';
 import {
   ArrowDropDown as ArrowDownIcon,
@@ -29,32 +28,23 @@ const TitleButton = ({
   const titleTooltipMessage = intl.formatMessage(messages.expandTooltip);
 
   return (
-    <OverlayTrigger
-      placement="bottom"
-      overlay={(
-        <Tooltip
-          id={`${title}-${titleTooltipMessage}`}
-        >
-          {titleTooltipMessage}
-        </Tooltip>
-      )}
-    >
-      <Button
-        iconBefore={isExpanded ? ArrowDownIcon : ArrowRightIcon}
-        variant="tertiary"
+    <Stack direction="horizontal">
+      <IconButtonWithTooltip
+        src={isExpanded ? ArrowDownIcon : ArrowRightIcon}
         data-testid={`${namePrefix}-card-header__expanded-btn`}
+        alt={title}
+        tooltipContent={<div>{titleTooltipMessage}</div>}
         className="item-card-header__title-btn"
         onClick={onTitleClick}
-        title={title}
-      >
-        <div className="mr-2">
-          {prefixIcon}
-        </div>
-        <span className={`${namePrefix}-card-title mb-0 truncate-1-line`}>
-          {title}
-        </span>
-      </Button>
-    </OverlayTrigger>
+        size="inline"
+      />
+      <div className="mr-2">
+        {prefixIcon}
+      </div>
+      <span className={`${namePrefix}-card-title mb-0 truncate-1-line`}>
+        {title}
+      </span>
+    </Stack>
   );
 };
 

src/course-outline/card-header/TitleLink.tsx

@@ -26,7 +26,7 @@ const TitleLink = ({
       to={titleLink}
       title={title}
     >
-      <span className={`${namePrefix}-card-title mb-0 truncate-1-line text-left`}>
+      <span className={`${namePrefix}-card-title mb-0 text-left`}>
         {title}
       </span>
     </Button>

src/course-outline/drag-helper/SortableItem.tsx

@@ -21,6 +21,7 @@ interface SortableItemProps {
   isDraggable?: boolean;
   children: React.ReactNode;
   componentStyle?: object;
+  onClick?: (e: React.MouseEvent) => void;
 }
 
 const SortableItem = ({
@@ -30,6 +31,7 @@ const SortableItem = ({
   componentStyle,
   data,
   children,
+  onClick,
 }: SortableItemProps) => {
   const intl = useIntl();
   const {
@@ -66,8 +68,18 @@ const SortableItem = ({
   return (
     <Row
       ref={setNodeRef}
+      tabIndex={onClick ? 0 : -1}
       style={style}
       className="mx-0"
+      onClick={onClick}
+      onKeyDown={(e) => {
+        if (!onClick) { return; }
+
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault();
+          onClick(e);
+        }
+      }}
     >
       <Col className="extend-margin px-0">
         {children}

src/course-outline/outline-sidebar/OutlineSidebarContext.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/section-card/SectionCard.test.tsx

@@ -1,8 +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 { OutlineSidebarProvider } from '../outline-sidebar/OutlineSidebarContext';
 
 const mockUseAcceptLibraryBlockChanges = jest.fn();
 const mockUseIgnoreLibraryBlockChanges = jest.fn();
@@ -82,28 +84,30 @@ const section = {
 const onEditSectionSubmit = jest.fn();
 
 const renderComponent = (props?: object, entry = '/course/:courseId') => render(
-  <SectionCard
-    section={section}
-    index={1}
-    canMoveItem={jest.fn()}
-    onOrderChange={jest.fn()}
-    onOpenPublishModal={jest.fn()}
-    onOpenHighlightsModal={jest.fn()}
-    onOpenDeleteModal={jest.fn()}
-    onOpenUnlinkModal={jest.fn()}
-    onOpenConfigureModal={jest.fn()}
-    onEditSectionSubmit={onEditSectionSubmit}
-    onDuplicateSubmit={jest.fn()}
-    isSectionsExpanded
-    onNewSubsectionSubmit={jest.fn()}
-    isSelfPaced={false}
-    isCustomRelativeDatesActive={false}
-    onAddSubsectionFromLibrary={jest.fn()}
-    resetScrollState={jest.fn()}
-    {...props}
-  >
-    <span>children</span>
-  </SectionCard>,
+  <OutlineSidebarProvider>
+    <SectionCard
+      section={section}
+      index={1}
+      canMoveItem={jest.fn()}
+      onOrderChange={jest.fn()}
+      onOpenPublishModal={jest.fn()}
+      onOpenHighlightsModal={jest.fn()}
+      onOpenDeleteModal={jest.fn()}
+      onOpenUnlinkModal={jest.fn()}
+      onOpenConfigureModal={jest.fn()}
+      onEditSectionSubmit={onEditSectionSubmit}
+      onDuplicateSubmit={jest.fn()}
+      isSectionsExpanded
+      onNewSubsectionSubmit={jest.fn()}
+      isSelfPaced={false}
+      isCustomRelativeDatesActive={false}
+      onAddSubsectionFromLibrary={jest.fn()}
+      resetScrollState={jest.fn()}
+      {...props}
+    >
+      <span>children</span>
+    </SectionCard>
+  </OutlineSidebarProvider>,
   {
     path: '/course/:courseId',
     params: { courseId: '5' },
@@ -123,6 +127,32 @@ describe('<SectionCard />', () => {
 
     expect(screen.getByTestId('section-card-header')).toBeInTheDocument();
     expect(screen.getByTestId('section-card__content')).toBeInTheDocument();
+
+    // The card is not selected
+    const card = screen.getByTestId('section-card');
+    expect(card).not.toHaveClass('outline-card-selected');
+  });
+
+  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();
+
+    // The card is not selected
+    const card = screen.getByTestId('section-card');
+    expect(card).not.toHaveClass('outline-card-selected');
+
+    // Get the <Row> that contains the card and click it to select the card
+    const el = container.querySelector('div.row.mx-0') as HTMLInputElement;
+    expect(el).not.toBeNull();
+    fireEvent.click(el!);
+
+    // The card is selected
+    expect(card).toHaveClass('outline-card-selected');
   });
 
   it('expands/collapses the card when the expand button is clicked', () => {