Add connection profiles (#63)

* Add connection setup

* Refactor

* Fix lifecycle

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 { AppBar, Button, IconButton, InputBase, Toolbar, Typography } from '@material-ui/core'
-import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
-
+import ClearAdornment from './helper/ClearAdornment'
 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 { AppState } from '../reducers'
-import ClearAdornment from './helper/ClearAdornment'
+import { StyleRulesCallback, withStyles } from '@material-ui/core/styles'
 
 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) {