[APM] Moves the transaction type selector to the search bar (#96685)

* [APM] Moves the Transaction type selector to the search bar (#91131)

* - Replaces the prepend label on the search bar with the transaction type selector
- Adds the transaction type selector to the service overview page
- Removes title from the Transactions list page

* removes unused i18n items

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/apm/public/components/app/service_overview/index.tsx

@@ -6,12 +6,10 @@
  */
 
 import { EuiFlexGroup, EuiFlexItem, EuiPage, EuiPanel } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useTrackPageview } from '../../../../../observability/public';
 import { isRumAgentName } from '../../../../common/agent_name';
 import { AnnotationsContextProvider } from '../../../context/annotations/annotations_context';
-import { useApmServiceContext } from '../../../context/apm_service/use_apm_service_context';
 import { ChartPointerEventContextProvider } from '../../../context/chart_pointer_event/chart_pointer_event_context';
 import { useBreakPoints } from '../../../hooks/use_break_points';
 import { LatencyChart } from '../../shared/charts/latency_chart';
@@ -46,22 +44,12 @@ export function ServiceOverview({
   // observe the window width and set the flex directions of rows accordingly
   const { isMedium } = useBreakPoints();
   const rowDirection = isMedium ? 'column' : 'row';
-
-  const { transactionType } = useApmServiceContext();
-  const transactionTypeLabel = i18n.translate(
-    'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
-    { defaultMessage: 'Type: {transactionType}', values: { transactionType } }
-  );
   const isRumAgent = isRumAgentName(agentName);
 
   return (
     <AnnotationsContextProvider>
       <ChartPointerEventContextProvider>
-        <SearchBar
+        <SearchBar showTransactionTypeSelector showTimeComparison />
-          prepend={transactionTypeLabel}
-          showCorrelations
-          showTimeComparison
-        />
         <EuiPage>
           <EuiFlexGroup direction="column" gutterSize="s">
             <EuiFlexItem>

x-pack/plugins/apm/public/components/app/trace_overview/index.tsx

@@ -49,7 +49,7 @@ export function TraceOverview() {
 
   return (
     <>
-      <SearchBar showCorrelations />
+      <SearchBar />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
           <EuiPanel>

x-pack/plugins/apm/public/components/app/transaction_details/index.tsx

@@ -95,7 +95,7 @@ export function TransactionDetails({
           <h1>{transactionName}</h1>
         </EuiTitle>
       </ApmHeader>
-      <SearchBar showCorrelations />
+      <SearchBar />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
           <ChartPointerEventContextProvider>

x-pack/plugins/apm/public/components/app/transaction_overview/index.tsx

@@ -9,7 +9,6 @@ import {
   EuiCallOut,
   EuiCode,
   EuiFlexGroup,
-  EuiFlexItem,
   EuiPage,
   EuiPanel,
   EuiSpacer,
@@ -28,7 +27,6 @@ import { TransactionCharts } from '../../shared/charts/transaction_charts';
 import { ElasticDocsLink } from '../../shared/Links/ElasticDocsLink';
 import { fromQuery, toQuery } from '../../shared/Links/url_helpers';
 import { SearchBar } from '../../shared/search_bar';
-import { TransactionTypeSelect } from '../../shared/transaction_type_select';
 import { TransactionList } from './TransactionList';
 import { useRedirect } from './useRedirect';
 import { useTransactionListFetcher } from './use_transaction_list';
@@ -82,33 +80,9 @@ export function TransactionOverview({ serviceName }: TransactionOverviewProps) {
 
   return (
     <>
-      <SearchBar showCorrelations />
+      <SearchBar showTransactionTypeSelector />
       <EuiPage>
         <EuiFlexGroup direction="column" gutterSize="s">
-          <EuiSpacer size="s" />
-          <EuiFlexGroup justifyContent="spaceBetween">
-            <EuiFlexItem grow={false}>
-              <EuiFlexGroup
-                alignItems="center"
-                gutterSize="s"
-                responsive={false}
-              >
-                <EuiFlexItem>
-                  <EuiTitle size="s">
-                    <h2>
-                      {i18n.translate('xpack.apm.transactionOverviewTitle', {
-                        defaultMessage: 'Transactions',
-                      })}
-                    </h2>
-                  </EuiTitle>
-                </EuiFlexItem>
-                <EuiFlexItem grow={2}>
-                  <TransactionTypeSelect />
-                </EuiFlexItem>
-              </EuiFlexGroup>
-              <EuiSpacer size="m" />
-            </EuiFlexItem>
-          </EuiFlexGroup>
           <TransactionCharts />
           <EuiSpacer size="s" />
           <EuiPanel>

x-pack/plugins/apm/public/components/shared/search_bar.tsx

@@ -20,6 +20,7 @@ import { TimeComparison } from './time_comparison';
 import { useBreakPoints } from '../../hooks/use_break_points';
 import { useKibanaUrl } from '../../hooks/useKibanaUrl';
 import { useApmPluginContext } from '../../context/apm_plugin/use_apm_plugin_context';
+import { TransactionTypeSelect } from './transaction_type_select';
 
 const EuiFlexGroupSpaced = euiStyled(EuiFlexGroup)`
   margin: ${({ theme }) =>
@@ -29,7 +30,7 @@ const EuiFlexGroupSpaced = euiStyled(EuiFlexGroup)`
 interface Props {
   prepend?: React.ReactNode | string;
   showTimeComparison?: boolean;
-  showCorrelations?: boolean;
+  showTransactionTypeSelector?: boolean;
 }
 
 function getRowDirection(showColumn: boolean) {
@@ -85,7 +86,7 @@ function DebugQueryCallout() {
 export function SearchBar({
   prepend,
   showTimeComparison = false,
-  showCorrelations = false,
+  showTransactionTypeSelector = false,
 }: Props) {
   const { isMedium, isLarge } = useBreakPoints();
   const itemsStyle = { marginBottom: isLarge ? px(unit) : 0 };
@@ -94,8 +95,13 @@ export function SearchBar({
     <>
       <DebugQueryCallout />
       <EuiFlexGroupSpaced gutterSize="m" direction={getRowDirection(isLarge)}>
+        {showTransactionTypeSelector && (
+          <EuiFlexItem grow={false}>
+            <TransactionTypeSelect />
+          </EuiFlexItem>
+        )}
         <EuiFlexItem>
-          <KueryBar prepend={prepend} />
+          <KueryBar />
         </EuiFlexItem>
         <EuiFlexItem grow={false}>
           <EuiFlexGroup

x-pack/plugins/translations/translations/ja-JP.json

@@ -5466,7 +5466,6 @@
     "xpack.apm.serviceOverview.mlNudgeMessage.content": "APM の異常検知統合で、異常なトランザクションを特定し、アップストリームおよびダウンストリームサービスの正常性を確認します。わずか数分で開始できます。",
     "xpack.apm.serviceOverview.mlNudgeMessage.dismissButton": "閉じる",
     "xpack.apm.serviceOverview.mlNudgeMessage.learnMoreButton": "使ってみる",
-    "xpack.apm.serviceOverview.searchBar.transactionTypeLabel": "タイプ：{transactionType}",
     "xpack.apm.serviceOverview.throughtputChartTitle": "スループット",
     "xpack.apm.serviceOverview.transactionsTableColumnErrorRate": "エラー率",
     "xpack.apm.serviceOverview.transactionsTableColumnImpact": "インパクト",
@@ -5666,7 +5665,6 @@
     "xpack.apm.transactionDurationLabel": "期間",
     "xpack.apm.transactionErrorRateAlert.name": "トランザクションエラー率しきい値",
     "xpack.apm.transactionErrorRateAlertTrigger.isAbove": "より大きい",
-    "xpack.apm.transactionOverviewTitle": "トランザクション",
     "xpack.apm.transactionRateLabel": "{value} tpm",
     "xpack.apm.transactions.latency.chart.95thPercentileLabel": "95 パーセンタイル",
     "xpack.apm.transactions.latency.chart.99thPercentileLabel": "99 パーセンタイル",

x-pack/plugins/translations/translations/zh-CN.json

@@ -5500,7 +5500,6 @@
     "xpack.apm.serviceOverview.mlNudgeMessage.content": "通过 APM 的异常检测集成来查明异常事务，并了解上下游服务的运行状况。只需几分钟即可开始使用。",
     "xpack.apm.serviceOverview.mlNudgeMessage.dismissButton": "关闭",
     "xpack.apm.serviceOverview.mlNudgeMessage.learnMoreButton": "开始使用",
-    "xpack.apm.serviceOverview.searchBar.transactionTypeLabel": "类型：{transactionType}",
     "xpack.apm.serviceOverview.throughtputChartTitle": "吞吐量",
     "xpack.apm.serviceOverview.transactionsTableColumnErrorRate": "错误率",
     "xpack.apm.serviceOverview.transactionsTableColumnImpact": "影响",
@@ -5705,7 +5704,6 @@
     "xpack.apm.transactionDurationLabel": "持续时间",
     "xpack.apm.transactionErrorRateAlert.name": "事务错误率阈值",
     "xpack.apm.transactionErrorRateAlertTrigger.isAbove": "高于",
-    "xpack.apm.transactionOverviewTitle": "事务",
     "xpack.apm.transactionRateLabel": "{value} tpm",
     "xpack.apm.transactions.latency.chart.95thPercentileLabel": "第 95 个百分位",
     "xpack.apm.transactions.latency.chart.99thPercentileLabel": "第 99 个百分位",