#10351: A saved map returns to the default state when the translation…

… is changed (#10405)

web/client/components/I18N/Localized.jsx

@@ -15,12 +15,14 @@ class Localized extends React.Component {
  static propTypes = {
  locale: PropTypes.string,
  messages: PropTypes.object,
- loadingError: PropTypes.string
+ loadingError: PropTypes.string,
+ localeKey: PropTypes.bool
  };
 
  static childContextTypes = {
  locale: PropTypes.string,
- messages: PropTypes.object
+ messages: PropTypes.object,
+ localeKey: true
  };
 
  getChildContext() {
@@ -38,7 +40,7 @@ class Localized extends React.Component {
  children = children();
  }
 
- return (<IntlProvider key={this.props.locale} locale={this.props.locale}
+ return (<IntlProvider {...this.props.localeKey && { key: this.props.locale }} locale={this.props.locale}
  messages={this.flattenMessages(this.props.messages)}
  >
  {children}

web/client/components/app/StandardRouter.jsx

@@ -68,9 +68,13 @@ class StandardRouter extends React.Component {
  <div className={this.props.className}>
 
  <ThemeProvider {...this.props.themeCfg} version={this.props.version} onLoad={this.props.onThemeLoaded}>
- {this.props.themeLoaded ? (<Localized messages={this.props.locale.messages} locale={this.props.locale.current} loadingError={this.props.locale.localeError}>
+ {this.props.themeLoaded ? (<Localized localeKey={false} messages={this.props.locale.messages} locale={this.props.locale.current} loadingError={this.props.locale.localeError}>
  <ConnectedRouter history={history}>
- <div className="error-container">
+ {/** the key is moved from the above Localized to the next div after 'ConnectedRouter':
+ * to ensure the reload of children
+ * to avoid and prevent firing LOCATION_CHANGE action that caused reset map state in change locale
+ */}
+ <div key={this.props.locale.current} className="error-container">
  <ErrorBoundary
  onError={e => {
  /* eslint-disable no-console */
@@ -94,9 +98,13 @@ class StandardRouter extends React.Component {
  return (
  <div className={this.props.className}>
  <Theme {...this.props.themeCfg} version={this.props.version}/>
- <Localized messages={this.props.locale.messages} locale={this.props.locale.current} loadingError={this.props.locale.localeError}>
+ <Localized localeKey={false} messages={this.props.locale.messages} locale={this.props.locale.current} loadingError={this.props.locale.localeError}>
  <ConnectedRouter history={history}>
- <div className="error-container">
+ {/** the key is moved from the above Localized to the next div after 'ConnectedRouter':
+ * to ensure the reload of children
+ * to avoid and prevent firing LOCATION_CHANGE action that caused reset map state in change locale
+ */}
+ <div key={this.props.locale.current} className="error-container">
  <ErrorBoundary
  onError={e => {
  /* eslint-disable no-console */