From fc28f4e02b31a48e3aa3fd61e104f5098a50f834 Mon Sep 17 00:00:00 2001
From: Wesley van der Sanden <wesley.vandersanden@coosto.com>
Date: Sat, 7 Oct 2017 23:13:23 +0200
Subject: [PATCH] Change 'Saved' indicator

The change indicator will show up next to the section title where the setting has been changed.

Closes #500
---
 src/browser/components/AutoSaveIndicator.jsx |  7 +++-
 src/browser/components/SettingsPage.jsx      | 37 ++++++++++++--------
 src/browser/css/settings.css                 | 11 +++---
 3 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/src/browser/components/AutoSaveIndicator.jsx b/src/browser/components/AutoSaveIndicator.jsx
index d2a16499..ae764ccd 100644
--- a/src/browser/components/AutoSaveIndicator.jsx
+++ b/src/browser/components/AutoSaveIndicator.jsx
@@ -21,8 +21,12 @@ function getClassNameAndMessage(savingState, errorMessage) {
 }
 
 function AutoSaveIndicator(props) {
-  const {savingState, errorMessage, ...rest} = props;
+  const {show, savingState, errorMessage, ...rest} = props;
   const {className, message} = getClassNameAndMessage(savingState, errorMessage);
+  if (!show) {
+    return null;
+  }
+
   return (
     <Alert
       className={className}
@@ -35,6 +39,7 @@ function AutoSaveIndicator(props) {
 }
 
 AutoSaveIndicator.propTypes = {
+  show: PropTypes.bool,
   savingState: PropTypes.string.isRequired,
   errorMessage: PropTypes.string
 };
diff --git a/src/browser/components/SettingsPage.jsx b/src/browser/components/SettingsPage.jsx
index eae6cbc4..307c05fe 100644
--- a/src/browser/components/SettingsPage.jsx
+++ b/src/browser/components/SettingsPage.jsx
@@ -65,7 +65,7 @@ const SettingsPage = createReactClass({
     });
   },
 
-  setSavingState(state) {
+  setSavingState(state, type) {
     if (!this.setSavingStateSaved) {
       this.setSavingStateSaved = debounce(() => {
         this.saveConfig((err) => {
@@ -82,14 +82,14 @@ const SettingsPage = createReactClass({
       clearTimeout(this.setSavingStateDoneTimer);
       this.setSavingStateDoneTimer = null;
     }
-    this.setState({savingState: state});
+    this.setState({savingState: state, savingType: type});
     if (state === 'saving') {
       this.setSavingStateSaved();
     }
   },
 
-  startSaveConfig() {
-    this.setSavingState('saving');
+  startSaveConfig(type = 'app') {
+    this.setSavingState('saving', type);
   },
 
   handleTeamsChange(teams) {
@@ -100,7 +100,7 @@ const SettingsPage = createReactClass({
     if (teams.length === 0) {
       this.setState({showAddTeamForm: true});
     }
-    setImmediate(this.startSaveConfig);
+    setImmediate(this.startSaveConfig, 'server');
   },
 
   saveConfig(callback) {
@@ -226,7 +226,7 @@ const SettingsPage = createReactClass({
     this.setState({
       teams
     });
-    setImmediate(this.startSaveConfig);
+    setImmediate(this.startSaveConfig, 'server');
   },
 
   addServer(team) {
@@ -235,7 +235,7 @@ const SettingsPage = createReactClass({
     this.setState({
       teams
     });
-    setImmediate(this.startSaveConfig);
+    setImmediate(this.startSaveConfig, 'server');
   },
 
   render() {
@@ -410,7 +410,8 @@ const SettingsPage = createReactClass({
       sectionHeading: {
         fontSize: '20px',
         margin: '0',
-        padding: '1em 0'
+        padding: '1em 0',
+        float: 'left'
       },
       sectionHeadingLink: {
         marginTop: '24px',
@@ -426,6 +427,13 @@ const SettingsPage = createReactClass({
       <Row>
         <Col md={12}>
           <h2 style={settingsPage.sectionHeading}>{'App Options'}</h2>
+          <div className='IndicatorContainer'>
+            <AutoSaveIndicator
+              show={this.state.savingType === 'app'}
+              savingState={this.state.savingState}
+              errorMessage={'Can\'t save your changes. Please try again.'}
+            />
+          </div>
           { options.map((opt, i) => (
             <FormGroup key={`fromGroup${i}`}>
               {opt}
@@ -441,12 +449,6 @@ const SettingsPage = createReactClass({
           className='navbar-fixed-top'
           style={settingsPage.navbar}
         >
-          <div className='IndicatorContainer'>
-            <AutoSaveIndicator
-              savingState={this.state.savingState}
-              errorMessage={'Can\'t save your changes. Please try again.'}
-            />
-          </div>
           <div style={{position: 'relative'}}>
             <h1 style={settingsPage.heading}>{'Settings'}</h1>
             <Button
@@ -470,6 +472,13 @@ const SettingsPage = createReactClass({
               xs={8}
             >
               <h2 style={settingsPage.sectionHeading}>{'Server Management'}</h2>
+              <div className='IndicatorContainer'>
+                <AutoSaveIndicator
+                  show={this.state.savingType === 'server'}
+                  savingState={this.state.savingState}
+                  errorMessage={'Can\'t save your changes. Please try again.'}
+                />
+              </div>
             </Col>
             <Col
               md={2}
diff --git a/src/browser/css/settings.css b/src/browser/css/settings.css
index 0d5a3b65..8b9999a6 100644
--- a/src/browser/css/settings.css
+++ b/src/browser/css/settings.css
@@ -1,15 +1,12 @@
 
 .IndicatorContainer {
-  position: absolute;
-  height: 100%;
-  display: flex;
-  flex-flow: row;
-  justify-content: flex-start;
-  align-items: center;
+  float: left;
+  padding: 1em;
 }
 
 .AutoSaveIndicator {
-  margin: 0;
+  padding: 5px 15px;
+  margin: 0 0 0 10px;
 }
 
 .AutoSaveIndicator.AutoSaveIndicator-Leave {