Moved components from tb-kv-map-config-old to tb-kv-map-config

ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.html

@@ -47,8 +47,7 @@
       </div>
       <div class="tb-form-table-body">
         @for (keyValControl of keyValsFormArray().controls; track keyValControl) {
-          <div class="tb-form-table-row"
+          <div class="tb-form-table-row">
-               >
             <mat-form-field class="tb-inline-field field-space" appearance="outline" subscriptSizing="dynamic">
               <input [placeholder]="keyText+'*'" [formControl]="keyValControl.get('key')" matInput/>
             </mat-form-field>
@@ -56,7 +55,7 @@
               <input [placeholder]="valText+'*'" [formControl]="keyValControl.get('value')" matInput/>
             </mat-form-field>
             <div class="tb-form-table-row-cell-buttons">
-              <button [class.tb-hidden]="keyValsFormArray().controls.length === 1"
+              <button [class.tb-hidden]="required && keyValsFormArray().controls.length === 1"
                       type="button"
                       mat-icon-button
                       (click)="removeKeyVal($index)"
@@ -67,6 +66,10 @@
               </button>
             </div>
           </div>
+        } @empty {
+          @if (emptyText) {
+            <div class="tb-prompt flex items-center justify-center">{{ emptyText }}</div>
+          }
         }
       </div>
     </div>

ui-ngx/src/app/modules/home/components/rule-node/common/kv-map-config.component.ts

@@ -80,6 +80,8 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid
 
   @Input() hintText: string;
 
+  @Input() emptyText: string;
+
   @Input() popupHelpLink: string;
 
   @Input()
@@ -171,7 +173,7 @@ export class KvMapConfigComponent implements ControlValueAccessor, OnInit, Valid
   };
 
   writeValue(keyValMap: { [key: string]: string }): void {
-    const keyValuesData = Object.keys(keyValMap).map(key => ({key, value: keyValMap[key]}));
+    const keyValuesData = Object.keys(keyValMap ?? {}).map(key => ({key, value: keyValMap[key]}));
     if (this.keyValsFormArray().length === keyValuesData.length) {
       this.keyValsFormArray().patchValue(keyValuesData, {emitEvent: false});
     } else {

ui-ngx/src/app/modules/home/components/rule-node/external/kafka-config.component.html

@@ -88,14 +88,15 @@
     </mat-select>
   </mat-form-field>
   <label translate class="tb-title">rule-node-config.other-properties</label>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="otherProperties"
-    keyText="rule-node-config.key"
+    [keyText]="'rule-node-config.key' | translate"
-    keyRequiredText="rule-node-config.key-required"
+    [keyRequiredText]="'rule-node-config.key-required' | translate"
-    valText="rule-node-config.value"
+    [valText]="'rule-node-config.value' | translate"
-    valRequiredText="rule-node-config.value-required">
+    [valRequiredText]="'rule-node-config.value-required' | translate"
-  </tb-kv-map-config-old>
+    [emptyText]="'rule-node-config.other-properties-empty' | translate">
+  </tb-kv-map-config>
   <mat-checkbox class="flex-1" formControlName="addMetadataKeyValuesAsKafkaHeaders">
     {{ 'rule-node-config.add-metadata-key-values-as-kafka-headers' | translate }}
   </mat-checkbox>

ui-ngx/src/app/modules/home/components/rule-node/external/pubsub-config.component.html

@@ -46,12 +46,13 @@
   </tb-file-input>
   <label translate class="tb-title">rule-node-config.message-attributes</label>
   <div class="tb-hint" [innerHTML]="'rule-node-config.message-attributes-hint' | translate | safe: 'html'"></div>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="messageAttributes"
-    keyText="rule-node-config.name"
+    [keyText]="'rule-node-config.name' | translate"
-    keyRequiredText="rule-node-config.name-required"
+    [keyRequiredText]="'rule-node-config.name-required' | translate"
-    valText="rule-node-config.value"
+    [valText]="'rule-node-config.value' | translate"
-    valRequiredText="rule-node-config.value-required">
+    [valRequiredText]="'rule-node-config.value-required' | translate"
-  </tb-kv-map-config-old>
+    [emptyText]="'rule-node-config.message-attributes-empty' | translate">
+  </tb-kv-map-config>
 </section>

ui-ngx/src/app/modules/home/components/rule-node/external/rabbit-mq-config.component.html

@@ -99,12 +99,13 @@
     }
   </mat-form-field>
   <label translate class="tb-title">rule-node-config.client-properties</label>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="clientProperties"
-    keyText="rule-node-config.key"
+    [keyText]="'rule-node-config.key' | translate"
-    keyRequiredText="rule-node-config.key-required"
+    [keyRequiredText]="'rule-node-config.key-required' | translate"
-    valText="rule-node-config.value"
+    [valText]="'rule-node-config.value' | translate"
-    valRequiredText="rule-node-config.value-required">
+    [valRequiredText]="'rule-node-config.value-required' | translate"
-  </tb-kv-map-config-old>
+    [emptyText]="'rule-node-config.client-properties-empty' | translate">
+  </tb-kv-map-config>
 </section>

ui-ngx/src/app/modules/home/components/rule-node/external/rest-api-call-config.component.html

@@ -61,15 +61,16 @@
         {{ 'rule-node-config.headers' | translate }}
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-kv-map-config-old
+        <div class="tb-form-hint tb-primary-fill mb-4" [innerHTML]="'rule-node-config.headers-hint' | translate | safe: 'html'"></div>
+        <tb-kv-map-config
+          required="false"
           formControlName="headers"
-          keyText="rule-node-config.header"
+          [keyText]="'rule-node-config.header' | translate"
-          keyRequiredText="rule-node-config.header-required"
+          [keyRequiredText]="'rule-node-config.header-required' | translate"
-          valText="rule-node-config.value"
+          [valText]="'rule-node-config.value' | translate"
-          valRequiredText="rule-node-config.value-required"
+          [valRequiredText]="'rule-node-config.value-required' | translate"
-          description="rule-node-config.headers-hint"
+          [emptyText]="'rule-node-config.headers-empty' | translate">
-          emptyText="rule-node-config.headers-empty">
+        </tb-kv-map-config>
-        </tb-kv-map-config-old>
       </ng-template>
     </mat-expansion-panel>
   </div>

ui-ngx/src/app/modules/home/components/rule-node/external/sqs-config.component.html

@@ -54,14 +54,15 @@
   }
   <label translate class="tb-title">rule-node-config.message-attributes</label>
   <div class="tb-hint" [innerHTML]="'rule-node-config.message-attributes-hint' | translate | safe: 'html'"></div>
