apairon/mocoapp-browser-extension
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge branch 'feature/host-overrides' of https://github.com/yay-digital/mocoapp-browser-extension into yay-digital-feature/host-overrides

Browse Source
This commit is contained in:
Manuel Bouza
2020-06-12 13:42:03 +02:00
parent a13e30784c d02b2b2efb
commit 65e7a64c62
8 changed files with 200 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
src/css/options.scss
View File

@@ -38,5 +38,16 @@
.text-danger {
color: $red;
}
.moco-bx-override-hosts {
&-container {
padding: 0 20px;
text-align: center;
}
&-btn {
cursor: pointer;
text-decoration: underline;
}
}
}
}

65
src/js/components/Options.js
View File

@@ -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 remoteServices from "../remoteServices"
import { pipe, prop, map, sortedUniqBy, filter } from "lodash/fp"
@observer
class Options extends Component {
@observable subdomain = ""
@observable apiKey = ""
@observable hostOverrides = {}
@observable errorMessage = null
@observable isSuccess = false
@observable servicesHostOverrideList = []
@observable showHostOverrideOptions = false
componentDidMount() {
getSettings(false).then(({ subdomain, apiKey }) => {
this.subdomain = subdomain || ""
this.apiKey = apiKey || ""
this.servicesHostOverrideList = pipe(
filter(prop("allowHostOverride")),
map((remoteService) => ({
name: remoteService.name,
host: remoteService.host,
})),
sortedUniqBy("name"),
)(remoteServices)
getSettings(false).then((storeData) => {
this.subdomain = storeData.subdomain || ""
this.apiKey = storeData.apiKey || ""
this.hostOverrides = storeData.hostOverrides || {}
})
}
onChange = event => {
onChange = (event) => {
this[event.target.name] = event.target.value.trim()
}
handleSubmit = _event => {
onChangeHostOverrides = (event) => {
// ensure to remove path (and trailing slash) from URL, as this can cause problems otherwise
this.hostOverrides[event.target.name] = this.removePathFromUrl(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: this.hostOverrides,
}).then(() => {
const { version } = chrome.runtime.getManifest()
const apiClient = new ApiClient({
@@ -45,13 +71,17 @@ class Options extends Component {
this.isSuccess = true
this.closeWindow()
})
.catch(error => {
.catch((error) => {
this.errorMessage = error.response?.data?.message || "Anmeldung fehlgeschlagen"
})
})
}
handleInputKeyDown = event => {
removePathFromUrl = (url) => {
return url.replace(/(\.[a-z]+)\/.*$/, "$1")
}
handleInputKeyDown = (event) => {
if (event.key === "Enter") {
this.handleSubmit()
}
@@ -93,6 +123,27 @@ class Options extends Component {
Den API-Schlüssel findest du in deinem Profil unter "Integrationen".
</p>
</div>
<hr />
{!this.showHostOverrideOptions && (
<div className="moco-bx-override-hosts-container">
<span className="moco-bx-override-hosts-btn" onClick={this.toggleHostOverrideOptions}>Zeige Optionen zum Überschreiben<br />der Service Hosts</span>
</div>
)}
{this.showHostOverrideOptions &&
this.servicesHostOverrideList.map((remoteService) => (
<div className="form-group" key={remoteService.name}>
<label>Host URL: {remoteService.name}</label>
<input
type="text"
name={remoteService.name}
value={this.hostOverrides[remoteService.name] || ""}
placeholder={remoteService.host}
onKeyDown={this.handleInputKeyDown}
onChange={this.onChangeHostOverrides}
/>
</div>
))}
<hr />
<button className="moco-bx-btn" onClick={this.handleSubmit}>
OK
</button>

7
src/js/content.js
View File

@@ -8,9 +8,14 @@ import { createServiceFinder } from "utils/urlMatcher"
import remoteServices from "./remoteServices"
import { ContentMessenger } from "utils/messaging"
import "../css/content.scss"
import { getSettings } from "./utils/browser"
const popupRef = createRef()
const findService = createServiceFinder(remoteServices)(document)
let findService
getSettings().then((settings) => {
findService = createServiceFinder(remoteServices, settings.hostOverrides)(document)
})
chrome.runtime.onConnect.addListener(function (port) {
const messenger = new ContentMessenger(port)

58
src/js/remoteServices.js
View File

@@ -9,9 +9,10 @@ const projectIdentifierBySelector = selector => document =>
export default {
asana: {
name: "asana",
host: "https://app.asana.com",
urlPatterns: [
[/^https:\/\/app.asana.com\/0\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
[/^https:\/\/app.asana.com\/0\/search\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
[/^__HOST__\/0\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
[/^__HOST__\/0\/search\/([^/]+)\/(\d+)/, ["domainUserId", "id"]],
],
description: document =>
document.querySelector(".ItemRow--highlighted textarea")?.textContent?.trim() ||
@@ -19,32 +20,38 @@ export default {
document.querySelector(".SingleTaskPane textarea")?.textContent?.trim() ||
document.querySelector(".SingleTaskTitleInput-taskName textarea")?.textContent?.trim(),
projectId: projectIdentifierBySelector(".TopbarPageHeaderStructure-titleRow h1"),
allowHostOverride: false,
},
"github-pr": {
name: "github",
urlPatterns: ["https\\://github.com/:org/:repo/pull/:id(/:tab)"],
host: "https://github.com",
urlPatterns: ["__HOST__/:org/:repo/pull/:id(/:tab)"],
id: (document, service, { org, repo, id }) => [service.key, org, repo, id].join("."),
description: document => document.querySelector(".js-issue-title")?.textContent?.trim(),
projectId: projectIdentifierBySelector(".js-issue-title"),
allowHostOverride: true,
},
"github-issue": {
name: "github",
urlPatterns: ["https\\://github.com/:org/:repo/issues/:id"],
host: "https://github.com",
urlPatterns: ["__HOST__/:org/:repo/issues/:id"],
id: (document, service, { org, repo, id }) => [service.key, org, repo, id].join("."),
description: (document, service, { org, repo, id }) =>
document.querySelector(".js-issue-title")?.textContent?.trim(),
projectId: projectIdentifierBySelector(".js-issue-title"),
allowHostOverride: true,
},
jira: {
name: "jira",
host: "https://:org.atlassian.net",
urlPatterns: [
"https\\://:org.atlassian.net/secure/RapidBoard.jspa",
"https\\://:org.atlassian.net/browse/:id",
"https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board",
"https\\://:org.atlassian.net/jira/software/projects/:projectId/boards/:board/backlog",
"__HOST__/secure/RapidBoard.jspa",
"__HOST__/browse/:id",
"__HOST__/jira/software/projects/:projectId/boards/:board",
"__HOST__/jira/software/projects/:projectId/boards/:board/backlog",
],
queryParams: {
id: "selectedIssue",
@@ -59,11 +66,13 @@ export default {
document.querySelector(".ghx-selected .ghx-summary")?.textContent?.trim()
return `#${id} ${title || ""}`
},
allowHostOverride: true,
},
meistertask: {
name: "meistertask",
urlPatterns: ["https\\://www.meistertask.com/app/task/:id/:slug"],
host: "https://www.meistertask.com",
urlPatterns: ["/app/task/:id/:slug"],
description: document => {
const json = document.getElementById("mt-toggl-data")?.dataset?.togglJson || "{}"
const data = JSON.parse(json)
@@ -75,30 +84,36 @@ export default {
const match = data.taskName?.match(projectRegex) || data.projectName?.match(projectRegex)
return match && match[1]
},
allowHostOverride: false,
},
trello: {
name: "trello",
urlPatterns: ["https\\://trello.com/c/:id/:title"],
host: "https://trello.com",
urlPatterns: ["__HOST__/c/:id/:title"],
description: (document, service, { title }) =>
document.querySelector(".js-title-helper")?.textContent?.trim() || title,
projectId: document =>
projectIdentifierBySelector(".js-title-helper")(document) ||
projectIdentifierBySelector(".js-board-editing-target")(document),
allowHostOverride: false,
},
youtrack: {
name: "youtrack",
urlPatterns: ["https\\://:org.myjetbrains.com/youtrack/issue/:id"],
host: "https://:org.myjetbrains.com",
urlPatterns: ["__HOST__/youtrack/issue/:id"],
description: document => document.querySelector("yt-issue-body h1")?.textContent?.trim(),
projectId: projectIdentifierBySelector("yt-issue-body h1"),
allowHostOverride: true,
},
wrike: {
name: "wrike",
host: "https://www.wrike.com",
urlPatterns: [
"https\\://www.wrike.com/workspace.htm#path=mywork",
"https\\://www.wrike.com/workspace.htm#path=folder",
"__HOST__/workspace.htm#path=mywork",
"__HOST__/workspace.htm#path=folder",
"https\\://app-eu.wrike.com/workspace.htm#path=mywork",
"https\\://app-eu.wrike.com/workspace.htm#path=folder",
],
@@ -107,39 +122,46 @@ export default {
},
description: document => document.querySelector(".title-field-ghost")?.textContent?.trim(),
projectId: projectIdentifierBySelector(".header-title__main"),
allowHostOverride: false,
},
wunderlist: {
name: "wunderlist",
urlPatterns: ["https\\://www.wunderlist.com/(webapp)#/tasks/:id(/*)"],
host: "https://www.wunderlist.com",
urlPatterns: ["__HOST__/(webapp)#/tasks/:id(/*)"],
description: document =>
document
.querySelector(".taskItem.selected .taskItem-titleWrapper-title")
?.textContent?.trim(),
projectId: projectIdentifierBySelector(".taskItem.selected .taskItem-titleWrapper-title"),
allowHostOverride: false,
},
"gitlab-mr": {
name: "gitlab",
host: "https://gitlab.com",
urlPatterns: [
"https\\://gitlab.com/:org/:group/:projectId/-/merge_requests/:id",
"https\\://gitlab.com/:org/:projectId/-/merge_requests/:id",
"__HOST__/:org/:group/:projectId/-/merge_requests/:id",
"__HOST__/:org/:projectId/-/merge_requests/:id",
],
description: (document, service, { id }) => {
const title = document.querySelector("h2.title")?.textContent?.trim()
return `#${id} ${title || ""}`.trim()
},
allowHostOverride: true,
},
"gitlab-issues": {
name: "gitlab",
host: "https://gitlab.com",
urlPatterns: [
"https\\://gitlab.com/:org/:group/:projectId/-/issues/:id",
"https\\://gitlab.com/:org/:projectId/-/issues/:id",
"__HOST__/:org/:group/:projectId/-/issues/:id",
"__HOST__/:org/:projectId/-/issues/:id",
],
description: (document, service, { id }) => {
const title = document.querySelector("h2.title")?.textContent?.trim()
return `#${id} ${title || ""}`.trim()
},
allowHostOverride: true,
},
}

3
src/js/utils/browser.js
View File

@@ -1,11 +1,12 @@
import { head } from "lodash/fp"
export const isChrome = () => typeof browser === "undefined" && chrome
export const isFirefox = () => typeof browser !== "undefined" && chrome
const DEFAULT_SUBDOMAIN = "unset"
export const getSettings = (withDefaultSubdomain = true) => {
const keys = ["subdomain", "apiKey", "settingTimeTrackingHHMM"]
const keys = ["subdomain", "apiKey", "settingTimeTrackingHHMM", "hostOverrides"]
const { version } = chrome.runtime.getManifest()
if (isChrome()) {
return new Promise(resolve => {

12
src/js/utils/messageHandlers.js
View File

@@ -12,7 +12,15 @@ import { createMatcher } from "utils/urlMatcher"
import remoteServices from "remoteServices"
import { queryTabs, isBrowserTab, getSettings, setStorage } from "utils/browser"
const matcher = createMatcher(remoteServices)
let matcher
const initMatcher = (settings) => {
matcher = createMatcher(remoteServices, settings.hostOverrides)
}
getSettings().then((settings) => {
initMatcher(settings)
})
export function tabUpdated(tab, { messenger, settings }) {
messenger.connectTab(tab)
@@ -54,6 +62,8 @@ export function tabUpdated(tab, { messenger, settings }) {
}
export function settingsChanged(settings, { messenger }) {
initMatcher(settings)
queryTabs({ currentWindow: true })
.then(reject(isBrowserTab))
.then(

55
src/js/utils/urlMatcher.js
View File

@@ -1,5 +1,5 @@
import UrlPattern from "url-pattern"
import { isFunction, isUndefined, compose, toPairs, map, pipe, isNil } from "lodash/fp"
import { isFunction, isUndefined, compose, toPairs, map, pipe, isNil, convert } from "lodash/fp"
import { asArray } from "./index"
import queryString from "query-string"
@@ -39,15 +39,36 @@ const createEvaluator = args => fnOrValue => {
return fnOrValue
}
const prepareHostForRegExp = (host) => {
if (isUndefined(host)) {
return
}
return host.replace(":", "\\:")
}
const replaceHostInPattern = (host, pattern) => {
if(typeof pattern === "string") {
return pattern.replace("__HOST__", prepareHostForRegExp(host))
} else if(pattern instanceof RegExp) {
return new RegExp(pattern.source.replace("__HOST__", prepareHostForRegExp(host)))
} else {
console.error("Invalid type for pattern %v, no host replacement performed", pattern)
return pattern
}
}
const parseServices = compose(
map(([key, config]) => ({
...config,
key,
patterns: config.urlPatterns.map(pattern => {
if (Array.isArray(pattern)) {
return new UrlPattern(...pattern)
return new UrlPattern(
...pattern.map((p, index) => (index === 0 ? replaceHostInPattern(config.host, p) : p)),
)
}
return new UrlPattern(pattern)
return new UrlPattern(replaceHostInPattern(config.host, pattern))
}),
})),
toPairs,
@@ -72,8 +93,28 @@ export const createEnhancer = document => service => {
}
}
export const createMatcher = remoteServices => {
const services = parseServices(remoteServices)
const applyHostOverrides = (remoteServices, hostOverrides) => {
let appliedRemoteServices = Object.assign(remoteServices)
if (isUndefined(hostOverrides)) {
console.error("No overrides found.")
return remoteServices
}
Object.keys(remoteServices).forEach((key) => {
const remoteService = remoteServices[key]
appliedRemoteServices[key] = {
...remoteService,
key,
host: (hostOverrides && hostOverrides[remoteService.name]) || remoteService.host,
}
})
return appliedRemoteServices
}
export const createMatcher = (remoteServices, hostOverrides) => {
const services = parseServices(applyHostOverrides(remoteServices, hostOverrides))
return tabUrl => {
const { origin, pathname, hash, query } = parseUrl(tabUrl)
const url = `${origin}${pathname}${hash}`
@@ -99,8 +140,8 @@ export const createMatcher = remoteServices => {
}
}
export const createServiceFinder = remoteServices => document => {
const matcher = createMatcher(remoteServices)
export const createServiceFinder = (remoteServices, hostOverrides) => document => {
const matcher = createMatcher(remoteServices, hostOverrides)
const enhancer = createEnhancer(document)
return pipe(
matcher,

25
test/utils/urlMatcher.test.js
View File

@@ -6,7 +6,7 @@ describe("utils", () => {
let matcher
beforeEach(() => {
matcher = createMatcher(remoteServices)
matcher = createMatcher(remoteServices, {})
})
describe("createMatcher", () => {
@@ -162,4 +162,27 @@ describe("utils", () => {
})
})
})
describe("urlMatcher with overrideHosts", () => {
let matcher
beforeEach(() => {
matcher = createMatcher(remoteServices, {
github: "https://my-custom-github-url.com",
})
})
describe("createMatcher", () => {
it("matches overridden host and path", () => {
const service = matcher("https://my-custom-github-url.com/hundertzehn/mocoapp/pull/123")
expect(service.key).toEqual("github-pr")
expect(service.name).toEqual("github")
})
it("doesn't match default host and path", () => {
const service = matcher("https://github.com/hundertzehn/mocoapp/pull/123")
expect(service).toBe(undefined)
})
})
})
})