feat: show all components on unit expand in outline page #57
Conversation
There was a problem hiding this comment.
Pull request overview
This pull request adds functionality to expand units in the course outline page to display their individual components (similar to how sections and subsections expand). When a unit is expanded, it fetches and displays a list of components including new support for LTI, SCORM, and H5P component types.
Key changes:
- Added three new icon components (LtiIcon, ScormIcon, H5pIcon) with corresponding mappings in the component type constants
- Implemented expand/collapse functionality for unit cards with API integration to fetch component data
- Created new data layer (API hooks) to retrieve unit component information from the backend
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| src/generic/block-type-utils/constants.ts | Added three new component types (lti, scorm, h5p) with their icon and style mappings |
| src/generic/block-type-utils/LtiIcon.tsx | New SVG icon component for LTI consumer components |
| src/generic/block-type-utils/ScormIcon.tsx | New SVG icon component for SCORM components |
| src/generic/block-type-utils/H5pIcon.tsx | New SVG icon component for H5P components |
| src/course-outline/unit-card/messages.js | Added i18n messages for loading and empty states of unit components |
| src/course-outline/unit-card/data/hooks.ts | Created React Query hook for fetching unit handler data |
| src/course-outline/unit-card/data/api.ts | Implemented API client and TypeScript interfaces for unit component data |
| src/course-outline/unit-card/UnitCard.tsx | Modified unit card to support expand/collapse with component list rendering and click navigation |
| src/course-outline/unit-card/UnitCard.scss | Added styles for expanded unit components section with hover and focus states |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
pganesh-apphelix
force-pushed
the
feat/TNL2-473
branch
from
3338767 to
39c6458
Compare
pganesh-apphelix
force-pushed
the
feat/TNL2-473
branch
from
39c6458 to
9186048
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 13 out of 13 changed files in this pull request and generated 10 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 14 out of 14 changed files in this pull request and generated 2 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 10 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
pganesh-apphelix
force-pushed
the
feat/TNL2-473
branch
from
0e6ef2e to
89e1181
Compare
pganesh-apphelix
force-pushed
the
feat/TNL2-473
branch
from
89e1181 to
e66804d
Compare
There was a problem hiding this comment.
Pull request overview
Copilot reviewed 16 out of 16 changed files in this pull request and generated 11 comments.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Description
This pull request adds functionality to expand units in the course outline page to display their individual components (similar to how sections and subsections expand). When a unit is expanded, it fetches and displays a list of components including new support for LTI, SCORM, and H5P component types.
Access to this feature is controlled by a course-level waffle flag (enableUnitExpandedView). When the flag is disabled, unit expansion is not available, and unit titles fall back to navigational links. When enabled, units behave as expandable cards with inline component details.
Key changes:
Jira
Before
Course.outline._.Demonstration.Course._.Your.Plaform.Name.Here.-.Google.Chrome.2026-01-02.17-09-25.mp4
After
Course.outline._.Demonstration.Course._.Your.Plaform.Name.Here.-.Google.Chrome.2026-01-09.14-46-57.mp4