Show error page on missing configuration

src/js/background.js

@@ -1,9 +1,9 @@
-import { parseServices, createMatcher } from 'utils/urlMatcher'
+import { createMatcher } from "utils/urlMatcher"
 import remoteServices from "./remoteServices"
 
-const services = parseServices(remoteServices)
-const matcher = createMatcher(services)
+const matcher = createMatcher(remoteServices)
 const { version } = chrome.runtime.getManifest()
+const registeredTabIds = new Set()
 
 chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   // run only after the page is fully loaded
@@ -14,19 +14,42 @@ chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
   const service = matcher(tab.url)
 
   if (service) {
+    registeredTabIds.add(tabId)
     chrome.storage.sync.get(
       ["subdomain", "apiKey"],
       ({ subdomain, apiKey }) => {
-        const settings = { subdomain, apiKey, version }
-        const payload = { serviceKey: service.key, settings }
-        chrome.tabs.sendMessage(tabId, { type: "mountBubble", payload }, () => {
-          console.log("bubble mounted")
-        })
+        const payload = { subdomain, apiKey, version }
+        chrome.tabs.sendMessage(tabId, { type: "mountBubble", payload })
       }
     )
   } else {
-    chrome.tabs.sendMessage(tabId, { type: "unmountBubble" }, () => {
-      console.log("bubble unmounted")
-    })
+    registeredTabIds.delete(tabId)
+    chrome.tabs.sendMessage(tabId, { type: "unmountBubble" })
+  }
+})
+
+chrome.tabs.onRemoved.addListener(tabId => registeredTabIds.delete(tabId))
+
+chrome.storage.onChanged.addListener(({ apiKey, subdomain }, areaName) => {
+  if (areaName === "sync" && (apiKey || subdomain)) {
+    chrome.storage.sync.get(
+      ["subdomain", "apiKey"],
+      ({ subdomain, apiKey }) => {
+        const payload = { subdomain, apiKey, version }
+        for (let tabId of registeredTabIds.values()) {
+          chrome.tabs.sendMessage(tabId, { type: "mountBubble", payload })
+        }
+      }
+    )
+  }
+})
+
+chrome.runtime.onMessage.addListener(({ type }) => {
+  switch (type) {
+    case "openOptions": {
+      chrome.tabs.create({
+        url: `chrome://extensions/?options=${chrome.runtime.id}`
+      })
+    }
   }
 })

src/js/components/Bubble.js

@@ -2,9 +2,10 @@ import React, { Component } from "react"
 import PropTypes from "prop-types"
 import ApiClient from "api/Client"
 import Modal, { Content } from "components/Modal"
+import MissingConfigurationError from "components/MissingConfigurationError"
 import Form from "components/Form"
