implemented success banner for config changes

scm-ui-components/packages/ui-components/src/config/Configuration.js

@@ -2,12 +2,7 @@
 import React from "react";
 import { translate } from "react-i18next";
 import type { Links } from "@scm-manager/ui-types";
-import {
-  apiClient,
-  SubmitButton,
-  Loading,
-  ErrorNotification
-} from "../";
+import { apiClient, SubmitButton, Loading, ErrorNotification } from "../";
 
 type RenderProps = {
   readOnly: boolean,
@@ -20,7 +15,7 @@ type Props = {
   render: (props: RenderProps) => any, // ???
 
   // context props
-  t: (string) => string
+  t: string => string
 };
 
 type ConfigurationType = {
@@ -32,6 +27,7 @@ type State = {
   fetching: boolean,
   modifying: boolean,
   contentType?: string,
+  configChanged: boolean,
 
   configuration?: ConfigurationType,
   modifiedConfiguration?: ConfigurationType,
@@ -43,12 +39,12 @@ type State = {
  * synchronizing the configuration with the backend.
  */
 class Configuration extends React.Component<Props, State> {
-
   constructor(props: Props) {
     super(props);
     this.state = {
       fetching: true,
       modifying: false,
+      configChanged: false,
       valid: false
     };
   }
@@ -56,7 +52,8 @@ class Configuration extends React.Component<Props, State> {
   componentDidMount() {
     const { link } = this.props;
 
-    apiClient.get(link)
+    apiClient
+      .get(link)
       .then(this.captureContentType)
       .then(response => response.json())
       .then(this.loadConfig)
@@ -119,19 +116,39 @@ class Configuration extends React.Component<Props, State> {
 
     this.setState({ modifying: true });
 
-    const {modifiedConfiguration} = this.state;
+    const { modifiedConfiguration } = this.state;
 
-    apiClient.put(this.getModificationUrl(), modifiedConfiguration, this.getContentType())
-      .then(() => this.setState({ modifying: false }))
+    apiClient
+      .put(
+        this.getModificationUrl(),
+        modifiedConfiguration,
+        this.getContentType()
+      )
+      .then(() => this.setState({ modifying: false, configChanged: true }))
       .catch(this.handleError);
   };
 
+  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() {
     const { t } = this.props;
     const { fetching, error, configuration, modifying, valid } = this.state;
 
     if (error) {
-      return <ErrorNotification error={error}/>;
+      return <ErrorNotification error={error} />;
     } else if (fetching || !configuration) {
       return <Loading />;
     } else {
@@ -144,19 +161,21 @@ class Configuration extends React.Component<Props, State> {
       };
 
       return (
+        <>
+          {this.renderConfigChangedNotification()}
           <form onSubmit={this.modifyConfiguration}>
-          { this.props.render(renderProps) }
-          <hr/>
+            {this.props.render(renderProps)}
+            <hr />
             <SubmitButton
               label={t("config-form.submit")}
               disabled={!valid || readOnly}
               loading={modifying}
             />
           </form>
+        </>
       );
     }
   }
-
 }
 
 export default translate("config")(Configuration);

scm-ui/public/locales/en/config.json

@@ -10,6 +10,7 @@
   },
   "config-form": {
     "submit": "Submit",
+    "submit-success-notification": "Configuration changed!",
     "no-permission-notification": "Please note: You do not have the permission to edit the config!"
   },
   "proxy-settings": {

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}