feat(fitlers) - ui changes

frontend/app/components/BugFinder/BugFinder.js

@@ -1,5 +1,6 @@
 import cn from 'classnames';
 import { connect } from 'react-redux';
+import { List } from 'immutable';
 import withPageTitle from 'HOCs/withPageTitle';
 import {
   fetchFavoriteList as fetchFavoriteSessionList
@@ -30,6 +31,8 @@ import SessionSearchField from 'Shared/SessionSearchField'
 import SavedSearch from 'Shared/SavedSearch'
 import LiveSessionList from './LiveSessionList'
 import SessionSearch from 'Shared/SessionSearch';
+import { edit as editSearch } from 'Duck/search';
+import { Button } from 'UI';
 
 const weakEqual = (val1, val2) => {
   if (!!val1 === false && !!val2 === false) return true;
@@ -78,7 +81,8 @@ const allowedQueryKeys = [
   fetchFunnelsList,
   resetFunnel,
   resetFunnelFilters,
-  setFunnelPage
+  setFunnelPage,
+  editSearch,
 })
 @withPageTitle("Sessions - OpenReplay")
 export default class BugFinder extends React.PureComponent {
@@ -174,8 +178,13 @@ export default class BugFinder extends React.PureComponent {
               className="mb-5"
             >
               <div className="flex items-center">
-                <div style={{ width: "70%", marginRight: "10px"}}><SessionSearchField /></div>
-                <SavedSearch />
+                <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.editSearch({ filters: List() })}>
+                    <span className="font-medium">Clear</span>
+                  </Button>
+                </div>
               </div>
               <SessionSearch />
               {/* <EventFilter /> */}

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

@@ -1,6 +1,6 @@
 import React, { useState} from 'react';
 import FilterItem from '../FilterItem';
-import { SegmentSelection } from 'UI';
+import { SegmentSelection, Popup } from 'UI';
 
 interface Props {
   // filters: any[]; // event/filter
@@ -29,9 +29,17 @@ function FilterList(props: Props) {
       { hasEvents && (
         <>
           <div className="flex items-center mb-2">
-            <div className="mb-2 text-sm color-gray-medium mr-auto">EVENTS</div>
+            <div className="text-sm color-gray-medium mr-auto">EVENTS</div>
             <div className="flex items-center">
-              <div className="mr-2 color-gray-medium text-sm">Events Order</div>
+              <div className="mr-2 color-gray-medium text-sm" style={{ textDecoration: 'underline dotted'}}>
+                <Popup
+                  trigger={<div>Events Order</div>}
+                  content={ `Events Order` }
+                  size="tiny"
+                  inverted
+                  position="top center"
+                />
+              </div>
               <SegmentSelection
                 primary
                 name="eventsOrder"
@@ -63,7 +71,7 @@ function FilterList(props: Props) {
 
       {hasFilters && (
         <>
-          {hasEvents && <div className='border-t -mx-5 mb-2' />}
+          {hasEvents && <div className='border-t -mx-5 mb-4' />}
           <div className="mb-2 text-sm color-gray-medium mr-auto">FILTERS</div>
           {filters.map((filter, filterIndex) => !filter.isEvent ? (
             <FilterItem

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

@@ -14,8 +14,8 @@ function FilterModal(props: Props) {
     <div className={stl.wrapper} style={{ width: '490px', height: '400px', overflowY: 'auto'}}>
       <div className="" style={{ columns: "100px 2" }}>
         {filters && Object.keys(filters).map((key) => (
-          <div className="mb-4">
-            <div className="uppercase font-medium mb-1 color-gray-medium">{key}</div>
+          <div className="mb-6">
+            <div className="uppercase font-medium mb-1 color-gray-medium tracking-widest text-sm">{key}</div>
             <div>
               {filters[key].map((filter: any) => (
                 <div className={cn(stl.optionItem, "flex items-center py-2 cursor-pointer -mx-2 px-2")} onClick={() => onFilterClick(filter)}>

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

@@ -22,19 +22,28 @@ function SavedSearch(props) {
       onClickOutside={() => setShowMenu(false)}
     >
       <div className="relative">
-        <Button prime outline size="small"
-          className="flex items-center"
-          onClick={() => setShowMenu(true)}
-        >
-          <span className="mr-2">Search Saved</span>
-          <Icon name="ellipsis-v" color="teal" size="14" />
-        </Button>
+        <div className="flex items-center">
+          <Button prime outline size="small"
+            className="flex items-center"
+            onClick={() => setShowMenu(true)}
+          >
+            <span className="mr-2">Search Saved</span>
+            <Icon name="ellipsis-v" color="teal" size="14" />
+          </Button>
+
+          <div className="flex items-center ml-2">
+            <Icon name="search" size="14" />
+            <span className="color-gray-medium px-1">Viewing:</span>
+            <span className="font-medium">Login ...</span>
+          </div>
+        </div>
+
         { showMenu && (
           <div
-            className="absolute right-0 bg-white border rounded z-50"
+            className="absolute left-0 bg-white border rounded z-50"
             style={{ top: '33px', width: '200px' }}
           >
-            <SavedSearchDropdown list={props.list}/>
+            <SavedSearchDropdown list={props.list} onClose={() => setShowMenu(false)} />
           </div>
         )}
       </div>

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

@@ -1,15 +1,18 @@
 import React from 'react';
 import stl from './SavedSearchDropdown.css';
 import { Icon } from 'UI';
-import { applyFilter } from 'Duck/search'
+import { applyFilter, remove } from 'Duck/search'
 import { connect } from 'react-redux';
+import { confirm } from 'UI/Confirmation';
 
 interface Props {
   list: Array<any>
   applyFilter: (filter: any) => void
+  remove: (id: string) => Promise<void>
+  onClose: () => void
 }
 
-function Row ({ name, onClick }) {
+function Row ({ name, onClick, onClickEdit, onDelete }) {
   return (
     <div
       onClick={onClick}
@@ -17,8 +20,8 @@ function Row ({ name, onClick }) {
     >
       <div className="px-3 py-2">{name}</div>
       <div className="ml-auto flex items-center">
-        <div className="cursor-pointer px-2 hover:bg-active-blue"><Icon name="pencil" size="14" /></div>
-        <div className="cursor-pointer px-2 hover:bg-active-blue"><Icon name="trash" size="14" /></div>
+        <div className="cursor-pointer px-2 hover:bg-active-blue" onClick={onClickEdit}><Icon name="pencil" size="14" /></div>
+        <div className="cursor-pointer px-2 hover:bg-active-blue" onClick={onDelete}><Icon name="trash" size="14" /></div>
       </div>
     </div>
   )
@@ -27,14 +30,38 @@ function Row ({ name, onClick }) {
 function SavedSearchDropdown(props: Props) {
   const onClick = (item) => {
     props.applyFilter(item.filter)
+    props.onClose()
   }
+
+  const onDelete = async (instance) => {
+    if (await confirm({
+      header: 'Confirm',
+      confirmButton: 'Yes, Delete',
+      confirmation: `Are you sure you want to permanently delete this search?`
+    })) {
+      props.remove(instance.alertId).then(() => {
+        // toggleForm(null, false);
+      });
+    }
+  }
+
+  const onClickEdit = (instance) => {
+    // toggleForm(instance);
+  }
+
   return (
     <div className={stl.wrapper}>
       {props.list.map(item => (
-        <Row key={item.searchId} name={item.name} onClick={() => onClick(item)} />
+        <Row
+          key={item.searchId}
+          name={item.name}
+          onClick={() => onClick(item)}
+          onDelete={() => onDelete(item) }
+          onClickEdit={() => onClickEdit(item)}
+        />
       ))}
     </div>
   );
 }
 
-export default connect(null, { applyFilter })(SavedSearchDropdown);
+export default connect(null, { applyFilter, remove })(SavedSearchDropdown);

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

@@ -84,7 +84,6 @@ function SessionSearch(props) {
         </div>
         <div className="ml-auto flex items-center">
           <SaveFilterButton />
-          <Button onClick={clearSearch}>CLEAR STEPS</Button>
           <Button plain>SAVE FUNNEL</Button>
         </div>
       </div>