feat: Add SequenceBottomNavigationSlot for customizable sequence navigation#1918
feat: Add SequenceBottomNavigationSlot for customizable sequence navigation#1918xitij2000 wants to merge 4 commits into
Conversation
…vigation Introduces a new plugin slot (`SequenceBottomNavigationSlot`) for extending or replacing the default bottom navigation in course sequences. Updates `Sequence` component to integrate with this slot. Includes documentation and examples for plugin usage.
|
Thanks for the pull request, @xitij2000! This repository is currently maintained by Once you've gone through the following steps feel free to tag them in a comment and let them know that your changes are ready for engineering review. 🔘 Get product approvalIf you haven't already, check this list to see if your contribution needs to go through the product review process.
🔘 Provide contextTo help your reviewers and other members of the community understand the purpose and larger context of your changes, feel free to add as much of the following information to the PR description as you can:
🔘 Get a green buildIf one or more checks are failing, continue working on your changes until this is no longer the case and your build turns green. DetailsWhere can I find more information?If you'd like to get more details on all aspects of the review process for open source pull requests (OSPRs), check out the following resources: When can I expect my changes to be merged?Our goal is to get community contributions seen and reviewed as efficiently as possible. However, the amount of time that it takes to review and merge a PR can vary significantly based on factors such as:
💡 As a result it may take up to several weeks or months to complete a review and merge your PR. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #1918 +/- ##
==========================================
+ Coverage 91.30% 91.41% +0.10%
==========================================
Files 344 345 +1
Lines 5774 5775 +1
Branches 1351 1389 +38
==========================================
+ Hits 5272 5279 +7
+ Misses 483 477 -6
Partials 19 19 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
| {unitHasLoaded && ( | ||
| <SequenceBottomNavigationSlot | ||
| courseId={courseId} | ||
| sequenceId={sequenceId} | ||
| unitId={unitId} | ||
| previousHandler={() => { | ||
| logEvent('edx.ui.lms.sequence.previous_selected', 'bottom'); | ||
| handlePrevious(); | ||
| }} | ||
| nextHandler={() => { | ||
| logEvent('edx.ui.lms.sequence.next_selected', 'bottom'); | ||
| handleNext(); | ||
| }} | ||
| onNavigate={onNavigate} | ||
| /> | ||
| )} |
There was a problem hiding this comment.
I debated quite a few things when thinking through how to make this more DRY.
The first thing that came to mind was moving this logic into renderUnitNavigation, and I also considered removing renderUnitNavigation's isAtTop param, but the fact that it's a pluginProp in UnitTitleSlot
makes that risky.
I do still think we can make this more DRY without changing the existing slot prop API by doing something like:
// before renderUnitNavigation
const unitNavigationProps = {
courseId,
sequenceId,
unitId,
onClickPrevious: () => {
logEvent('edx.ui.lms.sequence.previous_selected', 'bottom');
handlePrevious();
},
onClickNext: () => {
logEvent('edx.ui.lms.sequence.next_selected', 'bottom');
handleNext();
},
};
const renderUnitNavigation = (isAtTop) => (
<UnitNavigation {...unitNavigationProps} isAtTop={isAtTop} />
);
{unitHasLoaded && (
<SequenceBottomNavigationSlot
{...unitNavigationProps}
onNavigate={onNavigate}
/>
)}There was a problem hiding this comment.
This is definitely the cleaner way to do things. I will try to apply the changes tomorrow.
…le sequence navigation
…tomizable sequence navigation
| nextHandler, | ||
| onNavigate, | ||
| previousHandler |
There was a problem hiding this comment.
These should match the prop names being spread in from unitNavigationProps
| nextHandler, | |
| onNavigate, | |
| previousHandler | |
| onClickPrevious, | |
| onNavigate, | |
| onClickNext |
Introduces a new plugin slot (
SequenceBottomNavigationSlot) for extending or replacing the default bottom navigation in course sequences.