Dashboard auto-saving #3653
Dashboard auto-saving #3653
Conversation
| const changedWidgets = getWidgetsWithChangedPositions(this.dashboard.widgets); | ||
| saveDashboardLayout(changedWidgets); | ||
| }, 50); | ||
| $timeout(saveDashboardLayout, 50); |
There was a problem hiding this comment.
Moved the diffing into the debounced save.
|
@kravets-levko since widget deletion is immediate and not debounced, this scenario:
The |
|
@ranbena I think there should be a way to check if widget was removed, but probably it doesn't worth spending time on it. Maybe, just put a comment somewhere with notes about that case - we can re-visit it when migrating services/models from Angular. |
|
Made the "Done Editing" button disabled while saving. Not sure this is the best way to go about it. I'd rather make it disabled on hover but no simple way to do that. |
| ng-click="$ctrl.editLayout(false, true)" ng-if="$ctrl.layoutEditing"> | ||
| <i class="zmdi zmdi-check"></i> Apply Changes | ||
| </button> | ||
| <div ng-if="$ctrl.layoutEditing" ng-switch="$ctrl.isLayoutDirty || $ctrl.saveInProgress"> |
There was a problem hiding this comment.
Not an issue, but perhaps it would be interesting to have a "Failed to save" state as well. E.g.: When internet connection fails as the state would keep Dirty you would see a "Saving" state.
There was a problem hiding this comment.
That's a good point - in case of failure we would mislead the user.
I'll see if I have a quick and easy solution.
| if (!this.dashboard.canEdit()) { | ||
| return; | ||
| } | ||
|
|
||
| // calc diff, bail if none | ||
| const changedWidgets = getWidgetsWithChangedPositions(this.dashboard.widgets); | ||
| if (!changedWidgets.length) { |
There was a problem hiding this comment.
Lodash isEmpty is safer, no?
There was a problem hiding this comment.
In this case I know for sure it's gonna be an array.
What type of PR is this?
Description
UX discussion https://discuss.redash.io/t/auto-saving-dashboard-layout/3506
Demo https://deploy-preview-3653--redash-preview.netlify.com/dashboard/artists
Motivation
Currently when in dashboard edit mode, there are “Apply Changes” and “Cancel” buttons which are inconsistent (only apply to resize and drag - not to added / deleted widgets) and buggy (there is a scenario causing widget overlap).
The Change
Ditch cancellability and embrace auto-save, ala-Google Docs.
One button to switch off edit mode, next to it a save status indicator.
How it works
Each layout change marks a dirty state, showing a "Saving..." indication (although technically not yet saving) and triggers a server save to each changed widgets, debounced by 2 seconds.
Any error saving yields the appropriate notification and dirty indication persists.
Updated tests
Mobile & Desktop Screenshots/Recordings (if there are UI changes)