feat: Make selectable Section, Subsection, unit cards in Course Outline

Author: ChrisChV

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

@@ -0,0 +1,56 @@
+import { createContext, useCallback, useContext, useMemo, useState } from "react";
+
+export type SidebarContextData = {
+  selectedContainerId?: string;
+  openContainerInfoSidebar: (containerId: string) => void; 
+};
+
+/**
+ * Course Outline Sidebar Context.
+ *
+ * Get this using `useSidebarContext()`
+ *
+ */
+const SidebarContext = createContext<SidebarContextData | undefined>(undefined);
+
+type SidebarProviderProps = {
+  children?: React.ReactNode;
+};
+
+export const SidebarProvider = ({ children }: SidebarProviderProps) => {
+  const [ selectedContainerId, setSelectedContainerId ] = useState<string | undefined>();
+
+  const openContainerInfoSidebar = useCallback((containerId: string) => {
+    setSelectedContainerId(containerId);
+  }, [setSelectedContainerId]);
+
+  const context = useMemo<SidebarContextData>(() => {
+    const contextValue = {
+      selectedContainerId,
+      openContainerInfoSidebar,  
+    };
+
+    return contextValue;
+  }, [
+    selectedContainerId,
+    openContainerInfoSidebar,
+  ]);
+
+  return (
+    <SidebarContext.Provider value={context}>
+      {children}
+    </SidebarContext.Provider>
+  );
+};
+
+export function useSidebarContext(): SidebarContextData {
+  const ctx = useContext(SidebarContext);
+  if (ctx === undefined) {
+    /* istanbul ignore next */
+    return {
+      selectedContainerId: undefined,
+      openContainerInfoSidebar: () => {},
+    };
+  }
+  return ctx;
+}

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/section-card/SectionCard.tsx

@@ -29,6 +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';
 
 interface SectionCardProps {
   section: XBlock,
@@ -77,6 +78,7 @@ const SectionCard = ({
   const intl = useIntl();
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
+  const { selectedContainerId, openContainerInfoSidebar } = useSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === section.id;
@@ -269,6 +271,12 @@ const SectionCard = ({
 
   const isDraggable = actions.draggable && (actions.allowMoveUp || actions.allowMoveDown);
 
+  const onClickCard = useCallback((e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      openContainerInfoSidebar(section.id);
+    }
+  }, [openContainerInfoSidebar]);
+
   return (
     <>
       <SortableItem
@@ -284,9 +292,15 @@ const SectionCard = ({
           padding: '1.75rem',
           ...borderStyle,
         }}
+        onClick={onClickCard}
       >
         <div
-          className={`section-card ${isScrolledToElement ? 'highlight' : ''}`}
+          className={classNames('section-card',
+            {
+              'highlight': isScrolledToElement,
+              'outline-card-selected': section.id === selectedContainerId,
+            }
+          )}
           data-testid="section-card"
           ref={currentRef}
         >

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

@@ -30,6 +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';
 
 interface SubsectionCardProps {
   section: XBlock,
@@ -88,6 +89,7 @@ const SubsectionCard = ({
   const intl = useIntl();
   const dispatch = useDispatch();
   const { activeId, overId } = useContext(DragContext);
+  const { selectedContainerId, openContainerInfoSidebar } = useSidebarContext();
   const [searchParams] = useSearchParams();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === subsection.id;
@@ -269,6 +271,12 @@ const SubsectionCard = ({
     closeAddLibraryUnitModal();
   }, [id, onAddUnitFromLibrary, closeAddLibraryUnitModal]);
 
+  const onClickCard = useCallback((e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      openContainerInfoSidebar(subsection.id);
+    }
+  }, [openContainerInfoSidebar]);
+
   return (
     <>
       <SortableItem
@@ -286,9 +294,15 @@ const SubsectionCard = ({
           background: '#f8f7f6',
           ...borderStyle,
         }}
+        onClick={onClickCard}
       >
         <div
-          className={`subsection-card ${isScrolledToElement ? 'highlight' : ''}`}
+          className={classNames('subsection-card',
+            {
+              'highlight': isScrolledToElement,
+              'outline-card-selected': subsection.id === selectedContainerId,
+            }
+          )}
           data-testid="subsection-card"
           ref={currentRef}
         >

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

@@ -4,6 +4,7 @@ import {
   useMemo,
   useRef,
 } from 'react';
+import classNames from 'classnames';
 import { useDispatch } from 'react-redux';
 import { useToggle } from '@openedx/paragon';
 import { isEmpty } from 'lodash';
@@ -24,6 +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';
 
 interface UnitCardProps {
   unit: XBlock;
@@ -70,6 +72,7 @@ const UnitCard = ({
   const currentRef = useRef(null);
   const dispatch = useDispatch();
   const [searchParams] = useSearchParams();
+  const { selectedContainerId, openContainerInfoSidebar } = useSidebarContext();
   const locatorId = searchParams.get('show');
   const isScrolledToElement = locatorId === unit.id;
   const [isFormOpen, openForm, closeForm] = useToggle(false);
@@ -213,6 +216,12 @@ const UnitCard = ({
       && !subsection.upstreamInfo?.upstreamRef
   );
 
+  const onClickCard = useCallback((e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      openContainerInfoSidebar(unit.id);
+    }
+  }, [openContainerInfoSidebar]);
+
   return (
     <>
       <SortableItem
@@ -229,9 +238,15 @@ const UnitCard = ({
           background: '#fdfdfd',
           ...borderStyle,
         }}
+        onClick={onClickCard}
       >
         <div
-          className={`unit-card ${isScrolledToElement ? 'highlight' : ''}`}
+          className={classNames('unit-card',
+            {
+              'highlight': isScrolledToElement,
+              'outline-card-selected': unit.id === selectedContainerId,
+            }
+          )}
           data-testid="unit-card"
           ref={currentRef}
         >

src/index.scss

@@ -39,6 +39,11 @@ div.row:has(> div > div.highlight) {
   animation-timing-function: cubic-bezier(1, 0, .72, .04);
 }
 
+// To apply selection style to selected Section/Subsecion/Units, in the Course Outline
+div.row:has(> div > div.outline-card-selected) {
+  box-shadow: 0 0 3px 3px var(--pgn-color-primary-500) !important;
+}
+
 // To apply the glow effect to the selected xblock, in the Unit Outline
 div.xblock-highlight {
   animation: 5s glow;