SONAR-9921 Add keyboard shortcut to save setting

2 files changed, 50 insertions, 30 deletions

diff --git a/server/sonar-web/src/main/js/apps/settings/components/Definition.js b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
index fc63e9d8930..5c1f7f0b45f 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/Definition.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/Definition.js
@@ -78,15 +78,15 @@ class Definition extends React.PureComponent {
     }
   }
 
-  handleChange(value) {
+  handleChange = value => {
     clearTimeout(this.timeout);
     this.props.changeValue(this.props.setting.definition.key, value);
     if (this.props.setting.definition.type === TYPE_PASSWORD) {
       this.handleSave();
     }
-  }
+  };
 
-  handleReset() {
+  handleReset = () => {
     const componentKey = this.props.component ? this.props.component.key : null;
     const { definition } = this.props.setting;
     return this.props
@@ -98,27 +98,29 @@ class Definition extends React.PureComponent {
       .catch(() => {
         /* do nothing */
       });
-  }
+  };
 
-  handleCancel() {
+  handleCancel = () => {
     const componentKey = this.props.component ? this.props.component.key : null;
     this.props.cancelChange(this.props.setting.definition.key, componentKey);
     this.props.passValidation(this.props.setting.definition.key);
-  }
+  };
 
-  handleSave() {
-    this.safeSetState({ success: false });
-    const componentKey = this.props.component ? this.props.component.key : null;
-    this.props
-      .saveValue(this.props.setting.definition.key, componentKey)
-      .then(() => {
-        this.safeSetState({ success: true });
-        this.timeout = setTimeout(() => this.safeSetState({ success: false }), 3000);
-      })
-      .catch(() => {
-        /* do nothing */
-      });
-  }
+  handleSave = () => {
+    if (this.props.changedValue != null) {
+      this.safeSetState({ success: false });
+      const componentKey = this.props.component ? this.props.component.key : null;
+      this.props
+        .saveValue(this.props.setting.definition.key, componentKey)
+        .then(() => {
+          this.safeSetState({ success: true });
+          this.timeout = setTimeout(() => this.safeSetState({ success: false }), 3000);
+        })
+        .catch(() => {
+          /* do nothing */
+        });
+    }
+  };
 
   render() {
     const { setting, changedValue, loading } = this.props;
@@ -183,21 +185,24 @@ class Definition extends React.PureComponent {
             )}
           </div>
 
-          <Input setting={setting} value={effectiveValue} onChange={this.handleChange.bind(this)} />
+          <Input
+            setting={setting}
+            value={effectiveValue}
+            onCancel={this.handleCancel}
+            onChange={this.handleChange}
+            onSave={this.handleSave}
+          />
 
           {!hasValueChanged && (
             <DefinitionDefaults
               setting={setting}
               isDefault={isDefault}
-              onReset={() => this.handleReset()}
+              onReset={this.handleReset}
             />
           )}
 
           {hasValueChanged && (
-            <DefinitionChanges
-              onSave={this.handleSave.bind(this)}
-              onCancel={this.handleCancel.bind(this)}
-            />
+            <DefinitionChanges onSave={this.handleSave} onCancel={this.handleCancel} />
           )}
         </div>
       </div>
diff --git a/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js b/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js
index b628f69c7e6..dfee57a6023 100644
--- a/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js
+++ b/server/sonar-web/src/main/js/apps/settings/components/inputs/SimpleInput.js
@@ -26,12 +26,26 @@ export default class SimpleInput extends React.PureComponent {
     ...defaultInputPropTypes,
     value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     type: PropTypes.string.isRequired,
-    className: PropTypes.string.isRequired
+    className: PropTypes.string.isRequired,
+    onCancel: PropTypes.func,
+    onSave: PropTypes.func
   };
 
-  handleInputChange(e) {
-    this.props.onChange(e.target.value);
-  }
+  handleInputChange = event => {
+    this.props.onChange(event.currentTarget.value);
+  };
+
+  handleKeyDown = event => {
+    if (event.keyCode === 13) {
+      if (this.props.onSave) {
+        this.props.onSave();
+      }
+    } else if (event.keyCode === 27) {
+      if (this.props.onCancel) {
+        this.props.onCancel();
+      }
+    }
+  };
 
   render() {
     return (
@@ -40,7 +54,8 @@ export default class SimpleInput extends React.PureComponent {
         className={this.props.className + ' text-top'}
         type={this.props.type}
         value={this.props.value || ''}
-        onChange={e => this.handleInputChange(e)}
+        onChange={this.handleInputChange}
+        onKeyDown={this.handleKeyDown}
       />
     );
   }