From 584214ebff3b5ef8a31da8a69a14ad3078e76aa5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Tue, 31 Mar 2026 18:49:07 +0300
Subject: [PATCH] Optimize REST API call node request body template UI

Consolidate body template section: use outline mat-form-field with
always-floating label, merge variable syntax and empty-field hints
into a single mat-hint, and remove redundant translation key.
---
 .../rest-api-call-config.component.html       | 26 +++++++++----------
 .../rest-api-call-config.component.scss       |  3 +++
 .../assets/locale/locale.constant-en_US.json  |  3 +--
 3 files changed, 16 insertions(+), 16 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html b/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html
index 948089721c..0bb2b708f9 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html
@@ -124,24 +124,22 @@
             </div>
           </mat-slide-toggle>
         </div>
-        <div class="tb-form-row">
+        <div class="tb-form-panel stroked column">
           <mat-slide-toggle class="mat-slide fixed-title-width" formControlName="ignoreRequestBody">
             {{ 'rule-node-config.ignore-request-body' | translate }}
           </mat-slide-toggle>
+          @if(!restApiCallConfigForm.get('ignoreRequestBody').value) {
+            <mat-form-field class="mat-block" subscriptSizing="dynamic" appearance="outline" floatLabel="always">
+              <mat-label translate>rule-node-config.request-body-template</mat-label>
+              <textarea matInput
+                        formControlName="requestBodyTemplate"
+                        class="tb-enable-vertical-resize"
+                        cdkTextareaAutosize
+                        cdkAutosizeMinRows="3"></textarea>
+              <mat-hint [innerHTML]="'rule-node-config.request-body-template-hint' | translate | safe: 'html'"></mat-hint>
+            </mat-form-field>
+          }
         </div>
-        <section *ngIf="!restApiCallConfigForm.get('ignoreRequestBody').value">
-          <label translate class="tb-title">rule-node-config.request-body-template</label>
-          <div class="tb-hint" [innerHTML]="'rule-node-config.request-body-template-hint' | translate | safe: 'html'"></div>
-          <mat-form-field class="mat-block" subscriptSizing="dynamic">
-            <mat-label translate>rule-node-config.request-body-template</mat-label>
-            <textarea matInput
-                      formControlName="requestBodyTemplate"
-                      class="tb-enable-vertical-resize"
-                      cdkTextareaAutosize
-                      cdkAutosizeMinRows="3"></textarea>
-            <mat-hint translate>rule-node-config.request-body-template-empty-hint</mat-hint>
-          </mat-form-field>
-        </section>
         <mat-form-field class="mat-block" subscriptSizing="dynamic">
           <mat-label translate>rule-node-config.read-timeout</mat-label>
           <input type="text" min="0" [max]="IntLimit" inputmode="numeric" pattern="[0-9]*" matInput formControlName="readTimeoutMs">
diff --git a/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.scss b/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.scss
index a5ed420c88..a4ad3fe4f8 100644
--- a/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.scss
+++ b/ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.scss
@@ -26,4 +26,7 @@
       }
     }
   }
+  textarea.tb-enable-vertical-resize {
+    resize: vertical;
+  }
 }
diff --git a/ui-ngx/src/assets/locale/locale.constant-en_US.json b/ui-ngx/src/assets/locale/locale.constant-en_US.json
index 0dddc1a32e..deeb3117be 100644
--- a/ui-ngx/src/assets/locale/locale.constant-en_US.json
+++ b/ui-ngx/src/assets/locale/locale.constant-en_US.json
@@ -5512,8 +5512,7 @@
         "request-method": "Request method",
         "ignore-request-body": "Without request body",
         "request-body-template": "Request body template",
-        "request-body-template-hint": "Use <code><span style=\"color: #000;\">$&#123;</span>metadataKey<span style=\"color: #000;\">&#125;</span></code> for value from metadata, <code><span style=\"color: #000;\">$[</span>messageKey<span style=\"color: #000;\">]</span></code> for value from message body",
-        "request-body-template-empty-hint": "If empty, the incoming message payload is used as the request body. Supports any content type — use 'Parse to plain text' option to send non-JSON content",
+        "request-body-template-hint": "Use <code><span style=\"color: #000;\">$&#123;</span>metadataKey<span style=\"color: #000;\">&#125;</span></code> for metadata, <code><span style=\"color: #000;\">$[</span>messageKey<span style=\"color: #000;\">]</span></code> for message values. If empty, the message payload is used as the request body. For non-JSON payloads, enable 'Parse to plain text'.",
         "parse-to-plain-text": "Parse to plain text",
         "parse-to-plain-text-hint": "If selected, the request body (message payload or body template result) will be sent as a plain text string instead of being parsed as JSON, e.g. msg = \"Hello,\\t\"world\"\" will be parsed to Hello, \"world\"",
         "read-timeout": "Read timeout in millis",