From 82f1d37e1edabc51fc96be9abab342a6bf1daa13 Mon Sep 17 00:00:00 2001
From: Stephen <stephen.wright@n8n.io>
Date: Thu, 20 Nov 2025 16:43:29 +0000
Subject: [PATCH] reset

---
 .../N8nDataTableServer.test.ts                   | 14 ++------------
 .../__snapshots__/Datatable.test.ts.snap         | 16 +++++++++++-----
 .../users/components/SettingsUsersTable.vue      |  6 +++---
 3 files changed, 16 insertions(+), 20 deletions(-)

diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts
index 7be56842b23..8a383312204 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDataTableServer/N8nDataTableServer.test.ts
@@ -1,5 +1,5 @@
 import userEvent from '@testing-library/user-event';
-import { render, screen, waitFor } from '@testing-library/vue';
+import { render, screen, waitFor, within } from '@testing-library/vue';
 
 import { createComponentRenderer } from '@n8n/design-system/__tests__/render';
 
@@ -100,17 +100,7 @@ describe('N8nDataTableServer', () => {
 
 		await userEvent.click(container.querySelector('thead tr th')!);
 		await userEvent.click(container.querySelector('thead tr th')!);
-
-		// Find the page 2 button in the pagination component
-		const pagination = getByTestId('pagination');
-		const pageButtons = pagination.querySelectorAll('.n8n-pagination__button--page');
-		const page2Button = Array.from(pageButtons).find(
-			(btn) => btn.textContent?.trim() === '2',
-		) as HTMLElement;
-		if (!page2Button) {
-			throw new Error('Page 2 button not found in pagination');
-		}
-		await userEvent.click(page2Button);
+		await userEvent.click(within(getByTestId('pagination')).getByLabelText('page 2'));
 
 		expect(emitted('update:options').length).toBe(3);
 		expect(emitted('update:options')[0]).toStrictEqual([
diff --git a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap
index 68d2e9276d9..a0312811043 100644
--- a/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap
+++ b/packages/frontend/@n8n/design-system/src/components/N8nDatatable/__snapshots__/Datatable.test.ts.snap
@@ -99,12 +99,18 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
     </div>
   </div>
   <div data-v-c73ff18f="" class="pagination">
-    <nav data-v-758ecbea="" data-v-c73ff18f="" class="n8n-pagination is-background">
-      <div data-v-758ecbea="">
-        <!--v-if--><button data-v-758ecbea="" aria-label="Previous Page" type="button" disabled="" class="n8n-pagination__button n8n-pagination__button--prev"><span data-v-758ecbea="">‹</span></button><button data-v-758ecbea="" data-type="page" aria-label="Page 1" aria-current="page" data-selected="true" type="button" class="n8n-pagination__button n8n-pagination__button--page is-active" value="1">1</button><button data-v-758ecbea="" data-type="page" aria-label="Page 2" type="button" class="n8n-pagination__button n8n-pagination__button--page" value="2">2</button><button data-v-758ecbea="" aria-label="Next Page" type="button" class="n8n-pagination__button n8n-pagination__button--next"><span data-v-758ecbea="">›</span></button>
+    <div data-v-c73ff18f="" class="el-pagination is-background is-background"><button type="button" class="btn-prev is-first" disabled="" aria-label="Go to previous page" aria-disabled="true"><i class="el-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+            <path fill="currentColor" d="M609.408 149.376 277.76 489.6a32 32 0 0 0 0 44.672l331.648 340.352a29.12 29.12 0 0 0 41.728 0 30.592 30.592 0 0 0 0-42.752L339.264 511.936l311.872-319.872a30.592 30.592 0 0 0 0-42.688 29.12 29.12 0 0 0-41.728 0z"></path>
+          </svg></i></button>
+      <ul class="el-pager">
+        <li class="is-active number" aria-current="true" aria-label="page 1" tabindex="0"> 1 </li>
         <!--v-if-->
-      </div>
-    </nav>
+        <!--v-if-->
+        <li class="number" aria-current="false" aria-label="page 2" tabindex="0">2</li>
+      </ul><button type="button" class="btn-next is-last" aria-label="Go to next page" aria-disabled="false"><i class="el-icon"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+            <path fill="currentColor" d="M340.864 149.312a30.592 30.592 0 0 0 0 42.752L652.736 512 340.864 831.872a30.592 30.592 0 0 0 0 42.752 29.12 29.12 0 0 0 41.728 0L714.24 534.336a32 32 0 0 0 0-44.672L382.592 149.376a29.12 29.12 0 0 0-41.728 0z"></path>
+          </svg></i></button>
+    </div>
     <div data-v-c73ff18f="" class="pageSizeSelector">
       <div data-v-c73ff18f="" class="n8n-select container withPrepend">
         <div class="prepend">Page size</div>
diff --git a/packages/frontend/editor-ui/src/features/settings/users/components/SettingsUsersTable.vue b/packages/frontend/editor-ui/src/features/settings/users/components/SettingsUsersTable.vue
index cbe44a752ae..bea126e4173 100644
--- a/packages/frontend/editor-ui/src/features/settings/users/components/SettingsUsersTable.vue
+++ b/packages/frontend/editor-ui/src/features/settings/users/components/SettingsUsersTable.vue
@@ -121,9 +121,9 @@ const roleActions = computed<Array<ActionDropdownItem<Role>>>(() => [
 	},
 ]);
 
-const canUpdateRole = computed((): boolean =>
-	hasPermission(['rbac'], { rbac: { scope: ['user:update', 'user:changeRole'] } }),
-);
+const canUpdateRole = computed((): boolean => {
+	return hasPermission(['rbac'], { rbac: { scope: ['user:update', 'user:changeRole'] } });
+});
 
 const filterActions = (user: UsersList['items'][number]) => {
 	if (user.isOwner) return [];