feat(entities-plugins): group datakit node types in node selection panel

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node-forms/SourceItem.vue

@@ -1,7 +1,7 @@
 <template>
   <span class="dk-source-item">
     <component
-      :is="NODE_VISUAL[item.type as NodeType].icon"
+      :is="getNodeVisual(item.type as NodeType).icon"
       :color="KUI_COLOR_TEXT_NEUTRAL"
       :size="KUI_ICON_SIZE_40"
     />
@@ -13,7 +13,7 @@
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_ICON_SIZE_40 } from '@kong/design-tokens'
 import type { NodeType } from '../../types'
 import type { InputOption } from '../composables/useNodeForm'
-import { NODE_VISUAL } from '../node/node-visual'
+import { getNodeVisual } from '../node/node-visual'
 
 defineProps<{
   item: InputOption

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/FlowNode.vue

@@ -387,7 +387,11 @@ const branchPosition = computed(() => {
 })
 
 const name = computed(() => {
-  return isImplicit.value ? t(`plugins.free-form.datakit.flow_editor.node_types.${data.type}.name`) : data.name
+  if (isImplicitNode(data)) {
+    return t(`plugins.free-form.datakit.flow_editor.node_types.${data.type}.name`)
+  }
+
+  return data.name
 })
 
 const handleTwigColor = computed(() => {

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodeBadge.vue

@@ -14,27 +14,24 @@
     >
       <component :is="visual.icon" />
     </template>
-    {{ nodeName }}
+    {{ type }}
   </KBadge>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { NodeVisual } from '../../types'
 import { type NodeType } from '../../types'
-import { getNodeTypeName } from './node'
+import { getNodeVisual } from './node-visual'
 import type { BadgeSize } from '@kong/kongponents'
-import { NODE_VISUAL } from './node-visual'
 
 const { type } = defineProps<{
   type: NodeType
   size?: BadgeSize
   iconOnly?: boolean
 }>()
 
-const visual = computed<NodeVisual>(() => NODE_VISUAL[type])
-
-const nodeName = computed(() => getNodeTypeName(type))
+const visual = computed<NodeVisual>(() => getNodeVisual(type))
 </script>
 
 <style lang="scss" scoped>

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePanelItem.vue

@@ -23,7 +23,7 @@
 </template>
 
 <script setup lang="ts">
-import { CONFIG_NODE_META_MAP } from './node'
+import { CONFIG_NODE_META_MAP, getConfigNodeGroupMeta } from './node'
 
 import type { ConfigNodeType } from '../../types'
 
@@ -39,8 +39,10 @@ const emit = defineEmits<{
 const {
   summary,
   icon: Icon,
-  colors: { background, foreground } = {},
 } = CONFIG_NODE_META_MAP[type]
+const {
+  colors: { background, foreground },
+} = getConfigNodeGroupMeta(CONFIG_NODE_META_MAP[type].group)
 
 function handleDragStart(e: DragEvent) {
   emit('dragstart', e, type)

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/NodePortal.vue

@@ -47,8 +47,8 @@
 import { computed, ref } from 'vue'
 import { KUI_COLOR_TEXT_NEUTRAL, KUI_SPACE_10 } from '@kong/design-tokens'
 import { KTooltip } from '@kong/kongponents'
-import { NODE_VISUAL } from './node-visual'
 import { useEditorStore } from '../store/store'
+import { getNodeVisual } from './node-visual'
 
 import type { EdgeId, FieldName, NodeInstance, NonEmptyArray } from '../../types'
 
@@ -114,7 +114,7 @@ const targetBoxItems = computed(() =>
     return {
       edgeId: target.edgeId,
       key: `${target.node.id}-${target.fieldName ?? 'node'}-${index}`,
-      icon: NODE_VISUAL[target.node.type]?.icon,
+      icon: getNodeVisual(target.node.type).icon,
       tooltip: target.fieldName
         ? `${target.node.name}.${target.fieldName}`
         : target.node.name,

packages/entities/entities-plugins/src/components/free-form/Datakit/flow-editor/node/node-visual.ts

@@ -1,13 +1,8 @@
 import {
   KUI_COLOR_BACKGROUND_DECORATIVE_AQUA_WEAKEST,
   KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST,
-  KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER,
   KUI_COLOR_BACKGROUND_WARNING_WEAKEST,
-  KUI_COLOR_TEXT,
-  KUI_COLOR_TEXT_DANGER,
-  KUI_COLOR_TEXT_DANGER_WEAKEST,
   KUI_COLOR_TEXT_DECORATIVE_AQUA,
-  KUI_COLOR_TEXT_DECORATIVE_PINK,
   KUI_COLOR_TEXT_DECORATIVE_PURPLE,
   KUI_COLOR_TEXT_PRIMARY,
   KUI_COLOR_TEXT_PRIMARY_WEAKEST,
@@ -17,107 +12,151 @@ import {
 } from '@kong/design-tokens'
 import {
   ArrowSplitIcon,
+  CachedIcon,
   CloudIcon,
+  CodeIcon,
   CodeblockIcon,
+  DataObjectIcon,
+  DeployIcon,
   EditSquareIcon,
   GatewayIcon,
   KeyIcon,
   NetworkIcon,
   StackIcon,
-  DeployIcon,
-  CachedIcon,
-  CodeIcon,
-  DataObjectIcon,
 } from '@kong/icons'
-import type { NodeType, NodeVisual } from '../../types'
+import type {
+  ConfigNodeGroup,
+  ConfigNodeType,
+  ImplicitNodeType,
+  NodeColors,
+  NodeType,
+  NodeVisual,
+} from '../../types'
 import JwtDecodeIcon from './icons/JwtDecodeIcon.vue'
 import JwtVerifyIcon from './icons/JwtVerifyIcon.vue'
 
-export const NODE_VISUAL: Record<NodeType, NodeVisual> = {
-  call: {
-    icon: NetworkIcon,
+type ConfigNodeVisual = {
+  type: ConfigNodeType
+  icon: NodeVisual['icon']
+}
+
+type ConfigNodeGroupVisual = {
+  id: ConfigNodeGroup
+  colors: NodeColors
+  nodes: readonly ConfigNodeVisual[]
+}
+
+export const CONFIG_NODE_GROUP_VISUAL_CATALOG = [
+  {
+    id: 'external_interaction',
     colors: {
       foreground: KUI_COLOR_TEXT_WARNING,
       background: KUI_COLOR_BACKGROUND_WARNING_WEAKEST,
     },
-  },
-  jq: {
-    icon: CodeblockIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT_DECORATIVE_PURPLE,
-      background: KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST,
-    },
-  },
-  exit: {
-    icon: GatewayIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT_DANGER,
-      background: KUI_COLOR_TEXT_DANGER_WEAKEST,
-    },
-  },
-  property: {
-    icon: StackIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT_SUCCESS,
-      background: KUI_COLOR_TEXT_SUCCESS_WEAKEST,
-    },
-  },
-  static: {
-    icon: DeployIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT_PRIMARY,
-      background: KUI_COLOR_TEXT_PRIMARY_WEAKEST,
-    },
-  },
-  branch: {
-    icon: ArrowSplitIcon,
+    nodes: [
+      {
+        type: 'call',
+        icon: NetworkIcon,
+      },
+      {
+        type: 'cache',
+        icon: CachedIcon,
+      },
+    ],
+  },
+  {
+    id: 'control_flow',
     colors: {
       foreground: KUI_COLOR_TEXT_DECORATIVE_AQUA,
       background: KUI_COLOR_BACKGROUND_DECORATIVE_AQUA_WEAKEST,
     },
-  },
-  cache: {
-    icon: CachedIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT_DECORATIVE_PINK,
-      background: '#fff0f7', // Pink-tinted background for cache node
-    },
-  },
-  xml_to_json: {
-    icon: DataObjectIcon,
+    nodes: [
+      {
+        type: 'branch',
+        icon: ArrowSplitIcon,
+      },
+      {
+        type: 'exit',
+        icon: GatewayIcon,
+      },
+    ],
+  },
+  {
+    id: 'data_transformation',
     colors: {
-      foreground: KUI_COLOR_TEXT,
-      background: KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER,
-    },
-  },
-  json_to_xml: {
-    icon: CodeIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT,
-      background: KUI_COLOR_BACKGROUND_NEUTRAL_WEAKER,
+      foreground: KUI_COLOR_TEXT_DECORATIVE_PURPLE,
+      background: KUI_COLOR_BACKGROUND_DECORATIVE_PURPLE_WEAKEST,
     },
-  },
-  jwt_decode: {
-    icon: JwtDecodeIcon,
+    nodes: [
+      {
+        type: 'jq',
+        icon: CodeblockIcon,
+      },
+      {
+        type: 'xml_to_json',
+        icon: DataObjectIcon,
+      },
+      {
+        type: 'json_to_xml',
+        icon: CodeIcon,
+      },
+    ],
+  },
+  {
+    id: 'data_value',
     colors: {
-      foreground: KUI_COLOR_TEXT_WARNING,
-      background: KUI_COLOR_BACKGROUND_WARNING_WEAKEST,
+      foreground: KUI_COLOR_TEXT_SUCCESS,
+      background: KUI_COLOR_TEXT_SUCCESS_WEAKEST,
     },
-  },
-  jwt_sign: {
-    icon: EditSquareIcon,
+    nodes: [
+      {
+        type: 'property',
+        icon: StackIcon,
+      },
+      {
+        type: 'static',
+        icon: DeployIcon,
+      },
+    ],
+  },
+  {
+    id: 'authentication',
     colors: {
       foreground: KUI_COLOR_TEXT_PRIMARY,
       background: KUI_COLOR_TEXT_PRIMARY_WEAKEST,
     },
+    nodes: [
+      {
+        type: 'jwt_sign',
+        icon: EditSquareIcon,
+      },
+      {
+        type: 'jwt_decode',
+        icon: JwtDecodeIcon,
+      },
+      {
+        type: 'jwt_verify',
+        icon: JwtVerifyIcon,
+      },
+    ],
+  },
+] as const satisfies readonly ConfigNodeGroupVisual[]
+
+const CONFIG_NODE_VISUAL_MAP = CONFIG_NODE_GROUP_VISUAL_CATALOG.reduce<Record<ConfigNodeType, NodeVisual>>(
+  (visuals, group) => {
+    for (const node of group.nodes) {
+      visuals[node.type] = {
+        icon: node.icon,
+        colors: group.colors,
+      }
+    }
+
+    return visuals
   },
-  jwt_verify: {
-    icon: JwtVerifyIcon,
-    colors: {
-      foreground: KUI_COLOR_TEXT_SUCCESS,
-      background: KUI_COLOR_TEXT_SUCCESS_WEAKEST,
-    },
-  },
+  {} as Record<ConfigNodeType, NodeVisual>,
+)
+
+export const IMPLICIT_NODE_VISUALS: Record<ImplicitNodeType, NodeVisual> = {
   vault: {
     icon: KeyIcon,
   },
@@ -134,3 +173,11 @@ export const NODE_VISUAL: Record<NodeType, NodeVisual> = {
     icon: CloudIcon,
   },
 }
+
+export function getConfigNodeGroupColors(group: ConfigNodeGroup): NodeColors {
+  return CONFIG_NODE_GROUP_VISUAL_CATALOG.find(({ id }) => id === group)!.colors
+}
+
+export function getNodeVisual(type: NodeType): NodeVisual {
+  return CONFIG_NODE_VISUAL_MAP[type as ConfigNodeType] ?? IMPLICIT_NODE_VISUALS[type as ImplicitNodeType]
+}