From 68fc5b996bc9285ec1695ee235dd56aa29b457dd Mon Sep 17 00:00:00 2001
From: Igor Kulikov <ikulikov@thingsboard.io>
Date: Fri, 8 Oct 2021 10:12:53 +0300
Subject: [PATCH] Improve dashboard edit button appearence depending on
 multiple conditions.

---
 .../dashboard-page/dashboard-page.component.html     | 12 +++++-------
 .../dashboard-page/dashboard-page.component.ts       |  4 ++++
 2 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
index b0ff1d194c..a6d91d87ae 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.html
@@ -196,14 +196,13 @@
             </tb-dashboard-layout>
           </mat-drawer-content>
         </mat-drawer-container>
-        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end">
-          <tb-footer-fab-buttons *ngIf="!embedded && !isMobileApp"
-                                 [fxShow]="!isAddingWidget && isEdit && !widgetEditMode"
+        <section data-html2canvas-ignore fxLayout="row" class="layout-wrap tb-footer-buttons" fxLayoutAlign="start end"
+                 *ngIf="!readonly">
+          <tb-footer-fab-buttons [fxShow]="!isAddingWidget && isEdit && !widgetEditMode"
                                  relative
                                  [footerFabButtons]="addWidgetFabButtons">
           </tb-footer-fab-buttons>
-          <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen && !embedded && !isMobileApp"
-                  mat-fab color="accent" class="tb-btn-footer"
+          <button mat-fab color="accent" class="tb-btn-footer"
                   [ngClass]="{'tb-hide': !isEdit || isAddingWidget}"
                   [disabled]="isLoading$ | async"
                   (click)="saveDashboard()"
@@ -211,8 +210,7 @@
                   matTooltipPosition="above">
             <mat-icon>done</mat-icon>
           </button>
-          <button *ngIf="(isTenantAdmin() || isSystemAdmin()) && !forceFullscreen && !embedded && !isMobileApp"
-                  mat-fab color="accent" class="tb-btn-footer"
+          <button mat-fab color="accent" class="tb-btn-footer"
                   [ngClass]="{'tb-hide': isAddingWidget || (isLoading$ | async)}"
                   [disabled]="isLoading$ | async"
                   (click)="toggleDashboardEditMode()"
diff --git a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
index 568ff7d4e7..143b1743c7 100644
--- a/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
+++ b/ui-ngx/src/app/modules/home/components/dashboard-page/dashboard-page.component.ts
@@ -183,6 +183,7 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
   singlePageMode: boolean;
   forceFullscreen = this.authState.forceFullscreen;
 
+  readonly = false;
   isMobileApp = this.mobileService.isMobileApp();
   isFullscreen = false;
   isEdit = false;
@@ -403,6 +404,9 @@ export class DashboardPageComponent extends PageComponent implements IDashboardC
     this.widgetEditMode = data.widgetEditMode;
     this.singlePageMode = data.singlePageMode;
 
+    this.readonly = this.embedded || (this.singlePageMode && !this.widgetEditMode && !this.route.snapshot.queryParamMap.get('edit'))
+                    || this.forceFullscreen || this.isMobileApp || this.authUser.authority === Authority.CUSTOMER_USER;
+
     this.dashboardCtx.aliasController = new AliasController(this.utils,
       this.entityService,
       this.translate,