fix(editor): Ensure Datatable component renders All option

https://linear.app/n8n/issue/PAY-1862
n8n-io · Aug 23, 2024 · 7d47e07 · 7d47e07
1 parent 8403f4a
commit 7d47e07
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/packages/design-system/src/components/N8nDatatable/Datatable.vue b/packages/design-system/src/components/N8nDatatable/Datatable.vue
@@ -53,7 +53,7 @@
 						:label="`${size}`"
 						:value="size"
 					/>
-					<N8nOption :label="`All`" value="*"> </N8nOption>
+					<N8nOption :label="`All`" :value="ALL_ROWS"> </N8nOption>
 				</N8nSelect>
 			</div>
 		</div>
@@ -69,6 +69,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[];
@@ -103,6 +105,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;
 
@@ -121,6 +125,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);

diff --git 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,
+			);
+		});
 	});
 });