feat(editor): Improve Data tables visibility (#22074)

packages/frontend/@n8n/design-system/src/components/N8nNodeCreatorNode/NodeCreatorNode.vue

@@ -42,7 +42,14 @@ const { t } = useI18n();
 		<div>
 			<div :class="$style.details">
 				<span :class="$style.name" data-test-id="node-creator-item-name" v-text="title" />
-				<ElTag v-if="tag" :class="$style.tag" size="small" round :type="tag.type ?? 'success'">
+				<ElTag
+					v-if="tag"
+					:class="$style.tag"
+					disable-transitions
+					size="small"
+					round
+					:type="tag.type ?? 'success'"
+				>
 					{{ tag.text }}
 				</ElTag>
 				<N8nIcon

packages/frontend/@n8n/i18n/src/locales/en.json

@@ -62,6 +62,7 @@
 	"generic.folder": "Folder",
 	"generic.keepBuilding": "Keep building",
 	"generic.learnMore": "Learn more",
+	"generic.recommended": "Recommended",
 	"generic.reset": "Reset",
 	"generic.resetAllFilters": "Reset all filters",
 	"generic.communityNode": "Community Node",
@@ -1486,7 +1487,6 @@
 	"nodeCreator.triggerHelperPanel.manualTriggerDescription": "Runs the flow on clicking a button in n8n. Good for getting started quickly",
 	"nodeCreator.triggerHelperPanel.manualChatTriggerDisplayName": "On chat message",
 	"nodeCreator.triggerHelperPanel.manualChatTriggerDescription": "Runs the flow when a user sends a chat message. For use with AI nodes",
-	"nodeCreator.triggerHelperPanel.manualTriggerTag": "Recommended",
 	"nodeCreator.triggerHelperPanel.chatTriggerDisplayName": "On chat message",
 	"nodeCreator.triggerHelperPanel.chatTriggerDescription": "Runs the flow when a user sends a chat message. For use with AI nodes",
 	"nodeCreator.triggerHelperPanel.whatHappensNext": "What happens next?",

packages/frontend/editor-ui/src/Interface.ts

@@ -444,7 +444,7 @@ export type SimplifiedNodeType = Pick<
 	| 'defaults'
 	| 'outputs'
 > & {
-	tag?: string;
+	tag?: NodeCreatorTag;
 };
 export interface SubcategoryItemProps {
 	description?: string;

packages/frontend/editor-ui/src/app/constants/nodeCreator.ts

@@ -1,4 +1,5 @@
 import type { NodeCreatorOpenSource } from '@/Interface';
+import { DATA_TABLE_NODE_TYPE, DATA_TABLE_TOOL_NODE_TYPE } from './nodeTypes';
 
 export const TEMPLATE_CATEGORY_AI = 'categories/ai';
 
@@ -57,3 +58,6 @@ export const AI_CODE_TOOL_LANGCHAIN_NODE_TYPE = '@n8n/n8n-nodes-langchain.toolCo
 export const AI_WORKFLOW_TOOL_LANGCHAIN_NODE_TYPE = '@n8n/n8n-nodes-langchain.toolWorkflow';
 export const REQUEST_NODE_FORM_URL = 'https://n8n-community.typeform.com/to/K1fBVTZ3';
 export const PRE_BUILT_AGENTS_COLLECTION = 'pre-built-agents-collection';
+
+export const RECOMMENDED_NODES: string[] = [DATA_TABLE_NODE_TYPE, DATA_TABLE_TOOL_NODE_TYPE];
+export const BETA_NODES: string[] = [];

packages/frontend/editor-ui/src/features/shared/nodeCreator/components/ItemTypes/NodeItem.vue

@@ -130,7 +130,7 @@ const author = computed(() => {
 
 const tag = computed(() => {
 	if (props.nodeType.tag) {
-		return { text: props.nodeType.tag };
+		return props.nodeType.tag;
 	}
 	if (description.value.toLowerCase().includes('deprecated')) {
 		return { text: i18n.baseText('nodeCreator.nodeItem.deprecated'), type: 'info' };

packages/frontend/editor-ui/src/features/shared/nodeCreator/composables/useViewStacks.ts

@@ -25,7 +25,7 @@ import difference from 'lodash/difference';
 import { useNodeCreatorStore } from '@/features/shared/nodeCreator/nodeCreator.store';
 
 import {
-	extendItemsWithUUID,
+	finalizeItems,
 	flattenCreateElements,
 	groupItemsInSections,
 	isAINode,
@@ -109,7 +109,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 		const stack = getLastActiveStack();
 
 		if (!stack?.baselineItems) {
-			return stack.items ? extendItemsWithUUID(stack.items) : [];
+			return stack.items ? finalizeItems(stack.items) : [];
 		}
 
 		if (stack.search && searchBaseItems.value) {
@@ -130,7 +130,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 				searchBase = filterOutAiNodes(searchBase);
 			}
 
-			const searchResults = extendItemsWithUUID(
+			const searchResults = finalizeItems(
 				searchNodes(stack.search || '', searchBase, {
 					popularity: nodePopularityMap,
 				}),
@@ -143,7 +143,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 
 			return groupedNodes;
 		}
-		return extendItemsWithUUID(groupIfAiNodes(stack.baselineItems, stack.title, true));
+		return finalizeItems(groupIfAiNodes(stack.baselineItems, stack.title, true));
 	});
 
 	const activeViewStack = computed<ViewStack>(() => {
@@ -193,7 +193,7 @@ export const useViewStacks = defineStore('nodeCreatorViewStacks', () => {
 		// Apply filtering for AI nodes if the current view is not the AI root view
 		const filteredNodes = isAiRootView(stack) ? allNodes : filterOutAiNodes(allNodes);
 
-		let globalSearchResult: INodeCreateElement[] = extendItemsWithUUID(
+		let globalSearchResult: INodeCreateElement[] = finalizeItems(
 			searchNodes(stack.search || '', filteredNodes, {
 				popularity: nodePopularityMap,
 			}),

packages/frontend/editor-ui/src/features/shared/nodeCreator/nodeCreator.utils.ts

@@ -25,6 +25,8 @@ import {
 	HUMAN_IN_THE_LOOP_CATEGORY,
 	MICROSOFT_TEAMS_NODE_TYPE,
 	PRE_BUILT_AGENTS_COLLECTION,
+	RECOMMENDED_NODES,
+	BETA_NODES,
 } from '@/app/constants';
 import { v4 as uuidv4 } from 'uuid';
 
@@ -252,11 +254,31 @@ export const removePreviewToken = (key: string) =>
 
 export const isNodePreviewKey = (key = '') => key.includes(COMMUNITY_NODE_TYPE_PREVIEW_TOKEN);
 
-export function extendItemsWithUUID(items: INodeCreateElement[]) {
-	return items.map((item) => ({
-		...item,
-		uuid: `${item.key}-${uuidv4()}`,
-	}));
+function applyNodeTags(element: INodeCreateElement): INodeCreateElement {
+	if (element.type !== 'node' || element.properties.tag) return element;
+
+	if (RECOMMENDED_NODES.includes(element.properties.name)) {
+		element.properties.tag = {
+			type: 'info',
+			text: i18n.baseText('generic.recommended'),
+		};
+	} else if (BETA_NODES.includes(element.properties.name)) {
+		element.properties.tag = {
+			type: 'info',
+			text: i18n.baseText('generic.betaProper'),
+		};
+	}
+
+	return element;
+}
+
+export function finalizeItems(items: INodeCreateElement[]): INodeCreateElement[] {
+	return items
+		.map((item) => ({
+			...item,
+			uuid: `${item.key}-${uuidv4()}`,
+		}))
+		.map(applyNodeTags);
 }
 
 export const filterAndSearchNodes = (
@@ -268,9 +290,7 @@ export const filterAndSearchNodes = (
 
 	const vettedNodes = mergedNodes.map((item) => transformNodeType(item)) as NodeCreateElement[];
 
-	const searchResult: INodeCreateElement[] = extendItemsWithUUID(
-		searchNodes(search || '', vettedNodes),
-	);
+	const searchResult: INodeCreateElement[] = finalizeItems(searchNodes(search || '', vettedNodes));
 
 	return searchResult;
 };
@@ -336,7 +356,7 @@ export function getRagStarterCallout(): OpenTemplateElement {
 			description: i18n.baseText('nodeCreator.ragStarterTemplate.openTemplateItem.description'),
 			tag: {
 				type: 'info',
-				text: i18n.baseText('nodeCreator.triggerHelperPanel.manualTriggerTag'),
+				text: i18n.baseText('generic.recommended'),
 			},
 		},
 	};
@@ -355,7 +375,7 @@ export function getPreBuiltAgentsCallout(): ViewCreateElement {
 			borderless: true,
 			tag: {
 				type: 'info',
-				text: i18n.baseText('nodeCreator.triggerHelperPanel.manualTriggerTag'),
+				text: i18n.baseText('generic.recommended'),
 			},
 		},
 	};
@@ -375,7 +395,7 @@ export function getPreBuiltAgentsCalloutWithDivider(): LinkCreateElement {
 			description: i18n.baseText('nodeCreator.preBuiltAgents.description'),
 			tag: {
 				type: 'info',
-				text: i18n.baseText('nodeCreator.triggerHelperPanel.manualTriggerTag'),
+				text: i18n.baseText('generic.recommended'),
 			},
 		},
 	};
@@ -394,7 +414,7 @@ export function getAiTemplatesCallout(aiTemplatesURL: string): LinkCreateElement
 			url: aiTemplatesURL,
 			tag: {
 				type: 'info',
-				text: i18n.baseText('nodeCreator.triggerHelperPanel.manualTriggerTag'),
+				text: i18n.baseText('generic.recommended'),
 			},
 		},
 	};

packages/frontend/editor-ui/src/features/shared/nodeCreator/views/viewsData.ts

@@ -58,6 +58,7 @@ import {
 	AI_WORKFLOW_TOOL_LANGCHAIN_NODE_TYPE,
 	HUMAN_IN_THE_LOOP_CATEGORY,
 	TEMPLATE_CATEGORY_AI,
+	DATA_TABLE_NODE_TYPE,
 } from '@/app/constants';
 import { useI18n } from '@n8n/i18n';
 import { useNodeTypesStore } from '@/app/stores/nodeTypes.store';
@@ -495,6 +496,7 @@ export function RegularView(nodes: SimplifiedNodeType[]) {
 	const popularItemsSubcategory = [
 		SET_NODE_TYPE,
 		CODE_NODE_TYPE,
+		DATA_TABLE_NODE_TYPE,
 		DATETIME_NODE_TYPE,
 		AI_TRANSFORM_NODE_TYPE,
 	];
@@ -590,7 +592,12 @@ export function RegularView(nodes: SimplifiedNodeType[]) {
 						{
 							key: 'popular',
 							title: i18n.baseText('nodeCreator.sectionNames.popular'),
-							items: [HTTP_REQUEST_NODE_TYPE, WEBHOOK_NODE_TYPE, CODE_NODE_TYPE],
+							items: [
+								HTTP_REQUEST_NODE_TYPE,
+								WEBHOOK_NODE_TYPE,
+								CODE_NODE_TYPE,
+								DATA_TABLE_NODE_TYPE,
+							],
 						},
 					],
 				},

packages/nodes-base/nodes/DataTable/DataTable.node.json

@@ -11,7 +11,23 @@
 			}
 		]
 	},
-	"alias": ["data", "table", "knowledge", "data table", "table", "sheet"],
+	"alias": [
+		"data",
+		"table",
+		"knowledge",
+		"data table",
+		"table",
+		"sheet",
+		"database",
+		"data base",
+		"mysql",
+		"postgres",
+		"postgresql",
+		"airtable",
+		"supabase",
+		"noco",
+		"notion"
+	],
 	"subcategories": {
 		"Core Nodes": ["Helpers"]
 	}