From eb112ffd23cec04f290d515917c227b628db2834 Mon Sep 17 00:00:00 2001
From: Alex Grozav <alex@grozav.com>
Date: Tue, 6 Dec 2022 12:15:07 +0200
Subject: [PATCH] feat: Add message for readonly nodes. Improve foreign
 credentials handling (#4759)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: Add message for readonly nodes. Improve foreign credentials handling

* Copy fix

Co-authored-by: João Ramos <hello@joao.pt>
---
 .../components/N8nUserSelect/UserSelect.vue   |  2 +-
 .../src/components/NodeDetailsView.vue        |  5 +++--
 .../editor-ui/src/components/NodeSettings.vue | 19 +++++++++++++++++--
 .../src/plugins/i18n/locales/en.json          |  1 +
 4 files changed, 22 insertions(+), 5 deletions(-)

diff --git a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
index a2c208b93a..5be64e22fd 100644
--- a/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
+++ b/packages/design-system/src/components/N8nUserSelect/UserSelect.vue
@@ -72,7 +72,7 @@ export default mixins(Locale).extend({
 		},
 		size: {
 			type: String,
-			validator: (value: string): boolean => ['mini', 'small', 'large'].includes(value),
+			validator: (value: string): boolean => ['mini', 'small', 'medium', 'large'].includes(value),
 		},
 	},
 	data() {
diff --git a/packages/editor-ui/src/components/NodeDetailsView.vue b/packages/editor-ui/src/components/NodeDetailsView.vue
index 32489f21a4..d95610d730 100644
--- a/packages/editor-ui/src/components/NodeDetailsView.vue
+++ b/packages/editor-ui/src/components/NodeDetailsView.vue
@@ -93,9 +93,10 @@
 						:dragging="isDragging"
 						:sessionId="sessionId"
 						:nodeType="activeNodeType"
-						:isReadOnly="readOnly || hasForeignCredential"
+						:hasForeignCredential="hasForeignCredential"
+						:readOnly="readOnly"
 						:blockUI="blockUi && showTriggerPanel"
-						:executable="!readOnly || hasForeignCredential"
+						:executable="!readOnly"
 						@valueChanged="valueChanged"
 						@execute="onNodeExecute"
 						@stopExecution="onStopExecution"
diff --git a/packages/editor-ui/src/components/NodeSettings.vue b/packages/editor-ui/src/components/NodeSettings.vue
index c4c8168b06..d7187f907b 100644
--- a/packages/editor-ui/src/components/NodeSettings.vue
+++ b/packages/editor-ui/src/components/NodeSettings.vue
@@ -10,7 +10,7 @@
 					:isReadOnly="isReadOnly"
 					@input="nameChanged"
 				></NodeTitle>
-				<div v-if="executable">
+				<div v-if="isExecutable">
 					<NodeExecuteButton
 						v-if="!blockUI"
 						:nodeName="node.name"
@@ -71,6 +71,10 @@
 			data-test-id="node-parameters"
 			v-if="node && nodeValid"
 		>
+			<n8n-notice
+				v-if="hasForeignCredential"
+				:content="$locale.baseText('nodeSettings.hasForeignCredential')"
+			/>
 			<div v-show="openPanel === 'params'">
 				<node-webhooks :node="node" :nodeType="nodeType" />
 
@@ -183,6 +187,12 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		isCurlImportModalOpen(): boolean {
 			return this.uiStore.isModalOpen(IMPORT_CURL_MODAL_KEY);
 		},
+		isReadOnly(): boolean {
+			return this.readOnly || this.hasForeignCredential;
+		},
+		isExecutable(): boolean {
+			return this.executable || this.hasForeignCredential;
+		},
 		nodeTypeName(): string {
 			if (this.nodeType) {
 				const shortNodeType = this.$locale.shortNodeType(this.nodeType.name);
@@ -257,8 +267,13 @@ export default mixins(externalHooks, nodeHelpers).extend({
 		nodeType: {
 			type: Object as PropType<INodeTypeDescription>,
 		},
-		isReadOnly: {
+		readOnly: {
 			type: Boolean,
+			default: false,
+		},
+		hasForeignCredential: {
+			type: Boolean,
+			default: false,
 		},
 		blockUI: {
 			type: Boolean,
diff --git a/packages/editor-ui/src/plugins/i18n/locales/en.json b/packages/editor-ui/src/plugins/i18n/locales/en.json
index 6b997a6253..2f848b5ae8 100644
--- a/packages/editor-ui/src/plugins/i18n/locales/en.json
+++ b/packages/editor-ui/src/plugins/i18n/locales/en.json
@@ -763,6 +763,7 @@
 	"nodeSettings.useTheHttpRequestNode": "Use the <b>HTTP Request</b> node to make a custom API call. We'll take care of the {nodeTypeDisplayName} auth for you. <a target=\"_blank\" href=\"https://docs.n8n.io/integrations/custom-operations/\">Learn more</a>",
 	"nodeSettings.waitBetweenTries.description": "How long to wait between each attempt (in milliseconds)",
 	"nodeSettings.waitBetweenTries.displayName": "Wait Between Tries (ms)",
+	"nodeSettings.hasForeignCredential": "This node is working as expected, but you can't edit it since its credentials aren't shared with you. To edit this node, please ask the owner of the workflow to share the credentials with you. Alternatively, you can also duplicate this node in the workflow and add your own credentials.",
 	"nodeView.addNode": "Add node",
 	"nodeView.addATriggerNodeFirst": "Add a <a data-action='showNodeCreator'>Trigger Node</a> first",
 	"nodeView.addOrEnableTriggerNode": "<a data-action='showNodeCreator'>Add</a> or enable a Trigger node to execute the workflow",