Add connection profiles (#63)

* Add connection setup

* Refactor

* Fix lifecycle

app/package.json

@@ -20,6 +20,7 @@
     "@types/react-split-pane": "^0.1.67",
     "@types/sha1": "^1.1.1",
     "@types/socket.io-client": "^1.4.32",
+    "@types/uuid": "^3.4.4",
     "@types/vis": "^4.21.9",
     "awesome-typescript-loader": "^5.2.1",
     "compare-versions": "^3.4.0",
@@ -48,6 +49,7 @@
     "source-map-loader": "^0.2.4",
     "style-loader": "^0.23.1",
     "typescript": "^3.2.2",
+    "uuid": "^3.3.2",
     "webpack": "^4.28.2",
     "webpack-bundle-analyzer": "^3.0.3",
     "webpack-cli": "^3.1.2",

app/src/App.tsx

@@ -1,19 +1,17 @@
 import * as React from 'react'
-import * as q from '../../backend/src/Model'
+import ConnectionSetup from './components/ConnectionSetup/ConnectionSetup'
-
-import { Theme, withStyles } from '@material-ui/core/styles'
-
-import { AppState } from './reducers'
-import Connection from './components/ConnectionSetup/Connection'
 import CssBaseline from '@material-ui/core/CssBaseline'
-const Settings = React.lazy(() => import('./components/Settings'))
+import ErrorBoundary from './ErrorBoundary'
 import Sidebar from './components/Sidebar/Sidebar'
 import TitleBar from './components/TitleBar'
 import Tree from './components/Tree/Tree'
 import UpdateNotifier from './UpdateNotifier'
+import { AppState } from './reducers'
 import { connect } from 'react-redux'
-import ErrorBoundary from './ErrorBoundary'
 import { default as SplitPane } from 'react-split-pane'
+import { Theme, withStyles } from '@material-ui/core/styles'
+
+const Settings = React.lazy(() => import('./components/Settings'))
 
 interface Props {
   name: string
@@ -66,7 +64,7 @@ class App extends React.PureComponent<Props, {}> {
             </div>
           </div>
           <UpdateNotifier />
-          <Connection />
+          <ConnectionSetup />
         </ErrorBoundary>
       </div >
     )

app/src/PersistantStorage.ts

@@ -0,0 +1,21 @@
+export interface StorageIdentifier<Model> {
+  id: string
+}
+
+export interface PersistantStorage {
+  store<Model>(identifier: StorageIdentifier<Model>, data: Model): void
+  load<Model>(identifier: StorageIdentifier<Model>): Model | undefined
+}
+
+class LocalStorage implements PersistantStorage {
+  public store<Model>(identifier: StorageIdentifier<Model>, data: Model) {
+    localStorage.setItem(identifier.id, JSON.stringify(data))
+  }
+
+  public load<Model>(identifier: StorageIdentifier<Model>): Model | undefined {
+    const data = localStorage.getItem(identifier.id)
+    return data && JSON.parse(data)
+  }
+}
+
+export default new LocalStorage()

app/src/actions/Connection.ts

@@ -1,11 +1,16 @@
-import { ActionTypes, Action, ConnectionState } from '../reducers/Connection'
-import { MqttOptions } from '../../../backend/src/DataSource'
-import { Dispatch } from 'redux'
-import { rendererEvents, addMqttConnectionEvent, makeConnectionStateEvent, removeConnection } from '../../../events'
-import { AppState } from '../reducers'
 import * as q from '../../../backend/src/Model'
-import { showTree } from './Tree'
 import * as url from 'url'
+import { Action, ActionTypes } from '../reducers/Connection'
+import {
+  addMqttConnectionEvent,
+  makeConnectionStateEvent,
+  removeConnection,
+  rendererEvents,
+} from '../../../events'
+import { AppState } from '../reducers'
+import { Dispatch } from 'redux'
+import { MqttOptions } from '../../../backend/src/DataSource'
+import { showTree } from './Tree'
 import { TopicViewModel } from '../TopicViewModel'
 
 export const connect = (options: MqttOptions, connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
@@ -15,6 +20,7 @@ export const connect = (options: MqttOptions, connectionId: string) => (dispatch
   const host = url.parse(options.url).hostname
 
   rendererEvents.subscribe(event, (dataSourceState) => {
+    console.log(dataSourceState)
     if (dataSourceState.connected) {
       const tree = new q.Tree<TopicViewModel>()
       tree.updateWithConnection(rendererEvents, connectionId)

app/src/actions/ConnectionManager.ts

@@ -0,0 +1,108 @@
+import { AppState } from '../reducers'
+import { ConnectionOptions, createEmptyConnection, defaultConnections } from '../model/ConnectionOptions'
+import { default as persistantStorage, StorageIdentifier } from '../PersistantStorage'
+import { Dispatch } from 'redux'
+import { loadLegacyConnectionSettings } from '../model/LegacyConnectionSettings'
+import {
+  ActionTypes,
+  Action,
+} from '../reducers/ConnectionManager'
+
+const storedConnectionsIdentifier: StorageIdentifier<{[s: string]: ConnectionOptions}> = {
+  id: 'ConnectionManager_connections',
+}
+
+export const loadConnectionSettings = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const connections = persistantStorage.load(storedConnectionsIdentifier)
+  if (!connections) {
+    return
+  }
+
+  dispatch(setConnections(connections))
+  const firstKey = Object.keys(connections)[0]
+  if (firstKey) {
+    dispatch(selectConnection(firstKey))
+  }
+}
+
+export const saveConnectionSettings = () => (_dispatch: Dispatch<any>, getState: () => AppState) => {
+  persistantStorage.store(storedConnectionsIdentifier, getState().connectionManager.connections)
+}
+
+export const updateConnection = (connectionId: string, changeSet: any): Action => ({
+  connectionId,
+  changeSet,
+  type: ActionTypes.CONNECTION_MANAGER_UPDATE_CONNECTION,
+})
+
+export const addSubscription = (subscription: string, connectionId: string): Action => ({
+  connectionId,
+  subscription,
+  type: ActionTypes.CONNECTION_MANAGER_ADD_SUBSCRIPTION,
+})
+
+export const deleteSubscription = (subscription: string, connectionId: string): Action => ({
+  connectionId,
+  subscription,
+  type: ActionTypes.CONNECTION_MANAGER_DELETE_SUBSCRIPTION,
+})
+
+export const createConnection = () => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const newConnection = createEmptyConnection()
+  dispatch(addConnection(newConnection))
+  dispatch(selectConnection(newConnection.id))
+}
+
+export const setConnections = (connections: {[s: string]: ConnectionOptions}): Action => ({
+  connections,
+  type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS,
+})
+
+export const selectConnection = (connectionId: string): Action => ({
+  selected: connectionId,
+  type: ActionTypes.CONNECTION_MANAGER_SELECT_CONNECTION,
+})
+
+export const addConnection = (connection: ConnectionOptions): Action => ({
+  connection,
+  type: ActionTypes.CONNECTION_MANAGER_ADD_CONNECTION,
+})
+
+export const toggleAdvancedSettings = (): Action  => ({
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS,
+})
+
+export const deleteConnection = (connectionId: string) => (dispatch: Dispatch<any>, getState: () => AppState) => {
+  const connectionIds = Object.keys(getState().connectionManager.connections)
+  const connectionIdLocation = connectionIds.indexOf(connectionId)
+
+  const remainingIds = connectionIds.filter(id => id !== connectionId)
+  const nextSelectedConnectionIndex = Math.min(remainingIds.length - 1, connectionIdLocation)
+  const nextSelectedConnection = remainingIds[nextSelectedConnectionIndex]
+
+  dispatch({
+    connectionId,
+    type: ActionTypes.CONNECTION_MANAGER_DELETE_CONNECTION,
+  })
+
+  if (nextSelectedConnection) {
+    dispatch(selectConnection(nextSelectedConnection))
+  }
+}
+
+export function migrateLegacyConfiguration() {
+  const storage = persistantStorage.load(storedConnectionsIdentifier)
+  if (storage) {
+    return
+  }
+  const connections = loadLegacyConnectionSettings()
+  defaultConnections()
+}
+
+export function addDefaultConnections() {
+  const storage = persistantStorage.load(storedConnectionsIdentifier)
+  if (storage) {
+    return
+  }
+  defaultConnections()
+}

app/src/actions/index.ts

@@ -4,5 +4,6 @@ import * as treeActions from './Tree'
 import * as updateNotifierActions from './UpdateNotifier'
 import * as connectionActions from './Connection'
 import * as sidebarActons from './Sidebar'
+import * as connectionManagerActions from './ConnectionManager'
 
-export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons }
+export { settingsActions, treeActions, publishActions, updateNotifierActions, connectionActions, sidebarActons, connectionManagerActions }

app/src/components/ConnectionSetup/AddButton.tsx

@@ -0,0 +1,32 @@
+import * as React from 'react'
+import Add from '@material-ui/icons/Add'
+import { Fab } from '@material-ui/core'
+import { Theme, withStyles } from '@material-ui/core/styles'
+
+const styles = (theme: Theme) => ({
+  addButton: {
+    height: `${theme.spacing.unit * 4}px`,
+    width: `${theme.spacing.unit * 4}px`,
+    minHeight: '0',
+  },
+  addIcon: {
+    height: `${theme.spacing.unit * 2}px`,
+  },
+})
+
+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>
+  )
+})

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -0,0 +1,154 @@
+import * as React from 'react'
+import Add from '@material-ui/icons/Add'
+import Delete from '@material-ui/icons/Delete'
+import Undo from '@material-ui/icons/Undo'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+
+import {
+  Button,
+  Grid,
+  IconButton,
+  TextField,
+  List,
+  ListItem,
+  ListItemText,
+} from '@material-ui/core'
+
+interface Props {
+  connection: ConnectionOptions
+  classes: any
+  managerActions: typeof connectionManagerActions
+}
+
+interface State {
+  subscription: string
+}
+
+class ConnectionSettings 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,
+    })
+  }
+
+  public render() {
+    const { classes } = this.props
+    return (
+      <div>
+        <form className={classes.container} noValidate={true} autoComplete="off">
+          <Grid container={true} spacing={24}>
+            <Grid item={true} xs={10} className={classes.gridPadding}>
+              <TextField
+                className={classes.fullWidth}
+                label="Subscription"
+                margin="normal"
+                onChange={(event: React.ChangeEvent<HTMLInputElement>) => this.setState({ subscription: event.target.value })}
+              />
+            </Grid>
+            <Grid item={true} xs={2} className={classes.gridPadding}>
+              <Button
+                className={classes.button}
+                color="secondary"
+                onClick={() => this.props.managerActions.addSubscription(this.state.subscription, this.props.connection.id)}
+                variant="contained"
+              >
+                <Add /> Add
+              </Button>
+            </Grid>
+            <Grid item={true} xs={12} style={{ padding: 0 }}>
+              <List
+                className={classes.topicList}
+                component="nav"
+              >
+                <div className={this.props.classes.list}>
+                  {this.renderSubscriptions()}
+                </div>
+              </List>
+            </Grid>
+            <Grid item={true} xs={9} className={classes.gridPadding}>
+              <TextField
+                className={classes.fullWidth}
+                label="MQTT Client ID"
+                margin="normal"
+                onChange={this.handleChange('clientId')}
+              />
+            </Grid>
+            <Grid item={true} xs={3} className={classes.gridPadding}>
+              <Button
+                variant="contained"
+                className={classes.button}
+                onClick={this.props.managerActions.toggleAdvancedSettings}
+              >
+                <Undo /> Back
+              </Button>
+            </Grid>
+          </Grid>
+        </form>
+      </div>
+    )
+  }
+
+  private renderSubscriptions() {
+    const connection = this.props.connection
+    return connection.subscriptions.map(subscription => (
+      <Subscription
+        deleteAction={() => this.props.managerActions.deleteSubscription(subscription, connection.id)}
+        subscription={subscription}
+        key={subscription}
+      />
+    ))
+  }
+}
+
+const Subscription = (props: {
+  subscription: string,
+  deleteAction: any,
+}) => {
+  return (
+    <ListItem style={{ padding: '0 0 0 8px' }}>
+      <ListItemText>
+        <IconButton onClick={props.deleteAction} style={{ padding: '6px' }}>
+          <Delete />
+        </IconButton>
+        {props.subscription}</ListItemText>
+    </ListItem>
+  )
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    managerActions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const styles: StyleRulesCallback<string> = (theme: Theme) => {
+  return {
+    fullWidth: {
+      width: '100%',
+    },
+    gridPadding: {
+      padding: '0 12px !important',
+    },
+    topicList: {
+      height: '180px',
+      overflowY: 'scroll' as 'scroll',
+      margin: '8px 16px',
+      backgroundColor: theme.palette.background.default,
+    },
+    button: {
+      marginTop: `${theme.spacing.unit * 3 + 2}px`,
+      float: 'right',
+    },
+  }
+}
+
+export default connect(undefined, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))

