From 59db96771e1a773aea0af7e1840e1766deda67c2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Milorad=20FIlipovi=C4=87?= <milorad@n8n.io>
Date: Mon, 24 Apr 2023 10:50:49 +0200
Subject: [PATCH] refactor(editor): Remove the `restApi` mixin (#6065)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ✨ Removing the `makeApiRequest` method from `restAPI` mixin, removing the mixing from the App component
* ✨ Removing `restApi` mixin
* 👕 Fixing lint errors
* ✔️ Fixing execution list unit tests and merge bug in workflowRun mixin
* 🐛 Added missing useStore
---
 packages/editor-ui/src/App.vue                |    3 +-
 packages/editor-ui/src/Interface.ts           |   37 -
 .../src/components/BinaryDataDisplay.vue      |    3 +-
 .../src/components/BinaryDataDisplayEmbed.vue |   12 +-
 .../CredentialEdit/CredentialConfig.vue       |   13 +-
 .../components/DuplicateWorkflowDialog.vue    |    8 +-
 .../src/components/ExecutionsList.vue         | 1175 ++++++++---------
 .../ExecutionsView/ExecutionCard.vue          |    3 +-
 .../ExecutionsView/ExecutionPreview.vue       |    4 +-
 .../ExecutionsView/ExecutionsList.vue         |   24 +-
 .../components/MainHeader/WorkflowDetails.vue |    2 +-
 .../editor-ui/src/components/MainSidebar.vue  |    2 -
 .../src/components/NodeCredentials.vue        |    3 +-
 .../src/components/NodeExecuteButton.vue      |    2 +-
 packages/editor-ui/src/components/RunData.vue |    2 +-
 .../components/UserActivationSurveyModal.vue  |    2 +-
 .../src/components/WorkflowActivator.vue      |    2 +-
 .../editor-ui/src/components/WorkflowCard.vue |    5 +-
 .../src/components/WorkflowSettings.vue       |    9 +-
 .../src/components/WorkflowShareModal.ee.vue  |    2 +-
 .../__tests__/ExecutionsList.test.ts          |   47 +-
 packages/editor-ui/src/mixins/nodeHelpers.ts  |    6 +-
 .../editor-ui/src/mixins/workflowHelpers.ts   |   13 +-
 packages/editor-ui/src/mixins/workflowRun.ts  |    5 +-
 packages/editor-ui/src/stores/credentials.ts  |   12 +-
 packages/editor-ui/src/stores/settings.ts     |    5 +
 packages/editor-ui/src/stores/workflows.ts    |  183 ++-
 packages/editor-ui/src/utils/apiUtils.ts      |   32 +-
 packages/editor-ui/src/views/NodeView.vue     |   17 +-
 packages/editor-ui/src/views/SetupView.vue    |    6 +-
 30 files changed, 905 insertions(+), 734 deletions(-)

diff --git a/packages/editor-ui/src/App.vue b/packages/editor-ui/src/App.vue
index b5baefe067..2d1e09cf36 100644
--- a/packages/editor-ui/src/App.vue
+++ b/packages/editor-ui/src/App.vue
@@ -37,7 +37,6 @@ import { showMessage } from '@/mixins/showMessage';
 import { userHelpers } from '@/mixins/userHelpers';
 import { loadLanguage } from './plugins/i18n';
 import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
-import { restApi } from '@/mixins/restApi';
 import { mapStores } from 'pinia';
 import { useUIStore } from './stores/ui';
 import { useSettingsStore } from './stores/settings';
@@ -49,7 +48,7 @@ import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 
-export default mixins(newVersions, showMessage, userHelpers, restApi).extend({
+export default mixins(newVersions, showMessage, userHelpers).extend({
 	name: 'App',
 	components: {
 		LoadingView,
diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 9edcf0e76a..5bc452c578 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -139,43 +139,6 @@ export interface IExternalHooks {
 	run(eventName: string, metadata?: IDataObject): Promise<void>;
 }
 
-/**
- * @deprecated Do not add methods to this interface.
- */
-export interface IRestApi {
-	getActiveWorkflows(): Promise<string[]>;
-	getActivationError(id: string): Promise<IActivationError | undefined>;
-	getCurrentExecutions(filter: ExecutionsQueryFilter): Promise<IExecutionsCurrentSummaryExtended[]>;
-	getPastExecutions(
-		filter: ExecutionsQueryFilter,
-		limit: number,
-		lastId?: string,
-		firstId?: string,
-	): Promise<IExecutionsListResponse>;
-	stopCurrentExecution(executionId: string): Promise<IExecutionsStopData>;
-	makeRestApiRequest(method: string, endpoint: string, data?: any): Promise<any>;
-	getCredentialTranslation(credentialType: string): Promise<object>;
-	removeTestWebhook(workflowId: string): Promise<boolean>;
-	runWorkflow(runData: IStartRunData): Promise<IExecutionPushResponse>;
-	createNewWorkflow(sendData: IWorkflowDataUpdate): Promise<IWorkflowDb>;
-	updateWorkflow(id: string, data: IWorkflowDataUpdate, forceSave?: boolean): Promise<IWorkflowDb>;
-	deleteWorkflow(name: string): Promise<void>;
-	getWorkflow(id: string): Promise<IWorkflowDb>;
-	getWorkflows(filter?: object): Promise<IWorkflowShortResponse[]>;
-	getWorkflowFromUrl(url: string): Promise<IWorkflowDb>;
-	getExecution(id: string): Promise<IExecutionResponse | undefined>;
-	deleteExecutions(sendData: IExecutionDeleteFilter): Promise<void>;
-	retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean>;
-	getTimezones(): Promise<IDataObject>;
-	getBinaryUrl(
-		dataPath: string,
-		mode: 'view' | 'download',
-		fileName?: string,
-		mimeType?: string,
-	): string;
-	getExecutionEvents(id: string): Promise<IAbstractEventMessage[]>;
-}
-
 export interface INodeTranslationHeaders {
 	data: {
 		[key: string]: {
diff --git a/packages/editor-ui/src/components/BinaryDataDisplay.vue b/packages/editor-ui/src/components/BinaryDataDisplay.vue
index c1f5b71355..4129fbe580 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplay.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplay.vue
@@ -26,11 +26,10 @@ import BinaryDataDisplayEmbed from '@/components/BinaryDataDisplayEmbed.vue';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
-import { restApi } from '@/mixins/restApi';
 import { mapStores } from 'pinia';
 import { useWorkflowsStore } from '@/stores/workflows';
 
-export default mixins(nodeHelpers, restApi).extend({
+export default mixins(nodeHelpers).extend({
 	name: 'BinaryDataDisplay',
 	components: {
 		BinaryDataDisplayEmbed,
diff --git a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
index 04fbde24a6..8bfc988974 100644
--- a/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
+++ b/packages/editor-ui/src/components/BinaryDataDisplayEmbed.vue
@@ -19,13 +19,14 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
-import { restApi } from '@/mixins/restApi';
 import { IBinaryData, jsonParse } from 'n8n-workflow';
 import type { PropType } from 'vue';
 import VueJsonPretty from 'vue-json-pretty';
+import { mapStores } from 'pinia';
+import { useWorkflowsStore } from '@/stores';
+import Vue from 'vue';
 
-export default mixins(restApi).extend({
+export default Vue.extend({
 	name: 'BinaryDataDisplayEmbed',
 	components: {
 		VueJsonPretty,
@@ -44,6 +45,9 @@ export default mixins(restApi).extend({
 			jsonData: '',
 		};
 	},
+	computed: {
+		...mapStores(useWorkflowsStore),
+	},
 	async mounted() {
 		const { id, data, fileName, fileType, mimeType } = (this.binaryData || {}) as IBinaryData;
 		const isJSONData = fileType === 'json';
@@ -56,7 +60,7 @@ export default mixins(restApi).extend({
 			}
 		} else {
 			try {
-				const binaryUrl = this.restApi().getBinaryUrl(id, 'view', fileName, mimeType);
+				const binaryUrl = this.workflowsStore.getBinaryUrl(id, 'view', fileName, mimeType);
 				if (isJSONData) {
 					this.jsonData = await (await fetch(binaryUrl)).json();
 				} else {
diff --git a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
index e2255bd900..c94fcba3c1 100644
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialConfig.vue
@@ -135,9 +135,7 @@ import Banner from '../Banner.vue';
 import CopyInput from '../CopyInput.vue';
 import CredentialInputs from './CredentialInputs.vue';
 import OauthButton from './OauthButton.vue';
-import { restApi } from '@/mixins/restApi';
 import { addCredentialTranslation } from '@/plugins/i18n';
-import mixins from 'vue-typed-mixins';
 import { BUILTIN_CREDENTIALS_DOCS_URL, DOCS_DOMAIN, EnterpriseEditionFeature } from '@/constants';
 import { IPermissions } from '@/permissions';
 import { mapStores } from 'pinia';
@@ -147,12 +145,12 @@ import { useRootStore } from '@/stores/n8nRootStore';
 import { useNDVStore } from '@/stores/ndv';
 import { useCredentialsStore } from '@/stores/credentials';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
-import { ICredentialsResponse, IUpdateInformation, NodeAuthenticationOption } from '@/Interface';
-import ParameterInputFull from '@/components/ParameterInputFull.vue';
+import { ICredentialsResponse } from '@/Interface';
 import AuthTypeSelector from '@/components/CredentialEdit/AuthTypeSelector.vue';
 import GoogleAuthButton from './GoogleAuthButton.vue';
+import Vue from 'vue';
 
-export default mixins(restApi).extend({
+export default Vue.extend({
 	name: 'CredentialConfig',
 	components: {
 		AuthTypeSelector,
@@ -160,7 +158,6 @@ export default mixins(restApi).extend({
 		CopyInput,
 		CredentialInputs,
 		OauthButton,
-		ParameterInputFull,
 		GoogleAuthButton,
 	},
 	props: {
@@ -226,7 +223,9 @@ export default mixins(restApi).extend({
 
 		if (this.$locale.exists(key)) return;
 
-		const credTranslation = await this.restApi().getCredentialTranslation(this.credentialType.name);
+		const credTranslation = await this.credentialsStore.getCredentialTranslation(
+			this.credentialType.name,
+		);
 
 		addCredentialTranslation(
 			{ [this.credentialType.name]: credTranslation },
diff --git a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
index fa433c420a..2c8e65d430 100644
--- a/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
+++ b/packages/editor-ui/src/components/DuplicateWorkflowDialog.vue
@@ -56,7 +56,6 @@ import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { showMessage } from '@/mixins/showMessage';
 import TagsDropdown from '@/components/TagsDropdown.vue';
 import Modal from './Modal.vue';
-import { restApi } from '@/mixins/restApi';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings';
 import { useWorkflowsStore } from '@/stores/workflows';
@@ -64,8 +63,9 @@ import { IWorkflowDataUpdate } from '@/Interface';
 import { getWorkflowPermissions, IPermissions } from '@/permissions';
 import { useUsersStore } from '@/stores/users';
 import { createEventBus } from '@/event-bus';
+import { useCredentialsStore } from '@/stores';
 
-export default mixins(showMessage, workflowHelpers, restApi).extend({
+export default mixins(showMessage, workflowHelpers).extend({
 	components: { TagsDropdown, Modal },
 	name: 'DuplicateWorkflow',
 	props: ['modalName', 'isActive', 'data'],
@@ -87,7 +87,7 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 		this.$nextTick(() => this.focusOnNameInput());
 	},
 	computed: {
-		...mapStores(useUsersStore, useSettingsStore, useWorkflowsStore),
+		...mapStores(useCredentialsStore, useUsersStore, useSettingsStore, useWorkflowsStore),
 		workflowPermissions(): IPermissions {
 			const isEmptyWorkflow = this.data.id === PLACEHOLDER_EMPTY_WORKFLOW_ID;
 			const isCurrentWorkflowEmpty =
@@ -150,7 +150,7 @@ export default mixins(showMessage, workflowHelpers, restApi).extend({
 				let workflowToUpdate: IWorkflowDataUpdate | undefined;
 				if (currentWorkflowId !== PLACEHOLDER_EMPTY_WORKFLOW_ID) {
 					const { createdAt, updatedAt, usedCredentials, ...workflow } =
-						await this.restApi().getWorkflow(this.data.id);
+						await this.workflowsStore.fetchWorkflow(this.data.id);
 					workflowToUpdate = workflow;
 
 					this.removeForeignCredentialsFromWorkflow(
diff --git a/packages/editor-ui/src/components/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsList.vue
index 7fb081d318..cb677762bc 100644
--- a/packages/editor-ui/src/components/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsList.vue
@@ -271,7 +271,6 @@ import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import ExecutionFilter from '@/components/ExecutionFilter.vue';
 import { externalHooks } from '@/mixins/externalHooks';
 import { VIEWS, WAIT_TIME_UNLIMITED } from '@/constants';
-import { restApi } from '@/mixins/restApi';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { showMessage } from '@/mixins/showMessage';
@@ -292,625 +291,623 @@ import { useWorkflowsStore } from '@/stores/workflows';
 import { isEmpty, setPageTitle } from '@/utils';
 import { executionFilterToQueryFilter } from '@/utils/executionUtils';
 
-export default mixins(externalHooks, genericHelpers, executionHelpers, restApi, showMessage).extend(
-	{
-		name: 'ExecutionsList',
-		components: {
-			ExecutionTime,
-			WorkflowActivator,
-			ExecutionFilter,
+export default mixins(externalHooks, genericHelpers, executionHelpers, showMessage).extend({
+	name: 'ExecutionsList',
+	components: {
+		ExecutionTime,
+		WorkflowActivator,
+		ExecutionFilter,
+	},
+	data() {
+		return {
+			finishedExecutions: [] as IExecutionsSummary[],
+			finishedExecutionsCount: 0,
+			finishedExecutionsCountEstimated: false,
+
+			allVisibleSelected: false,
+			allExistingSelected: false,
+			autoRefresh: true,
+			autoRefreshInterval: undefined as undefined | NodeJS.Timer,
+
+			filter: {} as ExecutionFilterType,
+
+			isDataLoading: false,
+
+			requestItemsPerRequest: 10,
+
+			selectedItems: {} as { [key: string]: boolean },
+
+			stoppingExecutions: [] as string[],
+			workflows: [] as IWorkflowShortResponse[],
+		};
+	},
+	mounted() {
+		setPageTitle(`n8n - ${this.pageTitle}`);
+	},
+	async created() {
+		await this.loadWorkflows();
+		//await this.refreshData();
+		this.handleAutoRefreshToggle();
+
+		this.$externalHooks().run('executionsList.openDialog');
+		this.$telemetry.track('User opened Executions log', {
+			workflow_id: this.workflowsStore.workflowId,
+		});
+	},
+	beforeDestroy() {
+		if (this.autoRefreshInterval) {
+			clearInterval(this.autoRefreshInterval);
+			this.autoRefreshInterval = undefined;
+		}
+	},
+	computed: {
+		...mapStores(useUIStore, useWorkflowsStore),
+		activeExecutions(): IExecutionsCurrentSummaryExtended[] {
+			return this.workflowsStore.activeExecutions;
 		},
-		data() {
-			return {
-				finishedExecutions: [] as IExecutionsSummary[],
-				finishedExecutionsCount: 0,
-				finishedExecutionsCountEstimated: false,
+		combinedExecutions(): IExecutionsSummary[] {
+			const returnData: IExecutionsSummary[] = [];
 
-				allVisibleSelected: false,
-				allExistingSelected: false,
-				autoRefresh: true,
-				autoRefreshInterval: undefined as undefined | NodeJS.Timer,
+			if (['all', 'running'].includes(this.filter.status)) {
+				returnData.push(...this.activeExecutions);
+			}
+			if (['all', 'error', 'success', 'waiting'].includes(this.filter.status)) {
+				returnData.push(...this.finishedExecutions);
+			}
 
-				filter: {} as ExecutionFilterType,
-
-				isDataLoading: false,
-
-				requestItemsPerRequest: 10,
-
-				selectedItems: {} as { [key: string]: boolean },
-
-				stoppingExecutions: [] as string[],
-				workflows: [] as IWorkflowShortResponse[],
-			};
+			return returnData.filter(
+				(execution) =>
+					this.filter.workflowId === 'all' || execution.workflowId === this.filter.workflowId,
+			);
 		},
-		mounted() {
-			setPageTitle(`n8n - ${this.pageTitle}`);
-		},
-		async created() {
-			await this.loadWorkflows();
-			//await this.refreshData();
-			this.handleAutoRefreshToggle();
+		numSelected(): number {
+			if (this.allExistingSelected) {
+				return this.finishedExecutionsCount;
+			}
 
-			this.$externalHooks().run('executionsList.openDialog');
-			this.$telemetry.track('User opened Executions log', {
-				workflow_id: this.workflowsStore.workflowId,
+			return Object.keys(this.selectedItems).length;
+		},
+		workflowFilterCurrent(): ExecutionsQueryFilter {
+			const filter: ExecutionsQueryFilter = {};
+			if (this.filter.workflowId !== 'all') {
+				filter.workflowId = this.filter.workflowId;
+			}
+			return filter;
+		},
+		workflowFilterPast(): ExecutionsQueryFilter {
+			return executionFilterToQueryFilter(this.filter);
+		},
+		pageTitle() {
+			return this.$locale.baseText('executionsList.workflowExecutions');
+		},
+	},
+	methods: {
+		closeDialog() {
+			this.$emit('closeModal');
+		},
+		displayExecution(execution: IExecutionsSummary) {
+			const route = this.$router.resolve({
+				name: VIEWS.EXECUTION_PREVIEW,
+				params: { name: execution.workflowId, executionId: execution.id },
 			});
+			window.open(route.href, '_blank');
 		},
-		beforeDestroy() {
+		handleAutoRefreshToggle() {
 			if (this.autoRefreshInterval) {
+				// Clear any previously existing intervals (if any - there shouldn't)
 				clearInterval(this.autoRefreshInterval);
 				this.autoRefreshInterval = undefined;
 			}
+
+			if (this.autoRefresh) {
+				this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
+			}
 		},
-		computed: {
-			...mapStores(useUIStore, useWorkflowsStore),
-			activeExecutions(): IExecutionsCurrentSummaryExtended[] {
-				return this.workflowsStore.activeExecutions;
-			},
-			combinedExecutions(): IExecutionsSummary[] {
-				const returnData: IExecutionsSummary[] = [];
-
-				if (['all', 'running'].includes(this.filter.status)) {
-					returnData.push(...this.activeExecutions);
-				}
-				if (['all', 'error', 'success', 'waiting'].includes(this.filter.status)) {
-					returnData.push(...this.finishedExecutions);
-				}
-
-				return returnData.filter(
-					(execution) =>
-						this.filter.workflowId === 'all' || execution.workflowId === this.filter.workflowId,
-				);
-			},
-			numSelected(): number {
-				if (this.allExistingSelected) {
-					return this.finishedExecutionsCount;
-				}
-
-				return Object.keys(this.selectedItems).length;
-			},
-			workflowFilterCurrent(): ExecutionsQueryFilter {
-				const filter: ExecutionsQueryFilter = {};
-				if (this.filter.workflowId !== 'all') {
-					filter.workflowId = this.filter.workflowId;
-				}
-				return filter;
-			},
-			workflowFilterPast(): ExecutionsQueryFilter {
-				return executionFilterToQueryFilter(this.filter);
-			},
-			pageTitle() {
-				return this.$locale.baseText('executionsList.workflowExecutions');
-			},
+		handleCheckAllExistingChange() {
+			this.allExistingSelected = !this.allExistingSelected;
+			this.allVisibleSelected = !this.allExistingSelected;
+			this.handleCheckAllVisibleChange();
 		},
-		methods: {
-			closeDialog() {
-				this.$emit('closeModal');
-			},
-			displayExecution(execution: IExecutionsSummary) {
-				const route = this.$router.resolve({
-					name: VIEWS.EXECUTION_PREVIEW,
-					params: { name: execution.workflowId, executionId: execution.id },
-				});
-				window.open(route.href, '_blank');
-			},
-			handleAutoRefreshToggle() {
-				if (this.autoRefreshInterval) {
-					// Clear any previously existing intervals (if any - there shouldn't)
-					clearInterval(this.autoRefreshInterval);
-					this.autoRefreshInterval = undefined;
-				}
+		handleCheckAllVisibleChange() {
+			this.allVisibleSelected = !this.allVisibleSelected;
+			if (!this.allVisibleSelected) {
+				this.allExistingSelected = false;
+				Vue.set(this, 'selectedItems', {});
+			} else {
+				this.selectAllVisibleExecutions();
+			}
+		},
+		handleCheckboxChanged(executionId: string) {
+			if (this.selectedItems[executionId]) {
+				Vue.delete(this.selectedItems, executionId);
+			} else {
+				Vue.set(this.selectedItems, executionId, true);
+			}
+			this.allVisibleSelected =
+				Object.keys(this.selectedItems).length === this.combinedExecutions.length;
+			this.allExistingSelected =
+				Object.keys(this.selectedItems).length === this.finishedExecutionsCount;
+		},
+		async handleDeleteSelected() {
+			const deleteExecutions = await this.confirmMessage(
+				this.$locale.baseText('executionsList.confirmMessage.message', {
+					interpolate: { numSelected: this.numSelected.toString() },
+				}),
+				this.$locale.baseText('executionsList.confirmMessage.headline'),
+				'warning',
+				this.$locale.baseText('executionsList.confirmMessage.confirmButtonText'),
+				this.$locale.baseText('executionsList.confirmMessage.cancelButtonText'),
+			);
 
-				if (this.autoRefresh) {
-					this.autoRefreshInterval = setInterval(() => this.loadAutoRefresh(), 4 * 1000); // refresh data every 4 secs
-				}
-			},
-			handleCheckAllExistingChange() {
-				this.allExistingSelected = !this.allExistingSelected;
-				this.allVisibleSelected = !this.allExistingSelected;
-				this.handleCheckAllVisibleChange();
-			},
-			handleCheckAllVisibleChange() {
-				this.allVisibleSelected = !this.allVisibleSelected;
-				if (!this.allVisibleSelected) {
-					this.allExistingSelected = false;
-					Vue.set(this, 'selectedItems', {});
-				} else {
-					this.selectAllVisibleExecutions();
-				}
-			},
-			handleCheckboxChanged(executionId: string) {
-				if (this.selectedItems[executionId]) {
-					Vue.delete(this.selectedItems, executionId);
-				} else {
-					Vue.set(this.selectedItems, executionId, true);
-				}
-				this.allVisibleSelected =
-					Object.keys(this.selectedItems).length === this.combinedExecutions.length;
-				this.allExistingSelected =
-					Object.keys(this.selectedItems).length === this.finishedExecutionsCount;
-			},
-			async handleDeleteSelected() {
-				const deleteExecutions = await this.confirmMessage(
-					this.$locale.baseText('executionsList.confirmMessage.message', {
-						interpolate: { numSelected: this.numSelected.toString() },
-					}),
-					this.$locale.baseText('executionsList.confirmMessage.headline'),
-					'warning',
-					this.$locale.baseText('executionsList.confirmMessage.confirmButtonText'),
-					this.$locale.baseText('executionsList.confirmMessage.cancelButtonText'),
-				);
+			if (!deleteExecutions) {
+				return;
+			}
 
-				if (!deleteExecutions) {
-					return;
-				}
+			this.isDataLoading = true;
 
-				this.isDataLoading = true;
+			const sendData: IExecutionDeleteFilter = {};
+			if (this.allExistingSelected) {
+				sendData.deleteBefore = this.finishedExecutions[0].startedAt as Date;
+			} else {
+				sendData.ids = Object.keys(this.selectedItems);
+			}
 
-				const sendData: IExecutionDeleteFilter = {};
-				if (this.allExistingSelected) {
-					sendData.deleteBefore = this.finishedExecutions[0].startedAt as Date;
-				} else {
-					sendData.ids = Object.keys(this.selectedItems);
-				}
+			sendData.filters = this.workflowFilterPast;
 
-				sendData.filters = this.workflowFilterPast;
-
-				try {
-					await this.restApi().deleteExecutions(sendData);
-				} catch (error) {
-					this.isDataLoading = false;
-					this.$showError(
-						error,
-						this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
-					);
-
-					return;
-				}
+			try {
+				await this.workflowsStore.deleteExecutions(sendData);
+			} catch (error) {
 				this.isDataLoading = false;
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
+				);
+
+				return;
+			}
+			this.isDataLoading = false;
+
+			this.$showMessage({
+				title: this.$locale.baseText('executionsList.showMessage.handleDeleteSelected.title'),
+				type: 'success',
+			});
+
+			this.handleClearSelection();
+			this.refreshData();
+		},
+		handleClearSelection(): void {
+			this.allVisibleSelected = false;
+			this.allExistingSelected = false;
+			Vue.set(this, 'selectedItems', {});
+		},
+		onFilterChanged(filter: ExecutionFilterType) {
+			this.filter = filter;
+			this.refreshData();
+			this.handleClearSelection();
+		},
+		handleActionItemClick(commandData: { command: string; execution: IExecutionsSummary }) {
+			if (['currentlySaved', 'original'].includes(commandData.command)) {
+				let loadWorkflow = false;
+				if (commandData.command === 'currentlySaved') {
+					loadWorkflow = true;
+				}
+
+				this.retryExecution(commandData.execution, loadWorkflow);
+
+				this.$telemetry.track('User clicked retry execution button', {
+					workflow_id: this.workflowsStore.workflowId,
+					execution_id: commandData.execution.id,
+					retry_type: loadWorkflow ? 'current' : 'original',
+				});
+			}
+			if (commandData.command === 'delete') {
+				this.deleteExecution(commandData.execution);
+			}
+		},
+		getWorkflowName(workflowId: string): string | undefined {
+			return this.workflows.find((data) => data.id === workflowId)?.name;
+		},
+		async loadActiveExecutions(): Promise<void> {
+			const activeExecutions = isEmpty(this.workflowFilterCurrent.metadata)
+				? await this.workflowsStore.getCurrentExecutions(this.workflowFilterCurrent)
+				: [];
+			for (const activeExecution of activeExecutions) {
+				if (activeExecution.workflowId && !activeExecution.workflowName) {
+					activeExecution.workflowName = this.getWorkflowName(activeExecution.workflowId);
+				}
+			}
+
+			this.workflowsStore.activeExecutions = activeExecutions;
+			this.workflowsStore.addToCurrentExecutions(activeExecutions);
+		},
+		async loadAutoRefresh(): Promise<void> {
+			const filter: ExecutionsQueryFilter = this.workflowFilterPast;
+			// We cannot use firstId here as some executions finish out of order. Let's say
+			// You have execution ids 500 to 505 running.
+			// Suppose 504 finishes before 500, 501, 502 and 503.
+			// iF you use firstId, filtering id >= 504 you won't
+			// ever get ids 500, 501, 502 and 503 when they finish
+			const pastExecutionsPromise: Promise<IExecutionsListResponse> =
+				this.workflowsStore.getPastExecutions(filter, this.requestItemsPerRequest);
+			const currentExecutionsPromise: Promise<IExecutionsCurrentSummaryExtended[]> = isEmpty(
+				filter.metadata,
+			)
+				? this.workflowsStore.getCurrentExecutions({})
+				: Promise.resolve([]);
+
+			const results = await Promise.all([pastExecutionsPromise, currentExecutionsPromise]);
+
+			for (const activeExecution of results[1]) {
+				if (
+					activeExecution.workflowId !== undefined &&
+					activeExecution.workflowName === undefined
+				) {
+					activeExecution.workflowName = this.getWorkflowName(activeExecution.workflowId);
+				}
+			}
+
+			this.workflowsStore.activeExecutions = results[1];
+
+			// execution IDs are typed as string, int conversion is necessary so we can order.
+			const alreadyPresentExecutions = [...this.finishedExecutions];
+			const alreadyPresentExecutionIds = alreadyPresentExecutions.map((exec) =>
+				parseInt(exec.id, 10),
+			);
+			let lastId = 0;
+			const gaps = [] as number[];
+			for (let i = results[0].results.length - 1; i >= 0; i--) {
+				const currentItem = results[0].results[i];
+				const currentId = parseInt(currentItem.id, 10);
+				if (lastId !== 0 && !isNaN(currentId)) {
+					// We are doing this iteration to detect possible gaps.
+					// The gaps are used to remove executions that finished
+					// and were deleted from database but were displaying
+					// in this list while running.
+					if (currentId - lastId > 1) {
+						// We have some gaps.
+						const range = _range(lastId + 1, currentId);
+						gaps.push(...range);
+					}
+				}
+				lastId = parseInt(currentItem.id, 10) || 0;
+
+				// Check new results from end to start
+				// Add new items accordingly.
+				const executionIndex = alreadyPresentExecutionIds.indexOf(currentId);
+				if (executionIndex !== -1) {
+					// Execution that we received is already present.
+
+					if (
+						alreadyPresentExecutions[executionIndex].finished === false &&
+						currentItem.finished === true
+					) {
+						// Concurrency stuff. This might happen if the execution finishes
+						// prior to saving all information to database. Somewhat rare but
+						// With auto refresh and several executions, it happens sometimes.
+						// So we replace the execution data so it displays correctly.
+						alreadyPresentExecutions[executionIndex] = currentItem;
+					}
+
+					continue;
+				}
+
+				// Find the correct position to place this newcomer
+				let j;
+				for (j = alreadyPresentExecutions.length - 1; j >= 0; j--) {
+					if (currentId < parseInt(alreadyPresentExecutions[j].id, 10)) {
+						alreadyPresentExecutions.splice(j + 1, 0, currentItem);
+						break;
+					}
+				}
+				if (j === -1) {
+					alreadyPresentExecutions.unshift(currentItem);
+				}
+			}
+			const alreadyPresentExecutionsFiltered = alreadyPresentExecutions.filter(
+				(execution) =>
+					!gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10),
+			);
+			this.finishedExecutionsCount = results[0].count;
+			this.finishedExecutionsCountEstimated = results[0].estimated;
+
+			Vue.set(this, 'finishedExecutions', alreadyPresentExecutionsFiltered);
+			this.workflowsStore.addToCurrentExecutions(alreadyPresentExecutionsFiltered);
+
+			this.adjustSelectionAfterMoreItemsLoaded();
+		},
+		async loadFinishedExecutions(): Promise<void> {
+			if (this.filter.status === 'running') {
+				this.finishedExecutions = [];
+				this.finishedExecutionsCount = 0;
+				this.finishedExecutionsCountEstimated = false;
+				return;
+			}
+			const data = await this.workflowsStore.getPastExecutions(
+				this.workflowFilterPast,
+				this.requestItemsPerRequest,
+			);
+			this.finishedExecutions = data.results;
+			this.finishedExecutionsCount = data.count;
+			this.finishedExecutionsCountEstimated = data.estimated;
+
+			this.workflowsStore.addToCurrentExecutions(data.results);
+
+			if (this.finishedExecutions.length === 0) {
+				this.handleClearSelection();
+			}
+		},
+		async loadMore() {
+			if (this.filter.status === 'running') {
+				return;
+			}
+
+			this.isDataLoading = true;
+
+			const filter = this.workflowFilterPast;
+			let lastId: string | undefined;
+
+			if (this.finishedExecutions.length !== 0) {
+				const lastItem = this.finishedExecutions.slice(-1)[0];
+				lastId = lastItem.id;
+			}
+
+			let data: IExecutionsListResponse;
+			try {
+				data = await this.workflowsStore.getPastExecutions(
+					filter,
+					this.requestItemsPerRequest,
+					lastId,
+				);
+			} catch (error) {
+				this.isDataLoading = false;
+				this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
+				return;
+			}
+
+			data.results = data.results.map((execution) => {
+				// @ts-ignore
+				return { ...execution, mode: execution.mode };
+			});
+
+			this.finishedExecutions.push(...data.results);
+			this.finishedExecutionsCount = data.count;
+			this.finishedExecutionsCountEstimated = data.estimated;
+
+			this.isDataLoading = false;
+
+			this.workflowsStore.addToCurrentExecutions(data.results);
+
+			this.adjustSelectionAfterMoreItemsLoaded();
+		},
+		async loadWorkflows() {
+			try {
+				const workflows = await this.workflowsStore.fetchAllWorkflows();
+				workflows.sort((a, b) => {
+					if (a.name.toLowerCase() < b.name.toLowerCase()) {
+						return -1;
+					}
+					if (a.name.toLowerCase() > b.name.toLowerCase()) {
+						return 1;
+					}
+					return 0;
+				});
+
+				// @ts-ignore
+				workflows.unshift({
+					id: 'all',
+					name: this.$locale.baseText('executionsList.allWorkflows'),
+				});
+
+				Vue.set(this, 'workflows', workflows);
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.loadWorkflows.title'),
+				);
+			}
+		},
+		async retryExecution(execution: IExecutionsSummary, loadWorkflow?: boolean) {
+			this.isDataLoading = true;
+
+			try {
+				const retrySuccessful = await this.workflowsStore.retryExecution(
+					execution.id,
+					loadWorkflow,
+				);
+
+				if (retrySuccessful) {
+					this.$showMessage({
+						title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulTrue.title'),
+						type: 'success',
+					});
+				} else {
+					this.$showMessage({
+						title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulFalse.title'),
+						type: 'error',
+					});
+				}
+
+				this.isDataLoading = false;
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.retryExecution.title'),
+				);
+
+				this.isDataLoading = false;
+			}
+		},
+		async refreshData() {
+			this.isDataLoading = true;
+
+			try {
+				await Promise.all([this.loadActiveExecutions(), this.loadFinishedExecutions()]);
+			} catch (error) {
+				this.$showError(error, this.$locale.baseText('executionsList.showError.refreshData.title'));
+			}
+
+			this.isDataLoading = false;
+		},
+		getStatus(execution: IExecutionsSummary): ExecutionStatus {
+			if (execution.status) {
+				return execution.status;
+			} else {
+				// this should not happen but just in case
+				let status: ExecutionStatus = 'unknown';
+				if (execution.waitTill) {
+					status = 'waiting';
+				} else if (execution.stoppedAt === undefined) {
+					status = 'running';
+				} else if (execution.finished) {
+					status = 'success';
+				} else if (execution.stoppedAt !== null) {
+					status = 'failed';
+				} else {
+					status = 'unknown';
+				}
+				return status;
+			}
+		},
+		getRowClass(execution: IExecutionsSummary): string {
+			return [this.$style.execRow, this.$style[this.getStatus(execution)]].join(' ');
+		},
+		getStatusText(entry: IExecutionsSummary): string {
+			const status = this.getStatus(entry);
+			let text = '';
+
+			if (status === 'waiting') {
+				text = this.$locale.baseText('executionsList.waiting');
+			} else if (status === 'canceled') {
+				text = this.$locale.baseText('executionsList.canceled');
+			} else if (status === 'crashed') {
+				text = this.$locale.baseText('executionsList.error');
+			} else if (status === 'new') {
+				text = this.$locale.baseText('executionsList.running');
+			} else if (status === 'running') {
+				text = this.$locale.baseText('executionsList.running');
+			} else if (status === 'success') {
+				text = this.$locale.baseText('executionsList.succeeded');
+			} else if (status === 'failed') {
+				text = this.$locale.baseText('executionsList.error');
+			} else {
+				text = this.$locale.baseText('executionsList.unknown');
+			}
+
+			return text;
+		},
+		getStatusTextTranslationPath(entry: IExecutionsSummary): string {
+			const status = this.getStatus(entry);
+			let path = '';
+
+			if (status === 'waiting') {
+				path = 'executionsList.statusWaiting';
+			} else if (status === 'canceled') {
+				path = 'executionsList.statusCanceled';
+			} else if (status === 'crashed') {
+				path = 'executionsList.statusText';
+			} else if (status === 'new') {
+				path = 'executionsList.statusRunning';
+			} else if (status === 'running') {
+				path = 'executionsList.statusRunning';
+			} else if (status === 'success') {
+				path = 'executionsList.statusText';
+			} else if (status === 'failed') {
+				path = 'executionsList.statusText';
+			} else {
+				path = 'executionsList.statusUnknown';
+			}
+
+			return path;
+		},
+		getStatusTooltipText(entry: IExecutionsSummary): string {
+			const status = this.getStatus(entry);
+			let text = '';
+
+			if (status === 'waiting' && this.isWaitTillIndefinite(entry)) {
+				text = this.$locale.baseText(
+					'executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely',
+				);
+			}
+
+			return text;
+		},
+		async stopExecution(activeExecutionId: string) {
+			try {
+				// Add it to the list of currently stopping executions that we
+				// can show the user in the UI that it is in progress
+				this.stoppingExecutions.push(activeExecutionId);
+
+				await this.workflowsStore.stopCurrentExecution(activeExecutionId);
+
+				// Remove it from the list of currently stopping executions
+				const index = this.stoppingExecutions.indexOf(activeExecutionId);
+				this.stoppingExecutions.splice(index, 1);
 
 				this.$showMessage({
-					title: this.$locale.baseText('executionsList.showMessage.handleDeleteSelected.title'),
+					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
+					message: this.$locale.baseText('executionsList.showMessage.stopExecution.message', {
+						interpolate: { activeExecutionId },
+					}),
 					type: 'success',
 				});
 
-				this.handleClearSelection();
 				this.refreshData();
-			},
-			handleClearSelection(): void {
-				this.allVisibleSelected = false;
-				this.allExistingSelected = false;
-				Vue.set(this, 'selectedItems', {});
-			},
-			onFilterChanged(filter: ExecutionFilterType) {
-				this.filter = filter;
-				this.refreshData();
-				this.handleClearSelection();
-			},
-			handleActionItemClick(commandData: { command: string; execution: IExecutionsSummary }) {
-				if (['currentlySaved', 'original'].includes(commandData.command)) {
-					let loadWorkflow = false;
-					if (commandData.command === 'currentlySaved') {
-						loadWorkflow = true;
-					}
-
-					this.retryExecution(commandData.execution, loadWorkflow);
-
-					this.$telemetry.track('User clicked retry execution button', {
-						workflow_id: this.workflowsStore.workflowId,
-						execution_id: commandData.execution.id,
-						retry_type: loadWorkflow ? 'current' : 'original',
-					});
-				}
-				if (commandData.command === 'delete') {
-					this.deleteExecution(commandData.execution);
-				}
-			},
-			getWorkflowName(workflowId: string): string | undefined {
-				return this.workflows.find((data) => data.id === workflowId)?.name;
-			},
-			async loadActiveExecutions(): Promise<void> {
-				const activeExecutions = isEmpty(this.workflowFilterCurrent.metadata)
-					? await this.restApi().getCurrentExecutions(this.workflowFilterCurrent)
-					: [];
-				for (const activeExecution of activeExecutions) {
-					if (activeExecution.workflowId && !activeExecution.workflowName) {
-						activeExecution.workflowName = this.getWorkflowName(activeExecution.workflowId);
-					}
-				}
-
-				this.workflowsStore.activeExecutions = activeExecutions;
-				this.workflowsStore.addToCurrentExecutions(activeExecutions);
-			},
-			async loadAutoRefresh(): Promise<void> {
-				const filter: ExecutionsQueryFilter = this.workflowFilterPast;
-				// We cannot use firstId here as some executions finish out of order. Let's say
-				// You have execution ids 500 to 505 running.
-				// Suppose 504 finishes before 500, 501, 502 and 503.
-				// iF you use firstId, filtering id >= 504 you won't
-				// ever get ids 500, 501, 502 and 503 when they finish
-				const pastExecutionsPromise: Promise<IExecutionsListResponse> =
-					this.restApi().getPastExecutions(filter, this.requestItemsPerRequest);
-				const currentExecutionsPromise: Promise<IExecutionsCurrentSummaryExtended[]> = isEmpty(
-					filter.metadata,
-				)
-					? this.restApi().getCurrentExecutions({})
-					: Promise.resolve([]);
-
-				const results = await Promise.all([pastExecutionsPromise, currentExecutionsPromise]);
-
-				for (const activeExecution of results[1]) {
-					if (
-						activeExecution.workflowId !== undefined &&
-						activeExecution.workflowName === undefined
-					) {
-						activeExecution.workflowName = this.getWorkflowName(activeExecution.workflowId);
-					}
-				}
-
-				this.workflowsStore.activeExecutions = results[1];
-
-				// execution IDs are typed as string, int conversion is necessary so we can order.
-				const alreadyPresentExecutions = [...this.finishedExecutions];
-				const alreadyPresentExecutionIds = alreadyPresentExecutions.map((exec) =>
-					parseInt(exec.id, 10),
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.stopExecution.title'),
 				);
-				let lastId = 0;
-				const gaps = [] as number[];
-				for (let i = results[0].results.length - 1; i >= 0; i--) {
-					const currentItem = results[0].results[i];
-					const currentId = parseInt(currentItem.id, 10);
-					if (lastId !== 0 && !isNaN(currentId)) {
-						// We are doing this iteration to detect possible gaps.
-						// The gaps are used to remove executions that finished
-						// and were deleted from database but were displaying
-						// in this list while running.
-						if (currentId - lastId > 1) {
-							// We have some gaps.
-							const range = _range(lastId + 1, currentId);
-							gaps.push(...range);
-						}
-					}
-					lastId = parseInt(currentItem.id, 10) || 0;
+			}
+		},
+		isExecutionRetriable(execution: IExecutionsSummary): boolean {
+			return (
+				execution.stoppedAt !== undefined &&
+				!execution.finished &&
+				execution.retryOf === undefined &&
+				execution.retrySuccessId === undefined &&
+				!execution.waitTill
+			);
+		},
+		async deleteExecution(execution: IExecutionsSummary) {
+			this.isDataLoading = true;
+			try {
+				await this.workflowsStore.deleteExecutions({ ids: [execution.id] });
+				await this.refreshData();
 
-					// Check new results from end to start
-					// Add new items accordingly.
-					const executionIndex = alreadyPresentExecutionIds.indexOf(currentId);
-					if (executionIndex !== -1) {
-						// Execution that we received is already present.
-
-						if (
-							alreadyPresentExecutions[executionIndex].finished === false &&
-							currentItem.finished === true
-						) {
-							// Concurrency stuff. This might happen if the execution finishes
-							// prior to saving all information to database. Somewhat rare but
-							// With auto refresh and several executions, it happens sometimes.
-							// So we replace the execution data so it displays correctly.
-							alreadyPresentExecutions[executionIndex] = currentItem;
-						}
-
-						continue;
-					}
-
-					// Find the correct position to place this newcomer
-					let j;
-					for (j = alreadyPresentExecutions.length - 1; j >= 0; j--) {
-						if (currentId < parseInt(alreadyPresentExecutions[j].id, 10)) {
-							alreadyPresentExecutions.splice(j + 1, 0, currentItem);
-							break;
-						}
-					}
-					if (j === -1) {
-						alreadyPresentExecutions.unshift(currentItem);
-					}
-				}
-				const alreadyPresentExecutionsFiltered = alreadyPresentExecutions.filter(
-					(execution) =>
-						!gaps.includes(parseInt(execution.id, 10)) && lastId >= parseInt(execution.id, 10),
-				);
-				this.finishedExecutionsCount = results[0].count;
-				this.finishedExecutionsCountEstimated = results[0].estimated;
-
-				Vue.set(this, 'finishedExecutions', alreadyPresentExecutionsFiltered);
-				this.workflowsStore.addToCurrentExecutions(alreadyPresentExecutionsFiltered);
-
-				this.adjustSelectionAfterMoreItemsLoaded();
-			},
-			async loadFinishedExecutions(): Promise<void> {
-				if (this.filter.status === 'running') {
-					this.finishedExecutions = [];
-					this.finishedExecutionsCount = 0;
-					this.finishedExecutionsCountEstimated = false;
-					return;
-				}
-				const data = await this.restApi().getPastExecutions(
-					this.workflowFilterPast,
-					this.requestItemsPerRequest,
-				);
-				this.finishedExecutions = data.results;
-				this.finishedExecutionsCount = data.count;
-				this.finishedExecutionsCountEstimated = data.estimated;
-
-				this.workflowsStore.addToCurrentExecutions(data.results);
-
-				if (this.finishedExecutions.length === 0) {
-					this.handleClearSelection();
-				}
-			},
-			async loadMore() {
-				if (this.filter.status === 'running') {
-					return;
-				}
-
-				this.isDataLoading = true;
-
-				const filter = this.workflowFilterPast;
-				let lastId: string | undefined;
-
-				if (this.finishedExecutions.length !== 0) {
-					const lastItem = this.finishedExecutions.slice(-1)[0];
-					lastId = lastItem.id;
-				}
-
-				let data: IExecutionsListResponse;
-				try {
-					data = await this.restApi().getPastExecutions(
-						filter,
-						this.requestItemsPerRequest,
-						lastId,
-					);
-				} catch (error) {
-					this.isDataLoading = false;
-					this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
-					return;
-				}
-
-				data.results = data.results.map((execution) => {
-					// @ts-ignore
-					return { ...execution, mode: execution.mode };
-				});
-
-				this.finishedExecutions.push(...data.results);
-				this.finishedExecutionsCount = data.count;
-				this.finishedExecutionsCountEstimated = data.estimated;
-
-				this.isDataLoading = false;
-
-				this.workflowsStore.addToCurrentExecutions(data.results);
-
-				this.adjustSelectionAfterMoreItemsLoaded();
-			},
-			async loadWorkflows() {
-				try {
-					const workflows = await this.restApi().getWorkflows();
-					workflows.sort((a, b) => {
-						if (a.name.toLowerCase() < b.name.toLowerCase()) {
-							return -1;
-						}
-						if (a.name.toLowerCase() > b.name.toLowerCase()) {
-							return 1;
-						}
-						return 0;
-					});
-
-					// @ts-ignore
-					workflows.unshift({
-						id: 'all',
-						name: this.$locale.baseText('executionsList.allWorkflows'),
-					});
-
-					Vue.set(this, 'workflows', workflows);
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('executionsList.showError.loadWorkflows.title'),
-					);
-				}
-			},
-			async retryExecution(execution: IExecutionsSummary, loadWorkflow?: boolean) {
-				this.isDataLoading = true;
-
-				try {
-					const retrySuccessful = await this.restApi().retryExecution(execution.id, loadWorkflow);
-
-					if (retrySuccessful) {
-						this.$showMessage({
-							title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulTrue.title'),
-							type: 'success',
-						});
-					} else {
-						this.$showMessage({
-							title: this.$locale.baseText('executionsList.showMessage.retrySuccessfulFalse.title'),
-							type: 'error',
-						});
-					}
-
-					this.isDataLoading = false;
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('executionsList.showError.retryExecution.title'),
-					);
-
-					this.isDataLoading = false;
-				}
-			},
-			async refreshData() {
-				this.isDataLoading = true;
-
-				try {
-					await Promise.all([this.loadActiveExecutions(), this.loadFinishedExecutions()]);
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('executionsList.showError.refreshData.title'),
-					);
-				}
-
-				this.isDataLoading = false;
-			},
-			getStatus(execution: IExecutionsSummary): ExecutionStatus {
-				if (execution.status) {
-					return execution.status;
-				} else {
-					// this should not happen but just in case
-					let status: ExecutionStatus = 'unknown';
-					if (execution.waitTill) {
-						status = 'waiting';
-					} else if (execution.stoppedAt === undefined) {
-						status = 'running';
-					} else if (execution.finished) {
-						status = 'success';
-					} else if (execution.stoppedAt !== null) {
-						status = 'failed';
-					} else {
-						status = 'unknown';
-					}
-					return status;
-				}
-			},
-			getRowClass(execution: IExecutionsSummary): string {
-				return [this.$style.execRow, this.$style[this.getStatus(execution)]].join(' ');
-			},
-			getStatusText(entry: IExecutionsSummary): string {
-				const status = this.getStatus(entry);
-				let text = '';
-
-				if (status === 'waiting') {
-					text = this.$locale.baseText('executionsList.waiting');
-				} else if (status === 'canceled') {
-					text = this.$locale.baseText('executionsList.canceled');
-				} else if (status === 'crashed') {
-					text = this.$locale.baseText('executionsList.error');
-				} else if (status === 'new') {
-					text = this.$locale.baseText('executionsList.running');
-				} else if (status === 'running') {
-					text = this.$locale.baseText('executionsList.running');
-				} else if (status === 'success') {
-					text = this.$locale.baseText('executionsList.succeeded');
-				} else if (status === 'failed') {
-					text = this.$locale.baseText('executionsList.error');
-				} else {
-					text = this.$locale.baseText('executionsList.unknown');
-				}
-
-				return text;
-			},
-			getStatusTextTranslationPath(entry: IExecutionsSummary): string {
-				const status = this.getStatus(entry);
-				let path = '';
-
-				if (status === 'waiting') {
-					path = 'executionsList.statusWaiting';
-				} else if (status === 'canceled') {
-					path = 'executionsList.statusCanceled';
-				} else if (status === 'crashed') {
-					path = 'executionsList.statusText';
-				} else if (status === 'new') {
-					path = 'executionsList.statusRunning';
-				} else if (status === 'running') {
-					path = 'executionsList.statusRunning';
-				} else if (status === 'success') {
-					path = 'executionsList.statusText';
-				} else if (status === 'failed') {
-					path = 'executionsList.statusText';
-				} else {
-					path = 'executionsList.statusUnknown';
-				}
-
-				return path;
-			},
-			getStatusTooltipText(entry: IExecutionsSummary): string {
-				const status = this.getStatus(entry);
-				let text = '';
-
-				if (status === 'waiting' && this.isWaitTillIndefinite(entry)) {
-					text = this.$locale.baseText(
-						'executionsList.statusTooltipText.theWorkflowIsWaitingIndefinitely',
-					);
-				}
-
-				return text;
-			},
-			async stopExecution(activeExecutionId: string) {
-				try {
-					// Add it to the list of currently stopping executions that we
-					// can show the user in the UI that it is in progress
-					this.stoppingExecutions.push(activeExecutionId);
-
-					await this.restApi().stopCurrentExecution(activeExecutionId);
-
-					// Remove it from the list of currently stopping executions
-					const index = this.stoppingExecutions.indexOf(activeExecutionId);
-					this.stoppingExecutions.splice(index, 1);
-
-					this.$showMessage({
-						title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
-						message: this.$locale.baseText('executionsList.showMessage.stopExecution.message', {
-							interpolate: { activeExecutionId },
-						}),
-						type: 'success',
-					});
-
-					this.refreshData();
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('executionsList.showError.stopExecution.title'),
-					);
-				}
-			},
-			isExecutionRetriable(execution: IExecutionsSummary): boolean {
-				return (
-					execution.stoppedAt !== undefined &&
-					!execution.finished &&
-					execution.retryOf === undefined &&
-					execution.retrySuccessId === undefined &&
-					!execution.waitTill
-				);
-			},
-			async deleteExecution(execution: IExecutionsSummary) {
-				this.isDataLoading = true;
-				try {
-					await this.restApi().deleteExecutions({ ids: [execution.id] });
-					await this.refreshData();
-
-					if (this.allVisibleSelected) {
-						Vue.set(this, 'selectedItems', {});
-						this.selectAllVisibleExecutions();
-					}
-				} catch (error) {
-					this.$showError(
-						error,
-						this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
-					);
-				}
-				this.isDataLoading = true;
-			},
-			isWaitTillIndefinite(execution: IExecutionsSummary): boolean {
-				if (!execution.waitTill) {
-					return false;
-				}
-				return new Date(execution.waitTill).toISOString() === WAIT_TIME_UNLIMITED;
-			},
-			isRunning(execution: IExecutionsSummary): boolean {
-				return this.getStatus(execution) === 'running';
-			},
-			selectAllVisibleExecutions() {
-				this.combinedExecutions.forEach((execution: IExecutionsSummary) => {
-					Vue.set(this.selectedItems, execution.id, true);
-				});
-			},
-			adjustSelectionAfterMoreItemsLoaded() {
-				if (this.allExistingSelected) {
-					this.allVisibleSelected = true;
+				if (this.allVisibleSelected) {
+					Vue.set(this, 'selectedItems', {});
 					this.selectAllVisibleExecutions();
 				}
-			},
+			} catch (error) {
+				this.$showError(
+					error,
+					this.$locale.baseText('executionsList.showError.handleDeleteSelected.title'),
+				);
+			}
+			this.isDataLoading = true;
+		},
+		isWaitTillIndefinite(execution: IExecutionsSummary): boolean {
+			if (!execution.waitTill) {
+				return false;
+			}
+			return new Date(execution.waitTill).toISOString() === WAIT_TIME_UNLIMITED;
+		},
+		isRunning(execution: IExecutionsSummary): boolean {
+			return this.getStatus(execution) === 'running';
+		},
+		selectAllVisibleExecutions() {
+			this.combinedExecutions.forEach((execution: IExecutionsSummary) => {
+				Vue.set(this.selectedItems, execution.id, true);
+			});
+		},
+		adjustSelectionAfterMoreItemsLoaded() {
+			if (this.allExistingSelected) {
+				this.allVisibleSelected = true;
+				this.selectAllVisibleExecutions();
+			}
 		},
 	},
-);
+});
 </script>
 
 <style module lang="scss">
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index 54b550d563..473df7d31a 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -86,10 +86,9 @@ import mixins from 'vue-typed-mixins';
 import { executionHelpers, IExecutionUIData } from '@/mixins/executionsHelpers';
 import { VIEWS } from '@/constants';
 import { showMessage } from '@/mixins/showMessage';
-import { restApi } from '@/mixins/restApi';
 import ExecutionTime from '@/components/ExecutionTime.vue';
 
-export default mixins(executionHelpers, showMessage, restApi).extend({
+export default mixins(executionHelpers, showMessage).extend({
 	name: 'execution-card',
 	components: {
 		ExecutionTime,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 1df971aac6..50c328b275 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -127,7 +127,6 @@
 
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
-import { restApi } from '@/mixins/restApi';
 import { showMessage } from '@/mixins/showMessage';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import { executionHelpers, IExecutionUIData } from '@/mixins/executionsHelpers';
@@ -135,11 +134,10 @@ import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { Dropdown as ElDropdown } from 'element-ui';
-import { IAbstractEventMessage } from 'n8n-workflow';
 
 type RetryDropdownRef = InstanceType<typeof ElDropdown> & { hide: () => void };
 
-export default mixins(restApi, showMessage, executionHelpers).extend({
+export default mixins(showMessage, executionHelpers).extend({
 	name: 'execution-preview',
 	components: {
 		ElDropdown,
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
index e92af5cc4b..3069e844d8 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionsList.vue
@@ -49,7 +49,6 @@ import {
 	NodeHelpers,
 } from 'n8n-workflow';
 import mixins from 'vue-typed-mixins';
-import { restApi } from '@/mixins/restApi';
 import { showMessage } from '@/mixins/showMessage';
 import { v4 as uuid } from 'uuid';
 import { Route } from 'vue-router';
@@ -71,13 +70,7 @@ const MAX_LOADING_ATTEMPTS = 5;
 // Number of executions fetched on each page
 const LOAD_MORE_PAGE_SIZE = 100;
 
-export default mixins(
-	restApi,
-	showMessage,
-	executionHelpers,
-	debounceHelper,
-	workflowHelpers,
-).extend({
+export default mixins(showMessage, executionHelpers, debounceHelper, workflowHelpers).extend({
 	name: 'executions-list',
 	components: {
 		ExecutionsSidebar,
@@ -225,7 +218,7 @@ export default mixins(
 
 			let data: IExecutionsListResponse;
 			try {
-				data = await this.restApi().getPastExecutions(this.requestFilter, limit, lastId);
+				data = await this.workflowsStore.getPastExecutions(this.requestFilter, limit, lastId);
 			} catch (error) {
 				this.loadingMore = false;
 				this.$showError(error, this.$locale.baseText('executionsList.showError.loadMore.title'));
@@ -260,7 +253,7 @@ export default mixins(
 					this.executions[executionIndex - 1] ||
 					this.executions[0];
 
-				await this.restApi().deleteExecutions({ ids: [this.$route.params.executionId] });
+				await this.workflowsStore.deleteExecutions({ ids: [this.$route.params.executionId] });
 				if (this.temporaryExecution?.id === this.$route.params.executionId) {
 					this.temporaryExecution = null;
 				}
@@ -300,7 +293,7 @@ export default mixins(
 			const activeExecutionId = this.$route.params.executionId;
 
 			try {
-				await this.restApi().stopCurrentExecution(activeExecutionId);
+				await this.workflowsStore.stopCurrentExecution(activeExecutionId);
 
 				this.$showMessage({
 					title: this.$locale.baseText('executionsList.showMessage.stopExecution.title'),
@@ -498,7 +491,7 @@ export default mixins(
 
 			let data: IWorkflowDb | undefined;
 			try {
-				data = await this.restApi().getWorkflow(workflowId);
+				data = await this.workflowsStore.fetchWorkflow(workflowId);
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('nodeView.showError.openWorkflow.title'));
 				return;
@@ -644,7 +637,7 @@ export default mixins(
 			}
 		},
 		async loadActiveWorkflows(): Promise<void> {
-			this.workflowsStore.activeWorkflows = await this.restApi().getActiveWorkflows();
+			await this.workflowsStore.fetchActiveWorkflows();
 		},
 		async onRetryExecution(payload: { execution: IExecutionsSummary; command: string }) {
 			const loadWorkflow = payload.command === 'current-workflow';
@@ -665,7 +658,10 @@ export default mixins(
 		},
 		async retryExecution(execution: IExecutionsSummary, loadWorkflow?: boolean) {
 			try {
-				const retrySuccessful = await this.restApi().retryExecution(execution.id, loadWorkflow);
+				const retrySuccessful = await this.workflowsStore.retryExecution(
+					execution.id,
+					loadWorkflow,
+				);
 
 				if (retrySuccessful === true) {
 					this.$showMessage({
diff --git a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
index 0e194b87df..a3980e1637 100644
--- a/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
+++ b/packages/editor-ui/src/components/MainHeader/WorkflowDetails.vue
@@ -509,7 +509,7 @@ export default mixins(workflowHelpers).extend({
 					}
 
 					try {
-						await this.restApi().deleteWorkflow(this.currentWorkflowId);
+						await this.workflowsStore.deleteWorkflowAPI(this.currentWorkflowId);
 					} catch (error) {
 						this.$showError(
 							error,
diff --git a/packages/editor-ui/src/components/MainSidebar.vue b/packages/editor-ui/src/components/MainSidebar.vue
index 942e1119b0..dc412e48ef 100644
--- a/packages/editor-ui/src/components/MainSidebar.vue
+++ b/packages/editor-ui/src/components/MainSidebar.vue
@@ -97,7 +97,6 @@ import GiftNotificationIcon from './GiftNotificationIcon.vue';
 import WorkflowSettings from '@/components/WorkflowSettings.vue';
 
 import { genericHelpers } from '@/mixins/genericHelpers';
-import { restApi } from '@/mixins/restApi';
 import { showMessage } from '@/mixins/showMessage';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { workflowRun } from '@/mixins/workflowRun';
@@ -118,7 +117,6 @@ import { isNavigationFailure } from 'vue-router';
 
 export default mixins(
 	genericHelpers,
-	restApi,
 	showMessage,
 	workflowHelpers,
 	workflowRun,
diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index cb1a1621ce..796a83cda4 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -98,7 +98,6 @@
 
 <script lang="ts">
 import { PropType } from 'vue';
-import { restApi } from '@/mixins/restApi';
 import {
 	ICredentialsResponse,
 	INodeUi,
@@ -142,7 +141,7 @@ interface CredentialDropdownOption extends ICredentialsResponse {
 	typeDisplayName: string;
 }
 
-export default mixins(genericHelpers, nodeHelpers, restApi, showMessage).extend({
+export default mixins(genericHelpers, nodeHelpers, showMessage).extend({
 	name: 'NodeCredentials',
 	props: {
 		readonly: {
diff --git a/packages/editor-ui/src/components/NodeExecuteButton.vue b/packages/editor-ui/src/components/NodeExecuteButton.vue
index 167872d61f..490ddb21c1 100644
--- a/packages/editor-ui/src/components/NodeExecuteButton.vue
+++ b/packages/editor-ui/src/components/NodeExecuteButton.vue
@@ -171,7 +171,7 @@ export default mixins(workflowRun, pinData).extend({
 	methods: {
 		async stopWaitingForWebhook() {
 			try {
-				await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
+				await this.workflowsStore.removeTestWebhook(this.workflowsStore.workflowId);
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('ndv.execute.stopWaitingForWebhook.error'));
 				return;
diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index b5fc193e8e..2476dbad9a 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -1251,7 +1251,7 @@ export default mixins(externalHooks, genericHelpers, nodeHelpers, pinData).exten
 			const { id, data, fileName, fileExtension, mimeType } = this.binaryData[index][key];
 
 			if (id) {
-				const url = this.restApi().getBinaryUrl(id, 'download', fileName, mimeType);
+				const url = this.workflowsStore.getBinaryUrl(id, 'download', fileName, mimeType);
 				saveAs(url, [fileName, fileExtension].join('.'));
 				return;
 			} else {
diff --git a/packages/editor-ui/src/components/UserActivationSurveyModal.vue b/packages/editor-ui/src/components/UserActivationSurveyModal.vue
index 3cab5fbf59..ec1714d636 100644
--- a/packages/editor-ui/src/components/UserActivationSurveyModal.vue
+++ b/packages/editor-ui/src/components/UserActivationSurveyModal.vue
@@ -86,7 +86,7 @@ const workflowName = ref('');
 onMounted(async () => {
 	const currentSettings = getCurrentSettings();
 	try {
-		const { name } = await workflowStore.fetchWorkflow(
+		const { name } = await workflowStore.fetchAndSetWorkflow(
 			currentSettings?.firstSuccessfulWorkflowId ?? '',
 		);
 		workflowName.value = name;
diff --git a/packages/editor-ui/src/components/WorkflowActivator.vue b/packages/editor-ui/src/components/WorkflowActivator.vue
index 143bbf41b7..c4e19c966c 100644
--- a/packages/editor-ui/src/components/WorkflowActivator.vue
+++ b/packages/editor-ui/src/components/WorkflowActivator.vue
@@ -105,7 +105,7 @@ export default mixins(showMessage, workflowActivate).extend({
 		async displayActivationError() {
 			let errorMessage: string;
 			try {
-				const errorData = await this.restApi().getActivationError(this.workflowId);
+				const errorData = await this.workflowsStore.getActivationError(this.workflowId);
 
 				if (errorData === undefined) {
 					errorMessage = this.$locale.baseText(
diff --git a/packages/editor-ui/src/components/WorkflowCard.vue b/packages/editor-ui/src/components/WorkflowCard.vue
index 875500337b..a62ced3c33 100644
--- a/packages/editor-ui/src/components/WorkflowCard.vue
+++ b/packages/editor-ui/src/components/WorkflowCard.vue
@@ -73,7 +73,6 @@ import {
 import { showMessage } from '@/mixins/showMessage';
 import { getWorkflowPermissions, IPermissions } from '@/permissions';
 import dateformat from 'dateformat';
-import { restApi } from '@/mixins/restApi';
 import WorkflowActivator from '@/components/WorkflowActivator.vue';
 import Vue from 'vue';
 import { mapStores } from 'pinia';
@@ -91,7 +90,7 @@ export const WORKFLOW_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(showMessage, restApi).extend({
+export default mixins(showMessage).extend({
 	data() {
 		return {
 			EnterpriseEditionFeature,
@@ -234,7 +233,7 @@ export default mixins(showMessage, restApi).extend({
 				}
 
 				try {
-					await this.restApi().deleteWorkflow(this.data.id);
+					await this.workflowsStore.deleteWorkflowAPI(this.data.id);
 					this.workflowsStore.deleteWorkflow(this.data.id);
 				} catch (error) {
 					this.$showError(
diff --git a/packages/editor-ui/src/components/WorkflowSettings.vue b/packages/editor-ui/src/components/WorkflowSettings.vue
index 44155cd3dc..ace78db66c 100644
--- a/packages/editor-ui/src/components/WorkflowSettings.vue
+++ b/packages/editor-ui/src/components/WorkflowSettings.vue
@@ -327,7 +327,6 @@
 import Vue from 'vue';
 
 import { externalHooks } from '@/mixins/externalHooks';
-import { restApi } from '@/mixins/restApi';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { showMessage } from '@/mixins/showMessage';
 import {
@@ -357,7 +356,7 @@ import useWorkflowsEEStore from '@/stores/workflows.ee';
 import { useUsersStore } from '@/stores/users';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(externalHooks, genericHelpers, restApi, showMessage).extend({
+export default mixins(externalHooks, genericHelpers, showMessage).extend({
 	name: 'WorkflowSettings',
 	components: {
 		Modal,
@@ -703,7 +702,7 @@ export default mixins(externalHooks, genericHelpers, restApi, showMessage).exten
 				return;
 			}
 
-			const timezones = await this.restApi().getTimezones();
+			const timezones = await this.settingsStore.getTimezones();
 
 			let defaultTimezoneValue = timezones[this.defaultValues.timezone] as string | undefined;
 			if (defaultTimezoneValue === undefined) {
@@ -724,7 +723,7 @@ export default mixins(externalHooks, genericHelpers, restApi, showMessage).exten
 			}
 		},
 		async loadWorkflows() {
-			const workflows = await this.restApi().getWorkflows();
+			const workflows = await this.workflowsStore.fetchAllWorkflows();
 			workflows.sort((a, b) => {
 				if (a.name.toLowerCase() < b.name.toLowerCase()) {
 					return -1;
@@ -789,7 +788,7 @@ export default mixins(externalHooks, genericHelpers, restApi, showMessage).exten
 			data.versionId = this.workflowsStore.workflowVersionId;
 
 			try {
-				const workflow = await this.restApi().updateWorkflow(this.$route.params.name, data);
+				const workflow = await this.workflowsStore.updateWorkflow(this.$route.params.name, data);
 				this.workflowsStore.setWorkflowVersionId(workflow.versionId);
 			} catch (error) {
 				this.$showError(
diff --git a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
index 3d645cdaed..fc3597cd80 100644
--- a/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
+++ b/packages/editor-ui/src/components/WorkflowShareModal.ee.vue
@@ -448,7 +448,7 @@ export default mixins(showMessage).extend({
 					this.workflow.id !== PLACEHOLDER_EMPTY_WORKFLOW_ID &&
 					!this.workflow.sharedWith?.length // Sharing info already loaded
 				) {
-					await this.workflowsStore.fetchWorkflow(this.workflow.id);
+					await this.workflowsStore.fetchAndSetWorkflow(this.workflow.id);
 				}
 			}
 
diff --git a/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts b/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
index 3eea1564f9..9db7d4438e 100644
--- a/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
+++ b/packages/editor-ui/src/components/__tests__/ExecutionsList.test.ts
@@ -12,17 +12,21 @@ import { genericHelpers } from '@/mixins/genericHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { showMessage } from '@/mixins/showMessage';
 import { i18nInstance } from '@/plugins/i18n';
-import type { IWorkflowShortResponse } from '@/Interface';
+import type { IWorkflowDb } from '@/Interface';
 import type { IExecutionsSummary } from 'n8n-workflow';
 import { waitAllPromises } from '@/__tests__/utils';
+import { useWorkflowsStore } from '@/stores';
 
-const workflowDataFactory = (): IWorkflowShortResponse => ({
+const workflowDataFactory = (): IWorkflowDb => ({
 	createdAt: faker.date.past().toDateString(),
 	updatedAt: faker.date.past().toDateString(),
 	id: faker.datatype.uuid(),
 	name: faker.datatype.string(),
 	active: faker.datatype.boolean(),
 	tags: [],
+	nodes: [],
+	connections: {},
+	versionId: faker.datatype.number().toString(),
 });
 
 const executionDataFactory = (): IExecutionsSummary => ({
@@ -45,20 +49,6 @@ const executionsData = Array.from({ length: 2 }, () => ({
 	estimated: false,
 }));
 
-let getPastExecutionsSpy = vi.fn().mockResolvedValue({ count: 0, results: [], estimated: false });
-
-const mockRestApiMixin = defineComponent({
-	methods: {
-		restApi() {
-			return {
-				getWorkflows: vi.fn().mockResolvedValue(workflowsData),
-				getCurrentExecutions: vi.fn().mockResolvedValue([]),
-				getPastExecutions: getPastExecutionsSpy,
-			};
-		},
-	},
-});
-
 const renderOptions = {
 	pinia: createTestingPinia({
 		initialState: {
@@ -83,7 +73,7 @@ const renderOptions = {
 	}),
 	i18n: i18nInstance,
 	stubs: ['font-awesome-icon'],
-	mixins: [externalHooks, genericHelpers, executionHelpers, showMessage, mockRestApiMixin],
+	mixins: [externalHooks, genericHelpers, executionHelpers, showMessage],
 };
 
 function TelemetryPlugin(vue: typeof Vue): void {
@@ -113,7 +103,22 @@ Vue.use(TelemetryPlugin);
 Vue.use(PiniaVuePlugin);
 
 describe('ExecutionsList.vue', () => {
+	const workflowsStore: ReturnType<typeof useWorkflowsStore> = useWorkflowsStore();
+	beforeEach(() => {
+		vi.spyOn(workflowsStore, 'fetchAllWorkflows').mockResolvedValue(workflowsData);
+		vi.spyOn(workflowsStore, 'getCurrentExecutions').mockResolvedValue([]);
+	});
+
+	afterEach(() => {
+		vi.clearAllMocks();
+	});
+
 	it('should render empty list', async () => {
+		vi.spyOn(workflowsStore, 'getPastExecutions').mockResolvedValueOnce({
+			count: 0,
+			results: [],
+			estimated: false,
+		});
 		const { queryAllByTestId, queryByTestId, getByTestId } = await renderComponent();
 		await userEvent.click(getByTestId('execution-auto-refresh-checkbox'));
 
@@ -124,8 +129,8 @@ describe('ExecutionsList.vue', () => {
 	});
 
 	it('should handle selection flow when loading more items', async () => {
-		getPastExecutionsSpy = vi
-			.fn()
+		const storeSpy = vi
+			.spyOn(workflowsStore, 'getPastExecutions')
 			.mockResolvedValueOnce(executionsData[0])
 			.mockResolvedValueOnce(executionsData[1]);
 
@@ -134,7 +139,7 @@ describe('ExecutionsList.vue', () => {
 
 		await userEvent.click(getByTestId('select-visible-executions-checkbox'));
 
-		expect(getPastExecutionsSpy).toHaveBeenCalledTimes(1);
+		expect(storeSpy).toHaveBeenCalledTimes(1);
 		expect(
 			getAllByTestId('select-execution-checkbox').filter((el) =>
 				el.contains(el.querySelector(':checked')),
@@ -145,7 +150,7 @@ describe('ExecutionsList.vue', () => {
 
 		await userEvent.click(getByTestId('load-more-button'));
 
-		expect(getPastExecutionsSpy).toHaveBeenCalledTimes(2);
+		expect(storeSpy).toHaveBeenCalledTimes(2);
 		expect(getAllByTestId('select-execution-checkbox').length).toBe(20);
 		expect(
 			getAllByTestId('select-execution-checkbox').filter((el) =>
diff --git a/packages/editor-ui/src/mixins/nodeHelpers.ts b/packages/editor-ui/src/mixins/nodeHelpers.ts
index e859295107..eb4cea7e5c 100644
--- a/packages/editor-ui/src/mixins/nodeHelpers.ts
+++ b/packages/editor-ui/src/mixins/nodeHelpers.ts
@@ -32,11 +32,8 @@ import {
 	IUser,
 } from '@/Interface';
 
-import { restApi } from '@/mixins/restApi';
-
 import { get } from 'lodash-es';
 
-import mixins from 'vue-typed-mixins';
 import { isObjectLiteral } from '@/utils';
 import { getCredentialPermissions } from '@/permissions';
 import { mapStores } from 'pinia';
@@ -45,8 +42,9 @@ import { useUsersStore } from '@/stores/users';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useNodeTypesStore } from '@/stores/nodeTypes';
 import { useCredentialsStore } from '@/stores/credentials';
+import Vue from 'vue';
 
-export const nodeHelpers = mixins(restApi).extend({
+export const nodeHelpers = Vue.extend({
 	computed: {
 		...mapStores(
 			useCredentialsStore,
diff --git a/packages/editor-ui/src/mixins/workflowHelpers.ts b/packages/editor-ui/src/mixins/workflowHelpers.ts
index f498827337..eeceac097c 100644
--- a/packages/editor-ui/src/mixins/workflowHelpers.ts
+++ b/packages/editor-ui/src/mixins/workflowHelpers.ts
@@ -44,7 +44,6 @@ import {
 } from '../Interface';
 
 import { externalHooks } from '@/mixins/externalHooks';
-import { restApi } from '@/mixins/restApi';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
 import { showMessage } from '@/mixins/showMessage';
 
@@ -325,7 +324,7 @@ function executeData(
 	return executeData;
 }
 
-export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showMessage).extend({
+export const workflowHelpers = mixins(externalHooks, nodeHelpers, showMessage).extend({
 	computed: {
 		...mapStores(
 			useNodeTypesStore,
@@ -664,7 +663,7 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showM
 			if (isCurrentWorkflow) {
 				data = await this.getWorkflowDataToSave();
 			} else {
-				const { versionId } = await this.restApi().getWorkflow(workflowId);
+				const { versionId } = await this.workflowsStore.fetchWorkflow(workflowId);
 				data.versionId = versionId;
 			}
 
@@ -672,7 +671,7 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showM
 				data.active = active;
 			}
 
-			const workflow = await this.restApi().updateWorkflow(workflowId, data);
+			const workflow = await this.workflowsStore.updateWorkflow(workflowId, data);
 			this.workflowsStore.setWorkflowVersionId(workflow.versionId);
 
 			if (isCurrentWorkflow) {
@@ -714,7 +713,7 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showM
 
 				workflowDataRequest.versionId = this.workflowsStore.workflowVersionId;
 
-				const workflowData = await this.restApi().updateWorkflow(
+				const workflowData = await this.workflowsStore.updateWorkflow(
 					currentWorkflow,
 					workflowDataRequest,
 					forceSave,
@@ -831,7 +830,7 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showM
 				if (tags) {
 					workflowDataRequest.tags = tags;
 				}
-				const workflowData = await this.restApi().createNewWorkflow(workflowDataRequest);
+				const workflowData = await this.workflowsStore.createNewWorkflow(workflowDataRequest);
 
 				this.workflowsStore.addWorkflow(workflowData);
 
@@ -944,7 +943,7 @@ export const workflowHelpers = mixins(externalHooks, nodeHelpers, restApi, showM
 		async dataHasChanged(id: string) {
 			const currentData = await this.getWorkflowDataToSave();
 
-			const data: IWorkflowDb = await this.restApi().getWorkflow(id);
+			const data: IWorkflowDb = await this.workflowsStore.fetchWorkflow(id);
 
 			if (data !== undefined) {
 				const x = {
diff --git a/packages/editor-ui/src/mixins/workflowRun.ts b/packages/editor-ui/src/mixins/workflowRun.ts
index 9b52780057..714d810ac8 100644
--- a/packages/editor-ui/src/mixins/workflowRun.ts
+++ b/packages/editor-ui/src/mixins/workflowRun.ts
@@ -9,7 +9,6 @@ import {
 } from 'n8n-workflow';
 
 import { externalHooks } from '@/mixins/externalHooks';
-import { restApi } from '@/mixins/restApi';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
 import { showMessage } from '@/mixins/showMessage';
 
@@ -20,7 +19,7 @@ import { useUIStore } from '@/stores/ui';
 import { useWorkflowsStore } from '@/stores/workflows';
 import { useRootStore } from '@/stores/n8nRootStore';
 
-export const workflowRun = mixins(externalHooks, restApi, workflowHelpers, showMessage).extend({
+export const workflowRun = mixins(externalHooks, workflowHelpers, showMessage).extend({
 	setup() {
 		return {
 			...useTitleChange(),
@@ -45,7 +44,7 @@ export const workflowRun = mixins(externalHooks, restApi, workflowHelpers, showM
 			let response: IExecutionPushResponse;
 
 			try {
-				response = await this.restApi().runWorkflow(runData);
+				response = await this.workflowsStore.runWorkflow(runData);
 			} catch (error) {
 				this.uiStore.removeActiveAction('workflowRunning');
 				throw error;
diff --git a/packages/editor-ui/src/stores/credentials.ts b/packages/editor-ui/src/stores/credentials.ts
index b3c071e2b8..0a622f8384 100644
--- a/packages/editor-ui/src/stores/credentials.ts
+++ b/packages/editor-ui/src/stores/credentials.ts
@@ -12,7 +12,7 @@ import {
 	updateCredential,
 } from '@/api/credentials';
 import { setCredentialSharedWith } from '@/api/credentials.ee';
-import { getAppNameFromCredType } from '@/utils';
+import { getAppNameFromCredType, makeRestApiRequest } from '@/utils';
 import { EnterpriseEditionFeature, STORES } from '@/constants';
 import {
 	ICredentialMap,
@@ -376,5 +376,15 @@ export const useCredentialsStore = defineStore(STORES.CREDENTIALS, {
 				),
 			);
 		},
+
+		async getCredentialTranslation(credentialType: string): Promise<object> {
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'GET',
+				'/credential-translation',
+				{ credentialType },
+			);
+		},
 	},
 });
diff --git a/packages/editor-ui/src/stores/settings.ts b/packages/editor-ui/src/stores/settings.ts
index 049ea61b59..a468d4b447 100644
--- a/packages/editor-ui/src/stores/settings.ts
+++ b/packages/editor-ui/src/stores/settings.ts
@@ -35,6 +35,7 @@ import { useRootStore } from './n8nRootStore';
 import { useUIStore } from './ui';
 import { useUsersStore } from './users';
 import { useVersionsStore } from './versions';
+import { makeRestApiRequest } from '@/utils';
 
 export const useSettingsStore = defineStore(STORES.SETTINGS, {
 	state: (): ISettingsState => ({
@@ -340,5 +341,9 @@ export const useSettingsStore = defineStore(STORES.SETTINGS, {
 		setSaveManualExecutions(saveManualExecutions: boolean) {
 			Vue.set(this, 'saveManualExecutions', saveManualExecutions);
 		},
+		async getTimezones(): Promise<IDataObject> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(rootStore.getRestApiContext, 'GET', '/options/timezones');
+		},
 	},
 });
diff --git a/packages/editor-ui/src/stores/workflows.ts b/packages/editor-ui/src/stores/workflows.ts
index 3d9600c0c8..bbfad903d9 100644
--- a/packages/editor-ui/src/stores/workflows.ts
+++ b/packages/editor-ui/src/stores/workflows.ts
@@ -10,16 +10,23 @@ import {
 } from '@/constants';
 import {
 	ExecutionsQueryFilter,
+	IActivationError,
+	IExecutionDeleteFilter,
+	IExecutionPushResponse,
 	IExecutionResponse,
 	IExecutionsCurrentSummaryExtended,
+	IExecutionsListResponse,
+	IExecutionsStopData,
 	INewWorkflowData,
 	INodeUi,
 	INodeUpdatePropertiesInformation,
 	IPushDataExecutionFinished,
 	IPushDataNodeExecuteAfter,
 	IPushDataUnsavedExecutionFinished,
+	IStartRunData,
 	IUpdateInformation,
 	IUsedCredential,
+	IWorkflowDataUpdate,
 	IWorkflowDb,
 	IWorkflowsMap,
 	WorkflowsState,
@@ -27,6 +34,7 @@ import {
 import { defineStore } from 'pinia';
 import {
 	deepCopy,
+	IAbstractEventMessage,
 	IConnection,
 	IConnections,
 	IDataObject,
@@ -69,6 +77,8 @@ import {
 	stringSizeInBytes,
 	isObjectLiteral,
 	isEmpty,
+	makeRestApiRequest,
+	unflattenExecutionData,
 } from '@/utils';
 import { useNDVStore } from './ndv';
 import { useNodeTypesStore } from './nodeTypes';
@@ -345,6 +355,19 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return this.getWorkflow(nodes, connections, copyData);
 		},
 
+		// Returns a workflow from a given URL
+		async getWorkflowFromUrl(url: string): Promise<IWorkflowDb> {
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(rootStore.getRestApiContext, 'GET', '/workflows/from-url', {
+				url,
+			});
+		},
+
+		async getActivationError(id: string): Promise<IActivationError | undefined> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(rootStore.getRestApiContext, 'GET', `/active/error/${id}`);
+		},
+
 		async fetchAllWorkflows(): Promise<IWorkflowDb[]> {
 			const rootStore = useRootStore();
 			const workflows = await getWorkflows(rootStore.getRestApiContext);
@@ -352,7 +375,7 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			return workflows;
 		},
 
-		async fetchWorkflow(id: string): Promise<IWorkflowDb> {
+		async fetchAndSetWorkflow(id: string): Promise<IWorkflowDb> {
 			const rootStore = useRootStore();
 			const workflow = await getWorkflow(rootStore.getRestApiContext, id);
 			this.addWorkflow(workflow);
@@ -1025,6 +1048,144 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 			Vue.set(this, 'activeExecutions', newActiveExecutions);
 		},
 
+		async retryExecution(id: string, loadWorkflow?: boolean): Promise<boolean> {
+			let sendData;
+			if (loadWorkflow === true) {
+				sendData = {
+					loadWorkflow: true,
+				};
+			}
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'POST',
+				`/executions/${id}/retry`,
+				sendData,
+			);
+		},
+
+		// Deletes executions
+		async deleteExecutions(sendData: IExecutionDeleteFilter): Promise<void> {
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'POST',
+				'/executions/delete',
+				sendData as unknown as IDataObject,
+			);
+		},
+
+		// TODO: For sure needs some kind of default filter like last day, with max 10 results, ...
+		async getPastExecutions(
+			filter: IDataObject,
+			limit: number,
+			lastId?: string,
+			firstId?: string,
+		): Promise<IExecutionsListResponse> {
+			let sendData = {};
+			if (filter) {
+				sendData = {
+					filter,
+					firstId,
+					lastId,
+					limit,
+				};
+			}
+			const rootStore = useRootStore();
+			return makeRestApiRequest(rootStore.getRestApiContext, 'GET', '/executions', sendData);
+		},
+
+		async getCurrentExecutions(filter: IDataObject): Promise<IExecutionsCurrentSummaryExtended[]> {
+			let sendData = {};
+			if (filter) {
+				sendData = {
+					filter,
+				};
+			}
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'GET',
+				'/executions-current',
+				sendData,
+			);
+		},
+
+		async getExecution(id: string): Promise<IExecutionResponse | undefined> {
+			const rootStore = useRootStore();
+			const response = await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'GET',
+				`/executions/${id}`,
+			);
+			return response && unflattenExecutionData(response);
+		},
+
+		async fetchWorkflow(id: string): Promise<IWorkflowDb> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(rootStore.getRestApiContext, 'GET', `/workflows/${id}`);
+		},
+
+		// Creates a new workflow
+		async createNewWorkflow(sendData: IWorkflowDataUpdate): Promise<IWorkflowDb> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'POST',
+				'/workflows',
+				sendData as unknown as IDataObject,
+			);
+		},
+
+		// Deletes a workflow
+		async deleteWorkflowAPI(name: string): Promise<void> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(rootStore.getRestApiContext, 'DELETE', `/workflows/${name}`);
+		},
+
+		// Updates an existing workflow
+		async updateWorkflow(
+			id: string,
+			data: IWorkflowDataUpdate,
+			forceSave = false,
+		): Promise<IWorkflowDb> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'PATCH',
+				`/workflows/${id}${forceSave ? '?forceSave=true' : ''}`,
+				data as unknown as IDataObject,
+			);
+		},
+
+		async runWorkflow(startRunData: IStartRunData): Promise<IExecutionPushResponse> {
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'POST',
+				'/workflows/run',
+				startRunData as unknown as IDataObject,
+			);
+		},
+
+		async removeTestWebhook(workflowId: string): Promise<boolean> {
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'DELETE',
+				`/test-webhook/${workflowId}`,
+			);
+		},
+
+		async stopCurrentExecution(executionId: string): Promise<IExecutionsStopData> {
+			const rootStore = useRootStore();
+			return await makeRestApiRequest(
+				rootStore.getRestApiContext,
+				'POST',
+				`/executions-current/${executionId}/stop`,
+			);
+		},
+
 		async loadCurrentWorkflowExecutions(
 			requestFilter: ExecutionsQueryFilter,
 		): Promise<IExecutionsSummary[]> {
@@ -1047,13 +1208,16 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				throw error;
 			}
 		},
+
 		async fetchExecutionDataById(executionId: string): Promise<IExecutionResponse | null> {
 			const rootStore = useRootStore();
 			return await getExecutionData(rootStore.getRestApiContext, executionId);
 		},
+
 		deleteExecution(execution: IExecutionsSummary): void {
 			this.currentWorkflowExecutions.splice(this.currentWorkflowExecutions.indexOf(execution), 1);
 		},
+
 		addToCurrentExecutions(executions: IExecutionsSummary[]): void {
 			executions.forEach((execution) => {
 				const exists = this.currentWorkflowExecutions.find((ex) => ex.id === execution.id);
@@ -1062,6 +1226,23 @@ export const useWorkflowsStore = defineStore(STORES.WORKFLOWS, {
 				}
 			});
 		},
+		// Returns all the available timezones
+		async getExecutionEvents(id: string): Promise<IAbstractEventMessage[]> {
+			const rootStore = useRootStore();
+			return makeRestApiRequest(rootStore.getRestApiContext, 'GET', '/eventbus/execution/' + id);
+		},
+		// Binary data
+		async getBinaryUrl(dataPath, mode, fileName, mimeType): string {
+			const rootStore = useRootStore();
+			let restUrl = rootStore.getRestUrl;
+			if (restUrl.startsWith('/')) restUrl = window.location.origin + restUrl;
+			const url = new URL(`${restUrl}/data/${dataPath}`);
+			url.searchParams.append('mode', mode);
+			if (fileName) url.searchParams.append('fileName', fileName);
+			if (mimeType) url.searchParams.append('mimeType', mimeType);
+			return url.toString();
+		},
+
 		setNodePristine(nodeName: string, isPristine: boolean): void {
 			Vue.set(this.nodeMetadata[nodeName], 'pristine', isPristine);
 		},
diff --git a/packages/editor-ui/src/utils/apiUtils.ts b/packages/editor-ui/src/utils/apiUtils.ts
index bd107ae78f..e6a8900920 100644
--- a/packages/editor-ui/src/utils/apiUtils.ts
+++ b/packages/editor-ui/src/utils/apiUtils.ts
@@ -1,6 +1,12 @@
 import axios, { AxiosRequestConfig, Method } from 'axios';
 import { IDataObject } from 'n8n-workflow';
-import type { IRestApiContext } from '@/Interface';
+import type {
+	IExecutionFlattedResponse,
+	IExecutionResponse,
+	IRestApiContext,
+	IWorkflowDb,
+} from '@/Interface';
+import { parse } from 'flatted';
 
 export const NO_NETWORK_ERROR_CODE = 999;
 
@@ -127,3 +133,27 @@ export async function post(
 ) {
 	return await request({ method: 'POST', baseURL, endpoint, headers, data: params });
 }
+
+/**
+ * Unflattens the Execution data.
+ *
+ * @param {IExecutionFlattedResponse} fullExecutionData The data to unflatten
+ */
+export function unflattenExecutionData(
+	fullExecutionData: IExecutionFlattedResponse,
+): IExecutionResponse {
+	// Unflatten the data
+	const returnData: IExecutionResponse = {
+		...fullExecutionData,
+		workflowData: fullExecutionData.workflowData as IWorkflowDb,
+		data: parse(fullExecutionData.data),
+	};
+
+	returnData.finished = returnData.finished ? returnData.finished : false;
+
+	if (fullExecutionData.id) {
+		returnData.id = fullExecutionData.id;
+	}
+
+	return returnData;
+}
diff --git a/packages/editor-ui/src/views/NodeView.vue b/packages/editor-ui/src/views/NodeView.vue
index 3f0d8db68f..d5eaae0ecd 100644
--- a/packages/editor-ui/src/views/NodeView.vue
+++ b/packages/editor-ui/src/views/NodeView.vue
@@ -205,7 +205,6 @@ import { copyPaste } from '@/mixins/copyPaste';
 import { externalHooks } from '@/mixins/externalHooks';
 import { genericHelpers } from '@/mixins/genericHelpers';
 import { moveNodeWorkflow } from '@/mixins/moveNodeWorkflow';
-import { restApi } from '@/mixins/restApi';
 import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
 import useCanvasMouseSelect from '@/composables/useCanvasMouseSelect';
 import { showMessage } from '@/mixins/showMessage';
@@ -322,7 +321,6 @@ export default mixins(
 	externalHooks,
 	genericHelpers,
 	moveNodeWorkflow,
-	restApi,
 	showMessage,
 	workflowHelpers,
 	workflowRun,
@@ -783,7 +781,7 @@ export default mixins(
 			this.resetWorkspace();
 			let data: IExecutionResponse | undefined;
 			try {
-				data = await this.restApi().getExecution(executionId);
+				data = await this.workflowsStore.getExecution(executionId);
 			} catch (error) {
 				this.$showError(error, this.$locale.baseText('nodeView.showError.openExecution.title'));
 				return;
@@ -1403,14 +1401,14 @@ export default mixins(
 
 			try {
 				this.stopExecutionInProgress = true;
-				await this.restApi().stopCurrentExecution(executionId);
+				await this.workflowsStore.stopCurrentExecution(executionId);
 				this.$showMessage({
 					title: this.$locale.baseText('nodeView.showMessage.stopExecutionTry.title'),
 					type: 'success',
 				});
 			} catch (error) {
 				// Execution stop might fail when the execution has already finished. Let's treat this here.
-				const execution = await this.restApi().getExecution(executionId);
+				const execution = await this.workflowsStore.getExecution(executionId);
 
 				if (execution === undefined) {
 					// execution finished but was not saved (e.g. due to low connectivity)
@@ -1476,7 +1474,7 @@ export default mixins(
 
 		async stopWaitingForWebhook() {
 			try {
-				await this.restApi().removeTestWebhook(this.workflowsStore.workflowId);
+				await this.workflowsStore.removeTestWebhook(this.workflowsStore.workflowId);
 			} catch (error) {
 				this.$showError(
 					error,
@@ -1549,7 +1547,7 @@ export default mixins(
 
 			this.startLoading();
 			try {
-				workflowData = await this.restApi().getWorkflowFromUrl(url);
+				workflowData = await this.workflowsStore.getWorkflowFromUrl(url);
 			} catch (error) {
 				this.stopLoading();
 				this.$showError(
@@ -2586,7 +2584,7 @@ export default mixins(
 				if (workflowId !== null) {
 					let workflow: IWorkflowDb | undefined = undefined;
 					try {
-						workflow = await this.restApi().getWorkflow(workflowId);
+						workflow = await this.workflowsStore.fetchWorkflow(workflowId);
 					} catch (error) {
 						this.$showError(error, this.$locale.baseText('openWorkflow.workflowNotFoundError'));
 
@@ -3586,8 +3584,7 @@ export default mixins(
 			return Promise.resolve();
 		},
 		async loadActiveWorkflows(): Promise<void> {
-			const activeWorkflows = await this.restApi().getActiveWorkflows();
-			this.workflowsStore.activeWorkflows = activeWorkflows;
+			await this.workflowsStore.fetchActiveWorkflows();
 		},
 		async loadNodeTypes(): Promise<void> {
 			await this.nodeTypesStore.getNodeTypes();
diff --git a/packages/editor-ui/src/views/SetupView.vue b/packages/editor-ui/src/views/SetupView.vue
index 87b46c2b94..15a290a905 100644
--- a/packages/editor-ui/src/views/SetupView.vue
+++ b/packages/editor-ui/src/views/SetupView.vue
@@ -14,16 +14,14 @@ import { showMessage } from '@/mixins/showMessage';
 
 import mixins from 'vue-typed-mixins';
 import { IFormBoxConfig } from '@/Interface';
-import { VIEWS, ASSUMPTION_EXPERIMENT } from '@/constants';
-import { restApi } from '@/mixins/restApi';
+import { VIEWS } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUIStore } from '@/stores/ui';
 import { useSettingsStore } from '@/stores/settings';
 import { useUsersStore } from '@/stores/users';
 import { useCredentialsStore } from '@/stores/credentials';
-import { usePostHog } from '@/stores/posthog';
 
-export default mixins(showMessage, restApi).extend({
+export default mixins(showMessage).extend({
 	name: 'SetupView',
 	components: {
 		AuthView,