From bbb2b1683e3518d21db24599338946036cd9a8d5 Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Fri, 5 Jul 2024 15:19:23 +0300
Subject: [PATCH] UI: Refactoring gateway connectors configuration

---
 .../type-value-panel.component.html           |  2 +-
 .../type-value-panel.component.ts             | 16 ++----
 .../dialog/mapping-dialog.component.ts        | 50 +++++++++----------
 .../lib/gateway/gateway-widget.models.ts      |  8 +--
 4 files changed, 34 insertions(+), 42 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
index 7ce7fb94f0..a31fe4ff94 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.html
@@ -32,7 +32,7 @@
                   <div class="fixed-title-width tb-required" translate>gateway.type</div>
                   <div class="tb-flex no-gap">
                     <mat-form-field class="tb-flex no-gap fill-width" appearance="outline" subscriptSizing="dynamic">
-                      <mat-select name="valueType" formControlName="type">
+                      <mat-select formControlName="type">
                         <mat-select-trigger>
                           <div class="tb-flex align-center">
                             <mat-icon class="tb-mat-18" [svgIcon]="valueTypes.get(keyControl.get('type').value)?.icon">
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
index e163d463ed..32d0b2bddb 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/type-value-panel/type-value-panel.component.ts
@@ -14,12 +14,7 @@
 /// limitations under the License.
 ///
 
-import {
-  Component,
-  forwardRef,
-  OnDestroy,
-  OnInit,
-} from '@angular/core';
+import { Component, forwardRef, OnDestroy, OnInit } from '@angular/core';
 import {
   AbstractControl,
   ControlValueAccessor,
@@ -31,7 +26,6 @@ import {
   Validator,
   Validators
 } from '@angular/forms';
-import { DataKeyType } from '@shared/models/telemetry/telemetry.models';
 import { isDefinedAndNotNull } from '@core/utils';
 import {
   MappingDataKey,
@@ -60,12 +54,10 @@ import { Subject } from 'rxjs';
   ]
 })
 export class TypeValuePanelComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {
-  valueTypeKeys = Object.values(MappingValueType);
-  valueTypeEnum = MappingValueType;
+
+  valueTypeKeys: MappingValueType[] = Object.values(MappingValueType);
   valueTypes = mappingValueTypesMap;
-  dataKeyType: DataKeyType;
   valueListFormArray: UntypedFormArray;
-  errorText = '';
 
   private destroy$ = new Subject<void>();
   private propagateChange = (v: any) => {};
@@ -138,7 +130,7 @@ export class TypeValuePanelComponent implements ControlValueAccessor, Validator,
     };
   }
 
-  updateView(value: any): void {
+  private updateView(value: any): void {
     this.propagateChange(value);
   }
 }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
