feat(ui) - filters - clear search tooltip and component separation

frontend/app/components/BugFinder/BugFinder.js

@@ -1,6 +1,5 @@
 import cn from 'classnames';
 import { connect } from 'react-redux';
-import { List } from 'immutable';
 import withPageTitle from 'HOCs/withPageTitle';
 import {
   fetchFavoriteList as fetchFavoriteSessionList
@@ -10,7 +9,6 @@ import { applyFilter, clearEvents, addAttribute } from 'Duck/filters';
 import { fetchList as fetchFunnelsList } from 'Duck/funnels';
 import { defaultFilters, preloadedFilters } from 'Types/filter';
 import { KEYS } from 'Types/filter/customFilter';
-import EventFilter from './EventFilter';
 import SessionList from './SessionList';
 import FunnelList from 'Components/Funnels/FunnelList';
 import stl from './bugFinder.css';
@@ -21,18 +19,15 @@ import { fetchList as fetchIntegrationVariables, fetchSources } from 'Duck/custo
 import { RehydrateSlidePanel } from './WatchDogs/components';
 import { setActiveTab, setFunnelPage } from 'Duck/sessions';
 import SessionsMenu from './SessionsMenu/SessionsMenu';
-import SessionFlowList from './SessionFlowList/SessionFlowList';
 import { LAST_7_DAYS } from 'Types/app/period';
 import { resetFunnel } from 'Duck/funnels';
 import { resetFunnelFilters } from 'Duck/funnelFilters'
 import NoSessionsMessage from 'Shared/NoSessionsMessage';
 import TrackerUpdateMessage from 'Shared/TrackerUpdateMessage';
-import SessionSearchField from 'Shared/SessionSearchField'
-import SavedSearch from 'Shared/SavedSearch'
 import LiveSessionList from './LiveSessionList'
 import SessionSearch from 'Shared/SessionSearch';
+import MainSearchBar from 'Shared/MainSearchBar';
 import { clearSearch } from 'Duck/search';
-import { Button } from 'UI';
 
 const weakEqual = (val1, val2) => {
   if (!!val1 === false && !!val2 === false) return true;
@@ -177,17 +172,8 @@ export default class BugFinder extends React.PureComponent {
               data-hidden={ activeTab === 'live' || activeTab === 'favorite' }
               className="mb-5"
             >
-              <div className="flex items-center">
-                <div style={{ width: "65%", marginRight: "10px"}}><SessionSearchField /></div>
-                <div className="flex items-center" style={{ width: "35%"}}>
-                  <SavedSearch />
-                  <Button plain className="ml-auto" onClick={() => this.props.clearSearch()}>
-                    <span className="font-medium">Clear</span>
-                  </Button>
-                </div>
-              </div>
+              <MainSearchBar />
               <SessionSearch />
-              {/* <EventFilter /> */}
             </div>
             { activeFlow && activeFlow.type === 'flows' && <FunnelList /> }
             { activeTab.type !== 'live' && <SessionList onMenuItemClick={this.setActiveTab} /> }

frontend/app/components/shared/MainSearchBar/MainSearchBar.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import SessionSearchField from 'Shared/SessionSearchField';
+import SavedSearch from 'Shared/SavedSearch';
+import { Button, Popup } from 'UI';
+import { clearSearch } from 'Duck/search';
+import { connect } from 'react-redux';
+
+interface Props {
+    clearSearch: () => void;
+}
+const MainSearchBar = (props: Props) => {
+  return (
+    <div className="flex items-center">
+        <div style={{ width: "65%", marginRight: "10px"}}><SessionSearchField /></div>
+        <div className="flex items-center" style={{ width: "35%"}}>
+        <SavedSearch />
+        <Popup
+            trigger={
+                <Button
+                    plain
+                    className="ml-auto"
+                    onClick={() => props.clearSearch()}
+                >
+                    <span className="font-medium">Clear</span>
+                </Button>
+            }
+            content={'Clear all filters and search'}
+            size="tiny"
+            inverted
+            position="top right"
+        />
+        </div>
+    </div>
+  )
+}
+export default connect(null, { clearSearch })(MainSearchBar);

frontend/app/components/shared/MainSearchBar/index.ts

@@ -0,0 +1 @@
+export { default } from './MainSearchBar';

frontend/app/components/shared/SavedSearch/SavedSearch.tsx

@@ -33,7 +33,7 @@ function SavedSearch(props) {
             className="flex items-center"
             onClick={() => setShowMenu(true)}
           >
-            <span className="mr-2">Search Saved</span>
+            <span className="mr-2">{`Search Saved (${list.size})`}</span>
             <Icon name="ellipsis-v" color="teal" size="14" />
           </Button>
           { savedSearch && (
@@ -50,7 +50,7 @@ function SavedSearch(props) {
             className="absolute left-0 bg-white border rounded z-50"
             style={{ top: '33px', width: '200px' }}
           >
-            <SavedSearchDropdown list={props.list} onClose={() => setShowMenu(false)} />
+            <SavedSearchDropdown list={list} onClose={() => setShowMenu(false)} />
           </div>
         )}
       </div>

frontend/app/components/shared/SessionSearch/SessionSearch.tsx

@@ -59,12 +59,6 @@ function SessionSearch(props) {
     });
   }
 
-  const clearSearch = () => {
-    props.edit({
-        filters: List(),
-    });
-  }
-
   return (hasEvents || hasFilters) ? (
     <div className="border bg-white rounded mt-4">
       <div className="p-5">