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

Author: ChrisChV

src/course-outline/CourseOutline.tsx

@@ -1,6 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { getConfig } from '@edx/frontend-platform';
 import {
   Container,
   Row,
@@ -69,6 +68,7 @@ import OutlineAddChildButtons from './OutlineAddChildButtons';
 import { OutlineSidebarProvider } from './outline-sidebar/OutlineSidebarContext';
 import { StatusBar } from './status-bar/StatusBar';
 import { LegacyStatusBar } from './status-bar/LegacyStatusBar';
+import { isOutlineNewDesignEnabled } from './utils';
 
 const CourseOutline = () => {
   const intl = useIntl();
@@ -148,7 +148,7 @@ const CourseOutline = () => {
 
   // Show the new actions bar if it is enabled in the configuration.
   // This is a temporary flag until the new design feature is fully implemented.
-  const showNewActionsBar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
+  const showNewActionsBar = isOutlineNewDesignEnabled();
   // Use `setToastMessage` to show the toast.
   const [toastMessage, setToastMessage] = useState<string | null>(null);
 

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 (tabbing and select with keyboard) since the
+        `SortableItem` component handles that for the whole `{Container}Card`.
+        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 truncate-1-line 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/OutlineSidebar.tsx

@@ -1,15 +1,14 @@
-import { getConfig } from '@edx/frontend-platform';
 import { breakpoints } from '@openedx/paragon';
 import { useMediaQuery } from 'react-responsive';
 
 import { Sidebar } from '@src/generic/sidebar';
 
 import OutlineHelpSidebar from './OutlineHelpSidebar';
 import { useOutlineSidebarContext } from './OutlineSidebarContext';
+import { isOutlineNewDesignEnabled } from '../utils';
 
 const OutlineSideBar = () => {
   const isMedium = useMediaQuery({ maxWidth: breakpoints.medium.maxWidth });
-  const showNewSidebar = getConfig().ENABLE_COURSE_OUTLINE_NEW_DESIGN?.toString().toLowerCase() === 'true';
 
   const {
     currentPageKey,
@@ -20,7 +19,7 @@ const OutlineSideBar = () => {
   } = useOutlineSidebarContext();
 
   // Returns the previous help sidebar component if the waffle flag is disabled
-  if (!showNewSidebar) {
+  if (!isOutlineNewDesignEnabled()) {
     // On screens smaller than medium, the help sidebar is shown below the course outline
     const colSpan = isMedium ? 'col-12' : 'col-3';
     return (

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

@@ -15,6 +15,7 @@ import { OutlineInfoSidebar } from './OutlineInfoSidebar';
 
 import messages from './messages';
 import { AddSidebar } from './AddSidebar';
+import { isOutlineNewDesignEnabled } from '../utils';
 
 export type OutlineSidebarPageKeys = 'help' | 'info' | 'add';
 export type OutlineSidebarPages = Record<OutlineSidebarPageKeys, SidebarPage>;
@@ -26,6 +27,8 @@ interface OutlineSidebarContextData {
   open: () => void;
   toggle: () => void;
   sidebarPages: OutlineSidebarPages;
+  selectedContainerId?: string;
+  openContainerInfoSidebar: (containerId: string) => void;
 }
 
 const OutlineSidebarContext = createContext<OutlineSidebarContextData | undefined>(undefined);
@@ -36,6 +39,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 (isOutlineNewDesignEnabled()) {
+      setSelectedContainerId(containerId);
+    }
+  }, [setSelectedContainerId]);
+
   const setCurrentPageKey = useCallback((pageKey: OutlineSidebarPageKeys) => {
     setCurrentPageKeyState(pageKey);
     open();
@@ -68,6 +79,8 @@ export const OutlineSidebarProvider = ({ children }: { children?: React.ReactNod
       isOpen,
       open,
       toggle,
+      selectedContainerId,
+      openContainerInfoSidebar,
     }),
     [
       currentPageKey,
@@ -76,6 +89,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();
@@ -116,6 +118,7 @@ const renderComponent = (props?: object, entry = '/course/:courseId') => render(
     routerProps: {
       initialEntries: [entry],
     },
+    extraWrapper: OutlineSidebarProvider,
   },
 );
 
@@ -129,6 +132,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', () => {