[APM] Fix focus map link on service map (elastic#73338) (elastic#73360)

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 elastic#72911.

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);
+  });
+});

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`,
     '',