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

@@ -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
 };

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}

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 {