UI: Refactoring gateway components

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/broker-config-control/broker-config-control.component.ts

@@ -36,7 +36,7 @@ import { CommonModule } from '@angular/common';
 import { TranslateService } from '@ngx-translate/core';
 import { generateSecret } from '@core/utils';
 import { Subject } from 'rxjs';
-import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe';
+import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
 import { SecurityConfigComponent } from '../security-config/security-config.component';
 
 @Component({

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/mapping-table/mapping-table.component.html

@@ -64,7 +64,7 @@
                            [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">
             {{ column.title | translate }}
           </mat-header-cell>
-          <mat-cell tbTruncateTooltip *matCellDef="let mapping" class="table-value-column"
+          <mat-cell tbTruncateWithTooltip *matCellDef="let mapping" class="table-value-column"
                     [class.request-column]="mappingType === mappingTypeEnum.REQUESTS">
             {{ mapping[column.def] }}
           </mat-cell>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright © 2016-2024 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.
+ */
+:host {
+  height: 100%;
+}
+
+:host ::ng-deep {
+  .mat-mdc-tab-body-content {
+    overflow: hidden !important;
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-basic-config/modbus-basic-config.component.ts

@@ -58,17 +58,7 @@ import { ModbusMasterTableComponent } from '../modbus-master-table/modbus-master
     ModbusMasterTableComponent,
     EllipsisChipListDirective,
   ],
-  styles: [`
+  styleUrls: ['./modbus-basic-config.component.scss'],
-    :host {
-      height: 100%;
-    }
-
-    :host ::ng-deep {
-      .mat-mdc-tab-body-content {
-        overflow: hidden !important;
-      }
-    }
-  `]
 })
 
 export class ModbusBasicConfigComponent implements ControlValueAccessor, Validator, OnDestroy {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-data-keys-panel/modbus-data-keys-panel.component.ts

@@ -35,7 +35,7 @@ import {
 } from '@home/components/widget/lib/gateway/gateway-widget.models';
 import { CommonModule } from '@angular/common';
 import { SharedModule } from '@shared/shared.module';
-import { GatewayHelpLinkPipe } from '@home/pipes/gateway-help-link.pipe';
+import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe';
 import { generateSecret } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 import { takeUntil } from 'rxjs/operators';

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.scss

@@ -16,7 +16,6 @@
 $server-config-header-height: 132px;
 
 :host {
-
   .slave-content {
     height: calc(100% - #{$server-config-header-height});
     overflow: auto;

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-config/modbus-slave-config.component.ts

@@ -44,7 +44,7 @@ import { SharedModule } from '@shared/shared.module';
 import { CommonModule } from '@angular/common';
 import { Subject } from 'rxjs';
 import { startWith, takeUntil } from 'rxjs/operators';
-import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe';
+import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
 import { ModbusSecurityConfigComponent } from '../modbus-security-config/modbus-security-config.component';
 import { ModbusValuesComponent, } from '../modbus-values/modbus-values.component';
 import { isEqual } from '@core/utils';
@@ -73,7 +73,7 @@ import { isEqual } from '@core/utils';
     ModbusSecurityConfigComponent,
     GatewayPortTooltipPipe,
   ],
-  styleUrls: ['modbus-slave-config.component.scss'],
+  styleUrls: ['./modbus-slave-config.component.scss'],
 })
 export class ModbusSlaveConfigComponent implements ControlValueAccessor, Validator, OnDestroy {
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.scss

@@ -0,0 +1,21 @@
+/**
+ * Copyright © 2016-2024 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.
+ */
+:host {
+  .slaves-config-container {
+    width: 80vw;
+    max-width: 900px;
+  }
+}

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-slave-dialog/modbus-slave-dialog.component.ts

@@ -49,7 +49,7 @@ import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
 import { Router } from '@angular/router';
 import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
-import { GatewayPortTooltipPipe } from '@home/pipes/gateway-port-tooltip.pipe';
+import { GatewayPortTooltipPipe } from '@home/components/widget/lib/gateway/pipes/gateway-port-tooltip.pipe';
 import { takeUntil } from 'rxjs/operators';
 import { isEqual } from '@core/utils';
 
@@ -77,13 +77,7 @@ import { isEqual } from '@core/utils';
     ModbusSecurityConfigComponent,
     GatewayPortTooltipPipe,
   ],
-  styles: [`
+  styleUrls: ['./modbus-slave-dialog.component.scss'],
-    :host {
-      .slaves-config-container {
-        width: 80vw;
-        max-width: 900px;      }
-    }
-  `],
 })
 export class ModbusSlaveDialogComponent extends DialogComponent<ModbusSlaveDialogComponent, SlaveConfig> implements OnDestroy {
 

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.scss

@@ -0,0 +1,24 @@
+/**
+ * Copyright © 2016-2024 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.
+ */
+:host {
+  .mat-mdc-tab-body-wrapper {
+    min-height: 320px;
+  }
+}
+
+::ng-deep .mdc-evolution-chip-set__chips {
+  align-items: center;
+}

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/modbus/modbus-values/modbus-values.component.ts

@@ -79,17 +79,7 @@ import { coerceBoolean } from '@shared/decorators/coercion';
     SharedModule,
     EllipsisChipListDirective,
   ],
-  styles: [`
+  styleUrls: ['./modbus-values.component.scss']
-    :host {
-      .mat-mdc-tab-body-wrapper {
-        min-height: 320px;
-      }
-    }
-
-    ::ng-deep .mdc-evolution-chip-set__chips {
-      align-items: center;
-    }
-  `]
 })
 
 export class ModbusValuesComponent implements ControlValueAccessor, Validator, OnInit, OnDestroy {

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/opc-server-config/opc-server-config.component.html

@@ -17,7 +17,7 @@
 -->
 <div class="tb-form-panel no-border no-padding padding-top" [formGroup]="serverConfigFormGroup">
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tbTruncateTooltip translate>gateway.server-url</div>
+    <div class="fixed-title-width" tbTruncateWithTooltip translate>gateway.server-url</div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
         <input matInput name="value" formControlName="url" placeholder="{{ 'gateway.set' | translate }}"/>
@@ -35,7 +35,7 @@
   </div>
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.opcua-timeout' | translate }}">
-      <div tbTruncateTooltip>{{ 'gateway.timeout' | translate }}</div>
+      <div tbTruncateWithTooltip>{{ 'gateway.timeout' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -54,7 +54,7 @@
     </div>
   </div>
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
-    <div class="fixed-title-width" tbTruncateTooltip translate>gateway.security</div>
+    <div class="fixed-title-width" tbTruncateWithTooltip translate>gateway.security</div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
         <mat-select formControlName="security">
@@ -65,7 +65,7 @@
   </div>
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.scan-period' | translate }}">
-      <div tbTruncateTooltip>{{ 'gateway.scan-period' | translate }}</div>
+      <div tbTruncateWithTooltip>{{ 'gateway.scan-period' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -86,7 +86,7 @@
   </div>
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width" tb-hint-tooltip-icon="{{ 'gateway.hints.sub-check-period' | translate }}">
-      <div tbTruncateTooltip>{{ 'gateway.sub-check-period' | translate }}</div>
+      <div tbTruncateWithTooltip>{{ 'gateway.sub-check-period' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -108,7 +108,7 @@
   <div class="tb-form-row" fxLayoutAlign="space-between center">
     <mat-slide-toggle class="mat-slide" formControlName="enableSubscriptions">
       <mat-label tb-hint-tooltip-icon="{{ 'gateway.hints.enable-subscription' | translate }}">
-        <div tbTruncateTooltip>{{ 'gateway.enable-subscription' | translate }}</div>
+        <div tbTruncateWithTooltip>{{ 'gateway.enable-subscription' | translate }}</div>
       </mat-label>
     </mat-slide-toggle>
   </div>

ui-ngx/src/app/modules/home/components/widget/lib/gateway/connectors-configuration/workers-config-control/workers-config-control.component.html

@@ -19,7 +19,7 @@
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width tb-required" [style.width.%]="50"
          tb-hint-tooltip-icon="{{ 'gateway.max-number-of-workers-hint' | translate }}">
-      <div tbTruncateTooltip>{{ 'gateway.max-number-of-workers' | translate }}</div>
+      <div tbTruncateWithTooltip>{{ 'gateway.max-number-of-workers' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">
@@ -41,7 +41,7 @@
   <div class="tb-form-row column-xs" fxLayoutAlign="space-between center">
     <div class="fixed-title-width tb-required" [style.width.%]="50"
          tb-hint-tooltip-icon="{{ 'gateway.max-messages-queue-for-worker-hint' | translate }}">
-      <div tbTruncateTooltip>{{ 'gateway.max-messages-queue-for-worker' | translate }}</div>
+      <div tbTruncateWithTooltip>{{ 'gateway.max-messages-queue-for-worker' | translate }}</div>
     </div>
     <div class="tb-flex no-gap">
       <mat-form-field class="tb-flex no-gap" appearance="outline" subscriptSizing="dynamic">

ui-ngx/src/app/modules/home/components/widget/widget-components.module.ts

@@ -109,7 +109,7 @@ import {
 import {
   NotificationTypeFilterPanelComponent
 } from '@home/components/widget/lib/cards/notification-type-filter-panel.component';
-import { GatewayHelpLinkPipe } from '@home/pipes/gateway-help-link.pipe';
+import { GatewayHelpLinkPipe } from '@home/components/widget/lib/gateway/pipes/gateway-help-link.pipe';
 import { EllipsisChipListDirective } from '@shared/directives/ellipsis-chip-list.directive';
 import {
   BrokerConfigControlComponent

ui-ngx/src/app/shared/directives/truncate-tooltip.directive.ts

@@ -26,17 +26,24 @@ import {
 import { fromEvent, Subject } from 'rxjs';
 import { filter, takeUntil, tap } from 'rxjs/operators';
 import { MatTooltip, TooltipPosition } from '@angular/material/tooltip';
+import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Directive({
   standalone: true,
-  selector: '[tbTruncateTooltip]',
+  selector: '[tbTruncateWithTooltip]',
   providers: [MatTooltip],
-
 })
 export class TruncateTooltipDirective implements OnInit, AfterViewInit, OnDestroy {
-  @Input('tbTruncateTooltip') text: string;
+
-  @Input() tooltipEnabled = true;
+  @Input('tbTruncateWithTooltip')
-  @Input() position: TooltipPosition = 'above';
+  text: string;
+
+  @Input()
+  @coerceBoolean()
+  tooltipEnabled = true;
+
+  @Input()
+  position: TooltipPosition = 'above';
 
   private destroy$ = new Subject<void>();