Browser extension fixes (#8)

* Set full url on service

* Link logo to `/activities` in modal

* Update changelog

* Honor the selected task and set the correct billability

src/js/background.js

@@ -1,3 +1,4 @@
+import "@babel/polyfill"
 import ApiClient from "api/Client"
 import {
   isChrome,

src/js/components/App.js

@@ -36,6 +36,7 @@ class App extends Component {
       projectId: PropTypes.string,
       taskId: PropTypes.string
     }),
+    subdomain: PropTypes.string,
     activities: PropTypes.array,
     schedules: PropTypes.array,
     projects: PropTypes.array,
@@ -62,12 +63,14 @@ class App extends Component {
     const { service, projects, lastProjectId, lastTaskId } = this.props
 
     const project =
+      findProjectByValue(this.changeset.assignment_id)(projects) ||
       findProjectByIdentifier(service?.projectId)(projects) ||
       findProjectByValue(Number(lastProjectId))(projects) ||
       head(projects)
 
     const task =
-      findTask(service?.taskId || lastTaskId)(project) || head(project?.tasks)
+      findTask(this.changeset.task_id || service?.taskId || lastTaskId)(project) ||
+      head(project?.tasks)
 
     const defaults = {
       remote_service: service?.name,
@@ -108,7 +111,7 @@ class App extends Component {
 
     if (name === "assignment_id") {
       const project = findProjectByValue(value)(projects)
-      this.changeset.task_id = head(project?.tasks).value || null
+      this.changeset.task_id =  head(project?.tasks)?.value
     }
   };
 
@@ -145,6 +148,7 @@ class App extends Component {
   render() {
     const {
       loading,
+      subdomain,
       projects,
       activities,
       schedules,
@@ -179,7 +183,7 @@ class App extends Component {
       >
         {props => (
           <animated.div className="moco-bx-app-container" style={props}>
-            <Header />
+            <Header subdomain={subdomain} />
             <Observer>
               {() => (
                 <>

src/js/components/Popup.js

@@ -52,6 +52,7 @@ class Popup extends Component {
     const serializedProps = serializeProps([
       "loading",
       "service",
+      "subdomain",
       "lastProjectId",
       "lastTaskId",
       "roundTimeEntries",

src/js/components/shared/Header.js

@@ -1,13 +1,20 @@
 import React from 'react'
+import PropTypes from 'prop-types'
 import logoUrl from "images/logo.png"
 
-const Header = () => (
+const Header = ({ subdomain }) => (
   <div className="moco-bx-logo__container">
-    <img
-      className="moco-bx-logo"
-      src={chrome.extension.getURL(logoUrl)}
-    />
+    <a href={`https://${subdomain}.mocoapp.com/activities`} target="_blank" rel="noopener noreferrer">
+      <img
+        className="moco-bx-logo"
+        src={chrome.extension.getURL(logoUrl)}
+      />
+    </a>
   </div>
 )
 
+Header.propTypes = {
+  subdomain: PropTypes.string
+}
+
 export default Header

src/js/popup.js

@@ -9,6 +9,7 @@ import "../css/popup.scss"
 const parsedProps = parseProps([
   "loading",
   "service",
+  "subdomain",
   "projects",
   "activities",
   "schedules",

src/js/utils/messageHandlers.js

@@ -76,52 +76,50 @@ export function togglePopup(tab, { messenger }) {
   }
 }
 
-function openPopup(tab, { service, messenger }) {
+async function openPopup(tab, { service, messenger }) {
   messenger.postMessage(tab, { type: "openPopup", payload: { loading: true } })
 
   const fromDate = getStartOfWeek()
   const toDate = getEndOfWeek()
-  getSettings()
-    .then(settings => new ApiClient(settings))
-    .then(apiClient =>
-      Promise.all([
-        apiClient.login(service),
-        apiClient.projects(),
-        apiClient.activities(fromDate, toDate),
-        apiClient.schedules(fromDate, toDate)
-      ])
-    )
-    .then(responses => {
-      const action = {
-        type: "openPopup",
-        payload: {
-          service,
-          lastProjectId: get("[0].data.last_project_id", responses),
-          lastTaskId: get("[0].data.last_task_id", responses),
-          roundTimeEntries: get("[0].data.round_time_entries", responses),
-          projects: groupedProjectOptions(get("[1].data.projects", responses)),
-          activities: get("[2].data", responses),
-          schedules: get("[3].data", responses),
-          fromDate,
-          toDate,
-          loading: false
-        }
+  const settings = await getSettings()
+  const apiClient = new ApiClient(settings)
+  try {
+    const responses = await Promise.all([
+      apiClient.login(service),
+      apiClient.projects(),
+      apiClient.activities(fromDate, toDate),
+      apiClient.schedules(fromDate, toDate)
+    ])
+    const action = {
+      type: "openPopup",
+      payload: {
+        service,
+        subdomain: settings.subdomain,
+        lastProjectId: get("[0].data.last_project_id", responses),
+        lastTaskId: get("[0].data.last_task_id", responses),
+        roundTimeEntries: get("[0].data.round_time_entries", responses),
+        projects: groupedProjectOptions(get("[1].data.projects", responses)),
+        activities: get("[2].data", responses),
+        schedules: get("[3].data", responses),
+        fromDate,
+        toDate,
+        loading: false
       }
-      messenger.postMessage(tab, action)
-    })
-    .catch(error => {
-      let errorType, errorMessage
-      if (error.response?.status === 401) {
-        errorType = ERROR_UNAUTHORIZED
-      } else if (error.response?.status === 426) {
-        errorType = ERROR_UPGRADE_REQUIRED
-      } else {
-        errorType = ERROR_UNKNOWN
-        errorMessage = error.message
-      }
-      messenger.postMessage(tab, {
-        type: "openPopup",
-        payload: { errorType, errorMessage }
-      })
+    }
+    messenger.postMessage(tab, action)
+  } catch (error) {
+    let errorType, errorMessage
+    if (error.response?.status === 401) {
+      errorType = ERROR_UNAUTHORIZED
+    } else if (error.response?.status === 426) {
+      errorType = ERROR_UPGRADE_REQUIRED
+    } else {
+      errorType = ERROR_UNKNOWN
+      errorMessage = error.message
+    }
+    messenger.postMessage(tab, {
+      type: "openPopup",
+      payload: { errorType, errorMessage }
     })
+  }
 }

src/js/utils/urlMatcher.js

@@ -88,7 +88,7 @@ export const createMatcher = remoteServices => {
     return {
       ...match,
       ...service,
-      url,
+      url: tabUrl,
       match
     }
   }