index a2b6a67490..3812fa161e 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/dialog/mapping-dialog.component.ts
@@ -22,6 +22,8 @@ import { FormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
 import { DialogComponent } from '@shared/components/dialog.component';
 import { Router } from '@angular/router';
 import {
+  Attribute,
+  AttributesUpdate,
   ConvertorType,
   ConvertorTypeTranslationsMap,
   DataConversionTranslationsMap,
@@ -34,16 +36,19 @@ import {
   MappingKeysPanelTitleTranslationsMap,
   MappingKeysType,
   MappingType,
-  MappingTypeTranslationsMap, MappingValue,
+  MappingTypeTranslationsMap,
+  MappingValue,
   noLeadTrailSpacesRegex,
   OPCUaSourceTypes,
   QualityTypes,
   QualityTypeTranslationsMap,
   RequestType,
   RequestTypesTranslationsMap,
+  RpcMethod,
   ServerSideRPCType,
   SourceTypes,
-  SourceTypeTranslationsMap
+  SourceTypeTranslationsMap,
+  Timeseries
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
@@ -66,17 +71,17 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
   qualityTypes = QualityTypes;
   QualityTranslationsMap = QualityTypeTranslationsMap;
 
-  convertorTypes = Object.values(ConvertorType);
+  convertorTypes: ConvertorType[] = Object.values(ConvertorType);
   ConvertorTypeEnum = ConvertorType;
   ConvertorTypeTranslationsMap = ConvertorTypeTranslationsMap;
 
-  sourceTypes = Object.values(SourceTypes);
+  sourceTypes: SourceTypes[] = Object.values(SourceTypes);
   OPCUaSourceTypes = Object.values(OPCUaSourceTypes) as Array<OPCUaSourceTypes>;
   OPCUaSourceTypesEnum = OPCUaSourceTypes;
   sourceTypesEnum = SourceTypes;
   SourceTypeTranslationsMap = SourceTypeTranslationsMap;
 
-  requestTypes = Object.values(RequestType);
+  requestTypes: RequestType[] = Object.values(RequestType);
   RequestTypeEnum = RequestType;
   RequestTypesTranslationsMap = RequestTypesTranslationsMap;
 
@@ -92,12 +97,8 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
 
   DataConversionTranslationsMap = DataConversionTranslationsMap;
 
-  hiddenAttributesCount = 0;
-
   keysPopupClosed = true;
 
-  submitted = false;
-
   private destroy$ = new Subject<void>();
 
   constructor(protected store: Store<AppState>,
@@ -116,30 +117,30 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
 
   get converterAttributes(): Array<string> {
     if (this.converterType) {
-      return this.mappingForm.get('converter').get(this.converterType).value.attributes.map(value => value.key);
+      return this.mappingForm.get('converter').get(this.converterType).value.attributes.map((value: Attribute) => value.key);
     }
   }
 
   get converterTelemetry(): Array<string> {
     if (this.converterType) {
-      return this.mappingForm.get('converter').get(this.converterType).value.timeseries.map(value => value.key);
+      return this.mappingForm.get('converter').get(this.converterType).value.timeseries.map((value: Timeseries) => value.key);
     }
   }
 
   get opcAttributes(): Array<string> {
-    return this.mappingForm.get('attributes').value?.map(value => value.key) || [];
+    return this.mappingForm.get('attributes').value?.map((value: Attribute) => value.key) || [];
   }
 
   get opcTelemetry(): Array<string> {
-    return this.mappingForm.get('timeseries').value?.map(value => value.key) || [];
+    return this.mappingForm.get('timeseries').value?.map((value: Timeseries) => value.key) || [];
   }
 
   get opcRpcMethods(): Array<string> {
-    return this.mappingForm.get('rpc_methods').value?.map(value => value.method) || [];
+    return this.mappingForm.get('rpc_methods').value?.map((value: RpcMethod) => value.method) || [];
   }
 
   get opcAttributesUpdates(): Array<string> {
-    return this.mappingForm.get('attributes_updates')?.value?.map(value => value.key) || [];
+    return this.mappingForm.get('attributes_updates')?.value?.map((value: AttributesUpdate) => value.key) || [];
   }
 
   get converterType(): ConvertorType {
@@ -197,7 +198,6 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
   }
 
   add(): void {
-    this.submitted = true;
     if (this.mappingForm.valid) {
       this.dialogRef.close(this.prepareMappingData());
     }
@@ -215,9 +215,9 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
         : this.mappingForm;
 
       const keysControl = group.get(keysType);
-      const ctx: {[key: string]: any} = {
+      const ctx: { [key: string]: any } = {
         keys: keysControl.value,
-        keysType: keysType,
+        keysType,
         rawData: this.mappingForm.get('converter.type')?.value === ConvertorType.BYTES,
         panelTitle: MappingKeysPanelTitleTranslationsMap.get(keysType),
         addKeyTitle: MappingKeysAddKeyTranslationsMap.get(keysType),
@@ -247,11 +247,11 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
     }
   }
 
-  private prepareMappingData(): {[key: string]: unknown} {
+  private prepareMappingData(): { [key: string]: unknown } {
     const formValue = this.mappingForm.value;
     switch (this.data.mappingType) {
       case MappingType.DATA:
-        const { converter, topicFilter, subscriptionQos } = formValue;
+        const {converter, topicFilter, subscriptionQos} = formValue;
         return {
           topicFilter,
           subscriptionQos,
@@ -270,17 +270,17 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
     }
   }
 
-  private prepareFormValueData(): {[key: string]: unknown} {
+  private prepareFormValueData(): { [key: string]: unknown } {
     if (this.data.value && Object.keys(this.data.value).length) {
       switch (this.data.mappingType) {
         case MappingType.DATA:
-          const { converter, topicFilter, subscriptionQos } = this.data.value;
+          const {converter, topicFilter, subscriptionQos} = this.data.value;
           return {
             topicFilter,
             subscriptionQos,
             converter: {
               type: converter.type,
-              [converter.type]: { ...converter }
+              [converter.type]: {...converter}
             }
           };
         case MappingType.REQUESTS:
@@ -327,7 +327,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
       converterGroup.get('bytes').disable({emitEvent: false});
       converterGroup.get('custom').disable({emitEvent: false});
       converterGroup.get(value).enable({emitEvent: false});
-    })
+    });
   }
 
   private createRequestMappingForm(): void {
@@ -343,7 +343,7 @@ export class MappingDialogComponent extends DialogComponent<MappingDialogCompone
       }),
       attributeRequests: this.fb.group({
         topicFilter: ['', [Validators.required, Validators.pattern(noLeadTrailSpacesRegex)]],
-        deviceInfo:  this.fb.group({
+        deviceInfo: this.fb.group({
           deviceNameExpressionSource: [SourceTypes.MSG, []],
           deviceNameExpression: ['', [Validators.required]],
         }),
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
index e734358908..9805008503 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-widget.models.ts
@@ -195,13 +195,13 @@ interface DeviceInfo {
   deviceProfileExpressionSource: string;
 }
 
-interface Attribute {
+export interface Attribute {
   key: string;
   type: string;
   value: string;
 }
 
-interface Timeseries {
+export interface Timeseries {
   key: string;
   type: string;
   value: string;
@@ -212,12 +212,12 @@ interface RpcArgument {
   value: number;
 }
 
-interface RpcMethod {
+export interface RpcMethod {
   method: string;
   arguments: RpcArgument[];
 }
 
-interface AttributesUpdate {
+export interface AttributesUpdate {
   key: string;
   type: string;
   value: string;