From cb546e7bd52022a479cd1fd65a0ffe92b1780efc Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 13 Sep 2023 13:42:22 +0300
Subject: [PATCH] UI: Fixed form style and enhancement hint tooltip component

---
 .../gateway-configuration.component.html      | 30 +++++++++----------
 .../gateway/gateway-connectors.component.html |  2 +-
 .../components/file-input.component.html      | 13 ++++----
 .../components/file-input.component.scss      |  4 +--
 .../hint-tooltip-icon.component.html          |  5 ++--
 .../hint-tooltip-icon.component.scss          |  4 ++-
 .../components/hint-tooltip-icon.component.ts |  3 +-
 ui-ngx/src/form.scss                          |  2 +-
 8 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
index 59b63d0051..9b0b8837e2 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-configuration.component.html
@@ -34,7 +34,7 @@
             {{ 'gateway.remote-shell' | translate }}
           </mat-slide-toggle>
         </div>
-        <div class="tb-form-row no-border no-padding tb-not-inline-field">
+        <div class="tb-form-row no-border no-padding tb-standard-fields">
           <mat-form-field appearance="outline" class="flex">
             <mat-label translate>gateway.thingsboard-host</mat-label>
             <input matInput formControlName="host"/>
@@ -84,7 +84,7 @@
                       matTooltip="{{ 'gateway.hints.token' | translate }}">info_outlined
             </mat-icon>
           </mat-form-field>
-          <div class="tb-form-row no-border no-padding tb-not-inline-field"
+          <div class="tb-form-row no-border no-padding tb-standard-fields"
                *ngIf="gatewayConfigGroup.get('thingsboard.security.type').value === 'usernamePassword'">
             <mat-form-field appearance="outline" class="flex" subscriptSizing="dynamic">
               <mat-label translate>security.clientId</mat-label>
@@ -181,7 +181,7 @@
                             class="first-capital">{{ localLogsConfigTranslateMap.get(logConfig) }}</tb-toggle-option>
         </tb-toggle-select>
         <ng-container [formGroup]="getLogFormGroup(logSelector.value)">
-          <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+          <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
             <mat-form-field appearance="outline" class="flex">
               <mat-label translate>gateway.logs.level</mat-label>
               <mat-select formControlName="logLevel">
@@ -196,8 +196,8 @@
               </mat-error>
             </mat-form-field>
           </div>
-          <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
-            <div class="tb-form-row no-border no-padding tb-not-inline-field saving-period">
+          <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
+            <div class="tb-form-row no-border no-padding tb-standard-fields saving-period">
               <mat-form-field appearance="outline" class="flex">
                 <mat-label translate>gateway.logs.saving-period</mat-label>
                 <input matInput formControlName="savingTime" type="number" min="0"/>
@@ -250,7 +250,7 @@
         </tb-toggle-select>
         <div class="tb-form-panel-hint">{{ 'gateway.hints.' + gatewayConfigGroup.get('storage.type').value | translate }}</div>
         <ng-container [ngSwitch]="gatewayConfigGroup.get('storage.type').value">
-          <section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+          <section *ngSwitchCase="StorageTypes.MEMORY" class="tb-form-row no-border no-padding tb-standard-fields column-xs">
             <mat-form-field appearance="outline" class="flex">
               <mat-label translate>gateway.storage-read-record-count</mat-label>
               <input type="number" matInput formControlName="read_records_count"/>
@@ -285,7 +285,7 @@
             </mat-form-field>
           </section>
           <section *ngSwitchCase="StorageTypes.FILE">
-            <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
               <mat-form-field appearance="outline" class="flex">
                 <mat-label translate>gateway.storage-data-folder-path</mat-label>
                 <input matInput formControlName="data_folder_path"/>
@@ -315,7 +315,7 @@
                 </mat-icon>
               </mat-form-field>
             </div>
-            <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
               <mat-form-field appearance="outline" class="flex">
                 <mat-label translate>gateway.storage-max-read-record-count</mat-label>
                 <input matInput type="number" formControlName="max_read_records_count"/>
@@ -351,7 +351,7 @@
             </div>
           </section>
           <section *ngSwitchCase="StorageTypes.SQLITE">
-            <div class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+            <div class="tb-form-row no-border no-padding tb-standard-fields column-xs">
               <mat-form-field appearance="outline" class="flex">
                 <mat-label translate>gateway.storage-path</mat-label>
                 <input matInput formControlName="data_file_path"/>
@@ -413,7 +413,7 @@
           </mat-slide-toggle>
         </div>
         <section>
-          <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
             <mat-form-field appearance="outline" class="flex">
               <mat-label translate>gateway.server-port</mat-label>
               <input matInput formControlName="serverPort" type="number" min="0"/>
@@ -450,7 +450,7 @@
               </mat-error>
             </mat-form-field>
           </section>
-          <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
             <mat-form-field appearance="outline" class="flex">
               <mat-label translate>gateway.grpc-keep-alive</mat-label>
               <input matInput formControlName="keepAliveTimeMs" type="number" min="0"/>
@@ -484,7 +484,7 @@
               </mat-error>
             </mat-form-field>
           </section>
-          <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+          <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
             <mat-form-field appearance="outline" class="flex">
               <mat-label translate>gateway.grpc-max-pings-without-data</mat-label>
               <input matInput formControlName="maxPingsWithoutData" type="number" min="0"/>
@@ -552,7 +552,7 @@
           <div fxLayout="row" formArrayName="commands" class="statistics-container"
                *ngFor="let commandControl of commandFormArray().controls; let $index = index">
             <section [formGroupName]="$index" class="tb-form-panel stroked no-padding-bottom no-gap command-container">
