feat(course-outline): open component editors in new tabs via right-click

[djoseph-apphelix]

Description

Added ability to open components in a new tab.

• Replace IconButtonWithTooltip with a native tag wrapped in OverlayTrigger/Tooltip for the component edit button, enabling standard browser right-click "Open in new tab" behavior
• Both the component name link and the edit icon link to the component editor URL, enabling right-click "Open in new tab" on either element
• Left-clicking the component name navigates to the unit page; left-clicking the edit icon opens the editor modal inline
• Add returnTo query parameter to legacy editor URLs so users can navigate back to the unit container after editing
• Add styles for the new anchor-based edit button to match the existing icon button appearance
• Fix icon container class name to use correct Paragon convention (btn-icon__icon-container)
• Replace hardcoded color with CSS variable for theming consistency

Jira ticket

TNL2-532

Screen recording

Screen.Recording.2026-03-09.at.3.46.08.PM.mov

Testing instructions

• Expand a unit in the course outline
• Verify left-clicking a component name navigates to the unit page
• Verify left-clicking the edit (pencil) icon opens the editor modal
• Verify Ctrl/Cmd+click or right-click "Open in new tab" on the component name opens the editor in a new tab
• Verify Ctrl/Cmd+click or right-click "Open in new tab" on the edit icon opens the editor in a new tab
• Verify the edit button tooltip still appears on hover
• Verify legacy (non-MFE) editor URLs include the returnTo parameter

[Copilot]

Pull request overview

This PR enhances the course outline unit card to support right-click "Open in new tab" functionality for component editors. The main change replaces the IconButtonWithTooltip edit button with a native <a> tag wrapped in OverlayTrigger/Tooltip, and makes the component name a link as well, while preserving modal-based editing for regular left-clicks.

Changes:

• UnitCard.tsx: Added getComponentEditorUrl() helper; replaced edit IconButtonWithTooltip with native <a> anchor; made component name a link for right-click support; repositioned isClickable, onClick, onKeyDown props
• UnitCard.test.tsx: Added test suite for component editor link behavior (href verification and click behavior)
• UnitCard.scss: Updated CSS selector to match <a> tag instead of <span>, and added styles for the new anchor-based name link and edit button

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated 5 comments.

File	Description
src/course-outline/unit-card/UnitCard.tsx	Adds getComponentEditorUrl, replaces IconButtonWithTooltip with <a> tag for right-click support, makes component name a link
src/course-outline/unit-card/UnitCard.test.tsx	Adds tests for the new component editor link behavior
src/course-outline/unit-card/UnitCard.scss	Updates CSS selectors to target <a> elements and adds hover/focus styles for new anchors

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 3 out of 3 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.