Closes #83663 by adding a prepend label to the search bar in service overview (#86143) (#86200)

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

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

@@ -5,10 +5,12 @@
  */
 
 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 { LatencyChart } from '../../shared/charts/latency_chart';
 import { TransactionBreakdownChart } from '../../shared/charts/transaction_breakdown_chart';
@@ -38,10 +40,16 @@ export function ServiceOverview({
   useTrackPageview({ app: 'apm', path: 'service_overview' });
   useTrackPageview({ app: 'apm', path: 'service_overview', delay: 15000 });
 
+  const { transactionType } = useApmServiceContext();
+  const transactionTypeLabel = i18n.translate(
+    'xpack.apm.serviceOverview.searchBar.transactionTypeLabel',
+    { defaultMessage: 'Type: {transactionType}', values: { transactionType } }
+  );
+
   return (
     <AnnotationsContextProvider>
       <ChartPointerEventContextProvider>
-        <SearchBar />
+        <SearchBar prepend={transactionTypeLabel} />
         <EuiPage>
           <EuiFlexGroup direction="column" gutterSize="s">
             <EuiFlexItem>

x-pack/plugins/apm/public/components/shared/KueryBar/Typeahead/index.js

@@ -156,7 +156,13 @@ export class Typeahead extends Component {
   };
 
   render() {
-    const { placeholder } = this.props;
+    const {
+      disabled,
+      isLoading,
+      placeholder,
+      prepend,
+      suggestions,
+    } = this.props;
 
     return (
       <ClickOutside
@@ -175,7 +181,7 @@ export class Typeahead extends Component {
                 this.inputRef = node;
               }
             }}
-            disabled={this.props.disabled}
+            disabled={disabled}
             value={this.state.value}
             onKeyDown={this.onKeyDown}
             onKeyUp={this.onKeyUp}
@@ -183,9 +189,10 @@ export class Typeahead extends Component {
             onClick={this.onClickInput}
             autoComplete="off"
             spellCheck={false}
+            prepend={prepend}
           />
 
-          {this.props.isLoading && (
+          {isLoading && (
             <EuiProgress
               size="xs"
               color="accent"
@@ -200,7 +207,7 @@ export class Typeahead extends Component {
 
         <Suggestions
           show={this.state.isSuggestionsVisible}
-          suggestions={this.props.suggestions}
+          suggestions={suggestions}
           index={this.state.index}
           onClick={this.onClickSuggestion}
           onMouseEnter={this.onMouseEnterSuggestion}
@@ -218,6 +225,7 @@ Typeahead.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   suggestions: PropTypes.array.isRequired,
   placeholder: PropTypes.string.isRequired,
+  prepend: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
 };
 
 Typeahead.defaultProps = {

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

@@ -37,7 +37,7 @@ function convertKueryToEsQuery(kuery: string, indexPattern: IIndexPattern) {
   return esKuery.toElasticsearchQuery(ast, indexPattern);
 }
 
-export function KueryBar() {
+export function KueryBar(props: { prepend?: React.ReactNode | string }) {
   const { groupId, serviceName } = useParams<{
     groupId?: string;
     serviceName?: string;
@@ -152,6 +152,7 @@ export function KueryBar() {
         onSubmit={onSubmit}
         suggestions={state.suggestions}
         placeholder={placeholder}
+        prepend={props.prepend}
       />
     </Container>
   );

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

@@ -15,11 +15,11 @@ const SearchBarFlexGroup = styled(EuiFlexGroup)`
     `${theme.eui.euiSizeM} ${theme.eui.euiSizeM} -${theme.eui.gutterTypes.gutterMedium} ${theme.eui.euiSizeM}`};
 `;
 
-export function SearchBar() {
+export function SearchBar(props: { prepend?: React.ReactNode | string }) {
   return (
     <SearchBarFlexGroup alignItems="flexStart" gutterSize="s">
       <EuiFlexItem grow={3}>
-        <KueryBar />
+        <KueryBar prepend={props.prepend} />
       </EuiFlexItem>
       <EuiFlexItem grow={1}>
         <DatePicker />