-              <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+              <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
                 <mat-form-field appearance="outline" class="flex">
                   <mat-label translate>gateway.statistics.attribute-name</mat-label>
                   <input matInput formControlName="attributeOnGateway"/>
@@ -619,7 +619,7 @@
             {{ 'gateway.checking-device-activity'  | translate }}
           </mat-slide-toggle>
         </div>
-        <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs"
+        <section class="tb-form-row no-border no-padding tb-standard-fields column-xs"
                  *ngIf="gatewayConfigGroup.get('thingsboard.checkingDeviceActivity.checkDeviceInactivity').value">
           <mat-form-field appearance="outline" class="flex">
             <mat-label translate>gateway.inactivity-timeout-seconds</mat-label>
@@ -655,7 +655,7 @@
       </div>
       <div class="tb-form-panel no-padding-bottom">
         <div class="tb-form-panel-title" translate>gateway.advanced</div>
-        <section class="tb-form-row no-border no-padding tb-not-inline-field column-xs">
+        <section class="tb-form-row no-border no-padding tb-standard-fields column-xs">
           <mat-form-field appearance="outline" class="flex">
             <mat-label translate>gateway.min-pack-send-delay</mat-label>
             <input matInput formControlName="minPackSendDelayMS" type="number" min="0"/>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
index 4debb6a62f..0c21261091 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/gateway/gateway-connectors.component.html
@@ -143,7 +143,7 @@
   </section>
   <section [formGroup]="connectorForm" class="tb-form-panel no-border no-padding flex">
     <section class="tb-form-panel input-container section-container">
-      <section class="tb-form-row tb-not-inline-field no-padding no-border column-lt-md input-container">
+      <section class="tb-form-row tb-standard-fields no-padding no-border column-lt-md input-container">
         <mat-form-field class="flex" subscriptSizing="dynamic">
           <mat-label>{{ 'gateway.connectors-table-name' | translate }}</mat-label>
           <input matInput formControlName="name" #nameInput/>
diff --git a/ui-ngx/src/app/shared/components/file-input.component.html b/ui-ngx/src/app/shared/components/file-input.component.html
index c0c004d02c..398f78451d 100644
--- a/ui-ngx/src/app/shared/components/file-input.component.html
+++ b/ui-ngx/src/app/shared/components/file-input.component.html
@@ -16,14 +16,11 @@
 
 -->
 <div class="tb-container">
-  <ng-container *ngIf="hint; else title">
-    <label class="tb-title pointer-event" [class.tb-required]="!disabled && required"
-           tb-hint-tooltip-icon="{{ hint }}">{{ label }}
-    </label>
-  </ng-container>
-  <ng-template #title>
-    <label class="tb-title" [class.tb-required]="!disabled && required">{{ label }}</label>
-  </ng-template>
+  <label class="tb-title"
+         [class.tb-required]="!disabled && required"
+         [class.pointer-event]="hint"
+         tb-hint-tooltip-icon="{{ hint }}">{{ label }}
+  </label>
   <ng-container #flow="flow"
                 [flowConfig]="{allowDuplicateUploads: true}">
     <div class="tb-file-select-container">
diff --git a/ui-ngx/src/app/shared/components/file-input.component.scss b/ui-ngx/src/app/shared/components/file-input.component.scss
index 45ed704336..e172abd6e9 100644
--- a/ui-ngx/src/app/shared/components/file-input.component.scss
+++ b/ui-ngx/src/app/shared/components/file-input.component.scss
@@ -22,10 +22,8 @@ $previewSize: 100px !default;
   .tb-container {
     margin-top: 0;
     label.tb-title {
+      display: flex;
       padding-bottom: 8px;
-      &:not(.pointer-event) {
-        display: block;
-      }
     }
   }
 
diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
index 7fff74a55e..63feb714d6 100644
--- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
+++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html
@@ -17,5 +17,6 @@
 -->
 <ng-content></ng-content>
 <tb-icon class="tb-hint-tooltip-icon tb-mat-18"
-          matTooltip="{{ tooltipText }}"
-          [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
+         *ngIf="tooltipText"
+         matTooltip="{{ tooltipText }}"
+         [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>
diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
index 4febf04f15..80e36d117d 100644
--- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
+++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss
@@ -13,12 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-:host {
+:host(.tb-hint-tooltip) {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
+}
 
+:host {
   .tb-hint-tooltip-icon {
     color: #E0E0E0;
     overflow: visible;
diff --git a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts
index 2d6ee282c1..dde6dc98e8 100644
--- a/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts
+++ b/ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts
@@ -14,7 +14,7 @@
 /// limitations under the License.
 ///
 
-import { Component, Input } from '@angular/core';
+import { Component, HostBinding, Input } from '@angular/core';
 import { TooltipPosition } from '@angular/material/tooltip';
 
 @Component({
@@ -24,6 +24,7 @@ import { TooltipPosition } from '@angular/material/tooltip';
 })
 export class HintTooltipIconComponent {
 
+  @HostBinding('class.tb-hint-tooltip')
   @Input('tb-hint-tooltip-icon') tooltipText: string;
 
   @Input()
diff --git a/ui-ngx/src/form.scss b/ui-ngx/src/form.scss
index 63f126f405..77a31eeb2e 100644
--- a/ui-ngx/src/form.scss
+++ b/ui-ngx/src/form.scss
@@ -221,7 +221,7 @@
     }
   }
 
-  .tb-form-row:not(.tb-not-inline-field) .mat-mdc-form-field, .mat-mdc-form-field.tb-inline-field {
+  .tb-form-row:not(.tb-standard-fields) .mat-mdc-form-field:not(.tb-not-inline-field), .mat-mdc-form-field.tb-inline-field {
     &.mat-form-field-appearance-fill {
       .mdc-text-field--filled:not(.mdc-text-field--disabled) {
         &:before {