From 70d0631fca84fbda675ad3d7523cb5068d62ef69 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad31comp@gmail.com>
Date: Tue, 27 Oct 2020 16:41:42 +0100
Subject: [PATCH] pr feedback

---
 .../URLFilter/URLSearch/SelectableUrlList.tsx       | 13 ++++++-------
 .../URLSearch/__tests__/SelectableUrlList.test.tsx  |  7 ++-----
 .../app/RumDashboard/URLFilter/URLSearch/index.tsx  |  1 +
 3 files changed, 9 insertions(+), 12 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 2b0cb37efef83..7bd9b2c87814b 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
@@ -39,7 +39,6 @@ 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;
@@ -69,6 +68,7 @@ interface Props {
   searchValue: string;
   onClose: () => void;
   popoverIsOpen: boolean;
+  initialValue?: string;
   setPopoverIsOpen: React.Dispatch<SetStateAction<boolean>>;
 }
 
@@ -82,13 +82,10 @@ export function SelectableUrlList({
   onClose,
   popoverIsOpen,
   setPopoverIsOpen,
+  initialValue,
 }: 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);
 
@@ -136,10 +133,12 @@ export function SelectableUrlList({
   };
 
   useEffect(() => {
-    if (searchRef && searchTerm) {
-      searchRef.value = searchTerm;
+    if (searchRef && initialValue) {
+      searchRef.value = initialValue;
     }
 
+    // only want to call it at initial render to set value
+    // coming from initial value/url
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [searchRef]);
 
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/__tests__/SelectableUrlList.test.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/__tests__/SelectableUrlList.test.tsx
index 357446c747f91..abafdf089748b 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/__tests__/SelectableUrlList.test.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/URLSearch/__tests__/SelectableUrlList.test.tsx
@@ -12,11 +12,7 @@ import { render } from '../../../utils/test_helper';
 describe('SelectableUrlList', () => {
   it('it uses search term value from url', () => {
     jest.spyOn(fetcherHook, 'useFetcher').mockReturnValue({
-      data: {
-        noOfLongTasks: 3.0009765625,
-        sumOfLongTasks: 520.4375,
-        longestLongTask: 271.4375,
-      },
+      data: {},
       status: fetcherHook.FETCH_STATUS.SUCCESS,
       refetch: jest.fn(),
     });
@@ -27,6 +23,7 @@ describe('SelectableUrlList', () => {
 
     const { getByDisplayValue } = render(
       <SelectableUrlList
+        initialValue={'blog'}
         loading={false}
         data={{ items: [], total: 0 }}
         onChange={jest.fn()}
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 b81ee2a5298d3..02334be5f722e 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
@@ -137,6 +137,7 @@ export function URLSearch({ onChange: onFilterChange }: Props) {
         <h4>{I18LABELS.url}</h4>
       </EuiTitle>
       <SelectableUrlList
+        initialValue={searchTerm}
         loading={isLoading}
         onInputChange={onInputChange}
         onTermChange={onTermChange}