From 6e0e5acfdd855103fa36c6dec792dad18fe94942 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Mon, 26 Oct 2020 19:14:52 +0100
Subject: [PATCH] fix type

---
 .../URLFilter/URLSearch/SelectableUrlList.tsx    | 16 +++++++++++++++-
 .../RumDashboard/URLFilter/URLSearch/index.tsx   | 16 ++++++++++------
 2 files changed, 25 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx
index d9d3d23299371..37577e6b7a2ad 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/SelectableUrlList.tsx
@@ -10,6 +10,7 @@ import React, {
   useRef,
   useState,
   KeyboardEvent,
+  useEffect,
 } from 'react';
 import {
   EuiFlexGroup,
@@ -38,6 +39,7 @@ import {
 } from './RenderOption';
 import { I18LABELS } from '../../translations';
 import { useUiSetting$ } from '../../../../../../../../../src/plugins/kibana_react/public';
+import { useUrlParams } from '../../../../../hooks/useUrlParams';
 
 const StyledRow = styled.div<{
   darkMode: boolean;
@@ -83,6 +85,10 @@ export function SelectableUrlList({
 }: Props) {
   const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
+  const { urlParams } = useUrlParams();
+
+  const { searchTerm } = urlParams;
+
   const [popoverRef, setPopoverRef] = useState<HTMLElement | null>(null);
   const [searchRef, setSearchRef] = useState<HTMLInputElement | null>(null);
 
@@ -126,6 +132,14 @@ export function SelectableUrlList({
     }
   };
 
+  useEffect(() => {
+    if (searchRef && searchTerm) {
+      searchRef.value = searchTerm;
+    }
+
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [searchRef]);
+
   const loadingMessage = (
     <EuiSelectableMessage style={{ minHeight: 300 }}>
       <EuiLoadingSpinner size="l" />
@@ -165,12 +179,12 @@ export function SelectableUrlList({
       renderOption={selectableRenderOptions}
       singleSelection={false}
       searchProps={{
-        placeholder: I18LABELS.searchByUrl,
         isClearable: true,
         onFocus: searchOnFocus,
         onBlur: searchOnBlur,
         onInput: onSearchInput,
         inputRef: setSearchRef,
+        placeholder: I18LABELS.searchByUrl,
       }}
       listProps={{
         rowHeight: 68,
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/index.tsx
index 661f4406990f6..b81ee2a5298d3 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/index.tsx
@@ -30,9 +30,9 @@ export function URLSearch({ onChange: onFilterChange }: Props) {
 
   const [popoverIsOpen, setPopoverIsOpen] = useState(false);
 
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState(searchTerm ?? '');
 
-  const [debouncedValue, setDebouncedValue] = useState('');
+  const [debouncedValue, setDebouncedValue] = useState(searchTerm ?? '');
 
   useDebounce(
     () => {
@@ -44,12 +44,16 @@ export function URLSearch({ onChange: onFilterChange }: Props) {
 
   const updateSearchTerm = useCallback(
     (searchTermN: string) => {
+      const newQuery = {
+        ...toQuery(history.location.search),
+        searchTerm: searchTermN || undefined,
+      };
+      if (!searchTermN) {
+        delete newQuery.searchTerm;
+      }
       const newLocation = {
         ...history.location,
-        search: fromQuery({
-          ...toQuery(history.location.search),
-          searchTerm: searchTermN,
-        }),
+        search: fromQuery(newQuery),
       };
       history.push(newLocation);
     },