-import { observable, computed } from "mobx"
-import { observer } from "mobx-react"
+import { observable, computed, reaction } from "mobx"
+import { observer, disposeOnUnmount } from "mobx-react"
 import logoUrl from "images/logo.png"
 import {
   findLastProject,
@@ -12,6 +13,7 @@ import {
   groupedProjectOptions,
   currentDate
 } from "utils"
+import { head } from "lodash"
 
 @observer
 class Bubble extends Component {
@@ -33,19 +35,20 @@ class Bubble extends Component {
 
   #apiClient;
 
-  @observable isLoading = true;
+  @observable isLoading = false;
   @observable isOpen = false;
   @observable projects;
   @observable lastProjectId;
   @observable lastTaskId;
   @observable changeset = {};
+  @observable errors = {};
 
   @computed get changesetWithDefaults() {
     const { service } = this.props
 
     const project =
       findLastProject(service.projectId || this.lastProjectId)(this.projects) ||
-      this.projects[0]
+      head(this.projects)
 
     const defaults = {
       id: service.id,
@@ -86,9 +89,17 @@ class Bubble extends Component {
   }
 
   componentDidMount() {
-    const { settings } = this.props
-    this.#apiClient = new ApiClient(settings)
-    this.fetchData()
+    disposeOnUnmount(
+      this,
+      reaction(
+        () =>
+          this.hasMissingConfiguration() ? null : this.props.settings,
+        this.fetchData,
+        {
+          fireImmediately: true
+        }
+      )
+    )
     window.addEventListener("keydown", this.handleKeyDown)
   }
 
@@ -104,16 +115,28 @@ class Bubble extends Component {
     this.isOpen = false
   };
 
-  fetchData = () => {
+  hasMissingConfiguration = () => {
+    const { settings } = this.props
+    return ["subdomain", "apiKey", "version"].some(key => !settings[key])
+  };
+
+  fetchData = settings => {
+    if (!settings) {
+      return
+    }
+
+    this.isLoading = true
+
+    this.#apiClient = new ApiClient(settings)
     this.#apiClient
       .projects()
       .then(({ data }) => {
         this.projects = groupedProjectOptions(data.projects)
         this.lastProjectId = data.last_project_id
         this.lastTaskId = data.lastTaskId
-        this.isLoading = false
       })
       .catch(console.error)
+      .finally(() => (this.isLoading = false))
   };
 
   // EVENT HANDLERS -----------------------------------------------------------
@@ -151,6 +174,23 @@ class Bubble extends Component {
       return null
     }
 
+    let content
+    if (this.hasMissingConfiguration()) {
+      content = <MissingConfigurationError />
+    } else if (this.isOpen) {
+      content = (
+        <Form
+          projects={this.projects}
+          changeset={this.changesetWithDefaults}
+          isLoading={this.isLoading}
+          onChange={this.handleChange}
+          onSubmit={this.handleSubmit}
+        />
+      )
+    } else {
+      content = null
+    }
+
     return (
       <>
         <img
@@ -158,18 +198,9 @@ class Bubble extends Component {
           src={chrome.extension.getURL(logoUrl)}
           width="50%"
         />
-
         {this.isOpen && (
           <Modal>
-            <Content>
-              <Form
-                projects={this.projects}
-                changeset={this.changesetWithDefaults}
-                isLoading={this.isLoading}
-                onChange={this.handleChange}
-                onSubmit={this.handleSubmit}
-              />
-            </Content>
+            <Content>{content}</Content>
           </Modal>
         )}
       </>

src/js/components/MissingConfigurationError.js

@@ -0,0 +1,22 @@
+import React from "react"
+import configurationSettingsUrl from "images/configurationSettings.png"
+
+const MissingConfigurationError = () => (
+  <div>
+    <h2>Fehlende Konfiguration</h2>
+    <p>
+      Bitte trage deine Internetadresse und deinen API-Schlüssel in den
+      Einstellungen der MOCO Browser-Erweiterung ein. Deinen API-Key findest du
+      in der MOCO App in deinem Profil im Register &quot;Integrationen&quot;.
+    </p>
+    <button onClick={() => chrome.runtime.sendMessage({ type: "openOptions" })}>
+      Einstellungen öffnen
+    </button>
+    <img
+      src={chrome.extension.getURL(configurationSettingsUrl)}
+      alt="Browser extension configuration settings"
+    />
+  </div>
+)
+
+export default MissingConfigurationError

src/js/content.js

@@ -2,10 +2,13 @@ import { createElement } from "react"
 import ReactDOM from "react-dom"
 import Bubble from "./components/Bubble"
 import services from "remoteServices"
-import { createEnhancer } from "utils/urlMatcher"
+import { parseServices, createMatcher, createEnhancer } from "utils/urlMatcher"
+import remoteServices from "./remoteServices"
+import { pipe } from 'lodash/fp'
 import "../css/main.scss"
 
-const serviceEnhancer = createEnhancer(window.document)(services)
+const matcher = createMatcher(remoteServices)
+const serviceEnhancer = createEnhancer(window.document)
 
 chrome.runtime.onMessage.addListener(({ type, payload }) => {
   switch (type) {
@@ -19,7 +22,16 @@ chrome.runtime.onMessage.addListener(({ type, payload }) => {
   }
 })
 
-const mountBubble = ({ serviceKey, settings }) => {
+const mountBubble = (settings) => {
+  const service = pipe(
+    matcher,
+    serviceEnhancer(window.location.href)
+  )(window.location.href)
+
+  if (!service) {
+    return
+  }
+
   if (!document.getElementById("moco-bx-container")) {
     const domContainer = document.createElement("div")
     domContainer.setAttribute("id", "moco-bx-container")
@@ -32,7 +44,6 @@ const mountBubble = ({ serviceKey, settings }) => {
     document.body.appendChild(domBubble)
   }
 
-  const service = serviceEnhancer(serviceKey, window.location.href)
   ReactDOM.render(
     createElement(Bubble, { service, settings }),
     document.getElementById("moco-bx-bubble")

src/js/utils/index.js

@@ -60,3 +60,5 @@ export const trace = curry((tag, value) => {
 
 export const currentDate = (locale = "de") =>
   format(new Date(), "YYYY-MM-DD", { locale })
+
+export const extensionSettingsUrl = () => `chrome://extensions/?id=${chrome.runtime.id}`

src/js/utils/urlMatcher.js

@@ -13,7 +13,7 @@ const createEvaluator = args => fnOrValue => {
   return fnOrValue
 }
 
-export const parseServices = compose(
+const parseServices = compose(
   map(([key, config]) => ({
     ...config,
     key,
@@ -22,9 +22,11 @@ export const parseServices = compose(
   toPairs
 )
 
-export const createEnhancer = document => services => (key, url) => {
-  const service = services[key]
-  service.key = key
+export const createEnhancer = document => url => service => {
+  if (!service) {
+    return
+  }
+
   const route = new Route(service.urlPattern)
   const match = route.match(url)
   const args = [document, service, match]
@@ -32,14 +34,15 @@ export const createEnhancer = document => services => (key, url) => {
 
   return {
     ...service,
-    key,
     url,
     id: evaluate(service.id) || match.id,
     description: evaluate(service.description),
     projectId: evaluate(service.projectId),
-    taskId: evaluate(service.taskId),
+    taskId: evaluate(service.taskId)
   }
 }
 
-export const createMatcher = services => url =>
-  services.find(service => service.route.match(url))
+export const createMatcher = remoteServices => {
+  const services = parseServices(remoteServices)
+  return url => services.find(service => service.route.match(url))
+}