[7.11] [User Experience] UX use replace history instead of push on fi…

…rst load (#88586) (#88819) Co-authored-by: Kibana Machine <[email protected]> Co-authored-by: Kibana Machine <[email protected]>
elastic · Jan 20, 2021 · cf62e47 · cf62e47
1 parent bd39988
commit cf62e47
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 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
@@ -28,15 +28,19 @@ function ServiceNameFilter({ loading, serviceNames }: Props) {
   }));
 
   const updateServiceName = useCallback(
-    (serviceN: string) => {
+    (serviceN: string, replaceHistory?: boolean) => {
       const newLocation = {
         ...history.location,
         search: fromQuery({
           ...toQuery(history.location.search),
           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
@@ -22,22 +22,26 @@ export function UserPercentile() {
   } = useUrlParams();
 
   const updatePercentile = useCallback(
-    (percentileN?: number) => {
+    (percentileN?: number, replaceHistory?: boolean) => {
       const newLocation = {
         ...history.location,
         search: fromQuery({
           ...toQuery(history.location.search),
           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);
     }
   });