refactor(editor): Turn showMessage mixin to composable (#6081) (#6244)

* refactor(editor): Turn showMessage mixin to composable (#6081) * refactor(editor): move $getExecutionError from showMessages mixin to pushConnection (it is used there only) * refactor(editor): resolve showMessage mixin methods * fix(editor): use composable instead of mixin * fix(editor): resolve conflicts * fix(editor): replace clearAllStickyNotifications * fix(editor): replace confirmMessage * fix(editor): replace confirmMessage * fix(editor): replace confirmMessage * fix(editor): remove last confirmMessage usage * fix(editor): remove $prompt usage * fix(editor): remove $show methods * fix(editor): lint fix * fix(editor): lint fix * fix(editor): fixes after review * fix(editor): Fix external hook call in App * fix(editor): mixins & composables * fix: add pushConnection setup composables to components as well * fix(editor): mixins & composables * fix(editor): mixins & composables * fix: add void on non-await async calls * fix: fix close without connecting confirmation * fix: remove .only --------- Co-authored-by: Alex Grozav <alex@grozav.com>
2025-12-18 10:31:15 +00:00 · 2023-05-15 18:41:13 +02:00
parent f1598d6fdc
commit 51fb913d37
80 changed files with 1126 additions and 978 deletions
--- a/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
+++ b/packages/editor-ui/src/components/CredentialEdit/CredentialEdit.vue
@@ -127,21 +127,21 @@ import type {
 	ITelemetryTrackProperties,
 } from 'n8n-workflow';
 import { NodeHelpers } from 'n8n-workflow';
-import CredentialIcon from '../CredentialIcon.vue';
+import CredentialIcon from '@/components/CredentialIcon.vue';

 import mixins from 'vue-typed-mixins';
 import { nodeHelpers } from '@/mixins/nodeHelpers';
-import { showMessage } from '@/mixins/showMessage';
+import { useToast, useMessage } from '@/composables';

-import CredentialConfig from './CredentialConfig.vue';
-import CredentialInfo from './CredentialInfo.vue';
-import CredentialSharing from './CredentialSharing.ee.vue';
-import SaveButton from '../SaveButton.vue';
-import Modal from '../Modal.vue';
-import InlineNameEdit from '../InlineNameEdit.vue';
-import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature } from '@/constants';
+import CredentialConfig from '@/components/CredentialEdit/CredentialConfig.vue';
+import CredentialInfo from '@/components/CredentialEdit/CredentialInfo.vue';
+import CredentialSharing from '@/components/CredentialEdit/CredentialSharing.ee.vue';
+import SaveButton from '@/components/SaveButton.vue';
+import Modal from '@/components/Modal.vue';
+import InlineNameEdit from '@/components/InlineNameEdit.vue';
+import { CREDENTIAL_EDIT_MODAL_KEY, EnterpriseEditionFeature, MODAL_CONFIRM } from '@/constants';
 import type { IDataObject } from 'n8n-workflow';
-import FeatureComingSoon from '../FeatureComingSoon.vue';
+import FeatureComingSoon from '@/components/FeatureComingSoon.vue';
 import type { IPermissions } from '@/permissions';
 import { getCredentialPermissions } from '@/permissions';
 import type { IMenuItem } from 'n8n-design-system';
@@ -160,12 +160,13 @@ import {
 	updateNodeAuthType,
 	isCredentialModalState,
 } from '@/utils';
+import { externalHooks } from '@/mixins/externalHooks';

 interface NodeAccessMap {
 	[nodeType: string]: ICredentialNodeAccess | null;
 }

-export default mixins(showMessage, nodeHelpers).extend({
+export default mixins(nodeHelpers, externalHooks).extend({
 	name: 'CredentialEdit',
 	components: {
 		CredentialSharing,
@@ -190,6 +191,12 @@ export default mixins(showMessage, nodeHelpers).extend({
 			type: String,
 		},
 	},
+	setup() {
+		return {
+			...useToast(),
+			...useMessage(),
+		};
+	},
 	data() {
 		return {
 			activeTab: 'connection',
@@ -486,7 +493,7 @@ export default mixins(showMessage, nodeHelpers).extend({

 			if (this.hasUnsavedChanges) {
 				const displayName = this.credentialType ? this.credentialType.displayName : '';
-				keepEditing = await this.confirmMessage(
+				const confirmAction = await this.confirm(
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.message',
 						{ interpolate: { credentialDisplayName: displayName } },
@@ -494,30 +501,34 @@ export default mixins(showMessage, nodeHelpers).extend({
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.headline',
 					),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
-					),
+					{
+						cancelButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose1.cancelButtonText',
+						),
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose1.confirmButtonText',
+						),
+					},
 				);
+				keepEditing = confirmAction === MODAL_CONFIRM;
 			} else if (this.credentialPermissions.isOwner && this.isOAuthType && !this.isOAuthConnected) {
-				keepEditing = await this.confirmMessage(
+				const confirmAction = await this.confirm(
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.message',
 					),
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.headline',
 					),
-					null,
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
-					),
-					this.$locale.baseText(
-						'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
-					),
+					{
+						cancelButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose2.cancelButtonText',
+						),
+						confirmButtonText: this.$locale.baseText(
+							'credentialEdit.credentialEdit.confirmMessage.beforeClose2.confirmButtonText',
+						),
+					},
 				);
+				keepEditing = confirmAction !== MODAL_CONFIRM;
 			}

 			if (!keepEditing) {
@@ -596,7 +607,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					this.nodeAccess[access.nodeType] = access;
 				});
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.loadCredential.title'),
 				);
@@ -840,7 +851,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				credential = await this.credentialsStore.createNewCredential(credentialDetails);
 				this.hasUnsavedChanges = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.createCredential.title'),
 				);
@@ -874,7 +885,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				});
 				this.hasUnsavedChanges = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.updateCredential.title'),
 				);
@@ -902,7 +913,7 @@ export default mixins(showMessage, nodeHelpers).extend({

 			const savedCredentialName = this.currentCredential.name;

-			const deleteConfirmed = await this.confirmMessage(
+			const deleteConfirmed = await this.confirm(
 				this.$locale.baseText(
 					'credentialEdit.credentialEdit.confirmMessage.deleteCredential.message',
 					{ interpolate: { savedCredentialName } },
@@ -910,13 +921,14 @@ export default mixins(showMessage, nodeHelpers).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 === false) {
+			if (deleteConfirmed !== MODAL_CONFIRM) {
 				return;
 			}

@@ -925,7 +937,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 				await this.credentialsStore.deleteCredential({ id: this.credentialId });
 				this.hasUnsavedChanges = false;
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText('credentialEdit.credentialEdit.showError.deleteCredential.title'),
 				);
@@ -939,7 +951,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 			this.updateNodesCredentialsIssues();
 			this.credentialData = {};

-			this.$showMessage({
+			this.showMessage({
 				title: this.$locale.baseText('credentialEdit.credentialEdit.showMessage.title'),
 				type: 'success',
 			});
@@ -968,7 +980,7 @@ export default mixins(showMessage, nodeHelpers).extend({
 					}
 				}
 			} catch (error) {
-				this.$showError(
+				this.showError(
 					error,
 					this.$locale.baseText(
 						'credentialEdit.credentialEdit.showError.generateAuthorizationUrl.title',