Utilize source maps for error improvements

circle.yml

@@ -143,6 +143,8 @@ commands:
           packageName: static
       - save-cache:
           packageName: ts
+      - save-cache:
+          packageName: ui-components
       - save-cache:
           packageName: web-config
 
@@ -217,6 +219,9 @@ commands:
       - restore-cache:
           packageName: ts
           packagePath: packages/ts/package.json
+      - restore-cache:
+          packageName: ui-components
+          packagePath: packages/ui-components/package.json
       - restore-cache:
           packageName: web-config
           packagePath: packages/web-config/package.json
@@ -573,6 +578,26 @@ jobs:
           path: /tmp/artifacts
       - store-npm-logs
 
+  "ui-components-integration-tests":
+    <<: *defaults
+    steps:
+      - attach_workspace:
+          at: ~/
+      - run:
+          command: npm run build
+          working_directory: packages/ui-components
+      - run:
+          command: |
+            CYPRESS_KONFIG_ENV=production \
+            CYPRESS_RECORD_KEY=$PACKAGES_RECORD_KEY \
+            npm run cypress:run -- --record --parallel --group ui-components
+          working_directory: packages/ui-components
+      - store_test_results:
+          path: /tmp/cypress
+      - store_artifacts:
+          path: /tmp/artifacts
+      - store-npm-logs
+
   "run-launcher":
     <<: *defaults
     steps:
@@ -1050,6 +1075,9 @@ linux-workflow: &linux-workflow
     - reporter-integration-tests:
         requires:
           - build
+    - ui-components-integration-tests:
+        requires:
+          - build
     - run-launcher:
         requires:
           - build

packages/desktop-gui/cypress/integration/settings_spec.js

@@ -280,7 +280,7 @@ describe('Settings', () => {
       })
 
       it('opens ci guide when learn more is clicked', () => {
-        cy.get('.settings-record-key').contains('Learn More').click().then(function () {
+        cy.get('.settings-record-key').contains('Learn more').click().then(function () {
           expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/what-is-a-record-key')
         })
       })
@@ -420,6 +420,73 @@ describe('Settings', () => {
         cy.shouldBeOnProjectSpecs()
       })
     })
