[APM] UI filters: Change transaction type selector from dropdown to radio buttons

x-pack/plugins/apm/public/components/app/TransactionOverview/__jest__/TransactionOverview.test.tsx

@@ -4,25 +4,23 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React from 'react';
 import {
+  fireEvent,
+  getByText,
   queryByLabelText,
   render,
-  getByText,
-  getByDisplayValue,
-  queryByDisplayValue,
-  fireEvent,
 } from '@testing-library/react';
 import { omit } from 'lodash';
-import { history } from '../../../../utils/history';
+import React from 'react';
+import { Router } from 'react-router-dom';
 import { TransactionOverview } from '..';
+import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
+import { UrlParamsProvider } from '../../../../context/UrlParamsContext';
 import { IUrlParams } from '../../../../context/UrlParamsContext/types';
-import * as useServiceTransactionTypesHook from '../../../../hooks/useServiceTransactionTypes';
 import * as useFetcherHook from '../../../../hooks/useFetcher';
+import * as useServiceTransactionTypesHook from '../../../../hooks/useServiceTransactionTypes';
+import { history } from '../../../../utils/history';
 import { fromQuery } from '../../../shared/Links/url_helpers';
-import { Router } from 'react-router-dom';
-import { UrlParamsProvider } from '../../../../context/UrlParamsContext';
-import { MockApmPluginContextWrapper } from '../../../../context/ApmPluginContext/MockApmPluginContext';
 
 jest.spyOn(history, 'push');
 jest.spyOn(history, 'replace');
@@ -85,7 +83,7 @@ describe('TransactionOverview', () => {
   const FILTER_BY_TYPE_LABEL = 'Transaction type';
 
   describe('when transactionType is selected and multiple transaction types are given', () => {
-    it('should render dropdown with transaction types', () => {
+    it('should render radio group with transaction types', () => {
       const { container } = setup({
         serviceTransactionTypes: ['firstType', 'secondType'],
         urlParams: {
@@ -94,9 +92,8 @@ describe('TransactionOverview', () => {
         },
       });
 
-      // secondType is selected in the dropdown
-      expect(queryByDisplayValue(container, 'secondType')).not.toBeNull();
-      expect(queryByDisplayValue(container, 'firstType')).toBeNull();
+      expect(getByText(container, 'firstType')).toBeInTheDocument();
+      expect(getByText(container, 'secondType')).toBeInTheDocument();
 
       expect(getByText(container, 'firstType')).not.toBeNull();
     });
@@ -110,22 +107,19 @@ describe('TransactionOverview', () => {
         },
       });
 
-      expect(queryByDisplayValue(container, 'firstType')).toBeNull();
+      expect(history.location.search).toEqual('?transactionType=secondType');
+      expect(getByText(container, 'firstType')).toBeInTheDocument();
+      expect(getByText(container, 'secondType')).toBeInTheDocument();
 
-      fireEvent.change(getByDisplayValue(container, 'secondType'), {
-        target: { value: 'firstType' },
-      });
+      fireEvent.click(getByText(container, 'firstType'));
 
       expect(history.push).toHaveBeenCalled();
-
-      getByDisplayValue(container, 'firstType');
-
-      expect(queryByDisplayValue(container, 'firstType')).not.toBeNull();
+      expect(history.location.search).toEqual('?transactionType=firstType');
     });
   });
 
   describe('when a transaction type is selected, and there are no other transaction types', () => {
-    it('should not render a dropdown with transaction types', () => {
+    it('should not render radio group with transaction types', () => {
       const { container } = setup({
         serviceTransactionTypes: ['firstType'],
         urlParams: {

x-pack/plugins/apm/public/components/shared/LocalUIFilters/TransactionTypeFilter/index.tsx

@@ -9,7 +9,7 @@ import {
   EuiTitle,
   EuiHorizontalRule,
   EuiSpacer,
-  EuiSelect,
+  EuiRadioGroup,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { useUrlParams } from '../../../../hooks/useUrlParams';
@@ -26,8 +26,8 @@ function TransactionTypeFilter({ transactionTypes }: Props) {
   } = useUrlParams();
 
   const options = transactionTypes.map((type) => ({
-    text: type,
-    value: type,
+    id: type,
+    label: type,
   }));
 
   return (
@@ -42,16 +42,15 @@ function TransactionTypeFilter({ transactionTypes }: Props) {
       <EuiSpacer size="s" />
       <EuiHorizontalRule margin="none" />
       <EuiSpacer size="s" />
-      <EuiSelect
+      <EuiRadioGroup
         options={options}
-        value={transactionType}
-        compressed={true}
-        onChange={(event) => {
+        idSelected={transactionType}
+        onChange={(selectedTransactionType) => {
           const newLocation = {
             ...history.location,
             search: fromQuery({
               ...toQuery(history.location.search),
-              transactionType: event.target.value,
+              transactionType: selectedTransactionType,
             }),
           };
           history.push(newLocation);