feat(settings): Allow to sort groups in the account management alphabetically

We can do this purly in the frontend - but when enforced from the backend using the existing system config,
we need to follow the requirement. We then show a warning about the configuration.

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

1 files changed, 80 insertions, 1 deletions

diff --git a/cypress/e2e/settings/users_groups.cy.ts b/cypress/e2e/settings/users_groups.cy.ts
index 7f9052800a1..fd56c558b4f 100644
--- a/cypress/e2e/settings/users_groups.cy.ts
+++ b/cypress/e2e/settings/users_groups.cy.ts
@@ -21,7 +21,7 @@
  */
 
 import { User } from '@nextcloud/cypress'
-import { getUserListRow, handlePasswordConfirmation, toggleEditButton } from './usersUtils'
+import { assertNotExistOrNotVisible, getUserListRow, handlePasswordConfirmation, toggleEditButton } from './usersUtils'
 
 // eslint-disable-next-line n/no-extraneous-import
 import randomString from 'crypto-random-string'
@@ -223,3 +223,82 @@ describe('Settings: Delete a non empty group', () => {
 		})
 	})
 })
+
+describe.only('Settings: Sort groups in the UI', () => {
+	before(() => {
+		// Clear state
+		cy.runOccCommand('group:list --output json').then((output) => {
+			const groups = Object.keys(JSON.parse(output.stdout)).filter((group) => group !== 'admin')
+			groups.forEach((group) => {
+				cy.runOccCommand(`group:delete "${group}"`)
+			})
+		})
+
+		// Add two groups and add one user to group B
+		cy.runOccCommand('group:add A')
+		cy.runOccCommand('group:add B')
+		cy.createRandomUser().then((user) => {
+			cy.runOccCommand(`group:adduser B "${user.userId}"`)
+		})
+
+		// Visit the settings as admin
+		cy.login(admin)
+		cy.visit('/settings/users')
+	})
+
+	it('Can set sort by member count', () => {
+		// open the settings dialog
+		cy.contains('button', 'Account management settings').click()
+
+		cy.contains('.modal-container', 'Account management settings').within(() => {
+			cy.get('[data-test="sortGroupsByMemberCount"] input[type="radio"]').scrollIntoView()
+			cy.get('[data-test="sortGroupsByMemberCount"] input[type="radio"]').check({ force: true })
+			// close the settings dialog
+			cy.get('button.modal-container__close').click()
+		})
+		cy.waitUntil(() => cy.get('.modal-container').should(el => assertNotExistOrNotVisible(el)))
+	})
+
+	it('See that the groups are sorted by the member count', () => {
+		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
+			cy.get('li').eq(0).should('contain', 'B') // 1 member
+			cy.get('li').eq(1).should('contain', 'A') // 0 members
+		})
+	})
+
+	it('See that the order is preserved after a reload', () => {
+		cy.reload()
+		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
+			cy.get('li').eq(0).should('contain', 'B') // 1 member
+			cy.get('li').eq(1).should('contain', 'A') // 0 members
+		})
+	})
+
+	it('Can set sort by group name', () => {
+		// open the settings dialog
+		cy.contains('button', 'Account management settings').click()
+
+		cy.contains('.modal-container', 'Account management settings').within(() => {
+			cy.get('[data-test="sortGroupsByName"] input[type="radio"]').scrollIntoView()
+			cy.get('[data-test="sortGroupsByName"] input[type="radio"]').check({ force: true })
+			// close the settings dialog
+			cy.get('button.modal-container__close').click()
+		})
+		cy.waitUntil(() => cy.get('.modal-container').should(el => assertNotExistOrNotVisible(el)))
+	})
+
+	it('See that the groups are sorted by the user count', () => {
+		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
+			cy.get('li').eq(0).should('contain', 'A')
+			cy.get('li').eq(1).should('contain', 'B')
+		})
+	})
+
+	it('See that the order is preserved after a reload', () => {
+		cy.reload()
+		cy.get('ul[data-cy-users-settings-navigation-groups="custom"]').within(() => {
+			cy.get('li').eq(0).should('contain', 'A')
+			cy.get('li').eq(1).should('contain', 'B')
+		})
+	})
+})