Prepare release

* chore(package): update electron to version 5.0.5

* chore(package): update electron to version 5.0.5

* chore(package): update lockfile yarn.lock

.cspell.json

@@ -1,8 +1,46 @@
 {
-    "language": "en",
-    "words": [
-        "subheader",
-        "basepath",
-	"webdriverio"
-    ]
+  "language": "en",
+  "words": [
+    "subheader",
+    "basepath",
+    "webdriverio",
+    "repo",
+    "hexagonalize",
+    "pixelize",
+    "Transistions",
+    "squashfs",
+    "squashfs",
+    "provisionprofile",
+    "Nsis",
+    "Appx",
+    "Hashable",
+    "clickaway",
+    "Resizer",
+    "Subnodes",
+    "Unmount",
+    "Monokai",
+    "plottable",
+    "snackbar",
+    "webdriverio",
+    "prismjs",
+    "Nordquist",
+    "debounced",
+    "mosquitto",
+    "snapcraft",
+    "unsquashfs",
+    "armv",
+    "livingroom",
+    "selectall",
+    "toggledevtools",
+    "Octo",
+    "zigbee",
+    "memoization",
+    "submenu",
+    "AGPL",
+    "Oooooops",
+    "DEVTOOLS",
+    "mixins",
+    "Explorerdmg",
+    "heapsnapshot"
+  ]
 }

app/index.html

@@ -22,10 +22,10 @@
           background-color: none;
         }
         25% {
-          background-color: #3f51b5;
+          background-color: #4f5781;
         }
         50% {
-          background-color: #3f51b5;
+          background-color: #4f5781;
         }
         100% {
           background-color: none;
@@ -38,11 +38,11 @@
           color: inherit;
         }
         25% {
-          background-color: #bfc9c8;
+          background-color: #c0c8c0;
           color: #000;
         }
         50% {
-          background-color: #bfc9c8;
+          background-color: #c0c8c0;
           color: #000;
         }
         100% {

app/package.json

@@ -80,6 +80,6 @@
     "webpack-dev-server": "^3.1.14"
   },
   "peerDependencies": {
-    "electron": "^5.0.4"
+    "electron": "^5.0.5"
   }
 }

app/src/actions/ConnectionManager.ts

@@ -42,7 +42,8 @@ export const loadConnectionSettings = () => async (dispatch: Dispatch<any>, getS
   }
 }
 
