Prototyping User Table Design Updates #13808

nucleogenesis · 2025-10-03T17:45:36Z

Summary

Major Changes

New UI/UX layout & spacing applied across all NewUsers, UsersRoot and UsersTrash pages.
Consistency of search/filtering options across pages
Some changes have been made that impact other parts of the application (see the PaginationActions component & PaginatedListContainerWithBackend component updates and their related changes outside of Facility).

References

Touches #13782 , follows up from #13743

Reviewer guidance

QA

There are no specific Figma references for these updates to reference.

Users Root Table, New Users Table, Deleted Users Table

All of these pages have had similar changes performed on them and there is significant change for regression - so please check the following:

All bulk actions available and functioning on each of these pages
Do/undo behaviour
All filters/search combinations
Validate messaging for empty table states

Root Table Specific

Test across screen sizes with a focus on the table heading/actions being positioned correctly beneath the top "App bar"
When the screen shrinks, the "New user" button folds into the "Options" dropdown now - be sure all dropdown options work as expected
Also note that as you shrink the page, the AppBar's buttons might overflow to another row for about 40px at one point in a way that is different than the proper mobile view - be sure that at all screen widths, the heading is positioned correctly

Android & App mode

Test that all content and data is visible when in app mode (where there is a bottom actions bar).

My Downloads

Check this page for regressions, particularly around pagination.

Classes -> Class Details -> Enroll learners

This page also has had some updates to the pagination and should be tested for regressions with a focus on pagination

github-actions · 2025-10-03T18:22:03Z

Build Artifacts

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

nucleogenesis · 2025-10-06T20:43:30Z

packages/kolibri-common/components/PaginatedListContainerWithBackend.vue

    </KGrid>

-    <div class="flex-column">
+    <div class="flex-column table-content">


This whole component may no longer be necessary as the business logic has been extracted to just be a kind of widget in PaginationActions.vue that can be slapped anywhere with the given props and will handle the pagination buttons/messaging w/out the opinionated layout enforced.

Seems like with the new changes this component is no longer necessary yes, or at least it should be renamed in the scope of this PR so we can avoid future confusions.

Yes, it feels like it would be better to just defer most of this to the consuming component, until we have a strong use case to generalize again.

I'll make a follow-up issue to clean this up a bit as it'll involve updating other areas as well and this PR is growing grey hairs

- Created useUsersTableSearch composable for search/query handling - Created usePagination composable for pagination state management - Refactored UsersTableToolbar to be a pure layout component - Updated UsersRootPage to use new composables - Integrated PaginationActions component for consistent pagination UI - Cleaned up UsersTable component to remove duplicated logic This refactoring improves maintainability by: - Encapsulating search and pagination logic in reusable composables - Following Vue 2 Composition API patterns used in the codebase - Creating clear separation of concerns between components - Providing flexible two-row layout structure for toolbar actions Initial Claude Prompt: 1) Get a sense of the files I've been working on based on my last git commit and current unstaged changes. 2) Review those changes to get a sense of how the code is structured. 3) The kolibri/plugins/facility/assets/src/views/users/common/UsersTableToolbar.vue and the packages/kolibri-common/components/PaginatedListContainer.vue components have some logic too tightly couple to their scope and aren't used in a way that makes it easy to, for example, know what page we're on. Also, the "query/search" handling in the overall changes I've made reflects to me something that would be easier to use if it were encapsulated somehow, such as into its own composable module. (NOTE: look at files use*.js in the codebase for an example of how we use the Composition API modules in Vue 2). In any case - the changes I'm working on are to rearrange some of the actions that we've put onto the screen. The #topRow and #bottomRow slots in packages/kolibri-common/components/PaginatedListContainerWithBackend.vue demonstrate at least the overall layout I want - basically I need two rows in a flex container (column dir) which each can then have their own flexbox divs w/ their own layout of actions within them and I need to be able to put the Options dropdown, New User button, FilterTextbox (and friends), the "7 users selected" message w/ appropriate count variable passed for the number, and the pagination buttons & messaging all in the same place. 4) Please proceed to make changes to the code base updating it per what I've said here. Ask any questions you have as you proceed. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>

