fix(apm): make service map environment control single-select (#271754)

## Summary

- The service map environment filter was rendered through the Controls
API as a multi-select. Picking a second environment produced a
multi-value `phrases` filter that the dedicated single-value
`?environment=` URL param could not round-trip, so the map collapsed to
"all environments" on the second pick.
- Sets `single_select: true` on the `service.environment` options list
control via a new per-field flag on `ServiceMapControlConfig`. The other
controls (`service.name`, `cloud.region`, `cloud.availability_zone`)
keep the default multi-select behavior.
- Uses the Controls API's built-in `single_select` capability — no
changes to the Controls plugin itself, no URL/state plumbing changes.
The Controls runtime trims any pre-existing multi-selection down to one
value as a safety net, so refreshing an old URL won't break.

This matches the behavior of the env dropdown on every other APM page.

## How to test

1. Use a deployment with 2+ APM environments.
2. Go to APM -> Service Map.
3. Open the Environment control and pick env A, then pick env B.
4. Only env B should remain selected, the map should refilter, and
`?environment=` in the URL should reflect the latest single pick.
5. Refresh the page -> the selection should be restored.
6. The other controls (Service name, Cloud region, Cloud availability
zone) should still allow multi-select.



https://github.com/user-attachments/assets/8cbc3a4b-54bf-4610-915f-da4b6819d27b



## References

Closes #271721


Made with [Cursor](https://cursor.com)

Co-authored-by: Cursor <cursoragent@cursor.com>

Author: jennypavlova

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/service_map_control_panels_config.ts

@@ -13,6 +13,11 @@ export interface ServiceMapControlConfig {
   title: string;
   width: 'small' | 'medium' | 'large';
   grow: boolean;
+  /**
+   * When `true`, the underlying options list control allows only one selected
+   * value at a time. Defaults to `false` (multi-select).
+   */
+  single_select?: boolean;
 }
 
 /**
@@ -27,6 +32,10 @@ export const SERVICE_MAP_CONTROLS_CONFIG: ServiceMapControlConfig[] = [
     }),
     width: 'small',
     grow: true,
+    // APM uses a single-value `?environment=` URL param everywhere else, so the
+    // service map env filter must also be single-select to stay consistent and
+    // round-trip correctly through the URL.
+    single_select: true,
   },
   {
     field_name: 'service.name',

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/service_map_controls.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import { render, waitFor } from '@testing-library/react';
+import type {
+  ControlGroupRuntimeState,
+  ControlGroupStateBuilder,
+} from '@kbn/control-group-renderer';
+import type { DataView } from '@kbn/data-views-plugin/public';
+import { ServiceMapControls } from './service_map_controls';
+
+type GetCreationOptions = (
+  initialState: ControlGroupRuntimeState,
+  builder: ControlGroupStateBuilder
+) => Promise<unknown>;
+
+const capturedProps: { getCreationOptions?: GetCreationOptions } = {};
+
+jest.mock('@kbn/control-group-renderer', () => ({
+  ControlGroupRenderer: jest.fn().mockImplementation((props) => {
+    capturedProps.getCreationOptions = props.getCreationOptions;
+    return <div data-testid="control-group-renderer" />;
+  }),
+}));
+
+const dataView = { id: 'apm-data-view' } as DataView;
+const baseProps = {
+  dataView,
+  timeRange: { from: 'now-15m', to: 'now' },
+  filters: [],
+  query: { query: '', language: 'kuery' as const },
+  onFiltersChange: jest.fn(),
+};
+
+describe('ServiceMapControls', () => {
+  beforeEach(() => {
+    capturedProps.getCreationOptions = undefined;
+  });
+
+  it('configures single_select=true for service.environment and leaves the other controls multi-select', async () => {
+    render(<ServiceMapControls {...baseProps} />);
+
+    await waitFor(() => {
+      expect(capturedProps.getCreationOptions).toBeDefined();
+    });
+
+    const addOptionsListControl = jest.fn();
+    const builder = { addOptionsListControl } as unknown as ControlGroupStateBuilder;
+
+    await capturedProps.getCreationOptions!({} as ControlGroupRuntimeState, builder);
+
+    const callsByField = Object.fromEntries(
+      addOptionsListControl.mock.calls.map(([, controlState]) => [
+        controlState.field_name,
+        controlState,
+      ])
+    );
+
+    expect(callsByField['service.environment'].single_select).toBe(true);
+    expect(callsByField['service.name'].single_select).toBeUndefined();
+    expect(callsByField['cloud.region'].single_select).toBeUndefined();
+    expect(callsByField['cloud.availability_zone'].single_select).toBeUndefined();
+  });
+
+  it('passes single_select from a custom controlsConfig through to the builder', async () => {
+    render(
+      <ServiceMapControls
+        {...baseProps}
+        controlsConfig={[
+          {
+            field_name: 'service.environment',
+            title: 'Environment',
+            width: 'small',
+            grow: true,
+            single_select: true,
+          },
+          {
+            field_name: 'cloud.region',
+            title: 'Cloud region',
+            width: 'small',
+            grow: true,
+          },
+        ]}
+      />
+    );
+
+    await waitFor(() => {
+      expect(capturedProps.getCreationOptions).toBeDefined();
+    });
+
+    const addOptionsListControl = jest.fn();
+    const builder = { addOptionsListControl } as unknown as ControlGroupStateBuilder;
+
+    await capturedProps.getCreationOptions!({} as ControlGroupRuntimeState, builder);
+
+    expect(addOptionsListControl).toHaveBeenCalledTimes(2);
+    const [envCall, regionCall] = addOptionsListControl.mock.calls;
+    expect(envCall[1]).toMatchObject({ field_name: 'service.environment', single_select: true });
+    expect(regionCall[1]).toMatchObject({ field_name: 'cloud.region' });
+    expect(regionCall[1].single_select).toBeUndefined();
+  });
+});

x-pack/solutions/observability/plugins/apm/public/components/app/service_map/service_map_controls.tsx

@@ -68,6 +68,7 @@ export function ServiceMapControls({
           width: config.width,
           grow: config.grow,
           selected_options: initialSelectionsRef.current?.[config.field_name] ?? [],
+          single_select: config.single_select,
         });
       }
       return { initialState: state as ControlGroupRuntimeState };