UI: Change check connectivity dialog title and fix state

ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.html

@@ -16,7 +16,7 @@
 
 -->
 <mat-toolbar color="primary">
-  <h2 translate>device.connectivity.check-connectivity</h2>
+  <h2 translate>{{ dialogTitle }}</h2>
   <span fxFlex></span>
 <!--  <div [tb-help]="'check-connectivity'"></div>-->
   <button mat-icon-button
@@ -181,7 +181,7 @@
     <div class="tb-form-panel stroked">
       <div fxFlex fxLayout="row">
         <div class="tb-form-panel-title" translate>device.state</div>
-        <div class="status" [ngClass]="{'inactive': !status}">
+        <div class="status" [ngClass]="{'inactive': !status, 'hide': status === undefined}">
           {{ (status ? 'device.active' : 'device.inactive') | translate }}
         </div>
       </div>
@@ -208,7 +208,7 @@
   <span fxFlex></span>
   <button mat-button
           [disabled]="(isLoading$ | async)"
-          (click)="close()">{{ 'action.cancel' | translate }}</button>
+          (click)="close()">{{ closeButtonLabel | translate }}</button>
 </div>
 <ng-template #loadingCommand>
   <div class="tb-loader">

ui-ngx/src/app/modules/home/pages/device/device-check-connectivity-dialog.component.ts

@@ -42,10 +42,11 @@ import {
 } from '@shared/models/device.models';
 import { UserSettingsService } from '@core/http/user-settings.service';
 import { ActionPreferencesUpdateUserSettings } from '@core/auth/auth.actions';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
 
 export interface DeviceCheckConnectivityDialogData {
   deviceId: EntityId;
-  showDontShowAgain: boolean;
+  afterAdd: boolean;
 }
 @Component({
   selector: 'tb-device-check-connectivity-dialog',
@@ -70,7 +71,9 @@ export class DeviceCheckConnectivityDialogComponent extends
   DeviceTransportType = DeviceTransportType;
   deviceTransportTypeTranslationMap = deviceTransportTypeTranslationMap;
 
-  showDontShowAgain = this.data.showDontShowAgain;
+  showDontShowAgain: boolean;
+  dialogTitle: string;
+  closeButtonLabel: string;
 
   notShowAgain = false;
 
@@ -90,6 +93,16 @@ export class DeviceCheckConnectivityDialogComponent extends
               private userSettingsService: UserSettingsService,
               private zone: NgZone) {
     super(store, router, dialogRef);
+
+    if (this.data.afterAdd) {
+      this.dialogTitle = 'device.connectivity.device-created-check-connectivity';
+      this.closeButtonLabel = 'action.skip';
+      this.showDontShowAgain = true;
+    } else {
+      this.dialogTitle = 'device.connectivity.check-connectivity';
+      this.closeButtonLabel = 'action.close';
+      this.showDontShowAgain = false;
+    }
   }
 
   ngOnInit() {
@@ -156,7 +169,7 @@ export class DeviceCheckConnectivityDialogComponent extends
         (data) => {
           this.latestTelemetry = data.reduce<Array<AttributeData>>((accumulator, item) => {
             if (item.key === 'active') {
-              this.status = item.value;
+              this.status = coerceBooleanProperty(item.value);
             } else if (item.lastUpdateTs > this.currentTime) {
               accumulator.push(item);
             }

ui-ngx/src/app/modules/home/pages/device/devices-table-config.resolver.ts

@@ -720,7 +720,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
     );
   }
 
-  checkConnectivity($event: Event, deviceId: EntityId, showDontShowAgain = false) {
+  checkConnectivity($event: Event, deviceId: EntityId, afterAdd = false) {
     if ($event) {
       $event.stopPropagation();
     }
@@ -730,7 +730,7 @@ export class DevicesTableConfigResolver implements Resolve<EntityTableConfig<Dev
         panelClass: ['tb-dialog', 'tb-fullscreen-dialog'],
         data: {
           deviceId,
-          showDontShowAgain
+          afterAdd
         }
       })
       .afterClosed()

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

@@ -1386,6 +1386,7 @@
         "time": "Time",
         "connectivity": {
             "check-connectivity": "Check connectivity",
+            "device-created-check-connectivity": "Device created. Let's check connectivity!",
             "loading-check-connectivity-command": "Loading check connectivity commands...",
             "use-following-instructions": "Use the following instructions for sending telemetry on behalf of the device using shell",
             "install-curl": "Install cURL tool.",