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
This commit is contained in:
Manuel Bouza
108
test/data.js
Normal file
108
test/data.js
Normal file
@@ -0,0 +1,108 @@
|
||||
export const projects = [
|
||||
{
|
||||
id: 944868981,
|
||||
name: "Browser Extension",
|
||||
customer_name: "Simplificator",
|
||||
intern: false,
|
||||
identifier: "137",
|
||||
tasks: [
|
||||
{
|
||||
id: 2733682,
|
||||
name: "Bugfixing",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 2733681,
|
||||
name: "Development",
|
||||
billable: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 944724773,
|
||||
name: "Development",
|
||||
customer_name: "MOCO APP",
|
||||
intern: false,
|
||||
identifier: "116",
|
||||
tasks: [
|
||||
{
|
||||
id: 1621304,
|
||||
name: "Roadmap Features",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 1621310,
|
||||
name: "Bugfixing",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 1621305,
|
||||
name: "Quickwins",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 1621323,
|
||||
name: "Refactorings",
|
||||
billable: true
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 944837106,
|
||||
name: "Support",
|
||||
customer_name: "MOCO APP",
|
||||
intern: false,
|
||||
identifier: "130",
|
||||
tasks: [
|
||||
{
|
||||
id: 2500080,
|
||||
name: "Intercom & Mails",
|
||||
billable: false
|
||||
},
|
||||
{
|
||||
id: 2500081,
|
||||
name: "Demos",
|
||||
billable: false
|
||||
},
|
||||
{
|
||||
id: 2506050,
|
||||
name: "Calls",
|
||||
billable: false
|
||||
},
|
||||
{
|
||||
id: 2500084,
|
||||
name: "Importe",
|
||||
billable: false
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 944621413,
|
||||
name: "Tech Consulting",
|
||||
customer_name: "sharoo",
|
||||
intern: false,
|
||||
identifier: "97",
|
||||
tasks: [
|
||||
{
|
||||
id: 874014,
|
||||
name: "Entwicklung",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 874015,
|
||||
name: "Grafik",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 874016,
|
||||
name: "Konzept",
|
||||
billable: true
|
||||
},
|
||||
{
|
||||
id: 874017,
|
||||
name: "Projektleitung",
|
||||
billable: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
36
test/utils/TimeInputParser.test.js
Normal file
36
test/utils/TimeInputParser.test.js
Normal file
@@ -0,0 +1,36 @@
|
||||
import TimeInputParser from "../../src/js/utils/TimeInputParser"
|
||||
|
||||
function parseSeconds(input) {
|
||||
return new TimeInputParser(input).parseSeconds()
|
||||
}
|
||||
|
||||
describe("utils", () => {
|
||||
describe("TimeInputParser", () => {
|
||||
it("parses decimal", () => {
|
||||
expect(parseSeconds("1.5")).toEqual(5400)
|
||||
expect(parseSeconds("1,333")).toEqual(4799)
|
||||
})
|
||||
|
||||
it("parses time", () => {
|
||||
expect(parseSeconds("2:20")).toEqual(8400)
|
||||
expect(parseSeconds("0:30")).toEqual(1800)
|
||||
})
|
||||
|
||||
it("parses minutes", () => {
|
||||
expect(parseSeconds("2m")).toEqual(120)
|
||||
expect(parseSeconds("45min")).toEqual(2700)
|
||||
expect(parseSeconds("120mins")).toEqual(7200)
|
||||
})
|
||||
|
||||
it("parses range", () => {
|
||||
expect(parseSeconds("10:15-12:45")).toEqual(9000)
|
||||
expect(parseSeconds("8.00-12:15")).toEqual(15300)
|
||||
expect(parseSeconds("1000-12.20")).toEqual(8400)
|
||||
})
|
||||
|
||||
it("parses hours and minuts", () => {
|
||||
expect(parseSeconds("1h 15min")).toEqual(4500)
|
||||
expect(parseSeconds("2h30m")).toEqual(9000)
|
||||
})
|
||||
})
|
||||
})
|
||||
89
test/utils/index.test.js
Normal file
89
test/utils/index.test.js
Normal file
@@ -0,0 +1,89 @@
|
||||
import { projects } from "../data"
|
||||
import {
|
||||
findProjectByValue,
|
||||
findProjectByIdentifier,
|
||||
findTask,
|
||||
groupedProjectOptions
|
||||
} from "../../src/js/utils"
|
||||
import { map } from "lodash/fp"
|
||||
|
||||
describe("utils", () => {
|
||||
describe("findProjectByValue", () => {
|
||||
it("finds an existing project", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByValue(944837106)(options)
|
||||
expect(project.value).toEqual(944837106)
|
||||
expect(project.label).toEqual("Support")
|
||||
expect(project.customerName).toEqual("MOCO APP")
|
||||
expect(project.tasks).toHaveLength(4)
|
||||
})
|
||||
|
||||
it("returns undefined if project is not found", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByValue(123)(options)
|
||||
expect(project).toBe(undefined)
|
||||
})
|
||||
|
||||
it("returns undefined for undefined id", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByValue(undefined)(options)
|
||||
expect(project).toBe(undefined)
|
||||
})
|
||||
})
|
||||
|
||||
describe("findProjectByIdentifier", () => {
|
||||
it("finds an existing project", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByIdentifier("130")(options)
|
||||
expect(project.identifier).toEqual("130")
|
||||
expect(project.label).toEqual("Support")
|
||||
expect(project.customerName).toEqual("MOCO APP")
|
||||
expect(project.tasks).toHaveLength(4)
|
||||
})
|
||||
|
||||
it("returns undefined if project is not found", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByIdentifier("non-existing")(options)
|
||||
expect(project).toBe(undefined)
|
||||
})
|
||||
|
||||
it("returns undefined for undefined id", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByIdentifier(undefined)(options)
|
||||
expect(project).toBe(undefined)
|
||||
})
|
||||
})
|
||||
|
||||
describe("findTask", () => {
|
||||
it("find an existing task", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByValue(944837106)(options)
|
||||
const task = findTask(2506050)(project)
|
||||
expect(task.value).toEqual(2506050)
|
||||
expect(task.label).toEqual("(Calls)")
|
||||
})
|
||||
|
||||
it("returns undefined if task is not found", () => {
|
||||
const options = groupedProjectOptions(projects)
|
||||
const project = findProjectByValue(944837106)(options)
|
||||
const task = findTask(123)(project)
|
||||
expect(task).toBe(undefined)
|
||||
})
|
||||
|
||||
it("returns undefined for undefined project", () => {
|
||||
const task = findTask(2506050)(undefined)
|
||||
expect(task).toBe(undefined)
|
||||
})
|
||||
})
|
||||
|
||||
describe("groupedProjectOptions", () => {
|
||||
it("transforms projects into grouped options by company", () => {
|
||||
const result = groupedProjectOptions(projects)
|
||||
expect(map("label", result)).toEqual([
|
||||
"Simplificator",
|
||||
"MOCO APP",
|
||||
"sharoo"
|
||||
])
|
||||
})
|
||||
})
|
||||
})
|
||||
114
test/utils/urlMatcher.test.js
Normal file
114
test/utils/urlMatcher.test.js
Normal file
@@ -0,0 +1,114 @@
|
||||
import remoteServices from "../../src/js/remoteServices"
|
||||
import { createMatcher, createEnhancer } from "../../src/js/utils/urlMatcher"
|
||||
|
||||
describe("utils", () => {
|
||||
describe("urlMatcher", () => {
|
||||
let matcher
|
||||
|
||||
beforeEach(() => {
|
||||
matcher = createMatcher(remoteServices)
|
||||
})
|
||||
|
||||
describe("createMatcher", () => {
|
||||
it("matches host and path", () => {
|
||||
const service = matcher(
|
||||
"https://github.com/hundertzehn/mocoapp/pull/123"
|
||||
)
|
||||
expect(service.key).toEqual("github-pr")
|
||||
expect(service.name).toEqual("github")
|
||||
})
|
||||
|
||||
it("matches query string", () => {
|
||||
let service = matcher(
|
||||
"https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail&selectedIssue=TEST1-1"
|
||||
)
|
||||
expect(service.key).toEqual("jira")
|
||||
expect(service.name).toEqual("jira")
|
||||
expect(service.org).toEqual("moco-bx")
|
||||
expect(service.projectId).toEqual("TEST1")
|
||||
expect(service.id).toEqual("TEST1-1")
|
||||
expect(service.match.org).toEqual("moco-bx")
|
||||
expect(service.match.projectId).toEqual("TEST1")
|
||||
expect(service.match.id).toEqual("TEST1-1")
|
||||
|
||||
service = matcher(
|
||||
"https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail"
|
||||
)
|
||||
expect(service.key).toEqual("jira")
|
||||
expect(service.name).toEqual("jira")
|
||||
expect(service.org).toEqual("moco-bx")
|
||||
expect(service.projectId).toEqual("TEST1")
|
||||
expect(service.id).toBeUndefined()
|
||||
expect(service.match.org).toEqual("moco-bx")
|
||||
expect(service.match.projectId).toEqual("TEST1")
|
||||
expect(service.match.id).toBeUndefined()
|
||||
|
||||
service = matcher(
|
||||
"https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&projectKey=TEST1&modal=detail&selectedIssue="
|
||||
)
|
||||
expect(service.key).toEqual("jira")
|
||||
expect(service.name).toEqual("jira")
|
||||
expect(service.org).toEqual("moco-bx")
|
||||
expect(service.projectId).toEqual("TEST1")
|
||||
expect(service.id).toEqual("")
|
||||
expect(service.match.org).toEqual("moco-bx")
|
||||
expect(service.match.projectId).toEqual("TEST1")
|
||||
expect(service.match.id).toEqual("")
|
||||
|
||||
service = matcher(
|
||||
"https://moco-bx.atlassian.net/secure/RapidBoard.jspa"
|
||||
)
|
||||
expect(service.key).toEqual("jira")
|
||||
expect(service.name).toEqual("jira")
|
||||
expect(service.match.org).toEqual("moco-bx")
|
||||
expect(service.match.projectId).toBeUndefined()
|
||||
expect(service.match.id).toBeUndefined()
|
||||
|
||||
service = matcher(
|
||||
"https://moco-bx.atlassian.net/secure/RapidBoard.jspa?rapidView=2&modal=detail&selectedIssue=TEST2-1"
|
||||
)
|
||||
expect(service.key).toEqual("jira")
|
||||
expect(service.name).toEqual("jira")
|
||||
expect(service.org).toEqual("moco-bx")
|
||||
expect(service.projectId).toBeUndefined()
|
||||
expect(service.id).toEqual("TEST2-1")
|
||||
expect(service.match.org).toEqual("moco-bx")
|
||||
expect(service.match.projectId).toBeUndefined()
|
||||
expect(service.match.id).toEqual("TEST2-1")
|
||||
})
|
||||
|
||||
it("matches url with hash", () => {
|
||||
let service = matcher(
|
||||
"https://www.wunderlist.com/webapp#/tasks/4771178545"
|
||||
)
|
||||
expect(service.key).toEqual("wunderlist")
|
||||
expect(service.name).toEqual("wunderlist")
|
||||
expect(service.match.id).toEqual("4771178545")
|
||||
})
|
||||
|
||||
it("does not match different host", () => {
|
||||
const service = matcher(
|
||||
"https://trello.com/hundertzehn/mocoapp/pull/123"
|
||||
)
|
||||
expect(service).toBeFalsy()
|
||||
})
|
||||
})
|
||||
|
||||
describe("createEnhancer", () => {
|
||||
it("enhances a services", () => {
|
||||
const url = "https://github.com/hundertzehn/mocoapp/pull/123"
|
||||
const document = {
|
||||
querySelector: jest
|
||||
.fn()
|
||||
.mockReturnValue({ textContent: "[4321] Foo" })
|
||||
}
|
||||
const service = matcher(url)
|
||||
const enhancedService = createEnhancer(document)(service)
|
||||
expect(enhancedService.id).toEqual("github-pr.hundertzehn.mocoapp.123")
|
||||
expect(enhancedService.description).toEqual("[4321] Foo")
|
||||
expect(enhancedService.projectId).toEqual("4321")
|
||||
expect(enhancedService.taskId).toBe(undefined)
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user