Add dashboard state widget. Improve dashboard state component configuration. Fix markdown widget rendering when no datasource specified.

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.html

@@ -15,7 +15,7 @@
     limitations under the License.
 
 -->
-<tb-dashboard-page
+<tb-dashboard-page *ngIf="stateExists"
   [embedded]="true"
   [syncStateWithQueryParam]="false"
   [hideToolbar]="true"
@@ -23,3 +23,6 @@
   [dashboard]="dashboard"
   [parentDashboard]="parentDashboard">
 </tb-dashboard-page>
+<div class="tb-absolute-fill tb-widget-error" *ngIf="!stateExists">
+  <span>{{ 'dashboard.non-existent-dashboard-state-error' | translate:{stateId} }}</span>
+</div>

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.scss

@@ -0,0 +1,22 @@
+/**
+ * Copyright © 2016-2021 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 {
+  position: relative;
+  display: block;
+  width: 100%;
+  height: 100%;
+}

ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-state.component.ts

@@ -14,14 +14,14 @@
 /// limitations under the License.
 ///
 
-import { ChangeDetectorRef, Component, Input, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, HostBinding, Input, OnDestroy, OnInit } from '@angular/core';
 import { PageComponent } from '@shared/components/page.component';
 import { Store } from '@ngrx/store';
 import { AppState } from '@core/core.state';
-import { Dashboard } from '@shared/models/dashboard.models';
+import { Dashboard, DashboardLayoutId } from '@shared/models/dashboard.models';
 import { StateObject } from '@core/api/widget-api.models';
 import { updateEntityParams, WidgetContext } from '@home/models/widget-component.models';
-import { deepClone, objToBase64 } from '@core/utils';
+import { deepClone, isDefinedAndNotNull, isNotEmptyStr, objToBase64 } from '@core/utils';
 import { IDashboardComponent } from '@home/models/dashboard-component.models';
 import { EntityId } from '@shared/models/id/entity-id';
 import { Subscription } from 'rxjs';
@@ -29,7 +29,7 @@ import { Subscription } from 'rxjs';
 @Component({
   selector: 'tb-dashboard-state',
   templateUrl: './dashboard-state.component.html',
-  styleUrls: []
+  styleUrls: ['./dashboard-state.component.scss']
 })
 export class DashboardStateComponent extends PageComponent implements OnInit, OnDestroy {
 
@@ -42,6 +42,15 @@ export class DashboardStateComponent extends PageComponent implements OnInit, On
   @Input()
   syncParentStateParams = false;
 
+  @Input()
+  defaultAutofillLayout = true;
+
+  @Input()
+  defaultMargin;
+
+  @Input()
+  defaultBackgroundColor;
+
   @Input()
   entityParamName: string;
 
@@ -54,6 +63,8 @@ export class DashboardStateComponent extends PageComponent implements OnInit, On
 
   parentDashboard: IDashboardComponent;
 
+  stateExists = true;
+
   private stateSubscription: Subscription;
 
   constructor(protected store: Store<AppState>,
@@ -63,14 +74,31 @@ export class DashboardStateComponent extends PageComponent implements OnInit, On
 
   ngOnInit(): void {
     this.dashboard = deepClone(this.ctx.stateController.dashboardCtrl.dashboardCtx.getDashboard());
-    this.updateCurrentState();
+    const state = this.dashboard.configuration.states[this.stateId];
-    this.parentDashboard = this.ctx.parentDashboard ?
+    if (state) {
-      this.ctx.parentDashboard : this.ctx.dashboard;
+      for (const layoutId of Object.keys(state.layouts)) {
-    if (this.syncParentStateParams) {
+        if (this.defaultAutofillLayout) {
-      this.stateSubscription = this.ctx.stateController.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => {
+          state.layouts[layoutId as DashboardLayoutId].gridSettings.autoFillHeight = true;
-        this.updateCurrentState();
+          state.layouts[layoutId as DashboardLayoutId].gridSettings.mobileAutoFillHeight = true;
-        this.cd.markForCheck();
+        }
-      });
+        if (isDefinedAndNotNull(this.defaultMargin)) {
+          state.layouts[layoutId as DashboardLayoutId].gridSettings.margin = this.defaultMargin;
+        }
+        if (isNotEmptyStr(this.defaultBackgroundColor)) {
+          state.layouts[layoutId as DashboardLayoutId].gridSettings.backgroundColor = this.defaultBackgroundColor;
+        }
+      }
+      this.updateCurrentState();
+      this.parentDashboard = this.ctx.parentDashboard ?
+        this.ctx.parentDashboard : this.ctx.dashboard;
+      if (this.syncParentStateParams) {
+        this.stateSubscription = this.ctx.stateController.dashboardCtrl.dashboardCtx.stateChanged.subscribe(() => {
+          this.updateCurrentState();
+          this.cd.markForCheck();
+        });
+      }
+    } else {
+      this.stateExists = false;
     }
   }
 

ui-ngx/src/app/modules/home/components/widget/lib/markdown-widget.component.ts

@@ -88,7 +88,11 @@ export class MarkdownWidgetComponent extends PageComponent implements OnInit {
       textSearch: null,
       dynamic: true
     };
-    this.ctx.defaultSubscription.subscribeAllForPaginatedData(pageLink, null);
+    if (this.ctx.widgetConfig.datasources.length) {
+      this.ctx.defaultSubscription.subscribeAllForPaginatedData(pageLink, null);
+    } else {
+      this.onDataUpdated();
+    }
   }
 
   public onDataUpdated() {

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

@@ -867,7 +867,8 @@
         "unassign-dashboards-from-edge-title": "Are you sure you want to unassign { count, plural, 1 {1 dashboard} other {# dashboards} }?",
         "unassign-dashboards-from-edge-text": "After the confirmation all selected dashboards will be unassigned and won't be accessible by the edge.",
         "assign-dashboard-to-edge": "Assign Dashboard(s) To Edge",
-        "assign-dashboard-to-edge-text": "Please select the dashboards to assign to the edge"
+        "assign-dashboard-to-edge-text": "Please select the dashboards to assign to the edge",
+        "non-existent-dashboard-state-error": "Dashboard state with id \"{{ stateId }}\" is not found"
     },
     "datakey": {
         "settings": "Settings",