From 43735f17aea3d8378c2022713121ec3a11f05e7b Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Mon, 27 Mar 2023 16:29:31 +0300
Subject: [PATCH 1/2] Added string items list for sparkplug transport
 configuration

---
 ...ile-transport-configuration.component.html | 27 ++++++----------
 ...ofile-transport-configuration.component.ts | 32 -------------------
 2 files changed, 9 insertions(+), 50 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index 1ef7892ecb..ecc9d1923d 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -21,24 +21,15 @@
   </mat-checkbox>
   <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
        class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-hint' | translate }}"></div>
-  <mat-form-field floatLabel="always" class="mat-block" style="padding-top: 8px;"
-                  *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
-    <mat-label translate>device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names</mat-label>
-    <mat-chip-list #attrMetricNamesChipList formControlName="sparkplugAttributesMetricNames">
-      <mat-chip
-        *ngFor="let name of mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;"
-        (removed)="removeAttributeMetricName(name)">
-        {{name}}
-        <mat-icon matChipRemove>close</mat-icon>
-      </mat-chip>
-      <input matInput type="text" placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
-             [matChipInputFor]="attrMetricNamesChipList"
-             [matChipInputSeparatorKeyCodes]="separatorKeysCodes"
-             matChipInputAddOnBlur
-             (matChipInputTokenEnd)="addAttributeMetricName($event)">
-    </mat-chip-list>
-    <mat-hint innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></mat-hint>
-  </mat-form-field>
+  <tb-string-items-list *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
+    editable
+    label="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate }}"
+    placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
+    floatLabel="always"
+    formControlName="sparkplugAttributesMetricNames">
+  </tb-string-items-list>
+  <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
+       class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></div>
 </form>
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
index cf931a7fed..24b3f60fb4 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.ts
@@ -41,8 +41,6 @@ import {
 import { isDefinedAndNotNull } from '@core/utils';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { MatChipInputEvent } from '@angular/material/chips';
 
 @Component({
   selector: 'tb-mqtt-device-profile-transport-configuration',
@@ -79,8 +77,6 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
 
   private propagateChange = (v: any) => { };
 
-  separatorKeysCodes = [ENTER, COMMA, SEMICOLON];
-
   constructor(private store: Store<AppState>,
               private fb: UntypedFormBuilder) {
   }
@@ -175,34 +171,6 @@ export class MqttDeviceProfileTransportConfigurationComponent implements Control
     }
   }
 
-  removeAttributeMetricName(name: string): void {
-    const names: string[] = this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;
-    const index = names.indexOf(name);
-    if (index >= 0) {
-      names.splice(index, 1);
-      this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').setValue(names);
-    }
-  }
-
-  addAttributeMetricName(event: MatChipInputEvent): void {
-    const input = event.input;
-    let value = event.value;
-    if ((value || '').trim()) {
-      value = value.trim();
-      let names: string[] = this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').value;
-      if (!names || names.indexOf(value) === -1) {
-        if (!names) {
-          names = [];
-        }
-        names.push(value);
-        this.mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplugAttributesMetricNames').setValue(names, {emitEvent: true});
-      }
-    }
-    if (input) {
-      input.value = '';
-    }
-  }
-
   private updateModel() {
     let configuration: DeviceProfileTransportConfiguration = null;
     if (this.mqttDeviceProfileTransportConfigurationFormGroup.valid) {

From c94d5041a6b5c80e5f02a292332cbebf2928d0b6 Mon Sep 17 00:00:00 2001
From: rusikv <rvasylkiv@thingsboard.io>
Date: Mon, 27 Mar 2023 17:08:23 +0300
Subject: [PATCH 2/2] Moved sparkplug hint to string items list attribute,
 added subscriptSizing

---
 ...-profile-transport-configuration.component.html | 14 +++++++-------
 .../components/string-items-list.component.html    |  2 +-
 .../components/string-items-list.component.ts      |  5 ++++-
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
index ecc9d1923d..ac91bf3de3 100644
--- a/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/profile/device/mqtt-device-profile-transport-configuration.component.html
@@ -22,14 +22,14 @@
   <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
        class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-hint' | translate }}"></div>
   <tb-string-items-list *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
-    editable
-    label="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate }}"
-    placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
-    floatLabel="always"
-    formControlName="sparkplugAttributesMetricNames">
+                        editable
+                        label="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate }}"
+                        placeholder="{{'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names' | translate}}"
+                        hint="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"
+                        floatLabel="always"
+                        subscriptSizing="dynamic"
+                        formControlName="sparkplugAttributesMetricNames">
   </tb-string-items-list>
-  <div *ngIf="mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value"
-       class="tb-hint" innerHTML="{{ 'device-profile.mqtt-device-topic-filters-spark-plug-attribute-metric-names-hint' | translate }}"></div>
 </form>
 <form [formGroup]="mqttDeviceProfileTransportConfigurationFormGroup" style="padding-bottom: 16px;" *ngIf="!mqttDeviceProfileTransportConfigurationFormGroup.get('sparkplug').value">
   <fieldset class="fields-group">
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.html b/ui-ngx/src/app/shared/components/string-items-list.component.html
index a3820211b6..f1f9f0d118 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.html
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.html
@@ -16,7 +16,7 @@
 
 -->
 <section [formGroup]="stringItemsForm">
-  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance">
+  <mat-form-field fxFlex class="mat-block" [floatLabel]="floatLabel" [appearance]="appearance" [subscriptSizing]="subscriptSizing">
     <mat-label *ngIf="label">{{ label }}</mat-label>
     <mat-chip-grid #itemsChipList formControlName="items" [required]="required">
       <mat-chip-row *ngFor="let item of stringItemsList"
diff --git a/ui-ngx/src/app/shared/components/string-items-list.component.ts b/ui-ngx/src/app/shared/components/string-items-list.component.ts
index 161c8169e3..3fdea38bbe 100644
--- a/ui-ngx/src/app/shared/components/string-items-list.component.ts
+++ b/ui-ngx/src/app/shared/components/string-items-list.component.ts
@@ -18,7 +18,7 @@ import { Component, forwardRef, Input } from '@angular/core';
 import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { MatChipInputEvent } from '@angular/material/chips';
 import { COMMA, ENTER, SEMICOLON } from '@angular/cdk/keycodes';
-import { FloatLabelType, MatFormFieldAppearance } from '@angular/material/form-field';
+import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceBoolean } from '@shared/decorators/coerce-boolean';
 
 @Component({
@@ -79,6 +79,9 @@ export class StringItemsListComponent implements ControlValueAccessor{
   @coerceBoolean()
   editable = false;
 
+  @Input()
+  subscriptSizing: SubscriptSizing = 'fixed'
+
   private propagateChange = (v: any) => { };
 
   constructor(private fb: FormBuilder) {