mirror of
https://github.com/apache/superset.git
synced 2024-09-12 00:29:39 -04:00
[dashboard] give user feedback when there are unsaved changes (#1633)
* show alert and use dialog window if there are unsaved changes. * add container class to alert
This commit is contained in:
parent
d5ef937b31
commit
ab5a4102cd
@ -4,6 +4,7 @@ const px = require('../modules/superset');
|
||||
const d3 = require('d3');
|
||||
const urlLib = require('url');
|
||||
const utils = require('../modules/utils');
|
||||
const { Alert } = require('react-bootstrap');
|
||||
|
||||
import React from 'react';
|
||||
import { render } from 'react-dom';
|
||||
@ -33,6 +34,33 @@ export function getInitialState(dashboardData, context) {
|
||||
return state;
|
||||
}
|
||||
|
||||
function unload() {
|
||||
const message = 'You have unsaved changes.';
|
||||
window.event.returnValue = message; // Gecko + IE
|
||||
return message; // Gecko + Webkit, Safari, Chrome etc.
|
||||
}
|
||||
|
||||
function onBeforeUnload(hasChanged) {
|
||||
if (hasChanged) {
|
||||
window.addEventListener('beforeunload', unload);
|
||||
} else {
|
||||
window.removeEventListener('beforeunload', unload);
|
||||
}
|
||||
}
|
||||
|
||||
function renderAlert() {
|
||||
render(
|
||||
<div className="container-fluid">
|
||||
<Alert bsStyle="warning">
|
||||
<strong>You have unsaved changes.</strong> Click the
|
||||
<i className="fa fa-save" />
|
||||
button on the top right to save your changes.
|
||||
</Alert>
|
||||
</div>,
|
||||
document.getElementById('alert-container')
|
||||
);
|
||||
}
|
||||
|
||||
function initDashboardView(dashboard) {
|
||||
render(
|
||||
<Header dashboard={dashboard} />,
|
||||
@ -96,6 +124,14 @@ export function dashboardContainer(dashboard) {
|
||||
this.startPeriodicRender(0);
|
||||
this.bindResizeToWindowResize();
|
||||
},
|
||||
onChange() {
|
||||
onBeforeUnload(true);
|
||||
renderAlert();
|
||||
},
|
||||
onSave() {
|
||||
onBeforeUnload(false);
|
||||
$('#alert-container').html('');
|
||||
},
|
||||
loadPreSelectFilters() {
|
||||
try {
|
||||
const filters = JSON.parse(px.getParam('preselect_filters') || '{}');
|
||||
|
@ -59,6 +59,7 @@ class Controls extends React.PureComponent {
|
||||
data: JSON.stringify(data),
|
||||
},
|
||||
success() {
|
||||
dashboard.onSave();
|
||||
showModal({
|
||||
title: 'Success',
|
||||
body: 'This dashboard was saved successfully.',
|
||||
@ -75,6 +76,7 @@ class Controls extends React.PureComponent {
|
||||
}
|
||||
changeCss(css) {
|
||||
this.setState({ css });
|
||||
this.props.dashboard.onChange();
|
||||
}
|
||||
render() {
|
||||
const dashboard = this.props.dashboard;
|
||||
|
@ -48,10 +48,12 @@ class GridLayout extends React.Component {
|
||||
if (oldItem.w !== newItem.w || oldItem.h !== newItem.h) {
|
||||
this.setState({ layout }, () => newSlice.resize());
|
||||
}
|
||||
this.props.dashboard.onChange();
|
||||
}
|
||||
|
||||
onDragStop(layout) {
|
||||
this.setState({ layout });
|
||||
this.props.dashboard.onChange();
|
||||
}
|
||||
|
||||
removeSlice(sliceId) {
|
||||
@ -64,6 +66,7 @@ class GridLayout extends React.Component {
|
||||
return slice.slice_id !== sliceId;
|
||||
}),
|
||||
});
|
||||
this.props.dashboard.onChange();
|
||||
}
|
||||
|
||||
serialize() {
|
||||
|
Loading…
Reference in New Issue
Block a user