…tContainerWithbackend

AlexVelezLl · 2025-10-07T14:16:34Z

kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue

+    <PaginationActions
      v-model="currentPage"
+      class="top-pagination-actions"
      :itemsPerPage="itemsPerPage"
      :totalPageNumber="totalPageNumber"
      :numFilteredItems="downloadItemListLength"
-    >
+    />


Are we sure we want to change the pagination layout for all pages? 👀 (Seems like a non-trivial design change so just flagging it for all relevant people to aggree/be informed)

(For me, it feels a little bit weird to have them both on the top and the botton of the table)

Having it top & bottom made more sense when I had a full page of downloads and had to scroll 30 of them to the bottom but when it's empty like that it looks goofy 😅 - I've reverted it to the original.

AlexVelezLl

Thanks @nucleogenesis! Just a few comments I noticed in a first read through

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

kolibri/plugins/facility/assets/src/views/users/common/UsersTableToolbar.vue

kolibri/plugins/facility/assets/src/views/users/UsersRootPage/index.vue

kolibri/plugins/facility/assets/src/views/users/common/UsersTable.vue

kolibri/plugins/learn/assets/src/my_downloads/views/DownloadsList/index.vue

AlexVelezLl · 2025-10-07T16:42:31Z

packages/kolibri-common/components/PaginatedListContainerWithBackend.vue

    </KGrid>

-    <div class="flex-column">
+    <div class="flex-column table-content">


Seems like with the new changes this component is no longer necessary yes, or at least it should be renamed in the scope of this PR so we can avoid future confusions.

packages/kolibri-common/components/PaginationActions.vue

NOTE: This will likely all be overwritten in a future issue once the text is discussed in more detail

llm disclosure: portions of these changes made w/ help of Claude code

nucleogenesis · 2025-10-10T06:32:10Z

@pcenov I've updated the PR to address the following:

Android bottom bar bug
Things scrolling up and over the appbar (sorry about this - I broke this in my last commit before requesting review and didn't catch it)
Horizontal scrollbar always visible
Better deleted user message view on smaller screens
Hide filters & search when no users to filter or search
Ultrawide screens look right :)

The following we'll address separately:

The "New User" button going into "Options" - this is something I'm discussing w/ Tomiwa
Overall weird top section when small - we'll follow-up on this.

pcenov · 2025-10-10T13:41:13Z

Hi @nucleogenesis,

Testing notes on the fixed items:

Android bottom bar bug - NOT FIXED - this one is still extant in the Android app in the latest build
Things scrolling up and over the appbar - FIXED
Horizontal scrollbar always visible - FIXED
Better deleted user message view on smaller screens - it's better now :)
Hide filters & search when no users to filter or search - PARTIALLY FIXED - the filter and search are hidden now, but the icons and pager remain visible?
Ultra-wide screens look right - FIXED

New issues:

All tables - the tooltips are displayed under the table's header:

tooltips.mp4

All tables - the search field disappears completely when there are no matching results:

search.field.disappears.mp4

Search field's width - Shrinking the page results in a very small search field for some resolutions. At the same time it has become too wide at the users and new users tables. It's best to have the same min and max width of the field for all tables, allowing for the entered text to be visible:

search.field.size.mp4

The page numbers are lower than the arrows, should be centered:

Small devices and the Android app

At Classes page the "New class" button is too close to the table in portrait mode. Also the "Class name" column is too wide so it's almost impossible to view the other columns
There's no visible scrollbars in the Android app so the user has to guess that it's possible to scroll and see other columns and rows
In landscape mode the tables are not useful at all

small.devices.mp4

fixes tooltips hiding behind table headers

nucleogenesis · 2025-10-13T05:50:55Z

@pcenov I've fixed:

Tooltips
Search field missing when no results

The others will be addressed in follow-ups - particularly the styles on the mobile screens

pcenov · 2025-10-13T08:46:06Z

@nucleogenesis - I'm not seeing a new build with the new fixes?

