diff --git a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts b/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts index a0d59a166..63959cd33 100644 --- a/frontend/app/components/Session/Player/ReplayPlayer/useShortcuts.ts +++ b/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]); } diff --git a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx b/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx index 4fbcdb971..0f075cb20 100644 --- a/frontend/app/components/shared/SessionSearchField/AiSessionSearchField.tsx +++ b/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 (
@@ -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 !== '' ? ( +
+
+ {hasFilters ? : } +
+
+ ) : null + } />
); -}) +}); 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));