feature/host-overrides (#161)

* configurable host overrides

* base host overrides on name of service instead of key and hide the options by default

* added unit tests

* review changes

* Refactor options

* Refactor

* Update Readme

* Pump version and update Changelog

Co-authored-by: Tobias Jacksteit <me@xtj7.de>

src/js/components/App.js

@@ -119,7 +119,7 @@ class App extends Component {
     chrome.runtime.onMessage.removeListener(this.handleSetFormErrors)
   }
 
-  handleChange = event => {
+  handleChange = (event) => {
     const { projects } = this.props
     const {
       target: { name, value },
@@ -133,11 +133,11 @@ class App extends Component {
     }
   }
 
-  handleSelectDate = date => {
+  handleSelectDate = (date) => {
     this.changeset.date = formatDate(date)
   }
 
-  handleStopTimer = timedActivity => {
+  handleStopTimer = (timedActivity) => {
     const { service } = this.props
 
     chrome.runtime.sendMessage({
@@ -146,7 +146,7 @@ class App extends Component {
     })
   }
 
-  handleSubmit = event => {
+  handleSubmit = (event) => {
     event.preventDefault()
     const { service } = this.props
 
@@ -159,7 +159,7 @@ class App extends Component {
     })
   }
 
-  handleKeyDown = event => {
+  handleKeyDown = (event) => {
     if (event.keyCode === 27) {
       event.stopPropagation()
       chrome.runtime.sendMessage({ type: "closePopup" })
@@ -204,7 +204,7 @@ class App extends Component {
 
     return (
       <Spring native from={{ opacity: 0 }} to={{ opacity: 1 }} config={config.stiff}>
-        {props => (
+        {(props) => (
           <animated.div className="moco-bx-app-container" style={props}>
             <Header subdomain={subdomain} />
             <Observer>

src/js/components/Options.js

@@ -3,32 +3,58 @@ import { observable } from "mobx"
 import { observer } from "mobx-react"
 import { isChrome, getSettings, setStorage } from "utils/browser"
 import ApiClient from "api/Client"
+import { pipe, toPairs, fromPairs, map } from "lodash/fp"
+
+function upperCaseFirstLetter(input) {
+  return input[0].toUpperCase() + input.slice(1)
+}
+
+function removePathFromUrl(url) {
+  return url.replace(/(\.[a-z]+)\/.*$/, "$1")
+}
 
 @observer
 class Options extends Component {
   @observable subdomain = ""
   @observable apiKey = ""
+  @observable hostOverrides = {}
   @observable errorMessage = null
   @observable isSuccess = false
+  @observable showHostOverrideOptions = false
 
   componentDidMount() {
-    getSettings(false).then(({ subdomain, apiKey }) => {
-      this.subdomain = subdomain || ""
-      this.apiKey = apiKey || ""
+    getSettings(false).then((settings) => {
+      this.subdomain = settings.subdomain || ""
+      this.apiKey = settings.apiKey || ""
+      this.hostOverrides = settings.hostOverrides
     })
   }
 
-  onChange = event => {
+  handleChange = (event) => {
     this[event.target.name] = event.target.value.trim()
   }
 
-  handleSubmit = _event => {
+  handleChangeHostOverrides = (event) => {
+    this.hostOverrides[event.target.name] = event.target.value.trim()
+  }
+
+  toggleHostOverrideOptions = () => {
+    this.showHostOverrideOptions = !this.showHostOverrideOptions
+  }
+
+  handleSubmit = (_event) => {
     this.isSuccess = false
     this.errorMessage = null
+
     setStorage({
       subdomain: this.subdomain,
       apiKey: this.apiKey,
       settingTimeTrackingHHMM: false,
+      hostOverrides: pipe(
+        toPairs,
+        map(([key, url]) => [key, removePathFromUrl(url)]),
+        fromPairs,
+      )(this.hostOverrides),
     }).then(() => {
       const { version } = chrome.runtime.getManifest()
       const apiClient = new ApiClient({
@@ -45,13 +71,13 @@ class Options extends Component {
           this.isSuccess = true
           this.closeWindow()
         })
-        .catch(error => {
+        .catch((error) => {
           this.errorMessage = error.response?.data?.message || "Anmeldung fehlgeschlagen"
         })
     })
   }
 
-  handleInputKeyDown = event => {
+  handleInputKeyDown = (event) => {
     if (event.key === "Enter") {
       this.handleSubmit()
     }
@@ -75,9 +101,9 @@ class Options extends Component {
               name="subdomain"
               value={this.subdomain}
               onKeyDown={this.handleInputKeyDown}
-              onChange={this.onChange}
+              onChange={this.handleChange}
             />
-            <span className="input-group-addon">.mocoapp.com</span>
+            <span className="input-group-addon input-group-addon--right">.mocoapp.com</span>
           </div>
         </div>
         <div className="form-group">
@@ -87,12 +113,59 @@ class Options extends Component {
             name="apiKey"
             value={this.apiKey}
             onKeyDown={this.handleInputKeyDown}
-            onChange={this.onChange}
+            onChange={this.handleChange}
           />
           <p className="text-muted">
             Den API-Schlüssel findest du in deinem Profil unter &quot;Integrationen&quot;.
           </p>
         </div>
+        {!this.showHostOverrideOptions && (
+          <div className="moco-bx-options__host-overrides">
+            <a href="#" className="moco-bx-btn__secondary" onClick={this.toggleHostOverrideOptions}>
+              Service-URLs überschreiben?
+            </a>
+          </div>
+        )}
+        {this.showHostOverrideOptions && (
+          <div style={{ marginBottom: "1.5rem" }}>
+            <h3 style={{ marginBottom: 0 }}>Service-URLs</h3>
+            <small>
+              Doppelpunkt für Platzhalter verwenden, z.B.{" "}
+              <span style={{ backgroundColor: "rgba(100, 100, 100, 0.1)" }}>:org</span>. Siehe{" "}
+              <a
+                href="https://github.com/hundertzehn/mocoapp-browser-extension#remote-service-configuration"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                Online-Doku
+              </a>
+              .
+            </small>
+            <br />
+            {pipe(
+              Object.entries,
+              Array.from,
+            )(this.hostOverrides).map(([name, host]) => (
+              <div className="form-group" key={name} style={{ margin: "0.5rem 0" }}>
+                <div className="input-group">
+                  <span
+                    className="input-group-addon input-group-addon--left"
+                    style={{ display: "inline-block", width: "70px", textAlign: "left" }}
+                  >
+                    {upperCaseFirstLetter(name)}
+                  </span>
+                  <input
+                    type="text"
+                    name={name}
+                    value={host}
+                    onKeyDown={this.handleInputKeyDown}
+                    onChange={this.handleChangeHostOverrides}
+                  />
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
         <button className="moco-bx-btn" onClick={this.handleSubmit}>
           OK
         </button>