app/src/components/ConnectionSetup/Connection.tsx

@@ -1,395 +0,0 @@
-import * as React from 'react'
-
-import {
-  Button,
-  CircularProgress,
-  FormControl,
-  FormControlLabel,
-  Grid,
-  IconButton,
-  Input,
-  InputAdornment,
-  InputLabel,
-  MenuItem,
-  Modal,
-  Paper,
-  Switch,
-  TextField,
-  Toolbar,
-  Typography,
-} from '@material-ui/core'
-import { connect } from 'react-redux'
-import { MqttOptions } from '../../../../backend/src/DataSource'
-import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
-
-import Notification from './Notification'
-import Visibility from '@material-ui/icons/Visibility'
-import VisibilityOff from '@material-ui/icons/VisibilityOff'
-
-const sha1 = require('sha1')
-import { AppState } from '../../reducers'
-import { bindActionCreators } from 'redux'
-import { connectionActions } from '../../actions'
-
-interface Props {
-  classes: {[s: string]: string}
-  actions: typeof connectionActions,
-  visible: boolean
-  connected: boolean
-  connecting: boolean
-  error?: string
-}
-
-const protocols = [
-  'mqtt://',
-  'ws://',
-]
-
-interface State {
-  showPassword: boolean
-  connectionSettings: ConnectionSettings
-}
-
-interface ConnectionSettings {
-  host: string
-  protocol: string
-  port: number
-  tls: boolean
-  certValidation: boolean
-  clientId: string
-  connectionId?: string
-  username: string
-  password: string
-}
-
-declare var window: any
-
-class Connection extends React.Component<Props, State> {
-  private randomClientId: string
-  private defaultConnectionSettings: ConnectionSettings = {
-    host: 'iot.eclipse.org',
-    protocol: protocols[0],
-    port: 1883,
-    tls: false,
-    certValidation: true,
-    clientId: '',
-    username: '',
-    password: '',
-    connectionId: undefined,
-  }
-
-  constructor(props: any) {
-    super(props)
-
-    const clientIdSha = sha1(`${Math.random()}`).slice(0, 8)
-    this.randomClientId = `mqtt-explorer-${clientIdSha}`
-    this.state = {
-      connectionSettings: this.loadConnectionSettings(),
-      showPassword: false,
-    }
-  }
-
-  private loadConnectionSettings(): ConnectionSettings {
-    let storedSettings: ConnectionSettings | undefined
-
-    const storedSettingsString = window.localStorage.getItem('connectionSettings')
-    try {
-      storedSettings = storedSettingsString ? JSON.parse(storedSettingsString) : undefined
-    } catch {
-      window.localStorage.setItem('connectionSettings', undefined)
-    }
-
-    return storedSettings || this.defaultConnectionSettings
-  }
-
-  private saveConnectionSettings() {
-    window.localStorage.setItem('connectionSettings', JSON.stringify(this.state.connectionSettings))
-  }
-
-  private handleClickShowPassword = () => {
-    this.setState({ showPassword: !this.state.showPassword })
-  }
-
-  private optionsFromState(): MqttOptions {
-    const protocol = this.state.connectionSettings.protocol === 'tcp://' ? 'mqtt://' : this.state.connectionSettings.protocol
-    const url = `${protocol}${this.state.connectionSettings.host}:${this.state.connectionSettings.port}`
-
-    return {
-      url,
-      username: this.state.connectionSettings.username || undefined,
-      password: this.state.connectionSettings.password || undefined,
-      clientId: this.state.connectionSettings.clientId || this.randomClientId,
-      tls: this.state.connectionSettings.tls,
-      certValidation: this.state.connectionSettings.certValidation,
-    }
-  }
-
-  public static styles: StyleRulesCallback<string> = (theme: Theme) => {
-    return {
-      root: {
-        minWidth: 550,
-        maxWidth: 650,
-        backgroundColor: theme.palette.background.default,
-        margin: '14vh auto auto auto',
-        padding: `${2 * theme.spacing.unit}px`,
-        outline: 'none',
-      },
-      title: {
-        color: theme.palette.text.primary,
-      },
-      paper: {
-        padding: theme.spacing.unit * 2,
-        textAlign: 'center',
-        color: theme.palette.text.secondary,
-      },
-      textField: {
-        width: '100%',
-      },
-      switch: {
-        marginTop: `${1 * theme.spacing.unit}px`,
-      },
-      button: {
-        margin: theme.spacing.unit,
-      },
-      inputFormControl: {
-        marginTop: '16px',
-      },
-    }
-  }
-
-  private handleChange = (name: string) => (event: any) => {
-    this.setState({
-      connectionSettings: {
-        ...this.state.connectionSettings,
-        [name]: event.target.value,
-      },
-    })
-  }
-
-  public render() {
-    const { classes } = this.props
-
-    const passwordVisibilityButton = (
-      <InputAdornment position="end">
-        <IconButton
-          aria-label="Toggle password visibility"
-          onClick={this.handleClickShowPassword}
-        >
-          {this.state.showPassword ? <Visibility /> : <VisibilityOff />}
-        </IconButton>
-      </InputAdornment>
-    )
-
-    let renderError = null
-    if (this.props.error) {
-      renderError = (
-        <Notification
-          message={this.props.error}
-          onClose={() => { this.props.actions.showError(undefined) }}
-        />
-      )
-    }
-
-    return (
-      <div>
-        {renderError}
-        <Modal open={this.props.visible} disableAutoFocus={true}>
-            <Paper className={classes.root}>
-              <Toolbar>
-                <Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
-              </Toolbar>
-              <form className={classes.container} noValidate={true} autoComplete="off">
-                <Grid container={true} spacing={24}>
-                  <Grid item={true} xs={2}>
-                    {this.renderProtocols()}
-                  </Grid>
-                  <Grid item={true} xs={7}>
-                    <TextField
-                      label="Host"
-                      className={classes.textField}
-                      value={this.state.connectionSettings.host}
-                      onChange={this.handleChange('host')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={3}>
-                    <TextField
-                      label="Port"
-                      className={classes.textField}
-                      value={this.state.connectionSettings.port}
-                      onChange={this.handleChange('port')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <TextField
-                      label="Username"
-                      className={classes.textField}
-                      value={this.state.connectionSettings.username}
-                      onChange={this.handleChange('username')}
-                      margin="normal"
-                    />
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
-                      <InputLabel htmlFor="adornment-password">Password</InputLabel>
-                      <Input
-                        id="adornment-password"
-                        type={this.state.showPassword ? 'text' : 'password'}
-                        value={this.state.connectionSettings.password}
-                        onChange={this.handleChange('password')}
-                        endAdornment={passwordVisibilityButton}
-                      />
-                    </FormControl>
-                  </Grid>
-                  <Grid item={true} xs={5}>
-                    <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
-                      <InputLabel htmlFor="client-id">Client ID</InputLabel>
-                      <Input
-                        placeholder={this.randomClientId}
-                        className={classes.textField}
-                        value={this.state.connectionSettings.clientId || ''}
-                        onChange={this.handleChange('clientId')}
-                        startAdornment={<span />}
-                      />
-                    </FormControl>
-                  </Grid>
-                  <Grid item={true} xs={4}>
-                    {this.renderCertValidationSwitch()}
-                  </Grid>
-                  <Grid item={true} xs={3}>
-                    {this.renderTlsSwitch()}
-                  </Grid>
-                </Grid>
-                <br />
-                <div style={{ textAlign: 'right' }}>
-                  <Button variant="contained" color="secondary" className={classes.button} onClick={() => this.saveConnectionSettings()}>
-                    Save
-                  </Button>
-                  {this.renderConnectButton()}
-                </div>
-              </form>
-            </Paper>
-        </Modal>
-      </div>
-    )
-  }
-
-  private renderProtocols() {
-    const { classes } = this.props
-    const protocolItems = protocols.map((value: string) => (
-      <MenuItem key={value} value={value}>
-        {value}
-      </MenuItem>
-    ))
-
-    return (
-      <TextField
-        select={true}
-        label="Protocol"
-        className={classes.textField}
-        value={this.state.connectionSettings.protocol}
-        onChange={this.handleChange('protocol')}
-        margin="normal"
-      >
-        {protocolItems}
-      </TextField>
-    )
-  }
-
-  private renderCertValidationSwitch() {
-    const { classes } = this.props
-    const certSwitch = (
-      <Switch
-        checked={this.state.connectionSettings.certValidation}
-        onChange={this.toggleCertValidation}
-        color="primary"
-      />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel
-          control={certSwitch}
-          label="Validate certificate"
-          labelPlacement="bottom"
-        />
-      </div>
-    )
-  }
-
-  private toggleCertValidation = () => this.setState({
-    connectionSettings: {
-      ...this.state.connectionSettings,
-      certValidation: !this.state.connectionSettings.certValidation,
-    },
-  })
-
-  private renderTlsSwitch() {
-    const { classes } = this.props
-    const tlsSwitch = (
-      <Switch
-        checked={this.state.connectionSettings.tls}
-        onChange={this.toggleTls}
-        color="primary"
-      />
-    )
-
-    return (
-      <div className={classes.switch}>
-        <FormControlLabel
-          control={tlsSwitch}
-          label="Encryption (tls)"
-          labelPlacement="bottom"
-        />
-      </div>
-    )
-  }
-
-  private toggleTls = () => this.setState({
-    connectionSettings: {
-      ...this.state.connectionSettings,
-      tls: !this.state.connectionSettings.tls,
-    },
-  })
-
-  private renderConnectButton() {
-    const { classes, actions } = this.props
-
-    if (this.props.connecting) {
-      return (
-        <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
-          <CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
-        </Button>
-      )
-    }
-    return (
-       <Button variant="contained" color="primary" className={classes.button} onClick={this.onClickConnect}>
-        Connect
-      </Button>
-    )
-  }
-
-  private onClickConnect = () => {
-    const connectionId = String(sha1(String(Math.random())).slice(0, 8))
-    const options = this.optionsFromState()
-    this.props.actions.connect(options, connectionId)
-  }
-}
-
-const mapStateToProps = (state: AppState) => {
-  return {
-    visible: !state.connection.connected,
-    connected: state.connection.connected,
-    connecting: state.connection.connecting,
-    error: state.connection.error,
-  }
-}
-
-const mapDispatchToProps = (dispatch: any) => {
-  return {
-    actions: bindActionCreators(connectionActions, dispatch),
-  }
-}
-
-export default connect(mapStateToProps, mapDispatchToProps)(withStyles(Connection.styles)(Connection))

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -0,0 +1,356 @@
+import * as React from 'react'
+import Delete from '@material-ui/icons/Delete'
+import Settings from '@material-ui/icons/Settings'
+import Notification from './Notification'
+import PowerSettingsNew from '@material-ui/icons/PowerSettingsNew'
+import Save from '@material-ui/icons/Save'
+import Visibility from '@material-ui/icons/Visibility'
+import VisibilityOff from '@material-ui/icons/VisibilityOff'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionActions, connectionManagerActions } from '../../actions'
+import { ConnectionOptions, toMqttConnection } from '../../model/ConnectionOptions'
+import { StyleRulesCallback, Theme, withStyles } from '@material-ui/core/styles'
+
+import {
+  Button,
+  CircularProgress,
+  FormControl,
+  FormControlLabel,
+  Grid,
+  IconButton,
+  Input,
+  InputAdornment,
+  InputLabel,
+  MenuItem,
+  Switch,
+  TextField,
+} from '@material-ui/core'
+
+interface Props {
+  connection: ConnectionOptions
+  classes: {[s: string]: string}
+  actions: typeof connectionActions,
+  managerActions: typeof connectionManagerActions
+  connected: boolean
+  connecting: boolean
+  error?: string
+}
+
+const protocols = [
+  'mqtt',
+  'ws',
+]
+
+interface State {
+  showPassword: boolean
+}
+
+class ConnectionSettings extends React.Component<Props, State> {
+  constructor(props: any) {
+    super(props)
+
+    this.state = {
+      showPassword: false,
+    }
+  }
+
+  private handleClickShowPassword = () => {
+    this.setState({ showPassword: !this.state.showPassword })
+  }
+
+  private requiresBasePath() {
+    return this.props.connection.protocol !== 'mqtt'
+  }
+
+  private renderBasePathInput() {
+    return (
+      <Grid item={true} xs={4}>
+        <TextField
+          label="Basepath"
+          className={this.props.classes.textField}
+          value={this.props.connection.basePath}
+          onChange={this.handleChange('basePath')}
+          margin="normal"
+        />
+      </Grid>
+    )
+  }
+
+  private handleChange = (name: string) => (event: any) => {
+    if (!this.props.connection) {
+      return
+    }
+
+    this.updateConnection(name, event.target.value)
+  }
+
+  private updateConnection(name: string, value: any) {
+    this.props.managerActions.updateConnection(this.props.connection.id, {
+      [name]: value,
+    })
+  }
+
+  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>
+      </InputAdornment>
+    )
+
+    let renderError = null
+    if (this.props.error) {
+      renderError = (
+        <Notification
+          message={this.props.error}
+          onClose={() => { this.props.actions.showError(undefined) }}
+        />
+      )
+    }
+
+    return (
+      <div>
+        {renderError}
+        <form className={classes.container} noValidate={true} autoComplete="off">
+          <Grid container={true} spacing={24}>
+            <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>
+    )
+  }
+
+  private renderProtocols() {
+    const { classes, connection } = this.props
+
+    const protocolItems = protocols.map((value: string) => (
+      <MenuItem key={value} value={value}>
+        {value}://
+      </MenuItem>
+    ))
+
+    return (
+      <TextField
+        select={true}
+        label="Protocol"
+        className={classes.textField}
+        value={connection.protocol}
+        onChange={this.updateProtocol}
+        margin="normal"
+      >
+        {protocolItems}
+      </TextField>
+    )
+  }
+
+  private updateProtocol = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value
+    this.updateConnection('protocol', value)
+    if (event.target.value === 'mqtt') {
+      this.updateConnection('basePath', undefined)
+    } else {
+      this.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,
+    })
+  }
+
+  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,
+    })
+  }
+
+  private renderConnectButton() {
+    const { classes, actions } = this.props
+
+    if (this.props.connecting) {
+      return (
+        <Button variant="contained" color="primary" className={classes.button} onClick={actions.disconnect}>
+          <CircularProgress size={22} style={{ marginRight: '10px' }} color="secondary" /> Abort
+        </Button>
+      )
+    }
+    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) {
+      console.log(mqttOptions)
+      this.props.actions.connect(mqttOptions, this.props.connection.id)
+    }
+  }
+}
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    connected: state.connection.connected,
+    connecting: state.connection.connecting,
+    error: state.connection.error,
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionActions, dispatch),
+    managerActions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+const styles: StyleRulesCallback<string> = (theme: Theme) => {
+  return {
+    textField: {
+      width: '100%',
+    },
+    switch: {
+      marginTop: 0,
+    },
+    button: {
+      margin: theme.spacing.unit,
+    },
+    inputFormControl: {
+      marginTop: '16px',
+    },
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSettings))

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -0,0 +1,111 @@
+import * as React from 'react'
+import ConnectionSettings from './ConnectionSettings'
+import ProfileList from './ProfileList'
+import { AppState } from '../../reducers'
+import { bindActionCreators } from 'redux'
+import { connect } from 'react-redux'
+import { connectionManagerActions } from '../../actions'
+import { ConnectionOptions } from '../../model/ConnectionOptions'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import {
+  Modal,
+  Paper,
+  Toolbar,
+  Typography,
+  Collapse,
+} from '@material-ui/core'
+import AdvancedConnectionSettings from './AdvancedConnectionSettings'
+
+interface Props {
+  actions: any
+  classes: any
+  connection?: ConnectionOptions
+  visible: boolean
+  showAdvancedSettings: boolean
+}
+
+class ConnectionSetup extends React.Component<Props, {}> {
+  constructor(props: Props) {
+    super(props)
+  }
+
+  public componentDidMount() {
+    this.props.actions.loadConnectionSettings()
+  }
+
+  public render() {
+    const { classes, visible } = this.props
+    return (
+      <div>
+        <Modal open={visible} disableAutoFocus={true}>
+          <Paper className={classes.root}>
+            <div className={classes.left}><ProfileList /></div>
+            <div className={classes.right}>
+              <Toolbar>
+                <Typography className={classes.title} variant="h6" color="inherit">MQTT Connection</Typography>
+              </Toolbar>
+              {this.renderSettings()}
+            </div>
+          </Paper>
+        </Modal>
+      </div>
+    )
+  }
+
+  private renderSettings() {
+    const { connection, showAdvancedSettings } = this.props
+    if (!connection) {
+      return null
+    }
+
+    return (
+      <div>
+        <Collapse in={!showAdvancedSettings}><ConnectionSettings connection={connection} /></Collapse>
+        <Collapse in={showAdvancedSettings}><AdvancedConnectionSettings connection={connection} /></Collapse>
+      </div>
+    )
+  }
+}
+
+const styles = (theme: Theme) => ({
+  title: {
+    color: theme.palette.text.primary,
+  },
+  root: {
+    margin: '13vw 10vw 0 10vw',
+    minWidth: '550px',
+    height: '440px',
+    outline: 'none' as 'none',
+    display: 'flex' as 'flex',
+  },
+  left: {
+    borderRightStyle: 'dotted' as 'dotted',
+    borderRadius: `${theme.shape.borderRadius}px 0 0 ${theme.shape.borderRadius}px`,
+    paddingTop: `${2 * theme.spacing.unit}px`,
+    flex: 3,
+    backgroundColor: theme.palette.background.default,
+    color: theme.palette.text.primary,
+  },
+  right: {
+    borderRadius: `0 ${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0`,
+    backgroundColor: theme.palette.background.paper,
+    padding: `${2 * theme.spacing.unit}px`,
+    flex: 10,
+  },
+})
+
+const mapStateToProps = (state: AppState) => {
+  return {
+    visible: !state.connection.connected,
+    showAdvancedSettings: state.connectionManager.showAdvancedSettings,
+    connection: state.connectionManager.selected ? state.connectionManager.connections[state.connectionManager.selected] : undefined,
+  }
+}
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(withStyles(styles)(ConnectionSetup))

