Merged in feature/success_banner_for_config (pull request #147)

feature/success_banner_for_config

scm-ui/src/config/components/form/ConfigForm.js

@@ -23,7 +23,8 @@ type State = {
   error: {
     loginAttemptLimitTimeout: boolean,
     loginAttemptLimit: boolean
-  }
+  },
+  changed: boolean
 };
 
 class ConfigForm extends React.Component<Props, State> {
@@ -59,7 +60,8 @@ class ConfigForm extends React.Component<Props, State> {
       error: {
         loginAttemptLimitTimeout: false,
         loginAttemptLimit: false
-      }
+      },
+      changed: false
     };
   }
 
@@ -75,6 +77,9 @@ class ConfigForm extends React.Component<Props, State> {
 
   submit = (event: Event) => {
     event.preventDefault();
+    this.setState({
+      changed: false
+    });
     this.props.submitForm(this.state.config);
   };
 
@@ -156,7 +161,9 @@ class ConfigForm extends React.Component<Props, State> {
         <SubmitButton
           loading={loading}
           label={t("config-form.submit")}
-          disabled={!configUpdatePermission || this.hasError()}
+          disabled={
+            !configUpdatePermission || this.hasError() || !this.state.changed
+          }
         />
       </form>
     );
@@ -172,7 +179,8 @@ class ConfigForm extends React.Component<Props, State> {
       error: {
         ...this.state.error,
         [name]: !isValid
-      }
+      },
+      changed: true
     });
   };
 

scm-ui/src/config/containers/GlobalConfig.js

@@ -34,7 +34,19 @@ type Props = {
   t: string => string
 };
 
-class GlobalConfig extends React.Component<Props> {
+type State = {
+  configChanged: boolean
+};
+
+class GlobalConfig extends React.Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+
+    this.state = {
+      configChanged: false
+    };
+  }
+
   componentDidMount() {
     this.props.configReset();
     this.props.fetchConfig(this.props.configLink);
@@ -42,6 +54,22 @@ class GlobalConfig extends React.Component<Props> {
 
   modifyConfig = (config: Config) => {
     this.props.modifyConfig(config);
+    this.setState({ configChanged: true });
+  };
+
+  renderConfigChangedNotification = () => {
+    if (this.state.configChanged) {
+      return (
+        <div className="notification is-primary">
+          <button
+            className="delete"
+            onClick={() => this.setState({ configChanged: false })}
+          />
+          {this.props.t("config-form.submit-success-notification")}
+        </div>
+      );
+    }
+    return null;
   };
 
   render() {
@@ -64,6 +92,7 @@ class GlobalConfig extends React.Component<Props> {
     return (
       <div>
         <Title title={t("global-config.title")} />
+        {this.renderConfigChangedNotification()}
         <ConfigForm
           submitForm={config => this.modifyConfig(config)}
           config={config}