[AO] Refactor observability alert search bar (#147461)

## 📝 Summary

In the previous [PR](#146401),
I've added a provider to pass Kibana dependencies to the observability
alert search bar component. Since then, I had a lot of discussions about
whether it makes sense to have a context for the dependencies of this
component or not. Since we haven't decided yet whether this pattern
should be adopted or not and there are suggestions about having one
provider for the alert-related components, I refactored it to pass the
dependency via props instead.

## 🧪 How to test
Add this component to
[APM](https://github.com/elastic/kibana/blob/main/x-pack/plugins/apm/public/components/app/alerts_overview/index.tsx):

```
// Add
import { ObservabilityAlertSearchBar } from '@kbn/observability-plugin/public';
export const useToasts = () =>
  useKibana<ApmPluginStartDeps>().services.notifications!.toasts;

// Update
  const {
    triggersActionsUi: {
      getAlertsStateTable: AlertsStateTable,
      getAlertsSearchBar: AlertsSearchBar,
      alertsTableConfigurationRegistry,
    },
    data: {
      query: {
        timefilter: { timefilter: timeFilterService },
      },
    },
  } = services;

// Replace
// <AlertsTableStatusFilter
//       status={alertStatusFilter}
//       onChange={setAlertStatusFilter}
//  />
  <ObservabilityAlertSearchBar
    appName={'apmApp'}
    kuery={''}
    onRangeFromChange={(input) => console.log(input)}
    onRangeToChange={(input) => console.log(input)}
    onKueryChange={(input) => console.log(input)}
    onStatusChange={(input) => console.log(input)}
    onEsQueryChange={(input) => console.log(input)}
    rangeTo={'now'}
    rangeFrom={'now-15m'}
    status={'all'}
    services={{ timeFilterService, AlertsSearchBar, useToasts }}
  />

```

x-pack/plugins/observability/public/components/shared/alert_search_bar/alert_search_bar.test.tsx

@@ -8,28 +8,14 @@
 import React from 'react';
 import { waitFor } from '@testing-library/react';
 import { timefilterServiceMock } from '@kbn/data-plugin/public/query/timefilter/timefilter_service.mock';
-import { useServices } from './services';
 import { ObservabilityAlertSearchBarProps } from './types';
 import { ObservabilityAlertSearchBar } from './alert_search_bar';
 import { observabilityAlertFeatureIds } from '../../../config';
 import { render } from '../../../utils/test_helper';
 
-const useServicesMock = useServices as jest.Mock;
 const getAlertsSearchBarMock = jest.fn();
 const ALERT_SEARCH_BAR_DATA_TEST_SUBJ = 'alerts-search-bar';
 
-jest.mock('./services');
-
-const mockServices = () => {
-  useServicesMock.mockReturnValue({
-    timeFilterService: timefilterServiceMock,
-    AlertsSearchBar: getAlertsSearchBarMock.mockReturnValue(
-      <div data-test-subj={ALERT_SEARCH_BAR_DATA_TEST_SUBJ} />
-    ),
-    useToasts: jest.fn(),
-  });
-};
-
 describe('ObservabilityAlertSearchBar', () => {
   const renderComponent = (props: Partial<ObservabilityAlertSearchBarProps> = {}) => {
     const observabilityAlertSearchBarProps: ObservabilityAlertSearchBarProps = {
@@ -43,15 +29,18 @@ describe('ObservabilityAlertSearchBar', () => {
       rangeTo: 'now',
       rangeFrom: 'now-15m',
       status: 'all',
+      services: {
+        timeFilterService: timefilterServiceMock.createStartContract().timefilter,
+        AlertsSearchBar: getAlertsSearchBarMock.mockReturnValue(
+          <div data-test-subj={ALERT_SEARCH_BAR_DATA_TEST_SUBJ} />
+        ),
+        useToasts: jest.fn(),
+      },
       ...props,
     };
     return render(<ObservabilityAlertSearchBar {...observabilityAlertSearchBarProps} />);
   };
 
-  beforeAll(() => {
-    mockServices();
-  });
-
   beforeEach(() => {
     jest.clearAllMocks();
   });

x-pack/plugins/observability/public/components/shared/alert_search_bar/alert_search_bar.tsx

@@ -10,7 +10,6 @@ import React, { useCallback, useEffect } from 'react';
 
 import { i18n } from '@kbn/i18n';
 import { Query } from '@kbn/es-query';
-import { useServices } from './services';
 import { AlertsStatusFilter } from './components';
 import { observabilityAlertFeatureIds } from '../../../config';
 import { ALERT_STATUS_QUERY, DEFAULT_QUERIES, DEFAULT_QUERY_STRING } from './constants';
@@ -35,9 +34,9 @@ export function ObservabilityAlertSearchBar({
   kuery,
   rangeFrom,
   rangeTo,
+  services: { AlertsSearchBar, timeFilterService, useToasts },
   status,
 }: ObservabilityAlertSearchBarProps) {
-  const { AlertsSearchBar, timeFilterService, useToasts } = useServices();
   const toasts = useToasts();
 
   const onAlertStatusChange = useCallback(

x-pack/plugins/observability/public/components/shared/alert_search_bar/alert_search_bar_with_url_sync.tsx

@@ -12,7 +12,6 @@ import {
   useAlertSearchBarStateContainer,
 } from './containers';
 import { ObservabilityAlertSearchBar } from './alert_search_bar';
-import { ObservabilityAlertSearchBarProvider } from './services';
 import { AlertSearchBarWithUrlSyncProps } from './types';
 import { useKibana } from '../../../utils/kibana_react';
 import { ObservabilityAppServices } from '../../../application/types';
@@ -21,16 +20,21 @@ import { useToasts } from '../../../hooks/use_toast';
 function AlertSearchbarWithUrlSync(props: AlertSearchBarWithUrlSyncProps) {
   const { urlStorageKey, ...searchBarProps } = props;
   const stateProps = useAlertSearchBarStateContainer(urlStorageKey);
-  const { data, triggersActionsUi } = useKibana<ObservabilityAppServices>().services;
+  const {
+    data: {
+      query: {
+        timefilter: { timefilter: timeFilterService },
+      },
+    },
+    triggersActionsUi: { getAlertsSearchBar: AlertsSearchBar },
+  } = useKibana<ObservabilityAppServices>().services;
 
   return (
-    <ObservabilityAlertSearchBarProvider
-      data={data}
-      triggersActionsUi={triggersActionsUi}
-      useToasts={useToasts}
-    >
-      <ObservabilityAlertSearchBar {...stateProps} {...searchBarProps} />
-    </ObservabilityAlertSearchBarProvider>
+    <ObservabilityAlertSearchBar
+      {...stateProps}
+      {...searchBarProps}
+      services={{ timeFilterService, AlertsSearchBar, useToasts }}
+    />
   );
 }
 

x-pack/plugins/observability/public/components/shared/alert_search_bar/types.ts

@@ -33,17 +33,18 @@ export interface Dependencies {
   useToasts: () => ToastsStart;
 }
 
-export type ObservabilityAlertSearchBarDependencies = Dependencies;
-
 export interface Services {
   timeFilterService: TimefilterContract;
   AlertsSearchBar: (props: AlertsSearchBarProps) => ReactElement<AlertsSearchBarProps>;
   useToasts: () => ToastsStart;
 }
 
-export type ObservabilityAlertSearchBarProps = AlertSearchBarContainerState &
-  AlertSearchBarStateTransitions &
-  CommonAlertSearchBarProps;
+export interface ObservabilityAlertSearchBarProps
+  extends AlertSearchBarContainerState,
+    AlertSearchBarStateTransitions,
+    CommonAlertSearchBarProps {
+  services: Services;
+}
 
 interface AlertSearchBarContainerState {
   rangeFrom: string;

x-pack/plugins/observability/public/index.ts

@@ -47,7 +47,6 @@ export * from './components/shared/action_menu';
 
 export type { UXMetrics } from './components/shared/core_web_vitals';
 export { DatePickerContextProvider } from './context/date_picker_context';
-export { ObservabilityAlertSearchBarProvider } from './components/shared/alert_search_bar/services';
 
 export {
   getCoreVitalsComponent,