From 76a47bb4e6ca2350a57e0671f50ce8000f35721f Mon Sep 17 00:00:00 2001
From: alencarlucas <alencarlucaas@gmail.com>
Date: Mon, 19 Aug 2019 13:55:40 -0300
Subject: [PATCH 1/2] fix: Avoid filter tab disapears on apply filter

---
 .../BrowserFilter/BrowserFilter.react.js      | 30 ++++++++-----------
 .../Data/Browser/BrowserToolbar.react.js      |  3 +-
 2 files changed, 15 insertions(+), 18 deletions(-)

diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index 6ecfa3c212..77ac9c6afe 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/src/components/BrowserFilter/BrowserFilter.react.js
@@ -34,22 +34,22 @@ export default class BrowserFilter extends React.Component {
   }
 
   componentWillReceiveProps(props) {
-    if (props.schema !== this.props.schema) {
+    if (props.className !== this.props.className) {
       this.setState({ open: false });
     }
   }
 
-  open() {
+  toggle() {
     let filters = this.props.filters;
     if (this.props.filters.size === 0) {
       let available = Filters.availableFilters(this.props.schema, null, BLACKLISTED_FILTERS);
       let field = Object.keys(available)[0];
       filters = new List([new Map({ field: field, constraint: available[field][0] })]);
     }
-    this.setState({
-      open: true,
+    this.setState(prevState => ({
+      open: !prevState.open,
       filters: filters,
-    });
+    }));
     this.props.setCurrent(null);
   }
 
@@ -62,9 +62,7 @@ export default class BrowserFilter extends React.Component {
   }
 
   clear() {
-    this.setState({ open: false }, () => {
-      this.props.onChange(new Map());
-    });
+    this.props.onChange(new Map());
   }
 
   apply() {
@@ -76,16 +74,19 @@ export default class BrowserFilter extends React.Component {
       }*/
       return filter;
     })
-    this.setState({ open: false }, () => {
-      this.props.onChange(formatted);
-    });
+    this.props.onChange(formatted);
   }
 
   render() {
     let popover = null;
+    let buttonStyle = [styles.entry];
+
     if (this.state.open) {
       let position = Position.inDocument(this.node);
+      position = { x: Math.ceil(position.x + this.node.clientWidth), y: position.y}
       let popoverStyle = [styles.popover];
+      buttonStyle.push(styles.title);
+
       if (this.props.filters.size) {
         popoverStyle.push(styles.active);
       }
@@ -93,10 +94,6 @@ export default class BrowserFilter extends React.Component {
       popover = (
         <Popover fixed={true} position={position}>
           <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)}>
-            <div className={styles.title} onClick={() => this.setState({ open: false })}>
-              <Icon name='filter-solid' width={14} height={14} />
-              <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>
-            </div>
             <div className={styles.body}>
               <Filter
                 blacklist={BLACKLISTED_FILTERS}
@@ -129,13 +126,12 @@ export default class BrowserFilter extends React.Component {
         </Popover>
       );
     }
-    let buttonStyle = [styles.entry];
     if (this.props.filters.size) {
       buttonStyle.push(styles.active);
     }
     return (
       <div className={styles.wrap}>
-        <div className={buttonStyle.join(' ')} onClick={this.open.bind(this)}>
+        <div className={buttonStyle.join(' ')} onClick={this.toggle.bind(this)}>
           <Icon name='filter-solid' width={14} height={14} />
           <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>
         </div>
diff --git a/src/dashboard/Data/Browser/BrowserToolbar.react.js b/src/dashboard/Data/Browser/BrowserToolbar.react.js
index 67fd5cc4b9..7a858af3d8 100644
--- a/src/dashboard/Data/Browser/BrowserToolbar.react.js
+++ b/src/dashboard/Data/Browser/BrowserToolbar.react.js
@@ -159,7 +159,8 @@ let BrowserToolbar = ({
         setCurrent={setCurrent}
         schema={schema}
         filters={filters}
-        onChange={onFilterChange} />
+        onChange={onFilterChange}
+        className={className} />
       <div className={styles.toolbarSeparator} />
       {enableSecurityDialog ? <SecurityDialog
         setCurrent={setCurrent}

From 435a7d69ac8741beea9f20e5b5d4c8516c59b678 Mon Sep 17 00:00:00 2001
From: alencarlucas <alencarlucaas@gmail.com>
Date: Fri, 23 Aug 2019 17:46:57 -0300
Subject: [PATCH 2/2] feat: Close filter tab on external click

---
 src/components/BrowserFilter/BrowserFilter.react.js | 7 ++++---
 src/components/Popover/Popover.react.js             | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/src/components/BrowserFilter/BrowserFilter.react.js b/src/components/BrowserFilter/BrowserFilter.react.js
index 77ac9c6afe..9d821b6fca 100644
--- a/src/components/BrowserFilter/BrowserFilter.react.js
+++ b/src/components/BrowserFilter/BrowserFilter.react.js
@@ -27,6 +27,7 @@ export default class BrowserFilter extends React.Component {
       open: false,
       filters: new List(),
     };
+    this.toggle = this.toggle.bind(this)
   }
 
   componentDidMount() {
@@ -83,7 +84,6 @@ export default class BrowserFilter extends React.Component {
 
     if (this.state.open) {
       let position = Position.inDocument(this.node);
-      position = { x: Math.ceil(position.x + this.node.clientWidth), y: position.y}
       let popoverStyle = [styles.popover];
       buttonStyle.push(styles.title);
 
@@ -92,8 +92,9 @@ export default class BrowserFilter extends React.Component {
       }
       let available = Filters.availableFilters(this.props.schema, this.state.filters);
       popover = (
-        <Popover fixed={true} position={position}>
+        <Popover fixed={true} position={position} onExternalClick={this.toggle}>
           <div className={popoverStyle.join(' ')} onClick={() => this.props.setCurrent(null)}>
+            <div onClick={this.toggle} style={{ cursor: 'pointer', width: this.node.clientWidth, height: this.node.clientHeight }}></div>
             <div className={styles.body}>
               <Filter
                 blacklist={BLACKLISTED_FILTERS}
@@ -131,7 +132,7 @@ export default class BrowserFilter extends React.Component {
     }
     return (
       <div className={styles.wrap}>
-        <div className={buttonStyle.join(' ')} onClick={this.toggle.bind(this)}>
+        <div className={buttonStyle.join(' ')} onClick={this.toggle}>
           <Icon name='filter-solid' width={14} height={14} />
           <span>{this.props.filters.size ? 'Filtered' : 'Filter'}</span>
         </div>
diff --git a/src/components/Popover/Popover.react.js b/src/components/Popover/Popover.react.js
index b5a8821345..243aef3d1c 100644
--- a/src/components/Popover/Popover.react.js
+++ b/src/components/Popover/Popover.react.js
@@ -5,7 +5,7 @@
  * This source code is licensed under the license found in the LICENSE file in
  * the root directory of this source tree.
  */
-import PropTypes   from 'lib/PropTypes'; 
+import PropTypes   from 'lib/PropTypes';
 import hasAncestor from 'lib/hasAncestor';
 import React       from 'react';
 import ReactDOM    from 'react-dom';
@@ -83,7 +83,7 @@ export default class Popover extends React.Component {
   }
 
   _checkExternalClick(e) {
-    if (!hasAncestor(e.target, this._popoverLayer) &&
+    if (!hasAncestor(e.target, this._popoverWrapper) &&
       this.props.onExternalClick) {
       this.props.onExternalClick(e);
     }