Add confirmation modal to prevent accidental closure of Course Assignment Side Panel

[LianaHarris360]

Summary

This pull requests adds a confirmation modal to AssignCourseSidePanel so that while selecting and assigning a course, accidentally clicking outside of the panel won't close the side panel.

closeconfirmationmodal.mp4

References

Closes #14140

Reviewer guidance

1. Go to Coach > Courses and attempt to assign a course.
2. Click outside of the side panel to see the confirmation modal.

[github-actions]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.19.2.dev0_git.20260211190810.pex
Windows Installer (EXE)	kolibri-0.19.2.dev0+git.20260211190810-windows-setup-unsigned.exe
Debian Package	kolibri_0.19.2.dev0+git.20260211190810-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.19.2.dev0+git.20260211190810.dmg
Android Package (APK)	kolibri-0.19.2.dev0+git.20260211190810-0.1.6-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.19.2.dev0+git.20260211190810.zip
TAR file	kolibri-0.19.2.dev0+git.20260211190810.tar.gz
WHL file	kolibri-0.19.2.dev0+git.20260211190810-py2.py3-none-any.whl

[pcenov]

Hi @LianaHarris360, here are some issues I was able to identify while manually testing:

1. When I click the 'Assign course' button the page becomes unresponsive. There are no errors in the console. If I navigate back to the 'Courses' page I can see that the course is listed in the table:

cannot.assign.course.mp4

2. The modal should not appear when the user hasn't made any changes. This is the existing behavior at Lessons, Quizzes and Users:

no.changes.mp4

The same should be valid if the user decides to click the 'Cancel' button if they haven't made any selections. If they have made any selection and they chose to click the Cancel button I think we should still show the confirmation modal.

3. Perhaps it should be further discussed what should be the label, text and buttons of the modal, as currently for the other places we are using this one:

[marcellamaki]

While we could reuse this, I think for the sake of wording/UX consistency within Coach (to some of Peter's comments), it might be easier to just use a KModal and repurpose the strings that we have in a few places.

There are definitely a few places where the logic is a little bit convoluted and more complicated 🙃 but, you can look here, as one example for reference.

The logic of the conditions for closing the side panel will also probably be a bit different, but looking at this may also give some ideas to address Peter's feedback around the checks, and confirming that some changes have been made.

[LianaHarris360]

I made a new, similar component within kolibri/plugins/coach/frontend/views/courses/modals/, reusing how the previous CloseConfirmationGuard modal used ref and beforeRouteLeave because the side panel pushes to a different route to close it, but I fixed the console errors and updated the strings used to keep the same UX consistency in Coach, so the feedback has been handled now.

[pcenov]

Hi @LianaHarris360, I confirm that the reported issues are fixed. Now there are just the following scenarios to be handled too:

1. The confirmation modal is not shown if I have selected a radio button at 'Select course to assign' while it should because I have made a selection:

2notshown.mp4

2. The confirmation modal appears if I have made a selection at 'Select recipients' and then clicked the back arrow. In that case it should not appear, as the user is technically still editing things and should be able to go back and see the selected course:

no.confirmation.needed.mp4