Quiz creation side panels improvements

[nucleogenesis]

Summary

https://github.com/user-attachments/assets/47463a48-62f0-48d6-ac04-4d5455315b28

When working on quiz creation I created a SectionSidePanel component to kind of wrap around all of the various side-panel kinds but realized a bit too late on that it wasn't really necessary and added some unnecessary complexity.

This instead begins organizing the code so that each of the child routes' components for the side panels are wrapped in the SidePanelModal component which results in them being rendered into the <router-view/> in the quiz creation root route.

Some motivations for this were:

• Removing unnecessary indirection around when/how/where components define what to do re: back and close behavior
• Providing a better example for handling side panels w/ routing for Lessons
• Much easier to put things into the Side panel title section

Reviewer guidance

QA

• No regressions in the quiz creation side panels - section ordering, section editing, resource selection (search,bookmarks,etc), question replacement.
• Ensure that "are you sure" modals are triggered and that they're "Yes/No" handling works properly.
• Notably - "Section Editor <Click 'Add Questions'> -> Resource Selection" - make a change to your selection, then hit the browser back button until you get the "Are you sure" modal -- note that when you confirm it, you are returned correctly to the "Section Editor" side panel. However, had you clicked the "X" to close it, then you'd just go straight to the root page.

Code review

• Whaddya think overall?

---

Testing checklist

• [ ] Contributor has fully tested the PR manually
• [ ] If there are any front-end changes, before/after screenshots are included
• [ ] Critical user journeys are covered by Gherkin stories
• [ ] Critical and brittle code paths are covered by unit tests

PR process

• [ ] PR has the correct target branch and milestone
• [ ] PR has 'needs review' or 'work-in-progress' label
• [ ] If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• [ ] If this is an important user-facing change, PR or related issue has a 'changelog' label
• [ ] If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions[bot]]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0.dev0_git.20241120235751.pex
Windows Installer (EXE)	kolibri-0.18.0.dev0+git.20241120235751-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0.dev0+git.20241120235751-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0.dev0+git.20241120235751.dmg
Android Package (APK)	kolibri-0.18.0.dev0+git.20241120235751-0.1.4-debug.apk
TAR file	kolibri-0.18.0.dev0+git.20241120235751.tar.gz
WHL file	kolibri-0.18.0.dev0+git.20241120235751-py2.py3-none-any.whl

[pcenov]

Hi @nucleogenesis,

Here's a list with the regressions I was able to spot:

• Add questions - The "Are you sure you want to leave" modal is correctly displayed when I click the Close icon after having selected questions, but clicking the Continue button doesn't immediately close the side panel while it should:

https://github.com/user-attachments/assets/098020c3-a2db-4fce-bfe1-0462b1858023

• Add questions - Missing 'Back' arrow after having navigated through a channel's folders. I guess one can still use the browser's back button or the breadcrumb navigation, but it's inconsistent with the implementation at 'Edit section' and not very convenient:

https://github.com/user-attachments/assets/beca343a-d2e9-4d93-9cdd-73cc619cf974

• Add questions - There's not enough spacing between the 'Add questions to 'Section 1' text and the 'Current number of questions in this section'. Long titles will also not be displayed nicely:

• Edit section - The "Are you sure you want to leave" modal is displayed when I click the Back button after having selected some questions. In that case it should be possible to go back to the 'Section settings' page:

https://github.com/user-attachments/assets/07ee1bb5-72c5-488d-82af-a9e61a888455

• Edit section > Add more questions - The 'Close' icon is missing so I can't close the side panel right away if I want to:

https://github.com/user-attachments/assets/645cf504-a628-4aca-8b01-7e34e868e903

• Edit section - Changes made to the section title and description are being saved without having clicked the Apply settings button:

https://github.com/user-attachments/assets/ed71c42a-d917-46ca-92bb-591d70f15bf7

• All the modals are not displayed correctly:

https://github.com/user-attachments/assets/94189e55-603d-4c1b-b181-6d9a31f027f1

• Selecting a section from the '...' button is not working:

https://github.com/user-attachments/assets/3c0589a9-742e-4e6a-8bf2-24584f166c5c

[nucleogenesis]

@AlexVelezLl @pcenov I have updated the PR and addressed the feedback.

Edit section - Changes made to the section title and description are being saved without having clicked the Apply settings button:

This is intentional - when you click "Add questions" we decided to skip confirming "Are you sure?" and just auto-save the user's changes when they go to add questions

---

• KModals are all fixed

---

Here is an example of the navigation - I have made changes such that the Back arrow shows AND the Close icon shows in the context of going "Section editor -> Add questions" - so the user can always close out from there but if they use the back arrow, they'll eventually go back to the "Section editor" from the "Add questions" (with the confirmation modal if they've made changes, but no confirmation modal if they have not).

https://github.com/user-attachments/assets/68f42105-33ac-42c1-bc4d-48f42e07bef3

---

I made a change that seems to avoid the "redundant navigation" error. However, I have been able to successfully select any section:

https://github.com/user-attachments/assets/525bdcd8-80a0-4965-891f-2087147e8845

[pcenov]

Hi @nucleogenesis - it seems that there are some conflicts that must be resolved and there are no new build assets for me to test at this point, so could you take a look?

[pcenov]

Hi @nucleogenesis, looks much better already!

The following issues are still not fixed or partially fixed:

• Add questions - There's not enough spacing between the 'Add questions to 'Section 1' text and the 'Current number of questions in this section'. Long titles will also not be displayed nicely:

https://github.com/user-attachments/assets/45db9b5f-6dd5-4bfb-90a9-bd165544a2a0

• All the modals are now displayed correctly but always with a tiny scroll-bar:

• Selecting a section from the '...' button is still not working properly as I can't see the first 3 sections when I shrink the window:

https://github.com/user-attachments/assets/40242bd7-2b59-445b-8cec-80b297641a35

Edit section - Changes made to the section title and description are being saved without having clicked the Apply settings button:

This is intentional - when you click "Add questions" we decided to skip confirming "Are you sure?" and just auto-save the user's changes when they go to add questions

I believe that it would be fine to skip the confirmation only if the user has actually added new questions. But if the user has clicked on "Add questions" and then went back to "Section settings" without having added any new questions or clicked the "Apply settings" button, then it's not ok to auto-save as it's not consistent with the scenario where one goes to "Section settings" makes some changes, hits the close icon and sees the "Are you sure" modal:

https://github.com/user-attachments/assets/e04d98c4-43f2-4388-8f8f-cb6aa66ad99f

• Notably - "Section Editor <Click 'Add Questions'> -> Resource Selection" - make a change to your selection, then hit the browser back button until you get the "Are you sure" modal -- note that when you confirm it, you are returned correctly to the "Section Editor" side panel. However, had you clicked the "X" to close it, then you'd just go straight to the root page.

When following your guidance for this scenario I am always going back to the root page, and not to the "Section settings" side panel:

https://github.com/user-attachments/assets/90040059-6abb-4194-9f26-77433893aa58