Settings: Better structure to settings page, and protect form changes (…

…#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.
woocommerce · Jul 2, 2019 · 0001ecb · 0001ecb
1 parent d6d9475
commit 0001ecb
Show file tree

Hide file tree

Showing 3 changed files with 86 additions and 74 deletions.
diff --git a/client/analytics/settings/historical-data/layout.js b/client/analytics/settings/historical-data/layout.js
@@ -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,45 +55,45 @@ class HistoricalDataLayout extends Component {
 
 		return (
 			<Fragment>
-				<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">
-							{ __(
-								'This tool populates historical analytics data by processing customers ' +
-									'and orders created prior to activating WooCommerce Admin.',
-								'woocommerce-admin'
+				<SectionHeader title={ __( 'Import Historical Data', 'woocommerce-admin' ) } />
+				<div className="woocommerce-settings__wrapper">
+					<div className="woocommerce-setting">
+						<div className="woocommerce-setting__input">
+							<span className="woocommerce-setting__help">
+								{ __(
+									'This tool populates historical analytics data by processing customers ' +
+										'and orders created prior to activating WooCommerce Admin.',
+									'woocommerce-admin'
+								) }
+							</span>
+							{ status !== 'finished' && (
+								<Fragment>
+									<HistoricalDataPeriodSelector
+										dateFormat={ dateFormat }
+										disabled={ inProgress }
+										onPeriodChange={ onPeriodChange }
+										onDateChange={ onDateChange }
+										value={ period }
+									/>
+									<HistoricalDataSkipCheckbox
+										disabled={ inProgress }
+										checked={ skipChecked }
+										onChange={ onSkipChange }
+									/>
+									<HistoricalDataProgress
+										label={ __( 'Registered Customers', 'woocommerce-admin' ) }
+										progress={ customersProgress }
+										total={ customersTotal }
+									/>
+									<HistoricalDataProgress
+										label={ __( 'Orders', 'woocommerce-admin' ) }
+										progress={ ordersProgress }
+										total={ ordersTotal }
+									/>
+								</Fragment>
 							) }
-						</span>
-						{ status !== 'finished' && (
-							<Fragment>
-								<HistoricalDataPeriodSelector
-									dateFormat={ dateFormat }
-									disabled={ inProgress }
-									onPeriodChange={ onPeriodChange }
-									onDateChange={ onDateChange }
-									value={ period }
-								/>
-								<HistoricalDataSkipCheckbox
-									disabled={ inProgress }
-									checked={ skipChecked }
-									onChange={ onSkipChange }
-								/>
-								<HistoricalDataProgress
-									label={ __( 'Registered Customers', 'woocommerce-admin' ) }
-									progress={ customersProgress }
-									total={ customersTotal }
-								/>
-								<HistoricalDataProgress
-									label={ __( 'Orders', 'woocommerce-admin' ) }
-									progress={ ordersProgress }
-									total={ ordersTotal }
-								/>
-							</Fragment>
-						) }
-						<HistoricalDataStatus importDate={ importDate } status={ status } />
+							<HistoricalDataStatus importDate={ importDate } status={ status } />
+						</div>
 					</div>
 				</div>
 				<HistoricalDataActions

diff --git a/client/analytics/settings/index.js b/client/analytics/settings/index.js
@@ -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,14 +86,16 @@ 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 ) {
 				addNotice( {
 					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>
 		);
 	}

diff --git a/package-lock.json b/package-lock.json