Add clear button to topic search

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

@@ -32,6 +32,7 @@ import Clear from '@material-ui/icons/Clear'
 import { bindActionCreators } from 'redux'
 import { connect } from 'react-redux'
 import { publishActions } from '../../../actions'
+import ClearAdornment from '../../helper/ClearAdornment';
 
 interface Props {
   node?: q.TreeNode
@@ -114,7 +115,7 @@ class Publish extends React.Component<Props, State> {
               id="publish-topic"
               value={topicStr}
               startAdornment={<span/>}
-              endAdornment={<IconButton style={{ padding: '4px' }} onClick={this.clearTopic}><Clear style={{ fontSize: '14px' }} /></IconButton>}
+              endAdornment={<ClearAdornment action={this.clearTopic} value={topicStr} />}
               onBlur={this.onTopicBlur}
               onChange={this.updateTopic}
               multiline={true}

app/src/components/TitleBar.tsx

@@ -12,6 +12,7 @@ import { connect } from 'react-redux'
 import { fade } from '@material-ui/core/styles/colorManipulator'
 import { settingsActions, connectionActions } from '../actions'
 import { AppState } from '../reducers'
+import ClearAdornment from './helper/ClearAdornment';
 
 const styles: StyleRulesCallback = theme => ({
   title: {
@@ -36,7 +37,7 @@ const styles: StyleRulesCallback = theme => ({
     },
   },
   searchIcon: {
-    width: theme.spacing.unit * 9,
+    width: theme.spacing.unit * 8,
     height: '100%',
     position: 'absolute',
     pointerEvents: 'none',
@@ -100,7 +101,7 @@ class TitleBar extends React.Component<Props, {}> {
   }
 
   private renderSearch() {
-    const { classes } = this.props
+    const { classes, topicFilter } = this.props
 
     return (
       <div className={classes.search}>
@@ -108,15 +109,20 @@ class TitleBar extends React.Component<Props, {}> {
           <Search />
         </div>
         <InputBase
-          value={this.props.topicFilter}
+          value={topicFilter}
           onChange={this.onFilterChange}
           placeholder="Search…"
+          endAdornment={<div style={{ width: '24px', paddingRight: '8px' }}><ClearAdornment action={this.clearFilter} value={topicFilter} /></div>}
           classes={{ root: classes.inputRoot, input: classes.inputInput }}
         />
       </div>
     )
   }
 
+  private clearFilter = () => {
+    this.props.actions.settings.filterTopics('')
+  }
+
   private onFilterChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     this.props.actions.settings.filterTopics(event.target.value)
   }

app/src/components/Tree/Tree.tsx

@@ -18,6 +18,7 @@ interface Props {
   connectionId?: string
   tree?: q.Tree
   filter: string
+  host?: string
 }
 
 class Tree extends React.Component<Props, {}> {
@@ -90,7 +91,7 @@ class Tree extends React.Component<Props, {}> {
           animateChages={true}
           isRoot={true}
           treeNode={tree}
-          name={'"root"'}
+          name={this.props.host}
           lastUpdate={tree.lastUpdate}
           collapsed={false}
           performanceCallback={this.performanceCallback}
@@ -109,6 +110,7 @@ const mapStateToProps = (state: AppState) => {
     autoExpandLimit: state.settings.autoExpandLimit,
     tree: state.tree.tree,
     filter: state.tree.filter,
+    host: state.connection.host,
   }
 }
 

app/src/components/helper/ClearAdornment.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import { IconButton } from '@material-ui/core'
+import Clear from '@material-ui/icons/Clear'
+
+interface Props {
+  value?: string
+  action: any
+  style?: React.CSSProperties
+}
+
+class ClearAdornment extends React.Component<Props, {}> {
+  public render() {
+    if (this.props.value) {
+      return (
+        <IconButton style={{ ...this.props.style, padding: '1px' }} onClick={this.props.action}>
+          <Clear style={{ fontSize: '16px' }} />
+        </IconButton>
+      )
+    }
+
+    return null
+  }
+}
+
+export default ClearAdornment