⚡ Implement discoverability flow

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

@@ -31,6 +31,21 @@
 					{{ $locale.baseText('nodeSettings.thisNodeDoesNotHaveAnyParameters') }}
 					</n8n-text>
 				</div>
+
+				<div v-if="customActionSelected" class="parameter-item parameter-notice">
+					<n8n-notice
+						:content="$locale.baseText(
+							'nodeSettings.youCanUseTheHttpRequestNode',
+							{
+								interpolate: {
+									nodeTypeDisplayName: nodeType.displayName
+								},
+							},
+						)"
+						:truncate="false"
+					/>
+				</div>
+
 			</div>
 			<div v-show="openPanel === 'settings'">
 				<parameter-input-list :parameters="nodeSettings" :hideDelete="true" :nodeValues="nodeValues" path="" @valueChanged="valueChanged" />
@@ -87,6 +102,18 @@ export default mixins(
 			NodeExecuteButton,
 		},
 		computed: {
+			customActionSelected (): boolean {
+				return (
+					this.nodeValues.parameters !== undefined &&
+					typeof this.nodeValues.parameters === 'object' &&
+					this.nodeValues.parameters !== null &&
+					!Array.isArray(this.nodeValues.parameters) &&
+					(
+						this.nodeValues.parameters.resource === 'customAction' ||
+						this.nodeValues.parameters.operation === 'customAction'
+					)
+				);
+			},
 			nodeType (): INodeTypeDescription | null {
 				if (this.node) {
 					return this.$store.getters.nodeType(this.node.type, this.node.typeVersion);

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

@@ -132,6 +132,18 @@
 					<div v-if="option.description" class="option-description" v-html="getOptionsOptionDescription(option)"></div>
 				</div>
 			</n8n-option>
+			<n8n-option
+				v-if="isSupportedByHttpRequestNode && ['resource', 'operation'].includes(parameter.name)"
+				:key="'customAction'"
+				:value="'customAction'"
+				:label="'Custom Action'"
+			>
+				<div class="list-option">
+					<div class="option-headline">
+						{{ $locale.baseText('parameterInput.customAction') }}
+					</div>
+				</div>
+			</n8n-option>
 		</n8n-select>
 
 		<n8n-select
@@ -219,6 +231,7 @@ import { showMessage } from '@/components/mixins/showMessage';
 import { workflowHelpers } from '@/components/mixins/workflowHelpers';
 
 import mixins from 'vue-typed-mixins';
+import { mapGetters } from "vuex";
 
 export default mixins(
 	externalHooks,
@@ -303,6 +316,7 @@ export default mixins(
 			},
 		},
 		computed: {
+			...mapGetters('credentials', ['allCredentialsByType', 'getCredentialTypeByName']),
 			areExpressionsDisabled(): boolean {
 				return this.$store.getters['ui/areExpressionsDisabled'];
 			},
@@ -486,6 +500,7 @@ export default mixins(
 					}
 
 					for (const checkValue of checkValues) {
+						if (checkValue === 'customAction') continue;
 						if (checkValue === null || !validOptions.includes(checkValue)) {
 							if (issues.parameters === undefined) {
 								issues.parameters = {};
@@ -581,6 +596,25 @@ export default mixins(
 			workflow (): Workflow {
 				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.credentials) return false;
+
+				// @TODO Detect currently selected cred
+				const selectedCredentialTypeName = Object.keys(this.node.credentials);
+				if (!selectedCredentialTypeName.length) return false;
+				const name = selectedCredentialTypeName.pop()!;
+
+				const credentialType = this.getCredentialTypeByName(name);
+
+				return (
+					credentialType.name.slice(0, -4).endsWith('OAuth') ||
+					credentialType.authenticate !== undefined
+				);
+			},
 		},
 		methods: {
 			getPlaceholder(): string {

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.youCanUseTheHttpRequestNode": "You can use the <b>HTTP Request</b> node to make a custom API call with your {nodeTypeDisplayName} credential. <a href=PENDING_WAITING_ON_DEB>Learn more</a>",
 	"nodeView.addNode": "Add node",
 	"nodeView.addSticky": "Click to add sticky note",
 	"nodeView.confirmMessage.beforeRouteLeave.cancelButtonText": "Leave without saving",
@@ -483,6 +484,7 @@
 	"openWorkflow.workflowImportError": "Could not import workflow",
 	"openWorkflow.workflowNotFoundError": "Could not find workflow",
 	"parameterInput.addExpression": "Add Expression",
+	"parameterInput.customAction": "Custom Action",
 	"parameterInput.error": "ERROR",
 	"parameterInput.issues": "Issues",
 	"parameterInput.loadingOptions": "Loading options...",