From 8a72a0224d35b23d752f4384dd0e681a91dd0f87 Mon Sep 17 00:00:00 2001
From: Thomas Nordquist <thomas.nordquist@viison.com>
Date: Fri, 18 Jan 2019 10:04:20 +0100
Subject: [PATCH] Always show mqtt client id

---
 .../components/ConnectionSetup/Connection.tsx | 22 ++++++++++---------
 .../components/Sidebar/Publish/Publish.tsx    |  4 +---
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/app/src/components/ConnectionSetup/Connection.tsx b/app/src/components/ConnectionSetup/Connection.tsx
index e2821aa..5a9ce5d 100644
--- a/app/src/components/ConnectionSetup/Connection.tsx
+++ b/app/src/components/ConnectionSetup/Connection.tsx
@@ -169,7 +169,7 @@ class Connection extends React.Component<Props, State> {
       button: {
         margin: theme.spacing.unit,
       },
-      passwordFormControl: {
+      inputFormControl: {
         marginTop: '16px',
       },
     }
@@ -261,7 +261,7 @@ class Connection extends React.Component<Props, State> {
                     />
                   </Grid>
                   <Grid item={true} xs={5}>
-                    <FormControl className={`${classes.textField} ${classes.passwordFormControl}`}>
+                    <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
                       <InputLabel htmlFor="adornment-password">Password</InputLabel>
                       <Input
                         id="adornment-password"
@@ -273,14 +273,16 @@ class Connection extends React.Component<Props, State> {
                     </FormControl>
                   </Grid>
                   <Grid item={true} xs={5}>
-                    <TextField
-                      label="Client ID"
-                      placeholder={this.randomClientId}
-                      className={classes.textField}
-                      value={this.state.clientId || ''}
-                      onChange={this.handleChange('clientId')}
-                      margin="normal"
-                    />
+                    <FormControl className={`${classes.textField} ${classes.inputFormControl}`}>
+                      <InputLabel htmlFor="client-id">Client ID</InputLabel>
+                      <Input
+                        placeholder={this.randomClientId}
+                        className={classes.textField}
+                        value={this.state.clientId || ''}
+                        onChange={this.handleChange('clientId')}
+                        startAdornment={<span />}
+                      />
+                    </FormControl>
                   </Grid>
                   <Grid item={true} xs={4}>
                     <div className={classes.switch}>
diff --git a/app/src/components/Sidebar/Publish/Publish.tsx b/app/src/components/Sidebar/Publish/Publish.tsx
index 7c27c23..8198758 100644
--- a/app/src/components/Sidebar/Publish/Publish.tsx
+++ b/app/src/components/Sidebar/Publish/Publish.tsx
@@ -11,9 +11,7 @@ import * as q from '../../../../../backend/src/Model'
 
 import {
   Button,
-  Fab,
   FormControlLabel,
-  InputAdornment,
   Radio,
   RadioGroup,
   TextField,
@@ -192,7 +190,7 @@ class Publish extends React.Component<Props, State> {
   }
 
   private didSelectHistoryEntry = (index: number) => {
-    let message = this.state.history[index]
+    const message = this.state.history[index]
     this.props.actions.setPublishTopic(message.topic)
     this.props.actions.setPublishPayload(message.payload)
   }