Support changing the server name by clicking it in the status tab

client/src/js/components/ui/Editable.js

@@ -0,0 +1,54 @@
+import React, { PureComponent } from 'react';
+
+const style = {
+  background: 'none',
+  font: 'inherit'
+};
+
+export default class Editable extends PureComponent {
+  state = { editing: false };
+
+  startEditing = () => {
+    if (this.props.editable) {
+      this.initialValue = this.props.value;
+      this.setState({ editing: true });
+    }
+  };
+
+  stopEditing = () => {
+    const { validate, value, onChange } = this.props;
+    if (validate && !validate(value)) {
+      onChange(this.initialValue);
+    }
+    this.setState({ editing: false });
+  };
+
+  handleKey = e => {
+    if (e.key === 'Enter') {
+      this.stopEditing();
+    }
+  };
+
+  handleChange = e => this.props.onChange(e.target.value);
+
+  render() {
+    const { children, className, value } = this.props;
+    return (
+      <div onClick={this.startEditing}>
+        {this.state.editing ?
+          <input
+            autoFocus
+            className={className}
+            style={style}
+            type="text"
+            value={value}
+            onBlur={this.stopEditing}
+            onChange={this.handleChange}
+            onKeyDown={this.handleKey}
+          /> :
+          children
+        }
+      </div>
+    );
+  }
+}