feat(editor): Use remote filtering for error workflow search in settings (#17624)

packages/frontend/editor-ui/src/components/WorkflowSettings.test.ts

@@ -30,7 +30,7 @@ let settingsStore: MockedStore<typeof useSettingsStore>;
 let sourceControlStore: MockedStore<typeof useSourceControlStore>;
 let pinia: ReturnType<typeof createTestingPinia>;
 
-let fetchAllWorkflowsSpy: MockInstance<(typeof workflowsStore)['fetchAllWorkflows']>;
+let searchWorkflowsSpy: MockInstance<(typeof workflowsStore)['searchWorkflows']>;
 
 const createComponent = createComponentRenderer(WorkflowSettingsVue, {
 	global: {
@@ -55,7 +55,7 @@ describe('WorkflowSettingsVue', () => {
 		} as FrontendSettings;
 		workflowsStore.workflowName = 'Test Workflow';
 		workflowsStore.workflowId = '1';
-		fetchAllWorkflowsSpy = workflowsStore.fetchAllWorkflows.mockResolvedValue([
+		searchWorkflowsSpy = workflowsStore.searchWorkflows.mockResolvedValue([
 			{
 				id: '1',
 				name: 'Test Workflow',
@@ -134,8 +134,12 @@ describe('WorkflowSettingsVue', () => {
 		// first is `- No Workflow -`, second is the workflow returned by
 		// `workflowsStore.fetchAllWorkflows`
 		expect(dropdownItems).toHaveLength(2);
-		expect(fetchAllWorkflowsSpy).toHaveBeenCalledTimes(1);
-		expect(fetchAllWorkflowsSpy).toHaveBeenCalledWith();
+		expect(searchWorkflowsSpy).toHaveBeenCalledTimes(1);
+		expect(searchWorkflowsSpy).toHaveBeenCalledWith(
+			expect.objectContaining({
+				name: undefined,
+			}),
+		);
 	});
 
 	it('should not remove valid workflow ID characters', async () => {

packages/frontend/editor-ui/src/components/WorkflowSettings.vue

@@ -261,8 +261,16 @@ const loadTimezones = async () => {
 	}
 };
 
-const loadWorkflows = async () => {
-	const workflowsData = (await workflowsStore.fetchAllWorkflows()) as IWorkflowShortResponse[];
+const loadWorkflows = async (searchTerm?: string) => {
+	// Do not call the API if the search term is empty
+	// Call it if searchTerm is undefined for initial load
+	if (searchTerm === '') {
+		return;
+	}
+
+	const workflowsData = (await workflowsStore.searchWorkflows({
+		name: searchTerm,
+	})) as IWorkflowShortResponse[];
 	workflowsData.sort((a, b) => {
 		if (a.name.toLowerCase() < b.name.toLowerCase()) {
 			return -1;
@@ -527,6 +535,9 @@ onMounted(async () => {
 							v-model="workflowSettings.errorWorkflow"
 							placeholder="Select Workflow"
 							filterable
+							remote
+							remote-method="loadWorkflows"
+							remote-show-suffix
 							:disabled="readOnlyEnv || !workflowPermissions.update"
 							:limit-popper-width="true"
 							data-test-id="workflow-settings-error-workflow"

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

@@ -620,15 +620,24 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		return data;
 	}
 
-	async function fetchAllWorkflows(projectId?: string): Promise<IWorkflowDb[]> {
+	async function searchWorkflows({
+		projectId,
+		name,
+	}: { projectId?: string; name?: string }): Promise<IWorkflowDb[]> {
 		const filter = {
 			projectId,
+			name,
 		};
 
 		const { data: workflows } = await workflowsApi.getWorkflows(
 			rootStore.restApiContext,
 			isEmpty(filter) ? undefined : filter,
 		);
+		return workflows;
+	}
+
+	async function fetchAllWorkflows(projectId?: string): Promise<IWorkflowDb[]> {
+		const workflows = await searchWorkflows({ projectId });
 		setWorkflows(workflows);
 		return workflows;
 	}
@@ -2000,6 +2009,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, () => {
 		getCurrentWorkflow,
 		getWorkflowFromUrl,
 		getActivationError,
+		searchWorkflows,
 		fetchAllWorkflows,
 		fetchWorkflowsPage,
 		fetchWorkflow,