feat: Add message for readonly nodes. Improve foreign credentials handling (#4759)

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

* Copy fix

Co-authored-by: João Ramos <hello@joao.pt>

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() {

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"

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,

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",