feat(editor): Add pagination to the workflows list (#13100)

cypress/e2e/23-variables.cy.ts

@@ -101,18 +101,22 @@ describe('Variables', () => {
 			variablesPage.getters.searchBar().type('NEW');
 			variablesPage.getters.variablesRows().should('have.length', 1);
 			variablesPage.getters.variableRow('NEW').should('contain.text', 'ENV_VAR_NEW');
+			cy.url().should('include', 'search=NEW');
 
 			// Multiple Results
 			variablesPage.getters.searchBar().clear().type('ENV_VAR');
 			variablesPage.getters.variablesRows().should('have.length', 2);
+			cy.url().should('include', 'search=ENV_VAR');
 
 			// All Results
 			variablesPage.getters.searchBar().clear().type('ENV');
 			variablesPage.getters.variablesRows().should('have.length', 3);
+			cy.url().should('include', 'search=ENV');
 
 			// No Results
 			variablesPage.getters.searchBar().clear().type('Some non-existent variable');
 			variablesPage.getters.variablesRows().should('not.exist');
+			cy.url().should('include', 'search=Some+non-existent+variable');
 
 			cy.contains('No variables found').should('be.visible');
 		});

packages/editor-ui/src/api/workflows.ts

@@ -11,7 +11,7 @@ import type {
 	ExecutionSummary,
 	IDataObject,
 } from 'n8n-workflow';
-import { makeRestApiRequest } from '@/utils/apiUtils';
+import { getFullApiResponse, makeRestApiRequest } from '@/utils/apiUtils';
 
 export async function getNewWorkflow(context: IRestApiContext, data?: IDataObject) {
 	const response = await makeRestApiRequest<NewWorkflowResponse>(
@@ -32,10 +32,11 @@ export async function getWorkflow(context: IRestApiContext, id: string, filter?:
 	return await makeRestApiRequest<IWorkflowDb>(context, 'GET', `/workflows/${id}`, sendData);
 }
 
-export async function getWorkflows(context: IRestApiContext, filter?: object) {
+export async function getWorkflows(context: IRestApiContext, filter?: object, options?: object) {
-	return await makeRestApiRequest<IWorkflowDb[]>(context, 'GET', '/workflows', {
+	return await getFullApiResponse<IWorkflowDb[]>(context, 'GET', '/workflows', {
 		includeScopes: true,
 		...(filter ? { filter } : {}),
+		...(options ? options : {}),
 	});
 }
 

packages/editor-ui/src/components/DuplicateWorkflowDialog.vue

@@ -7,7 +7,7 @@ import Modal from '@/components/Modal.vue';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useWorkflowsStore } from '@/stores/workflows.store';
 import type { IWorkflowDataUpdate } from '@/Interface';
-import { createEventBus } from 'n8n-design-system/utils';
+import { createEventBus, type EventBus } from 'n8n-design-system/utils';
 import { useCredentialsStore } from '@/stores/credentials.store';
 import { useWorkflowHelpers } from '@/composables/useWorkflowHelpers';
 import { useRouter } from 'vue-router';
@@ -17,7 +17,7 @@ import { useTelemetry } from '@/composables/useTelemetry';
 const props = defineProps<{
 	modalName: string;
 	isActive: boolean;
-	data: { tags: string[]; id: string; name: string };
+	data: { tags: string[]; id: string; name: string; externalEventBus?: EventBus };
 }>();
 
 const router = useRouter();
@@ -111,6 +111,7 @@ const save = async (): Promise<void> => {
 				workflow_id: props.data.id,
 				sharing_role: workflowHelpers.getWorkflowProjectRole(props.data.id),
 			});
+			props.data.externalEventBus?.emit('workflow-duplicated', { id: props.data.id });
 		}
 	} catch (error) {
 		if (error.httpStatusCode === 403) {

packages/editor-ui/src/components/Projects/ProjectMoveResourceModal.vue

@@ -13,6 +13,7 @@ import ProjectMoveSuccessToastMessage from '@/components/Projects/ProjectMoveSuc
 import { useToast } from '@/composables/useToast';
 import { getResourcePermissions } from '@/permissions';
 import { sortByProperty } from '@/utils/sortUtils';
+import type { EventBus } from 'n8n-design-system/utils';
 
 const props = defineProps<{
 	modalName: string;
@@ -20,6 +21,7 @@ const props = defineProps<{
 		resource: IWorkflowDb | ICredentialsResponse;
 		resourceType: ResourceType;
 		resourceTypeLabel: string;
+		eventBus?: EventBus;
 	};
 }>();
 
@@ -104,6 +106,13 @@ const moveResource = async () => {
 			type: 'success',
 			duration: 8000,
 		});
+		if (props.data.eventBus) {
+			props.data.eventBus.emit('resource-moved', {
+				resourceId: props.data.resource.id,
+				resourceType: props.data.resourceType,
+				targetProjectId: selectedProject.value.id,
+			});
+		}
 	} catch (error) {
 		toast.showError(
 			error.message,

packages/editor-ui/src/components/WorkflowActivator.vue

@@ -18,6 +18,11 @@ const props = defineProps<{
 	workflowId: string;
 	workflowPermissions: PermissionsRecord['workflow'];
 }>();
+
+const emit = defineEmits<{
+	'update:workflowActive': [value: { id: string; active: boolean }];
+}>();
+
 const { showMessage } = useToast();
 const workflowActivate = useWorkflowActivate();
 
@@ -109,7 +114,11 @@ const shouldShowFreeAiCreditsWarning = computed((): boolean => {
 });
 
 async function activeChanged(newActiveState: boolean) {
-	return await workflowActivate.updateWorkflowActivation(props.workflowId, newActiveState);
+	const newState = await workflowActivate.updateWorkflowActivation(
+		props.workflowId,
+		newActiveState,
+	);
+	emit('update:workflowActive', { id: props.workflowId, active: newState });
 }
 
 async function displayActivationError() {

packages/editor-ui/src/components/WorkflowCard.vue

@@ -25,6 +25,7 @@ import { useI18n } from '@/composables/useI18n';
 import { useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import { ResourceType } from '@/utils/projects.utils';
+import type { EventBus } from 'n8n-design-system/utils';
 
 const WORKFLOW_LIST_ITEM_ACTIONS = {
 	OPEN: 'open',
@@ -38,6 +39,7 @@ const props = withDefaults(
 	defineProps<{
 		data: IWorkflowDb;
 		readOnly?: boolean;
+		workflowListEventBus?: EventBus;
 	}>(),
 	{
 		data: () => ({
@@ -53,12 +55,15 @@ const props = withDefaults(
 			versionId: '',
 		}),
 		readOnly: false,
+		workflowListEventBus: undefined,
 	},
 );
 
 const emit = defineEmits<{
 	'expand:tags': [];
 	'click:tag': [tagId: string, e: PointerEvent];
+	'workflow:deleted': [];
+	'workflow:active-toggle': [value: { id: string; active: boolean }];
 }>();
 
 const toast = useToast();
@@ -160,6 +165,7 @@ async function onAction(action: string) {
 					tags: (props.data.tags ?? []).map((tag) =>
 						typeof tag !== 'string' && 'id' in tag ? tag.id : tag,
 					),
+					externalEventBus: props.workflowListEventBus,
 				},
 			});
 			break;
@@ -217,6 +223,7 @@ async function deleteWorkflow() {
 		title: locale.baseText('mainSidebar.showMessage.handleSelect1.title'),
 		type: 'success',
 	});
+	emit('workflow:deleted');
 }
 
 function moveResource() {
@@ -226,9 +233,14 @@ function moveResource() {
 			resource: props.data,
 			resourceType: ResourceType.Workflow,
 			resourceTypeLabel: resourceTypeLabel.value,
+			eventBus: props.workflowListEventBus,
 		},
 	});
 }
+
+const emitWorkflowActiveToggle = (value: { id: string; active: boolean }) => {
+	emit('workflow:active-toggle', value);
+};
 </script>
 
 <template>
@@ -280,6 +292,7 @@ function moveResource() {
 					:workflow-id="data.id"
 					:workflow-permissions="workflowPermissions"
 					data-test-id="workflow-card-activator"
+					@update:workflow-active="emitWorkflowActiveToggle"
 				/>
 
 				<n8n-action-toggle

packages/editor-ui/src/components/forms/ResourceFiltersDropdown.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { ref, computed, watch, onBeforeMount } from 'vue';
+import { computed, watch, onBeforeMount } from 'vue';
 import { EnterpriseEditionFeature } from '@/constants';
 import { useProjectsStore } from '@/stores/projects.store';
 import type { ProjectSharingData } from '@/types/projects.types';
 import ProjectSharing from '@/components/Projects/ProjectSharing.vue';
-import type { IFilters } from '../layouts/ResourcesListLayout.vue';
+import type { BaseFilters } from '../layouts/ResourcesListLayout.vue';
 import { useI18n } from '@/composables/useI18n';
 
 type IResourceFiltersType = Record<string, boolean | string | string[]>;
@@ -25,16 +25,25 @@ const props = withDefaults(
 );
 
 const emit = defineEmits<{
-	'update:modelValue': [value: IFilters];
+	'update:modelValue': [value: BaseFilters];
 	'update:filtersLength': [value: number];
 }>();
 
-const selectedProject = ref<ProjectSharingData | null>(null);
-
 const projectsStore = useProjectsStore();
 
 const i18n = useI18n();
 
+const selectedProject = computed<ProjectSharingData | null>({
+	get: () => {
+		return (
+			projectsStore.availableProjects.find(
+				(project) => project.id === props.modelValue.homeProject,
+			) ?? null
+		);
+	},
+	set: (value) => setKeyValue('homeProject', value?.id ?? ''),
+});
+
 const filtersLength = computed(() => {
 	let length = 0;
 
@@ -67,7 +76,7 @@ const setKeyValue = (key: string, value: unknown) => {
 	const filters = {
 		...props.modelValue,
 		[key]: value,
-	} as IFilters;
+	} as BaseFilters;
 
 	emit('update:modelValue', filters);
 };
@@ -76,7 +85,7 @@ const resetFilters = () => {
 	if (props.reset) {
 		props.reset();
 	} else {
-		const filters = { ...props.modelValue } as IFilters;
+		const filters = { ...props.modelValue } as BaseFilters;
 
 		props.keys.forEach((key) => {
 			filters[key] = Array.isArray(props.modelValue[key]) ? [] : '';
@@ -93,10 +102,6 @@ watch(filtersLength, (value) => {
 
 onBeforeMount(async () => {
 	await projectsStore.getAvailableProjects();
-	selectedProject.value =
-		projectsStore.availableProjects.find(
-			(project) => project.id === props.modelValue.homeProject,
-		) ?? null;
 });
 </script>
 
@@ -113,6 +118,7 @@ onBeforeMount(async () => {
 				<n8n-badge
 					v-show="filtersLength > 0"
 					:class="$style['filter-button-count']"
+					data-test-id="resources-list-filters-count"
 					theme="primary"
 				>
 					{{ filtersLength }}

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

@@ -10,12 +10,12 @@ import type { DatatableColumn } from 'n8n-design-system';
 import { useI18n } from '@/composables/useI18n';
 import { useDebounce } from '@/composables/useDebounce';
 import { useTelemetry } from '@/composables/useTelemetry';
-import { useRoute } from 'vue-router';
+import { useRoute, useRouter } from 'vue-router';
 
 import type { BaseTextKey } from '@/plugins/i18n';
 import type { Scope } from '@n8n/permissions';
 
-export type IResource = {
+export type Resource = {
 	id: string;
 	name?: string;
 	value?: string;
@@ -28,54 +28,82 @@ export type IResource = {
 	sharedWithProjects?: ProjectSharingData[];
 };
 
-export interface IFilters {
+export type BaseFilters = {
 	search: string;
 	homeProject: string;
 	[key: string]: boolean | string | string[];
-}
+};
 
-type IResourceKeyType = 'credentials' | 'workflows' | 'variables';
+type ResourceKeyType = 'credentials' | 'workflows' | 'variables';
+
+const route = useRoute();
+const router = useRouter();
+const i18n = useI18n();
+const { callDebounced } = useDebounce();
+const usersStore = useUsersStore();
+const telemetry = useTelemetry();
 
 const props = withDefaults(
 	defineProps<{
-		resourceKey: IResourceKeyType;
+		resourceKey: ResourceKeyType;
-		displayName?: (resource: IResource) => string;
+		displayName?: (resource: Resource) => string;
-		resources: IResource[];
+		resources: Resource[];
 		disabled: boolean;
 		initialize?: () => Promise<void>;
-		filters?: IFilters;
+		filters?: BaseFilters;
 		additionalFiltersHandler?: (
-			resource: IResource,
+			resource: Resource,
-			filters: IFilters,
+			filters: BaseFilters,
 			matches: boolean,
 		) => boolean;
 		shareable?: boolean;
 		showFiltersDropdown?: boolean;
-		sortFns?: Record<string, (a: IResource, b: IResource) => number>;
+		sortFns?: Record<string, (a: Resource, b: Resource) => number>;
 		sortOptions?: string[];
-		type?: 'datatable' | 'list';
+		type?: 'datatable' | 'list-full' | 'list-paginated';
 		typeProps: { itemSize: number } | { columns: DatatableColumn[] };
 		loading: boolean;
+		customPageSize?: number;
+		availablePageSizeOptions?: number[];
+		totalItems?: number;
+		resourcesRefreshing?: boolean;
+		// Set to true if sorting and filtering is done outside of the component
+		dontPerformSortingAndFiltering?: boolean;
 	}>(),
 	{
-		displayName: (resource: IResource) => resource.name || '',
+		displayName: (resource: Resource) => resource.name || '',
 		initialize: async () => {},
 		filters: () => ({ search: '', homeProject: '' }),
 		sortFns: () => ({}),
 		sortOptions: () => ['lastUpdated', 'lastCreated', 'nameAsc', 'nameDesc'],
-		type: 'list',
+		type: 'list-full',
 		typeProps: () => ({ itemSize: 80 }),
 		loading: true,
 		additionalFiltersHandler: undefined,
 		showFiltersDropdown: true,
 		shareable: true,
+		customPageSize: 25,
+		availablePageSizeOptions: () => [10, 25, 50, 100],
+		totalItems: 0,
+		dontPerformSortingAndFiltering: false,
+		resourcesRefreshing: false,
 	},
 );
 
+const sortBy = ref(props.sortOptions[0]);
+const hasFilters = ref(false);
+const currentPage = ref(1);
+const rowsPerPage = ref<number>(props.customPageSize);
+const resettingFilters = ref(false);
+const search = ref<HTMLElement | null>(null);
+
 const emit = defineEmits<{
-	'update:filters': [value: IFilters];
+	'update:filters': [value: BaseFilters];
 	'click:add': [event: Event];
+	'update:current-page': [page: number];
+	'update:page-size': [pageSize: number];
 	sort: [value: string];
+	'update:search': [value: string];
 }>();
 
 defineSlots<{
@@ -91,29 +119,33 @@ defineSlots<{
 	}): unknown;
 	// eslint-disable-next-line @typescript-eslint/no-explicit-any
 	default(props: { data: any; updateItemSize: (data: any) => void }): unknown;
+	item(props: { item: unknown; index: number }): unknown;
 }>();
 
-const route = useRoute();
-const i18n = useI18n();
-const { callDebounced } = useDebounce();
-const usersStore = useUsersStore();
-const telemetry = useTelemetry();
-
-const sortBy = ref(props.sortOptions[0]);
-const hasFilters = ref(false);
-const filtersModel = ref(props.filters);
-const currentPage = ref(1);
-const rowsPerPage = ref<number>(25);
-const resettingFilters = ref(false);
-const search = ref<HTMLElement | null>(null);
-
 //computed
+const filtersModel = computed({
+	get: () => props.filters,
+	set: (newValue) => emit('update:filters', newValue),
+});
+
+const showEmptyState = computed(() => {
+	return (
+		props.resources.length === 0 &&
+		// Don't show empty state if resources are refreshing or if filters are being set
+		!hasFilters.value &&
+		!filtersModel.value.search &&
+		!props.resourcesRefreshing
+	);
+});
 
 const filterKeys = computed(() => {
 	return Object.keys(filtersModel.value);
 });
 
 const filteredAndSortedResources = computed(() => {
+	if (props.dontPerformSortingAndFiltering) {
+		return props.resources;
+	}
 	const filtered = props.resources.filter((resource) => {
 		let matches = true;
 
@@ -159,126 +191,15 @@ const filteredAndSortedResources = computed(() => {
 	});
 });
 
-//methods
-
-const focusSearchInput = () => {
-	if (search.value) {
-		search.value.focus();
-	}
-};
-
-const hasAppliedFilters = (): boolean => {
-	return !!filterKeys.value.find((key) => {
-		if (key === 'search') return false;
-
-		if (typeof props.filters[key] === 'boolean') {
-			return props.filters[key];
-		}
-
-		if (Array.isArray(props.filters[key])) {
-			return props.filters[key].length > 0;
-		}
-
-		return props.filters[key] !== '';
-	});
-};
-
-const setRowsPerPage = (numberOfRowsPerPage: number) => {
-	rowsPerPage.value = numberOfRowsPerPage;
-};
-
-const setCurrentPage = (page: number) => {
-	currentPage.value = page;
-};
-
-defineExpose({
-	currentPage,
-	setCurrentPage,
-});
-
-const sendFiltersTelemetry = (source: string) => {
-	// Prevent sending multiple telemetry events when resetting filters
-	// Timeout is required to wait for search debounce to be over
-	if (resettingFilters.value) {
-		if (source !== 'reset') {
-			return;
-		}
-
-		setTimeout(() => (resettingFilters.value = false), 1500);
-	}
-
-	const filters = filtersModel.value as Record<string, string[] | string | boolean>;
-	const filtersSet: string[] = [];
-	const filterValues: Array<string[] | string | boolean | null> = [];
-
-	Object.keys(filters).forEach((key) => {
-		if (filters[key]) {
-			filtersSet.push(key);
-			filterValues.push(key === 'search' ? null : filters[key]);
-		}
-	});
-
-	telemetry.track(`User set filters in ${props.resourceKey} list`, {
-		filters_set: filtersSet,
-		filter_values: filterValues,
-		[`${props.resourceKey}_total_in_view`]: props.resources.length,
-		[`${props.resourceKey}_after_filtering`]: filteredAndSortedResources.value.length,
-	});
-};
-
-const onAddButtonClick = (e: Event) => {
-	emit('click:add', e);
-};
-
-const onUpdateFilters = (e: IFilters) => {
-	emit('update:filters', e);
-};
-
-const resetFilters = () => {
-	Object.keys(filtersModel.value).forEach((key) => {
-		filtersModel.value[key] = Array.isArray(filtersModel.value[key]) ? [] : '';
-	});
-
-	resettingFilters.value = true;
-	sendFiltersTelemetry('reset');
-	emit('update:filters', filtersModel.value);
-};
-
-const itemSize = () => {
-	if ('itemSize' in props.typeProps) {
-		return props.typeProps.itemSize;
-	}
-	return 0;
-};
-
-const getColumns = () => {
-	if ('columns' in props.typeProps) {
-		return props.typeProps.columns;
-	}
-	return {};
-};
-
-const sendSortingTelemetry = () => {
-	telemetry.track(`User changed sorting in ${props.resourceKey} list`, {
-		sorting: sortBy.value,
-	});
-};
-
-const onUpdateFiltersLength = (length: number) => {
-	hasFilters.value = length > 0;
-};
-
-const onSearch = (s: string) => {
-	filtersModel.value.search = s;
-	emit('update:filters', filtersModel.value);
-};
-
 //watchers
 
 watch(
 	() => props.filters,
 	(value) => {
 		filtersModel.value = value;
+		if (hasAppliedFilters()) {
+			hasFilters.value = true;
+		}
 	},
 );
 
@@ -332,12 +253,22 @@ watch(
 
 watch(
 	() => route?.params?.projectId,
-	() => {
+	async () => {
-		resetFilters();
+		await resetFilters();
 	},
 );
 
+watch(
+	() => props.resources,
+	async () => {
+		await nextTick();
+		focusSearchInput();
+	},
+);
+
+// Lifecycle hooks
 onMounted(async () => {
+	await loadPaginationFromQueryString();
 	await props.initialize();
 	await nextTick();
 
@@ -347,6 +278,181 @@ onMounted(async () => {
 		hasFilters.value = true;
 	}
 });
+
+//methods
+const focusSearchInput = () => {
+	if (search.value) {
+		search.value.focus();
+	}
+};
+
+const hasAppliedFilters = (): boolean => {
+	return !!filterKeys.value.find((key) => {
+		if (key === 'search') return false;
+
+		if (typeof props.filters[key] === 'boolean') {
+			return props.filters[key];
+		}
+
+		if (Array.isArray(props.filters[key])) {
+			return props.filters[key].length > 0;
+		}
+
+		return props.filters[key] !== '';
+	});
+};
+
+const setRowsPerPage = async (numberOfRowsPerPage: number) => {
+	rowsPerPage.value = numberOfRowsPerPage;
+	await savePaginationToQueryString();
+	emit('update:page-size', numberOfRowsPerPage);
+};
+
+const setCurrentPage = async (page: number) => {
+	currentPage.value = page;
+	await savePaginationToQueryString();
+	emit('update:current-page', page);
+};
+
+defineExpose({
+	currentPage,
+	setCurrentPage,
+});
+
+const sendFiltersTelemetry = (source: string) => {
+	// Prevent sending multiple telemetry events when resetting filters
+	// Timeout is required to wait for search debounce to be over
+	if (resettingFilters.value) {
+		if (source !== 'reset') {
+			return;
+		}
+
+		setTimeout(() => (resettingFilters.value = false), 1500);
+	}
+
+	const filters = filtersModel.value as Record<string, string[] | string | boolean>;
+	const filtersSet: string[] = [];
+	const filterValues: Array<string[] | string | boolean | null> = [];
+
+	Object.keys(filters).forEach((key) => {
+		if (filters[key]) {
+			filtersSet.push(key);
+			filterValues.push(key === 'search' ? null : filters[key]);
+		}
+	});
+
+	telemetry.track(`User set filters in ${props.resourceKey} list`, {
+		filters_set: filtersSet,
+		filter_values: filterValues,
+		[`${props.resourceKey}_total_in_view`]: props.resources.length,
+		[`${props.resourceKey}_after_filtering`]: filteredAndSortedResources.value.length,
+	});
+};
+
+const onAddButtonClick = (e: Event) => {
+	emit('click:add', e);
+};
+
+const onUpdateFilters = (e: BaseFilters) => {
+	emit('update:filters', e);
+};
+
+const resetFilters = async () => {
+	Object.keys(filtersModel.value).forEach((key) => {
+		filtersModel.value[key] = Array.isArray(filtersModel.value[key]) ? [] : '';
+	});
+
+	// Reset the pagination
+	await setCurrentPage(1);
+	await setRowsPerPage(props.customPageSize);
+
+	resettingFilters.value = true;
+	hasFilters.value = false;
+	sendFiltersTelemetry('reset');
+	emit('update:filters', filtersModel.value);
+};
+
+const itemSize = () => {
+	if ('itemSize' in props.typeProps) {
+		return props.typeProps.itemSize;
+	}
+	return 0;
+};
+
+const getColumns = () => {
+	if ('columns' in props.typeProps) {
+		return props.typeProps.columns;
+	}
+	return {};
+};
+
+const sendSortingTelemetry = () => {
+	telemetry.track(`User changed sorting in ${props.resourceKey} list`, {
+		sorting: sortBy.value,
+	});
+};
+
+const onUpdateFiltersLength = (length: number) => {
+	hasFilters.value = length > 0;
+};
+
+const onSearch = (s: string) => {
+	filtersModel.value.search = s;
+	emit('update:search', s);
+};
+
+const findNearestPageSize = (size: number): number => {
+	return props.availablePageSizeOptions.reduce((prev, curr) =>
+		Math.abs(curr - size) < Math.abs(prev - size) ? curr : prev,
+	);
+};
+
+const savePaginationToQueryString = async () => {
+	// For now, only available for paginated lists
+	if (props.type !== 'list-paginated') {
+		return;
+	}
+	const currentQuery = { ...route.query };
+
+	// Update pagination parameters
+	if (currentPage.value !== 1) {
+		currentQuery.page = currentPage.value.toString();
+	} else {
+		delete currentQuery.page;
+	}
+
+	if (rowsPerPage.value !== props.customPageSize) {
+		currentQuery.pageSize = rowsPerPage.value.toString();
+	} else {
+		delete currentQuery.pageSize;
+	}
+
+	await router.replace({
+		query: Object.keys(currentQuery).length ? currentQuery : undefined,
+	});
+};
+
+const loadPaginationFromQueryString = async () => {
+	// For now, only available for paginated lists
+	if (props.type !== 'list-paginated') {
+		return;
+	}
+	const query = router.currentRoute.value.query;
+
+	if (query.page) {
+		await setCurrentPage(parseInt(query.page as string, 10));
+	}
+
+	if (query.pageSize) {
+		const parsedSize = parseInt(query.pageSize as string, 10);
+		// Round to the nearest available page size, this will prevent users from passing arbitrary values
+		await setRowsPerPage(findNearestPageSize(parsedSize));
+	}
+
+	if (query.sort) {
+		sortBy.value = query.sort as string;
+	}
+};
 </script>
 
 <template>
@@ -358,7 +464,7 @@ onMounted(async () => {
 			<n8n-loading :rows="25" :shrink-last="false" />
 		</div>
 		<template v-else>
-			<div v-if="resources.length === 0">
+			<div v-if="showEmptyState">
 				<slot name="empty">
 					<n8n-action-box
 						data-test-id="empty-resources-list"
@@ -446,13 +552,17 @@ onMounted(async () => {
 
 				<slot name="preamble" />
 
+				<div v-if="resourcesRefreshing" class="resource-list-loading">
+					<n8n-loading :rows="rowsPerPage" :shrink-last="false" />
+				</div>
 				<div
-					v-if="filteredAndSortedResources.length > 0"
+					v-else-if="filteredAndSortedResources.length > 0"
 					ref="listWrapperRef"
 					:class="$style.listWrapper"
 				>
+					<!-- FULL SCROLLING LIST (Shows all resources, filtering and sorting is done in this component) -->
 					<n8n-recycle-scroller
-						v-if="type === 'list'"
+						v-if="type === 'list-full'"
 						data-test-id="resources-list"
 						:items="filteredAndSortedResources"
 						:item-size="itemSize()"
@@ -462,6 +572,29 @@ onMounted(async () => {
 							<slot :data="item" :update-item-size="updateItemSize" />
 						</template>
 					</n8n-recycle-scroller>
+					<!-- PAGINATED LIST -->
+					<div v-else-if="type === 'list-paginated'" :class="$style.paginatedListWrapper">
+						<div :class="$style.listItems">
+							<div v-for="(item, index) in resources" :key="index" :class="$style.listItem">
+								<slot name="item" :item="item" :index="index">
+									{{ item }}
+								</slot>
+							</div>
+						</div>
+						<div :class="$style.listPagination">
+							<el-pagination
+								v-model:current-page="currentPage"
+								v-model:page-size="rowsPerPage"
+								background
+								:total="totalItems"
+								:page-sizes="availablePageSizeOptions"
+								layout="total, prev, pager, next, sizes"
+								@update:current-page="setCurrentPage"
+								@size-change="setRowsPerPage"
+							></el-pagination>
+						</div>
+					</div>
+					<!-- DATATABLE -->
 					<n8n-datatable
 						v-if="type === 'datatable'"
 						data-test-id="resources-table"
@@ -530,6 +663,35 @@ onMounted(async () => {
 	width: 100%;
 }
 
+.paginatedListWrapper {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+	overflow: auto;
+	gap: var(--spacing-m);
+}
+
+.listPagination {
+	display: flex;
+	justify-content: flex-end;
+	margin-bottom: var(--spacing-l);
+
+	:global(.el-pagination__sizes) {
+		height: 100%;
+		position: relative;
+		top: -1px;
+
+		input {
+			height: 100%;
+			min-height: 28px;
+		}
+
+		:global(.el-input__suffix) {
+			width: var(--spacing-m);
+		}
+	}
+}
+
 .sort-and-filter {
 	white-space: nowrap;
 

packages/editor-ui/src/composables/useWorkflowActivate.ts

@@ -34,7 +34,8 @@ export function useWorkflowActivate() {
 		workflowId: string | undefined,
 		newActiveState: boolean,
 		telemetrySource?: string,
-	) => {
+	): Promise<boolean> => {
+		// Add return type
 		updatingWorkflowActivation.value = true;
 		const nodesIssuesExist = workflowsStore.nodesIssuesExist;
 
@@ -43,7 +44,7 @@ export function useWorkflowActivate() {
 			const saved = await workflowHelpers.saveCurrentWorkflow();
 			if (!saved) {
 				updatingWorkflowActivation.value = false;
-				return;
+				return false; // Return false if save failed
 			}
 			currWorkflowId = workflowsStore.workflowId;
 		}
@@ -69,7 +70,7 @@ export function useWorkflowActivate() {
 				});
 				updatingWorkflowActivation.value = false;
 
-				return;
+				return true; // Already active, return true
 			}
 
 			if (isCurrentWorkflow && nodesIssuesExist && newActiveState) {
@@ -84,7 +85,7 @@ export function useWorkflowActivate() {
 				});
 
 				updatingWorkflowActivation.value = false;
-				return;
+				return false; // Return false if there are node issues
 			}
 
 			await workflowHelpers.updateWorkflow(
@@ -100,7 +101,7 @@ export function useWorkflowActivate() {
 				}) + ':',
 			);
 			updatingWorkflowActivation.value = false;
-			return;
+			return false; // Return false if update failed
 		}
 
 		const activationEventName = isCurrentWorkflow
@@ -120,6 +121,8 @@ export function useWorkflowActivate() {
 				await npsSurveyStore.fetchPromptsData();
 			}
 		}
+
+		return newActiveState; // Return the new state after successful update
 	};
 
 	const activateCurrentWorkflow = async (telemetrySource?: string) => {

packages/editor-ui/src/constants.ts

@@ -33,6 +33,7 @@ export const MIN_WORKFLOW_NAME_LENGTH = 1;
 export const MAX_WORKFLOW_NAME_LENGTH = 128;
 export const DUPLICATE_POSTFFIX = ' copy';
 export const NODE_OUTPUT_DEFAULT_KEY = '_NODE_OUTPUT_DEFAULT_KEY_';
+export const DEFAULT_WORKFLOW_PAGE_SIZE = 10;
 
 // tags
 export const MAX_TAG_NAME_LENGTH = 24;

packages/editor-ui/src/stores/workflows.store.test.ts

@@ -405,7 +405,10 @@ describe('useWorkflowsStore', () => {
 	describe('fetchAllWorkflows()', () => {
 		it('should fetch workflows successfully', async () => {
 			const mockWorkflows = [{ id: '1', name: 'Test Workflow' }] as IWorkflowDb[];
-			vi.mocked(workflowsApi).getWorkflows.mockResolvedValue(mockWorkflows);
+			vi.mocked(workflowsApi).getWorkflows.mockResolvedValue({
+				count: mockWorkflows.length,
+				data: mockWorkflows,
+			});
 
 			await workflowsStore.fetchAllWorkflows();
 

packages/editor-ui/src/stores/workflows.store.ts

@@ -2,6 +2,7 @@ import {
 	AI_NODES_PACKAGE_NAME,
 	CHAT_TRIGGER_NODE_TYPE,
 	DEFAULT_NEW_WORKFLOW_NAME,
+	DEFAULT_WORKFLOW_PAGE_SIZE,
 	DUPLICATE_POSTFFIX,
 	ERROR_TRIGGER_NODE_TYPE,
 	FORM_NODE_TYPE,
@@ -126,6 +127,8 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 
 	const version = computed(() => settingsStore.partialExecutionVersion);
 	const workflow = ref<IWorkflowDb>(createEmptyWorkflow());
+	// For paginated workflow lists
+	const totalWorkflowCount = ref(0);
 	const usedCredentials = ref<Record<string, IUsedCredential>>({});
 
 	const activeWorkflows = ref<string[]>([]);
@@ -475,12 +478,37 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		);
 	}
 
+	async function fetchWorkflowsPage(
+		projectId?: string,
+		page = 1,
+		pageSize = DEFAULT_WORKFLOW_PAGE_SIZE,
+		sortBy?: string,
+		filters: { name?: string; tags?: string[]; active?: boolean } = {},
+	): Promise<IWorkflowDb[]> {
+		const filter = { ...filters, projectId };
+		const options = {
+			skip: (page - 1) * pageSize,
+			take: pageSize,
+			sortBy,
+		};
+
+		const { count, data } = await workflowsApi.getWorkflows(
+			rootStore.restApiContext,
+			Object.keys(filter).length ? filter : undefined,
+			Object.keys(options).length ? options : undefined,
+		);
+
+		setWorkflows(data);
+		totalWorkflowCount.value = count;
+		return data;
+	}
+
 	async function fetchAllWorkflows(projectId?: string): Promise<IWorkflowDb[]> {
 		const filter = {
 			projectId,
 		};
 
-		const workflows = await workflowsApi.getWorkflows(
+		const { data: workflows } = await workflowsApi.getWorkflows(
 			rootStore.restApiContext,
 			isEmpty(filter) ? undefined : filter,
 		);
@@ -1675,6 +1703,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		getWorkflowFromUrl,
 		getActivationError,
 		fetchAllWorkflows,
+		fetchWorkflowsPage,
 		fetchWorkflow,
 		getNewWorkflowData,
 		makeNewWorkflowShareable,
@@ -1748,5 +1777,6 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		setNodes,
 		setConnections,
 		markExecutionAsStopped,
+		totalWorkflowCount,
 	};
 });

packages/editor-ui/src/utils/apiUtils.ts

@@ -131,6 +131,31 @@ export async function request(config: {
 	}
 }
 
+/**
+ * Sends a request to the API and returns the response without extracting the data key.
+ * @param context Rest API context
+ * @param method HTTP method
+ * @param endpoint relative path to the API endpoint
+ * @param data request data
+ * @returns data and total count
+ */
+export async function getFullApiResponse<T>(
+	context: IRestApiContext,
+	method: Method,
+	endpoint: string,
+	data?: GenericValue | GenericValue[],
+) {
+	const response = await request({
+		method,
+		baseURL: context.baseUrl,
+		endpoint,
+		headers: { 'push-ref': context.pushRef },
+		data,
+	});
+
+	return response as { count: number; data: T };
+}
+
 export async function makeRestApiRequest<T>(
 	context: IRestApiContext,
 	method: Method,

packages/editor-ui/src/views/CredentialsView.vue

@@ -4,8 +4,8 @@ import { useRoute, useRouter, type LocationQueryRaw } from 'vue-router';
 import type { ICredentialsResponse, ICredentialTypeMap } from '@/Interface';
 import type { ICredentialType, ICredentialsDecrypted } from 'n8n-workflow';
 import ResourcesListLayout, {
-	type IResource,
+	type Resource,
-	type IFilters,
+	type BaseFilters,
 } from '@/components/layouts/ResourcesListLayout.vue';
 import CredentialCard from '@/components/CredentialCard.vue';
 import {
@@ -49,15 +49,19 @@ const router = useRouter();
 const telemetry = useTelemetry();
 const i18n = useI18n();
 
-type Filters = IFilters & { type?: string[]; setupNeeded?: boolean };
+type Filters = BaseFilters & { type?: string[]; setupNeeded?: boolean };
 const updateFilter = (state: Filters) => {
 	void router.replace({ query: pickBy(state) as LocationQueryRaw });
 };
 
-const filters = computed<Filters>(
+const onSearchUpdated = (search: string) => {
-	() =>
+	updateFilter({ ...filters.value, search });
-		({ ...route.query, setupNeeded: route.query.setupNeeded?.toString() === 'true' }) as Filters,
+};
-);
+
+const filters = ref<Filters>({
+	...route.query,
+	setupNeeded: route.query.setupNeeded?.toString() === 'true',
+} as Filters);
 const loading = ref(false);
 
 const needsSetup = (data: string | undefined): boolean => {
@@ -69,7 +73,7 @@ const needsSetup = (data: string | undefined): boolean => {
 	return Object.values(dataObject).every((value) => !value || value === CREDENTIAL_EMPTY_VALUE);
 };
 
-const allCredentials = computed<IResource[]>(() =>
+const allCredentials = computed<Resource[]>(() =>
 	credentialsStore.allCredentials.map((credential) => ({
 		id: credential.id,
 		name: credential.name,
@@ -136,11 +140,11 @@ watch(
 	},
 );
 
-const onFilter = (resource: IResource, newFilters: IFilters, matches: boolean): boolean => {
+const onFilter = (resource: Resource, newFilters: BaseFilters, matches: boolean): boolean => {
-	const iResource = resource as ICredentialsResponse & { needsSetup: boolean };
+	const Resource = resource as ICredentialsResponse & { needsSetup: boolean };
 	const filtersToApply = newFilters as Filters;
 	if (filtersToApply.type && filtersToApply.type.length > 0) {
-		matches = matches && filtersToApply.type.includes(iResource.type);
+		matches = matches && filtersToApply.type.includes(Resource.type);
 	}
 
 	if (filtersToApply.search) {
@@ -148,12 +152,12 @@ const onFilter = (resource: IResource, newFilters: IFilters, matches: boolean):
 
 		matches =
 			matches ||
-			(credentialTypesById.value[iResource.type] &&
+			(credentialTypesById.value[Resource.type] &&
-				credentialTypesById.value[iResource.type].displayName.toLowerCase().includes(searchString));
+				credentialTypesById.value[Resource.type].displayName.toLowerCase().includes(searchString));
 	}
 
 	if (filtersToApply.setupNeeded) {
-		matches = matches && iResource.needsSetup;
+		matches = matches && Resource.needsSetup;
 	}
 
 	return matches;
@@ -201,15 +205,16 @@ onMounted(() => {
 <template>
 	<ResourcesListLayout
 		ref="layout"
+		v-model:filters="filters"
 		resource-key="credentials"
 		:resources="allCredentials"
 		:initialize="initialize"
-		:filters="filters"
 		:additional-filters-handler="onFilter"
 		:type-props="{ itemSize: 77 }"
 		:loading="loading"
 		:disabled="readOnlyEnv || !projectPermissions.credential.create"
 		@update:filters="updateFilter"
+		@update:search="onSearchUpdated"
 	>
 		<template #header>
 			<ProjectHeader />

packages/editor-ui/src/views/VariablesView.vue

@@ -15,8 +15,8 @@ import VariablesForm from '@/components/VariablesForm.vue';
 import VariablesUsageBadge from '@/components/VariablesUsageBadge.vue';
 
 import ResourcesListLayout, {
-	type IResource,
+	type Resource,
-	type IFilters,
+	type BaseFilters,
 } from '@/components/layouts/ResourcesListLayout.vue';
 
 import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
@@ -154,26 +154,30 @@ const handleDeleteVariable = async (variable: EnvironmentVariable) => {
 	}
 };
 
-type Filters = IFilters & { incomplete?: boolean };
+type Filters = BaseFilters & { incomplete?: boolean };
 const updateFilter = (state: Filters) => {
 	void router.replace({ query: pickBy(state) as LocationQueryRaw });
 };
-const filters = computed<Filters>(
+const onSearchUpdated = (search: string) => {
-	() => ({ ...route.query, incomplete: route.query.incomplete?.toString() === 'true' }) as Filters,
+	updateFilter({ ...filters.value, search });
-);
+};
+const filters = ref<Filters>({
+	...route.query,
+	incomplete: route.query.incomplete?.toString() === 'true',
+} as Filters);
 
-const handleFilter = (resource: IResource, newFilters: IFilters, matches: boolean): boolean => {
+const handleFilter = (resource: Resource, newFilters: BaseFilters, matches: boolean): boolean => {
-	const iResource = resource as EnvironmentVariable;
+	const Resource = resource as EnvironmentVariable;
 	const filtersToApply = newFilters as Filters;
 
 	if (filtersToApply.incomplete) {
-		matches = matches && !iResource.value;
+		matches = matches && !Resource.value;
 	}
 
 	return matches;
 };
 
-const nameSortFn = (a: IResource, b: IResource, direction: 'asc' | 'desc') => {
+const nameSortFn = (a: Resource, b: Resource, direction: 'asc' | 'desc') => {
 	if (`${a.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
 		return -1;
 	} else if (`${b.id}`.startsWith(TEMPORARY_VARIABLE_UID_BASE)) {
@@ -185,8 +189,8 @@ const nameSortFn = (a: IResource, b: IResource, direction: 'asc' | 'desc') => {
 		: displayName(b).trim().localeCompare(displayName(a).trim());
 };
 const sortFns = {
-	nameAsc: (a: IResource, b: IResource) => nameSortFn(a, b, 'asc'),
+	nameAsc: (a: Resource, b: Resource) => nameSortFn(a, b, 'asc'),
-	nameDesc: (a: IResource, b: IResource) => nameSortFn(a, b, 'desc'),
+	nameDesc: (a: Resource, b: Resource) => nameSortFn(a, b, 'desc'),
 };
 
 const unavailableNoticeProps = computed(() => ({
@@ -203,7 +207,7 @@ function goToUpgrade() {
 	void usePageRedirectionHelper().goToUpgrade('variables', 'upgrade-variables');
 }
 
-function displayName(resource: IResource) {
+function displayName(resource: Resource) {
 	return (resource as EnvironmentVariable).key;
 }
 
@@ -223,10 +227,10 @@ onMounted(() => {
 <template>
 	<ResourcesListLayout
 		ref="layoutRef"
+		v-model:filters="filters"
 		resource-key="variables"
 		:disabled="!isFeatureEnabled"
 		:resources="variables"
-		:filters="filters"
 		:additional-filters-handler="handleFilter"
 		:shareable="false"
 		:display-name="displayName"
@@ -236,6 +240,7 @@ onMounted(() => {
 		:type-props="{ columns }"
 		:loading="isLoading"
 		@update:filters="updateFilter"
+		@update:search="onSearchUpdated"
 		@click:add="addEmptyVariableForm"
 	>
 		<template #header>

packages/editor-ui/src/views/WorkflowsView.test.ts

@@ -6,8 +6,8 @@ import { createComponentRenderer } from '@/__tests__/render';
 import { useProjectsStore } from '@/stores/projects.store';
 import { createTestingPinia } from '@pinia/testing';
 import { STORES, VIEWS } from '@/constants';
-import { mockedStore } from '@/__tests__/utils';
+import { mockedStore, waitAllPromises } from '@/__tests__/utils';
-import type { IUser, IWorkflowDb } from '@/Interface';
+import type { IUser } from '@/Interface';
 import { useSourceControlStore } from '@/stores/sourceControl.store';
 import type { Project } from '@/types/projects.types';
 import { useWorkflowsStore } from '@/stores/workflows.store';
@@ -39,6 +39,8 @@ const router = createRouter({
 	],
 });
 
+let pinia: ReturnType<typeof createTestingPinia>;
+
 const renderComponent = createComponentRenderer(WorkflowsView, {
 	global: {
 		plugins: [router],
@@ -53,54 +55,86 @@ describe('WorkflowsView', () => {
 	beforeEach(async () => {
 		await router.push('/');
 		await router.isReady();
+		pinia = createTestingPinia({ initialState });
 	});
 
 	describe('should show empty state', () => {
-		it('for non setup user', () => {
+		it('for non setup user', async () => {
-			const { getByText } = renderComponent({ pinia: createTestingPinia({ initialState }) });
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+			const { getByText } = renderComponent({ pinia });
+			await waitAllPromises();
 			expect(getByText('👋 Welcome!')).toBeVisible();
 		});
 
-		it('for currentUser user', () => {
+		it('for currentUser user', async () => {
-			const pinia = createTestingPinia({ initialState });
 			const userStore = mockedStore(useUsersStore);
 			userStore.currentUser = { firstName: 'John' } as IUser;
+
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+
 			const { getByText } = renderComponent({ pinia });
+			await waitAllPromises();
 
 			expect(getByText('👋 Welcome John!')).toBeVisible();
 		});
 
 		describe('when onboardingExperiment -> False', () => {
-			const pinia = createTestingPinia({ initialState });
+			beforeEach(() => {
+				pinia = createTestingPinia({ initialState });
+			});
+
+			it('for readOnlyEnvironment', async () => {
 				const sourceControl = mockedStore(useSourceControlStore);
-
-			const projectsStore = mockedStore(useProjectsStore);
-
-			it('for readOnlyEnvironment', () => {
 				sourceControl.preferences.branchReadOnly = true;
 
+				const workflowsStore = mockedStore(useWorkflowsStore);
+				workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+				workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+
 				const { getByText } = renderComponent({ pinia });
+				await waitAllPromises();
+
 				expect(getByText('No workflows here yet')).toBeInTheDocument();
 				sourceControl.preferences.branchReadOnly = false;
 			});
 
-			it('for noPermission', () => {
+			it('for noPermission', async () => {
+				const workflowsStore = mockedStore(useWorkflowsStore);
+				workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+				workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+
 				const { getByText } = renderComponent({ pinia });
+				await waitAllPromises();
 				expect(getByText('There are currently no workflows to view')).toBeInTheDocument();
 			});
 
-			it('for user with create scope', () => {
+			it('for user with create scope', async () => {
+				const projectsStore = mockedStore(useProjectsStore);
 				projectsStore.currentProject = { scopes: ['workflow:create'] } as Project;
+				const workflowsStore = mockedStore(useWorkflowsStore);
+				workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+				workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+
 				const { getByText } = renderComponent({ pinia });
+				await waitAllPromises();
 				expect(getByText('Create your first workflow')).toBeInTheDocument();
 			});
 		});
 
 		it('should allow workflow creation', async () => {
-			const pinia = createTestingPinia({ initialState });
 			const projectsStore = mockedStore(useProjectsStore);
 			projectsStore.currentProject = { scopes: ['workflow:create'] } as Project;
+
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
+			workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
+
 			const { getByTestId } = renderComponent({ pinia });
+			await waitAllPromises();
 
 			expect(getByTestId('new-workflow-card')).toBeInTheDocument();
 
@@ -111,103 +145,129 @@ describe('WorkflowsView', () => {
 	});
 
 	describe('filters', () => {
+		beforeEach(async () => {
+			pinia = createTestingPinia({ initialState });
+		});
+
 		it('should set tag filter based on query parameters', async () => {
 			await router.replace({ query: { tags: 'test-tag' } });
 
-			const pinia = createTestingPinia({ initialState });
+			const TEST_TAG = { id: 'test-tag', name: 'tag' };
+
 			const tagStore = mockedStore(useTagsStore);
-			tagStore.allTags = [{ id: 'test-tag', name: 'tag' }];
+			tagStore.allTags = [TEST_TAG];
+			tagStore.tagsById = {
+				'test-tag': TEST_TAG,
+			};
 			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.allWorkflows = [
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				{ id: '1' },
-				{ id: '2', tags: [{ id: 'test-tag', name: 'tag' }] },
-			] as IWorkflowDb[];
 
-			const { getAllByTestId } = renderComponent({ pinia });
+			renderComponent({ pinia });
+			await waitAllPromises();
 
-			expect(tagStore.fetchAll).toHaveBeenCalled();
+			expect(workflowsStore.fetchWorkflowsPage).toHaveBeenCalledWith(
-			await waitFor(() => expect(getAllByTestId('resources-list-item').length).toBe(1));
+				expect.any(String),
+				expect.any(Number),
+				expect.any(Number),
+				expect.any(String),
+				expect.objectContaining({
+					tags: [TEST_TAG.name],
+				}),
+			);
 		});
 
 		it('should set search filter based on query parameters', async () => {
 			await router.replace({ query: { search: 'one' } });
 
-			const pinia = createTestingPinia({ initialState });
 			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.allWorkflows = [
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				{ id: '1', name: 'one' },
-				{ id: '2', name: 'two' },
-			] as IWorkflowDb[];
 
-			const { getAllByTestId } = renderComponent({ pinia });
+			renderComponent({ pinia });
+			await waitAllPromises();
 
-			await waitFor(() => expect(getAllByTestId('resources-list-item').length).toBe(1));
+			expect(workflowsStore.fetchWorkflowsPage).toHaveBeenCalledWith(
+				expect.any(String),
+				expect.any(Number),
+				expect.any(Number),
+				expect.any(String),
+				expect.objectContaining({
+					name: 'one',
+				}),
+			);
 		});
 
 		it('should set status filter based on query parameters', async () => {
 			await router.replace({ query: { status: 'true' } });
 
-			const pinia = createTestingPinia({ initialState });
 			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.allWorkflows = [
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				{ id: '1', active: true },
-				{ id: '2', active: false },
-			] as IWorkflowDb[];
 
-			const { getAllByTestId } = renderComponent({ pinia });
+			renderComponent({ pinia });
+			await waitAllPromises();
 
-			await waitFor(() => expect(getAllByTestId('resources-list-item').length).toBe(1));
+			expect(workflowsStore.fetchWorkflowsPage).toHaveBeenCalledWith(
+				expect.any(String),
+				expect.any(Number),
+				expect.any(Number),
+				expect.any(String),
+				expect.objectContaining({
+					active: true,
+				}),
+			);
 		});
 
 		it('should reset filters', async () => {
 			await router.replace({ query: { status: 'true' } });
 
-			const pinia = createTestingPinia({ initialState });
 			const workflowsStore = mockedStore(useWorkflowsStore);
-			workflowsStore.allWorkflows = [
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
-				{ id: '1', active: true },
-				{ id: '2', active: false },
-			] as IWorkflowDb[];
 
-			const { getAllByTestId, getByTestId } = renderComponent({ pinia });
+			const { queryByTestId, getByTestId } = renderComponent({ pinia });
+			await waitAllPromises();
 
-			await waitFor(() => expect(getAllByTestId('resources-list-item').length).toBe(1));
+			expect(getByTestId('workflows-filter-reset')).toBeInTheDocument();
-			await waitFor(() => expect(getByTestId('workflows-filter-reset')).toBeInTheDocument());
+			// Should show the filter count
+			expect(getByTestId('resources-list-filters-count')).toHaveTextContent('1');
 
+			// Reset filters
 			await userEvent.click(getByTestId('workflows-filter-reset'));
-			await waitFor(() => expect(getAllByTestId('resources-list-item').length).toBe(2));
+			// Should hide the filter count
+			expect(queryByTestId('resources-list-filters-count')).not.toBeInTheDocument();
 		});
 
 		it('should remove incomplete properties', async () => {
 			await router.replace({ query: { tags: '' } });
-			const pinia = createTestingPinia({ initialState });
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 			renderComponent({ pinia });
+			await waitAllPromises();
 			await waitFor(() => expect(router.currentRoute.value.query).toStrictEqual({}));
 		});
 
-		it('should remove invalid tabs', async () => {
+		it('should remove invalid tags', async () => {
 			await router.replace({ query: { tags: 'non-existing-tag' } });
+			const workflowsStore = mockedStore(useWorkflowsStore);
+			workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 			const tagStore = mockedStore(useTagsStore);
 			tagStore.allTags = [{ id: 'test-tag', name: 'tag' }];
-			const pinia = createTestingPinia({ initialState });
 			renderComponent({ pinia });
+			await waitAllPromises();
 			await waitFor(() => expect(router.currentRoute.value.query).toStrictEqual({}));
 		});
 	});
 
 	it('should reinitialize on source control pullWorkfolder', async () => {
 		vi.spyOn(usersApi, 'getUsers').mockResolvedValue([]);
-		const pinia = createTestingPinia({ initialState, stubActions: false });
+		pinia = createTestingPinia({ initialState, stubActions: false });
 		const userStore = mockedStore(useUsersStore);
 		const workflowsStore = mockedStore(useWorkflowsStore);
-		workflowsStore.fetchAllWorkflows.mockResolvedValue([]);
+		workflowsStore.fetchWorkflowsPage.mockResolvedValue([]);
 		workflowsStore.fetchActiveWorkflows.mockResolvedValue([]);
 
 		const sourceControl = useSourceControlStore();
 
 		renderComponent({ pinia });
 
-		expect(userStore.fetchUsers).toHaveBeenCalledTimes(1);
 		await sourceControl.pullWorkfolder(true);
 		expect(userStore.fetchUsers).toHaveBeenCalledTimes(2);
 	});

packages/editor-ui/src/views/WorkflowsView.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { computed, onMounted, watch, ref } from 'vue';
+import { computed, onMounted, watch, ref, onBeforeUnmount } from 'vue';
 import ResourcesListLayout, {
-	type IResource,
+	type Resource,
-	type IFilters,
+	type BaseFilters,
 } from '@/components/layouts/ResourcesListLayout.vue';
 import WorkflowCard from '@/components/WorkflowCard.vue';
 import WorkflowTagsDropdown from '@/components/WorkflowTagsDropdown.vue';
@@ -11,6 +11,7 @@ import {
 	AI_CREDITS_EXPERIMENT,
 	EnterpriseEditionFeature,
 	VIEWS,
+	DEFAULT_WORKFLOW_PAGE_SIZE,
 } from '@/constants';
 import type { IUser, IWorkflowDb } from '@/Interface';
 import { useUIStore } from '@/stores/ui.store';
@@ -24,7 +25,7 @@ import { getResourcePermissions } from '@/permissions';
 import { usePostHog } from '@/stores/posthog.store';
 import { useDocumentTitle } from '@/composables/useDocumentTitle';
 import { useI18n } from '@/composables/useI18n';
-import { useRoute, useRouter } from 'vue-router';
+import { type LocationQueryRaw, useRoute, useRouter } from 'vue-router';
 import { useTelemetry } from '@/composables/useTelemetry';
 import {
 	N8nCard,
@@ -35,9 +36,29 @@ import {
 	N8nSelect,
 	N8nText,
 } from 'n8n-design-system';
-import { pickBy } from 'lodash-es';
 import ProjectHeader from '@/components/Projects/ProjectHeader.vue';
 import { getEasyAiWorkflowJson } from '@/utils/easyAiWorkflowUtils';
+import { useDebounce } from '@/composables/useDebounce';
+import { createEventBus } from 'n8n-design-system/utils';
+
+interface Filters extends BaseFilters {
+	status: string | boolean;
+	tags: string[];
+}
+
+const StatusFilter = {
+	ACTIVE: true,
+	DEACTIVATED: false,
+	ALL: '',
+};
+
+/** Maps sort values from the ResourcesListLayout component to values expected by workflows endpoint */
+const WORKFLOWS_SORT_MAP = {
+	lastUpdated: 'updatedAt:desc',
+	lastCreated: 'createdAt:desc',
+	nameAsc: 'name:asc',
+	nameDesc: 'name:desc',
+} as const;
 
 const i18n = useI18n();
 const route = useRoute();
@@ -53,17 +74,7 @@ const telemetry = useTelemetry();
 const uiStore = useUIStore();
 const tagsStore = useTagsStore();
 const documentTitle = useDocumentTitle();
-
+const { callDebounced } = useDebounce();
-interface Filters extends IFilters {
-	status: string | boolean;
-	tags: string[];
-}
-
-const StatusFilter = {
-	ACTIVE: true,
-	DEACTIVATED: false,
-	ALL: '',
-};
 
 const loading = ref(false);
 const filters = ref<Filters>({
@@ -72,15 +83,40 @@ const filters = ref<Filters>({
 	status: StatusFilter.ALL,
 	tags: [],
 });
+
+const workflowListEventBus = createEventBus();
+
+const workflows = ref<IWorkflowDb[]>([]);
+
 const easyAICalloutVisible = ref(true);
 
+const currentPage = ref(1);
+const pageSize = ref(DEFAULT_WORKFLOW_PAGE_SIZE);
+const currentSort = ref('updatedAt:desc');
+
 const readOnlyEnv = computed(() => sourceControlStore.preferences.branchReadOnly);
 const currentUser = computed(() => usersStore.currentUser ?? ({} as IUser));
-const allWorkflows = computed(() => workflowsStore.allWorkflows as IResource[]);
 const isShareable = computed(
 	() => settingsStore.isEnterpriseFeatureEnabled[EnterpriseEditionFeature.Sharing],
 );
 
+const workflowResources = computed<Resource[]>(() =>
+	workflows.value.map((workflow) => ({
+		id: workflow.id,
+		name: workflow.name,
+		value: '',
+		active: workflow.active,
+		updatedAt: workflow.updatedAt.toString(),
+		createdAt: workflow.createdAt.toString(),
+		homeProject: workflow.homeProject,
+		scopes: workflow.scopes,
+		type: 'workflow',
+		sharedWithProjects: workflow.sharedWithProjects,
+		readOnly: !getResourcePermissions(workflow.scopes).workflow.update,
+		tags: workflow.tags,
+	})),
+);
+
 const statusFilterOptions = computed(() => [
 	{
 		label: i18n.baseText('workflows.filters.status.all'),
@@ -120,30 +156,44 @@ const emptyListDescription = computed(() => {
 	}
 });
 
-const onFilter = (resource: IResource, newFilters: IFilters, matches: boolean): boolean => {
+watch(
-	const iFilters = newFilters as Filters;
+	() => route.params?.projectId,
-	if (settingsStore.areTagsEnabled && iFilters.tags.length > 0) {
+	async () => {
-		matches =
+		await initialize();
-			matches &&
+	},
-			iFilters.tags.every((tag) =>
+);
-				(resource as IWorkflowDb).tags?.find((resourceTag) =>
-					typeof resourceTag === 'object'
-						? `${resourceTag.id}` === `${tag}`
-						: `${resourceTag}` === `${tag}`,
-				),
-			);
-	}
 
-	if (newFilters.status !== '') {
+// Lifecycle hooks
-		matches = matches && (resource as IWorkflowDb).active === newFilters.status;
+onMounted(async () => {
-	}
+	documentTitle.set(i18n.baseText('workflows.heading'));
+	void usersStore.showPersonalizationSurvey();
 
-	return matches;
+	workflowListEventBus.on('resource-moved', fetchWorkflows);
-};
+	workflowListEventBus.on('workflow-duplicated', fetchWorkflows);
+});
+
+onBeforeUnmount(() => {
+	workflowListEventBus.off('resource-moved', fetchWorkflows);
+	workflowListEventBus.off('workflow-duplicated', fetchWorkflows);
+});
 
 // Methods
-const onFiltersUpdated = (newFilters: IFilters) => {
+const onFiltersUpdated = async () => {
-	Object.assign(filters.value, newFilters);
+	currentPage.value = 1;
+	saveFiltersOnQueryString();
+	await fetchWorkflows();
+};
+
+const onSearchUpdated = async (search: string) => {
+	if (search) {
+		currentPage.value = 1;
+		saveFiltersOnQueryString();
+		await callDebounced(fetchWorkflows, { debounceTime: 500, trailing: true });
+	} else {
+		currentPage.value = 1;
+		// No need to debounce when clearing search
+		await fetchWorkflows();
+	}
 };
 
 const addWorkflow = () => {
@@ -167,41 +217,87 @@ const trackEmptyCardClick = (option: 'blank' | 'templates' | 'courses') => {
 
 const initialize = async () => {
 	loading.value = true;
-	await Promise.all([
+	await setFiltersFromQueryString();
+	const [, workflowsPage] = await Promise.all([
 		usersStore.fetchUsers(),
-		workflowsStore.fetchAllWorkflows(route.params?.projectId as string | undefined),
+		fetchWorkflows(),
 		workflowsStore.fetchActiveWorkflows(),
 	]);
+	workflows.value = workflowsPage;
 	loading.value = false;
 };
 
-const onClickTag = (tagId: string) => {
+const setCurrentPage = async (page: number) => {
+	currentPage.value = page;
+	await fetchWorkflows();
+};
+
+const setPageSize = async (size: number) => {
+	pageSize.value = size;
+	await fetchWorkflows();
+};
+
+const fetchWorkflows = async () => {
+	loading.value = true;
+	const routeProjectId = route.params?.projectId as string | undefined;
+	const homeProjectFilter = filters.value.homeProject || undefined;
+
+	const fetchedWorkflows = await workflowsStore.fetchWorkflowsPage(
+		routeProjectId ?? homeProjectFilter,
+		currentPage.value,
+		pageSize.value,
+		currentSort.value,
+		{
+			name: filters.value.search || undefined,
+			active: filters.value.status ? Boolean(filters.value.status) : undefined,
+			tags: filters.value.tags.map((tagId) => tagsStore.tagsById[tagId]?.name),
+		},
+	);
+	workflows.value = fetchedWorkflows;
+	loading.value = false;
+	return fetchedWorkflows;
+};
+
+const onClickTag = async (tagId: string) => {
 	if (!filters.value.tags.includes(tagId)) {
 		filters.value.tags.push(tagId);
+		currentPage.value = 1;
+		saveFiltersOnQueryString();
+		await fetchWorkflows();
 	}
 };
 
 const saveFiltersOnQueryString = () => {
-	const query: { [key: string]: string } = {};
+	// Get current query parameters
+	const currentQuery = { ...route.query };
 
+	// Update filter parameters
 	if (filters.value.search) {
-		query.search = filters.value.search;
+		currentQuery.search = filters.value.search;
+	} else {
+		delete currentQuery.search;
 	}
 
 	if (typeof filters.value.status !== 'string') {
-		query.status = filters.value.status.toString();
+		currentQuery.status = filters.value.status.toString();
+	} else {
+		delete currentQuery.status;
 	}
 
 	if (filters.value.tags.length) {
-		query.tags = filters.value.tags.join(',');
+		currentQuery.tags = filters.value.tags.join(',');
+	} else {
+		delete currentQuery.tags;
 	}
 
 	if (filters.value.homeProject) {
-		query.homeProject = filters.value.homeProject;
+		currentQuery.homeProject = filters.value.homeProject;
+	} else {
+		delete currentQuery.homeProject;
 	}
 
 	void router.replace({
-		query: Object.keys(query).length ? query : undefined,
+		query: Object.keys(currentQuery).length ? currentQuery : undefined,
 	});
 };
 
@@ -210,26 +306,31 @@ function isValidProjectId(projectId: string) {
 }
 
 const setFiltersFromQueryString = async () => {
-	const { tags, status, search, homeProject } = route.query ?? {};
+	const { tags, status, search, homeProject, sort } = route.query ?? {};
-
+	const newQuery: LocationQueryRaw = {};
-	const filtersToApply: { [key: string]: string | string[] | boolean } = {};
 
 	if (homeProject && typeof homeProject === 'string') {
 		await projectsStore.getAvailableProjects();
 		if (isValidProjectId(homeProject)) {
-			filtersToApply.homeProject = homeProject;
+			newQuery.homeProject = homeProject;
+			filters.value.homeProject = homeProject;
 		}
 	}
 
 	if (search && typeof search === 'string') {
-		filtersToApply.search = search;
+		newQuery.search = search;
+		filters.value.search = search;
 	}
 
 	if (tags && typeof tags === 'string') {
 		await tagsStore.fetchAll();
 		const currentTags = tagsStore.allTags.map((tag) => tag.id);
+		const validTags = tags.split(',').filter((tag) => currentTags.includes(tag));
 
-		filtersToApply.tags = tags.split(',').filter((tag) => currentTags.includes(tag));
+		if (validTags.length) {
+			newQuery.tags = validTags.join(',');
+			filters.value.tags = validTags;
+		}
 	}
 
 	if (
@@ -237,14 +338,17 @@ const setFiltersFromQueryString = async () => {
 		typeof status === 'string' &&
 		[StatusFilter.ACTIVE.toString(), StatusFilter.DEACTIVATED.toString()].includes(status)
 	) {
-		filtersToApply.status = status === 'true';
+		newQuery.status = status; // Keep as string in URL
+		filters.value.status = status === 'true'; // Convert to boolean for filters
 	}
 
-	if (Object.keys(filtersToApply).length) {
+	if (sort && typeof sort === 'string') {
-		Object.assign(filters.value, filtersToApply);
+		const newSort = WORKFLOWS_SORT_MAP[sort as keyof typeof WORKFLOWS_SORT_MAP] ?? 'updatedAt:desc';
+		newQuery.sort = sort;
+		currentSort.value = newSort;
 	}
 
-	void router.replace({ query: pickBy(route.query) });
+	void router.replace({ query: newQuery });
 };
 
 sourceControlStore.$onAction(({ name, after }) => {
@@ -252,19 +356,6 @@ sourceControlStore.$onAction(({ name, after }) => {
 	after(async () => await initialize());
 });
 
-watch(filters, () => saveFiltersOnQueryString(), { deep: true });
-
-watch(
-	() => route.params?.projectId,
-	async () => await initialize(),
-);
-
-onMounted(async () => {
-	documentTitle.set(i18n.baseText('workflows.heading'));
-	await setFiltersFromQueryString();
-	void usersStore.showPersonalizationSurvey();
-});
-
 const openAIWorkflow = async (source: string) => {
 	dismissEasyAICallout();
 	telemetry.track(
@@ -293,21 +384,46 @@ const openAIWorkflow = async (source: string) => {
 const dismissEasyAICallout = () => {
 	easyAICalloutVisible.value = false;
 };
+
+const onSortUpdated = async (sort: string) => {
+	currentSort.value =
+		WORKFLOWS_SORT_MAP[sort as keyof typeof WORKFLOWS_SORT_MAP] ?? 'updatedAt:desc';
+	if (currentSort.value !== 'updatedAt:desc') {
+		void router.replace({ query: { ...route.query, sort } });
+	} else {
+		void router.replace({ query: { ...route.query, sort: undefined } });
+	}
+	await fetchWorkflows();
+};
+
+const onWorkflowActiveToggle = (data: { id: string; active: boolean }) => {
+	const workflow = workflows.value.find((w) => w.id === data.id);
+	if (!workflow) return;
+	workflow.active = data.active;
+};
 </script>
 
 <template>
 	<ResourcesListLayout
+		v-model:filters="filters"
 		resource-key="workflows"
-		:resources="allWorkflows"
+		type="list-paginated"
-		:filters="filters"
+		:resources="workflowResources"
-		:additional-filters-handler="onFilter"
 		:type-props="{ itemSize: 80 }"
 		:shareable="isShareable"
 		:initialize="initialize"
 		:disabled="readOnlyEnv || !projectPermissions.workflow.create"
-		:loading="loading"
+		:loading="false"
+		:resources-refreshing="loading"
+		:custom-page-size="10"
+		:total-items="workflowsStore.totalWorkflowCount"
+		:dont-perform-sorting-and-filtering="true"
 		@click:add="addWorkflow"
+		@update:search="onSearchUpdated"
+		@update:current-page="setCurrentPage"
+		@update:page-size="setPageSize"
 		@update:filters="onFiltersUpdated"
+		@sort="onSortUpdated"
 	>
 		<template #header>
 			<ProjectHeader />
@@ -341,14 +457,18 @@ const dismissEasyAICallout = () => {
 				</template>
 			</N8nCallout>
 		</template>
-		<template #default="{ data, updateItemSize }">
+		<template #item="{ item: data }">
 			<WorkflowCard
 				data-test-id="resources-list-item"
 				class="mb-2xs"
-				:data="data"
+				:data="data as IWorkflowDb"
+				:workflow-list-event-bus="workflowListEventBus"
 				:read-only="readOnlyEnv"
-				@expand:tags="updateItemSize(data)"
 				@click:tag="onClickTag"
+				@workflow:deleted="fetchWorkflows"
+				@workflow:moved="fetchWorkflows"
+				@workflow:duplicated="fetchWorkflows"
+				@workflow:active-toggle="onWorkflowActiveToggle"
 			/>
 		</template>
 		<template #empty>