Dashboard save fail indication (getredash#3715)

client/app/assets/less/redash/redash-newstyle.less

@@ -937,8 +937,4 @@ text.slicetext {
 
 .markdown strong {
   font-weight: bold;
-}
-
-.disabled-silent {
-  pointer-events: none;
 }

client/app/pages/dashboards/dashboard.html

@@ -15,16 +15,29 @@ <h3>
     </div>
     <div class="col-xs-4 col-sm-5 col-lg-5 text-right dashboard__control p-r-0">
       <span ng-if="!$ctrl.dashboard.is_archived && !public" class="hidden-print">
-          <div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty || $ctrl.saveInProgress">
-            <span class="save-status" data-saving ng-switch-when="true">Saving</span>
-            <span class="save-status" ng-switch-default>Saved</span>
-
-            <button type="button" class="btn btn-primary btn-sm"
-              ng-disabled="$ctrl.isGridDisabled"
-              ng-click="$ctrl.editLayout(false)"
-              ng-class="{'disabled-silent': $ctrl.isLayoutDirty || $ctrl.saveInProgress }">
-              <i class="fa fa-check"></i> Done Editing
-            </button>
+          <div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty">
+            <span ng-switch-when="true" ng-switch="$ctrl.saveInProgress || $ctrl.saveDelay">
+                <span ng-switch-when="true">
+                  <span class="save-status" data-saving>Saving</span>
+                  <button class="btn btn-primary btn-sm" ng-disabled="$ctrl.editBtnClickedWhileSaving" ng-click="$ctrl.editBtnClickedWhileSaving = true">
+                    <i class="fa fa-check" ng-class="{'fa-spinner fa-pulse': $ctrl.editBtnClickedWhileSaving}"></i> Done Editing
+                  </button>
+                </span>
+                <span ng-switch-default>
+                  <span class="save-status" data-error>Saving Failed</span>
+                  <button class="btn btn-primary btn-sm" ng-click="$ctrl.saveDashboardLayout()">
+                    Retry
+                  </button>
+                </span>
+            </span>
+            <span ng-switch-default>
+              <span class="save-status">Saved</span>
+              <button class="btn btn-primary btn-sm"
+                ng-disabled="$ctrl.isGridDisabled"
+                ng-click="$ctrl.editLayout(false)">
+                <i class="fa fa-check"></i> Done Editing
+              </button>
+            </span>
           </div>
 
           <button type="button" class="btn btn-default btn-sm" ng-click="$ctrl.togglePublished()" tooltip="Publish Dashboard" ng-if="$ctrl.dashboard.is_draft && !$ctrl.layoutEditing">

client/app/pages/dashboards/dashboard.js

@@ -47,12 +47,15 @@ function DashboardCtrl(
   Events,
 ) {
   this.saveInProgress = false;
+  this.saveDelay = false;
 
-  const saveDashboardLayout = () => {
+  this.saveDashboardLayout = () => {
     if (!this.dashboard.canEdit()) {
       return;
     }
 
+    this.isLayoutDirty = true;
+
     // calc diff, bail if none
     const changedWidgets = getWidgetsWithChangedPositions(this.dashboard.widgets);
     if (!changedWidgets.length) {
@@ -61,11 +64,15 @@ function DashboardCtrl(
       return;
     }
 
+    this.saveDelay = false;
     this.saveInProgress = true;
     return $q
       .all(_.map(changedWidgets, widget => widget.save()))
       .then(() => {
         this.isLayoutDirty = false;
+        if (this.editBtnClickedWhileSaving) {
+          this.layoutEditing = false;
+        }
       })
       .catch(() => {
         // in the off-chance that a widget got deleted mid-saving it's position, an error will occur
@@ -74,11 +81,17 @@ function DashboardCtrl(
       })
       .finally(() => {
         this.saveInProgress = false;
+        this.editBtnClickedWhileSaving = false;
       });
   };
 
-  const saveDashboardLayoutDebounced = _.debounce(saveDashboardLayout, 2000);
+  const saveDashboardLayoutDebounced = () => {
+    this.saveDelay = true;
+    return _.debounce(() => this.saveDashboardLayout(), 2000)();
+  };
 
+  this.saveDelay = false;
+  this.editBtnClickedWhileSaving = false;
   this.layoutEditing = false;
   this.isFullscreen = false;
   this.refreshRate = null;
@@ -402,7 +415,7 @@ function DashboardCtrl(
 
     if (!this.layoutEditing) {
       // We need to wait a bit while `angular` updates widgets, and only then save new layout
-      $timeout(saveDashboardLayout, 50);
+      $timeout(() => this.saveDashboardLayout(), 50);
     }
   };
 

client/app/pages/dashboards/dashboard.less

@@ -129,6 +129,10 @@
         animation: saving 2s linear infinite;
       }
     }
+
+    &[data-error] {
+      color: #F44336;
+    }
   }
 }