feat(editor): Add HTTP request nodes for credentials without a node (#7157)

Github issue / Community forum post (link here to close automatically):

---------

Co-authored-by: Giulio Andreini <g.andreini@gmail.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>

packages/editor-ui/src/components/Node/NodeCreator/ItemTypes/NodeItem.vue

@@ -5,7 +5,7 @@
 		@dragstart="onDragStart"
 		@dragend="onDragEnd"
 		:class="$style.nodeItem"
-		:description="subcategory !== DEFAULT_SUBCATEGORY ? description : ''"
+		:description="description"
 		:title="displayName"
 		:show-action-arrow="showActionArrow"
 		:is-trigger="isTrigger"
@@ -44,6 +44,7 @@ import { computed, ref } from 'vue';
 import type { SimplifiedNodeType } from '@/Interface';
 import {
 	COMMUNITY_NODES_INSTALLATION_DOCS_URL,
+	CREDENTIAL_ONLY_NODE_PREFIX,
 	DEFAULT_SUBCATEGORY,
 	DRAG_EVENT_DATA_KEY,
 } from '@/constants';
@@ -78,6 +79,13 @@ const draggablePosition = ref({ x: -100, y: -100 });
 const draggableDataTransfer = ref(null as Element | null);
 
 const description = computed<string>(() => {
+	if (
+		props.subcategory === DEFAULT_SUBCATEGORY &&
+		!props.nodeType.name.startsWith(CREDENTIAL_ONLY_NODE_PREFIX)
+	) {
+		return '';
+	}
+
 	return i18n.headerText({
 		key: `headers.${shortNodeType.value}.description`,
 		fallback: props.nodeType.description,

packages/editor-ui/src/components/Node/NodeCreator/NodeCreator.vue

@@ -30,7 +30,7 @@ import { useViewStacks } from './composables/useViewStacks';
 import { useKeyboardNavigation } from './composables/useKeyboardNavigation';
 import { useActionsGenerator } from './composables/useActionsGeneration';
 import NodesListPanel from './Panel/NodesListPanel.vue';
-import { useUIStore } from '@/stores';
+import { useCredentialsStore, useUIStore } from '@/stores';
 import { DRAG_EVENT_DATA_KEY } from '@/constants';
 
 export interface Props {
@@ -135,9 +135,12 @@ registerKeyHook('NodeCreatorCloseTab', {
 });
 
 watch(
-	() => useNodeTypesStore().visibleNodeTypes,
-	(nodeTypes) => {
-		const { actions, mergedNodes } = generateMergedNodesAndActions(nodeTypes);
+	() => ({
+		httpOnlyCredentials: useCredentialsStore().httpOnlyCredentialTypes,
+		nodeTypes: useNodeTypesStore().visibleNodeTypes,
+	}),
+	({ nodeTypes, httpOnlyCredentials }) => {
+		const { actions, mergedNodes } = generateMergedNodesAndActions(nodeTypes, httpOnlyCredentials);
 
 		setActions(actions);
 		setMergeNodes(mergedNodes);

packages/editor-ui/src/components/Node/NodeCreator/Panel/NodesListPanel.vue

@@ -235,6 +235,7 @@ function onBackButton() {
 	background: var(--color-background-xlight);
 	height: 100%;
 	background-color: $node-creator-background-color;
+	--color-background-node-icon-badge: var(--color-background-xlight);
 	width: 385px;
 	display: flex;
 	flex-direction: column;

packages/editor-ui/src/components/Node/NodeCreator/composables/useActionsGeneration.ts

@@ -1,15 +1,18 @@
+import type { ActionTypeDescription, ActionsRecord, SimplifiedNodeType } from '@/Interface';
+import { CUSTOM_API_CALL_KEY, HTTP_REQUEST_NODE_TYPE } from '@/constants';
 import { memoize, startCase } from 'lodash-es';
 import type {
+	ICredentialType,
+	INodeProperties,
 	INodePropertyCollection,
 	INodePropertyOptions,
-	INodeProperties,
 	INodeTypeDescription,
 } from 'n8n-workflow';
-import { CUSTOM_API_CALL_KEY } from '@/constants';
-import type { ActionTypeDescription, SimplifiedNodeType, ActionsRecord } from '@/Interface';
 
 import { i18n } from '@/plugins/i18n';
 
+import { getCredentialOnlyNodeType } from '@/utils/credentialOnlyNodes';
+
 const PLACEHOLDER_RECOMMENDED_ACTION_KEY = 'placeholder_recommended';
 
 function translate(...args: Parameters<typeof i18n.baseText>) {
@@ -241,7 +244,18 @@ export function useActionsGenerator() {
 	}
 
 	function getSimplifiedNodeType(node: INodeTypeDescription): SimplifiedNodeType {
-		const { displayName, defaults, description, name, group, icon, iconUrl, outputs, codex } = node;
+		const {
+			displayName,
+			defaults,
+			description,
+			name,
+			group,
+			icon,
+			iconUrl,
+			badgeIconUrl,
+			outputs,
+			codex,
+		} = node;
 
 		return {
 			displayName,
@@ -251,12 +265,16 @@ export function useActionsGenerator() {
 			group,
 			icon,
 			iconUrl,
+			badgeIconUrl,
 			outputs,
 			codex,
 		};
 	}
 
-	function generateMergedNodesAndActions(nodeTypes: INodeTypeDescription[]) {
+	function generateMergedNodesAndActions(
+		nodeTypes: INodeTypeDescription[],
+		httpOnlyCredentials: ICredentialType[],
+	) {
 		const visibleNodeTypes = [...nodeTypes];
 		const actions: ActionsRecord<typeof mergedNodes> = {};
 		const mergedNodes: SimplifiedNodeType[] = [];
@@ -267,6 +285,13 @@ export function useActionsGenerator() {
 				const appActions = generateNodeActions(app);
 				actions[app.name] = appActions;
 
+				if (app.name === HTTP_REQUEST_NODE_TYPE) {
+					const credentialOnlyNodes = httpOnlyCredentials.map((credentialType) =>
+						getSimplifiedNodeType(getCredentialOnlyNodeType(app, credentialType)),
+					);
+					mergedNodes.push(...credentialOnlyNodes);
+				}
+
 				mergedNodes.push(getSimplifiedNodeType(app));
 			});