pcenov · 2025-10-14T12:59:14Z

Thanks @nucleogenesis - please let me know when you create the follow-up issues so that we can make sure that everything is tracked.
For the latest build I confirm that the issue with the tooltips is fixed.
The issues with the disappearing search field is also fixed, but while regression testing around it I noticed a similar issue - if I apply a filter for which there are no results then the search field disappears along with the link to the applied filter, which leaves only the "Clear filters" option available to the user:

filters.no.search.field.mp4

Didn't observe any other issues caused by the changes made here.

only hiding them if there are no searchterm, filters applied, or users in the table. honestly an edge case but now it works as expected

rtibbles

A couple of comments.

I think this is good cleanup of the pagination - and reminds me somewhat of some of the composable work that @AlexVelezLl did in 0.18 for better handling for API requests for content. I think we are feeling our way towards a better, composable based, API resource layer that handles both cursor based (more) and page based pagination styles. Good that we didn't go that far in this PR, but it's moving us in the at direction.

The appBarHeight stuff feels like it could be avoided - I don't know precisely how, but I'd rather look for an alternative, and then clearly document why this was required. I guess the main question is, why isn't the built in paddingTop styling that is applied sufficient? If it's being ignored somehow, shouldn't we just be aiming to apply it in the correct place instead?

rtibbles · 2025-10-14T18:31:56Z

packages/kolibri-common/components/PaginatedListContainerWithBackend.vue

    </KGrid>

-    <div class="flex-column">
+    <div class="flex-column table-content">


Yes, it feels like it would be better to just defer most of this to the consuming component, until we have a strong use case to generalize again.

rtibbles · 2025-10-14T18:35:09Z

packages/kolibri/components/pages/AppBarPage/index.vue

      id="main"
      class="main-wrapper"
-      :style="[wrapperStyles, paddingTop]"
+      :style="[wrapperStyles]"


Seems like this doesn't even need to be an array any more? Just the wrapperStyles object directly?

packages/kolibri/components/pages/AppBarPage/index.vue

rtibbles · 2025-10-14T18:48:21Z

kolibri/plugins/facility/assets/src/composables/usePagination.js

