Merge pull request #342 from openreplay/dev

v1.5.1 (UI): Filters show no results message, filter modal options

frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.css

@@ -48,14 +48,14 @@
   border-radius: 0 0 3px 3px;
   border: solid thin $gray-light !important;
   box-shadow: 0 2px 2px 0 $gray-light;
-  /* padding: 20px; */
+  min-height: 50px;
   background-color: white;
   max-height: 350px;
   overflow-y: auto;
   position: absolute;
   top: 28px;
   left: 0;  
-  width: 500px;
+  width: 400px;
   z-index: 99;
 }
 

frontend/app/components/shared/Filters/FilterAutoComplete/FilterAutoComplete.tsx

@@ -58,7 +58,7 @@ function FilterAutoComplete(props: Props) {
     }).finally(() => setLoading(false));
   }
 
-  const debouncedRequestValues = React.useCallback(debounce(requestValues, 500), []);
+  const debouncedRequestValues = React.useCallback(debounce(requestValues, 300), []);
 
   const onInputChange = ({ target: { value } }) => {
     setQuery(value);
@@ -86,17 +86,12 @@ function FilterAutoComplete(props: Props) {
   const onItemClick = (e, item) => {
     e.stopPropagation();
     e.preventDefault();
-    // const { onSelect, name } = this.props;
 
-    
     if (query !== item.value) {
       setQuery(item.value); 
     }
-    // this.setState({ query: item.value, ddOpen: false})
+
     props.onSelect(e, item);
-    // setTimeout(() => {
-    //   setShowModal(false)
-    // }, 10)
   }
 
   return (
@@ -106,7 +101,6 @@ function FilterAutoComplete(props: Props) {
           name="query"
           onChange={ onInputChange }
           onBlur={ onBlur }
-          // onFocus={ () => setShowModal(true)}
           value={ query }
           autoFocus={ true }
           type="text"
@@ -119,7 +113,6 @@ function FilterAutoComplete(props: Props) {
         />
         <div
           className={stl.right}
-          // onClick={showOrButton ? onRemoveValue : onAddValue}
         >
           { showCloseButton && <div onClick={onRemoveValue}><Icon name="close" size="12" /></div> }
           { showOrButton && <div onClick={onAddValue} className="color-teal"><span className="px-1">or</span></div> }
@@ -128,21 +121,27 @@ function FilterAutoComplete(props: Props) {
 
       { !showOrButton && <div className="ml-3">or</div> }
 
-      { (showModal && (options.length > 0) || loading) &&  (
+      { showModal && (
         <div className={ stl.menu }>
           <Loader loading={loading} size="small">
-            {
-              options.map((item, i) => (
-                <div
-                  key={item.value + '_'  + i}
-                  className={ cn(stl.filterItem) }
-                  id="filter-item" onClick={ (e) => onItemClick(e, item) }
-                >
-                  { icon && <Icon name={ icon } size="16" marginRight="8" /> }
-                  <span className={ stl.label }>{ item.value }</span>
-                </div>             
-              ))
-            }
+            { options.length === 0 ? (
+              <div className="p-4 w-full">No results found!</div>
+            ) : (
+              <div>
+                {
+                  options.map((item, i) => (
+                    <div
+                      key={item.value + '_'  + i}
+                      className={ cn(stl.filterItem) }
+                      id="filter-item" onClick={ (e) => onItemClick(e, item) }
+                    >
+                      { icon && <Icon name={ icon } size="16" marginRight="8" /> }
+                      <span className={ stl.label }>{ item.value }</span>
+                    </div>             
+                  ))
+                }
+              </div>
+            )} 
           </Loader>
         </div>
       )}

frontend/app/components/shared/Filters/FilterSelection/FilterSelection.tsx

@@ -4,9 +4,12 @@ import LiveFilterModal from '../LiveFilterModal';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
 import { Icon } from 'UI';
 import { connect } from 'react-redux';
+import { dashboard as dashboardRoute, isRoute } from "App/routes";
+
+const DASHBOARD_ROUTE = dashboardRoute();
 
 interface Props {
-  filter: any; // event/filter
+  filter?: any; // event/filter
   onFilterClick: (filter) => void;
   children?: any;
   isLive?: boolean;
@@ -40,7 +43,7 @@ function FilterSelection(props: Props) {
       </OutsideClickDetectingDiv>
       {showModal && (
         <div className="absolute left-0 top-20 border shadow rounded bg-white z-50">
-          { isLive ? <LiveFilterModal onFilterClick={onFilterClick}  /> : <FilterModal onFilterClick={onFilterClick} /> }
+          { (isLive && !isRoute(DASHBOARD_ROUTE, window.location.pathname)) ? <LiveFilterModal onFilterClick={onFilterClick}  /> : <FilterModal onFilterClick={onFilterClick} /> }
         </div>
       )}
     </div>