refactor(editor): Turn showMessage mixin to composable

packages/editor-ui/src/App.vue

@@ -27,29 +27,28 @@
 </template>
 
 <script lang="ts">
-import Modals from './components/Modals.vue';
-import LoadingView from './views/LoadingView.vue';
-import Telemetry from './components/Telemetry.vue';
-import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from './constants';
+import Modals from '@/components/Modals.vue';
+import LoadingView from '@/views/LoadingView.vue';
+import Telemetry from '@/components/Telemetry.vue';
+import { HIRING_BANNER, LOCAL_STORAGE_THEME, VIEWS } from '@/constants';
 
 import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
 import { userHelpers } from '@/mixins/userHelpers';
-import { loadLanguage } from './plugins/i18n';
-import useGlobalLinkActions from '@/composables/useGlobalLinkActions';
+import { loadLanguage } from '@/plugins/i18n';
+import { useGlobalLinkActions, useToast } from '@/composables';
 import { mapStores } from 'pinia';
-import { useUIStore } from './stores/ui.store';
-import { useSettingsStore } from './stores/settings.store';
-import { useUsersStore } from './stores/users.store';
-import { useRootStore } from './stores/n8nRoot.store';
-import { useTemplatesStore } from './stores/templates.store';
-import { useNodeTypesStore } from './stores/nodeTypes.store';
+import { useUIStore } from '@/stores/ui.store';
+import { useSettingsStore } from '@/stores/settings.store';
+import { useUsersStore } from '@/stores/users.store';
+import { useRootStore } from '@/stores/n8nRoot.store';
+import { useTemplatesStore } from '@/stores/templates.store';
+import { useNodeTypesStore } from '@/stores/nodeTypes.store';
 import { useHistoryHelper } from '@/composables/useHistoryHelper';
 import { newVersions } from '@/mixins/newVersions';
 import { useRoute } from 'vue-router/composables';
 import { useVersionControlStore } from '@/stores/versionControl.store';
 
