From 1efedfddf362cee355445eb1732480f69bba2c72 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Iv=C3=A1n=20Ovejero?= <ivov.src@gmail.com>
Date: Wed, 4 May 2022 14:59:45 +0200
Subject: [PATCH] :zap: Display scopes alert box

---
 .../src/components/NodeCredentials.vue        |  5 +++
 .../editor-ui/src/components/NodeSettings.vue | 43 ++++++++++++++++++-
 .../src/plugins/i18n/locales/en.json          |  1 +
 3 files changed, 48 insertions(+), 1 deletion(-)

diff --git a/packages/editor-ui/src/components/NodeCredentials.vue b/packages/editor-ui/src/components/NodeCredentials.vue
index f82d28e737..10a6e5d458 100644
--- a/packages/editor-ui/src/components/NodeCredentials.vue
+++ b/packages/editor-ui/src/components/NodeCredentials.vue
@@ -72,6 +72,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { mapGetters } from "vuex";
 
 import mixins from 'vue-typed-mixins';
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	genericHelpers,
@@ -106,6 +107,10 @@ export default mixins(
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;
 
+			if (this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2) {
+				this.$emit('newHttpRequestNodeCredentialType', this.node.parameters.nodeCredentialType);
+			}
+
 			const activeNodeType = this.$store.getters.nodeType(node.type, node.typeVersion) as INodeTypeDescription | null;
 			if (activeNodeType && activeNodeType.credentials) {
 				return activeNodeType.credentials;
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index 58a7708e58..229aa6fda4 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -23,7 +23,25 @@
 		</div>
 		<div class="node-parameters-wrapper" v-if="node && nodeValid">
 			<div v-show="openPanel === 'params'">
-				<node-credentials :node="node" @credentialSelected="credentialSelected"></node-credentials>
+				<n8n-notice
+					v-if="isHttpRequestNodeV2 && scopes.length > 0"
+					:truncate="true"
+					:content="$locale.baseText(
+						'nodeSettings.scopes',
+						{
+							adjustToNumber: scopes.length,
+							interpolate: {
+								activeCredential,
+								scopes: scopes.join(' '),
+							},
+						},
+					)"
+				/>
+				<node-credentials
+					:node="node"
+					@credentialSelected="credentialSelected"
+					@newHttpRequestNodeCredentialType="loadScopesNoticeData"
+				/>
 				<node-webhooks :node="node" :nodeType="nodeType" />
 				<parameter-input-list :parameters="parametersNoneSetting" :hideDelete="true" :nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged" />
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -69,6 +87,8 @@ import { nodeHelpers } from '@/components/mixins/nodeHelpers';
 
 import mixins from 'vue-typed-mixins';
 import NodeExecuteButton from './NodeExecuteButton.vue';
+import { mapGetters } from 'vuex';
+import { HTTP_REQUEST_NODE_TYPE } from '@/constants';
 
 export default mixins(
 	externalHooks,
@@ -87,6 +107,10 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
+			...mapGetters('credentials', [ 'getCredentialTypeByName' ]),
+			isHttpRequestNodeV2(): boolean {
+				return this.node.type === HTTP_REQUEST_NODE_TYPE && this.node.typeVersion === 2;
+			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);
@@ -169,6 +193,8 @@ export default mixins(
 					notes: '',
 					parameters: {},
 				} as INodeParameters,
+				activeCredential: '',
+				scopes: [] as string[],
 
 				nodeSettings: [
 					{
@@ -270,6 +296,21 @@ export default mixins(
 			},
 		},
 		methods: {
+			async loadScopesNoticeData(activeCredentialType: string) {
+				if (!this.isHttpRequestNodeV2) return;
+
+				if (
+					!activeCredentialType ||
+					!activeCredentialType.endsWith('OAuth2Api')
+				) {
+					this.scopes = [];
+					return;
+				}
+
+				this.activeCredential = this.getCredentialTypeByName(activeCredentialType).displayName;
+
+				this.scopes = await this.restApi().getScopes(activeCredentialType);
+			},
 			onNodeExecute () {
 				this.$emit('execute');
 			},
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 07d529d4c0..18ca996797 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -410,6 +410,7 @@
 	"nodeSettings.thisNodeDoesNotHaveAnyParameters": "This node does not have any parameters",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
+	"nodeSettings.scopes": "Your <b>{activeCredential}</b> credential has access to the following scope:<br>{scopes} | Your <b>{activeCredential}</b> credential has access to the following scopes:<br>{scopes}",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",