From 37cc7af49d7f1f81f8e6265d05dc1fd355b0ca24 Mon Sep 17 00:00:00 2001
From: Shahzad <shahzad.muhammad@elastic.co>
Date: Wed, 20 Jan 2021 11:29:44 +0100
Subject: [PATCH] [User Experience] UX use replace history instead of push on
 first load (#88586)

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
---
 .../URLFilter/ServiceNameFilter/index.tsx            | 12 ++++++++----
 .../app/RumDashboard/UserPercentile/index.tsx        | 10 +++++++---
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx
index 756014004cc9..136c7d002a72 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/URLFilter/ServiceNameFilter/index.tsx
@@ -28,7 +28,7 @@ function ServiceNameFilter({ loading, serviceNames }: Props) {
   }));
 
   const updateServiceName = useCallback(
-    (serviceN: string) => {
+    (serviceN: string, replaceHistory?: boolean) => {
       const newLocation = {
         ...history.location,
         search: fromQuery({
@@ -36,7 +36,11 @@ function ServiceNameFilter({ loading, serviceNames }: Props) {
           serviceName: serviceN,
         }),
       };
-      history.push(newLocation);
+      if (replaceHistory) {
+        history.replace(newLocation);
+      } else {
+        history.push(newLocation);
+      }
     },
     [history]
   );
@@ -45,12 +49,12 @@ function ServiceNameFilter({ loading, serviceNames }: Props) {
     if (serviceNames?.length > 0) {
       // select first from the list
       if (!selectedServiceName) {
-        updateServiceName(serviceNames[0]);
+        updateServiceName(serviceNames[0], true);
       }
 
       // in case serviceName is cached from url and isn't present in current list
       if (selectedServiceName && !serviceNames.includes(selectedServiceName)) {
-        updateServiceName(serviceNames[0]);
+        updateServiceName(serviceNames[0], true);
       }
     }
 
diff --git a/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx b/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
index 260c775c7129..a4af76b6b7a5 100644
--- a/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
+++ b/x-pack/plugins/apm/public/components/app/RumDashboard/UserPercentile/index.tsx
@@ -22,7 +22,7 @@ export function UserPercentile() {
   } = useUrlParams();
 
   const updatePercentile = useCallback(
-    (percentileN?: number) => {
+    (percentileN?: number, replaceHistory?: boolean) => {
       const newLocation = {
         ...history.location,
         search: fromQuery({
@@ -30,14 +30,18 @@ export function UserPercentile() {
           percentile: percentileN,
         }),
       };
-      history.push(newLocation);
+      if (replaceHistory) {
+        history.replace(newLocation);
+      } else {
+        history.push(newLocation);
+      }
     },
     [history]
   );
 
   useEffect(() => {
     if (!percentile) {
-      updatePercentile(DEFAULT_P);
+      updatePercentile(DEFAULT_P, true);
     }
   });