-export const selectCertificate = (connectionId: string) => async (
+export type CertificateTypes = 'selfSignedCertificate' | 'clientCertificate' | 'clientKey'
+export const selectCertificate = (type: CertificateTypes, connectionId: string) => async (
   dispatch: Dispatch<any>,
   getState: () => AppState
 ) => {
@@ -50,7 +51,7 @@ export const selectCertificate = (connectionId: string) => async (
     const certificate = await openCertificate()
     dispatch(
       updateConnection(connectionId, {
-        selfSignedCertificate: certificate,
+        [type]: certificate,
       })
     )
   } catch (error) {
@@ -147,6 +148,10 @@ export const toggleAdvancedSettings = (): Action => ({
   type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS,
 })
 
+export const toggleCertificateSettings = (): Action => ({
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS,
+})
+
 export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const connectionIds = Object.keys(getState().connectionManager.connections)
   const connectionIdLocation = connectionIds.indexOf(connectionId)

app/src/actions/Settings.ts

@@ -1,5 +1,5 @@
 import * as q from '../../../backend/src/Model'
-import { ActionTypes, SettingsState, TopicOrder } from '../reducers/Settings'
+import { ActionTypes, SettingsStateModel, TopicOrder } from '../reducers/Settings'
 import { AppState } from '../reducers'
 import { autoExpandLimitSet } from '../components/SettingsDrawer/Settings'
 import { Base64Message } from '../../../backend/src/Model/Base64Message'
@@ -11,7 +11,7 @@ import { showError } from './Global'
 import { showTree } from './Tree'
 import { TopicViewModel } from '../model/TopicViewModel'
 
-const settingsIdentifier: StorageIdentifier<Partial<SettingsState>> = {
+const settingsIdentifier: StorageIdentifier<Partial<SettingsStateModel>> = {
   id: 'Settings',
 }
 
@@ -149,9 +149,10 @@ function autoExpandLimitForTree(tree: q.Tree<TopicViewModel>) {
   if (!tree) {
     return 0
   }
+
   function closestExistingLimit(i: number): number {
-    const sorted = autoExpandLimitSet.sort((a, b) => Math.abs(a.limit - i) - Math.abs(b.limit - i))
-    return sorted[0]!.limit
+    const sorted = [...autoExpandLimitSet].sort((a, b) => Math.abs(a.limit - i) - Math.abs(b.limit - i))
+    return sorted[0].limit
   }
 
   const count = tree.childTopicCount()

app/src/actions/Sidebar.ts

@@ -2,7 +2,9 @@ import * as q from '../../../backend/src/Model'
 import { ActionTypes } from '../reducers/Sidebar'
 import { AppState } from '../reducers'
 import { Dispatch } from 'redux'
-import { makePublishEvent, rendererEvents } from '../../../events'
+import { clearTopic } from './clearTopic'
+
+export { clearTopic } from './clearTopic'
 
 export const clearRetainedTopic = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
   const selectedTopic = getState().tree.get('selectedTopic')
@@ -19,38 +21,3 @@ export const setCompareMessage = (message?: q.Message) => (dispatch: Dispatch<an
     type: ActionTypes.SIDEBAR_SET_COMPARE_MESSAGE,
   })
 }
-
-export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
-  dispatch: Dispatch<any>,
-  getState: () => AppState
-) => {
-  const { connectionId } = getState().connection
-  if (!connectionId) {
-    return
-  }
-
-  const publishEvent = makePublishEvent(connectionId)
-  const mqttMessage = {
-    topic: topic.path(),
-    payload: null,
-    retain: true,
-    qos: 0 as 0,
-  }
-  rendererEvents.emit(publishEvent, mqttMessage)
-
-  if (recursive) {
-    topic
-      .childTopics()
-      .filter(topic => Boolean(topic.message && topic.message.value))
-      .slice(0, subtopicClearLimit)
-      .forEach(topic => {
-        const mqttMessage = {
-          topic: topic.path(),
-          payload: null,
-          retain: true,
-          qos: 0 as 0,
-        }
-        rendererEvents.emit(publishEvent, mqttMessage)
-      })
-  }
-}

app/src/actions/Tree.ts

@@ -4,10 +4,14 @@ import { ActionTypes as SidebarActionTypes } from '../reducers/Sidebar'
 import { AnyAction, Dispatch } from 'redux'
 import { AppState } from '../reducers'
 import { batchActions } from 'redux-batched-actions'
+import { globalActions } from './'
 import { setTopic } from './Publish'
 import { TopicViewModel } from '../model/TopicViewModel'
-import { globalActions } from '.'
 const debounce = require('lodash.debounce')
+export { clearTopic } from './clearTopic'
+
+export { moveSelectionUpOrDownwards, moveInward, moveOutward } from './visibleTreeTraversal'
+import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
 
 export const selectTopic = (topic: q.TreeNode<TopicViewModel>) => (
   dispatch: Dispatch<any>,
@@ -104,7 +108,7 @@ export const togglePause = (tree?: q.Tree<TopicViewModel>) => (dispatch: Dispatc
   setTimeout(() => {
     tree && tree.applyUnmergedChanges()
     if (paused && changes > 0) {
-      dispatch(globalActions.showNotification(`Sucessfully applied ${changes} changes.`))
+      dispatch(globalActions.showNotification(`Successfully applied ${changes} changes.`))
     }
   }, 50)
 

app/src/actions/clearTopic.ts

@@ -0,0 +1,41 @@
+import * as q from '../../../backend/src/Model'
+import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
+import { makePublishEvent, rendererEvents } from '../../../events'
+import { moveSelectionUpOrDownwards } from './visibleTreeTraversal'
+
+export const clearTopic = (topic: q.TreeNode<any>, recursive: boolean, subtopicClearLimit = 50) => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+) => {
+  dispatch(moveSelectionUpOrDownwards('next'))
+
+  const { connectionId } = getState().connection
+  if (!connectionId) {
+    return
+  }
+  const publishEvent = makePublishEvent(connectionId)
+  const mqttMessage = {
+    topic: topic.path(),
+    payload: null,
+    retain: true,
+    qos: 0 as 0,
+  }
+  rendererEvents.emit(publishEvent, mqttMessage)
+  if (recursive) {
+    topic
+      .childTopics()
+      .filter(topic => Boolean(topic.message && topic.message.value))
+      .slice(0, subtopicClearLimit)
+      .forEach((topic, idx) => {
+        const mqttMessage = {
+          topic: topic.path(),
+          payload: null,
+          retain: true,
+          qos: 0 as 0,
+        }
+        // Rate limit deletion
+        setTimeout(() => rendererEvents.emit(publishEvent, mqttMessage), 20 * idx)
+      })
+  }
+}

app/src/actions/visibleTreeTraversal.ts

@@ -0,0 +1,135 @@
+import * as q from '../../../backend/src/Model'
+import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
+import { selectTopic } from './Tree'
+import { SettingsState } from '../reducers/Settings'
+import { sortedNodes } from '../sortedNodes'
+import { TopicViewModel } from '../model/TopicViewModel'
+
+export const moveSelectionUpOrDownwards = (direction: 'next' | 'previous') => (
+  dispatch: Dispatch<any>,
+  getState: () => AppState
+): any => {
+  const state = getState()
+  const selected = state.tree.get('selectedTopic')
+  const tree = state.tree.get('tree')
+
+  if (!selected || !tree) {
+    if (tree) {
+      dispatch(selectTopic(tree))
+    }
+    return
+  }
+  const nextTreeNode = nextVisibleElementInTree(state.settings, tree, selected, direction)
+  if (nextTreeNode && nextTreeNode.viewModel) {
+    dispatch(selectTopic(nextTreeNode))
+  }
+}
+
+export const moveInward = () => (dispatch: Dispatch<any>, getState: () => AppState): any => {
+  const state = getState()
+  const selected = state.tree.get('selectedTopic')
+  if (!selected || !selected.viewModel) {
+    return
+  }
+
+  if (!selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
+    selected.viewModel.setExpanded(true, true)
+  } else {
+    dispatch(moveSelectionUpOrDownwards('next'))
+  }
+}
+
+export const moveOutward = () => (dispatch: Dispatch<any>, getState: () => AppState): any => {
+  const state = getState()
+  const selected = state.tree.get('selectedTopic')
+  if (!selected || !selected.viewModel) {
+    return
+  }
+
+  if (selected.viewModel.isExpanded() && selected.edgeCount() > 0) {
+    selected.viewModel.setExpanded(false, true)
+  } else {
+    dispatch(moveSelectionUpOrDownwards('previous'))
+  }
+}
+
+function isTreeNodeVisible(treeNode: q.TreeNode<any>) {
+  return Boolean(treeNode.viewModel)
+}
+
+function nextVisibleElementInTree(
+  settings: SettingsState,
+  tree: q.Tree<TopicViewModel>,
+  node: q.TreeNode<TopicViewModel>,
+  direction: 'next' | 'previous'
+): q.TreeNode<TopicViewModel> | undefined {
+  if (direction === 'next') {
+    return findNextNodeDownward(settings, node)
+  } else {
+    return findNextNodeUpward(settings, node)
+  }
+}
+
+/** Not very efficient but easy to implement, complexity should not be an issue here  */
+function findNextNodeUpward(
+  settings: SettingsState,
+  treeNode: q.TreeNode<TopicViewModel>
+): q.TreeNode<TopicViewModel> | undefined {
+  const parent = treeNode.sourceEdge && treeNode.sourceEdge.source
+  if (!parent) {
+    return undefined
+  }
+
+  const neighborNodes = sortedNodes(settings, parent)
+  const nodeIdx = neighborNodes.findIndex(n => n.path() === treeNode.path())
+  if (nodeIdx === 0) {
+    return parent
+  }
+  const upwardNeighbor = neighborNodes[nodeIdx - 1]
+  if (upwardNeighbor) {
+    return lastVisibleChild(settings, upwardNeighbor)
+  } else {
+    return findNextNodeUpward(settings, parent)
+  }
+}
+
+function lastVisibleChild(settings: SettingsState, treeNode: q.TreeNode<TopicViewModel>): q.TreeNode<TopicViewModel> {
+  const nodes = sortedNodes(settings, treeNode).filter(isTreeNodeVisible)
+  if (nodes.length === 0) {
+    return treeNode
+  }
+  return lastVisibleChild(settings, nodes[nodes.length - 1])
+}
+
+function findNextNodeDownward(
+  settings: SettingsState,
+  treeNode: q.TreeNode<TopicViewModel>
+): q.TreeNode<TopicViewModel> | undefined {
+  const children = sortedNodes(settings, treeNode).filter(isTreeNodeVisible)
+  const firstChild = children[0]
+  if (firstChild) {
+    return firstChild
+  }
+
+  return findNextNodeDownwardNeighbor(settings, treeNode)
+}
+
+function findNextNodeDownwardNeighbor(
+  settings: SettingsState,
+  treeNode: q.TreeNode<TopicViewModel>
+): q.TreeNode<TopicViewModel> | undefined {
+  const parent = treeNode.sourceEdge && treeNode.sourceEdge.source
+  if (!parent) {
+    return undefined
+  }
+
+  const neighborNodes = sortedNodes(settings, parent).filter(isTreeNodeVisible)
+  const nodeIdx = neighborNodes.findIndex(n => n.path() === treeNode.path())
+  const downwardNeighbor = neighborNodes[nodeIdx + 1]
+  if (downwardNeighbor) {
+    return downwardNeighbor
+  } else {
+    return findNextNodeDownwardNeighbor(settings, parent)
+  }
+}

app/src/components/ChartPanel/ChartSettings/RangeSettings.tsx

@@ -1,60 +1,89 @@
-import * as React from 'react'
+import React, { useCallback, useState, ChangeEvent, MouseEvent, useRef, useEffect, useMemo } from 'react'
 import { ChartParameters } from '../../../reducers/Charts'
-import { Menu, MenuItem, TextField, Typography } from '@material-ui/core'
+import { Menu, TextField, Typography } from '@material-ui/core'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
 import { chartActions } from '../../../actions'
+import { KeyCodes } from '../../../utils/KeyCodes'
 
-function RangeSettings(props: {
+interface Props {
   actions: { chart: typeof chartActions }
   chart: ChartParameters
   anchorEl?: Element
   open: boolean
   onClose: () => void
-}) {
-  const dismissClick = React.useCallback((e: React.MouseEvent) => e.stopPropagation(), [])
-  const [rangeFrom, setRangeFrom] = React.useState<string | number | undefined>(
-    props.chart.range && props.chart.range.from
-  )
-  const [rangeTo, setRangeTo] = React.useState<string | number | undefined>(props.chart.range && props.chart.range.to)
+}
 
-  React.useEffect(() => {
-    const from = parseFloat(rangeFrom as any)
-    const to = parseFloat(rangeTo as any)
-    props.actions.chart.updateChart({
-      topic: props.chart.topic,
-      dotPath: props.chart.dotPath,
-      range: {
-        from: isNaN(from) ? undefined : from,
-        to: isNaN(to) ? undefined : to,
-      },
-    })
-  }, [rangeFrom, rangeTo])
+function RangeSettings(props: Props) {
+  const dismissClick = useCallback((e: MouseEvent) => e.stopPropagation(), [])
+  const [rangeFrom, setRangeFrom] = useState<string | number | undefined>(props.chart.range && props.chart.range.from)
+  const [rangeTo, setRangeTo] = useState<string | number | undefined>(props.chart.range && props.chart.range.to)
+  useRangeStateToFireUpdateAction(rangeFrom, rangeTo, props)
+  const rangeFromRef = useRef<HTMLInputElement>()
+  const rangeToRef = useRef<HTMLInputElement>()
 
-  const setFromHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
-  const setToHandler = React.useCallback((e: React.ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
-  return (
-    <Menu style={{ textAlign: 'center' }} anchorEl={props.anchorEl} open={props.open} onClose={props.onClose}>
-      <Typography>Define custom ranges for the Y-Axis</Typography>
-      <div style={{ padding: '0 16px' }}>
-        <TextField
-          style={{ marginTop: '0' }}
-          onClick={dismissClick}
-          label="from"
-          value={rangeFrom}
-          onChange={setFromHandler}
-          margin="normal"
-        />
-        <TextField
-          style={{ marginLeft: '8px', marginTop: '0' }}
-          onClick={dismissClick}
-          label="to"
-          value={rangeTo}
-          onChange={setToHandler}
-          margin="normal"
-        />
-      </div>
-    </Menu>
+  useEffect(() => {
+    rangeFromRef.current && rangeFromRef.current.focus()
+  }, [props.open])
+
+  const handleKeyEvents = (e: React.KeyboardEvent<any>) => {
+    if (e.keyCode === KeyCodes.tab) {
+      // Switch focus between those two
+      if (document.activeElement === rangeFromRef.current) {
+        rangeToRef.current && rangeToRef.current.focus()
+      } else {
+        rangeFromRef.current && rangeFromRef.current.focus()
+      }
+
+      // Prevent closing the menu
+      e.stopPropagation()
+      // Prevent default tab behavior (focus/blur)
+      e.preventDefault()
+    } else if (e.keyCode === KeyCodes.enter) {
+      props.onClose()
+    }
+  }
+
+  const setFromHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeFrom(e.target.value), [])
+  const setToHandler = useCallback((e: ChangeEvent<HTMLInputElement>) => setRangeTo(e.target.value), [])
+  return useMemo(
+    () => (
+      <Menu
+        style={{ textAlign: 'center' }}
+        keepMounted={true}
+        anchorEl={props.anchorEl}
+        open={props.open}
+        onClose={props.onClose}
+        onKeyDownCapture={handleKeyEvents}
+      >
+        <Typography>Define custom ranges for the Y-Axis</Typography>
+        <div style={{ padding: '0 16px' }}>
+          <TextField
+            inputProps={{
+              ref: rangeFromRef,
+            }}
+            autoFocus={true}
+            style={{ marginTop: '0' }}
+            label="from"
+            value={rangeFrom}
+            onChange={setFromHandler}
+            margin="normal"
+          />
+          <TextField
+            inputProps={{
+              ref: rangeToRef,
+            }}
+            style={{ marginLeft: '8px', marginTop: '0' }}
+            onClick={dismissClick}
+            label="to"
+            value={rangeTo}
+            onChange={setToHandler}
+            margin="normal"
+          />
+        </div>
+      </Menu>
+    ),
+    [rangeFrom, rangeTo, props.open]
   )
 }
 
@@ -70,3 +99,22 @@ export default connect(
   undefined,
   mapDispatchToProps
 )(RangeSettings)
+
+function useRangeStateToFireUpdateAction(
+  rangeFrom: string | number | undefined,
+  rangeTo: string | number | undefined,
+  props: Props
+) {
+  React.useEffect(() => {
+    const from = parseFloat(rangeFrom as any)
+    const to = parseFloat(rangeTo as any)
+    props.actions.chart.updateChart({
+      topic: props.chart.topic,
+      dotPath: props.chart.dotPath,
+      range: {
+        from: isNaN(from) ? undefined : from,
+        to: isNaN(to) ? undefined : to,
+      },
+    })
+  }, [rangeFrom, rangeTo])
+}

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -44,29 +44,6 @@ class ConnectionSettings extends React.Component<Props, State> {
     })
   }
 
-  private renderCertificateInfo() {
-    if (!this.props.connection.selfSignedCertificate) {
-      return null
-    }
-
-    return (
-      <span>
-        <Tooltip title={this.props.connection.selfSignedCertificate.name}>
-          <Typography className={this.props.classes.certificateName}>
-            <ClearAdornment action={this.clearCertificate} value={this.props.connection.selfSignedCertificate.name} />
-            {this.props.connection.selfSignedCertificate.name}
-          </Typography>
-        </Tooltip>
-      </span>
-    )
-  }
-
-  private clearCertificate = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      selfSignedCertificate: undefined,
-    })
-  }
-
   private renderSubscriptions() {
     const connection = this.props.connection
     return connection.subscriptions.map(subscription => (
@@ -122,16 +99,15 @@ class ConnectionSettings extends React.Component<Props, State> {
             </Grid>
             <Grid item={true} xs={3} className={classes.gridPadding}>
               <div>
-                <Tooltip title="Select certificate to verify authenticity of a self-signed certificate" placement="top">
+                <Tooltip title="Manage tls connection certificates" placement="top">
                   <Button
                     variant="contained"
                     className={classes.button}
-                    onClick={() => this.props.managerActions.selectCertificate(this.props.connection.id)}
+                    onClick={() => this.props.managerActions.toggleCertificateSettings()}
                   >
-                    <Lock /> Certificate
+                    <Lock /> Certificates
                   </Button>
                 </Tooltip>
-                {this.renderCertificateInfo()}
               </div>
             </Grid>
             <Grid item={true} xs={2} className={classes.gridPadding}>
@@ -186,14 +162,6 @@ const styles = (theme: Theme) => ({
     marginTop: theme.spacing(3),
     float: 'right' as 'right',
   },
-  certificateName: {
-    width: '100%',
-    height: 'calc(1em + 4px)',
-    overflow: 'hidden' as 'hidden',
-    whiteSpace: 'nowrap' as 'nowrap',
-    textOverflow: 'ellipsis' as 'ellipsis',
-    color: theme.palette.text.hint,
-  },
 })
 
 export default connect(

app/src/components/ConnectionSetup/CertificateFileSelection.tsx

@@ -0,0 +1,87 @@
+import * as React from 'react'
+import Add from '@material-ui/icons/Add'
+import ClearAdornment from '../helper/ClearAdornment'
+import Delete from '@material-ui/icons/Delete'
+import Lock from '@material-ui/icons/Lock'
+import { bindActionCreators } from 'redux'
+import { Button, Theme, Tooltip, Typography } from '@material-ui/core'
+import { CertificateParameters, ConnectionOptions } from '../../model/ConnectionOptions'
+import { CertificateTypes } from '../../actions/ConnectionManager'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { withStyles } from '@material-ui/styles'
+
+function CertificateFileSelection(props: {
+  certificateType: CertificateTypes
+  title: string
+  certificate?: CertificateParameters
+  classes: any
+  actions: {
+    connectionManager: typeof connectionManagerActions
+  }
+  connection: ConnectionOptions
+}) {
+  const clearCertificate = React.useCallback(() => {
+    props.actions.connectionManager.updateConnection(props.connection.id, {
+      [props.certificateType]: undefined,
+    })
+  }, [props.connection, props.certificateType])
+
+  return (
+    <span>
+      <Tooltip title="Select certificate" placement="top">
+        <Button
+          variant="contained"
+          className={props.classes.button}
+          onClick={() => props.actions.connectionManager.selectCertificate(props.certificateType, props.connection.id)}
+        >
+          <Lock /> {props.title}
+        </Button>
+      </Tooltip>
+      <ClearCertificate classes={props.classes} certificate={props.certificate} action={clearCertificate} />
+    </span>
+  )
+}
+
+function ClearCertificate(props: { classes: any; certificate?: CertificateParameters; action: () => void }) {
+  if (!props.certificate) {
+    return null
+  }
+
+  return (
+    <Tooltip title={props.certificate.name}>
+      <Typography className={props.classes.certificateName}>
+        <ClearAdornment action={props.action} value={props.certificate.name} />
+        {props.certificate.name}
+      </Typography>
+    </Tooltip>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      connectionManager: bindActionCreators(connectionManagerActions, dispatch),
+    },
+  }
+}
+
+const styles = (theme: Theme) => ({
+  certificateName: {
+    width: '100%',
+    height: 'calc(1em + 4px)',
+    overflow: 'hidden' as 'hidden',
+    whiteSpace: 'nowrap' as 'nowrap',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    color: theme.palette.text.hint,
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginRight: theme.spacing(2),
+  },
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(CertificateFileSelection))

app/src/components/ConnectionSetup/Certificates.tsx

@@ -0,0 +1,110 @@
+import * as React from 'react'
+import CertificateFileSelection from './CertificateFileSelection'
+import Undo from '@material-ui/icons/Undo'
+import { bindActionCreators } from 'redux'
+import { Button, Grid } from '@material-ui/core'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { Theme, withStyles } from '@material-ui/core/styles'
+
+interface Props {
+  connection: ConnectionOptions
+  classes: any
+  managerActions: typeof connectionManagerActions
+}
+
+interface State {
+  subscription: string
+}
+
+class Certificates extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+    this.state = { subscription: '' }
+  }
+
+  private handleChange = (name: string) => (event: any) => {
+    this.props.managerActions.updateConnection(this.props.connection.id, {
+      [name]: event.target.value,
+    })
+  }
+
+  private renderCertificateInfo() {
+    if (!this.props.connection.selfSignedCertificate) {
+      return null
+    }
+
+    return <span />
+  }
+
+  public render() {
+    const { classes } = this.props
+    return (
+      <div>
+        <form noValidate={true} autoComplete="off">
+          <Grid container={true} spacing={3}>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.selfSignedCertificate}
+                title="Server Certificate (CA)"
+                certificateType="selfSignedCertificate"
+              />
+            </Grid>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.clientCertificate}
+                title="Client Certificate"
+                certificateType="clientCertificate"
+              />
+            </Grid>
+            <Grid item={true} xs={12} className={classes.gridPadding}>
+              <CertificateFileSelection
+                connection={this.props.connection}
+                certificate={this.props.connection.clientKey}
+                title="Client Key"
+                certificateType="clientKey"
+              />
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
+              <br />
+              <Button
+                variant="contained"
+                className={classes.button}
+                onClick={this.props.managerActions.toggleCertificateSettings}
+              >
+                <Undo /> Back
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+    )
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    managerActions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const styles = (theme: Theme) => ({
+  fullWidth: {
+    width: '100%',
+  },
+  gridPadding: {
+    padding: '0 12px !important',
+  },
+  button: {
+    marginTop: theme.spacing(3),
+    marginRight: theme.spacing(2),
+  },
+})
+
+export default connect(
+  undefined,
+  mapDispatchToProps
+)(withStyles(styles)(Certificates))

app/src/components/ConnectionSetup/ConnectButton.tsx

@@ -0,0 +1,25 @@
+import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
+import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import React from 'react'
+import { Button } from '@material-ui/core'
+
+function ConnectButton(props: { connecting: boolean; classes: any; toggle: () => void }) {
+  const { classes, toggle, connecting } = props
+
+  if (connecting) {
+    return (
+      <Button variant="contained" color="primary" className={classes.button} onClick={toggle}>
+        <ConnectionHealthIndicator />
+        &nbsp;&nbsp;Abort
+      </Button>
+    )
+  }
+
+  return (
+    <Button variant="contained" color="primary" className={classes.button} onClick={toggle}>
+      <PowerSettingsNew /> Connect
+    </Button>
+  )
+}
+
+export default ConnectButton

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -1,8 +1,8 @@
-import * as React from 'react'
+import ConnectButton from './ConnectButton'
 import Delete from '@material-ui/icons/Delete'
-import Settings from '@material-ui/icons/Settings'
-import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import React, { useCallback, useState } from 'react'
 import Save from '@material-ui/icons/Save'
+import Settings from '@material-ui/icons/Settings'
 import Visibility from '@material-ui/icons/Visibility'
 import VisibilityOff from '@material-ui/icons/VisibilityOff'
 import { AppState } from '../../reducers'
@@ -10,22 +10,21 @@ import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, connectionManagerActions } from '../../actions'
 import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
+import { KeyCodes } from '../../utils/KeyCodes'
 import { Theme, withStyles } from '@material-ui/core/styles'
-
+import { ToggleSwitch } from './ToggleSwitch'
+import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
 import {
   Button,
   FormControl,
-  FormControlLabel,
   Grid,
   IconButton,
   Input,
   InputAdornment,
   InputLabel,
   MenuItem,
-  Switch,
   TextField,
 } from '@material-ui/core'
-import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 
 interface Props {
   connection: ConnectionOptions
@@ -38,57 +37,66 @@ interface Props {
 
 const protocols = ['mqtt', 'ws']
 
-interface State {
-  showPassword: boolean
-}
+function ConnectionSettings(props: Props) {
+  const [showPassword, setShowPassword] = useState(false)
 
-class ConnectionSettings extends React.Component<Props, State> {
-  constructor(props: any) {
-    super(props)
-
-    this.state = {
-      showPassword: false,
+  const toggleConnect = useCallback(() => {
+    if (props.connecting) {
+      props.actions.disconnect()
+      return
     }
+
+    if (!props.connection) {
+      return
+    }
+
+    const mqttOptions = toMqttConnection(props.connection)
+    if (mqttOptions) {
+      props.actions.connect(mqttOptions, props.connection.id)
+    }
+  }, [props.connection, props.connecting])
+
+  useGlobalKeyEventHandler(KeyCodes.escape, props.actions.disconnect)
+  useGlobalKeyEventHandler(KeyCodes.enter, toggleConnect, [props.connecting])
+
+  const handleClickShowPassword = useCallback(() => {
+    setShowPassword(!showPassword)
+  }, [showPassword])
+
+  function requiresBasePath() {
+    return props.connection.protocol !== 'mqtt'
   }
 
-  private handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword })
-  }
-
-  private requiresBasePath() {
-    return this.props.connection.protocol !== 'mqtt'
-  }
-
-  private renderBasePathInput() {
+  function renderBasePathInput() {
     return (
       <Grid item={true} xs={4}>
         <TextField
           label="Basepath"
-          className={this.props.classes.textField}
-          value={this.props.connection.basePath}
-          onChange={this.handleChange('basePath')}
+          className={props.classes.textField}
+          value={props.connection.basePath}
+          onChange={handleChange('basePath')}
           margin="normal"
         />
       </Grid>
     )
   }
 
-  private handleChange = (name: string) => (event: any) => {
-    if (!this.props.connection) {
+  const handleChange = (name: string) => (event: any) => {
+    if (!props.connection) {
       return
     }
 
-    this.updateConnection(name, event.target.value)
+    updateConnection(name, event.target.value)
   }
 
-  private updateConnection(name: string, value: any) {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
+  const updateConnection = (name: string, value: any) => {
+    props.managerActions.updateConnection(props.connection.id, {
       [name]: value,
     })
   }
 
-  private renderProtocols() {
-    const { classes, connection } = this.props
+  const renderProtocols = () => {
+    const { classes, connection } = props
 
     const protocolItems = protocols.map((value: string) => (
       <MenuItem key={value} value={value}>
@@ -102,7 +110,7 @@ class ConnectionSettings extends React.Component<Props, State> {
         label="Protocol"
         className={classes.textField}
         value={connection.protocol}
-        onChange={this.updateProtocol}
+        onChange={updateProtocol}
         margin="normal"
       >
         {protocolItems}
@@ -110,191 +118,142 @@ class ConnectionSettings extends React.Component<Props, State> {
     )
   }
 
-  private updateProtocol = (event: React.ChangeEvent<HTMLInputElement>) => {
+  const updateProtocol = (event: React.ChangeEvent<HTMLInputElement>) => {
     const value = event.target.value
-    this.updateConnection('protocol', value)
+    updateConnection('protocol', value)
     if (event.target.value === 'mqtt') {
-      this.updateConnection('basePath', undefined)
+      updateConnection('basePath', undefined)
     } else {
-      this.updateConnection('basePath', 'ws')
+      updateConnection('basePath', 'ws')
     }
   }
 
-  private renderCertValidationSwitch() {
-    const { classes, connection } = this.props
-
-    const certSwitch = (
-      <Switch checked={connection.certValidation} onChange={this.toggleCertValidation} color="primary" />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel control={certSwitch} label="Validate certificate" labelPlacement="bottom" />
-      </div>
-    )
-  }
-
-  private toggleCertValidation = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      certValidation: !this.props.connection.certValidation,
+  const toggleCertValidation = () => {
+    props.managerActions.updateConnection(props.connection.id, {
+      certValidation: !props.connection.certValidation,
     })
   }
 
-  private renderTlsSwitch() {
-    const { classes, connection } = this.props
-
-    const tlsSwitch = <Switch checked={connection.encryption} onChange={this.toggleTls} color="primary" />
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel control={tlsSwitch} label="Encryption (tls)" labelPlacement="bottom" />
-      </div>
-    )
-  }
-
-  private toggleTls = () => {
-    this.props.managerActions.updateConnection(this.props.connection.id, {
-      encryption: !this.props.connection.encryption,
+  const toggleTls = () => {
+    props.managerActions.updateConnection(props.connection.id, {
+      encryption: !props.connection.encryption,
     })
   }
 
-  private renderConnectButton() {
-    const { classes, actions } = this.props
-
-    if (this.props.connecting) {
-      return (
-        <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
-          <ConnectionHealthIndicator />
-          &nbsp;&nbsp;Abort
-        </Button>
-      )
-    }
+  function PasswordVisibilityButton(props: { showPassword: boolean; toggle: () => void }) {
     return (
-      <Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
-        <PowerSettingsNew /> Connect
-      </Button>
-    )
-  }
-
-  private onClickConnect = () => {
-    if (!this.props.connection) {
-      return
-    }
-
-    const mqttOptions = toMqttConnection(this.props.connection)
-    if (mqttOptions) {
-      this.props.actions.connect(mqttOptions, this.props.connection.id)
-    }
-  }
-
-  public render() {
-    const { classes, connection } = this.props
-
-    const passwordVisibilityButton = (
       <InputAdornment position="end">
-        <IconButton aria-label="Toggle password visibility" onClick={this.handleClickShowPassword}>
-          {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
+        <IconButton aria-label="Toggle password visibility" onClick={props.toggle}>
+          {props.showPassword ? <Visibility /> : <VisibilityOff />}
         </IconButton>
       </InputAdornment>
     )
-
-    return (
-      <div>
-        <form className={classes.container} noValidate={true} autoComplete="off">
-          <Grid container={true} spacing={3}>
-            <Grid item={true} xs={5}>
-              <TextField
-                label="Name"
-                className={classes.textField}
-                value={connection.name}
-                onChange={this.handleChange('name')}
-                margin="normal"
-              />
-            </Grid>
-            <Grid item={true} xs={4}>
-              {this.renderCertValidationSwitch()}
-            </Grid>
-            <Grid item={true} xs={3}>
-              {this.renderTlsSwitch()}
-            </Grid>
-            <Grid item={true} xs={2}>
-              {this.renderProtocols()}
-            </Grid>
-            <Grid item={true} xs={7}>
-              <TextField
-                label="Host"
-                className={classes.textField}
-                value={connection.host}
-                onChange={this.handleChange('host')}
-                margin="normal"
-              />
-            </Grid>
-            <Grid item={true} xs={3}>
-              <TextField
-                label="Port"
-                className={classes.textField}
-                value={connection.port}
-                onChange={this.handleChange('port')}
-                margin="normal"
-              />
-            </Grid>
-            {this.requiresBasePath() ? this.renderBasePathInput() : null}
-            <Grid item={true} xs={this.requiresBasePath() ? 4 : 6}>
-              <TextField
-                label="Username"
-                className={classes.textField}
-                value={connection.username}
-                onChange={this.handleChange('username')}
-                margin="normal"
-              />
-            </Grid>
-            <Grid item={true} xs={this.requiresBasePath() ? 4 : 6}>
-              <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
-                <InputLabel htmlFor="adornment-password">Password</InputLabel>
-                <Input
-                  id="adornment-password"
-                  type={this.state.showPassword ? 'text' : 'password'}
-                  value={connection.password}
-                  onChange={this.handleChange('password')}
-                  endAdornment={passwordVisibilityButton}
-                />
-              </FormControl>
-            </Grid>
-          </Grid>
-          <br />
-          <div>
-            <div style={{ float: 'left' }}>
-              <Button
-                variant="contained"
-                className={classes.button}
-                onClick={() => this.props.managerActions.deleteConnection(this.props.connection.id)}
-              >
-                Delete <Delete />
-              </Button>
-              <Button
-                variant="contained"
-                className={classes.button}
-                onClick={this.props.managerActions.toggleAdvancedSettings}
-              >
-                <Settings /> Advanced
-              </Button>
-            </div>
-            <div style={{ float: 'right' }}>
-              <Button
-                variant="contained"
-                color="secondary"
-                className={classes.button}
-                onClick={this.props.managerActions.saveConnectionSettings}
-              >
-                <Save /> Save
-              </Button>
-              {this.renderConnectButton()}
-            </div>
-          </div>
-        </form>
-      </div>
-    )
   }
+
+  const { classes, connection } = props
+
+  return (
+    <div>
+      <form className={classes.container} noValidate={true} autoComplete="off">
+        <Grid container={true} spacing={3}>
+          <Grid item={true} xs={5}>
+            <TextField
+              autoFocus={true}
+              label="Name"
+              className={classes.textField}
+              value={connection.name}
+              onChange={handleChange('name')}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item={true} xs={4}>
+            <ToggleSwitch
+              label="Validate certificate"
+              classes={classes}
+              value={connection.certValidation}
+              toggle={toggleCertValidation}
+            />
+          </Grid>
+          <Grid item={true} xs={3}>
+            <ToggleSwitch label="Encryption (tls)" classes={classes} value={connection.encryption} toggle={toggleTls} />
+          </Grid>
+          <Grid item={true} xs={2}>
+            {renderProtocols()}
+          </Grid>
+          <Grid item={true} xs={7}>
+            <TextField
+              label="Host"
+              className={classes.textField}
+              value={connection.host}
+              onChange={handleChange('host')}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item={true} xs={3}>
+            <TextField
+              label="Port"
+              className={classes.textField}
+              value={connection.port}
+              onChange={handleChange('port')}
+              margin="normal"
+            />
+          </Grid>
+          {requiresBasePath() ? renderBasePathInput() : null}
+          <Grid item={true} xs={requiresBasePath() ? 4 : 6}>
+            <TextField
+              label="Username"
+              className={classes.textField}
+              value={connection.username}
+              onChange={handleChange('username')}
+              margin="normal"
+            />
+          </Grid>
+          <Grid item={true} xs={requiresBasePath() ? 4 : 6}>
+            <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
+              <InputLabel htmlFor="adornment-password">Password</InputLabel>
+              <Input
+                id="adornment-password"
+                type={showPassword ? 'text' : 'password'}
+                value={connection.password}
+                onChange={handleChange('password')}
+                endAdornment={<PasswordVisibilityButton showPassword={showPassword} toggle={handleClickShowPassword} />}
+              />
+            </FormControl>
+          </Grid>
+        </Grid>
+        <br />
+        <div>
+          <div style={{ float: 'left' }}>
+            <Button
+              variant="contained"
+              className={classes.button}
+              onClick={() => props.managerActions.deleteConnection(props.connection.id)}
+            >
+              Delete <Delete />
+            </Button>
+            <Button
+              variant="contained"
+              className={classes.button}
+              onClick={props.managerActions.toggleAdvancedSettings}
+            >
+              <Settings /> Advanced
+            </Button>
+          </div>
+          <div style={{ float: 'right' }}>
+            <Button
+              variant="contained"
+              color="secondary"
+              className={classes.button}
+              onClick={props.managerActions.saveConnectionSettings}
+            >
+              <Save /> Save
+            </Button>
+            <ConnectButton toggle={toggleConnect} connecting={props.connecting} classes={classes} />
+          </div>
+        </div>
+      </form>
+    </div>
+  )
 }
 
 const mapStateToProps = (state: AppState) => {

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -9,6 +9,7 @@ import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptio
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { Modal, Paper, Toolbar, Typography, Collapse } from '@material-ui/core'
 import AdvancedConnectionSettings from './AdvancedConnectionSettings'
+import Certificates from './Certificates'
 
 interface Props {
   actions: any
@@ -16,6 +17,7 @@ interface Props {
   connection?: ConnectionOptions
   visible: boolean
   showAdvancedSettings: boolean
+  showCertificateSettings: boolean
 }
 
 class ConnectionSetup extends React.Component<Props, {}> {
@@ -24,19 +26,22 @@ class ConnectionSetup extends React.Component<Props, {}> {
   }
 
   private renderSettings() {
-    const { connection, showAdvancedSettings } = this.props
+    const { connection, showAdvancedSettings, showCertificateSettings } = this.props
     if (!connection) {
       return null
     }
 
     return (
       <div>
-        <Collapse in={!showAdvancedSettings}>
+        <Collapse in={!showAdvancedSettings && !showCertificateSettings}>
           <ConnectionSettings connection={connection} />
         </Collapse>
-        <Collapse in={showAdvancedSettings}>
+        <Collapse in={showAdvancedSettings && !showCertificateSettings}>
           <AdvancedConnectionSettings connection={connection} />
         </Collapse>
+        <Collapse in={showCertificateSettings}>
+          <Certificates connection={connection} />
+        </Collapse>
       </div>
     )
   }
@@ -115,6 +120,7 @@ const mapStateToProps = (state: AppState) => {
   return {
     visible: !state.connection.connected,
     showAdvancedSettings: state.connectionManager.showAdvancedSettings,
+    showCertificateSettings: state.connectionManager.showCertificateSettings,
     connection: state.connectionManager.selected
       ? state.connectionManager.connections[state.connectionManager.selected]
       : undefined,

app/src/components/ConnectionSetup/ProfileList.tsx

@@ -1,120 +0,0 @@
-import * as React from 'react'
-import { AddButton } from './AddButton'
-import { AppState } from '../../reducers'
-import { bindActionCreators } from 'redux'
-import { connect } from 'react-redux'
-import { connectionManagerActions } from '../../actions'
-import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { List, ListItem, ListSubheader, Typography } from '@material-ui/core'
-
-interface Props {
-  classes: any
-  selected?: string
-  connections: { [s: string]: ConnectionOptions }
-  actions: any
-}
-
-class ProfileList extends React.Component<Props, {}> {
-  constructor(props: Props) {
-    super(props)
-  }
-
-  private addConnectionButton() {
-    return (
-      <span id="addProfileButton" style={{ marginRight: '12px' }}>
-        <AddButton action={this.props.actions.createConnection} />
-      </span>
-    )
-  }
-
-  public render() {
-    return (
-      <List
-        style={{ height: '100%' }}
-        component="nav"
-        subheader={<ListSubheader component="div">{this.addConnectionButton()}Connections</ListSubheader>}
-      >
-        <div className={this.props.classes.list}>
-          {Object.values(this.props.connections).map(connection => (
-            <ConnectionItem
-              connection={connection}
-              key={connection.id}
-              selected={this.props.selected === connection.id}
-            />
-          ))}
-        </div>
-      </List>
-    )
-  }
-}
-
-const styles = (theme: Theme) => ({
-  list: {
-    marginTop: theme.spacing(1),
-    height: `calc(100% - ${theme.spacing(6)})`,
-    overflowY: 'auto' as 'auto',
-  },
-})
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(connectionManagerActions, dispatch),
-  }
-}
-
-interface ConnectionItemProps {
-  connection: ConnectionOptions
-  actions: any
-  selected: boolean
-  classes: any
-}
-
-const connectionItemStyle = (theme: Theme) => ({
-  name: {
-    width: '100%',
-    textOverflow: 'ellipsis' as 'ellipsis',
-    whiteSpace: 'nowrap' as 'nowrap',
-    overflow: 'hidden' as 'hidden',
-  },
-  details: {
-    width: '100%',
-    textOverflow: 'ellipsis' as 'ellipsis',
-    whiteSpace: 'nowrap' as 'nowrap',
-    overflow: 'hidden' as 'hidden',
-    color: theme.palette.text.hint,
-    fontSize: '0.7em',
-  },
-})
-
-const connectionItemRenderer = withStyles(connectionItemStyle)((props: ConnectionItemProps) => {
-  const connection = props.connection.host && toMqttConnection(props.connection)
-  return (
-    <ListItem
-      button={true}
-      selected={props.selected}
-      style={{ display: 'block' }}
-      onClick={() => props.actions.selectConnection(props.connection.id)}
-    >
-      <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
-      <Typography className={props.classes.details}>{connection && connection.url}</Typography>
-    </ListItem>
-  )
-})
-
-const ConnectionItem = connect(
-  null,
-  mapDispatchToProps
-)(connectionItemRenderer)
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    connections: state.connectionManager.connections,
-    selected: state.connectionManager.selected,
-  }
-}
-
-export default connect(
-  mapStateToProps,
-  mapDispatchToProps
-)(withStyles(styles)(ProfileList))

app/src/components/ConnectionSetup/ProfileList/AddButton.tsx

@@ -16,8 +16,10 @@ const styles = (theme: Theme) => ({
 
 export const AddButton = withStyles(styles)((props: { classes: any; action: any }) => {
   return (
-    <Fab size="small" color="secondary" aria-label="Add" className={props.classes.addButton} onClick={props.action}>
-      <Add className={props.classes.addIcon} />
-    </Fab>
+    <span id="addProfileButton" style={{ marginRight: '12px' }}>
+      <Fab size="small" color="secondary" aria-label="Add" className={props.classes.addButton} onClick={props.action}>
+        <Add className={props.classes.addIcon} />
+      </Fab>
+    </span>
   )
 })

app/src/components/ConnectionSetup/ProfileList/ConnectionItem.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { connect } from 'react-redux'
+import { ListItem, Typography } from '@material-ui/core'
+import { toMqttConnection, ConnectionOptions } from '../../../model/ConnectionOptions'
+import { withStyles, Theme } from '@material-ui/core/styles'
+import { bindActionCreators } from 'redux'
+import { connectionManagerActions } from '../../../actions'
+
+export interface Props {
+  connection: ConnectionOptions
+  actions: any
+  selected: boolean
+  classes: any
+}
+
+const ConnectionItem = (props: Props) => {
+  const connection = props.connection.host && toMqttConnection(props.connection)
+  return (
+    <ListItem
+      button={true}
+      selected={props.selected}
+      style={{ display: 'block' }}
+      onClick={() => props.actions.selectConnection(props.connection.id)}
+    >
+      <Typography className={props.classes.name}>{props.connection.name || 'mqtt broker'}</Typography>
+      <Typography className={props.classes.details}>{connection && connection.url}</Typography>
+    </ListItem>
+  )
+}
+
+export const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+export const connectionItemStyle = (theme: Theme) => ({
+  name: {
+    width: '100%',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+  },
+  details: {
+    width: '100%',
+    textOverflow: 'ellipsis' as 'ellipsis',
+    whiteSpace: 'nowrap' as 'nowrap',
+    overflow: 'hidden' as 'hidden',
+    color: theme.palette.text.hint,
+    fontSize: '0.7em',
+  },
+})
+
+export default connect(
+  null,
+  mapDispatchToProps
+)(withStyles(connectionItemStyle)(ConnectionItem))

app/src/components/ConnectionSetup/ProfileList/index.tsx

@@ -0,0 +1,83 @@
+import ConnectionItem from './ConnectionItem'
+import React from 'react'
+import { AddButton } from './AddButton'
+import { AppState } from '../../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../../actions'
+import { ConnectionOptions } from '../../../model/ConnectionOptions'
+import { List, ListSubheader } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { useGlobalKeyEventHandler } from '../../../effects/useGlobalKeyEventHandler'
+import { KeyCodes } from '../../../utils/KeyCodes'
+
+interface Props {
+  classes: any
+  selected?: string
+  connections: { [s: string]: ConnectionOptions }
+  actions: typeof connectionManagerActions
+}
+
+function ProfileList(props: Props) {
+  const { actions, classes, connections, selected } = props
+
+  const selectConnection = (dir: 'next' | 'previous') => (event: KeyboardEvent) => {
+    if (!selected) {
+      return
+    }
+    const indexDirection = dir === 'next' ? 1 : -1
+    const connectionArray = Object.values(connections)
+    const selectedIndex = connectionArray.map(connection => connection.id).indexOf(selected)
+    const nextConnection = connectionArray[selectedIndex + indexDirection]
+    if (nextConnection) {
+      actions.selectConnection(nextConnection.id)
+    }
+    event.preventDefault()
+  }
+
+  useGlobalKeyEventHandler(KeyCodes.arrow_down, selectConnection('next'))
+  useGlobalKeyEventHandler(KeyCodes.arrow_up, selectConnection('previous'))
+
+  const createConnectionButton = (
+    <ListSubheader component="div">
+      <AddButton action={actions.createConnection} />
+      Connections
+    </ListSubheader>
+  )
+
+  return (
+    <List style={{ height: '100%' }} component="nav" subheader={createConnectionButton}>
+      <div className={classes.list}>
+        {Object.values(connections).map(connection => (
+          <ConnectionItem connection={connection} key={connection.id} selected={selected === connection.id} />
+        ))}
+      </div>
+    </List>
+  )
+}
+
+const styles = (theme: Theme) => ({
+  list: {
+    marginTop: theme.spacing(1),
+    height: `calc(100% - ${theme.spacing(6)})`,
+    overflowY: 'auto' as 'auto',
+  },
+})
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    connections: state.connectionManager.connections,
+    selected: state.connectionManager.selected,
+  }
+}
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(ProfileList))

app/src/components/ConnectionSetup/ToggleSwitch.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { FormControlLabel, Switch } from '@material-ui/core'
+
+export function ToggleSwitch(props: { value: boolean; classes: any; toggle: () => void; label: string }) {
+  const { classes, value, toggle, label } = props
+  const toggleSwitch = <Switch checked={value} onChange={toggle} color="primary" />
+  return (
+    <div className={classes.switch}>
+      <FormControlLabel control={toggleSwitch} label={label} labelPlacement="bottom" />
+    </div>
+  )
+}

app/src/components/ErrorBoundary.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import PersistentStorage from '../utils/PersistentStorage'
 import SentimentDissatisfied from '@material-ui/icons/SentimentDissatisfied'
 import Warning from '@material-ui/icons/Warning'
-import { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 import { Theme, withStyles } from '@material-ui/core/styles'
 import { Button, Modal, Paper, Toolbar, Typography } from '@material-ui/core'
 
@@ -33,7 +33,7 @@ class ErrorBoundary extends React.Component<Props, State> {
   }
 
   public componentDidCatch(error: Error, errorInfo: any) {
-    electronRendererTelementry.trackError(error)
+    electronRendererTelemetry.trackError(error)
     console.log('did catch', error)
   }
 

app/src/components/Layout/ContentView.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import ChartPanel from '../ChartPanel'
 import ReactSplitPane from 'react-split-pane'
-import Tree from '../Tree/Tree'
+import Tree from '../Tree'
 import { AppState } from '../../reducers'
 import { ChartParameters } from '../../reducers/Charts'
 import { connect } from 'react-redux'

app/src/components/Layout/SearchBar.tsx

@@ -0,0 +1,146 @@
+import React, { useCallback, useState, useRef } from 'react'
+import ClearAdornment from '../helper/ClearAdornment'
+import Search from '@material-ui/icons/Search'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { InputBase } from '@material-ui/core'
+import { settingsActions } from '../../actions'
+import { fade, Theme, withStyles } from '@material-ui/core/styles'
+import { useGlobalKeyEventHandler } from '../../effects/useGlobalKeyEventHandler'
+import { KeyCodes } from '../../utils/KeyCodes'
+
+function SearchBar(props: {
+  classes: any
+  topicFilter?: string
+  hasConnection: boolean
+  actions: {
+    settings: typeof settingsActions
+  }
+}) {
+  const { actions, classes, hasConnection, topicFilter } = props
+
+  const [hasFocus, setHasFocus] = useState(false)
+  const inputRef = useRef<HTMLInputElement>()
+  const onFocus = useCallback(() => setHasFocus(true), [])
+  const onBlur = useCallback(() => setHasFocus(false), [])
+
+  const clearFilter = useCallback(() => {
+    actions.settings.filterTopics('')
+  }, [])
+
+  const onFilterChange = useCallback((event: React.ChangeEvent<HTMLInputElement>) => {
+    actions.settings.filterTopics(event.target.value)
+  }, [])
+
+  useGlobalKeyEventHandler(undefined, event => {
+    const isCharacter = event.key.length === 1
+    const isAllowedControlCharacter = event.keyCode === KeyCodes.backspace || event.keyCode === KeyCodes.delete
+    const tagNameBlacklist = ['INPUT', 'TEXTAREA', 'RADIO', 'CHECKBOX', 'OPTION', 'FORM']
+
+    const tagElementIsNotBlacklisted =
+      document.activeElement && tagNameBlacklist.indexOf(document.activeElement.tagName) === -1
+
+    if (
+      (isCharacter || isAllowedControlCharacter) &&
+      !event.defaultPrevented &&
+      !hasFocus &&
+      tagElementIsNotBlacklisted &&
+      hasConnection
+    ) {
+      // Focus input field, no preventDefault the event will reach the input element after it has been focussed
+      inputRef.current && inputRef.current.focus()
+    }
+  })
+
+  return (
+    <div className={classes.search}>
+      <div className={classes.searchIcon}>
+        <Search />
+      </div>
+      <InputBase
+        value={topicFilter}
+        inputProps={{
+          onFocus,
+          onBlur,
+          ref: inputRef,
+        }}
+        onChange={onFilterChange}
+        placeholder="Search…"
+        endAdornment={
+          <div style={{ width: '24px', paddingRight: '8px' }}>
+            <ClearAdornment variant="primary" action={clearFilter} value={topicFilter} />
+          </div>
+        }
+        classes={{ root: classes.inputRoot, input: classes.inputInput }}
+      />
+    </div>
+  )
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    topicFilter: state.settings.get('topicFilter'),
+    hasConnection: Boolean(state.connection.connectionId),
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: {
+      settings: bindActionCreators(settingsActions, dispatch),
+    },
+  }
+}
+
+const styles = (theme: Theme) => ({
+  search: {
+    position: 'relative' as 'relative',
+    borderRadius: theme.shape.borderRadius,
+    backgroundColor: fade(theme.palette.common.white, 0.15),
+    '&:hover': {
+      backgroundColor: fade(theme.palette.common.white, 0.25),
+    },
+    marginRight: theme.spacing(2),
+    marginLeft: 0,
+    flexGrow: 1,
+    maxWidth: '60%',
+
+    [theme.breakpoints.up('md')]: {
+      maxWidth: '30%',
+
+      marginLeft: theme.spacing(4),
+      width: 'auto' as 'auto',
+    },
+    [theme.breakpoints.up(750)]: {
+      marginLeft: theme.spacing(4),
+      width: 'auto' as 'auto',
+    },
+  },
+  searchIcon: {
+    width: theme.spacing(6),
+    height: '100%',
+    position: 'absolute' as 'absolute',
+    pointerEvents: 'none' as 'none',
+    display: 'flex' as 'flex',
+    alignItems: 'center' as 'center',
+    justifyContent: 'center' as 'center',
+  },
+  inputRoot: {
+    color: 'inherit' as 'inherit',
+    width: '100%',
+  },
+  inputInput: {
+    paddingTop: theme.spacing(1),
+    paddingRight: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingLeft: theme.spacing(6),
+    transition: theme.transitions.create('width'),
+    width: '100%',
+  },
+})
+
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(withStyles(styles)(SearchBar))

app/src/components/Layout/TitleBar.tsx

@@ -1,17 +1,15 @@
 import * as React from 'react'
-import ClearAdornment from '../helper/ClearAdornment'
 import CloudOff from '@material-ui/icons/CloudOff'
 import ConnectionHealthIndicator from '../helper/ConnectionHealthIndicator'
 import Menu from '@material-ui/icons/Menu'
 import PauseButton from './PauseButton'
-import Search from '@material-ui/icons/Search'
+import SearchBar from './SearchBar'
+import { AppBar, Button, IconButton, Toolbar, Typography } from '@material-ui/core'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { connectionActions, globalActions, settingsActions } from '../../actions'
-import { fade } from '@material-ui/core/styles/colorManipulator'
 import { Theme, withStyles } from '@material-ui/core/styles'
-import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
 
 const styles = (theme: Theme) => ({
   title: {
@@ -21,29 +19,6 @@ const styles = (theme: Theme) => ({
     },
     whiteSpace: 'nowrap' as 'nowrap',
   },
-  search: {
-    position: 'relative' as 'relative',
-    borderRadius: theme.shape.borderRadius,
-    backgroundColor: fade(theme.palette.common.white, 0.15),
-    '&:hover': {
-      backgroundColor: fade(theme.palette.common.white, 0.25),
-    },
-    marginRight: theme.spacing(2),
-    marginLeft: 0,
-    flexGrow: 1,
-    maxWidth: '60%',
-
-    [theme.breakpoints.up('md')]: {
-      maxWidth: '30%',
-
-      marginLeft: theme.spacing(4),
-      width: 'auto' as 'auto',
-    },
-    [theme.breakpoints.up(750)]: {
-      marginLeft: theme.spacing(4),
-      width: 'auto' as 'auto',
-    },
-  },
   disconnectIcon: {
     [theme.breakpoints.down('xs')]: {
       display: 'none' as 'none',
@@ -51,27 +26,6 @@ const styles = (theme: Theme) => ({
     marginRight: '8px',
     paddingLeft: '8px',
   },
-  searchIcon: {
-    width: theme.spacing(6),
-    height: '100%',
-    position: 'absolute' as 'absolute',
-    pointerEvents: 'none' as 'none',
-    display: 'flex' as 'flex',
-    alignItems: 'center' as 'center',
-    justifyContent: 'center' as 'center',
-  },
-  inputRoot: {
-    color: 'inherit' as 'inherit',
-    width: '100%',
-  },
-  inputInput: {
-    paddingTop: theme.spacing(1),
-    paddingRight: theme.spacing(1),
-    paddingBottom: theme.spacing(1),
-    paddingLeft: theme.spacing(6),
-    transition: theme.transitions.create('width'),
-    width: '100%',
-  },
   menuButton: {
     marginLeft: -12,
     marginRight: 20,
@@ -98,37 +52,6 @@ class TitleBar extends React.Component<Props, {}> {
     this.state = {}
   }
 
-  private renderSearch() {
-    const { classes, topicFilter } = this.props
-
-    return (
-      <div className={classes.search}>
-        <div className={classes.searchIcon}>
-          <Search />
-        </div>
-        <InputBase
-          value={topicFilter}
-          onChange={this.onFilterChange}
-          placeholder="Search…"
-          endAdornment={
-            <div style={{ width: '24px', paddingRight: '8px' }}>
-              <ClearAdornment variant="primary" action={this.clearFilter} value={topicFilter} />
-            </div>
-          }
-          classes={{ root: classes.inputRoot, input: classes.inputInput }}
-        />
-      </div>
-    )
-  }
-
-  private clearFilter = () => {
-    this.props.actions.settings.filterTopics('')
-  }
-
-  private onFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    this.props.actions.settings.filterTopics(event.target.value)
-  }
-
   public render() {
     const { actions, classes } = this.props
 
@@ -146,7 +69,7 @@ class TitleBar extends React.Component<Props, {}> {
           <Typography className={classes.title} variant="h6" color="inherit">
             MQTT Explorer
           </Typography>
-          {this.renderSearch()}
+          <SearchBar />
           <PauseButton />
           <Button className={classes.disconnect} onClick={actions.connection.disconnect}>
             Disconnect <CloudOff className={classes.disconnectIcon} />

app/src/components/Sidebar/CodeDiff/DiffCount.tsx

@@ -18,7 +18,7 @@ function changeAmount(props: Props) {
   }
 
   return (
-    <span style={{ display: 'block', marginBottom: '8px', float: 'right' }}>
+    <span style={{ display: 'block', textAlign: 'right' }}>
       <span>
         Comparing with <b>{props.nameOfCompareMessage}</b> message:&nbsp;
         <span className={props.classes.additions}>

app/src/components/Sidebar/Publish/Publish.tsx

@@ -192,7 +192,7 @@ class Publish extends React.Component<Props, State> {
   }
 
   private history() {
-    const items = this.state.history.reverse().map(message => ({
+    const items = [...this.state.history].reverse().map(message => ({
       key: sha1(message.topic + message.payload),
       title: message.topic,
       value: message.payload || '',

app/src/components/Sidebar/ValueRenderer/MessageHistory.tsx

@@ -79,7 +79,7 @@ class MessageHistory extends React.Component<Props, State> {
 
     const history = node.messageHistory.toArray()
     let previousMessage: q.Message | undefined = node.message
-    const historyElements = history.reverse().map((message, idx) => {
+    const historyElements = [...history].reverse().map((message, idx) => {
       const value = message.value ? Base64Message.toUnicodeString(message.value) : ''
       const element = {
         value,

app/src/components/Sidebar/ValueRenderer/ValuePanel.tsx

@@ -165,7 +165,7 @@ class ValuePanel extends React.Component<Props, State> {
         </ExpansionPanelSummary>
         <ExpansionPanelDetails style={detailsStyle}>
           {this.renderViewOptions()}
-          <div>
+          <div style={{ marginBottom: '-8px' }}>
             <React.Suspense fallback={<div>Loading...</div>}>{this.renderValue()}</React.Suspense>
           </div>
           <div>

app/src/components/Tree/TreeNode.tsx

@@ -1,255 +0,0 @@
-import * as q from '../../../../backend/src/Model'
-import * as React from 'react'
-import TreeNodeSubnodes from './TreeNodeSubnodes'
-import TreeNodeTitle from './TreeNodeTitle'
-import { Record } from 'immutable'
-import { SettingsState } from '../../reducers/Settings'
-import { Theme, withStyles } from '@material-ui/core/styles'
-import { TopicViewModel } from '../../model/TopicViewModel'
-
-const debounce = require('lodash.debounce')
-
-declare var performance: any
-
-const styles = (theme: Theme) => {
-  return {
-    collapsedSubnodes: {
-      color: theme.palette.text.secondary,
-    },
-    displayBlock: {
-      display: 'block',
-    },
-    node: {
-      display: 'block',
-      marginLeft: '10px',
-    },
-    topicSelect: {
-      float: 'right' as 'right',
-      opacity: 0,
-      cursor: 'pointer',
-      marginTop: '-1px',
-    },
-    subnodes: {
-      marginLeft: theme.spacing(1.5),
-    },
-    selected: {
-      backgroundColor: theme.palette.type === 'dark' ? 'rgba(170, 170, 170, 0.55)' : 'rgba(170, 170, 170, 0.55)',
-    },
-    hover: {
-      backgroundColor: theme.palette.type === 'dark' ? 'rgba(100, 100, 100, 0.55)' : 'rgba(200, 200, 200, 0.55)',
-    },
-    title: {
-      borderRadius: '4px',
-      lineHeight: '1em',
-      display: 'inline-block' as 'inline-block',
-      whiteSpace: 'nowrap' as 'nowrap',
-      padding: '1px 4px 0px 4px',
-      height: '14px',
-      margin: '1px 0px 2px 0px',
-    },
-  }
-}
-
-interface Props {
-  isRoot?: boolean
-  treeNode: q.TreeNode<TopicViewModel>
-  name?: string | undefined
-  collapsed?: boolean | undefined
-  performanceCallback?: ((ms: number) => void) | undefined
-  classes: any
-  className?: string
-  lastUpdate: number
-  didSelectTopic: any
-  theme: Theme
-  settings: Record<SettingsState>
-}
-
-interface State {
-  collapsedOverride: boolean | undefined
-  mouseOver: boolean
-  selected: boolean
-}
-
-class TreeNodeComponent extends React.Component<Props, State> {
-  private animationDirty: boolean = false
-
-  private cssAnimationWasSetAt?: number
-
-  private willUpdateTime: number = performance.now()
-  private nodeRef?: React.RefObject<HTMLDivElement> = React.createRef<HTMLDivElement>()
-
-  private setHover = debounce((hover: boolean) => {
-    this.setState({ mouseOver: hover })
-  }, 45)
-
-  constructor(props: Props) {
-    super(props)
-
-    this.state = {
-      collapsedOverride: props.collapsed,
-      mouseOver: false,
-      selected: false,
-    }
-  }
-
-  private addSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
-    treeNode.viewModel = new TopicViewModel()
-    treeNode.viewModel.change.subscribe(this.viewStateHasChanged)
-  }
-
-  private viewStateHasChanged = () => {
-    this.props.treeNode.viewModel && this.setState({ selected: this.props.treeNode.viewModel.isSelected() })
-  }
-
-  private removeSubscriber(treeNode: q.TreeNode<TopicViewModel>) {
-    treeNode.viewModel && treeNode.viewModel.change.unsubscribe(this.viewStateHasChanged)
-    treeNode.viewModel = undefined
-  }
-
-  private stateHasChanged(newState: State) {
-    return (
-      this.state.collapsedOverride !== newState.collapsedOverride ||
-      this.state.mouseOver !== newState.mouseOver ||
-      this.state.selected !== newState.selected
-    )
-  }
-
-  private toggle() {
-    this.setState({ collapsedOverride: !this.collapsed() })
-  }
-
-  private collapsed() {
-    if (this.state.collapsedOverride !== undefined) {
-      return this.state.collapsedOverride
-    }
-
-    return this.props.treeNode.edgeCount() > this.props.settings.get('autoExpandLimit')
-  }
-
-  private didSelectTopic = () => {
-    this.props.didSelectTopic(this.props.treeNode)
-  }
-
-  private didClickTitle = (event: React.MouseEvent) => {
-    event.preventDefault()
-    this.props.didSelectTopic(this.props.treeNode)
-    this.toggle()
-  }
-
-  private mouseOver = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.setHover(true)
-    if (
-      this.props.settings.get('selectTopicWithMouseOver') &&
-      this.props.treeNode &&
-      this.props.treeNode.message &&
-      this.props.treeNode.message.value
-    ) {
-      this.props.didSelectTopic(this.props.treeNode)
-    }
-  }
-
-  private mouseOut = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.setHover(false)
-  }
-
-  private toggleCollapsed = (event: React.MouseEvent) => {
-    event.stopPropagation()
-    this.toggle()
-  }
-
-  private renderNodes() {
-    if (this.collapsed()) {
-      return null
-    }
-
-    return (
-      <TreeNodeSubnodes
-        collapsed={this.collapsed()}
-        treeNode={this.props.treeNode}
-        lastUpdate={this.props.treeNode.lastUpdate}
-        didSelectTopic={this.props.didSelectTopic}
-        settings={this.props.settings}
-      />
-    )
-  }
-
-  public componentDidMount() {
-    const { treeNode } = this.props
-    this.addSubscriber(treeNode)
-  }
-
-  public componentWillUnmount() {
-    const { treeNode } = this.props
-    this.removeSubscriber(treeNode)
-    this.nodeRef = undefined
-  }
-
-  public shouldComponentUpdate(nextProps: Props, nextState: State) {
-    const shouldRenderToRemoveCssAnimation = this.cssAnimationWasSetAt !== undefined
-    return (
-      this.stateHasChanged(nextState) ||
-      this.props.settings !== nextProps.settings ||
-      this.props.lastUpdate !== nextProps.lastUpdate ||
-      this.animationDirty ||
-      shouldRenderToRemoveCssAnimation
-    )
-  }
-
-  public componentDidUpdate() {
-    if (this.props.performanceCallback) {
-      const renderTime = performance.now() - this.willUpdateTime
-      this.props.performanceCallback(renderTime)
-    }
-  }
-
-  public componentWillUpdate() {
-    if (this.props.performanceCallback) {
-      this.willUpdateTime = performance.now()
-    }
-  }
-
-  public render() {
-    const { classes } = this.props
-
-    const shouldStartAnimation =
-      !this.animationDirty && !this.props.isRoot && this.props.settings.get('highlightTopicUpdates')
-    const animationName = this.props.theme.palette.type === 'light' ? 'updateLight' : 'updateDark'
-    const animation = shouldStartAnimation
-      ? { willChange: 'auto', translateZ: 0, animation: `${animationName} 0.5s` }
-      : {}
-    this.animationDirty = shouldStartAnimation
-
-    const highlightClass = this.state.selected
-      ? this.props.classes.selected
-      : this.state.mouseOver
-      ? this.props.classes.hover
-      : ''
-
-    return (
-      <div>
-        <div
-          key={this.props.treeNode.hash()}
-          className={`${classes.node} ${this.props.className} ${highlightClass} ${classes.title}`}
-          style={animation}
-          onMouseOver={this.mouseOver}
-          onMouseOut={this.mouseOut}
-          onClick={this.didClickTitle}
-          ref={this.nodeRef}
-        >
-          <TreeNodeTitle
-            toggleCollapsed={this.toggleCollapsed}
-            didSelectNode={this.didSelectTopic}
-            collapsed={this.collapsed()}
-            treeNode={this.props.treeNode}
-            name={this.props.name}
-          />
-        </div>
-        {this.renderNodes()}
-      </div>
-    )
-  }
-}
-
-export default withStyles(styles, { withTheme: true })(TreeNodeComponent)

app/src/components/Tree/TreeNode/TreeNodeSubnodes.tsx

@@ -0,0 +1,77 @@
+import * as q from '../../../../../backend/src/Model'
+import React, { useEffect, useState, useMemo } from 'react'
+import TreeNode from '.'
+import { SettingsState } from '../../../reducers/Settings'
+import { sortedNodes } from '../../../sortedNodes'
+import { Theme, withStyles } from '@material-ui/core'
+import { TopicViewModel } from '../../../model/TopicViewModel'
+import { treeActions } from '../../../actions'
+
+export interface Props {
+  treeNode: q.TreeNode<TopicViewModel>
+  filter?: string
+  classes: any
+  lastUpdate: number
+  selectedTopic?: q.TreeNode<TopicViewModel>
+  selectTopicAction: (treeNode: q.TreeNode<any>) => void
+  settings: SettingsState
+  actions: typeof treeActions
+  theme: Theme
+}
+
+function useStagedRendering(treeNode: q.TreeNode<any>) {
+  const [alreadyAdded, setAlreadyAdded] = useState(10)
+  const edges = treeNode.edgeArray
+
+  useEffect(() => {
+    let renderMoreAnimationFrame: any
+
+    if (alreadyAdded < edges.length) {
+      renderMoreAnimationFrame = (window as any).requestIdleCallback(
+        () => {
+          setAlreadyAdded(alreadyAdded * 1.5)
+        },
+        { timeout: 500 }
+      )
+    }
+
+    return function cleanup() {
+      ;(window as any).cancelIdleCallback(renderMoreAnimationFrame)
+    }
+  }, [alreadyAdded, edges.length])
+
+  return alreadyAdded
+}
+
+function TreeNodeSubnodes(props: Props) {
+  const alreadyAdded = useStagedRendering(props.treeNode)
+
+  return useMemo(() => {
+    const nodes = sortedNodes(props.settings, props.treeNode).slice(0, alreadyAdded)
+    const listItems = nodes.map(node => {
+      return (
+        <TreeNode
+          key={`${node.hash()}-${props.filter}`}
+          treeNode={node}
+          className={props.classes.listItem}
+          lastUpdate={node.lastUpdate}
+          selectTopicAction={props.selectTopicAction}
+          settings={props.settings}
+          actions={props.actions}
+        />
+      )
+    })
+
+    return <span className={props.classes.list}>{listItems}</span>
+  }, [alreadyAdded, props.lastUpdate, props.theme])
+}
+
+const styles = (theme: Theme) => ({
+  list: {
+    display: 'block' as 'block',
+    clear: 'both' as 'both',
+    marginLeft: theme.spacing(1.5),
+  },
+})
+
+export default withStyles(styles, { withTheme: true })(TreeNodeSubnodes)

app/src/components/Tree/TreeNode/TreeNodeTitle.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
-import * as q from '../../../../backend/src/Model'
+import * as q from '../../../../../backend/src/Model'
 import { withStyles, Theme } from '@material-ui/core'
-import { TopicViewModel } from '../../model/TopicViewModel'
-import { Base64Message } from '../../../../backend/src/Model/Base64Message'
+import { TopicViewModel } from '../../../model/TopicViewModel'
+import { Base64Message } from '../../../../../backend/src/Model/Base64Message'
 
 export interface TreeNodeProps extends React.HTMLAttributes<HTMLElement> {
   treeNode: q.TreeNode<TopicViewModel>

app/src/components/Tree/TreeNode/effects/useAnimationToIndicateTopicUpdate.tsx

@@ -0,0 +1,30 @@
+import React, { useEffect } from 'react'
+
+export function useAnimationToIndicateTopicUpdate(
+  ref: React.MutableRefObject<HTMLDivElement | undefined>,
+  lastUpdate: number,
+  className: string,
+  selected: boolean,
+  shouldAnimate: boolean
+) {
+  useEffect(() => {
+    if (ref.current && shouldAnimate && Date.now() - lastUpdate < 3000 && !selected) {
+      let animationFrame = requestAnimationFrame(() => {
+        ref.current && ref.current.classList.add(className)
+      })
+
+      const timeout = setTimeout(
+        () =>
+          (animationFrame = requestAnimationFrame(() => {
+            ref.current && ref.current.classList.remove(className)
+          })),
+        500
+      )
+
+      return function cleanup() {
+        clearTimeout(timeout)
+        animationFrame && cancelAnimationFrame(animationFrame)
+      }
+    }
+  }, [lastUpdate, selected, shouldAnimate, className])
+}

app/src/components/Tree/TreeNode/effects/useDeleteKeyCallback.tsx

@@ -0,0 +1,18 @@
+import * as q from '../../../../../../backend/src/Model'
+import React, { useCallback } from 'react'
+import { KeyCodes } from '../../../../utils/KeyCodes'
+import { treeActions } from '../../../../actions'
+
+export function useDeleteKeyCallback(topic: q.TreeNode<any>, actions: typeof treeActions) {
+  return useCallback(
+    (event: React.KeyboardEvent) => {
+      return
+      if (event.keyCode === KeyCodes.delete || event.keyCode === KeyCodes.backspace) {
+        event.stopPropagation()
+        event.preventDefault()
+        actions.clearTopic(topic, true, 50)
+      }
+    },
+    [topic]
+  )
+}

app/src/components/Tree/TreeNode/effects/useIsAllowedToAutoExpandState.tsx

@@ -0,0 +1,14 @@
+import { Props } from '..'
+import { useEffect, useState } from 'react'
+
+export function useIsAllowedToAutoExpandState(props: Props): boolean {
+  const { settings, treeNode, isRoot } = props
+  const [isAllowedToAutoExpand, setAllowAutoExpand] = useState(false)
+  useEffect(() => {
+    const newIsAllowedToAutoExpand = isRoot || treeNode.edgeCount() <= settings.get('autoExpandLimit')
+    if (newIsAllowedToAutoExpand !== isAllowedToAutoExpand) {
+      setAllowAutoExpand(newIsAllowedToAutoExpand)
+    }
+  }, [treeNode.edgeCount(), settings.get('autoExpandLimit')])
+  return isAllowedToAutoExpand
+}

app/src/components/Tree/TreeNode/effects/useViewModelSubscriptions.tsx

@@ -0,0 +1,44 @@
+import * as q from '../../../../../../backend/src/Model'
+import React, { useEffect } from 'react'
+import { TopicViewModel } from '../../../../model/TopicViewModel'
+
+export function useViewModelSubscriptions(
+  treeNode: q.TreeNode<TopicViewModel>,
+  nodeRef: React.MutableRefObject<HTMLDivElement | undefined>,
+  setSelected: (value: boolean) => void,
+  setCollapsedOverride: (value: boolean) => void
+) {
+  const selectionDidChange = () => {
+    const selected = treeNode.viewModel && treeNode.viewModel.isSelected()
+    treeNode.viewModel && setSelected(Boolean(selected))
+
+    if (selected && nodeRef && nodeRef.current) {
+      nodeRef.current.focus({ preventScroll: false })
+    }
+  }
+
+  const expandedDidChange = () => {
+    treeNode.viewModel && setCollapsedOverride(!treeNode.viewModel.isExpanded())
+  }
+
+  useEffect(() => {
+    addSubscriber()
+    return function cleanup() {
+      removeSubscriber()
+    }
+  }, [treeNode])
+
+  function addSubscriber() {
+    treeNode.viewModel = new TopicViewModel()
+    treeNode.viewModel.selectionChange.subscribe(selectionDidChange)
+    treeNode.viewModel.expandedChange.subscribe(expandedDidChange)
+  }
+
+  function removeSubscriber() {
+    if (treeNode.viewModel) {
+      treeNode.viewModel.selectionChange.unsubscribe(selectionDidChange)
+      treeNode.viewModel.expandedChange.unsubscribe(expandedDidChange)
+      treeNode.viewModel = undefined
+    }
+  }
+}

app/src/components/Tree/TreeNode/index.tsx

@@ -0,0 +1,139 @@
+import * as q from '../../../../../backend/src/Model'
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import TreeNodeSubnodes from './TreeNodeSubnodes'
+import TreeNodeTitle from './TreeNodeTitle'
+import { SettingsState } from '../../../reducers/Settings'
+import { styles } from './styles'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import { TopicViewModel } from '../../../model/TopicViewModel'
+import { treeActions } from '../../../actions'
+import { useAnimationToIndicateTopicUpdate } from './effects/useAnimationToIndicateTopicUpdate'
+import { useDeleteKeyCallback } from './effects/useDeleteKeyCallback'
+import { useIsAllowedToAutoExpandState } from './effects/useIsAllowedToAutoExpandState'
+import { useViewModelSubscriptions } from './effects/useViewModelSubscriptions'
+
+export interface Props {
+  isRoot?: boolean
+  treeNode: q.TreeNode<TopicViewModel>
+  name?: string | undefined
+  collapsed?: boolean | undefined
+  classes: any
+  className?: string
+  lastUpdate: number
+  actions: typeof treeActions
+  selectTopicAction: (treeNode: q.TreeNode<any>) => void
+  theme: Theme
+  settings: SettingsState
+}
+
+function TreeNodeComponent(props: Props) {
+  const { actions, classes, className, settings, theme, treeNode, lastUpdate, name } = props
+  const deleteTopicCallback = useDeleteKeyCallback(treeNode, actions)
+  const [collapsedOverride, setCollapsedOverride] = useState<boolean | undefined>(undefined)
+  const [selected, setSelected] = useState(false)
+  const nodeRef = useRef<HTMLDivElement>()
+  const isAllowedToAutoExpand = useIsAllowedToAutoExpandState(props)
+  useViewModelSubscriptions(treeNode, nodeRef, setSelected, setCollapsedOverride)
+  const animationClass =
+    props.theme.palette.type === 'light' ? props.classes.animationLight : props.classes.animationDark
+
+  useAnimationToIndicateTopicUpdate(
+    nodeRef,
+    lastUpdate,
+    animationClass,
+    selected,
+    settings.get('highlightTopicUpdates')
+  )
+
+  const isCollapsed =
+    Boolean(collapsedOverride) === collapsedOverride ? Boolean(collapsedOverride) : !isAllowedToAutoExpand
+
+  const toggle = useCallback(() => {
+    setCollapsedOverride(!isCollapsed)
+  }, [isCollapsed])
+
+  const didSelectTopic = useCallback(
+    (event?: React.MouseEvent) => {
+      event && event.stopPropagation()
+      props.selectTopicAction(treeNode)
+    },
+    [treeNode]
+  )
+
+  const didClickTitle = React.useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      didSelectTopic()
+      toggle()
+    },
+    [toggle, didSelectTopic]
+  )
+
+  const toggleCollapsed = useCallback(
+    (event: React.MouseEvent) => {
+      event.stopPropagation()
+      toggle()
+    },
+    [toggle]
+  )
+
+  const didObtainFocus = useCallback(() => {
+    didSelectTopic()
+  }, [didSelectTopic])
+
+  const mouseOver = (event: React.MouseEvent) => {
+    event.stopPropagation()
+    if (settings.get('selectTopicWithMouseOver') && treeNode && treeNode.message && treeNode.message.value) {
+      didSelectTopic()
+    }
+  }
+
+  useEffect(() => {
+    treeNode.viewModel && treeNode.viewModel.setExpanded(!isCollapsed, false)
+  }, [isCollapsed])
+
+  return useMemo(() => {
+    function renderNodes() {
+      if (isCollapsed) {
+        return null
+      }
+
+      return (
+        <TreeNodeSubnodes
+          treeNode={treeNode}
+          lastUpdate={treeNode.lastUpdate}
+          selectTopicAction={props.selectTopicAction}
+          settings={settings}
+          actions={props.actions}
+        />
+      )
+    }
+
+    const highlightClass = selected ? classes.selected : ''
+    return (
+      <div>
+        <div
+          key={treeNode.hash()}
+          className={`${classes.node} ${className} ${highlightClass} ${classes.title}`}
+          onMouseEnter={mouseOver}
+          onFocus={didObtainFocus}
+          onClick={didClickTitle}
+          ref={nodeRef as any}
+          tabIndex={-1}
+          onKeyDown={deleteTopicCallback}
+        >
+          <TreeNodeTitle
+            toggleCollapsed={toggleCollapsed}
+            didSelectNode={didSelectTopic}
+            collapsed={isCollapsed}
+            treeNode={treeNode}
+            name={name}
+          />
+        </div>
+        {renderNodes()}
+      </div>
+    )
+  }, [lastUpdate, treeNode, name, isCollapsed, selected, theme])
+}
+
+export default withStyles(styles, { withTheme: true })(TreeNodeComponent)

app/src/components/Tree/TreeNode/styles.ts

@@ -0,0 +1,52 @@
+import { blueGrey } from '@material-ui/core/colors'
+import { Theme } from '@material-ui/core/styles'
+
+export const styles = (theme: Theme) => {
+  return {
+    animationLight: {
+      willChange: 'auto',
+      translateZ: 0,
+      animation: `updateLight 0.5s`,
+    },
+    animationDark: {
+      willChange: 'auto',
+      translateZ: 0,
+      animation: `updateLight 0.5s`,
+    },
+    collapsedSubnodes: {
+      color: theme.palette.text.secondary,
+    },
+    displayBlock: {
+      display: 'block',
+    },
+    node: {
+      display: 'block',
+      marginLeft: '10px',
+      '&:hover': {
+        backgroundColor: theme.palette.type === 'light' ? blueGrey[100] : theme.palette.primary.light,
+      },
+    },
+    topicSelect: {
+      float: 'right' as 'right',
+      opacity: 0,
+      cursor: 'pointer',
+      marginTop: '-1px',
+    },
+    subnodes: {
+      marginLeft: theme.spacing(1.5),
+    },
+    selected: {
+      backgroundColor: (theme.palette.type === 'light' ? blueGrey[300] : theme.palette.primary.main) + ' !important',
+    },
+    hover: {},
+    title: {
+      borderRadius: '4px',
+      lineHeight: '1em',
+      display: 'inline-block' as 'inline-block',
+      whiteSpace: 'nowrap' as 'nowrap',
+      padding: '1px 4px 0px 4px',
+      height: '14px',
+      margin: '1px 0px 2px 0px',
+    },
+  }
+}

app/src/components/Tree/TreeNodeSubnodes.tsx

@@ -1,100 +0,0 @@
-import * as q from '../../../../backend/src/Model'
-import * as React from 'react'
-import TreeNode from './TreeNode'
-import { Record } from 'immutable'
-import { SettingsState, TopicOrder } from '../../reducers/Settings'
-import { Theme, withStyles } from '@material-ui/core'
-import { TopicViewModel } from '../../model/TopicViewModel'
-
-export interface Props {
-  treeNode: q.TreeNode<TopicViewModel>
-  filter?: string
-  collapsed?: boolean | undefined
-  classes: any
-  lastUpdate: number
-  selectedTopic?: q.TreeNode<TopicViewModel>
-  didSelectTopic: any
-  settings: Record<SettingsState>
-}
-
-interface State {
-  alreadyAdded: number
-}
-
-class TreeNodeSubnodes extends React.Component<Props, State> {
-  private renderMoreAnimationFrame?: any
-  constructor(props: Props) {
-    super(props)
-    this.state = { alreadyAdded: 10 }
-  }
-
-  private sortedNodes(): Array<q.TreeNode<TopicViewModel>> {
-    const { settings, treeNode } = this.props
-    const topicOrder = settings.get('topicOrder')
-
-    let edges = treeNode.edgeArray
-    if (topicOrder === TopicOrder.abc) {
-      edges = edges.sort((a, b) => a.name.localeCompare(b.name))
-    }
-
-    let nodes = edges.map(edge => edge.target)
-    if (topicOrder === TopicOrder.messages) {
-      nodes = nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
-    }
-    if (topicOrder === TopicOrder.topics) {
-      nodes = nodes.sort((a, b) => b.childTopicCount() - a.childTopicCount())
-    }
-
-    return nodes
-  }
-
-  private renderMore() {
-    this.renderMoreAnimationFrame = (window as any).requestIdleCallback(
-      () => {
-        this.setState({ ...this.state, alreadyAdded: this.state.alreadyAdded * 1.5 })
-      },
-      { timeout: 500 }
-    )
-  }
-
-  public componentWillUnmount() {
-    ;(window as any).cancelIdleCallback(this.renderMoreAnimationFrame)
-  }
-
-  public render() {
-    const edges = this.props.treeNode.edgeArray
-    if (edges.length === 0 || this.props.collapsed) {
-      return null
-    }
-
-    if (this.state.alreadyAdded < edges.length) {
-      this.renderMore()
-    }
-
-    const nodes = this.sortedNodes().slice(0, this.state.alreadyAdded)
-    const listItems = nodes.map(node => {
-      return (
-        <TreeNode
-          key={`${node.hash()}-${this.props.filter}`}
-          treeNode={node}
-          className={this.props.classes.listItem}
-          lastUpdate={node.lastUpdate}
-          didSelectTopic={this.props.didSelectTopic}
-          settings={this.props.settings}
-        />
-      )
-    })
-
-    return <span className={this.props.classes.list}>{listItems}</span>
-  }
-}
-
-const styles = (theme: Theme) => ({
-  list: {
-    display: 'block' as 'block',
-    clear: 'both' as 'both',
-    marginLeft: theme.spacing(1.5),
-  },
-})
-
-export default withStyles(styles)(TreeNodeSubnodes)

app/src/components/Tree/index.tsx

@@ -1,13 +1,13 @@
 import * as q from '../../../../backend/src/Model'
-import * as React from 'react'
+import React, { useCallback } from 'react'
 import TreeNode from './TreeNode'
 import { AppState } from '../../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
-import { Record } from 'immutable'
 import { SettingsState } from '../../reducers/Settings'
 import { TopicViewModel } from '../../model/TopicViewModel'
 import { treeActions } from '../../actions'
+import { KeyCodes } from '../../utils/KeyCodes'
 
 const MovingAverage = require('moving-average')
 
@@ -20,16 +20,38 @@ interface Props {
   actions: typeof treeActions
   connectionId?: string
   tree?: q.Tree<TopicViewModel>
-  filter: string
   host?: string
   paused: boolean
-  settings: Record<SettingsState>
+  settings: SettingsState
 }
 
 interface State {
   lastUpdate: number
 }
 
+function useArrowKeyEventHandler(actions: typeof treeActions) {
+  return (event: React.KeyboardEvent) => {
+    switch (event.keyCode) {
+      case KeyCodes.arrow_down:
+        actions.moveSelectionUpOrDownwards('next')
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_up:
+        actions.moveSelectionUpOrDownwards('previous')
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_left:
+        actions.moveOutward()
+        event.preventDefault()
+        break
+      case KeyCodes.arrow_right:
+        actions.moveInward()
+        event.preventDefault()
+        break
+    }
+  }
+}
+
 class TreeComponent extends React.PureComponent<Props, State> {
   private updateTimer?: any
   private perf: number = 0
@@ -40,17 +62,11 @@ class TreeComponent extends React.PureComponent<Props, State> {
     this.state = { lastUpdate: 0 }
   }
 
+  private keyEventHandler = useArrowKeyEventHandler(this.props.actions)
   private performanceCallback = (ms: number) => {
     average.push(Date.now(), ms)
   }
 
-  public time(): number {
-    const time = performance.now() - this.perf
-    this.perf = performance.now()
-
-    return time
-  }
-
   public componentWillReceiveProps(nextProps: Props) {
     if (this.props.tree !== nextProps.tree) {
       if (this.props.tree) {
@@ -98,8 +114,16 @@ class TreeComponent extends React.PureComponent<Props, State> {
     }, Math.max(0, timeUntilNextUpdate))
   }
 
+  public componentWillUpdate() {
+    this.perf = performance.now()
+  }
+
+  public componentDidUpdate() {
+    this.performanceCallback(performance.now() - this.perf)
+  }
+
   public render() {
-    const { tree, filter } = this.props
+    const { tree } = this.props
     if (!tree) {
       return null
     }
@@ -111,21 +135,22 @@ class TreeComponent extends React.PureComponent<Props, State> {
       overflowX: 'hidden',
       height: '100%',
       width: '100%',
+      outline: '24px black !important',
       paddingBottom: '16px', // avoid conflict with chart panel Resizer
     }
 
     return (
-      <div style={style}>
+      <div style={style} tabIndex={0} onKeyDown={this.keyEventHandler}>
         <TreeNode
           key={tree.hash()}
           isRoot={true}
           treeNode={tree}
           name={this.props.host}
           collapsed={false}
-          performanceCallback={this.performanceCallback}
           settings={this.props.settings}
           lastUpdate={tree.lastUpdate}
-          didSelectTopic={this.props.actions.selectTopic}
+          actions={this.props.actions}
+          selectTopicAction={this.props.actions.selectTopic}
         />
       </div>
     )

app/src/components/UpdateNotifier.tsx

@@ -180,7 +180,7 @@ class UpdateNotifier extends React.Component<Props, State> {
     let regex: RegExp
     if (os.platform() === 'darwin') {
       regex = /\.dmg$/
-    } else if (os.platform() === 'darwin') {
+    } else if (os.platform() === 'win32') {
       regex = /\.exe$/
     } else {
       regex = /\.AppImage$/

app/src/effects/useGlobalKeyEventHandler.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react'
+import { KeyCodes } from '../utils/KeyCodes'
+
+export function useGlobalKeyEventHandler(
+  key: KeyCodes | undefined,
+  callback: (event: KeyboardEvent) => void,
+  dependencies?: Array<any>
+) {
+  useEffect(() => {
+    function handleKeyEvent(event: KeyboardEvent) {
+      if (key === undefined) {
+        callback(event)
+      } else if (event.keyCode === key) {
+        callback(event)
+        event.preventDefault()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyEvent, false)
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeyEvent, false)
+    }
+  }, dependencies)
+}

app/src/model/ConnectionOptions.ts

@@ -20,6 +20,8 @@ export interface ConnectionOptions {
   encryption: boolean
   certValidation: boolean
   selfSignedCertificate?: CertificateParameters
+  clientCertificate?: CertificateParameters
+  clientKey?: CertificateParameters
   clientId?: string
   subscriptions: Array<string>
 }
@@ -38,6 +40,8 @@ export function toMqttConnection(options: ConnectionOptions): MqttOptions | unde
     certValidation: options.certValidation,
     subscriptions: options.subscriptions,
     certificateAuthority: options.selfSignedCertificate ? options.selfSignedCertificate.data : undefined,
+    clientCertificate: options.clientCertificate ? options.clientCertificate.data : undefined,
+    clientKey: options.clientKey ? options.clientKey.data : undefined,
   }
 }
 

app/src/model/TopicViewModel.ts

@@ -3,22 +3,37 @@ import { EventDispatcher } from '../../../events'
 
 export class TopicViewModel implements Destroyable {
   private selected: boolean
-  public change = new EventDispatcher<void, TopicViewModel>()
+  private expanded: boolean
+  public selectionChange = new EventDispatcher<void>()
+  public expandedChange = new EventDispatcher<void>()
 
   public constructor() {
     this.selected = false
+    this.expanded = false
   }
 
   public destroy() {
-    this.change.removeAllListeners()
+    this.selectionChange.removeAllListeners()
   }
 
   public isSelected() {
     return this.selected
   }
 
+  public isExpanded() {
+    return this.expanded
+  }
+
   public setSelected(selected: boolean) {
     this.selected = selected
-    this.change.dispatch()
+    this.selectionChange.dispatch()
+  }
+
+  public setExpanded(expanded: boolean, fireEvent: boolean) {
+    const didChange = this.expanded !== expanded
+    this.expanded = expanded
+    if (didChange && fireEvent) {
+      this.expandedChange.dispatch()
+    }
   }
 }

app/src/reducers/ConnectionManager.ts

@@ -6,12 +6,14 @@ export interface ConnectionManagerState {
   connections: { [s: string]: ConnectionOptions }
   selected?: string
   showAdvancedSettings: boolean
+  showCertificateSettings: boolean
 }
 
 const initialState: ConnectionManagerState = {
   connections: {},
   selected: undefined,
   showAdvancedSettings: false,
+  showCertificateSettings: false,
 }
 
 export type Action =
@@ -21,6 +23,7 @@ export type Action =
   | AddConnection
   | DeleteConnection
   | ToggleAdvancedSettings
+  | ToggleCertificateSettings
   | DeleteSubscription
   | AddSubscription
 
@@ -31,6 +34,7 @@ export enum ActionTypes {
   CONNECTION_MANAGER_ADD_CONNECTION = 'CONNECTION_MANAGER_ADD_CONNECTION',
   CONNECTION_MANAGER_DELETE_CONNECTION = 'CONNECTION_MANAGER_DELETE_CONNECTION',
   CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS = 'CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS',
+  CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS = 'CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS',
   CONNECTION_MANAGER_ADD_SUBSCRIPTION = 'CONNECTION_MANAGER_ADD_SUBSCRIPTION',
   CONNECTION_MANAGER_DELETE_SUBSCRIPTION = 'CONNECTION_MANAGER_DELETE_SUBSCRIPTION',
 }
@@ -77,6 +81,10 @@ export interface ToggleAdvancedSettings {
   type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS
 }
 
+export interface ToggleCertificateSettings {
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS
+}
+
 export const connectionManagerReducer = createReducer(initialState, {
   CONNECTION_MANAGER_SET_CONNECTIONS: setConnections,
   CONNECTION_MANAGER_SELECT_CONNECTION: selectConnection,
@@ -84,6 +92,7 @@ export const connectionManagerReducer = createReducer(initialState, {
   CONNECTION_MANAGER_ADD_CONNECTION: addConnection,
   CONNECTION_MANAGER_DELETE_CONNECTION: deleteConnection,
   CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS: toggleAdvancedSettings,
+  CONNECTION_MANAGER_TOGGLE_CERTIFICATE_SETTINGS: toggleCertificateSettings,
   CONNECTION_MANAGER_DELETE_SUBSCRIPTION: deleteSubscription,
   CONNECTION_MANAGER_ADD_SUBSCRIPTION: addSubscription,
 })
@@ -109,6 +118,16 @@ function toggleAdvancedSettings(state: ConnectionManagerState, action: ToggleAdv
   }
 }
 
+function toggleCertificateSettings(
+  state: ConnectionManagerState,
+  action: ToggleCertificateSettings
+): ConnectionManagerState {
+  return {
+    ...state,
+    showCertificateSettings: !state.showCertificateSettings,
+  }
+}
+
 function addConnection(state: ConnectionManagerState, action: AddConnection): ConnectionManagerState {
   return {
     ...state,

app/src/reducers/Global.ts

@@ -44,7 +44,6 @@ export const globalState: Reducer<Record<GlobalStateInterface>, GlobalAction> =
   action
 ): GlobalState => {
   trackEvent(action.type)
-  console.log(action.type)
 
   switch (action.type) {
     case ActionTypes.showUpdateNotification:

app/src/reducers/Settings.ts

@@ -9,8 +9,7 @@ export enum TopicOrder {
 }
 
 export type ValueRendererDisplayMode = 'diff' | 'raw'
-
-export interface SettingsState {
+export interface SettingsStateModel {
   autoExpandLimit: number
   timeLocale: string
   topicOrder: TopicOrder
@@ -21,6 +20,8 @@ export interface SettingsState {
   theme: 'light' | 'dark'
 }
 
+export type SettingsState = Record<SettingsStateModel>
+
 export type Actions = SetAutoExpandLimitAction &
   DidLoadSettingsAction &
   SetTopicOrderAction &
@@ -44,7 +45,7 @@ export enum ActionTypes {
   SETTINGS_SET_TIME_LOCALE = 'SETTINGS_SET_TIME_LOCALE',
 }
 
-const initialState = Record<SettingsState>({
+const initialState = Record<SettingsStateModel>({
   timeLocale: window.navigator.language,
   autoExpandLimit: 0,
   topicOrder: TopicOrder.none,
@@ -55,12 +56,12 @@ const initialState = Record<SettingsState>({
   topicFilter: undefined,
 })
 
-const setTheme = (theme: 'light' | 'dark') => (state: Record<SettingsState>) => {
+const setTheme = (theme: 'light' | 'dark') => (state: SettingsState) => {
   return state.set('theme', theme)
 }
 
 const reducerActions: {
-  [s: string]: (state: Record<SettingsState>, action: Actions) => Record<SettingsState>
+  [s: string]: (state: SettingsState, action: Actions) => SettingsState
 } = {
   SETTINGS_SET_AUTO_EXPAND_LIMIT: setAutoExpandLimit,
   SETTINGS_SET_TOPIC_ORDER: setTopicOrder,
@@ -83,10 +84,10 @@ export interface SetTheme {
 
 export interface DidLoadSettingsAction {
   type: ActionTypes.SETTINGS_DID_LOAD_SETTINGS
-  settings: Partial<SettingsState>
+  settings: Partial<SettingsStateModel>
 }
 
-function didLoadSettings(state: Record<SettingsState>, action: DidLoadSettingsAction) {
+function didLoadSettings(state: SettingsState, action: DidLoadSettingsAction): SettingsState {
   return state.merge(action.settings)
 }
 
@@ -95,7 +96,7 @@ export interface SetSelectTopicWithMouseOverAction {
   selectTopicWithMouseOver: boolean
 }
 
-export function setSelectTopicWithMouseOver(state: Record<SettingsState>, action: SetSelectTopicWithMouseOverAction) {
+export function setSelectTopicWithMouseOver(state: SettingsState, action: SetSelectTopicWithMouseOverAction) {
   return state.set('selectTopicWithMouseOver', !state.get('selectTopicWithMouseOver'))
 }
 
@@ -104,7 +105,7 @@ export interface SetTimeLocale {
   timeLocale: string
 }
 
-export function setTimeLocale(state: Record<SettingsState>, action: SetTimeLocale): Record<SettingsState> {
+export function setTimeLocale(state: SettingsState, action: SetTimeLocale): SettingsState {
   return state.set('timeLocale', action.timeLocale)
 }
 
@@ -113,7 +114,7 @@ export interface SetValueRendererDisplayModeAction {
   valueRendererDisplayMode: ValueRendererDisplayMode
 }
 
-export function setValueRendererDisplayMode(state: Record<SettingsState>, action: SetValueRendererDisplayModeAction) {
+export function setValueRendererDisplayMode(state: SettingsState, action: SetValueRendererDisplayModeAction) {
   return state.set('valueRendererDisplayMode', action.valueRendererDisplayMode)
 }
 
@@ -122,7 +123,7 @@ export interface SetAutoExpandLimitAction {
   autoExpandLimit: number
 }
 
-function setAutoExpandLimit(state: Record<SettingsState>, action: SetAutoExpandLimitAction) {
+function setAutoExpandLimit(state: SettingsState, action: SetAutoExpandLimitAction) {
   return state.set('autoExpandLimit', action.autoExpandLimit)
 }
 
@@ -130,7 +131,7 @@ export interface ToggleHighlightTopicUpdatesAction {
   type: ActionTypes.SETTINGS_TOGGLE_HIGHLIGHT_ACTIVITY
 }
 
-function toggleHighlightTopicUpdates(state: Record<SettingsState>, action: ToggleHighlightTopicUpdatesAction) {
+function toggleHighlightTopicUpdates(state: SettingsState, action: ToggleHighlightTopicUpdatesAction) {
   return state.set('highlightTopicUpdates', !state.get('highlightTopicUpdates'))
 }
 
@@ -139,7 +140,7 @@ export interface SetTopicOrderAction {
   topicOrder: TopicOrder
 }
 
-function setTopicOrder(state: Record<SettingsState>, action: SetTopicOrderAction) {
+function setTopicOrder(state: SettingsState, action: SetTopicOrderAction) {
   return state.set('topicOrder', action.topicOrder)
 }
 
@@ -149,6 +150,6 @@ export interface FilterTopicsAction {
 }
 
 // @Todo: move to tree reducer, should not be persisted / is no application setting
-function filterTopics(state: Record<SettingsState>, action: FilterTopicsAction) {
+function filterTopics(state: SettingsState, action: FilterTopicsAction) {
   return state.set('topicFilter', action.topicFilter)
 }

app/src/reducers/index.ts

@@ -4,7 +4,6 @@ import { connectionManagerReducer, ConnectionManagerState } from './ConnectionMa
 import { connectionReducer, ConnectionState } from './Connection'
 import { GlobalState, globalState } from './Global'
 import { publishReducer, PublishState } from './Publish'
-import { Record } from 'immutable'
 import { settingsReducer, SettingsState } from './Settings'
 import { sidebarReducer, SidebarState } from './Sidebar'
 import { treeReducer, TreeState } from './Tree'
@@ -12,7 +11,7 @@ import { treeReducer, TreeState } from './Tree'
 export interface AppState {
   globalState: GlobalState
   tree: TreeState
-  settings: Record<SettingsState>
+  settings: SettingsState
   publish: PublishState
   charts: ChartsState
   sidebar: SidebarState

app/src/sortedNodes.tsx

@@ -0,0 +1,20 @@
+import * as q from '../../backend/src/Model'
+import { SettingsState, TopicOrder } from './reducers/Settings'
+import { TopicViewModel } from './model/TopicViewModel'
+
+export function sortedNodes(settings: SettingsState, treeNode: q.TreeNode<any>): Array<q.TreeNode<TopicViewModel>> {
+  const topicOrder = settings.get('topicOrder')
+  const edges = [...treeNode.edgeArray]
+
+  if (topicOrder === TopicOrder.abc) {
+    edges.sort((a, b) => a.name.localeCompare(b.name))
+  }
+  const nodes = edges.map(edge => edge.target)
+  if (topicOrder === TopicOrder.messages) {
+    nodes.sort((a, b) => b.leafMessageCount() - a.leafMessageCount())
+  }
+  if (topicOrder === TopicOrder.topics) {
+    nodes.sort((a, b) => b.childTopicCount() - a.childTopicCount())
+  }
+  return nodes
+}

app/src/utils/KeyCodes.ts

@@ -0,0 +1,11 @@
+export enum KeyCodes {
+  backspace = 8,
+  tab = 9,
+  enter = 13,
+  escape = 27,
+  arrow_left = 37,
+  arrow_up = 38,
+  arrow_right = 39,
+  arrow_down = 40,
+  delete = 46,
+}

app/src/utils/bugtracking.ts

@@ -1,4 +1,4 @@
-import { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 
-const telemetry = electronRendererTelementry
-electronRendererTelementry.registerErrorHandler()
+const telemetry = electronRendererTelemetry
+electronRendererTelemetry.registerErrorHandler()

app/src/utils/tracking.ts

@@ -1,18 +1,18 @@
-import { electronRendererTelementry } from 'electron-telemetry'
+import { electronRendererTelemetry } from 'electron-telemetry'
 
 // Used to determine long-time-stability and memory leaks
 function trackProcessStatistics() {
   setInterval(() => {
     try {
-      electronRendererTelementry.trackCustomEvent({
+      electronRendererTelemetry.trackCustomEvent({
         name: 'heapStatistics',
         payload: process.getHeapStatistics(),
       })
-      electronRendererTelementry.trackCustomEvent({
+      electronRendererTelemetry.trackCustomEvent({
         name: 'cpuUsage',
         payload: process.getCPUUsage(),
       })
-      electronRendererTelementry.trackCustomEvent({
+      electronRendererTelemetry.trackCustomEvent({
         name: 'runningSince',
         payload: performance.now(),
       })
@@ -30,6 +30,6 @@ export function trackEvent(name: string) {
   }
   const blacklist = ['CONNECTION_SET_HEALTH']
   if (blacklist.indexOf(name) === -1) {
-    electronRendererTelementry.trackEvent(name)
+    electronRendererTelemetry.trackEvent(name)
   }
 }

app/tsconfig.json

@@ -10,14 +10,12 @@
     "sourceMap": true,
     "module": "esnext",
     "target": "es2017",
-    "jsx": "react"
+    "jsx": "react",
+    "types": ["react"],
+    "allowSyntheticDefaultImports": true
   },
-  "include": [
-    "./src/**/*"
-  ],
-  "exclude": [
-    "**/*.d.ts"
-  ],
+  "include": ["./src/**/*"],
+  "exclude": ["**/*.d.ts"],
   "awesomeTypescriptLoaderOptions": {
     "useCache": true,
     "transpileModule": true,

app/yarn.lock

@@ -2130,7 +2130,7 @@ ejs@^2.6.1:
 
 "electron-telemetry@git+https://github.com/thomasnordquist/electron-telemetry.git#dist":
   version "1.0.0"
-  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#3d6c0c5e3fd9d8101dcb7a0435256572ed58b2b6"
+  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#78b140426a31fe6fec75c7fe36daa130445af191"
   dependencies:
     axios "^0.18.0"
     pako "^1.0.8"

backend/src/DataSource/DataSourceState.ts

@@ -7,7 +7,7 @@ export interface DataSourceState {
 }
 
 export class DataSourceStateMachine {
-  public onUpdate = new EventDispatcher<DataSourceState, DataSourceStateMachine>()
+  public onUpdate = new EventDispatcher<DataSourceState>()
   private state: DataSourceState = {
     error: undefined,
     connected: false,

backend/src/DataSource/MqttSource.ts

@@ -14,6 +14,8 @@ export interface MqttOptions {
   clientId?: string
   subscriptions: Array<string>
   certificateAuthority?: string
+  clientCertificate?: string
+  clientKey?: string
 }
 
 export class MqttSource implements DataSource<MqttOptions> {
@@ -44,8 +46,11 @@ export class MqttSource implements DataSource<MqttOptions> {
       username: options.username,
       password: options.password,
       clientId: options.clientId,
+      servername: options.tls ? url.hostname : undefined,
       ca: options.certificateAuthority ? Buffer.from(options.certificateAuthority, 'base64') : undefined,
-    })
+      cert: options.clientCertificate ? Buffer.from(options.clientCertificate, 'base64') : undefined,
+      key: options.clientKey ? Buffer.from(options.clientKey, 'base64') : undefined,
+    } as any)
 
     this.client = client
 

backend/src/Model/Tree.ts

@@ -12,7 +12,7 @@ export class Tree<ViewModel extends Destroyable> extends TreeNode<ViewModel> {
   public isTree = true
   private cachedHash = `${Math.random()}`
   private unmergedMessages: ChangeBuffer = new ChangeBuffer()
-  public didReceive = new EventDispatcher<void, Tree<ViewModel>>()
+  public didReceive = new EventDispatcher<void>()
 
   constructor() {
     super(undefined, undefined)

backend/src/Model/TreeNode.ts

@@ -13,9 +13,10 @@ export class TreeNode<ViewModel extends Destroyable> {
   public collapsed = false
   public messages: number = 0
   public lastUpdate: number = Date.now()
-  public onMerge = new EventDispatcher<void, TreeNode<ViewModel>>()
-  public onEdgesChange = new EventDispatcher<void, TreeNode<ViewModel>>()
-  public onMessage = new EventDispatcher<Message, TreeNode<ViewModel>>()
+  public onMerge = new EventDispatcher<void>()
+  public onEdgesChange = new EventDispatcher<void>()
+  public onMessage = new EventDispatcher<Message>()
+  public onDestroy = new EventDispatcher<TreeNode<ViewModel>>()
   public isTree = false
 
   private cachedPath?: string
@@ -65,7 +66,11 @@ export class TreeNode<ViewModel extends Destroyable> {
     if (!previous || !this.sourceEdge) {
       return
     }
+    this.lastUpdate = Date.now()
     previous.removeEdge(this.sourceEdge)
+    if (!this.isTree) {
+      this.destroy()
+    }
   }
 
   private findChild(edges: Array<string>): TreeNode<ViewModel> | undefined {
@@ -101,6 +106,9 @@ export class TreeNode<ViewModel extends Destroyable> {
   }
 
   public destroy() {
+    this.onDestroy.dispatch(this)
+    this.onDestroy.removeAllListeners()
+
     for (const edge of this.edgeArray) {
       edge.target.destroy()
     }
@@ -158,6 +166,8 @@ export class TreeNode<ViewModel extends Destroyable> {
     this.edgeArray.push(edge)
     edge.source = this
 
+    edge.target && edge.target.removeFromTreeIfEmpty()
+
     if (emitUpdate) {
       this.onEdgesChange.dispatch()
     }
@@ -175,8 +185,12 @@ export class TreeNode<ViewModel extends Destroyable> {
   public removeEdge(edge: Edge<any>) {
     delete this.edges[edge.name]
     this.edgeArray = Object.values(this.edges)
-    this.onMerge.dispatch()
 
+    this.removeFromTreeIfEmpty()
+    this.onMerge.dispatch()
+  }
+
+  public removeFromTreeIfEmpty() {
     if (this.isTopicEmptyLeaf()) {
       this.removeFromParent()
     }
@@ -189,10 +203,7 @@ export class TreeNode<ViewModel extends Destroyable> {
       this.mqttMessage = node.mqttMessage
     }
 
-    if (this.isTopicEmptyLeaf()) {
-      this.removeFromParent()
-    }
-
+    this.removeFromTreeIfEmpty()
     this.mergeEdges(node)
     this.onMerge.dispatch()
   }

backend/src/Model/spec/Edge.spec.ts

@@ -1,8 +1,6 @@
-import 'mocha'
-
-import { Edge, TreeNode, TreeNodeFactory } from '../'
-
+import { Edge, TreeNodeFactory } from '../'
 import { expect } from 'chai'
+import 'mocha'
 
 describe('Edge', () => {
   it('should contain a name', () => {
@@ -10,7 +8,7 @@ describe('Edge', () => {
     expect(e.name).to.equal('foo')
   })
 
-  it('firstEdge should retireve the first edge', () => {
+  it('firstEdge should retrieve the first edge', () => {
     const topics = 'foo/bar/baz'.split('/')
     const leaf = TreeNodeFactory.fromEdgesAndValue(topics, undefined)
     const bazEdge = leaf.sourceEdge

backend/src/Model/spec/EventDispatcher.spec.ts

@@ -4,7 +4,7 @@ import 'mocha'
 
 describe('EventDispatcher', async () => {
   it('should dispatch', async function() {
-    const dispatcher = new EventDispatcher<string, string>()
+    const dispatcher = new EventDispatcher<string>()
     this.timeout(300)
 
     setTimeout(() => dispatcher.dispatch('hello'), 5)
@@ -18,11 +18,11 @@ describe('EventDispatcher', async () => {
   })
 
   it('should unsubscribe', async function() {
-    const dispatcher = new EventDispatcher<string, string>()
+    const dispatcher = new EventDispatcher<string>()
     this.timeout(300)
-    let incrementee = 0
+    let callbackCounter = 0
     const callback = (msg: any) => {
-      incrementee += 1
+      callbackCounter += 1
     }
 
     dispatcher.subscribe(callback)
@@ -36,6 +36,6 @@ describe('EventDispatcher', async () => {
     // should not cause any increment
     dispatcher.dispatch('hello')
 
-    expect(incrementee).to.eq(1)
+    expect(callbackCounter).to.eq(1)
   })
 })

backend/src/index.ts

@@ -45,7 +45,6 @@ export class ConnectionManager {
       if (buffer.length > 20000) {
         buffer = buffer.slice(0, 20000)
       }
-
       backendEvents.emit(messageEvent, {
         topic,
         payload: Base64Message.fromBuffer(buffer),
@@ -62,17 +61,17 @@ export class ConnectionManager {
     })
   }
 
-  public removeConnection(conenctionId: string) {
-    const connection = this.connections[conenctionId]
+  public removeConnection(connectionId: string) {
+    const connection = this.connections[connectionId]
     if (connection) {
-      backendEvents.unsubscribeAll(makePublishEvent(conenctionId))
+      backendEvents.unsubscribeAll(makePublishEvent(connectionId))
       connection.disconnect()
-      delete this.connections[conenctionId]
+      delete this.connections[connectionId]
       connection.stateMachine.onUpdate.removeAllListeners()
     }
   }
 
   public closeAllConnections() {
-    Object.keys(this.connections).forEach(conenctionId => this.removeConnection(conenctionId))
+    Object.keys(this.connections).forEach(connectionId => this.removeConnection(connectionId))
   }
 }

events/EventDispatcher.ts

@@ -5,7 +5,7 @@ interface CallbackStore {
   callback: any
 }
 
-export class EventDispatcher<Message, Dispatcher> {
+export class EventDispatcher<Message> {
   private emitter = new EventEmitter()
   private callbacks: Array<CallbackStore> = []
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "MQTT-Explorer",
-  "version": "0.3.0",
+  "version": "0.3.1",
   "description": "Explore your message queues",
   "main": "dist/src/electron.js",
   "scripts": {
@@ -10,9 +10,10 @@
     "dev": "npm-run-all --parallel dev:*",
     "dev:app": "cd app && npm run dev",
     "dev:electron": "tsc && electron . --development",
-    "lint": "yarn run lint:prettier && yarn run lint:tslint",
+    "lint": "npm-run-all --parallel lint:prettier lint:tslint lint:spellcheck",
     "lint:prettier": "prettier --check \"**/*.ts{x,}\"",
-    "lint:tslint": "node_modules/.bin/tslint -p ./",
+    "lint:tslint": "tslint -p ./",
+    "lint:spellcheck": "cspell -e ./build -e \"node_modules\" \"**/*.ts{x,}\"",
     "build": "tsc && cd app && yarn run build && cd ..",
     "test-backend": "cd backend && yarn run test && cd ..",
     "prepare-release": "ts-node scripts/prepare-release.ts",
@@ -41,6 +42,11 @@
       "category": "Development",
       "maintainer": "Thomas Nordquist"
     },
+    "snap": {
+      "environment": {
+        "DISABLE_WAYLAND": "1"
+      }
+    },
     "appx": {
       "applicationId": "mqttexplorer",
       "identityName": "51031thomas.nordquist.MQTT-Explorer",
@@ -54,7 +60,6 @@
       "buildResources": "res",
       "output": "build"
     },
-    "afterAllArtifactBuild": "./dist/scripts/afterAllArtifactBuild.js",
     "afterPack": "./dist/scripts/afterPack.js"
   },
   "author": "Thomas Nordquist",
@@ -74,17 +79,18 @@
     "builder-util-runtime": "^8.2.5",
     "chai": "^4.2.0",
     "cspell": "^4.0.23",
-    "electron": "5.0.4",
-    "electron-builder": "20.44.1",
+    "electron": "5.0.5",
+    "electron-builder": "21.0.6",
     "fs-extra": "^8.0.1",
     "mime": "^2.4.0",
     "mocha": "^6.1.4",
     "mustache": "^3.0.1",
+    "npm-run-all": "^4.1.5",
     "nyc": "^14.1.1",
     "prettier": "1.18.2",
     "redux-thunk": "^2.3.0",
     "source-map-support": "^0.5.9",
-    "spectron": "^5.0.0",
+    "spectron": "^6.0.0",
     "ts-node": "^8.2.0",
     "tslint": "^5.15.0",
     "tslint-config-airbnb": "^5.11.1",

scripts/afterAllArtifactBuild.ts

@@ -1,24 +0,0 @@
-import * as fs from 'fs-extra'
-import * as path from 'path'
-import { chdir } from 'process'
-import { exec } from './util'
-
-export default async function(info: any) {
-  for (const snapFile of info.artifactPaths) {
-    if (/\.snap$/.test(snapFile)) {
-      const originalDir = __dirname
-      const dirname = path.dirname(snapFile)
-      chdir(dirname)
-
-      await exec('sudo', ['unsquashfs', snapFile])
-      await exec('sudo', ['rm', snapFile])
-      await exec('sudo', ['chmod', '-R', 'g-s', 'squashfs-root'])
-
-      // Add command line argument to disable the sandbox
-      await exec('sudo', ['snap', 'run', 'snapcraft', 'pack', 'squashfs-root', '--output', snapFile])
-      await exec('sudo', ['rm', '-rf', 'squashfs-root'])
-
-      chdir(originalDir)
-    }
-  }
-}

scripts/afterPack.ts

@@ -15,7 +15,7 @@ interface Context {
 
 export default async function(context: Context) {
   console.log(context)
-  const isLinux = context.targets.find(target => target.name === 'appImage' || target.name === 'snap')
+  const isLinux = context.targets.find(target => target.name === 'appImage')
   if (!isLinux) {
     return
   }

scripts/prepare-release.ts

@@ -28,7 +28,7 @@ async function prepareRelease() {
 
   // Clean up
   await fs.remove('node_modules')
-  await exec('yarn', ['install', '--production'])
+  // await exec('yarn', ['install', '--production']) // Do not clean up, electron version detection will fail otherwise
   await fs.remove(path.join('app', 'node_modules'))
 
   chdir(originalDir)

src/MenuTemplate.ts

@@ -10,7 +10,7 @@ const applicationMenu: MenuItemConstructorOptions = {
       click: () => {
         openAboutWindow({
           icon_path: path.join(__dirname, '..', '..', 'icon.png'),
-          license: 'AGPL-3.0',
+          license: 'CC-BY-ND-4.0',
           homepage: 'https://thomasnordquist.github.io/MQTT-Explorer/',
           bug_report_url: 'https://github.com/thomasnordquist/MQTT-Explorer/issues',
           description: 'Author: Thomas Nordquist',

src/electron.ts

@@ -9,6 +9,9 @@ import { menuTemplate } from './MenuTemplate'
 import buildOptions from './buildOptions'
 import { waitForDevServer, isDev, runningUiTestOnCi, loadDevTools } from './development'
 import { shouldAutoUpdate, handleAutoUpdate } from './autoUpdater'
+import { registerCrashReporter } from './registerCrashReporter'
+
+registerCrashReporter()
 
 if (!isDev() && !runningUiTestOnCi()) {
   const electronTelemetry = electronTelemetryFactory('9b0c8ca04a361eb8160d98c5', buildOptions)

src/registerCrashReporter.ts

@@ -0,0 +1,10 @@
+const { crashReporter } = require('electron')
+
+export function registerCrashReporter() {
+  crashReporter.start({
+    productName: 'MQTT Explorer',
+    companyName: 'thomasnordquist',
+    submitURL: 'http://localhost:3000/app/crash/mqttexplorer',
+    uploadToServer: true,
+  })
+}

src/spec/mock-mqtt.ts

@@ -12,8 +12,8 @@ function startServer(): Promise<mqtt.MqttClient> {
 function connectMqtt(): Promise<mqtt.MqttClient> {
   return new Promise(resolve => {
     const client = mqtt.connect('mqtt://127.0.0.1:1883', {
-      username: 'thomas',
-      password: 'bierbier',
+      username: '',
+      password: '',
     })
     client.once('connect', () => {
       resolve(client)
@@ -72,14 +72,16 @@ function generateData(client: mqtt.MqttClient) {
   client.subscribe('kitchen/lamp/set')
   client.on('message', (topic, payload) => {
     if (topic === 'kitchen/lamp/set') {
-      setTimeout(
-        () =>
+      setTimeout(() => {
+        try {
           client.publish('kitchen/lamp/state', JSON.parse(payload.toString()).state, {
             retain: true,
             qos: 0,
-          }),
-        500
-      )
+          })
+        } catch (error) {
+          console.error(error)
+        }
+      }, 500)
     }
   })
 

src/spec/scenarios/showNumericPlot.ts

@@ -10,6 +10,7 @@ export async function showNumericPlot(browser: Browser) {
   heater = await valuePreviewGuttersShowChartIcon('heater', browser)
   await heater.click()
 
+  await sleep(1000)
   let temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
   await moveToCenterOfElement(temperature, browser)
   temperature = await valuePreviewGuttersShowChartIcon('temperature', browser)
@@ -61,8 +62,7 @@ async function chartSettings(name: string, browser: Browser) {
 async function clickAway(name: string, browser: Browser) {
   const settings = await browser.$(`//*[contains(@data-test-type, "ChartPaper")][contains(@data-test, "${name}")]`)
   await moveToCenterOfElement(settings, browser)
-  const awayClickElement = await browser.$('//div[contains(@role, "presentation")]')
-  return awayClickElement.click()
+  await browser.keys(['Escape'])
 }
 
 async function removeChart(name: string, browser: Browser) {

yarn.lock

@@ -233,7 +233,7 @@ ajv-keywords@^3.4.0:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d"
   integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==
 
-ajv@^6.5.5, ajv@^6.9.2:
+ajv@^6.10.0, ajv@^6.5.5:
   version "6.10.0"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
   integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==
@@ -287,28 +287,28 @@ ansi-styles@^3.2.0, ansi-styles@^3.2.1:
   dependencies:
     color-convert "^1.9.0"
 
-app-builder-bin@2.6.13:
-  version "2.6.13"
-  resolved "https://registry.yarnpkg.com/app-builder-bin/-/app-builder-bin-2.6.13.tgz#d3b7eb60b5333b0e5c4daf353260f82f7ba01597"
-  integrity sha512-P8s4wUuSPp4Vuob/RCmCpsAEAdf28HuP2brGjZ3VLxaAZrBnByuDq2c7Ud7xgEPehOMwEV+EXcEg7wnM7a2H9Q==
+app-builder-bin@3.1.4:
+  version "3.1.4"
+  resolved "https://registry.yarnpkg.com/app-builder-bin/-/app-builder-bin-3.1.4.tgz#7f13ce5ba677286fe443758c73ff7dfdb0b0f6de"
+  integrity sha512-W72acDbPD99SvwttRDh2aD7Q02HYleGJewGXER2rmloajLbbLSM8tZ/K5+znwu1bCRPI/at0W35qmNjXjN8Kdg==
 
-app-builder-lib@20.44.1, app-builder-lib@~20.44.0:
-  version "20.44.1"
-  resolved "https://registry.yarnpkg.com/app-builder-lib/-/app-builder-lib-20.44.1.tgz#02076f950dcd3a75409356948a0fbb6963ffcd88"
-  integrity sha512-otmaGKhw9LVPgudeyDe3jOkp1BGad/dWtf/HyjvJH4Ep9UQHw1J4mSNLMuDxNKd1W9BOZVzl8ulw/t5JBmsmHw==
+app-builder-lib@21.0.6, app-builder-lib@~21.0.6:
+  version "21.0.6"
+  resolved "https://registry.yarnpkg.com/app-builder-lib/-/app-builder-lib-21.0.6.tgz#b1b2e4e437f58348bc8a2db71bdbcaaa15a0a3ca"
+  integrity sha512-ErALlC3XSFxaJYRPtUAo4raUaKaUigKLKSF16mUJRxYpRFDVtqZJRr+z1Hqgx+Xpzn764PZ/ETPFfZ26oAP9jA==
   dependencies:
     "7zip-bin" "~4.1.0"
-    app-builder-bin "2.6.13"
     async-exit-hook "^2.0.1"
     bluebird-lst "^1.0.9"
-    builder-util "10.0.4"
-    builder-util-runtime "8.2.5"
+    builder-util "10.3.1"
+    builder-util-runtime "8.3.0"
     chromium-pickle-js "^0.2.0"
     debug "^4.1.1"
-    ejs "^2.6.1"
+    ejs "^2.6.2"
     electron-osx-sign "0.4.11"
-    electron-publish "20.44.0"
-    fs-extra-p "^8.0.2"
+    electron-publish "21.0.6"
+    fs-extra "^8.1.0"
+    fs-extra-p "^8.1.0"
     hosted-git-info "^2.7.1"
     is-ci "^2.0.0"
     isbinaryfile "^4.0.1"
@@ -316,10 +316,9 @@ app-builder-lib@20.44.1, app-builder-lib@~20.44.0:
     lazy-val "^1.0.4"
     minimatch "^3.0.4"
     normalize-package-data "^2.5.0"
-    plist "^3.0.1"
-    read-config-file "3.2.2"
+    read-config-file "4.0.0"
     sanitize-filename "^1.6.1"
-    semver "^6.1.1"
+    semver "^6.2.0"
     temp-file "^3.3.3"
 
 append-transform@^1.0.0:
@@ -447,12 +446,12 @@ aws4@^1.8.0:
   integrity sha512-ReZxvNHIOv88FlT7rxcXIIC0fPt4KZqZbOlivyWtXLt8ESx84zd3kMC6iK5jVeS2qt+g7ftS7ye4fi06X5rtRQ==
 
 axios@^0.18.0:
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.0.tgz#32d53e4851efdc0a11993b6cd000789d70c05102"
-  integrity sha1-MtU+SFHv3AoRmTts0AB4nXDAUQI=
+  version "0.18.1"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.18.1.tgz#ff3f0de2e7b5d180e757ad98000f1081b87bcea3"
+  integrity sha512-0BfJq4NSfQXd+SkFdrvFbG7addhYSBA2mQwISr46pD6E5iqkWg02RAs8vyTT/j0RTnoYmeXauBuSv1qKwR179g==
   dependencies:
-    follow-redirects "^1.3.0"
-    is-buffer "^1.1.5"
+    follow-redirects "1.5.10"
+    is-buffer "^2.0.2"
 
 axios@^0.19.0:
   version "0.19.0"
@@ -584,7 +583,15 @@ buffer@^5.1.0:
     base64-js "^1.0.2"
     ieee754 "^1.1.4"
 
-builder-util-runtime@8.2.5, builder-util-runtime@^8.2.5:
+builder-util-runtime@8.3.0:
+  version "8.3.0"
+  resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-8.3.0.tgz#f5fac9139af6facf42a21fbe4d3aebed88fda33e"
+  integrity sha512-CSOdsYqf4RXIHh1HANPbrZHlZ9JQJXSuDDloblZPcWQVN62inyYoTQuSmY3KrgefME2Sv3Kn2MxHvbGQHRf8Iw==
+  dependencies:
+    debug "^4.1.1"
+    sax "^1.2.4"
+
+builder-util-runtime@^8.2.5:
   version "8.2.5"
   resolved "https://registry.yarnpkg.com/builder-util-runtime/-/builder-util-runtime-8.2.5.tgz#6f19330178345f8ce2c65842b0a9cf6a187d5946"
   integrity sha512-YILT+YUlxrE3yNB6mDC1tF+Q24mr1LSYdjP5U861jbBeDZfvy1/VPDzW3boMVrDtzYnDnvkYrzLJnoh6TXA75w==
@@ -604,19 +611,19 @@ builder-util-runtime@~8.1.0:
     fs-extra-p "^7.0.0"
     sax "^1.2.4"
 
-builder-util@10.0.4, builder-util@~10.0.3:
-  version "10.0.4"
-  resolved "https://registry.yarnpkg.com/builder-util/-/builder-util-10.0.4.tgz#06541ffbe7a2f272972accc40124918f148f6cec"
-  integrity sha512-KEqMNPb6v4sKoHlrIR8KiJQwd9/fqXxpAKwLNz+g7dKYfS2r8B4SVJWRGutevPeOK7nfRrOAukUwPjByBswrtw==
+builder-util@10.3.1, builder-util@~10.3.1:
+  version "10.3.1"
+  resolved "https://registry.yarnpkg.com/builder-util/-/builder-util-10.3.1.tgz#fe88ca7ac99042c36509ef6bf5c575430657930b"
+  integrity sha512-52EYK1qMYQXRq507MnijFjcjOicpSRrC49+aOdY5hT7wbhfGa6EJzQV0oCPOdzWN4Q/gjfa1HS9VanjR7ViUyg==
   dependencies:
     "7zip-bin" "~4.1.0"
     "@types/debug" "^4.1.4"
-    app-builder-bin "2.6.13"
+    app-builder-bin "3.1.4"
     bluebird-lst "^1.0.9"
-    builder-util-runtime "^8.2.5"
+    builder-util-runtime "8.3.0"
     chalk "^2.4.2"
     debug "^4.1.1"
-    fs-extra-p "^8.0.2"
+    fs-extra "^8.1.0"
     is-ci "^2.0.0"
     js-yaml "^3.13.1"
     source-map-support "^0.5.12"
@@ -705,7 +712,7 @@ chalk@^1.1.3:
     strip-ansi "^3.0.0"
     supports-color "^2.0.0"
 
-chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.4.2:
+chalk@^2.0.0, chalk@^2.0.1, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==
@@ -942,7 +949,7 @@ cross-spawn@^5.0.1:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^6.0.0:
+cross-spawn@^6.0.0, cross-spawn@^6.0.5:
   version "6.0.5"
   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
   integrity sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==
@@ -1208,7 +1215,7 @@ debug@2.6.9, debug@^2.1.3, debug@^2.2.0, debug@^2.6.8:
   dependencies:
     ms "2.0.0"
 
-debug@3.2.6, debug@^3.0.0, debug@^3.2.6:
+debug@3.2.6, debug@^3.0.0:
   version "3.2.6"
   resolved "https://registry.yarnpkg.com/debug/-/debug-3.2.6.tgz#e83d17de16d8a7efb7717edbe5fb10135eee629b"
   integrity sha512-mel+jf7nrtEl5Pn1Qx46zARXKDpBbvzezse7p7LqINmdoIk8PYP5SySaxEmYv6TZ0JyEKA1hsCId6DIhgITtWQ==
@@ -1307,16 +1314,16 @@ diff@^4.0.1:
   resolved "https://registry.yarnpkg.com/diff/-/diff-4.0.1.tgz#0c667cb467ebbb5cea7f14f135cc2dba7780a8ff"
   integrity sha512-s2+XdvhPCOF01LRQBC8hf4vhbVmI2CGS5aZnxLJlT5FtdhPCDFq80q++zK2KlrVorVDdL5BOGZ/VfLrVtYNF+Q==
 
-dmg-builder@6.6.5:
-  version "6.6.5"
-  resolved "https://registry.yarnpkg.com/dmg-builder/-/dmg-builder-6.6.5.tgz#0907e573bc4587a1f323dc886d3dc2ab0e272293"
-  integrity sha512-W9OTcBwKG+EoaQ+W8pbyImogcSISPiRoHS5ZTABaTlok2BP5Kc6ZCeCxVa8gDJcLVaZozpAyTz+QaSrPD3Pmxw==
+dmg-builder@6.9.2:
+  version "6.9.2"
+  resolved "https://registry.yarnpkg.com/dmg-builder/-/dmg-builder-6.9.2.tgz#ffe7fdbf3ba7232b02f5e96b5b3512e35a57041a"
+  integrity sha512-jBPvANs1EfxwbWudzqtIfHj0gL/WuGJgop2/yN2owoJv22GeLhaUcv9tYcyB58ke3+bkOylJZvXN/8tRkf+o9Q==
   dependencies:
-    app-builder-lib "~20.44.0"
+    app-builder-lib "~21.0.6"
     bluebird-lst "^1.0.9"
-    builder-util "~10.0.3"
-    fs-extra-p "^8.0.2"
-    iconv-lite "^0.4.24"
+    builder-util "~10.3.1"
+    fs-extra "^8.1.0"
+    iconv-lite "^0.5.0"
     js-yaml "^3.13.1"
     parse-color "^1.0.0"
     sanitize-filename "^1.6.1"
@@ -1343,15 +1350,15 @@ dot-prop@^5.0.0:
   dependencies:
     is-obj "^1.0.0"
 
-dotenv-expand@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-4.2.0.tgz#def1f1ca5d6059d24a766e587942c21106ce1275"
-  integrity sha1-3vHxyl1gWdJKdm5YeULCEQbOEnU=
+dotenv-expand@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/dotenv-expand/-/dotenv-expand-5.1.0.tgz#3fbaf020bfd794884072ea26b1e9791d45a629f0"
+  integrity sha512-YXQl1DSa4/PQyRfgrv6aoNjhasp/p4qs9FjJ4q4cQk+8m4r6k4ZSiEyytKG8f8W9gi8WsQtIObNmKd+tMzNTmA==
 
-dotenv@^6.2.0:
-  version "6.2.0"
-  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-6.2.0.tgz#941c0410535d942c8becf28d3f357dbd9d476064"
-  integrity sha512-HygQCKUBSFl8wKQZBSemMywRWcEDNidvNbjGVyZu3nbZ8qq9ubiPoGLMdRDpfSrpkkm9BXYFkpKxxFX38o/76w==
+dotenv@^8.0.0:
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.0.0.tgz#ed310c165b4e8a97bb745b0a9d99c31bda566440"
+  integrity sha512-30xVGqjLjiUOArT4+M5q9sYdvuR4riM6yK9wMcas9Vbp6zZa+ocC9dp6QoftuhTPhFAiLK/0C5Ni2nou/Bk8lg==
 
 duplexer3@^0.1.4:
   version "0.1.4"
@@ -1381,39 +1388,39 @@ ecc-jsbn@~0.1.1:
     jsbn "~0.1.0"
     safer-buffer "^2.1.0"
 
-ejs@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.1.tgz#498ec0d495655abc6f23cd61868d926464071aa0"
-  integrity sha512-0xy4A/twfrRCnkhfk8ErDi5DqdAsAqeGxht4xkCUrsvhhbQNs7E+4jV0CN7+NKIY0aHE72+XvqtBIXzD31ZbXQ==
+ejs@^2.6.2:
+  version "2.6.2"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.2.tgz#3a32c63d1cd16d11266cd4703b14fec4e74ab4f6"
+  integrity sha512-PcW2a0tyTuPHz3tWyYqtK6r1fZ3gp+3Sop8Ph+ZYN81Ob5rwmbHEzaqs10N3BEsaGTkh/ooniXK+WwszGlc2+Q==
 
 ejs@~2.5.6:
   version "2.5.9"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.9.tgz#7ba254582a560d267437109a68354112475b0ce5"
   integrity sha512-GJCAeDBKfREgkBtgrYSf9hQy9kTb3helv0zGdzqhM7iAkW8FA/ZF97VQDbwFiwIT8MQLLOe5VlPZOEvZAqtUAQ==
 
-electron-builder@20.44.1:
-  version "20.44.1"
-  resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-20.44.1.tgz#938e590762339b6ecc561a430b8633463ba740a2"
-  integrity sha512-xA/kj75B9jFm245q+KiYqumg0fpA1LHNTnEUcXDLShwPgJ8JEjlBmPwdjsydxWuoUvxG4Hj3kCnYhYMg4RDtzg==
+electron-builder@21.0.6:
+  version "21.0.6"
+  resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-21.0.6.tgz#a70b0784661cde749577a4ce2f815bfede101437"
+  integrity sha512-0I+OzvuEitJcLQdwU2da5asmBlPBo8SxDB7lyBUQeG/do18Kw3X24ILwcN00745ZQcekMWY+dun1uy7iX5ndcQ==
   dependencies:
-    app-builder-lib "20.44.1"
+    app-builder-lib "21.0.6"
     bluebird-lst "^1.0.9"
-    builder-util "10.0.4"
-    builder-util-runtime "8.2.5"
+    builder-util "10.3.1"
+    builder-util-runtime "8.3.0"
     chalk "^2.4.2"
-    dmg-builder "6.6.5"
-    fs-extra-p "^8.0.2"
+    dmg-builder "6.9.2"
+    fs-extra-p "^8.1.0"
     is-ci "^2.0.0"
     lazy-val "^1.0.4"
-    read-config-file "3.2.2"
+    read-config-file "4.0.0"
     sanitize-filename "^1.6.1"
-    update-notifier "^3.0.0"
+    update-notifier "^3.0.1"
     yargs "^13.2.4"
 
-electron-chromedriver@~3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/electron-chromedriver/-/electron-chromedriver-3.0.0.tgz#ec0a17badb6c3529813c660bf91a43fb91407674"
-  integrity sha512-xWivZRiPTtDFJt+qXv7Ax/Dmhxj0iqESOxoLZ2szu3fv6k1vYDUDJUMHfdfVAke9D2gBRIgChuGb5j3YEt6hxQ==
+electron-chromedriver@~4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/electron-chromedriver/-/electron-chromedriver-4.0.0.tgz#064fa2f0d5a97998eeff3258575b90bac8d436da"
+  integrity sha512-CeeAr4QVtsxkEpDWvFLzhdtgDVLQt32RBWjEJ4WxkIPNj0MX5D8gzli2djEPnnLUOX19vcBgs/CW7WBB/O3JIg==
   dependencies:
     electron-download "^4.1.0"
     extract-zip "^1.6.5"
@@ -1450,22 +1457,22 @@ electron-osx-sign@0.4.11:
     minimist "^1.2.0"
     plist "^3.0.1"
 
-electron-publish@20.44.0:
-  version "20.44.0"
-  resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-20.44.0.tgz#4f4c49fabfa085244ebbd9a8d58ec4110a90ec2f"
-  integrity sha512-lQmNscoql2Wbvon4om7ZiBMJ5NfvoD9W91oKWl1EKaN1PeXWNjgt6+dEso3Rf/0x78WCC/V7eZ1hrARtL8cYNQ==
+electron-publish@21.0.6:
+  version "21.0.6"
+  resolved "https://registry.yarnpkg.com/electron-publish/-/electron-publish-21.0.6.tgz#ab9bc97536b7d5f03d710259288c8893e15ce182"
+  integrity sha512-VN5+PgrK9yQxggY22z0nyC9cT+522E5Jdw8bcEbvlSH9LhPrLo44Da3GPNBRjnb1UF0yfEZdbYig2Ut+g1WHJg==
   dependencies:
     bluebird-lst "^1.0.9"
-    builder-util "~10.0.3"
-    builder-util-runtime "^8.2.5"
+    builder-util "~10.3.1"
+    builder-util-runtime "8.3.0"
     chalk "^2.4.2"
-    fs-extra-p "^8.0.2"
+    fs-extra-p "^8.1.0"
     lazy-val "^1.0.4"
     mime "^2.4.4"
 
 "electron-telemetry@git+https://github.com/thomasnordquist/electron-telemetry.git#dist":
   version "1.0.0"
-  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#3d6c0c5e3fd9d8101dcb7a0435256572ed58b2b6"
+  resolved "git+https://github.com/thomasnordquist/electron-telemetry.git#78b140426a31fe6fec75c7fe36daa130445af191"
   dependencies:
     axios "^0.18.0"
     pako "^1.0.8"
@@ -1486,10 +1493,10 @@ electron-updater@^4.0.6:
     semver "^5.6.0"
     source-map-support "^0.5.9"
 
-electron@5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.4.tgz#2e0d09055363e983f4a73317cde4821c39617b02"
-  integrity sha512-7QaKorvANvP+azMT7wElx33oLlqw8QxmLs7/outfH7LC5amErk4EUtWDesQ6Zgr+s5pYFbykl8ZtJ4ZGXER05g==
+electron@5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-5.0.5.tgz#2d04499064d3f6c89c4642e47cfe9ea151d794eb"
+  integrity sha512-GzVQhImBX3rSCFPyJ1u1KbxquoidAHzGeCH2FTs3lzAh1H8m4vd7xh6CNC111mT/I8pxFk5D8s3atJlJQLPAeg==
   dependencies:
     "@types/node" "^10.12.18"
     electron-download "^4.1.0"
@@ -1769,13 +1776,6 @@ follow-redirects@1.5.10:
   dependencies:
     debug "=3.1.0"
 
-follow-redirects@^1.3.0:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.7.0.tgz#489ebc198dc0e7f64167bd23b03c4c19b5784c76"
-  integrity sha512-m/pZQy4Gj287eNy94nivy5wchN3Kp+Q5WgUPNy5lJSZ3sgkVKSYV/ZChMAQVIgx1SqfZ2zBZtPA2YlXIWxxJOQ==
-  dependencies:
-    debug "^3.2.6"
-
 foreground-child@^1.5.6:
   version "1.5.6"
   resolved "https://registry.yarnpkg.com/foreground-child/-/foreground-child-1.5.6.tgz#4fd71ad2dfde96789b980a5c0a295937cb2f5ce9"
@@ -1808,7 +1808,7 @@ fs-constants@^1.0.0:
   resolved "https://registry.yarnpkg.com/fs-constants/-/fs-constants-1.0.0.tgz#6be0de9be998ce16af8afc24497b9ee9b7ccd9ad"
   integrity sha512-y6OAwoSIf7FyjMIv94u+b5rdheZEjzR63GTyZJm5qh4Bi+2YgwLCcI/fPFZkL5PSixOt6ZNKm+w+Hfp/Bciwow==
 
-fs-extra-p@^7.0.0, fs-extra-p@^7.0.1:
+fs-extra-p@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra-p/-/fs-extra-p-7.0.1.tgz#4eec0b6dfa150fa90f6ddd773b4fb1d55cad54e3"
   integrity sha512-yhd2OV0HnHt2oitlp+X9hl2ReX4X/7kQeL7/72qzPHTZj5eUPGzAKOvEglU02Fa1OeG2rSy/aKB4WGVaLiF8tw==
@@ -1824,6 +1824,14 @@ fs-extra-p@^8.0.2:
     bluebird-lst "^1.0.9"
     fs-extra "^8.0.1"
 
+fs-extra-p@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra-p/-/fs-extra-p-8.1.0.tgz#781b7105e96cf3c1d3c8a88a83215c8a31c52bae"
+  integrity sha512-sCLpU5kk5CvrWZvFM9dUlqPgHrE02AEt6XYzF7kDscr5COc7DHfhNfODTXt0bkVNmt5DkvU2uJSYjorxY3bRKA==
+  dependencies:
+    bluebird-lst "^1.0.9"
+    fs-extra "^8.1.0"
+
 fs-extra@^4.0.1:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-4.0.3.tgz#0d852122e5bc5beb453fb028e9c0c9bf36340c94"
@@ -1851,6 +1859,15 @@ fs-extra@^8.0.1:
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
+fs-extra@^8.1.0:
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^4.0.0"
+    universalify "^0.1.0"
+
 fs.realpath@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
@@ -2015,6 +2032,11 @@ graceful-fs@^4.1.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
   integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
 
+graceful-fs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.0.tgz#8d8fdc73977cb04104721cb53666c1ca64cd328b"
+  integrity sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==
+
 grapheme-splitter@^1.0.2, grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -2131,6 +2153,13 @@ iconv-lite@^0.4.17, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.5.0.tgz#59cdde0a2a297cc2aeb0c6445a195ee89f127550"
+  integrity sha512-NnEhI9hIEKHOzJ4f697DMz9IQEXr/MMJ5w64vN2/4Ai+wRnvV7SBrL0KLoRlwaKVghOc7LQ5YkPLuX146b6Ydw==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3"
+
 ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.yarnpkg.com/ieee754/-/ieee754-1.1.13.tgz#ec168558e95aa181fd87d37f55c32bbcb6708b84"
@@ -2214,11 +2243,6 @@ is-arrayish@^0.2.1:
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
   integrity sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=
 
-is-buffer@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
-  integrity sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==
-
 is-buffer@^2.0.2, is-buffer@~2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-2.0.3.tgz#4ecf3fcf749cbd1e472689e109ac66261a25e725"
@@ -2469,7 +2493,7 @@ js-xxhash@^1.0.1:
   resolved "https://registry.yarnpkg.com/js-xxhash/-/js-xxhash-1.0.1.tgz#8ef97ff13576abac8539e91512a4033f0e9d69c5"
   integrity sha512-ociwKjHkCPjqNMmZtD7uUoL+AVhcSZX3WPmirRwXg+PzKD0v5x9K2yLpvkSglbThvbGN/TVA+3XFjPVolQwDpQ==
 
-js-yaml@3.13.1, js-yaml@^3.12.0, js-yaml@^3.12.1, js-yaml@^3.13.0, js-yaml@^3.13.1:
+js-yaml@3.13.1, js-yaml@^3.12.0, js-yaml@^3.13.0, js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -2753,6 +2777,11 @@ mem@^4.0.0:
     mimic-fn "^2.0.0"
     p-is-promise "^2.0.0"
 
+memorystream@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
+  integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
+
 meow@^3.1.0:
   version "3.7.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-3.7.0.tgz#72cb668b425228290abbfa856892587308a801fb"
@@ -2990,6 +3019,21 @@ npm-install-package@~2.1.0:
   resolved "https://registry.yarnpkg.com/npm-install-package/-/npm-install-package-2.1.0.tgz#d7efe3cfcd7ab00614b896ea53119dc9ab259125"
   integrity sha1-1+/jz816sAYUuJbqUxGdyaslkSU=
 
+npm-run-all@^4.1.5:
+  version "4.1.5"
+  resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
+  integrity sha512-Oo82gJDAVcaMdi3nuoKFavkIHBRVqQ1qvMb+9LHk/cF4P6B2m8aP04hGf7oL6wZ9BuGwX1onlLhpuoofSyoQDQ==
+  dependencies:
+    ansi-styles "^3.2.1"
+    chalk "^2.4.1"
+    cross-spawn "^6.0.5"
+    memorystream "^0.3.1"
+    minimatch "^3.0.4"
+    pidtree "^0.3.0"
+    read-pkg "^3.0.0"
+    shell-quote "^1.6.1"
+    string.prototype.padend "^3.0.0"
+
 npm-run-path@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/npm-run-path/-/npm-run-path-2.0.2.tgz#35a9232dfa35d7067b4cb2ddf2357b1871536c5f"
@@ -3298,6 +3342,11 @@ picomatch@^2.0.5:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.0.7.tgz#514169d8c7cd0bdbeecc8a2609e34a7163de69f6"
   integrity sha512-oLHIdio3tZ0qH76NybpeneBhYVj0QFTfXEFTc/B3zKQspYfYYkWYgFsmzo+4kvId/bQRcNkVeguI3y+CD22BtA==
 
+pidtree@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/pidtree/-/pidtree-0.3.0.tgz#f6fada10fccc9f99bf50e90d0b23d72c9ebc2e6b"
+  integrity sha512-9CT4NFlDcosssyg8KVFltgokyKZIFjoBxw8CTGy+5F38Y1eQWrt8tRayiUOXE+zVKQnYu5BR8JjCtvK3BcnBhg==
+
 pify@^2.0.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -3454,18 +3503,18 @@ rc@^1.1.6, rc@^1.2.1, rc@^1.2.8:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-read-config-file@3.2.2:
-  version "3.2.2"
-  resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-3.2.2.tgz#57bbff7dd97caf237d0d625bd541c6d0efb4d067"
-  integrity sha512-PuFpMgZF01VB0ydH1dfitAxCP/fh+qnfbA9cYNIPoxPbz0SMngsrafCtaHDWfER7MwlDz4fmrNBhPkakxxFpTg==
+read-config-file@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-4.0.0.tgz#d57d6edc3a4c8a0999860e57e85664570ef56cd5"
+  integrity sha512-ZEqYePqjCkOoZu+HFhpjSB0r1eJ7RNNqf8O5/oxPT85b7ZB910au4AGxxxuJ1b81atdmBpiyODonI6vnefVIAA==
   dependencies:
-    ajv "^6.9.2"
+    ajv "^6.10.0"
     ajv-keywords "^3.4.0"
-    bluebird-lst "^1.0.7"
-    dotenv "^6.2.0"
-    dotenv-expand "^4.2.0"
-    fs-extra-p "^7.0.1"
-    js-yaml "^3.12.1"
+    bluebird-lst "^1.0.9"
+    dotenv "^8.0.0"
+    dotenv-expand "^5.1.0"
+    fs-extra "^8.1.0"
+    js-yaml "^3.13.1"
     json5 "^2.1.0"
     lazy-val "^1.0.4"
 
@@ -3745,6 +3794,11 @@ semver@^6.1.1:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.1.tgz#53f53da9b30b2103cd4f15eab3a18ecbcb210c9b"
   integrity sha512-rWYq2e5iYW+fFe/oPPtYJxYgjBm8sC4rmoGdUOgBB7VnwKt6HrL793l2voH1UlsyYZpJ4g0wfjnTEO1s1NP2eQ==
 
+semver@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
+  integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
+
 serialize-error@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/serialize-error/-/serialize-error-3.0.0.tgz#80100282b09be33c611536f50033481cb9cc87cf"
@@ -3869,13 +3923,13 @@ spdx-license-ids@^3.0.0:
   resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz#75ecd1a88de8c184ef015eafb51b5b48bfd11bb1"
   integrity sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==
 
-spectron@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/spectron/-/spectron-5.0.0.tgz#602440da0c892f8d73471652ae68000b98d7769c"
-  integrity sha512-wJrFe8EZ7xvarYawBPd1pDegmSz81U1jG0rSCx+yXqD1TISUH9ASB21KysLXkPylAnc2vhbpGiWQxrqVFtsiJg==
+spectron@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/spectron/-/spectron-6.0.0.tgz#b6ead4735837f36b4be05afa29094460666e61d8"
+  integrity sha512-YQnQgdlpdPU572YhyX1hcDT40Q+5D0hkH4hM3jYy8HLHU1+6z4WTRQkjYdCBcYHE/3fHIQdPeaI+9DUzupQZtw==
   dependencies:
     dev-null "^0.1.1"
-    electron-chromedriver "~3.0.0"
+    electron-chromedriver "~4.0.0"
     request "^2.87.0"
     split "^1.0.0"
     webdriverio "^4.13.0"
@@ -4418,10 +4472,10 @@ universalify@^0.1.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.2.tgz#b646f69be3942dabcecc9d6639c80dc105efaa66"
   integrity sha512-rBJeI5CXAlmy1pV+617WB9J63U6XcazHHF2f2dbJix4XzpUF0RS3Zbj0FGIOCAva5P/d/GBOYaACQ1w+0azUkg==
 
-update-notifier@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-3.0.0.tgz#e9bbf8f0f5b7a2ce6666ca46334fdb29492e8fab"
-  integrity sha512-6Xe3oF2bvuoj4YECUc52yxVs94yWrxwqHbzyveDktTS1WhnlTRpNcQMxUshcB7nRVGi1jEXiqL5cW1S5WSyzKg==
+update-notifier@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/update-notifier/-/update-notifier-3.0.1.tgz#78ecb68b915e2fd1be9f767f6e298ce87b736250"
+  integrity sha512-grrmrB6Zb8DUiyDIaeRTBCkgISYUgETNe7NglEbVsrLWXeESnlCSP50WfRSj/GmzMPl6Uchj24S/p80nP/ZQrQ==
   dependencies:
     boxen "^3.0.0"
     chalk "^2.0.1"