From bc27beb6629883003a8991d7e840ffaa066d41ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Tue, 27 Aug 2024 10:12:39 +0200
Subject: [PATCH] fix(editor): Ensure `Datatable` component renders `All`
 option (#10525)

---
 .../src/components/N8nDatatable/Datatable.vue | 11 +++++++++-
 .../N8nDatatable/__tests__/Datatable.spec.ts  | 21 +++++++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue
index 38dbf44ab7626..8e733e0758725 100644
--- a/packages/design-system/src/components/N8nDatatable/Datatable.vue
+++ b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -7,6 +7,8 @@ import type { DatatableColumn, DatatableRow, DatatableRowDataType } from '../../
 import { useI18n } from '../../composables/useI18n';
 import { getValueByPath } from '../../utils';
 
+const ALL_ROWS = -1;
+
 interface DatatableProps {
 	columns: DatatableColumn[];
 	rows: DatatableRow[];
@@ -41,6 +43,8 @@ const totalRows = computed(() => {
 });
 
 const visibleRows = computed(() => {
+	if (props.rowsPerPage === ALL_ROWS) return props.rows;
+
 	const start = (props.currentPage - 1) * props.rowsPerPage;
 	const end = start + props.rowsPerPage;
 
@@ -59,6 +63,11 @@ function onUpdateCurrentPage(value: number) {
 function onRowsPerPageChange(value: number) {
 	emit('update:rowsPerPage', value);
 
+	if (value === ALL_ROWS) {
+		onUpdateCurrentPage(1);
+		return;
+	}
+
 	const maxPage = Math.ceil(totalRows.value / value);
 	if (maxPage < props.currentPage) {
 		onUpdateCurrentPage(maxPage);
@@ -131,7 +140,7 @@ function getThStyle(column: DatatableColumn) {
 						:label="`${size}`"
 						:value="size"
 					/>
-					<N8nOption :label="`All`" value="*"> </N8nOption>
+					<N8nOption :label="`All`" :value="ALL_ROWS"> </N8nOption>
 				</N8nSelect>
 			</div>
 		</div>
diff --git a/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts b/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts
index 98b4d25f955ca..3bead6c227333 100644
--- a/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts
+++ b/packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts
@@ -75,5 +75,26 @@ describe('components', () => {
 			);
 			expect(wrapper.container.querySelector('tbody td')?.textContent).toEqual('Row slot');
 		});
+
+		it('should render all rows when rowsPerPage is set to -1', () => {
+			const wrapper = render(N8nDatatable, {
+				props: { columns, rows, rowsPerPage: -1 },
+				global: { stubs },
+			});
+
+			const pagination = wrapper.container.querySelector('.pagination');
+			expect(pagination?.querySelector('.el-pager')).toBeNull();
+
+			const pageSizeSelector = wrapper.container.querySelector('.pageSizeSelector');
+			expect(pageSizeSelector?.textContent).toContain('Page size');
+
+			const allOption = wrapper.getByText('All');
+			expect(allOption).not.toBeNull();
+
+			expect(wrapper.container.querySelectorAll('tbody tr').length).toEqual(rows.length);
+			expect(wrapper.container.querySelectorAll('tbody tr td').length).toEqual(
+				columns.length * rows.length,
+			);
+		});
 	});
 });