Skip to content

feat(course-outline): add unit title link in expanded outline view - #103

Merged
abhalsod-sonata merged 2 commits into
release-ulmofrom
feat/LP-249
Jun 16, 2026
Merged

feat(course-outline): add unit title link in expanded outline view#103
abhalsod-sonata merged 2 commits into
release-ulmofrom
feat/LP-249

Conversation

@abhalsod-sonata

@abhalsod-sonata abhalsod-sonata commented Jun 12, 2026

Copy link
Copy Markdown
  • Updated TitleButton to support external and internal links, allowing the title to be clickable.
  • Added hover and focus styles for linked titles in CardHeader.scss.
  • Implemented tests to verify link rendering and interaction behavior in UnitCard.
  • Ensured that clicking the title link does not expand the unit card, while the expand button still functions as intended.

Description

This PR makes the unit title clickable in the expanded Course Outline view in Studio, allowing Course Authors to navigate directly to a unit without first expanding it.

TitleButton now accepts an optional titleLink prop:

  • When titleLink is not provided, the button renders exactly as before — clicking anywhere on it toggles expand/collapse.
  • When titleLink is provided:
    • The title text renders as a link — Hyperlink for absolute/external URLs, or a react-router-dom-backed Button (as={Link}) for internal routes — determined by a new isExternalTitleLink check (/^[a-z][a-z\d+\-.]*:/i).
    • A separate expand/collapse Button is overlaid across the full row (position-absolute, w-100 h-100, transparent background), so clicking anywhere except the title link toggles the unit's expanded state, while clicking the title navigates to the unit.
    • Both render paths now share a single ExpandIcon variable (previously an inline isExpanded ? ArrowDownIcon : ArrowRightIcon ternary) and a shared titleText element.

New --with-link modifier styles in CardHeader.scss:

  • Highlights the row background on hover/focus-within.
  • Underlines the title text on hover.
  • Adds a :focus-visible outline on the expand control for keyboard users.
  • Ensures the pgn__icon doesn't intercept pointer events, and fixes truncation (truncate-1-line) for the linked title content.

UnitCard.tsx passes titleLink={getTitleLink(id)} to TitleButton, wiring this new behavior into unit cards in the expanded outline view.

User roles impacted: Course Author (Studio – Course Outline page).

Supporting information

  • Ticket: LP-249

Testing instructions

  1. Pull this branch and run Studio.
  2. Open a course's Course Outline page and switch to the expanded outline view.
  3. Expand a section/subsection so unit cards are visible.
  4. Hover over a unit's title — the row background should highlight and the title text should underline.
  5. Click the unit's title text:
    • You should navigate to that unit.
    • The unit card should not expand to show its components.
  6. Click elsewhere on the unit row (the expand/chevron area):
    • The unit card should expand/collapse as before.
  7. Tab to the row with the keyboard and confirm a visible focus outline appears on the expand control.
  8. Run:
    jest src/course-outline/unit-card/UnitCard.test.tsx
    
    and confirm the three new tests pass:
    • renders the unit title as a link when expanded outline view is enabled
    • does not expand the unit card when the title link is clicked
    • expands the unit card when the non-title expand area is clicked

Other information

  • No backend/API changes — getTitleLink(id) already existed; this PR wires it into TitleButton.
  • No new dependencies — Hyperlink, OverlayTrigger, Stack, and Tooltip are existing @openedx/paragon components already used elsewhere in this codebase.
  • Accessibility: avoids nesting an interactive link inside an interactive button by overlaying the expand button behind the title link and stopping click/mousedown propagation on the link, so the two controls don't conflict. Added :focus-visible styling on the expand control.
  • This PR targets release-ulmo rather than the default branch — double-check whether it also needs to land on the main development branch.

Best Practices Checklist

  • Any new files are using TypeScript (.ts, .tsx) — N/A, no new files added.
  • Deprecated propTypes, defaultProps, and injectIntl patterns are not used in any new or modified code.
  • Tests use the helpers in src/testUtils.tsx (initializeMocks).
  • No new fields added to the Redux state/store.
  • Use React Query to load data from REST APIs — N/A, no new API calls in this PR.
  • All new i18n messages have a description for translators — N/A, no new i18n messages added.
  • Imports avoid using ../.

…tionality

- Updated TitleButton to support external and internal links, allowing the title to be clickable.
- Added hover and focus styles for linked titles in CardHeader.scss.
- Implemented tests to verify link rendering and interaction behavior in UnitCard.
- Ensured that clicking the title link does not expand the unit card, while the expand button still functions as intended.
- Added margin-top to the CardHeader component when it has a link for improved spacing.
- Replaced fragment with Stack component for better layout management of title and icon button in CardHeader.
@abhalsod-sonata
abhalsod-sonata merged commit 9e5a87a into release-ulmo Jun 16, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants