From f78286608fcca1c69286a494fa6ee7ea105c089d Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Thu, 2 Apr 2026 15:38:41 +0300
Subject: [PATCH] Add rule chain node chips to item detail dialog

- Display rule chain nodes as colored pill chips below categories section
- Colors match design: Filter (yellow), Enrichment (lime), Transformation
  (sky blue), Action (salmon), Analytics (teal), External (amber), Flow
  (lavender) - border at full color, bg at 16% opacity
- Text: 14px Regular, rgba(0,0,0,0.76), line-height 20px
- Divider between categories and node chips sections
---
 .../iot-hub-item-detail-dialog.component.html | 10 ++++++
 .../iot-hub-item-detail-dialog.component.scss | 33 +++++++++++++++++++
 2 files changed, 43 insertions(+)

diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.html b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.html
index de9c3f1f3b..3313163086 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.html
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.html
@@ -155,6 +155,16 @@
       </div>
     }
 
+    <!-- Rule Chain Nodes -->
+    @if (item.type === ItemType.RULE_CHAIN && getNodes().length) {
+      <div class="dlg-divider"></div>
+      <div class="dlg-nodes">
+        @for (node of getNodes(); track node.name) {
+          <span class="dlg-node-chip" [ngClass]="'dlg-node-' + node.type.toLowerCase()">{{ node.name }}</span>
+        }
+      </div>
+    }
+
     <!-- Readme / Changelog -->
     @if (readmeContent || item.changelog) {
       <div class="dlg-divider"></div>
diff --git a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss
index 3816517359..e43b356767 100644
--- a/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss
+++ b/ui-ngx/src/app/modules/home/pages/iot-hub/iot-hub-item-detail-dialog.component.scss
@@ -210,6 +210,39 @@
   }
 }
 
+// Rule Chain node chips — Design: colored pill chips in a row, px-24 py-16
+.dlg-nodes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  padding: 16px 24px;
+}
+
+// Node chips — Design: pill shape, 1px border at full color, bg at 16% opacity, black text
+.dlg-node-chip {
+  display: inline-flex;
+  align-items: center;
+  height: 32px;
+  padding: 6px 12px;
+  border-radius: 16px;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.2px;
+  white-space: nowrap;
+  border: 1px solid;
+  color: rgba(0, 0, 0, 0.76);
+
+  &.dlg-node-filter { background: rgba(241, 232, 97, 0.16); border-color: rgb(241, 232, 97); }
+  &.dlg-node-enrichment { background: rgba(205, 241, 78, 0.16); border-color: rgb(205, 241, 78); }
+  &.dlg-node-transformation { background: rgba(121, 206, 241, 0.16); border-color: rgb(121, 206, 241); }
+  &.dlg-node-action { background: rgba(241, 146, 143, 0.16); border-color: rgb(241, 146, 143); }
+  &.dlg-node-analytics { background: rgba(49, 210, 204, 0.16); border-color: rgb(49, 210, 204); }
+  &.dlg-node-external { background: rgba(251, 199, 102, 0.16); border-color: rgb(251, 199, 102); }
+  &.dlg-node-flow { background: rgba(214, 196, 241, 0.16); border-color: rgb(214, 196, 241); }
+  &.dlg-node-unknown { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.12); }
+}
+
 // Divider
 .dlg-divider {
   height: 1px;