From 5de203ba72febaae74fca715f88de40225f7ccc3 Mon Sep 17 00:00:00 2001
From: Nathan L Smith <nathan.smith@elastic.co>
Date: Mon, 27 Jul 2020 16:24:45 -0500
Subject: [PATCH] [APM] Fix focus map link on service map (#73338)

The link was including `serviceName` from the `urlParams` so it was linking to the wrong service. Overwrite the service name so the link is correct.

Fixes #72911.
---
 .../app/ServiceMap/Popover/Buttons.test.tsx   | 32 +++++++++++++++++++
 .../app/ServiceMap/Popover/Buttons.tsx        |  7 +++-
 2 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.test.tsx

diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.test.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.test.tsx
new file mode 100644
index 0000000000000..4146266b17916
--- /dev/null
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.test.tsx
@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+import React from 'react';
+import { Buttons } from './Buttons';
+import { render } from '@testing-library/react';
+
+describe('Popover Buttons', () => {
+  it('renders', () => {
+    expect(() =>
+      render(<Buttons selectedNodeServiceName="test service name" />)
+    ).not.toThrowError();
+  });
+
+  it('handles focus click', async () => {
+    const onFocusClick = jest.fn();
+    const result = render(
+      <Buttons
+        onFocusClick={onFocusClick}
+        selectedNodeServiceName="test service name"
+      />
+    );
+    const focusButton = await result.findByText('Focus map');
+
+    focusButton.click();
+
+    expect(onFocusClick).toHaveBeenCalledTimes(1);
+  });
+});
diff --git a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx
index d67447e04ef81..cb33fb32f3b0d 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx
+++ b/x-pack/plugins/apm/public/components/app/ServiceMap/Popover/Buttons.tsx
@@ -22,7 +22,12 @@ export function Buttons({
   onFocusClick = () => {},
   selectedNodeServiceName,
 }: ButtonsProps) {
-  const urlParams = useUrlParams().urlParams as APMQueryParams;
+  // The params may contain the service name. We want to use the selected node's
+  // service name in the button URLs, so make a copy and set the
+  // `serviceName` property.
+  const urlParams = { ...useUrlParams().urlParams } as APMQueryParams;
+  urlParams.serviceName = selectedNodeServiceName;
+
   const detailsUrl = getAPMHref(
     `/services/${selectedNodeServiceName}/transactions`,
     '',