feat(userlist): add sortable columns to User List (#1615)

Author: 0xSysR3ll

cypress/e2e/user/user-list.cy.ts

@@ -36,7 +36,7 @@ describe('User List', () => {
     cy.get('#email').type(testUser.emailAddress);
     cy.get('#password').type(testUser.password);
 
-    cy.intercept('/api/v1/user?take=10&skip=0&sort=displayname').as('user');
+    cy.intercept('/api/v1/user*').as('user');
 
     cy.get('[data-testid=modal-ok-button]').click();
 
@@ -56,7 +56,7 @@ describe('User List', () => {
 
     cy.get('[data-testid=modal-title]').should('contain', `Delete User`);
 
-    cy.intercept('/api/v1/user?take=10&skip=0&sort=displayname').as('user');
+    cy.intercept('/api/v1/user*').as('user');
 
     cy.get('[data-testid=modal-ok-button]').should('contain', 'Delete').click();
 
@@ -67,4 +67,37 @@ describe('User List', () => {
       .contains(testUser.emailAddress)
       .should('not.exist');
   });
+
+  it('sorts by column headers and updates request params and row order', () => {
+    cy.intercept('GET', '/api/v1/user?*').as('userListFetch');
+
+    cy.visit('/users');
+    cy.wait('@userListFetch');
+
+    cy.get('[data-testid=column-header-displayname]').click();
+    cy.wait('@userListFetch').then((interception) => {
+      const url = interception.request.url;
+      expect(url).to.include('sort=displayname');
+      expect(url).to.include('sortDirection=asc');
+    });
+
+    cy.get(
+      '[data-testid=user-list-row] [data-testid=user-list-username-link]'
+    ).then(($links) => {
+      const displayNames = $links
+        .toArray()
+        .map((el) => (el as HTMLElement).innerText.trim().toLowerCase());
+      const sortedAsc = [...displayNames].sort((a, b) => a.localeCompare(b));
+      expect(displayNames).to.deep.equal(sortedAsc);
+    });
+
+    cy.get('[data-testid=column-header-created]').click();
+    cy.wait('@userListFetch').then((interception) => {
+      const url = interception.request.url;
+      expect(url).to.include('sort=created');
+      expect(url).to.include('sortDirection=desc');
+    });
+
+    cy.get('[data-testid=user-list-row]').should('have.length.greaterThan', 0);
+  });
 });

seerr-api.yml

@@ -4117,8 +4117,16 @@ paths:
           name: sort
           schema:
             type: string
-            enum: [created, updated, requests, displayname]
+            enum: [created, updated, requests, displayname, usertype, role]
             default: created
+        - in: query
+          name: sortDirection
+          description: |
+            Sort direction. When omitted, the server chooses the direction per sort
+            field (e.g. displayname defaults to asc, requests/updated to desc).
+          schema:
+            type: string
+            enum: [asc, desc]
         - in: query
           name: q
           required: false

server/routes/user/index.ts

@@ -45,6 +45,35 @@ router.get('/', async (req, res, next) => {
       : Math.max(10, includeIds.length);
     const skip = req.query.skip ? Number(req.query.skip) : 0;
     const q = req.query.q ? req.query.q.toString().toLowerCase() : '';
+    const sortParam = req.query.sort ? req.query.sort.toString() : undefined;
+    const sortDirectionQuery = req.query.sortDirection
+      ? req.query.sortDirection.toString().toLowerCase()
+      : undefined;
+
+    let sortDirection: 'ASC' | 'DESC';
+    if (sortDirectionQuery === 'asc') {
+      sortDirection = 'ASC';
+    } else if (sortDirectionQuery === 'desc') {
+      sortDirection = 'DESC';
+    } else {
+      switch (sortParam) {
+        case 'displayname':
+          sortDirection = 'ASC';
+          break;
+        case 'requests':
+        case 'updated':
+          sortDirection = 'DESC';
+          break;
+        case 'created':
+        case 'usertype':
+        case 'role':
+        case undefined:
+        default:
+          sortDirection = 'ASC';
+          break;
+      }
+    }
+
     let query = getRepository(User).createQueryBuilder('user');
 
     if (q) {
@@ -58,29 +87,32 @@ router.get('/', async (req, res, next) => {
       query.andWhereInIds(includeIds);
     }
 
-    switch (req.query.sort) {
+    switch (sortParam) {
+      case 'created':
+        query = query.orderBy('user.createdAt', sortDirection);
+        break;
       case 'updated':
-        query = query.orderBy('user.updatedAt', 'DESC');
+        query = query.orderBy('user.updatedAt', sortDirection);
         break;
       case 'displayname':
         query = query
           .addSelect(
             `CASE WHEN (user.username IS NULL OR user.username = '') THEN (
-              CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN (
-                CASE WHEN (user.jellyfinUsername IS NULL OR user.jellyfinUsername = '') THEN
-                  "user"."email"
+                CASE WHEN (user.plexUsername IS NULL OR user.plexUsername = '') THEN (
+                  CASE WHEN (user.jellyfinUsername IS NULL OR user.jellyfinUsername = '') THEN
+                    "user"."email"
+                  ELSE
+                    LOWER(user.jellyfinUsername)
+                  END)
                 ELSE
-                  LOWER(user.jellyfinUsername)
+                  LOWER(user.plexUsername)
                 END)
               ELSE
-                LOWER(user.jellyfinUsername)
-              END)
-            ELSE
-              LOWER(user.username)
-            END`,
+                LOWER(user.username)
+              END`,
             'displayname_sort_key'
           )
-          .orderBy('displayname_sort_key', 'ASC');
+          .orderBy('displayname_sort_key', sortDirection);
         break;
       case 'requests':
         query = query
@@ -90,10 +122,25 @@ router.get('/', async (req, res, next) => {
               .from(MediaRequest, 'request')
               .where('request.requestedBy.id = user.id');
           }, 'request_count')
-          .orderBy('request_count', 'DESC');
+          .orderBy('request_count', sortDirection);
+        break;
+      case 'usertype':
+        query = query.orderBy('user.userType', sortDirection);
+        break;
+      case 'role':
+        query = query
+          .addSelect(
+            `CASE
+              WHEN user.id = 1 THEN 0
+              WHEN (user.permissions & ${Permission.ADMIN}) != 0 THEN 1
+              ELSE 2
+            END`,
+            'role_sort_key'
+          )
+          .orderBy('role_sort_key', sortDirection);
         break;
       default:
-        query = query.orderBy('user.id', 'ASC');
+        query = query.orderBy('user.id', sortDirection);
         break;
     }