From ba76ad7fa094967a0497671e229c26b983199317 Mon Sep 17 00:00:00 2001
From: Neil MacDougall <nwmac@users.noreply.github.com>
Date: Mon, 1 Jul 2024 09:49:59 +0100
Subject: [PATCH] Ensure global roles are listed in a consistent order (#11306)

---
 .../po/components/global-role-binding.po.ts   |  6 ++++
 .../tests/pages/users-and-auth/users.spec.ts  | 30 +++++++++++++++++++
 shell/components/GlobalRoleBindings.vue       | 22 ++++++++++++++
 3 files changed, 58 insertions(+)

diff --git a/cypress/e2e/po/components/global-role-binding.po.ts b/cypress/e2e/po/components/global-role-binding.po.ts
index a4005d95920..e6c5382443e 100644
--- a/cypress/e2e/po/components/global-role-binding.po.ts
+++ b/cypress/e2e/po/components/global-role-binding.po.ts
@@ -9,4 +9,10 @@ export default class GlobalRoleBindings extends ComponentPo {
   roleCheckbox(roleId: string) {
     return new CheckboxInputPo(`[data-testid="grb-checkbox-${ roleId }"]`);
   }
+
+  globalOptions() {
+    return this.self().find('.checkbox-section--global .checkbox-label-slot .checkbox-label').then((els) => {
+      return Cypress.$.makeArray(els).map((el) => el.innerText);
+    });
+  }
 }
diff --git a/cypress/e2e/tests/pages/users-and-auth/users.spec.ts b/cypress/e2e/tests/pages/users-and-auth/users.spec.ts
index 643946e1186..e36cf9dcd83 100644
--- a/cypress/e2e/tests/pages/users-and-auth/users.spec.ts
+++ b/cypress/e2e/tests/pages/users-and-auth/users.spec.ts
@@ -95,6 +95,36 @@ describe('Users', { tags: ['@usersAndAuths', '@adminUser'] }, () => {
     });
   });
 
+  it('shows global roles in specific order', () => {
+    // Intercept roles request and change the order
+    cy.intercept('GET', `/v1/management.cattle.io.globalroles?*`, (req) => {
+      req.continue((res) => {
+        // Move the Administrator role to the end of the list
+        const adminIndex = res.body.data.findIndex((item) => item.id === 'admin');
+        const adminRole = res.body.data[adminIndex];
+
+        res.body.data.splice(adminIndex, 1);
+        res.body.data.push(adminRole);
+
+        res.send(res.body);
+      });
+    });
+
+    usersPo.goTo();
+    usersPo.list().create();
+    userCreate.waitForPage();
+
+    const mgmtUserEditPo = new MgmtUserEditPo();
+
+    mgmtUserEditPo.globalRoleBindings().globalOptions().then((list) => {
+      expect(list.length).to.eq(4);
+      expect(list[0]).to.eq('Administrator');
+      expect(list[1]).to.eq('Restricted Administrator');
+      expect(list[2]).to.eq('Standard User');
+      expect(list[3]).to.eq('User-Base');
+    });
+  });
+
   it('can Refresh Group Memberships', () => {
     // Refresh Group Membership and verify request is made
     usersPo.goTo();
diff --git a/shell/components/GlobalRoleBindings.vue b/shell/components/GlobalRoleBindings.vue
index 75c4025cb6b..8efb64cff5d 100644
--- a/shell/components/GlobalRoleBindings.vue
+++ b/shell/components/GlobalRoleBindings.vue
@@ -69,6 +69,7 @@ export default {
 
         const sort = (a, b) => a.nameDisplay.localeCompare(b.nameDisplay);
 
+        // global roles are not sorted
         this.sortedRoles.builtin = this.sortedRoles.builtin.sort(sort);
         this.sortedRoles.custom = this.sortedRoles.custom.sort(sort);
 
@@ -76,12 +77,33 @@ export default {
           this.globalRoleBindings = await this.$store.dispatch('management/findAll', { type: MANAGEMENT.GLOBAL_ROLE_BINDING, opt: { force: true } });
         }
 
+        // Sort the global roles - use the order defined in 'globalPermissions' and then add the remaining roles after
+        const globalRoles = [];
+        const globalRolesAdded = {};
+
+        this.globalPermissions.forEach((id) => {
+          const role = this.sortedRoles.global.find((r) => r.id === id);
+
+          if (role) {
+            globalRoles.push(role);
+            globalRolesAdded[id] = true;
+          }
+        });
+
+        // Remaining global roles
+        const remainingGlobalRoles = this.sortedRoles.global.filter((r) => !globalRolesAdded[r.id]);
+
+        this.sortedRoles.global = globalRoles;
+        this.sortedRoles.global.push(...remainingGlobalRoles);
+        // End sort of global roles
+
         this.update();
       }
     } catch (e) { }
   },
   data() {
     return {
+      // This not only identifies global roles but the order here is the order we want to display them in the UI
       globalPermissions: [
         'admin',
         'restricted-admin',