app/src/components/ConnectionSetup/ProfileList.tsx

@@ -0,0 +1,88 @@
+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 } from '../../model/ConnectionOptions'
+import { Theme, withStyles } from '@material-ui/core/styles'
+import {
+  List,
+  ListItem,
+  ListItemText,
+  ListSubheader,
+} 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 <AddButton action={this.props.actions.createConnection} />
+  }
+
+  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.unit}px`,
+    height: `calc(100% - ${theme.spacing.unit * 6}px)`,
+    overflowY: 'auto' as 'auto',
+  },
+})
+
+const mapDispatchToProps = (dispatch: any) => {
+  return {
+    actions: bindActionCreators(connectionManagerActions, dispatch),
+  }
+}
+
+interface ConnectionItemProps {
+  connection: ConnectionOptions,
+  actions: any,
+  selected: boolean,
+}
+
+const connectionItemRenderer = (props: ConnectionItemProps) => {
+  return (
+    <ListItem
+      button={true}
+      selected={props.selected}
+      onClick={() => props.actions.selectConnection(props.connection.id)}
+    >
+      <ListItemText primary={props.connection.name} />
+    </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/TitleBar.tsx

@@ -1,17 +1,22 @@
 import * as React from 'react'
-
+import ClearAdornment from './helper/ClearAdornment'
-import { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
 import CloudOff from '@material-ui/icons/CloudOff'
 import Menu from '@material-ui/icons/Menu'
 import Search from '@material-ui/icons/Search'
+import {
+  AppBar,
+  Button,
+  IconButton,
+  InputBase,
+  Toolbar,
+  Typography,
+} from '@material-ui/core'
+import { AppState } from '../reducers'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
+import { connectionActions, settingsActions } from '../actions'
 import { fade } from '@material-ui/core/styles/colorManipulator'
-import { settingsActions, connectionActions } from '../actions'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-import { AppState } from '../reducers'
-import ClearAdornment from './helper/ClearAdornment'
 
 const styles: StyleRulesCallback = theme => ({
   title: {

app/src/components/helper/ClearAdornment.tsx

@@ -8,6 +8,9 @@ interface Props {
   style?: React.CSSProperties
 }
 
+/**
+ * Clear button for text input fields
+ */
 class ClearAdornment extends React.Component<Props, {}> {
   public render() {
     if (this.props.value) {

app/src/model/ConnectionOptions.ts

@@ -0,0 +1,82 @@
+import { MqttOptions } from '../../../backend/src/DataSource'
+import { v4 } from 'uuid'
+const sha1 = require('sha1')
+
+export interface ConnectionOptions {
+  type: 'mqtt'
+  id: string
+  host: string
+  protocol: 'mqtt' | 'ws' | 'wss'
+  basePath?: string
+  port: number
+  name: string
+  username?: string
+  password?: string
+  encryption: boolean
+  certValidation: boolean
+  clientId?: string
+  subscriptions: string[]
+}
+
+export function toMqttConnection(options: ConnectionOptions): MqttOptions | undefined {
+  if (options.type !== 'mqtt') {
+    return
+  }
+
+  return {
+    url: `${options.protocol}://${options.host}:${options.port}/${options.basePath || ''}`,
+    username: options.username,
+    password: options.password,
+    tls: options.encryption,
+    certValidation: options.certValidation,
+  }
+}
+
+export function generateClienId() {
+  const clientIdSha = sha1(`${Math.random()}`).slice(0, 8)
+  return `mqtt-explorer-${clientIdSha}`
+}
+
+export function createEmptyConnection(): ConnectionOptions {
+  return {
+    certValidation: true,
+    clientId: generateClienId(),
+    id: v4() as string,
+    name: 'new connection',
+    encryption: false,
+    password: undefined,
+    username: undefined,
+    subscriptions: ['#', '$SYS'],
+    type: 'mqtt',
+    host: '',
+    port: 1883,
+    protocol: 'mqtt',
+  }
+}
+
+export function defaultConnections() {
+  return [
+    {
+      ...createEmptyConnection(),
+      id: 'iot.eclipse.org',
+      name: 'iot.eclipse.org',
+      host: 'iot.eclipse.org',
+    },
+    {
+      ...createEmptyConnection(),
+      id: 'test.mosquitto.org',
+      name: 'test.mosquitto.org',
+      host: 'test.mosquitto.org',
+    },
+    {
+      ...createEmptyConnection(),
+      id: 'wss://broker.hivemq.com:8000/mqtt',
+      name: 'broker.hivemq.com',
+      host: 'broker.hivemq.com',
+      basePath: 'mqtt',
+      encryption: true,
+      protocol: 'ws',
+      port: 8000,
+    },
+  ]
+}

app/src/model/LegacyConnectionSettings.ts

@@ -0,0 +1,51 @@
+import { ConnectionOptions, createEmptyConnection } from './ConnectionOptions'
+import { v4 } from 'uuid'
+
+interface LegacyConnectionSettings {
+  host: string
+  protocol: string
+  port: number
+  tls: boolean
+  certValidation: boolean
+  clientId: string
+  connectionId?: string
+  username: string
+  password: string
+}
+
+export function loadLegacyConnectionSettings(): ConnectionOptions | undefined {
+  const legacySettingsString = window.localStorage.getItem('connectionSettings')
+  if (!legacySettingsString) {
+    return
+  }
+
+  let legacyConnection
+  try {
+    legacyConnection = JSON.parse(legacySettingsString) as LegacyConnectionSettings
+  } catch {
+    return
+  }
+
+  const protocolMap: {[s: string]: string} = {
+    'tcp://': 'mqtt',
+    'ws://': 'ws',
+    'mqtt://': 'mqtt',
+  }
+
+  const migratedOptions: Partial<ConnectionOptions> = {
+    certValidation: legacyConnection.certValidation,
+    host: legacyConnection.host,
+    name: legacyConnection.host,
+    protocol: protocolMap[legacyConnection.protocol] as any,
+    port: legacyConnection.port,
+    username: legacyConnection.username,
+    password: legacyConnection.password,
+    clientId: legacyConnection.clientId,
+    encryption: legacyConnection.tls,
+  }
+
+  return {
+    ...createEmptyConnection(),
+    ...migratedOptions,
+  }
+}

