BUM SidePanel: Implement remove users from classes side panel functionality #13651

LianaHarris360 · 2025-08-14T17:50:57Z

Summary

New Functionality:

Removal of learners and coaches from one or more classes
MembershipResource is used to bulk un-enroll or re-enroll (undo) learners.
RoleResource is used to bulk un-assign or re-assign (undo) coaches.
A loading spinner is shown within the side panel while the API request is being made and the side panel closes once the request has succeeded.
If the Admin has not selected a class, the cancel button closes the side panel without confirmation. Otherwise, a Discard Changes? modal appears.
After the selected users are removed, the side panel closes and a snackbar allowing the removal to be undone is displayed.

Screen.Recording.2025-08-13.at.3.34.35.PM.mov

References

Closes #13388
Figma

Reviewer guidance

On the Facility > Users page, select one or most users and click the remove icon button.
Once the side panel opens, confirm that the correct warnings apply based on if the selected users contain any coaches, and/or learners.
Select a class to remove the users from as well as undoing the removal. Users that are not assigned or enrolled in the selected class(es) should not be affected by selecting REMOVE or UNDO.

github-actions · 2025-08-14T18:25:07Z

Build Artifacts

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

nucleogenesis

Great work overall. I left a few questions and code review will pass when they're resolved. Otherwise, this is ready for QA

nucleogenesis · 2025-08-19T03:09:50Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+          classCoaches.value = Object.keys(rolesByUser.value);
+        } finally {


Is this a place where we'd want to catch and show the default error similar to the undoUserRemoval function below?

Yes, that would be good to include. I will update it to include a catch.

nucleogenesis · 2025-08-19T03:14:49Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+            }));
+            await MembershipResource.saveCollection({ data: enrollments });
+          }
+          if (hasCoachRoles) {


If the learner membership save throws an error, should we still try to save the coach roles in a separate try/catch?

Hmm, in this function we're undoing the user removals. So if undoing the learner memberships fails and throws an error, and we undo the coach removals in a separate try/catch statement, should we include a different error message informing the user which undo removal (coach or learners) failed?

Or should the saveCollection for the memberships and roles be wrapped into one promise, similar to lines 177-187?

nucleogenesis · 2025-08-19T03:23:48Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+          membershipsByUser.value = groupBy(membershipsData, 'user');
+          rolesByUser.value = groupBy(coachRoles, 'user');


I really like this approach to have the two separated but structured the same way so that other operations can be used on both of them (ie, getItemsToRemove, removeItems) - it's a little thing but it's the kind of little thing that makes this file easy to read and reason about.

AlexVelezLl

Just a couple of thoughts!

AlexVelezLl · 2025-08-19T15:37:00Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+    <SidePanelModal
+      alignment="right"
+      sidePanelWidth="700px"
+      @closePanel="$router.back()"


Just noting that here we should use the useGoBack composable to prevent the 4th point that Peter mentioned in this PR #13608 (comment)

This is a good point, I will update the side panel to use this.

AlexVelezLl · 2025-08-19T15:37:06Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+      @closePanel="$router.back()"
+    >
+      <template #header>
+        <h1>{{ removeUsersFromClassesHeading$({ numUsers: selectedUsers.size }) }}</h1>


A very small deviation from the figma specs. In the figma this font-size is 20px, and with this h1 we are getting a 32px font-size.

AlexVelezLl · 2025-08-19T15:40:08Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+          :style="{ color: $themeTokens.error }"
+          class="warning-text"
+        >
+          <span>{{ defaultErrorMessage$() }}</span>


In general I think we should make consistent the error handling for the api requests 😅. In other side panels I think we just show a snackback error, but I think showing the api error in the side panel is slightly better. Some decisions need to be made around there to have a consistent behavior across side panels.

Hmm, I agree with this. Depending on the preferred approach, perhaps we should open an issue to update all of the side panels to have the same error handling approach? @nucleogenesis

I think opening a follow up for a consistent approach is a great idea

Definitely - I'll be putting together some notes tomorrow re: some inconsistencies such as these and will make a follow-up.

AlexVelezLl · 2025-08-19T15:45:12Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+            </template>
+          </div>
+        </div>
+        <h2 id="remove-from-selected-classes">{{ SelectClassesLabel$() }}</h2>


Here there is a little difference from the designs, this font-size should be 16px.

AlexVelezLl · 2025-08-19T15:50:28Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+            <KButton
+              :text="coreString('cancelAction')"
+              :disabled="loading"
+              @click="closeSidePanel(selectedOptions.length > 0 ? true : false)"


If the users closes the side panel by clicking outside the side panel, should it also show the confirmation message? Should it show it if the user hits the browser back button?

If so, we have this CloseConfirmationGuard component. We can add some props and a content slot to match the specs for this use case, but in general it has the common guard checks before the route leave happens, and even if the user closes the tab.

Here is an example of how we can use it. (Just noticed the beforeRouteLeave link that needs to be done is not well docummented in the component 😓).

That is a good point I hadn't thought of. I'll update it so that the CloseConfirmationGuard is displayed when the user hits the browser back button, the cancel button, or clicking outside the side panel when changes have been made.

AlexVelezLl · 2025-08-19T16:01:50Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+        // Combine and deduplicate class IDs
+        const uniqueClassIds = new Set([...learnerClassIds, ...coachClassIds]);
+
+        return props.classes


I'll get ahead of Peter's comment 😅. Could we add a sort here to have the classes ordered alphabetically?

Yes, thanks for looking ahead.

AlexVelezLl · 2025-08-19T16:55:13Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+
+          membershipsByUser.value = groupBy(membershipsData, 'user');
+          rolesByUser.value = groupBy(coachRoles, 'user');
+          classLearners.value = Object.keys(membershipsByUser.value);


It seems like we are not using this variable.

Good catch, I'll remove it.

AlexVelezLl · 2025-08-19T16:57:16Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+              user,
+              kind: UserKinds.COACH,
+            }));
+            await RoleResource.saveCollection({ data: assignments });


