From 75f306732147a02b8e83aa0157d1a9713b9f349e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 11:33:19 -0800 Subject: [PATCH 1/9] Use EuiSwitch to toggle advanced settings in Create Follower Index form. --- .../follower_index_form.js | 77 +++++++++---------- 1 file changed, 36 insertions(+), 41 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index 67461e156f28be..ebf0e2a4cea090 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -26,6 +26,7 @@ import { EuiLoadingSpinner, EuiOverlayMask, EuiSpacer, + EuiSwitch, EuiText, EuiTitle, } from '@elastic/eui'; @@ -212,33 +213,36 @@ export const FollowerIndexForm = injectI18n( return this.state.followerIndex; }; - toggleAdvancedSettings = () => { - this.setState(({ areAdvancedSettingsVisible, cachedAdvancedSettings }) => { - // Hide settings, clear fields, and create cache. - if (areAdvancedSettingsVisible) { - const fields = this.getFields(); - - const newCachedAdvancedSettings = advancedSettingsFields.reduce((cache, { field }) => { - const value = fields[field]; - if (value !== '') { - cache[field] = value; - } - return cache; - }, {}); - - this.onFieldsChange(emptyAdvancedSettings); - + toggleAdvancedSettings = (event) => { + // Cache reference to target, otherwise SyntheticEvent will be returned to pool by the time + // async setState is executed. + const { target } = event; + this.setState(({ cachedAdvancedSettings }) => { + if (target.checked) { + // Show settings and restore fields from the cache. + this.onFieldsChange(cachedAdvancedSettings); return { - areAdvancedSettingsVisible: false, - cachedAdvancedSettings: newCachedAdvancedSettings, + areAdvancedSettingsVisible: true, + cachedAdvancedSettings: {}, }; } - // Show settings and restore fields from the cache. - this.onFieldsChange(cachedAdvancedSettings); + // Hide settings, clear fields, and create cache. + const fields = this.getFields(); + + const newCachedAdvancedSettings = advancedSettingsFields.reduce((cache, { field }) => { + const value = fields[field]; + if (value !== '') { + cache[field] = value; + } + return cache; + }, {}); + + this.onFieldsChange(emptyAdvancedSettings); + return { - areAdvancedSettingsVisible: true, - cachedAdvancedSettings: {}, + areAdvancedSettingsVisible: false, + cachedAdvancedSettings: newCachedAdvancedSettings, }; }); } @@ -455,19 +459,6 @@ export const FollowerIndexForm = injectI18n( * Advanced settings */ - const toggleAdvancedSettingButtonLabel = areAdvancedSettingsVisible - ? ( - - ) : ( - - ); - const renderAdvancedSettings = () => { const { isNew } = this.state; @@ -494,12 +485,16 @@ export const FollowerIndexForm = injectI18n( />

{isNew ? ( - - {toggleAdvancedSettingButtonLabel} - + + )} + checked={areAdvancedSettingsVisible} + onChange={this.toggleAdvancedSettings} + /> ) : null} )} From a77511a56eae085f818a9b36421bf333bd240a06 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 11:34:14 -0800 Subject: [PATCH 2/9] Move 'optional' from each Advanced Setting field to the section heading. --- .../advanced_settings_fields.js | 20 +++++++++---------- .../follower_index_form.js | 2 +- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js index e0fc691e84e3ca..06e2de1cb3b55d 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js @@ -55,7 +55,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxReadRequestOperationCountLabel', { - defaultMessage: 'Max read request operation count (optional)' + defaultMessage: 'Max read request operation count' } ), defaultValue: getSettingDefault('maxReadRequestOperationCount'), @@ -72,7 +72,7 @@ export const advancedSettingsFields = [ }), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxOutstandingReadRequestsLabel', { - defaultMessage: 'Max outstanding read requests (optional)' + defaultMessage: 'Max outstanding read requests' } ), defaultValue: getSettingDefault('maxOutstandingReadRequests'), @@ -89,7 +89,7 @@ export const advancedSettingsFields = [ }), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxReadRequestSizeLabel', { - defaultMessage: 'Max read request size (optional)' + defaultMessage: 'Max read request size' } ), defaultValue: getSettingDefault('maxReadRequestSize'), @@ -108,7 +108,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteRequestOperationCountLabel', { - defaultMessage: 'Max write request operation count (optional)' + defaultMessage: 'Max write request operation count' } ), defaultValue: getSettingDefault('maxWriteRequestOperationCount'), @@ -127,7 +127,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteRequestSizeLabel', { - defaultMessage: 'Max write request size (optional)' + defaultMessage: 'Max write request size' } ), defaultValue: getSettingDefault('maxWriteRequestSize'), @@ -146,7 +146,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxOutstandingWriteRequestsLabel', { - defaultMessage: 'Max outstanding write requests (optional)' + defaultMessage: 'Max outstanding write requests' } ), defaultValue: getSettingDefault('maxOutstandingWriteRequests'), @@ -167,7 +167,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteBufferCountLabel', { - defaultMessage: 'Max write buffer count (optional)' + defaultMessage: 'Max write buffer count' } ), defaultValue: getSettingDefault('maxWriteBufferCount'), @@ -188,7 +188,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxWriteBufferSizeLabel', { - defaultMessage: 'Max write buffer size (optional)' + defaultMessage: 'Max write buffer size' } ), defaultValue: getSettingDefault('maxWriteBufferSize'), @@ -208,7 +208,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.maxRetryDelayLabel', { - defaultMessage: 'Max retry delay (optional)' + defaultMessage: 'Max retry delay' } ), defaultValue: getSettingDefault('maxRetryDelay'), @@ -230,7 +230,7 @@ export const advancedSettingsFields = [ ), label: i18n.translate( 'xpack.crossClusterReplication.followerIndexForm.advancedSettings.readPollTimeoutLabel', { - defaultMessage: 'Read poll timeout (optional)' + defaultMessage: 'Read poll timeout' } ), defaultValue: getSettingDefault('readPollTimeout'), diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index ebf0e2a4cea090..5e49bfa1cc6cee 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -471,7 +471,7 @@ export const FollowerIndexForm = injectI18n(