+ * Handles page changes, items per page, and URL query synchronization
+ */
+export default function usePagination({ usersCount, totalPages } = {}) {
+  const route = useRoute();


Nice to do this, so as we drop use of vuex, we're not relying on store vuex state for this any more.

…ning

rtibbles · 2025-10-20T22:49:31Z

So, I think my general feeling after the last few updates is that the smell was coming from under the floorboards. Still good to have reverted the expansion of the API, because I think doing this right will not require the appBarHeight - the small is still there, it's just now masked again!

nucleogenesis · 2025-10-20T23:44:44Z

@pcenov I've made #13842 #13843 and #13844 to follow-up on the unresolved comments from your reviews.

Also noting that I've created follow-ups for pagination #13841 generalization so we don't miss coming back to the discussion around it down the road.

rtibbles

All code review and QA comments have been addressed, either in the scope of this PR or in follow up issues.

nucleogenesis added this to the Kolibri 0.19: Bulk User Management milestone Oct 3, 2025

github-actions bot added APP: Facility Re: Facility App (user/class management, facility settings, csv import/export, etc.) DEV: frontend SIZE: large labels Oct 3, 2025

nucleogenesis force-pushed the fullscreen-users-table branch from 3b76d19 to df13990 Compare October 6, 2025 20:02

github-actions bot added the SIZE: very large label Oct 6, 2025

WIP big changes

f08d96a

nucleogenesis force-pushed the fullscreen-users-table branch from 67a40dc to 35548a5 Compare October 6, 2025 20:40

nucleogenesis commented Oct 6, 2025

View reviewed changes

nucleogenesis force-pushed the fullscreen-users-table branch 2 times, most recently from bb6e723 to 082c044 Compare October 6, 2025 22:39

github-actions bot added the APP: Learn Re: Learn App (content, quizzes, lessons, etc.) label Oct 6, 2025

AlexVelezLl and others added 5 commits October 6, 2025 15:42

Add flex for users layout

669b812

updating styles/layout userstable & toolbar, refactoring PaginatedLis…

c3965c3

…tContainerWithbackend

use PaginationActions in DownloadsList

22dd44c

ClassEnrollForm uses pagination actions now; top and bottom

4503c23

nucleogenesis force-pushed the fullscreen-users-table branch from 082c044 to 4503c23 Compare October 6, 2025 22:42

AlexVelezLl reviewed Oct 7, 2025

View reviewed changes

AlexVelezLl mentioned this pull request Oct 7, 2025

[Fix]: KTable & Scroll Bars on Small Landscape Screens #13687

Closed

rtibbles assigned AlexVelezLl Oct 7, 2025

AlexVelezLl reviewed Oct 7, 2025

View reviewed changes

nucleogenesis added 7 commits October 8, 2025 21:10

remove dupe method; dupe actions in DownloadsList

fc60c1b

bottom margin fixed in MyDownloads

ef610b9

convert roleType to roleType/user_types query param in UsersTable

227ff59

NOTE: This will likely all be overwritten in a future issue once the text is discussed in more detail

fix missing clear button when users selected

be7d103

refactor empty message handling in UsersTable

8beb52a

user table background opacity fix, better css for paddings

6fbe85d

update NewUsersPage to utilize updated layout/styles from UsersRootPage

6767f8e

llm disclosure: portions of these changes made w/ help of Claude code

nucleogenesis added 4 commits October 9, 2025 21:44

fix android height issue w/ proper maxHeight

ef96beb

improved padding on left/right table actions

93d77bc

fix height, use kpagecontainer in userrootpage

c613052

rekpagecontainerization

329f4d9

nucleogenesis added 3 commits October 12, 2025 21:58

non-stick toolbar in users tables

91bf2ee

fixes tooltips hiding behind table headers

only show search box when there are users OR a searchTerm

214e246

improved mobile heading section

7147a74

nucleogenesis added the TODO: needs QA re-review For stale issues that need to be revisited label Oct 13, 2025

also show search stuff if active filters

1d52f36

only hiding them if there are no searchterm, filters applied, or users in the table. honestly an edge case but now it works as expected

rtibbles reviewed Oct 14, 2025

View reviewed changes

nucleogenesis added 3 commits October 17, 2025 11:21

don't pass appBarHeight but puts hard-coded styles for proper positio…

b0cf37f

…ning

tweaking spacing on smaller screens new & trash users page

0ac442e

account for app context when calculating topMargin in users root page

852c59d

remove unused unnecessary styles

279fa4e

rtibbles approved these changes Oct 20, 2025

View reviewed changes

rtibbles merged commit beae6c5 into learningequality:develop Oct 20, 2025
51 checks passed

This was referenced Oct 21, 2025

Mobile responsiveness: #13782

Closed

Facility > Users - The buttons are not visible in the Android app when performing bulk actions at the Users page #13784

Closed

[Users Table]: Reconsider header:table height ratio #13699

Closed

Uh oh!

Prototyping User Table Design Updates #13808

Prototyping User Table Design Updates #13808

Uh oh!

Conversation

nucleogenesis commented Oct 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Major Changes

References

Reviewer guidance

QA

Users Root Table, New Users Table, Deleted Users Table

Android & App mode

My Downloads

Classes -> Class Details -> Enroll learners

Uh oh!

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

Uh oh!

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!

AlexVelezLl left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

nucleogenesis commented Oct 10, 2025

Uh oh!

pcenov commented Oct 10, 2025

Uh oh!

nucleogenesis commented Oct 13, 2025

Uh oh!

pcenov commented Oct 13, 2025

Uh oh!

pcenov commented Oct 14, 2025

Uh oh!

rtibbles 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!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

rtibbles commented Oct 20, 2025

Uh oh!

nucleogenesis commented Oct 20, 2025

Uh oh!

rtibbles left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

nucleogenesis commented Oct 3, 2025 •

edited

Loading

github-actions bot commented Oct 3, 2025 •

edited

Loading