Refactor

app/src/components/ConnectionSetup/AdvancedConnectionSettings.tsx

@@ -44,6 +44,40 @@ 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 => (
+      <Subscription
+        deleteAction={() => this.props.managerActions.deleteSubscription(subscription, connection.id)}
+        subscription={subscription}
+        key={subscription}
+      />
+    ))
+  }
+
   public render() {
     const { classes } = this.props
     return (
@@ -115,40 +149,6 @@ class ConnectionSettings extends React.Component<Props, State> {
       </div>
     )
   }
-
-  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 => (
-      <Subscription
-        deleteAction={() => this.props.managerActions.deleteSubscription(subscription, connection.id)}
-        subscription={subscription}
-        key={subscription}
-      />
-    ))
-  }
 }
 
 const Subscription = (props: {

app/src/components/ConnectionSetup/ConnectionSettings.tsx

@@ -90,105 +90,6 @@ class ConnectionSettings extends React.Component<Props, State> {
     })
   }
 
-  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>
-    )
-
-    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>
-    )
-  }
-
   private renderProtocols() {
     const { classes, connection } = this.props
 
@@ -305,6 +206,105 @@ class ConnectionSettings extends React.Component<Props, State> {
       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>
+      </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 mapStateToProps = (state: AppState) => {

app/src/components/ConnectionSetup/ConnectionSetup.tsx

@@ -29,6 +29,20 @@ class ConnectionSetup extends React.Component<Props, {}> {
     super(props)
   }
 
+  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>
+    )
+  }
+
   public componentDidMount() {
     this.props.actions.loadConnectionSettings()
   }
@@ -55,20 +69,6 @@ class ConnectionSetup extends React.Component<Props, {}> {
       </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 connectionHeight = '440px'

app/src/components/ConnectionSetup/ProfileList.tsx

@@ -92,7 +92,7 @@ const connectionItemRenderer = withStyles(connectionItemStyle)((props: Connectio
       onClick={() => props.actions.selectConnection(props.connection.id)}
     >
       <Typography className={props.classes.name}>
-        {props.connection.name || 'mqtt broker'}
+        {props.connection.name || 'mqtt broker'}
       </Typography>
       <Typography className={props.classes.details}>
         {connection && connection.url}