⚡ Prop drilling to re-render select

packages/editor-ui/src/components/NodeCredentials.vue

@@ -115,10 +115,16 @@ export default mixins(
 				.map((credentialTypeDescription) => credentialTypeDescription.name);
 		},
 		credentialTypesNodeDescriptionDisplayed (): INodeCredentialDescription[] {
-			return this.credentialTypesNodeDescription
+			const descriptions = this.credentialTypesNodeDescription
 				.filter((credentialTypeDescription) => {
 					return this.displayCredentials(credentialTypeDescription);
 				});
+
+			if (descriptions.length === 1) {
+				this.$emit('newActiveCredentialType', descriptions[0].name);
+			}
+
+			return descriptions;
 		},
 		credentialTypesNodeDescription (): INodeCredentialDescription[] {
 			const node = this.node as INodeUi;

packages/editor-ui/src/components/NodeSettings.vue

@@ -31,10 +31,12 @@
 					:parameters="parametersNoneSetting"
 					:hideDelete="true"
 					:nodeValues="nodeValues" path="parameters" @valueChanged="valueChanged"
+					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				>
 					<node-credentials
 						:node="node"
 						@credentialSelected="credentialSelected"
+						@newActiveCredentialType="checkIfSupportedByHttpRequestNode"
 					/>
 				</parameter-input-list>
 				<div v-if="parametersNoneSetting.length === 0" class="no-parameters">
@@ -209,6 +211,7 @@ export default mixins(
 					notes: '',
 					parameters: {},
 				} as INodeParameters,
+				isSupportedByHttpRequestNode: false,
 
 				nodeSettings: [
 					{
@@ -310,6 +313,17 @@ export default mixins(
 			},
 		},
 		methods: {
+			/**
+			 * Check if the node's currently active credential type may be used to make a request with the HTTP Request node v2.
+			 */
+			checkIfSupportedByHttpRequestNode(activeCredentialType: string) {
+				const credentialType = this.getCredentialTypeByName(activeCredentialType);
+
+				this.isSupportedByHttpRequestNode = (
+					credentialType.name.slice(0, -4).endsWith('OAuth') ||
+					credentialType.authenticate !== undefined
+				);
+			},
 			onNodeExecute () {
 				this.$emit('execute');
 			},

packages/editor-ui/src/components/ParameterInput.vue

@@ -258,6 +258,7 @@ export default mixins(
 			'hideIssues', // boolean
 			'errorHighlight',
 			'isForCredential', // boolean
+			'isSupportedByHttpRequestNode', // boolean
 		],
 		data () {
 			return {
@@ -597,19 +598,6 @@ export default mixins(
 				return this.getWorkflow();
 			},
 
-			/**
-			 * Whether the node's credential may be used to make a request with the HTTP Request node.
-			 */
-			isSupportedByHttpRequestNode(): boolean {
-				if (!this.node || !this.node.activeCredentialType || !this.node.credentials) return false;
-
-				const credentialType = this.getCredentialTypeByName(this.node.activeCredentialType);
-
-				return (
-					credentialType.name.slice(0, -4).endsWith('OAuth') ||
-					credentialType.authenticate !== undefined
-				);
-			},
 		},
 		methods: {
 			getPlaceholder(): string {

packages/editor-ui/src/components/ParameterInputFull.vue

@@ -12,6 +12,7 @@
 			:displayOptions="displayOptions"
 			:path="path"
 			:isReadOnly="isReadOnly"
+			:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 			@valueChanged="valueChanged"
 			@focus="focused = true"
 			@blur="focused = false"
@@ -48,6 +49,7 @@ export default Vue
 			'parameter',
 			'path',
 			'value',
+			'isSupportedByHttpRequestNode',
 		],
 		methods: {
 			getArgument (argumentName: string): string | number | boolean | undefined {

packages/editor-ui/src/components/ParameterInputList.vue

@@ -79,6 +79,7 @@
 					:path="getPath(parameter.name)"
 					:isReadOnly="isReadOnly"
 					@valueChanged="valueChanged"
+					:isSupportedByHttpRequestNode="isSupportedByHttpRequestNode"
 				/>
 			</div>
 		</div>
@@ -122,6 +123,7 @@ export default mixins(
 			'path', // string
 			'hideDelete', // boolean
 			'indent',
+			'isSupportedByHttpRequestNode', // boolean
 		],
 		computed: {
 			filteredParameters (): INodeProperties[] {