Merge pull request #9 from mtsymbarov-del/fix/rest-api-node/url-encoding

Added component for query params

ui-ngx/src/app/modules/home/components/rule-node/common/common-rule-node-config.module.ts

@@ -34,6 +34,7 @@ import { SelectAttributesComponent } from './select-attributes.component';
 import { AlarmStatusSelectComponent } from './alarm-status-select.component';
 import { ExampleHintComponent } from './example-hint.component';
 import { TimeUnitInputComponent } from './time-unit-input.component';
+import { KvListConfigComponent } from '@home/components/rule-node/common/kv-list-config.component';
 
 @NgModule({
   declarations: [
@@ -52,7 +53,8 @@ import { TimeUnitInputComponent } from './time-unit-input.component';
     SelectAttributesComponent,
     AlarmStatusSelectComponent,
     ExampleHintComponent,
-    TimeUnitInputComponent
+    TimeUnitInputComponent,
+    KvListConfigComponent
   ],
   imports: [
     CommonModule,
@@ -75,7 +77,8 @@ import { TimeUnitInputComponent } from './time-unit-input.component';
     SelectAttributesComponent,
     AlarmStatusSelectComponent,
     ExampleHintComponent,
-    TimeUnitInputComponent
+    TimeUnitInputComponent,
+    KvListConfigComponent
   ]
 })
 

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

@@ -0,0 +1,83 @@
+///
+/// Copyright © 2016-2025 The Thingsboard Authors
+///
+/// Licensed under the Apache License, Version 2.0 (the "License");
+/// you may not use this file except in compliance with the License.
+/// You may obtain a copy of the License at
+///
+///     http://www.apache.org/licenses/LICENSE-2.0
+///
+/// Unless required by applicable law or agreed to in writing, software
+/// distributed under the License is distributed on an "AS IS" BASIS,
+/// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+/// See the License for the specific language governing permissions and
+/// limitations under the License.
+///
+
+import { Component, forwardRef, OnInit } from '@angular/core';
+import {
+  AbstractControl,
+  ControlValueAccessor,
+  NG_VALIDATORS,
+  NG_VALUE_ACCESSOR,
+  Validator,
+  Validators
+} from '@angular/forms';
+import { KvMapConfigOldComponent } from '@home/components/rule-node/common/kv-map-config-old.component';
+
+@Component({
+  selector: 'tb-kv-list-config',
+  templateUrl: './kv-map-config-old.component.html',
+  styleUrls: ['./kv-map-config-old.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => KvListConfigComponent),
+      multi: true
+    },
+    {
+      provide: NG_VALIDATORS,
+      useExisting: forwardRef(() => KvListConfigComponent),
+      multi: true,
+    }
+  ]
+})
+export class KvListConfigComponent extends KvMapConfigOldComponent implements ControlValueAccessor, OnInit, Validator{
+
+  override writeValue(kvList: any): void {
+    const keyValsControls: Array<AbstractControl> = [];
+    if (Array.isArray(kvList) && kvList.length > 0) {
+      for (const property of kvList) {
+        keyValsControls.push(this.fb.group({
+          key: [property.key, [Validators.required]],
+          value: [property.value, [Validators.required]]
+        }))
+      }
+    }
+    this.kvListFormGroup.setControl('keyVals', this.fb.array(keyValsControls), {emitEvent: false});
+  }
+
+  public override validate() {
+    const kvList: { key: string; value: string }[] = this.kvListFormGroup.get('keyVals').value;
+    if (!kvList.length && this.required) {
+      return {
+        kvMapRequired: true
+      };
+    }
+    if (!this.kvListFormGroup.valid) {
+      return {
+        kvFieldsRequired: true
+      };
+    }
+    return null;
+  }
+
+  protected override updateModel() {
+    const kvList: { key: string; value: string }[] = this.kvListFormGroup.get('keyVals').value;
+    if (this.required && !kvList.length || !this.kvListFormGroup.valid) {
+      this.propagateChange(null);
+    } else {
+      this.propagateChange(kvList);
+    }
+  }
+}

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

@@ -86,11 +86,11 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal
 
   ngControl: NgControl;
 
-  private propagateChange = null;
+  public propagateChange = null;
 
   constructor(public translate: TranslateService,
               private injector: Injector,
-              private fb: FormBuilder,
+              protected fb: FormBuilder,
               private destroyRef: DestroyRef) {
     super();
   }
@@ -182,7 +182,7 @@ export class KvMapConfigOldComponent extends PageComponent implements ControlVal
     return null;
   }
 
-  private updateModel() {
+  protected updateModel() {
     const kvList: { key: string; value: string }[] = this.kvListFormGroup.get('keyVals').value;
     if (this.required && !kvList.length || !this.kvListFormGroup.valid) {
       this.propagateChange(null);

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

@@ -19,7 +19,7 @@
   <div class="tb-form-panel stroked">
     <div class="tb-form-panel-title">Request URL</div>
     <mat-form-field class="mat-block" subscriptSizing="dynamic">
-      <mat-label translate>rule-node-config.endpoint-url-pattern</mat-label>
+      <mat-label translate>rule-node-config.url</mat-label>
       <input required matInput formControlName="restEndpointUrlPattern">
       <mat-error *ngIf="restApiCallConfigForm.get('restEndpointUrlPattern').hasError('required')">
         {{ 'rule-node-config.endpoint-url-pattern-required' | translate }}
@@ -32,14 +32,14 @@
         <div [tb-hint-tooltip-icon]="'rule-node-config.query-params-hint' | translate" tooltipPosition="above"></div>
       </mat-expansion-panel-header>
       <ng-template matExpansionPanelContent>
-        <tb-kv-map-config-old
+        <tb-kv-list-config
           formControlName="queryParams"
           keyText="rule-node-config.query-params-name"
           keyRequiredText="rule-node-config.query-params-name-required"
           valText="rule-node-config.query-params-value"
           valRequiredText="rule-node-config.query-params-value-required"
-          emptyText="rule-node-config.query-params-empty">>
+          emptyText="rule-node-config.query-params-empty">
-        </tb-kv-map-config-old>
+        </tb-kv-list-config>
       </ng-template>
     </mat-expansion-panel>
   </div>

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

@@ -5411,6 +5411,7 @@
         "query-params-name-required": "Name is required",
         "query-params-value-required": "Value is required",
         "headers-empty": "No headers configured",
+        "url": "URL",
         "save-time-series": {
             "processing-settings": "Processing settings",
             "processing-settings-hint": "Define how incoming messages are processed. Basic processing settings allow you to select preconfigured strategies, while Advanced settings allow you to select individual processing strategies for each action.",