Since these two save requests are independent. Perhaps a good idea would be to use the Promise.all to save then concurrently?

Yes, this is what I suggested doing in response to Jacob's earlier comment, I'll move forward with that approach.

AlexVelezLl · 2025-08-19T16:58:40Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+          }
+        }
+        try {
+          await removeItems(MembershipResource, learnerMembershipsToRemove);


idem, perhaps we can use Promise.all here too.

I don't know if I can for these two items specifically. I initially tried to put them into one Promise.all call but a "Database is not available for write operations" error is always returned from the MembershipResource.deleteCollection, I haven't been able to figure out why.

AlexVelezLl · 2025-08-19T16:59:54Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+            autoDismiss: true,
+            duration: 6000,
+            actionText: undoAction$(),
+            actionCallback: () => undoUserRemoval(),


…lk remove coaches from classes

…rs from classes

…ulk user action side panels

…GoBack; move removal undos into a single promise

pcenov

Thanks @LianaHarris360 - LGTM, implemented as specified.

nucleogenesis · 2025-08-20T18:03:41Z

kolibri/plugins/facility/assets/src/views/users/sidePanels/RemoveFromClassSidePanel.vue

+          await Promise.all([
+            enrollments.length
+              ? MembershipResource.saveCollection({ data: enrollments })
+              : Promise.resolve(),
+            assignments.length
+              ? RoleResource.saveCollection({ data: assignments })
+              : Promise.resolve(),
+          ]);


LianaHarris360 added this to the Kolibri 0.19: Bulk User Management milestone Aug 14, 2025

LianaHarris360 requested review from AlexVelezLl, nucleogenesis and ozer550 August 14, 2025 17:50

LianaHarris360 added TAG: new feature New user-facing feature P0 - critical Priority: Release blocker or regression labels Aug 14, 2025

github-actions bot added DEV: backend Python, databases, networking, filesystem... APP: Facility Re: Facility App (user/class management, facility settings, csv import/export, etc.) DEV: frontend SIZE: medium labels Aug 14, 2025

nucleogenesis reviewed Aug 19, 2025

View reviewed changes

AlexVelezLl reviewed Aug 19, 2025

View reviewed changes

LianaHarris360 added 6 commits August 19, 2025 14:13

Add by_ids filter to RoleFilter to filter by a list of role IDs to bu…

096c760

…lk remove coaches from classes

Implement remove users side panel and update strings for removing use…

fba8320

…rs from classes

Adjust placement of info text

600dcb5

Add props and content slot to CloseConfirmationGuard for use within b…

852df9b

…ulk user action side panels

Reset selected users after bulk user action side panels are destroyed

bbe8302

Update RemoveFromClassSidePanel to use CloseConfirmationGuard and use…

369bc83

…GoBack; move removal undos into a single promise

LianaHarris360 force-pushed the remove-users-side-panel branch from ccda004 to 369bc83 Compare August 19, 2025 19:26

marcellamaki assigned nucleogenesis Aug 19, 2025

pcenov self-requested a review August 20, 2025 15:09

pcenov approved these changes Aug 20, 2025

View reviewed changes

LianaHarris360 requested review from AlexVelezLl, nucleogenesis and pcenov August 20, 2025 15:39

nucleogenesis reviewed Aug 20, 2025

View reviewed changes

nucleogenesis merged commit 195e66f into learningequality:develop Aug 20, 2025
80 of 82 checks passed

		classCoaches.value = Object.keys(rolesByUser.value);
		} finally {

		membershipsByUser.value = groupBy(membershipsData, 'user');
		rolesByUser.value = groupBy(coachRoles, 'user');

BUM SidePanel: Implement remove users from classes side panel functionality #13651

BUM SidePanel: Implement remove users from classes side panel functionality #13651

Uh oh!

Conversation

LianaHarris360 commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

References

Reviewer guidance

Uh oh!

github-actions bot commented Aug 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

nucleogenesis left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

LianaHarris360 Aug 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

pcenov left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

LianaHarris360 commented Aug 14, 2025 •

edited

Loading

github-actions bot commented Aug 14, 2025 •

edited

Loading

LianaHarris360 Aug 19, 2025 •

edited

Loading