refactor: Migrate Pagination to composition API (no-changelog) (#9752)

packages/design-system/src/components/N8nDatatable/Datatable.vue

@@ -74,7 +74,7 @@ interface DatatableProps {
 	rows: DatatableRow[];
 	currentPage?: number;
 	pagination?: boolean;
-	rowsPerPage?: number | '*';
+	rowsPerPage?: number;
 }
 
 defineOptions({ name: 'N8nDatatable' });
@@ -92,10 +92,6 @@ const rowsPerPageOptions = ref([10, 25, 50, 100]);
 const $style = useCssModule();
 
 const totalPages = computed(() => {
-	if (props.rowsPerPage === '*') {
-		return 1;
-	}
-
 	return Math.ceil(props.rows.length / props.rowsPerPage);
 });
 
@@ -104,10 +100,6 @@ const totalRows = computed(() => {
 });
 
 const visibleRows = computed(() => {
-	if (props.rowsPerPage === '*') {
-		return props.rows;
-	}
-
 	const start = (props.currentPage - 1) * props.rowsPerPage;
 	const end = start + props.rowsPerPage;
 
@@ -123,10 +115,10 @@ function onUpdateCurrentPage(value: number) {
 	$emit('update:currentPage', value);
 }
 
-function onRowsPerPageChange(value: number | '*') {
+function onRowsPerPageChange(value: number) {
 	$emit('update:rowsPerPage', value);
 
-	const maxPage = value === '*' ? 1 : Math.ceil(totalRows.value / value);
+	const maxPage = Math.ceil(totalRows.value / value);
 	if (maxPage < props.currentPage) {
 		onUpdateCurrentPage(maxPage);
 	}

packages/design-system/src/components/N8nDatatable/__tests__/Datatable.spec.ts

@@ -3,13 +3,13 @@ import N8nDatatable from '../Datatable.vue';
 import { rows, columns } from './data';
 
 const stubs = [
-	// Ideally we'd like to stub N8nSelect, but it doesn't work
+	'n8n-option',
+	'n8n-button',
+	// Ideally we'd like to stub N8nSelect & N8nPagination, but it doesn't work
 	// after migrating to setup script:
 	// https://github.com/vuejs/vue-test-utils/issues/2048
 	// 'n8n-select',
-	'n8n-option',
+	// 'n8n-pagination',
-	'n8n-button',
-	'n8n-pagination',
 ];
 
 describe('components', () => {

packages/design-system/src/components/N8nDatatable/__tests__/__snapshots__/Datatable.spec.ts.snap

@@ -95,7 +95,18 @@ exports[`components > N8nDatatable > should render correctly 1`] = `
     </tbody>
   </table>
   <div class="pagination">
-    <n8n-pagination-stub pagesize="10" total="15" currentpage="1" pagercount="5" layout="prev, pager, next" pagesizes="10,20,30,40,50,100" popperclass="" prevtext="" previcon="[object Object]" nexttext="" nexticon="[object Object]" small="false" background="true" disabled="false" hideonsinglepage="false"></n8n-pagination-stub>
+    <div 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-->
+        <!--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 class="pageSizeSelector">
       <div class="n8n-select container withPrepend">
         <div class="prepend">Page size</div>

packages/design-system/src/components/N8nPagination/Pagination.vue

@@ -1,15 +1,8 @@
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from 'vue';
+import { paginationProps, ElPagination } from 'element-plus';
-import { ElPagination } from 'element-plus';
 
-export default defineComponent({
+defineProps({
-	name: 'N8nPagination',
+	...paginationProps,
-	components: {
-		ElPagination,
-	},
-	props: {
-		...ElPagination.props,
-	},
 });
 </script>
 

packages/editor-ui/src/components/layouts/ResourcesListLayout.vue

@@ -258,7 +258,7 @@ export default defineComponent({
 		const hasFilters = ref(false);
 		const filtersModel = ref(props.filters);
 		const currentPage = ref(1);
-		const rowsPerPage = ref<number | '*'>(10);
+		const rowsPerPage = ref<number>(10);
 		const resettingFilters = ref(false);
 		const search = ref<HTMLElement | null>(null);
 
@@ -332,7 +332,7 @@ export default defineComponent({
 			);
 		};
 
-		const setRowsPerPage = (numberOfRowsPerPage: number | '*') => {
+		const setRowsPerPage = (numberOfRowsPerPage: number) => {
 			rowsPerPage.value = numberOfRowsPerPage;
 		};