-  <tb-kv-map-config-old
+  <tb-kv-map-config
     required="false"
     formControlName="messageAttributes"
-    keyText="rule-node-config.name"
+    [keyText]="'rule-node-config.name' | translate"
-    keyRequiredText="rule-node-config.name-required"
+    [keyRequiredText]="'rule-node-config.name-required' | translate"
-    valText="rule-node-config.value"
+    [valText]="'rule-node-config.value' | translate"
-    valRequiredText="rule-node-config.value-required">
+    [valRequiredText]="'rule-node-config.value-required' | translate"
-  </tb-kv-map-config-old>
+    [emptyText]="'rule-node-config.message-attributes-empty' | translate">
+  </tb-kv-map-config>
   <mat-form-field class="mat-block" appearance="outline">
     <mat-label translate>rule-node-config.aws-access-key-id</mat-label>
     <input required matInput formControlName="accessKeyId">

ui-ngx/src/assets/locale/locale.constant-en_US.json

@@ -5544,6 +5544,7 @@
         "bootstrap-servers": "Bootstrap servers",
         "bootstrap-servers-required": "Bootstrap servers value is required",
         "other-properties": "Other properties",
+        "other-properties-empty": "No other properties configured",
         "key": "Key",
         "key-required": "Key is required",
         "retries": "Automatically retry times if fails",
@@ -5581,6 +5582,7 @@
         "handshake-timeout-ms": "Handshake timeout (ms)",
         "min-handshake-timeout-ms-message": "Only 0 ms minimum value is allowed.",
         "client-properties": "Client properties",
+        "client-properties-empty": "No client properties configured",
         "queue-url-pattern": "Queue URL pattern",
         "queue-url-pattern-required": "Queue URL pattern is required",
         "delay-seconds": "Delay (seconds)",
@@ -5598,6 +5600,7 @@
         "pubsub-topic-name": "Topic name",
         "pubsub-topic-name-required": "Topic name is required",
         "message-attributes": "Message attributes",
+        "message-attributes-empty": "No message attributes configured",
         "message-attributes-hint": "Use <code><span style=\"color: #000;\">$&#123;</span>metadataKey<span style=\"color: #000000;\">&#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 in name/value fields",
         "connect-timeout": "Connection timeout (sec)",
         "connect-timeout-required": "Connection timeout is required.",