From 5325fa6310ea5748f9b82280a9d3f04ca7a7d931 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 11:37:27 -0800 Subject: [PATCH 3/9] Change Advanced Settings switch label and description to emphasize that you can customize them or use the defaults. --- .../components/follower_index_form/follower_index_form.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index 5e49bfa1cc6cee..73e41cf55eee14 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -481,7 +481,8 @@ export const FollowerIndexForm = injectI18n(

{isNew ? ( @@ -489,7 +490,7 @@ export const FollowerIndexForm = injectI18n( label={( )} checked={areAdvancedSettingsVisible} From b859d4b73779e8a3233ec1a51f88b78d0d60a203 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 12:23:33 -0800 Subject: [PATCH 4/9] Prepopulate Advanced Settings fields with default values. --- .../components/follower_index_form/advanced_settings_fields.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js index 06e2de1cb3b55d..475da94621d2f2 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js @@ -239,5 +239,6 @@ export const advancedSettingsFields = [ ]; export const emptyAdvancedSettings = advancedSettingsFields.reduce((obj, advancedSetting) => { - return { ...obj, [advancedSetting.field]: '' }; + const { field, defaultValue } = advancedSetting; + return { ...obj, [field]: defaultValue }; }, {}); From 6c05b6e485d6bede23ea71bababc0cd97fef9f14 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 12:51:38 -0800 Subject: [PATCH 5/9] When editing a follower index, check if advanced settings have been edited and open them if so. --- .../advanced_settings_fields.js | 7 ++++ .../follower_index_form.js | 39 +++++++++++-------- 2 files changed, 29 insertions(+), 17 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js index 475da94621d2f2..cb1857473b8170 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/advanced_settings_fields.js @@ -242,3 +242,10 @@ export const emptyAdvancedSettings = advancedSettingsFields.reduce((obj, advance const { field, defaultValue } = advancedSetting; return { ...obj, [field]: defaultValue }; }, {}); + +export function areAdvancedSettingsEdited(followerIndex) { + return advancedSettingsFields.some(advancedSetting => { + const { field } = advancedSetting; + return followerIndex[field] !== emptyAdvancedSettings[field]; + }); +} diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index 73e41cf55eee14..c5c9ac3388dd91 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -37,7 +37,11 @@ import { loadIndices } from '../../services/api'; import { API_STATUS } from '../../constants'; import { SectionError } from '../section_error'; import { FormEntryRow } from '../form_entry_row'; -import { advancedSettingsFields, emptyAdvancedSettings } from './advanced_settings_fields'; +import { + advancedSettingsFields, + emptyAdvancedSettings, + areAdvancedSettingsEdited, +} from './advanced_settings_fields'; import { extractQueryParams } from '../../services/query_params'; import { getRemoteClusterName } from '../../services/get_remote_cluster_name'; import { RemoteClustersFormField } from '../remote_clusters_form_field'; @@ -94,9 +98,10 @@ export const FollowerIndexForm = injectI18n( constructor(props) { super(props); - const isNew = this.props.followerIndex === undefined; const { route: { location: { search } } } = routing.reactRouter; const queryParams = extractQueryParams(search); + + const isNew = this.props.followerIndex === undefined; const remoteClusterName = getRemoteClusterName(this.props.remoteClusters, queryParams.cluster); const followerIndex = isNew ? getEmptyFollowerIndex(remoteClusterName) @@ -104,6 +109,9 @@ export const FollowerIndexForm = injectI18n( ...getEmptyFollowerIndex(), ...this.props.followerIndex, }; + const areAdvancedSettingsVisible = isNew ? false : ( // eslint-disable-line no-nested-ternary + areAdvancedSettingsEdited(followerIndex) ? true : false + ); const fieldsErrors = this.getFieldsErrors(followerIndex); @@ -112,7 +120,7 @@ export const FollowerIndexForm = injectI18n( followerIndex, fieldsErrors, areErrorsVisible: false, - areAdvancedSettingsVisible: isNew ? false : true, + areAdvancedSettingsVisible, isValidatingIndexName: false, }; @@ -460,8 +468,6 @@ export const FollowerIndexForm = injectI18n( */ const renderAdvancedSettings = () => { - const { isNew } = this.state; - return ( @@ -485,18 +491,17 @@ export const FollowerIndexForm = injectI18n( If you don't customize them, default advanced settings will be applied." />

- {isNew ? ( - - )} - checked={areAdvancedSettingsVisible} - onChange={this.toggleAdvancedSettings} - /> - ) : null} + + + )} + checked={areAdvancedSettingsVisible} + onChange={this.toggleAdvancedSettings} + /> )} fullWidth From dd191e257219a7b1f02d0183654daabc67ced3f4 Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 13:05:21 -0800 Subject: [PATCH 6/9] Add 'Reset to default' button below advanced settings fields if their values are different than the default. --- .../follower_index_form.js | 1 + .../public/app/components/form_entry_row.js | 33 ++++++++++++++++--- 2 files changed, 30 insertions(+), 4 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index c5c9ac3388dd91..00f054f46358ef 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -519,6 +519,7 @@ export const FollowerIndexForm = injectI18n( key={field} field={field} value={followerIndex[field]} + defaultValue={defaultValue} error={fieldsErrors[field]} title={( diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js b/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js index bfc7d8e3c6c7bd..6d9e3f0b66c512 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js @@ -4,14 +4,16 @@ * you may not use this file except in compliance with the Elastic License. */ -import React, { PureComponent } from 'react'; +import React, { PureComponent, Fragment } from 'react'; import PropTypes from 'prop-types'; +import { FormattedMessage } from '@kbn/i18n/react'; import { - EuiFieldText, - EuiFieldNumber, EuiDescribedFormGroup, + EuiFieldNumber, + EuiFieldText, EuiFormRow, + EuiLink, } from '@elastic/eui'; /** @@ -37,6 +39,10 @@ export class FormEntryRow extends PureComponent { PropTypes.string, PropTypes.number ]).isRequired, + defaultValue: PropTypes.oneOfType([ + PropTypes.string, + PropTypes.number + ]).isRequired, isLoading: PropTypes.bool, error: PropTypes.oneOfType([ PropTypes.node, @@ -89,11 +95,30 @@ export class FormEntryRow extends PureComponent { description, helpText, areErrorsVisible, + value, + defaultValue, } = this.props; const hasError = !!error; const isInvalid = hasError && (error.alwaysVisible || areErrorsVisible); + const fieldHelpText = ( + + {helpText} + + {value !== defaultValue && ( +

+ this.onFieldChange(defaultValue)}> + + +

+ )} + + ); + return ( Date: Tue, 29 Jan 2019 19:12:07 -0800 Subject: [PATCH 7/9] Remove 'Default' copy from Advanced Settings descriptions. --- .../follower_index_form/follower_index_form.js | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index 00f054f46358ef..f645032cf8bc17 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -16,7 +16,6 @@ import { EuiButton, EuiButtonEmpty, EuiCallOut, - EuiCode, EuiDescribedFormGroup, EuiFlexGroup, EuiFlexItem, @@ -526,19 +525,7 @@ export const FollowerIndexForm = injectI18n(

{title}

 )} - description={( - - {description} - - - {' '} - {defaultValue} - - - )} + description={description} label={label} helpText={helpText} areErrorsVisible={areErrorsVisible} From 022ea8a1c1240fee275338bf7ae3ec01d596cd5c Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Tue, 29 Jan 2019 19:20:13 -0800 Subject: [PATCH 8/9] Remove 'Reset to default' buttons from fields which don't have a defaultValue. --- .../components/follower_index_form/follower_index_form.js | 3 ++- .../public/app/components/form_entry_row.js | 6 ++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index f645032cf8bc17..4c737de6746c1b 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -512,7 +512,7 @@ export const FollowerIndexForm = injectI18n( {advancedSettingsFields.map((advancedSetting) => { - const { field, title, description, label, helpText, defaultValue } = advancedSetting; + const { field, title, description, label, helpText, defaultValue, type } = advancedSetting; return ( diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js b/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js index 6d9e3f0b66c512..630bc6b7f35ce5 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/form_entry_row.js @@ -42,7 +42,7 @@ export class FormEntryRow extends PureComponent { defaultValue: PropTypes.oneOfType([ PropTypes.string, PropTypes.number - ]).isRequired, + ]), isLoading: PropTypes.bool, error: PropTypes.oneOfType([ PropTypes.node, @@ -101,12 +101,14 @@ export class FormEntryRow extends PureComponent { const hasError = !!error; const isInvalid = hasError && (error.alwaysVisible || areErrorsVisible); + const canBeResetToDefault = defaultValue !== undefined; + const isResetToDefaultVisible = value !== defaultValue; const fieldHelpText = ( {helpText} - {value !== defaultValue && ( + {canBeResetToDefault && isResetToDefaultVisible && (

this.onFieldChange(defaultValue)}> Date: Wed, 30 Jan 2019 10:51:29 -0800 Subject: [PATCH 9/9] Simplify toggleAdvancedSettings function, add comments, and fix React console error. --- .../follower_index_form.js | 57 ++++++++++--------- 1 file changed, 30 insertions(+), 27 deletions(-) diff --git a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js index 4c737de6746c1b..fbc53e13128f89 100644 --- a/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js +++ b/x-pack/plugins/cross_cluster_replication/public/app/components/follower_index_form/follower_index_form.js @@ -123,6 +123,7 @@ export const FollowerIndexForm = injectI18n( isValidatingIndexName: false, }; + this.cachedAdvancedSettings = {}; this.validateIndexName = debounce(this.validateIndexName, 500); } @@ -221,36 +222,38 @@ export const FollowerIndexForm = injectI18n( }; toggleAdvancedSettings = (event) => { - // Cache reference to target, otherwise SyntheticEvent will be returned to pool by the time - // async setState is executed. - const { target } = event; - this.setState(({ cachedAdvancedSettings }) => { - if (target.checked) { - // Show settings and restore fields from the cache. - this.onFieldsChange(cachedAdvancedSettings); - return { - areAdvancedSettingsVisible: true, - cachedAdvancedSettings: {}, - }; - } - - // Hide settings, clear fields, and create cache. - const fields = this.getFields(); + // If the user edits the advanced settings but then hides them, we need to make sure the + // edited values don't get sent to the API when the user saves, but we *do* want to restore + // these values to the form when the user re-opens the advanced settings. + if (event.target.checked) { + // Apply the cached advanced settings to the advanced settings form. + this.onFieldsChange(this.cachedAdvancedSettings); + + // Reset the cache of the advanced settings. + this.cachedAdvancedSettings = {}; + + // Show the advanced settings. + return this.setState({ + areAdvancedSettingsVisible: true, + }); + } - const newCachedAdvancedSettings = advancedSettingsFields.reduce((cache, { field }) => { - const value = fields[field]; - if (value !== '') { - cache[field] = value; - } - return cache; - }, {}); + // Clear the advanced settings form. + this.onFieldsChange(emptyAdvancedSettings); - this.onFieldsChange(emptyAdvancedSettings); + // Save a cache of the advanced settings. + const fields = this.getFields(); + this.cachedAdvancedSettings = advancedSettingsFields.reduce((cache, { field }) => { + const value = fields[field]; + if (value !== '') { + cache[field] = value; + } + return cache; + }, {}); - return { - areAdvancedSettingsVisible: false, - cachedAdvancedSettings: newCachedAdvancedSettings, - }; + // Hide the advanced settings. + this.setState({ + areAdvancedSettingsVisible: false, }); }