From 8fb3808dc495e9ec94886dcf5eac5632c869f67d Mon Sep 17 00:00:00 2001
From: Mathieu Suen <mathieu.suen@sonarsource.com>
Date: Tue, 7 Jan 2020 15:54:42 +0100
Subject: [PATCH] SONAR-12613: Add confirmation when saving the project New
 Code period Setting

---
 .../apps/projectBaseline/components/App.tsx   | 25 ++++++++++++++++---
 1 file changed, 22 insertions(+), 3 deletions(-)

diff --git a/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx b/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx
index 3b999b9ac13..08c4b262f0a 100644
--- a/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx
+++ b/server/sonar-web/src/main/js/apps/projectBaseline/components/App.tsx
@@ -17,9 +17,12 @@
  * along with this program; if not, write to the Free Software Foundation,
  * Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
  */
+import * as classNames from 'classnames';
+import { debounce } from 'lodash';
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import { Link } from 'react-router';
+import AlertSuccessIcon from 'sonar-ui-common/components/icons/AlertSuccessIcon';
 import DeferredSpinner from 'sonar-ui-common/components/ui/DeferredSpinner';
 import { translate } from 'sonar-ui-common/helpers/l10n';
 import { getNewCodePeriod, resetNewCodePeriod, setNewCodePeriod } from '../../../api/newCodePeriod';
@@ -47,6 +50,7 @@ interface State {
   overrideGeneralSetting?: boolean;
   saving: boolean;
   selected?: T.NewCodePeriodSettingType;
+  success?: boolean;
 }
 
 const DEFAULT_GENERAL_SETTING: { type: T.NewCodePeriodSettingType } = {
@@ -61,6 +65,9 @@ export default class App extends React.PureComponent<Props, State> {
     saving: false
   };
 
+  // We use debounce as we could have multiple save in less that 3sec.
+  resetSuccess = debounce(() => this.setState({ success: undefined }), 3000);
+
   componentDidMount() {
     this.mounted = true;
     this.fetchLeakPeriodSetting();
@@ -128,8 +135,10 @@ export default class App extends React.PureComponent<Props, State> {
         this.setState({
           saving: false,
           currentSetting: undefined,
-          selected: undefined
+          selected: undefined,
+          success: true
         });
+        this.resetSuccess();
       },
       () => {
         this.setState({ saving: false });
@@ -176,8 +185,10 @@ export default class App extends React.PureComponent<Props, State> {
           this.setState({
             saving: false,
             currentSetting: type,
-            currentSettingValue: value || undefined
+            currentSettingValue: value || undefined,
+            success: true
           });
+          this.resetSuccess();
         },
         () => {
           this.setState({ saving: false });
@@ -232,7 +243,8 @@ export default class App extends React.PureComponent<Props, State> {
       currentSettingValue,
       overrideGeneralSetting,
       saving,
-      selected
+      selected,
+      success
     } = this.state;
 
     return (
@@ -266,6 +278,13 @@ export default class App extends React.PureComponent<Props, State> {
                   selected={selected}
                 />
               )}
+
+              <div className={classNames('spacer-top', { invisible: saving || !success })}>
+                <span className="text-success">
+                  <AlertSuccessIcon className="spacer-right" />
+                  {translate('settings.state.saved')}
+                </span>
+              </div>
               {generalSetting && branchesEnabled && (
                 <div className="huge-spacer-top branch-baseline-selector">
                   <hr />
-- 
2.39.5