Repository navigation
make the role assignation wizard a full-screen modal - #283
jacobo-dominguez-wgu wants to merge 1 commit into
Conversation
|
Thanks for the pull request, @jacobo-dominguez-wgu! 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 #283 +/- ##
==========================================
- Coverage 98.55% 98.53% -0.02%
==========================================
Files 80 80
Lines 1385 1368 -17
Branches 468 427 -41
==========================================
- Hits 1365 1348 -17
Misses 19 19
Partials 1 1 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
Description
The role assignation wizard was a routed page, so assigning a role navigated the admin away from the team or audit page they were working on and then back again.
It now opens as a Paragon
FullscreenModaltriggered from the existing Assign Role button, matching the openedx pattern used elsewhere on the platform.Closes #240 (part of #237)
Changes
Wizard → modal
AssignRoleWizardrenders aFullscreenModal. TheStepperwraps the modal rather than sitting inside it, because the stepper header, the steps and the per-step action rows go into three different modal slots (beforeBodyNode, the body,footerNode) and all three need the same stepper context.AssignRoleWizardModalreplacesAssignRoleWizardPage, keeping the roles-assignable derivation (MANAGE_TEAM_PERMISSIONS× course-authoring flag) unchanged.AddRoleButtonhosts the modal and owns the open/closed state.assign-roleroute,ROUTES.ASSIGN_ROLE_WIZARD_PATH,buildWizardPathand the unusedfromprop. Renamedwizard.page.titletowizard.modal.titleand dropped the now-deadwizard.page.breadcrumb.Toast fixes (see Notes)
.toast-containerabove the modal layer.Testing
lintandtsc --noEmitclean.Notes
The commit mixes two concerns. The subject describes the modal conversion, but the commit also contains the toast z-index and click-outside workarounds (
style.scss,ToastManagerContext.tsx).Why the toast changes are here. Converting the wizard to a modal exposed two latent bugs, both of which the Paragon maintainer predicted in openedx/paragon#3654:
.toast-containersat atz-index: 1000against the modal layer's1050, so a toast raised from a modal painted underneath it — dimmed by the backdrop for a centred modal, and completely invisible behind a full-screen one. The existing comment claiming it cleared the modal was never true.react-focus-onwatches the document for presses outside the modal to fireonClickOutside, and Paragon's#toast-rootis outside it, so pressing a toast closed the modal — which for the wizard also discarded the form, including when reaching for the toast's own Retry button.Both are workarounds pending openedx/paragon#3654. They apply to every modal in the app, so the delete-role confirmation benefits too.
Screenshots
Step 1:

Step 2:
