PLT-3237 Update displayed config values in admin console after saving (…

…mattermost#3506)

* Reloaded admin console data when settings are saved

* Fixed attempting to save an invalid config setting overwriting the stored config

components/admin_console/admin_settings.jsx

@@ -24,11 +24,11 @@ export default class AdminSettings extends React.Component {
  this.handleSubmit = this.handleSubmit.bind(this);
  this.onKeyDown = this.onKeyDown.bind(this);
 
- this.state = {
+ this.state = Object.assign(this.getStateFromConfig(props.config), {
  saveNeeded: false,
  saving: false,
  serverError: null
- };
+ });
  }
 
  handleChange(id, value) {
@@ -60,12 +60,17 @@ export default class AdminSettings extends React.Component {
  serverError: null
  });
 
- const config = this.getConfigFromState(this.props.config);
+ // clone config so that we aren't modifying data in the stores
+ let config = JSON.parse(JSON.stringify(this.props.config));
+ config = this.getConfigFromState(config);
 
  Client.saveConfig(
  config,
  () => {
- AsyncClient.getConfig();
+ AsyncClient.getConfig((savedConfig) => {
+ this.setState(this.getStateFromConfig(savedConfig));
+ });
+
  this.setState({
  saveNeeded: false,
  saving: false

components/admin_console/compliance_settings.jsx

@@ -18,12 +18,6 @@ export default class ComplianceSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- enable: props.config.ComplianceSettings.Enable,
- directory: props.config.ComplianceSettings.Directory,
- enableDaily: props.config.ComplianceSettings.EnableDaily
- });
  }
 
  getConfigFromState(config) {
@@ -34,6 +28,14 @@ export default class ComplianceSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ enable: config.ComplianceSettings.Enable,
+ directory: config.ComplianceSettings.Directory,
+ enableDaily: config.ComplianceSettings.EnableDaily
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/configuration_settings.jsx

@@ -19,17 +19,12 @@ export default class ConfigurationSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- listenAddress: props.config.ServiceSettings.ListenAddress,
- webserverMode: props.config.ServiceSettings.WebserverMode
- });
  }
 
  componentWillReceiveProps(nextProps) {
- if (nextProps.config.ServiceSettings.ListenAddress !== this.props.config.ServiceSettings.ListenAddress) {
-  this.setState({listenAddress: nextProps.config.ServiceSettings.ListenAddress});
- }
+ // special case for this page since we don't update AdminSettings components when the
+ // stored config changes, but we want this page to update when you reload the config
+ this.setState(this.getStateFromConfig(nextProps.config));
  }
 
  getConfigFromState(config) {
@@ -39,6 +34,13 @@ export default class ConfigurationSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ listenAddress: config.ServiceSettings.ListenAddress,
+ webserverMode: config.ServiceSettings.WebserverMode
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/connection_settings.jsx

@@ -18,11 +18,6 @@ export default class ConnectionSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- allowCorsFrom: props.config.ServiceSettings.AllowCorsFrom,
- enableInsecureOutgoingConnections: props.config.ServiceSettings.EnableInsecureOutgoingConnections
- });
  }
 
  getConfigFromState(config) {
@@ -32,6 +27,13 @@ export default class ConnectionSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ allowCorsFrom: config.ServiceSettings.AllowCorsFrom,
+ enableInsecureOutgoingConnections: config.ServiceSettings.EnableInsecureOutgoingConnections
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/custom_brand_settings.jsx

@@ -19,12 +19,6 @@ export default class CustomBrandSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- siteName: props.config.TeamSettings.SiteName,
- enableCustomBrand: props.config.TeamSettings.EnableCustomBrand,
- customBrandText: props.config.TeamSettings.CustomBrandText
- });
  }
 
  getConfigFromState(config) {
@@ -37,6 +31,14 @@ export default class CustomBrandSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ siteName: config.TeamSettings.SiteName,
+ enableCustomBrand: config.TeamSettings.EnableCustomBrand,
+ customBrandText: config.TeamSettings.CustomBrandText
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/custom_emoji_settings.jsx

@@ -18,11 +18,6 @@ export default class CustomEmojiSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- enableCustomEmoji: props.config.ServiceSettings.EnableCustomEmoji,
- restrictCustomEmojiCreation: props.config.ServiceSettings.RestrictCustomEmojiCreation
- });
  }
 
  getConfigFromState(config) {
@@ -35,6 +30,13 @@ export default class CustomEmojiSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ enableCustomEmoji: config.ServiceSettings.EnableCustomEmoji,
+ restrictCustomEmojiCreation: config.ServiceSettings.RestrictCustomEmojiCreation
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/database_settings.jsx

@@ -20,15 +20,6 @@ export default class DatabaseSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- driverName: this.props.config.SqlSettings.DriverName,
- dataSource: this.props.config.SqlSettings.DataSource,
- maxIdleConns: props.config.SqlSettings.MaxIdleConns,
- maxOpenConns: props.config.SqlSettings.MaxOpenConns,
- atRestEncryptKey: props.config.SqlSettings.AtRestEncryptKey,
- trace: props.config.SqlSettings.Trace
- });
  }
 
  getConfigFromState(config) {
@@ -42,6 +33,17 @@ export default class DatabaseSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ driverName: config.SqlSettings.DriverName,
+ dataSource: config.SqlSettings.DataSource,
+ maxIdleConns: config.SqlSettings.MaxIdleConns,
+ maxOpenConns: config.SqlSettings.MaxOpenConns,
+ atRestEncryptKey: config.SqlSettings.AtRestEncryptKey,
+ trace: config.SqlSettings.Trace
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/developer_settings.jsx

@@ -15,11 +15,6 @@ export default class DeveloperSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- enableTesting: props.config.ServiceSettings.EnableTesting,
- enableDeveloper: props.config.ServiceSettings.EnableDeveloper
- });
  }
 
  getConfigFromState(config) {
@@ -29,6 +24,13 @@ export default class DeveloperSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ enableTesting: config.ServiceSettings.EnableTesting,
+ enableDeveloper: config.ServiceSettings.EnableDeveloper
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/email_authentication_settings.jsx

@@ -15,12 +15,6 @@ export default class EmailAuthenticationSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- enableSignUpWithEmail: props.config.EmailSettings.EnableSignUpWithEmail,
- enableSignInWithEmail: props.config.EmailSettings.EnableSignInWithEmail,
- enableSignInWithUsername: props.config.EmailSettings.EnableSignInWithUsername
- });
  }
 
  getConfigFromState(config) {
@@ -31,6 +25,14 @@ export default class EmailAuthenticationSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ enableSignUpWithEmail: config.EmailSettings.EnableSignUpWithEmail,
+ enableSignInWithEmail: config.EmailSettings.EnableSignInWithEmail,
+ enableSignInWithUsername: config.EmailSettings.EnableSignInWithUsername
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/email_settings.jsx

@@ -20,19 +20,6 @@ export default class EmailSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- sendEmailNotifications: props.config.EmailSettings.SendEmailNotifications,
- feedbackName: props.config.EmailSettings.FeedbackName,
- feedbackEmail: props.config.EmailSettings.FeedbackEmail,
- feedbackOrganization: props.config.EmailSettings.FeedbackOrganization,
- smtpUsername: props.config.EmailSettings.SMTPUsername,
- smtpPassword: props.config.EmailSettings.SMTPPassword,
- smtpServer: props.config.EmailSettings.SMTPServer,
- smtpPort: props.config.EmailSettings.SMTPPort,
- connectionSecurity: props.config.EmailSettings.ConnectionSecurity,
- enableSecurityFixAlert: props.config.ServiceSettings.EnableSecurityFixAlert
- });
  }
 
  getConfigFromState(config) {
@@ -50,6 +37,21 @@ export default class EmailSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ sendEmailNotifications: config.EmailSettings.SendEmailNotifications,
+ feedbackName: config.EmailSettings.FeedbackName,
+ feedbackEmail: config.EmailSettings.FeedbackEmail,
+ feedbackOrganization: config.EmailSettings.FeedbackOrganization,
+ smtpUsername: config.EmailSettings.SMTPUsername,
+ smtpPassword: config.EmailSettings.SMTPPassword,
+ smtpServer: config.EmailSettings.SMTPServer,
+ smtpPort: config.EmailSettings.SMTPPort,
+ connectionSecurity: config.EmailSettings.ConnectionSecurity,
+ enableSecurityFixAlert: config.ServiceSettings.EnableSecurityFixAlert
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/external_service_settings.jsx

@@ -17,11 +17,6 @@ export default class ExternalServiceSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- segmentDeveloperKey: props.config.ServiceSettings.SegmentDeveloperKey,
- googleDeveloperKey: props.config.ServiceSettings.GoogleDeveloperKey
- });
  }
 
  getConfigFromState(config) {
@@ -31,6 +26,13 @@ export default class ExternalServiceSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ segmentDeveloperKey: config.ServiceSettings.SegmentDeveloperKey,
+ googleDeveloperKey: config.ServiceSettings.GoogleDeveloperKey
+ };
+ }
+
  renderTitle() {
  return (
  <h3>

components/admin_console/gitlab_settings.jsx

@@ -18,15 +18,6 @@ export default class GitLabSettings extends AdminSettings {
  this.getConfigFromState = this.getConfigFromState.bind(this);
 
  this.renderSettings = this.renderSettings.bind(this);
-
- this.state = Object.assign(this.state, {
- enable: props.config.GitLabSettings.Enable,
- id: props.config.GitLabSettings.Id,
- secret: props.config.GitLabSettings.Secret,
- userApiEndpoint: props.config.GitLabSettings.UserApiEndpoint,
- authEndpoint: props.config.GitLabSettings.AuthEndpoint,
- tokenEndpoint: props.config.GitLabSettings.TokenEndpoint
- });
  }
 
  getConfigFromState(config) {
@@ -40,6 +31,17 @@ export default class GitLabSettings extends AdminSettings {
  return config;
  }
 
+ getStateFromConfig(config) {
+ return {
+ enable: config.GitLabSettings.Enable,
+ id: config.GitLabSettings.Id,
+ secret: config.GitLabSettings.Secret,
+ userApiEndpoint: config.GitLabSettings.UserApiEndpoint,
+ authEndpoint: config.GitLabSettings.AuthEndpoint,
+ tokenEndpoint: config.GitLabSettings.TokenEndpoint
+ };
+ }
+
  renderTitle() {
  return (
  <h3>