+
+    describe('when global settings panel is opened', () => {
+      const availableEditors = [
+        { id: 'atom', name: 'Atom', isOther: false, openerId: 'atom' },
+        { id: 'vim', name: 'Vim', isOther: false, openerId: 'vim' },
+        { id: 'sublime', name: 'Sublime Text', isOther: false, openerId: 'sublime' },
+        { id: 'vscode', name: 'Visual Studio Code', isOther: false, openerId: 'vscode' },
+        { id: 'other', name: 'Other', isOther: true, openerId: '' },
+      ]
+
+      beforeEach(function () {
+        this.getUserEditor = this.util.deferred()
+        cy.stub(this.ipc, 'getUserEditor').returns(this.getUserEditor.promise)
+        cy.stub(this.ipc, 'setUserEditor').resolves()
+
+        cy.contains('Global Settings').click()
+      })
+
+      it('displays global settings section', () => {
+        cy.contains('Global settings take effect')
+      })
+
+      it('opens global setttings guide when learn more is clicked', () => {
+        cy.get('.global-settings').contains('Learn more').click().then(function () {
+          expect(this.ipc.externalOpen).to.be.calledWith('https://on.cypress.io/global-settings')
+        })
+      })
+
+      it('loads preferred editor and available editors', function () {
+        expect(this.ipc.getUserEditor).to.be.called
+      })
+
+      it('shows spinner', () => {
+        cy.get('.loading-editors')
+      })
+
+      describe('when editors load with preferred editor', () => {
+        beforeEach(function () {
+          this.getUserEditor.resolve({ availableEditors, preferredEditor: availableEditors[3] })
+        })
+
+        it('displays available editors with preferred one selected', () => {
+          cy.get('.loading-editors').should('not.exist')
+          cy.contains('Atom')
+          cy.contains('Other')
+          cy.contains('Visual Studio Code').closest('li').should('have.class', 'is-selected')
+        })
+
+        it('sets editor through ipc when a different editor is selected', function () {
+          cy.contains('Atom').click()
+          .closest('li').should('have.class', 'is-selected')
+
+          cy.wrap(this.ipc.setUserEditor).should('be.calledWith', availableEditors[0])
+        })
+      })
+
+      describe('when editors load without preferred editor', () => {
+        beforeEach(function () {
+          this.getUserEditor.resolve({ availableEditors })
+        })
+
+        it('does not select an editor', () => {
+          cy.get('.loading-editors').should('not.exist')
+          cy.get('.editor-picker li').should('not.have.class', 'is-selected')
+        })
+      })
+    })
   })
 
   context('on config changes', () => {

packages/desktop-gui/package.json

@@ -32,8 +32,8 @@
     "human-interval": "0.1.6",
     "lodash": "4.17.15",
     "markdown-it": "8.4.2",
-    "mobx": "5.11.0",
-    "mobx-react": "5.4.3",
+    "mobx": "5.15.1",
+    "mobx-react": "6.1.4",
     "mobx-react-devtools": "6.1.1",
     "moment": "2.24.0",
     "prop-types": "15.7.2",
@@ -42,7 +42,7 @@
     "react-bootstrap-modal": "4.2.0",
     "react-dom": "16.8.6",
     "react-inspector": "4.0.0",
-    "react-loader": "2.4.5",
+    "react-loader": "2.4.6",
     "react-select": "3.0.8",
     "webpack": "4.35.3",
     "webpack-cli": "3.3.2"

packages/desktop-gui/src/app/nav.jsx

@@ -1,5 +1,6 @@
 import { observer } from 'mobx-react'
 import React, { Component } from 'react'
+import { Dropdown } from '@packages/ui-components'
 
 import appStore from '../lib/app-store'
 import authApi from '../auth/auth-api'
@@ -9,8 +10,6 @@ import ipc from '../lib/ipc'
 import { gravatarUrl } from '../lib/utils'
 import { Link, routes } from '../lib/routing'
 
-import Dropdown from '../dropdown/dropdown'
-
 @observer
 export default class Nav extends Component {
   render () {

packages/desktop-gui/src/lib/ipc.js

@@ -44,6 +44,8 @@ register('get:project:statuses')
 register('get:project:status')
 register('get:record:keys')
 register('get:specs', false)
+register('get:user:editor')
+register('set:user:editor')
 register('launch:browser', false)
 register('log:out')
 register('on:focus:tests', false)

packages/desktop-gui/src/main.scss

@@ -3,3 +3,5 @@
 @import 'styles/vendor';
 @import 'styles/components/*';
 @import '!(styles)*/**/*';
+@import '../../ui-components/src/dropdown';
+@import '../../ui-components/src/editor-picker';

packages/desktop-gui/src/project-nav/browsers.jsx

@@ -1,7 +1,7 @@
 import React, { Component } from 'react'
 import { observer } from 'mobx-react'
 import Tooltip from '@cypress/react-tooltip'
-import Dropdown from '../dropdown/dropdown'
+import { Dropdown } from '@packages/ui-components'
 import MarkdownRenderer from '../lib/markdown-renderer'
 
 import projectsApi from '../projects/projects-api'

packages/desktop-gui/src/settings/configuration.jsx

@@ -1,5 +1,4 @@
 import _ from 'lodash'
-import { defaultTo, get, flow, isEmpty, join, map, reduce, take, toPairs, toPath } from 'lodash/fp'
 import cn from 'classnames'
 import { observer } from 'mobx-react'
 import React from 'react'
@@ -8,23 +7,22 @@ import { ObjectInspector, ObjectName } from 'react-inspector'
 import { configFileFormatted } from '../lib/config-file-formatted'
 import ipc from '../lib/ipc'
 
-const joinWithCommas = join(', ')
-const objToString = (v) => flow([
-  defaultTo(v.name),
-  defaultTo(_.isObject(v) ? joinWithCommas(Object.keys(v)) : undefined),
-  defaultTo(String(v)),
-])(v.displayName)
+const valueToString = (value) => {
+  return (
+    value.displayName ||
+    value.name ||
+    (_.isObject(value) && _.keys(value).join(', ')) ||
+    String(value)
+  )
+}
 
 const formatValue = (value) => {
   if (Array.isArray(value)) {
-    return flow([
-      map(objToString),
-      joinWithCommas,
-    ])(value)
+    return _.map(value, valueToString).join(', ')
   }
 
   if (_.isObject(value)) {
-    return objToString(value)
+    return valueToString(value)
   }
 
   const excludedFromQuotations = ['null', 'undefined']
@@ -36,20 +34,18 @@ const formatValue = (value) => {
   return String(value)
 }
 
-const normalizeWithoutMeta = flow([
-  defaultTo({}),
-  toPairs,
-  reduce((acc, [key, value]) => _.merge({}, acc, {
+const normalizeWithoutMeta = (value = {}) => {
+  const pairs = _.toPairs(value)
+  const values = _.reduce(pairs, (acc, [key, value]) => _.merge({}, acc, {
     [key]: value ? value.value : {},
-  }), {}),
-  (v) => {
-    if (isEmpty(v)) {
-      return null
-    }
+  }), {})
 
-    return v
-  },
-])
+  if (_.isEmpty(values)) {
+    return null
+  }
+
+  return values
+}
 
 const ObjectLabel = ({ name, data, expanded, from, isNonenumerable }) => {
   const formattedData = formatValue(data)
@@ -87,17 +83,12 @@ ObjectLabel.defaultProps = {
 
 const computeFromValue = (obj, name, path) => {
   const normalizedPath = path.replace('$.', '').replace(name, `['${name}']`)
-  const getValueForPath = flow([
-    toPath,
-    _.partialRight(get, obj),
-  ])
-
-  let value = getValueForPath(normalizedPath)
+  let value = _.get(obj, normalizedPath)
 
   if (!value) {
-    const onlyFirstKeyInPath = flow([toPath, take(1)])
+    const firstKeyInPath = _.toPath(normalizedPath)[0]
 
-    value = getValueForPath(onlyFirstKeyInPath(normalizedPath))
+    value = _.get(obj, firstKeyInPath)
   }
 
   if (!value) {

packages/desktop-gui/src/settings/global-settings.jsx

@@ -0,0 +1,74 @@
+import _ from 'lodash'
+import { action } from 'mobx'
+import { EditorPicker } from '@packages/ui-components'
+import { observer, useLocalStore } from 'mobx-react'
+import React, { useEffect } from 'react'
+
+import ipc from '../lib/ipc'
+
+const openHelp = (e) => {
+  e.preventDefault()
+  ipc.externalOpen('https://on.cypress.io/global-settings')
+}
+
+const save = _.debounce((editor) => {
+  ipc.setUserEditor(editor)
+  .catch(() => {}) // ignore errors
+}, 500)
+
+const GlobalSettings = observer(() => {
+  const state = useLocalStore(() => ({
+    editors: [],
+    isLoadingEditor: true,
+    chosenEditor: {},
+    setEditors: action((editors) => {
+      state.editors = editors
+      state.isLoadingEditor = false
+    }),
+    setChosenEditor: action((editor) => {
+      state.chosenEditor = editor
+      save(editor)
+    }),
+    setOtherPath: action((otherPath) => {
+      const otherOption = _.find(state.editors, { isOther: true })
+
+      otherOption.openerId = otherPath
+      save(otherOption)
+    }),
+  }))
+
+  useEffect(() => {
+    ipc.getUserEditor().then(({ preferredEditor, availableEditors }) => {
+      if (preferredEditor) {
+        state.setChosenEditor(preferredEditor)
+      }
+
+      state.setEditors(availableEditors)
+    })
+  }, [true])
+
+  return (
+    <div className="global-settings">
+      <a href='#' className='learn-more' onClick={openHelp}>
+        <i className='fas fa-info-circle'></i> Learn more
+      </a>
+
+      <p className='text-muted'>Global settings take effect for every project on your system. Changing them here will change them for other projects as well.</p>
+      <h3>Preferred Editor</h3>
+      <p>Your preferred editor is used to open files from the test runner (e.g. when clicking links in error stack traces)</p>
+      {state.isLoadingEditor ?
+        <p className='loading-editors'>
+          <i className='fas fa-spinner fa-spin'></i> Loading Editors...
+        </p> :
+        <EditorPicker
+          chosen={state.chosenEditor}
+          editors={state.editors}
+          onSelect={state.setChosenEditor}
+          onUpdateOtherPath={state.setOtherPath}
+        />
+      }
+    </div>
+  )
+})
+
+export default GlobalSettings

packages/desktop-gui/src/settings/record-key.jsx

@@ -74,8 +74,7 @@ class RecordKey extends Component {
     return (
       <div>
         <a href='#' className='learn-more' onClick={openRecordKeyGuide}>
-          <i className='fas fa-info-circle'></i>{' '}
-          Learn More
+          <i className='fas fa-info-circle'></i> Learn more
         </a>
         <p className='text-muted'>
           A Record Key sends your failing tests, screenshots, and videos to your{' '}

packages/desktop-gui/src/settings/settings.jsx

@@ -8,6 +8,7 @@ import ProjectId from './project-id'
 import RecordKey from './record-key'
 import ProxySettings from './proxy-settings'
 import NodeVersion from './node-version'
+import GlobalSettings from './global-settings'
 
 const Settings = observer(({ project, app }) => {
   const { resolvedNodeVersion } = project
@@ -34,6 +35,9 @@ const Settings = observer(({ project, app }) => {
           <Panel header='Proxy Settings' key='proxy-settings' className='form-horizontal settings-proxy'>
             <ProxySettings app={app} />
           </Panel>
+          <Panel header='Global Settings' key='global-settings' className='form-horizontal settings-global'>
+            <GlobalSettings />
+          </Panel>
         </Collapse>
       </div>
     </div>