fix(ui): search clear and enter icon (#1970)

* fix(ui): fix search input clear

* fix merge

* fix shortcuts

frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts

@@ -31,7 +31,7 @@ function useShortcuts({
   };
 
   useEffect(() => {
-    const onKeyDown = (e: KeyboardEvent) => {
+    const handleShortcuts = (e: KeyboardEvent) => {
       if (e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) {
         return;
       }
@@ -86,9 +86,9 @@ function useShortcuts({
       }
     };
 
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('keydown', handleShortcuts, true);
     return () => {
-      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keydown', handleShortcuts, true);
     };
   }, [forthTenSeconds, backTenSeconds, player, fullScreenOn, fullScreenOff]);
 }

frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx

@@ -4,7 +4,7 @@ import { Input, Icon } from 'UI';
 import FilterModal from 'Shared/Filters/FilterModal';
 import { debounce } from 'App/utils';
 import { assist as assistRoute, isRoute } from 'App/routes';
-import { addFilterByKeyAndValue, fetchFilterSearch, edit } from 'Duck/search';
+import { addFilterByKeyAndValue, fetchFilterSearch, edit, clearSearch } from 'Duck/search';
 import {
   addFilterByKeyAndValue as liveAddFilterByKeyAndValue,
   fetchFilterSearch as liveFetchFilterSearch,
@@ -13,6 +13,7 @@ import { observer } from 'mobx-react-lite';
 import { useStore } from 'App/mstore';
 import { Segmented } from 'antd';
 import OutsideClickDetectingDiv from 'Shared/OutsideClickDetectingDiv';
+import { EnterOutlined, CloseOutlined } from '@ant-design/icons';
 
 const ASSIST_ROUTE = assistRoute();
 
@@ -21,7 +22,9 @@ interface Props {
   addFilterByKeyAndValue: (key: string, value: string) => void;
   liveAddFilterByKeyAndValue: (key: string, value: string) => void;
   liveFetchFilterSearch: any;
+  appliedFilter: any;
   edit: typeof edit;
+  clearSearch: typeof clearSearch;
 }
 
 function SessionSearchField(props: Props) {
@@ -82,24 +85,39 @@ function SessionSearchField(props: Props) {
   );
 }
 
-const AiSearchField = observer(({ edit }: Props) => {
+const AiSearchField = observer(({ edit, appliedFilter, clearSearch }: Props) => {
+  const hasFilters = appliedFilter && appliedFilter.filters && appliedFilter.filters.size > 0;
   const { aiFiltersStore } = useStore();
   const [searchQuery, setSearchQuery] = useState('');
   const debounceAiFetch = React.useCallback(debounce(aiFiltersStore.getSearchFilters, 1000), []);
 
   const onSearchChange = ({ target: { value } }: any) => {
     setSearchQuery(value);
-    if (value !== '' && value !== searchQuery) {
-      debounceAiFetch(value);
+  };
+
+  const fetchResults = () => {
+    if (searchQuery) {
+      debounceAiFetch(searchQuery);
     }
   };
 
+  const handleKeyDown = (event: any) => {
+    if (event.key === 'Enter') {
+      fetchResults();
+    }
+  };
+
+  const clearAll = () => {
+    clearSearch();
+    setSearchQuery('');
+  };
+
   React.useEffect(() => {
     if (aiFiltersStore.filtersSetKey !== 0) {
       console.log('updating filters', aiFiltersStore.filters, aiFiltersStore.filtersSetKey);
-      edit(aiFiltersStore.filters)
+      edit(aiFiltersStore.filters);
     }
-  }, [aiFiltersStore.filters, aiFiltersStore.filtersSetKey])
+  }, [aiFiltersStore.filters, aiFiltersStore.filtersSetKey]);
 
   return (
     <div className={'w-full'}>
@@ -107,14 +125,26 @@ const AiSearchField = observer(({ edit }: Props) => {
         onChange={onSearchChange}
         placeholder={'E.g., "Sessions with login issues this week"'}
         id="search"
-        type="search"
+        onKeyDown={handleKeyDown}
         value={searchQuery}
         autoComplete="off"
         className="text-lg placeholder-lg !border-0 rounded-r-lg focus:!border-0 focus:ring-0"
+        leadingButton={
+          searchQuery !== '' ? (
+            <div
+              className={'h-full flex items-center cursor-pointer'}
+              onClick={hasFilters ? clearAll : fetchResults}
+            >
+              <div className={'px-2 py-1 hover:bg-active-blue rounded mr-2'}>
+                {hasFilters ? <CloseOutlined /> : <EnterOutlined />}
+              </div>
+            </div>
+          ) : null
+        }
       />
     </div>
   );
-})
+});
 
 function AiSessionSearchField(props: Props) {
   const [tab, setTab] = useState('search');
@@ -181,10 +211,16 @@ const gradientBoxUnfocused = {
   width: '100%',
 };
 
-export default connect(null, {
-  addFilterByKeyAndValue,
-  fetchFilterSearch,
-  liveFetchFilterSearch,
-  liveAddFilterByKeyAndValue,
-  edit,
-})(observer(AiSessionSearchField));
+export default connect(
+  (state: any) => ({
+    appliedFilter: state.getIn(['search', 'instance']),
+  }),
+  {
+    addFilterByKeyAndValue,
+    fetchFilterSearch,
+    liveFetchFilterSearch,
+    liveAddFilterByKeyAndValue,
+    edit,
+    clearSearch,
+  }
+)(observer(AiSessionSearchField));