UI: Implement hint tooltip icon. Update default units and decimals labels in widget config.

ui-ngx/src/app/modules/common/modules-map.ts

@@ -183,6 +183,7 @@ import * as ToggleSelectComponent from '@shared/components/toggle-select.compone
 import * as UnitInputComponent from '@shared/components/unit-input.component';
 import * as MaterialIconsComponent from '@shared/components/material-icons.component';
 import * as TbIconComponent from '@shared/components/icon.component';
+import * as HintTooltipIconComponent from '@shared/components/hint-tooltip-icon.component';
 
 import * as AddEntityDialogComponent from '@home/components/entity/add-entity-dialog.component';
 import * as EntitiesTableComponent from '@home/components/entity/entities-table.component';
@@ -486,6 +487,7 @@ class ModulesMap implements IModulesMap {
     '@shared/components/unit-input.component': UnitInputComponent,
     '@shared/components/material-icons.component': MaterialIconsComponent,
     '@shared/components/icon.component': TbIconComponent,
+    '@shared/components/hint-tooltip-icon.component': HintTooltipIconComponent,
 
     '@home/components/entity/add-entity-dialog.component': AddEntityDialogComponent,
     '@home/components/entity/entities-table.component': EntitiesTableComponent,

ui-ngx/src/app/modules/home/components/widget/widget-config.component.html

@@ -275,14 +275,14 @@
   <ng-template #appearance>
     <div *ngIf="displayAppearanceDataSettings" class="tb-form-panel" [formGroup]="widgetSettings">
       <div class="tb-form-panel-title" translate>widget-config.data-settings</div>
-      <div *ngIf="displayUnitsConfig" class="tb-form-row space-between column-xs">
+      <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
-        <div translate>widget-config.units</div>
+        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.units-by-default</div>
         <tb-unit-input
           formControlName="units">
         </tb-unit-input>
       </div>
-      <div *ngIf="displayUnitsConfig" class="tb-form-row space-between column-xs">
+      <div *ngIf="displayUnitsConfig" class="tb-form-row space-between">
-        <div translate>widget-config.decimals</div>
+        <div tb-hint-tooltip-icon="{{'widget-config.default-data-key-parameter-hint' | translate}}" translate>widget-config.decimals-by-default</div>
         <mat-form-field appearance="outline" class="number" subscriptSizing="dynamic">
           <input matInput formControlName="decimals" type="number" min="0" max="15" step="1" placeholder="{{ 'widget-config.set' | translate }}">
         </mat-form-field>

ui-ngx/src/app/shared/components/help-popup.component.ts

@@ -31,7 +31,6 @@ import { isDefinedAndNotNull } from '@core/utils';
 import { coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
   selector: '[tb-help-popup], [tb-help-popup-content]',
   templateUrl: './help-popup.component.html',
   styleUrls: ['./help-popup.component.scss'],
@@ -42,10 +41,8 @@ export class HelpPopupComponent implements OnChanges, OnDestroy {
   @ViewChild('toggleHelpButton', {read: ElementRef, static: false}) toggleHelpButton: ElementRef;
   @ViewChild('toggleHelpTextButton', {read: ElementRef, static: false}) toggleHelpTextButton: ElementRef;
 
-  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('tb-help-popup') helpId: string;
 
-  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('tb-help-popup-content') helpContent: string;
 
   // eslint-disable-next-line @angular-eslint/no-input-rename

ui-ngx/src/app/shared/components/help.component.ts

@@ -18,13 +18,11 @@ import { Component, Input } from '@angular/core';
 import { HelpLinks } from '@shared/models/constants';
 
 @Component({
-  // eslint-disable-next-line @angular-eslint/component-selector
   selector: '[tb-help]',
   templateUrl: './help.component.html'
 })
 export class HelpComponent {
 
-  // eslint-disable-next-line @angular-eslint/no-input-rename
   @Input('tb-help') helpLinkId: string;
 
   gotoHelpPage(): void {

ui-ngx/src/app/shared/components/hint-tooltip-icon.component.html

@@ -0,0 +1,21 @@
+<!--
+
+    Copyright © 2016-2023 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.
+
+-->
+<ng-content></ng-content>
+<tb-icon class="tb-hint-tooltip-icon tb-mat-18"
+          matTooltip="{{ tooltipText }}"
+          [matTooltipPosition]="tooltipPosition">{{ hintIcon }}</tb-icon>

ui-ngx/src/app/shared/components/hint-tooltip-icon.component.scss

@@ -0,0 +1,29 @@
+/**
+ * Copyright © 2016-2023 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 {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 8px;
+
+  .tb-hint-tooltip-icon {
+    color: #E0E0E0;
+    overflow: visible;
+    &:hover {
+      color: #9E9E9E;
+    }
+  }
+}

ui-ngx/src/app/shared/components/hint-tooltip-icon.component.ts

@@ -0,0 +1,35 @@
+///
+/// Copyright © 2016-2023 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, Input } from '@angular/core';
+import { TooltipPosition } from '@angular/material/tooltip';
+
+@Component({
+  selector: '[tb-hint-tooltip-icon]',
+  templateUrl: './hint-tooltip-icon.component.html',
+  styleUrls: ['./hint-tooltip-icon.component.scss']
+})
+export class HintTooltipIconComponent {
+
+  @Input('tb-hint-tooltip-icon') tooltipText: string;
+
+  @Input()
+  tooltipPosition: TooltipPosition = 'right';
+
+  @Input()
+  hintIcon = 'info';
+
+}

ui-ngx/src/app/shared/components/public-api.ts

@@ -28,3 +28,4 @@ export * from './toggle-select.component';
 export * from './unit-input.component';
 export * from './material-icons.component';
 export * from './icon.component';
+export * from './hint-tooltip-icon.component';

ui-ngx/src/app/shared/shared.module.ts

@@ -198,6 +198,7 @@ import { UnitInputComponent } from '@shared/components/unit-input.component';
 import { MaterialIconsComponent } from '@shared/components/material-icons.component';
 import { ColorPickerPanelComponent } from '@shared/components/color-picker/color-picker-panel.component';
 import { TbIconComponent } from '@shared/components/icon.component';
+import { HintTooltipIconComponent } from '@shared/components/hint-tooltip-icon.component';
 
 export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService) {
   return markedOptionsService;
@@ -375,7 +376,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     UnitInputComponent,
     MaterialIconsComponent,
     RuleChainSelectComponent,
-    TbIconComponent
+    TbIconComponent,
+    HintTooltipIconComponent
   ],
   imports: [
     CommonModule,
@@ -609,7 +611,8 @@ export function MarkedOptionsFactory(markedOptionsService: MarkedOptionsService)
     UnitInputComponent,
     MaterialIconsComponent,
     RuleChainSelectComponent,
-    TbIconComponent
+    TbIconComponent,
+    HintTooltipIconComponent
   ]
 })
 export class SharedModule { }

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

@@ -4721,7 +4721,10 @@
         "mobile-hide": "Hide widget in mobile mode",
         "desktop-hide": "Hide widget in desktop mode",
         "units": "Special symbol to show next to value",
+        "units-by-default": "Units by default",
         "decimals": "Number of digits after floating point",
+        "decimals-by-default": "Decimals by default",
+        "default-data-key-parameter-hint": "This parameter applies to all widget values unless overridden by data key configuration",
         "units-short": "Units",
         "decimals-short": "Decimals",
         "decimals-suffix": "decimals",