app/src/reducers/ConnectionManager.ts

@@ -0,0 +1,174 @@
+import { Action } from 'redux'
+import { ConnectionOptions } from '../model/ConnectionOptions'
+import { createReducer } from './lib'
+
+export interface ConnectionManagerState {
+  connections: {[s:string]: ConnectionOptions},
+  selected?: string
+  showAdvancedSettings: boolean
+}
+
+const initialState: ConnectionManagerState = {
+  connections: {},
+  selected: undefined,
+  showAdvancedSettings: false,
+}
+
+export type Action = SetConnections | SelectConnection | UpdateConnection | AddConnection | DeleteConnection | ToggleAdvancedSettings | DeleteSubscription | AddSubscription
+
+export enum ActionTypes {
+  CONNECTION_MANAGER_SET_CONNECTIONS = 'CONNECTION_MANAGER_SET_CONNECTIONS',
+  CONNECTION_MANAGER_SELECT_CONNECTION = 'CONNECTION_MANAGER_SELECT_CONNECTION',
+  CONNECTION_MANAGER_UPDATE_CONNECTION = 'CONNECTION_MANAGER_UPDATE_CONNECTION',
+  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_ADD_SUBSCRIPTION = 'CONNECTION_MANAGER_ADD_SUBSCRIPTION',
+  CONNECTION_MANAGER_DELETE_SUBSCRIPTION = 'CONNECTION_MANAGER_DELETE_SUBSCRIPTION',
+}
+
+export interface SetConnections {
+  type: ActionTypes.CONNECTION_MANAGER_SET_CONNECTIONS
+  connections: {[s:string]: ConnectionOptions}
+}
+
+export interface SelectConnection {
+  type: ActionTypes.CONNECTION_MANAGER_SELECT_CONNECTION
+  selected: string
+}
+
+export interface AddSubscription {
+  type: ActionTypes.CONNECTION_MANAGER_ADD_SUBSCRIPTION
+  subscription: string
+  connectionId: string
+}
+
+export interface DeleteSubscription {
+  type: ActionTypes.CONNECTION_MANAGER_DELETE_SUBSCRIPTION
+  subscription: string
+  connectionId: string
+}
+
+export interface UpdateConnection {
+  type: ActionTypes.CONNECTION_MANAGER_UPDATE_CONNECTION
+  connectionId: string
+  changeSet: any
+}
+
+export interface AddConnection {
+  type: ActionTypes.CONNECTION_MANAGER_ADD_CONNECTION
+  connection: ConnectionOptions
+}
+
+export interface DeleteConnection {
+  type: ActionTypes.CONNECTION_MANAGER_DELETE_CONNECTION
+  connectionId: string
+}
+
+export interface ToggleAdvancedSettings {
+  type: ActionTypes.CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS
+}
+
+export const connectionManagerReducer = createReducer(initialState, {
+  CONNECTION_MANAGER_SET_CONNECTIONS: setConnections,
+  CONNECTION_MANAGER_SELECT_CONNECTION: selectConnection,
+  CONNECTION_MANAGER_UPDATE_CONNECTION: updateConnection,
+  CONNECTION_MANAGER_ADD_CONNECTION: addConnection,
+  CONNECTION_MANAGER_DELETE_CONNECTION: deleteConnection,
+  CONNECTION_MANAGER_TOGGLE_ADVANCED_SETTINGS: toggleAdvancedSettings,
+  CONNECTION_MANAGER_DELETE_SUBSCRIPTION: deleteSubscription,
+  CONNECTION_MANAGER_ADD_SUBSCRIPTION: addSubscription,
+})
+
+function setConnections(state: ConnectionManagerState, action: SetConnections): ConnectionManagerState {
+  return {
+    ...state,
+    connections: action.connections,
+  }
+}
+
+function selectConnection(state: ConnectionManagerState, action: SelectConnection): ConnectionManagerState {
+  return {
+    ...state,
+    selected: action.selected,
+  }
+}
+
+function toggleAdvancedSettings(state: ConnectionManagerState, action: ToggleAdvancedSettings): ConnectionManagerState {
+  return {
+    ...state,
+    showAdvancedSettings: !state.showAdvancedSettings,
+  }
+}
+
+function addConnection(state: ConnectionManagerState, action: AddConnection): ConnectionManagerState {
+  return {
+    ...state,
+    connections: {
+      ...state.connections,
+      [action.connection.id]: action.connection,
+    },
+  }
+}
+
+function addSubscription(state: ConnectionManagerState, action: AddSubscription): ConnectionManagerState {
+  const connection = state.connections[action.connectionId]
+  const alreadyExists = connection.subscriptions.indexOf(action.subscription) !== -1
+  if (alreadyExists) {
+    return state
+  }
+
+  const newSubscriptions = connection.subscriptions.slice()
+  newSubscriptions.push(action.subscription)
+  return {
+    ...state,
+    connections: {
+      ...state.connections,
+      [action.connectionId]: {
+        ...connection,
+        subscriptions: newSubscriptions,
+      },
+    },
+  }
+}
+
+function deleteSubscription(state: ConnectionManagerState, action: AddSubscription): ConnectionManagerState {
+  const connection = state.connections[action.connectionId]
+  const newSubscriptions = connection.subscriptions.filter(s => s !== action.subscription)
+
+  return {
+    ...state,
+    connections: {
+      ...state.connections,
+      [action.connectionId]: {
+        ...connection,
+        subscriptions: newSubscriptions,
+      },
+    },
+  }
+}
+
+function deleteConnection(state: ConnectionManagerState, action: DeleteConnection): ConnectionManagerState {
+  const connections = { ...state.connections }
+  delete connections[action.connectionId]
+
+  return {
+    ...state,
+    connections,
+  }
+}
+
+function updateConnection(state: ConnectionManagerState, action: UpdateConnection): ConnectionManagerState {
+  let connection = state.connections[action.connectionId]
+  connection = {
+    ...connection,
+    ...action.changeSet,
+  }
+  return {
+    ...state,
+    connections: {
+      ...state.connections,
+      [action.connectionId]: connection,
+    },
+  }
+}