-export default mixins(newVersions, showMessage, userHelpers).extend({
+export default mixins(newVersions, userHelpers).extend({
 	name: 'App',
 	components: {
 		LoadingView,
@@ -60,6 +59,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 		return {
 			...useGlobalLinkActions(),
 			...useHistoryHelper(useRoute()),
+			...useToast(),
 		};
 	},
 	computed: {
@@ -86,7 +86,7 @@ export default mixins(newVersions, showMessage, userHelpers).extend({
 			try {
 				await this.settingsStore.getSettings();
 			} catch (e) {
-				this.$showToast({
+				this.showToast({
 					title: this.$locale.baseText('startupError'),
 					message: this.$locale.baseText('startupError.message'),
 					type: 'error',

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

@@ -29,24 +29,29 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 
-import { showMessage } from '@/mixins/showMessage';
-import Modal from './Modal.vue';
+import { useToast } from '@/composables';
+import Modal from '@/components/Modal.vue';
 import type { IFormInputs } from '@/Interface';
-import { CHANGE_PASSWORD_MODAL_KEY } from '../constants';
+import { CHANGE_PASSWORD_MODAL_KEY } from '@/constants';
 import { mapStores } from 'pinia';
 import { useUsersStore } from '@/stores/users.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	components: { Modal },
 	name: 'ChangePasswordModal',
 	props: {
 		modalName: {
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			config: null as null | IFormInputs,
@@ -127,15 +132,15 @@ export default mixins(showMessage).extend({
 				this.loading = true;
 				await this.usersStore.updateCurrentUserPassword(values);
 
-				this.$showMessage({
+				this.showMessage({
 					type: 'success',
 					title: this.$locale.baseText('auth.changePassword.passwordUpdated'),
 					message: this.$locale.baseText('auth.changePassword.passwordUpdatedMessage'),
 				});
 
 				this.modalBus.emit('close');
 			} catch (error) {
-				this.$showError(error, this.$locale.baseText('auth.changePassword.error'));
+				this.showError(error, this.$locale.baseText('auth.changePassword.error'));
 			}
 			this.loading = false;
 		},

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

@@ -65,11 +65,10 @@
 import { useUIStore } from '@/stores/ui.store';
 import type { PublicInstalledPackage } from 'n8n-workflow';
 import { mapStores } from 'pinia';
-import mixins from 'vue-typed-mixins';
-import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '../constants';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import { NPM_PACKAGE_DOCS_BASE_URL, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CommunityPackageCard',
 	props: {
 		communityPackage: {

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

@@ -88,24 +88,29 @@
 </template>
 
 <script lang="ts">
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import {
 	COMMUNITY_PACKAGE_INSTALL_MODAL_KEY,
 	NPM_KEYWORD_SEARCH_URL,
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
 	COMMUNITY_NODES_RISKS_DOCS_URL,
-} from '../constants';
-import mixins from 'vue-typed-mixins';
-import { showMessage } from '@/mixins/showMessage';
+} from '@/constants';
+import { defineComponent } from 'vue';
+import { useToast } from '@/composables';
 import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CommunityPackageInstallModal',
 	components: {
 		Modal,
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -144,15 +149,15 @@ export default mixins(showMessage).extend({
 					await this.communityNodesStore.fetchInstalledPackages();
 					this.loading = false;
 					this.modalBus.emit('close');
-					this.$showMessage({
+					this.showMessage({
 						title: this.$locale.baseText('settings.communityNodes.messages.install.success'),
 						type: 'success',
 					});
 				} catch (error) {
 					if (error.httpStatusCode && error.httpStatusCode === 400) {
 						this.infoTextErrorMessage = error.message;
 					} else {
-						this.$showError(
+						this.showError(
 							error,
 							this.$locale.baseText('settings.communityNodes.messages.install.error'),
 						);

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

@@ -35,18 +35,15 @@
 </template>
 
 <script>
-import mixins from 'vue-typed-mixins';
-import Modal from './Modal.vue';
-import {
-	COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY,
-	COMMUNITY_PACKAGE_MANAGE_ACTIONS,
-} from '../constants';
-import { showMessage } from '@/mixins/showMessage';
+import { defineComponent } from 'vue';
+import Modal from '@/components/Modal.vue';
+import { COMMUNITY_PACKAGE_CONFIRM_MODAL_KEY, COMMUNITY_PACKAGE_MANAGE_ACTIONS } from '@/constants';
+import { useToast } from '@/composables';
 import { mapStores } from 'pinia';
 import { useCommunityNodesStore } from '@/stores/communityNodes.store';
 import { createEventBus } from '@/event-bus';
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	name: 'CommunityPackageManageConfirmModal',
 	components: {
 		Modal,
@@ -64,6 +61,11 @@ export default mixins(showMessage).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			loading: false,
@@ -140,12 +142,12 @@ export default mixins(showMessage).extend({
 				});
 				this.loading = true;
 				await this.communityNodesStore.uninstallPackage(this.activePackageName);
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.uninstall.success.title'),
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('settings.communityNodes.messages.uninstall.error'),
 				);
@@ -167,7 +169,7 @@ export default mixins(showMessage).extend({
 				this.loading = true;
 				const updatedVersion = this.activePackage.updateAvailable;
 				await this.communityNodesStore.updatePackage(this.activePackageName);
-				this.$showMessage({
+				this.showMessage({
 					title: this.$locale.baseText('settings.communityNodes.messages.update.success.title'),
 					message: this.$locale.baseText(
 						'settings.communityNodes.messages.update.success.message',
@@ -181,7 +183,7 @@ export default mixins(showMessage).extend({
 					type: 'success',
 				});
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('settings.communityNodes.messages.update.error.title'),
 				);

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

@@ -38,16 +38,22 @@ import mixins from 'vue-typed-mixins';
 import type { IN8nPromptResponse } from '@/Interface';
 import { VALID_EMAIL_REGEX } from '@/constants';
 import { workflowHelpers } from '@/mixins/workflowHelpers';
-import Modal from './Modal.vue';
+import Modal from '@/components/Modal.vue';
 import { mapStores } from 'pinia';
 import { useSettingsStore } from '@/stores/settings.store';
 import { useRootStore } from '@/stores/n8nRoot.store';
 import { createEventBus } from '@/event-bus';
+import { useToast } from '@/composables';
 
 export default mixins(workflowHelpers).extend({
 	components: { Modal },
 	name: 'ContactPromptModal',
 	props: ['modalName'],
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	data() {
 		return {
 			email: '',
@@ -94,7 +100,7 @@ export default mixins(workflowHelpers).extend({
 						instance_id: this.rootStore.instanceId,
 						email: this.email,
 					});
-					this.$showMessage({
+					this.showMessage({
 						title: 'Thanks!',
 						message: "It's people like you that help make n8n better",
 						type: 'success',

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

@@ -19,9 +19,9 @@
 <script lang="ts">
 import mixins from 'vue-typed-mixins';
 import { copyPaste } from '@/mixins/copyPaste';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast } from '@/composables';
 
-export default mixins(copyPaste, showMessage).extend({
+export default mixins(copyPaste).extend({
 	props: {
 		label: {
 			type: String,
@@ -56,12 +56,17 @@ export default mixins(copyPaste, showMessage).extend({
 			default: 'large',
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+		};
+	},
 	methods: {
 		copy(): void {
 			this.$emit('copy');
 			this.copyToClipboard(this.value);
 
-			this.$showMessage({
+			this.showMessage({
 				title: this.toastTitle,
 				message: this.toastMessage,
 				type: 'success',

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

@@ -31,11 +31,11 @@
 </template>
 
 <script lang="ts">
-import mixins from 'vue-typed-mixins';
+import { defineComponent } from 'vue';
 import type { ICredentialsResponse, IUser } from '@/Interface';
 import type { ICredentialType } from 'n8n-workflow';
-import { EnterpriseEditionFeature } from '@/constants';
-import { showMessage } from '@/mixins/showMessage';
+import { EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
+import { useMessage } from '@/composables';
 import CredentialIcon from '@/components/CredentialIcon.vue';
 import type { IPermissions } from '@/permissions';
 import { getCredentialPermissions } from '@/permissions';
@@ -50,12 +50,17 @@ export const CREDENTIAL_LIST_ITEM_ACTIONS = {
 	DELETE: 'delete',
 };
 
-export default mixins(showMessage).extend({
+export default defineComponent({
 	data() {
 		return {
 			EnterpriseEditionFeature,
 		};
 	},
+	setup() {
+		return {
+			...useMessage(),
+		};
+	},
 	components: {
 		CredentialIcon,
 	},
@@ -128,7 +133,7 @@ export default mixins(showMessage).extend({
 			if (action === CREDENTIAL_LIST_ITEM_ACTIONS.OPEN) {
 				this.onClick();
 			} else if (action === CREDENTIAL_LIST_ITEM_ACTIONS.DELETE) {
-				const deleteConfirmed = await this.confirmMessage(
+				const deleteConfirmed = await this.confirm(
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
 						{
@@ -138,13 +143,14 @@ export default mixins(showMessage).extend({
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.headline',
 					),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
-					),
+					{
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.deleteCredential.confirmButtonText',
+						),
+					},
 				);
 
-				if (deleteConfirmed) {
+				if (deleteConfirmed === MODAL_CONFIRM) {
 					this.credentialsStore.deleteCredential({ id: this.data.id });
 				}
 			}