Settings: Better structure to settings page, and protect form changes (https://github.com/woocommerce/woocommerce-admin/pull/2544)
* Add section header for historical import. * Add alert on unsaved changes. * The glass is half full. Therefore my state change should be too. * Update button text.
This commit is contained in:
Timmy Crawford
GitHub
parent
3350605ef2
commit
1814741014
|
|
@ -7,6 +7,11 @@ import { Component, Fragment } from '@wordpress/element';
|
|||
import { isNil } from 'lodash';
|
||||
import { SECOND } from '@fresh-data/framework';
|
||||
|
||||
/**
|
||||
* WooCommerce dependencies
|
||||
*/
|
||||
import { SectionHeader } from '@woocommerce/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
|
|
@ -50,10 +55,9 @@ class HistoricalDataLayout extends Component {
|
|||
|
||||
return (
|
||||
<Fragment>
|
||||
<SectionHeader title={ __( 'Import Historical Data', 'woocommerce-admin' ) } />
|
||||
<div className="woocommerce-settings__wrapper">
|
||||
<div className="woocommerce-setting">
|
||||
<div className="woocommerce-setting__label" id="import-historical-data-label">
|
||||
{ __( 'Import Historical Data:', 'woocommerce-admin' ) }
|
||||
</div>
|
||||
<div className="woocommerce-setting__input">
|
||||
<span className="woocommerce-setting__help">
|
||||
{ __(
|
||||
|
|
@ -91,6 +95,7 @@ class HistoricalDataLayout extends Component {
|
|||
<HistoricalDataStatus importDate={ importDate } status={ status } />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<HistoricalDataActions
|
||||
importDate={ importDate }
|
||||
onDeletePreviousData={ onDeletePreviousData }
|
||||
|
|
|
|||
|
|
@ -36,9 +36,19 @@ class Settings extends Component {
|
|||
this.state = {
|
||||
settings,
|
||||
saving: false,
|
||||
isDirty: false,
|
||||
};
|
||||
|
||||
this.handleInputChange = this.handleInputChange.bind( this );
|
||||
this.warnIfUnsavedChanges = this.warnIfUnsavedChanges.bind( this );
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
window.addEventListener( 'beforeunload', this.warnIfUnsavedChanges );
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
window.removeEventListener( 'beforeunload', this.warnIfUnsavedChanges );
|
||||
}
|
||||
|
||||
componentDidCatch( error ) {
|
||||
|
|
@ -50,6 +60,18 @@ class Settings extends Component {
|
|||
/* eslint-enable no-console */
|
||||
}
|
||||
|
||||
warnIfUnsavedChanges( event ) {
|
||||
const { isDirty } = this.state;
|
||||
|
||||
if ( isDirty ) {
|
||||
event.returnValue = __(
|
||||
'You have unsaved changes. If you proceed, they will be lost.',
|
||||
'woocommerce-admin'
|
||||
);
|
||||
return event.returnValue;
|
||||
}
|
||||
}
|
||||
|
||||
resetDefaults = () => {
|
||||
if (
|
||||
window.confirm(
|
||||
|
|
@ -64,7 +86,8 @@ class Settings extends Component {
|
|||
|
||||
componentDidUpdate() {
|
||||
const { addNotice, isError, isRequesting } = this.props;
|
||||
const { saving } = this.state;
|
||||
const { saving, isDirty } = this.state;
|
||||
let newIsDirtyState = isDirty;
|
||||
|
||||
if ( saving && ! isRequesting ) {
|
||||
if ( ! isError ) {
|
||||
|
|
@ -72,6 +95,7 @@ class Settings extends Component {
|
|||
status: 'success',
|
||||
message: __( 'Your settings have been successfully saved.', 'woocommerce-admin' ),
|
||||
} );
|
||||
newIsDirtyState = false;
|
||||
} else {
|
||||
addNotice( {
|
||||
status: 'error',
|
||||
|
|
@ -82,7 +106,7 @@ class Settings extends Component {
|
|||
} );
|
||||
}
|
||||
/* eslint-disable react/no-did-update-set-state */
|
||||
this.setState( { saving: false } );
|
||||
this.setState( { saving: false, isDirty: newIsDirtyState } );
|
||||
/* eslint-enable react/no-did-update-set-state */
|
||||
}
|
||||
}
|
||||
|
|
@ -105,7 +129,9 @@ class Settings extends Component {
|
|||
saveChanges = () => {
|
||||
this.persistChanges( this.state );
|
||||
this.props.updateSettings( { wc_admin: this.state.settings } );
|
||||
this.setState( { saving: true } );
|
||||
|
||||
// TODO: remove this optimistic set of isDirty to false once #2541 is resolved.
|
||||
this.setState( { saving: true, isDirty: false } );
|
||||
};
|
||||
|
||||
handleInputChange( e ) {
|
||||
|
|
@ -122,7 +148,7 @@ class Settings extends Component {
|
|||
settings[ name ] = value;
|
||||
}
|
||||
|
||||
this.setState( { settings } );
|
||||
this.setState( { settings, isDirty: true } );
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
@ -155,11 +181,11 @@ class Settings extends Component {
|
|||
{ __( 'Reset Defaults', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
<Button isPrimary onClick={ this.saveChanges }>
|
||||
{ __( 'Save Changes', 'woocommerce-admin' ) }
|
||||
{ __( 'Save Settings', 'woocommerce-admin' ) }
|
||||
</Button>
|
||||
</div>
|
||||
<HistoricalData addNotice={ addNotice } />
|
||||
</div>
|
||||
<HistoricalData addNotice={ addNotice } />
|
||||
</Fragment>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9106,8 +9106,7 @@
|
|||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -9125,13 +9124,11 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -9144,18 +9141,15 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -9258,8 +9252,7 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -9269,7 +9262,6 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -9282,20 +9274,17 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.3.5",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.2",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -9312,7 +9301,6 @@
|
|||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -9385,8 +9373,7 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -9396,7 +9383,6 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -9472,8 +9458,7 @@
|
|||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.2",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -9503,7 +9488,6 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -9521,7 +9505,6 @@
|
|||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -9560,13 +9543,11 @@
|
|||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.3",
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
"bundled": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue