MOCO Browser Extension (#2)

* spike * initial draft * updated styling * skeleton * added bubble script to webpack * added linter settings * installs * first implementation * Update webpack config - write bundle to `/build` - add support for SASS - improve options view as a proof o concept for styling * Update es-lint rules to mach mocoapp * Upgrade npm packages * Mount Bubble only for configured services * Update react and babel * Move module resolution config to webpack * Syncrhonize apiClient with chrome storage * Load projects and initialize form with last project and task * Enhance service * Improve handling of changeset with defaults * Create activity * Show error page on missing configuration * Refactor so that changeset can be used as activity params * Show form errors * Fetch and show booked hours for service * Allow to book hours with colon, error handling, spinner * WIP: Shadow DOM * Remove shadow dom * Render App in iframe * Refactor App component to load projects and create activity * Bugsnag integration * Add title to form and timer hint to hours input field * Configure positioning of bubble * Get rid of shared browser instance * Show Calendar and animate buble * Update webpack config * Prevent double animation of bubble * Fix eslint * Add margin to iframe body * Submit form when pressing enter on textarea * Open select on Enter * Use local environment for development * Show upgrade error if version invalid * Add asana service * Add jira and wunderlist services, add better support for query strings * Match urls with hash * Show popup in browser action * Pump version, add version to zip file * Add youtrack service * WIP: always show browserAction * Refactor * Update design * Finalize release 1.0.3 * Fix styles * Add support for Firefox browser * Extract common webpack config * Fix eslint * Close modal with ESC key * Use TimeInputParser to parse hours input * Improve webpack config * Show modal instead of popup when clicking on browser action * Pre-select last booked activities on service * Remove badge from booked hours * Show error and success feedback on options page * Remove updateBrowserActionForTab * Animate Bubble on unmount * Fix select date * Refactor * Fix key shortcut * Show schedule in calendar * Upload source maps to bugsnag * Upload sourcemaps to bugsnag * Define command shortcuts * Fix race condition where both Bubble and content wanted to mount Popup The content script is now the only place, where the Popup is mounted * Replace hash in filename by version * No new line in textarea and updated shortcuts for chrome * Change shortcut to Ctrl+Shift+K * Fix cors issue in new chrome 73 * Style improvements * Only report errors from own sources * Prevent sending messages to browser tabs * Fix scrollbars in iframe * Add error page for unknown error * Add stop propagation to Bubble click event * Update error pages * Remove timeout in tabHandler. The messaging error occurs only when the browser extension is reloaded/updated without refreshing the browser tab. * Refactor messaging * Show spinner in popup * Extract message handler to own module * Update styles and texts of error pages * Ensure focus is on document when opening popup * Find projects by identifier and value, do not highlight selected option in select component * Update docs * Spread match properties on service; improve remote service configuration for jira and wunderlist * Add webpack plugin to remove source mapping url * Bugsnag do not collect user ip * Upload source maps before removing source mapping url in bundles * Add support for regex url patterns, update asana config. * Fix animation Set default transform property via css * Improve config for asana * Change to fad-in/out animation
2019-03-22 15:56:24 +01:00
parent cbf79b960c
commit 28a9a86e27
58 changed files with 11017 additions and 47 deletions
--- a/src/js/content.js
+++ b/src/js/content.js
@@ -0,0 +1,115 @@
+import React, { createRef } from "react"
+import ReactDOM from "react-dom"
+import { Transition, animated, config } from "react-spring/renderprops"
+import Bubble from "./components/Bubble"
+import Popup from "components/Popup"
+import { createServiceFinder } from "utils/urlMatcher"
+import remoteServices from "./remoteServices"
+import { ErrorBoundary } from "utils/notifier"
+import { ContentMessenger } from "utils/messaging"
+import "../css/content.scss"
+
+const popupRef = createRef()
+const findService = createServiceFinder(remoteServices)(document)
+
+chrome.runtime.onConnect.addListener(function(port) {
+  const messenger = new ContentMessenger(port)
+
+  port.onDisconnect.addListener(() => {
+    messenger.stop()
+  })
+
+  function updateBubble({ service, bookedHours } = {}) {
+    if (!document.getElementById("moco-bx-root")) {
+      const domRoot = document.createElement("div")
+      domRoot.setAttribute("id", "moco-bx-root")
+      document.body.appendChild(domRoot)
+    }
+
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Transition
+          native
+          items={service}
+          from={{ opacity: "0" }}
+          enter={{ opacity: "1" }}
+          leave={{ opacity: "0" }}
+          config={config.stiff}
+        >
+          {service =>
+            service &&
+            // eslint-disable-next-line react/display-name
+            (props => (
+              <animated.div
+                className="moco-bx-bubble"
+                style={{ ...props, ...service.position }}
+              >
+                <Bubble
+                  key={service.url}
+                  bookedHours={bookedHours}
+                  onClick={event => {
+                    event.stopPropagation()
+                    messenger.postMessage({ type: "togglePopup" })
+                  }}
+                />
+              </animated.div>
+            ))
+          }
+        </Transition>
+      </ErrorBoundary>,
+      document.getElementById("moco-bx-root")
+    )
+  }
+
+  function openPopup(payload) {
+    if (!document.getElementById("moco-bx-popup-root")) {
+      const domRoot = document.createElement("div")
+      domRoot.setAttribute("id", "moco-bx-popup-root")
+      document.body.appendChild(domRoot)
+    }
+
+    ReactDOM.render(
+      <ErrorBoundary>
+        <Popup ref={popupRef} {...payload} onRequestClose={closePopup} />
+      </ErrorBoundary>,
+      document.getElementById("moco-bx-popup-root")
+    )
+  }
+
+  function closePopup() {
+    const domRoot = document.getElementById("moco-bx-popup-root")
+
+    if (domRoot) {
+      ReactDOM.unmountComponentAtNode(domRoot)
+      domRoot.remove()
+    }
+  }
+
+  messenger.on("requestService", () => {
+    const service = findService(window.location.href)
+    messenger.postMessage({
+      type: "newService",
+      payload: { isOpen: !!popupRef.current, service }
+    })
+  })
+
+  messenger.on("showBubble", ({ payload: { service, bookedHours } }) => {
+    updateBubble({ service, bookedHours })
+  })
+
+  messenger.on("hideBubble", () => {
+    updateBubble()
+  })
+
+  messenger.on("openPopup", ({ payload }) => {
+    openPopup(payload)
+  })
+
+  messenger.on("closePopup", () => {
+    closePopup()
+  })
+
+  messenger.on("activityCreated", () => {
+    closePopup()
+  })
+})