From e7697012b1231dea5afd1e857ac6a12e92a0c487 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Wed, 17 Apr 2019 10:09:08 +0300
Subject: [PATCH 1/4] Dashboard save fail indication

---
 client/app/pages/dashboards/dashboard.html | 33 +++++++++++++++-------
 client/app/pages/dashboards/dashboard.js   | 13 +++++++--
 client/app/pages/dashboards/dashboard.less |  4 +++
 3 files changed, 37 insertions(+), 13 deletions(-)

diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
index cc987db29b..34f3d0202c 100644
--- a/client/app/pages/dashboards/dashboard.html
+++ b/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">
+                    <i class="fa fa-check"></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">
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
index 1bf7424bff..a0841dabd6 100644
--- a/client/app/pages/dashboards/dashboard.js
+++ b/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,6 +64,7 @@ function DashboardCtrl(
       return;
     }
 
+    this.saveDelay = false;
     this.saveInProgress = true;
     return $q
       .all(_.map(changedWidgets, widget => widget.save()))
@@ -77,7 +81,10 @@ function DashboardCtrl(
       });
   };
 
-  const saveDashboardLayoutDebounced = _.debounce(saveDashboardLayout, 2000);
+  const saveDashboardLayoutDebounced = () => {
+    this.saveDelay = true;
+    return _.debounce(() => this.saveDashboardLayout(), 2000)();
+  };
 
   this.layoutEditing = false;
   this.isFullscreen = false;
@@ -402,7 +409,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);
     }
   };
 
diff --git a/client/app/pages/dashboards/dashboard.less b/client/app/pages/dashboards/dashboard.less
index a2a469c917..42a429e6bd 100644
--- a/client/app/pages/dashboards/dashboard.less
+++ b/client/app/pages/dashboards/dashboard.less
@@ -129,6 +129,10 @@
         animation: saving 2s linear infinite;
       }
     }
+
+    &[data-error] {
+      color: #F44336;
+    }
   }
 }
 

From 8961c56932747b22da0a21b00448198a9dc15adf Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Thu, 18 Apr 2019 18:54:30 +0300
Subject: [PATCH 2/4] Added button loading state

---
 client/app/pages/dashboards/dashboard.html | 4 ++--
 client/app/pages/dashboards/dashboard.js   | 3 +++
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
index 34f3d0202c..6c91a8e631 100644
--- a/client/app/pages/dashboards/dashboard.html
+++ b/client/app/pages/dashboards/dashboard.html
@@ -19,8 +19,8 @@ <h3>
             <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">
-                    <i class="fa fa-check"></i> Done Editing
+                  <button class="btn btn-primary btn-sm" ng-disabled="$ctrl.showSaveButtonProgress"  ng-click="$ctrl.showSaveButtonProgress = true">
+                    <i class="fa" ng-class="{'fa-check': !$ctrl.showSaveButtonProgress, 'fa-spinner fa-pulse': $ctrl.showSaveButtonProgress}"></i> Done Editing
                   </button>
                 </span>
                 <span ng-switch-default>
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
index a0841dabd6..3a159f1906 100644
--- a/client/app/pages/dashboards/dashboard.js
+++ b/client/app/pages/dashboards/dashboard.js
@@ -78,6 +78,7 @@ function DashboardCtrl(
       })
       .finally(() => {
         this.saveInProgress = false;
+        this.showSaveButtonProgress = false;
       });
   };
 
@@ -86,6 +87,8 @@ function DashboardCtrl(
     return _.debounce(() => this.saveDashboardLayout(), 2000)();
   };
 
+  this.saveDelay = false;
+  this.showSaveButtonProgress = false;
   this.layoutEditing = false;
   this.isFullscreen = false;
   this.refreshRate = null;

From 201d4f9838e34a03ca9dae032429285b4fe413f6 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Fri, 19 Apr 2019 10:47:04 +0300
Subject: [PATCH 3/4] Change edit state when save completes

---
 client/app/pages/dashboards/dashboard.html | 4 ++--
 client/app/pages/dashboards/dashboard.js   | 7 +++++--
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/app/pages/dashboards/dashboard.html b/client/app/pages/dashboards/dashboard.html
index 6c91a8e631..46f3912e7c 100644
--- a/client/app/pages/dashboards/dashboard.html
+++ b/client/app/pages/dashboards/dashboard.html
@@ -19,8 +19,8 @@ <h3>
             <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.showSaveButtonProgress"  ng-click="$ctrl.showSaveButtonProgress = true">
-                    <i class="fa" ng-class="{'fa-check': !$ctrl.showSaveButtonProgress, 'fa-spinner fa-pulse': $ctrl.showSaveButtonProgress}"></i> Done Editing
+                  <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>
diff --git a/client/app/pages/dashboards/dashboard.js b/client/app/pages/dashboards/dashboard.js
index 3a159f1906..98dbacfad8 100644
--- a/client/app/pages/dashboards/dashboard.js
+++ b/client/app/pages/dashboards/dashboard.js
@@ -70,6 +70,9 @@ function DashboardCtrl(
       .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
@@ -78,7 +81,7 @@ function DashboardCtrl(
       })
       .finally(() => {
         this.saveInProgress = false;
-        this.showSaveButtonProgress = false;
+        this.editBtnClickedWhileSaving = false;
       });
   };
 
@@ -88,7 +91,7 @@ function DashboardCtrl(
   };
 
   this.saveDelay = false;
-  this.showSaveButtonProgress = false;
+  this.editBtnClickedWhileSaving = false;
   this.layoutEditing = false;
   this.isFullscreen = false;
   this.refreshRate = null;

From a9b6bcaa3a8793d45afb2ba0819590cce3359226 Mon Sep 17 00:00:00 2001
From: Ran Byron <ranbena@gmail.com>
Date: Fri, 19 Apr 2019 14:18:07 +0300
Subject: [PATCH 4/4] Removed unneeded css class

---
 client/app/assets/less/redash/redash-newstyle.less | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/client/app/assets/less/redash/redash-newstyle.less b/client/app/assets/less/redash/redash-newstyle.less
index 8808113960..28a0389568 100644
--- a/client/app/assets/less/redash/redash-newstyle.less
+++ b/client/app/assets/less/redash/redash-newstyle.less
@@ -937,8 +937,4 @@ text.slicetext {
 
 .markdown strong {
   font-weight: bold;
-}
-
-.disabled-silent {
-  pointer-events: none;
 }
\ No newline at end of file