From ec84c9cf5159bbcca00beacb5488a6da3788a87f Mon Sep 17 00:00:00 2001
From: Vladyslav_Prykhodko <vprykhodko@thingsboard.io>
Date: Wed, 10 Nov 2021 13:02:15 +0200
Subject: [PATCH] UI: Fixed json attribute widget - showed two errors at the
 same time.

---
 .../lib/json-input-widget.component.html      | 17 ++-----
 .../lib/json-input-widget.component.scss      |  1 -
 .../widget/lib/json-input-widget.component.ts | 44 ++++++++-----------
 3 files changed, 23 insertions(+), 39 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
index 81c06fe0f7..3c9cc99eca 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.html
@@ -22,7 +22,7 @@
         class="tb-json-input__form"
         [formGroup]="attributeUpdateFormGroup"
         (ngSubmit)="save()">
-      <div fxLayout="column" fxLayoutGap="10px" fxFlex *ngIf="entityDetected && isValidParameter && dataKeyDetected">
+      <div fxLayout="column" fxLayoutGap="10px" fxFlex *ngIf="datasourceDetected && !errorMessage; else errorContainer">
         <fieldset fxFlex>
           <tb-json-object-edit
             [editorStyle]="{minHeight: '100px'}"
@@ -51,19 +51,10 @@
         </div>
       </div>
 
-    <div fxLayout="column" fxLayoutAlign="center center" fxFlex *ngIf="!entityDetected || !dataKeyDetected || !isValidParameter">
-      <div class="tb-json-input__error"
-           *ngIf="!entityDetected">
-        {{ 'widgets.input-widgets.no-entity-selected' | translate }}
-      </div>
-      <div class="tb-json-input__error"
-           *ngIf="entityDetected && !dataKeyDetected">
-        {{ 'widgets.input-widgets.no-datakey-selected' | translate }}
-      </div>
-      <div class="tb-json-input__error"
-           *ngIf="dataKeyDetected && !isValidParameter">
+    <ng-template #errorContainer>
+      <div class="tb-json-input__error" fxLayout="column" fxLayoutAlign="center center" fxFlex>
         {{ errorMessage | translate }}
       </div>
-    </div>
+    </ng-template>
   </form>
 </div>
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.scss b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.scss
index f097de5afb..217c91dc4a 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.scss
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.scss
@@ -25,7 +25,6 @@
   }
 
   &__error {
-    text-align: center;
     font-size: 18px;
     color: #a0a0a0;
   }
diff --git a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.ts b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.ts
index ce174fcde0..9fcf4c13bd 100644
--- a/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.ts
+++ b/ui-ngx/src/app/modules/home/components/widget/lib/json-input-widget.component.ts
@@ -28,7 +28,7 @@ import { AttributeService } from '@core/http/attribute.service';
 import { AttributeData, AttributeScope, DataKeyType, LatestTelemetry } from '@shared/models/telemetry/telemetry.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { EntityType } from '@shared/models/entity-type.models';
-import { createLabelFromDatasource } from '@core/utils';
+import { createLabelFromDatasource, isDefinedAndNotNull } from '@core/utils';
 import { Observable } from 'rxjs';
 
 enum JsonInputWidgetMode {
@@ -63,9 +63,7 @@ export class JsonInputWidgetComponent extends PageComponent implements OnInit {
 
   labelValue: string;
 
-  entityDetected = false;
-  dataKeyDetected = false;
-  isValidParameter = false;
+  datasourceDetected = false;
   errorMessage: string;
 
   isFocused: boolean;
@@ -111,30 +109,26 @@ export class JsonInputWidgetComponent extends PageComponent implements OnInit {
   }
 
   private validateDatasources() {
-    if (this.datasource?.type === DatasourceType.entity) {
-      this.entityDetected = true;
-      if (this.datasource.dataKeys.length) {
-        this.dataKeyDetected = true;
-
-        if (this.settings.widgetMode === JsonInputWidgetMode.ATTRIBUTE) {
-          if (this.datasource.dataKeys[0].type === DataKeyType.attribute) {
-            if (this.settings.attributeScope === AttributeScope.SERVER_SCOPE || this.datasource.entityType === EntityType.DEVICE) {
-              this.isValidParameter = true;
-            } else {
-              this.errorMessage = 'widgets.input-widgets.not-allowed-entity';
-            }
-          } else {
-            this.errorMessage = 'widgets.input-widgets.no-attribute-selected';
+    this.datasourceDetected = isDefinedAndNotNull(this.datasource);
+    if (!this.datasourceDetected) {
+      return;
+    }
+    if (this.datasource.type === DatasourceType.entity) {
+      if (this.settings.widgetMode === JsonInputWidgetMode.ATTRIBUTE) {
+        if (this.datasource.dataKeys[0].type === DataKeyType.attribute) {
+          if (this.settings.attributeScope !== AttributeScope.SERVER_SCOPE && this.datasource.entityType !== EntityType.DEVICE) {
+            this.errorMessage = 'widgets.input-widgets.not-allowed-entity';
           }
         } else {
-          if (this.datasource.dataKeys[0].type === DataKeyType.timeseries) {
-            this.isValidParameter = true;
-          } else {
-            this.errorMessage = 'widgets.input-widgets.no-timeseries-selected';
-          }
+          this.errorMessage = 'widgets.input-widgets.no-attribute-selected';
+        }
+      } else {
+        if (this.datasource.dataKeys[0].type !== DataKeyType.timeseries) {
+          this.errorMessage = 'widgets.input-widgets.no-timeseries-selected';
         }
-
       }
+    } else {
+      this.errorMessage = 'widgets.input-widgets.no-entity-selected';
     }
   }
 
@@ -152,7 +146,7 @@ export class JsonInputWidgetComponent extends PageComponent implements OnInit {
   }
 
   private updateWidgetData(data: Array<DatasourceData>) {
-    if (this.isValidParameter) {
+    if (!this.errorMessage) {
       let value = {};
       if (data[0].data[0][1] !== '') {
         try {