app/src/reducers/index.ts

@@ -5,6 +5,7 @@ import { PublishState, publishReducer } from './Publish'
 import { ConnectionState, connectionReducer } from './Connection'
 import { SettingsState, settingsReducer } from './Settings'
 import { TreeState, treeReducer } from './Tree'
+import { ConnectionManagerState, connectionManagerReducer } from './ConnectionManager'
 
 export enum ActionTypes {
   showUpdateNotification = 'SHOW_UPDATE_NOTIFICATION',
@@ -23,6 +24,7 @@ export interface AppState {
   settings: SettingsState,
   publish: PublishState
   connection: ConnectionState
+  connectionManager: ConnectionManagerState
 }
 
 export interface TooBigOfState {
@@ -67,6 +69,7 @@ const reducer = combineReducers({
   connection: connectionReducer,
   settings: settingsReducer,
   tree: treeReducer,
+  connectionManager: connectionManagerReducer,
 })
 
 export default reducer

app/yarn.lock

@@ -177,6 +177,13 @@
   resolved "https://registry.yarnpkg.com/@types/socket.io-client/-/socket.io-client-1.4.32.tgz#988a65a0386c274b1c22a55377fab6a30789ac14"
   integrity sha512-Vs55Kq8F+OWvy1RLA31rT+cAyemzgm0EWNeax6BWF8H7QiiOYMJIdcwSDdm5LVgfEkoepsWkS+40+WNb7BUMbg==
 
+"@types/uuid@^3.4.4":
+  version "3.4.4"
+  resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-3.4.4.tgz#7af69360fa65ef0decb41fd150bf4ca5c0cefdf5"
+  integrity sha512-tPIgT0GUmdJQNSHxp0X2jnpQfBSTfGxUMc/2CXBU2mnyTFVYVa2ojpoQ74w0U2yn2vw3jnC640+77lkFFpdVDw==
+  dependencies:
+    "@types/node" "*"
+
 "@types/vis@^4.21.9":
   version "4.21.9"
   resolved "https://registry.yarnpkg.com/@types/vis/-/vis-4.21.9.tgz#3f28e5ec4c029306756d9688d9670d502267d407"