From caa55a022b5789e56674808e89c54ba9bec0279b Mon Sep 17 00:00:00 2001
From: Ahsan Virani <ahsan.virani@gmail.com>
Date: Wed, 12 May 2021 05:12:53 +0200
Subject: [PATCH] :sparkles: Add more FE hooks (#1772)

* :sparkles: add FE hook for expressionEdit dialogVisibleChanged

* :zap: update FE hook for expressionEdit dialogVisibleChanged

* :sparkles: add FE hook for expressionEdit itemSelected

* :sparkles: add FE hook for nodeSettings valueChanged

* :sparkles: add FE hook for nodeSettings credentialSelected

* cleanup
---
 .../editor-ui/src/components/ExpressionEdit.vue | 17 +++++++++++++++--
 .../editor-ui/src/components/NodeSettings.vue   |  8 ++++++++
 2 files changed, 23 insertions(+), 2 deletions(-)

diff --git a/packages/editor-ui/src/components/ExpressionEdit.vue b/packages/editor-ui/src/components/ExpressionEdit.vue
index ada71f6869..c073ce7793 100644
--- a/packages/editor-ui/src/components/ExpressionEdit.vue
+++ b/packages/editor-ui/src/components/ExpressionEdit.vue
@@ -30,7 +30,7 @@
 						<div class="editor-description">
 							Result
 						</div>
-						<expression-input :parameter="parameter" resolvedValue="true" rows="8" :value="value" :path="path"></expression-input>
+						<expression-input :parameter="parameter" resolvedValue="true" ref="expressionResult" rows="8" :value="value" :path="path"></expression-input>
 					</div>
 
 				</el-col>
@@ -52,7 +52,11 @@ import {
 	Workflow,
 } from 'n8n-workflow';
 
-export default Vue.extend({
+import { externalHooks } from '@/components/mixins/externalHooks';
+
+import mixins from 'vue-typed-mixins';
+
+export default mixins(externalHooks).extend({
 	name: 'ExpressionEdit',
 	props: [
 		'dialogVisible',
@@ -81,7 +85,16 @@ export default Vue.extend({
 		},
 
 		itemSelected (eventData: IVariableItemSelected) {
+			// User inserted item from Expression Editor variable selector
 			(this.$refs.inputFieldExpression as any).itemSelected(eventData); // tslint:disable-line:no-any
+
+			this.$externalHooks().run('expressionEdit.itemSelected', { parameter: this.parameter, value: this.value, selectedItem: eventData });
+		},
+	},
+	watch: {
+		dialogVisible (newValue) {
+			const resolvedExpressionValue = this.$refs.expressionResult && (this.$refs.expressionResult as any).getValue() || undefined;  // tslint:disable-line:no-any
+			this.$externalHooks().run('expressionEdit.dialogVisibleChanged', { dialogVisible: newValue, parameter: this.parameter, value: this.value, resolvedExpressionValue });
 		},
 	},
 });
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 07f8ac7b2d..7bdf7ea5dd 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -59,12 +59,14 @@ import NodeCredentials from '@/components/NodeCredentials.vue';
 import NodeWebhooks from '@/components/NodeWebhooks.vue';
 import { get, set, unset } from 'lodash';
 
+import { externalHooks } from '@/components/mixins/externalHooks';
 import { genericHelpers } from '@/components/mixins/genericHelpers';
 import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
 
 export default mixins(
+	externalHooks,
 	genericHelpers,
 	nodeHelpers,
 )
@@ -323,6 +325,8 @@ export default mixins(
 
 				// Update the issues
 				this.updateNodeCredentialIssues(node);
+
+				this.$externalHooks().run('nodeSettings.credentialSelected', { updateInformation });
 			},
 			valueChanged (parameterData: IUpdateInformation) {
 				let newValue: NodeParameterValue;
@@ -357,6 +361,7 @@ export default mixins(
 
 					// Get only the parameters which are different to the defaults
 					let nodeParameters = NodeHelpers.getNodeParameters(nodeType.properties, node.parameters, false, false);
+					const oldNodeParameters = Object.assign({}, nodeParameters);
 
 					// Copy the data because it is the data of vuex so make sure that
 					// we do not edit it directly
@@ -404,7 +409,10 @@ export default mixins(
 						name: node.name,
 						value: nodeParameters,
 					};
+					
 					this.$store.commit('setNodeParameters', updateInformation);
+					
+					this.$externalHooks().run('nodeSettings.valueChanged', { parameterPath, newValue, parameters: this.parameters, oldNodeParameters });
 
 					this.updateNodeParameterIssues(node, nodeType);
 					this.updateNodeCredentialIssues(node);