From 2d73ec6fd7824fcaf37990ea1b005833ecaefaa2 Mon Sep 17 00:00:00 2001
From: Ritesh Kumar <rkritesh078@gmail.com>
Date: Fri, 8 Jul 2016 14:07:18 +0530
Subject: [PATCH] show cross only if text present

---
 .../left_panel/__tests__/text_filter.js       |  8 ++--
 .../ui/components/left_panel/text_filter.js   | 43 +++++++++++++------
 2 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/src/modules/ui/components/left_panel/__tests__/text_filter.js b/src/modules/ui/components/left_panel/__tests__/text_filter.js
index 32653e851cb1..5f3b5cc1f8b2 100755
--- a/src/modules/ui/components/left_panel/__tests__/text_filter.js
+++ b/src/modules/ui/components/left_panel/__tests__/text_filter.js
@@ -35,11 +35,9 @@ describe('manager.ui.components.left_panel.test_filter', function () {
       const onClear = sinon.spy();
       const wrap = shallow(<TextFilter onClear={onClear} />);
 
-      // use the latest div to avoid parents
-      // example: <div><div>x</div></div>
-      const clear = wrap.find('div')
-        .filterWhere(el => el.text() === 'x')
-        .last();
+      wrap.setState({ query: 'hello' });
+
+      const clear = wrap.find('.clear');
 
       clear.simulate('click');
       expect(onClear.calledOnce).to.equal(true);
diff --git a/src/modules/ui/components/left_panel/text_filter.js b/src/modules/ui/components/left_panel/text_filter.js
index b59f4dd4dbad..cb3b9e8a75ac 100755
--- a/src/modules/ui/components/left_panel/text_filter.js
+++ b/src/modules/ui/components/left_panel/text_filter.js
@@ -9,13 +9,27 @@ const mainStyle = {
 };
 
 export default class TextFilter extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      query: '',
+    };
+
+    this.onChange = this.onChange.bind(this);
+    this.fireOnClear = this.fireOnClear.bind(this);
+  }
+
   onChange(event) {
     const text = event.target.value;
+    this.setState({ query: text });
     const { onChange } = this.props;
     if (onChange) onChange(text);
   }
 
   fireOnClear() {
+    this.setState({ query: '' });
+
     const { onClear } = this.props;
     if (onClear) onClear();
   }
@@ -23,7 +37,6 @@ export default class TextFilter extends React.Component {
   render() {
     const textWrapStyle = {
       background: '#F7F7F7',
-      paddingRight: 25,
     };
 
     const textStyle = {
@@ -40,33 +53,39 @@ export default class TextFilter extends React.Component {
 
     const clearButtonStyle = {
       position: 'absolute',
-      color: '#B1B1B1',
+      color: '#868686',
       border: 'none',
       width: 25,
       height: 26,
-      right: 0,
-      top: 2,
+      right: 1,
+      top: 0,
       textAlign: 'center',
       cursor: 'pointer',
+      lineHeight: '23px',
+      fontSize: 20,
     };
 
     return (
-      <div style={mainStyle}>
-        <div style={textWrapStyle}>
+      <div style={mainStyle} >
+        <div style={textWrapStyle} >
           <input
             style={textStyle}
             type="text"
             placeholder="Filter"
             name="filter-text"
             value={this.props.text || ''}
-            onChange={this.onChange.bind(this)}
+            onChange={this.onChange}
           />
         </div>
-        <div
-          style={clearButtonStyle}
-          onClick={this.fireOnClear.bind(this)}
-        >x
-        </div>
+        {
+          this.state.query && this.state.query.length && <div
+            style={clearButtonStyle}
+            onClick={this.fireOnClear}
+            className="clear"
+          >
+            ×
+          </div>
+        }
       </div>
     );
   }