[Alerting UI] Replaced AlertsContextProvider with KibanaContextProvid…

…er and exposed components in API (#84604)

* [Alerting UI] Replaced AlertsContextProvider with KibanaContextProvider and exposed components in API

* removed AlertContextProvider

* exposed AlertAdd and EditAlert flyouts with triggers_actions_ui plugin start

* fixed type check

* fixed tests

* fixed typechecks

* fixed wrong consumer

* fixed monitoring flyout flickering

* fixed due to comments

* fixed typechecks

* fixed typechecks

* fixed typechecks

* fixed typechecks

* fixed due to comments

x-pack/examples/alerting_example/public/alert_types/always_firing.tsx

@@ -22,7 +22,6 @@ import {
   AlertConditionsGroup,
   AlertTypeModel,
   AlertTypeParamsExpressionProps,
-  AlertsContextValue,
 } from '../../../../plugins/triggers_actions_ui/public';
 import {
   AlwaysFiringParams,
@@ -65,7 +64,7 @@ const DEFAULT_THRESHOLDS: AlwaysFiringParams['thresholds'] = {
 };
 
 export const AlwaysFiringExpression: React.FunctionComponent<
-  AlertTypeParamsExpressionProps<AlwaysFiringParams, AlertsContextValue>
+  AlertTypeParamsExpressionProps<AlwaysFiringParams>
 > = ({ alertParams, setAlertParams, actionGroups, defaultActionGroupId }) => {
   const {
     instances = DEFAULT_INSTANCES_TO_GENERATE,

x-pack/examples/alerting_example/public/components/create_alert.tsx

@@ -4,26 +4,27 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 
 import { EuiIcon, EuiFlexItem, EuiCard, EuiFlexGroup } from '@elastic/eui';
 
-import { AlertsContextProvider, AlertAdd } from '../../../../plugins/triggers_actions_ui/public';
 import { AlertingExampleComponentParams } from '../application';
 import { ALERTING_EXAMPLE_APP_ID } from '../../common/constants';
 
-export const CreateAlert = ({
-  http,
-  triggersActionsUi,
-  charts,
-  uiSettings,
-  docLinks,
-  data,
-  toastNotifications,
-  capabilities,
-}: AlertingExampleComponentParams) => {
+export const CreateAlert = ({ triggersActionsUi }: AlertingExampleComponentParams) => {
   const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
 
+  const AddAlertFlyout = useMemo(
+    () =>
+      triggersActionsUi.getAddAlertFlyout({
+        consumer: ALERTING_EXAMPLE_APP_ID,
+        addFlyoutVisible: alertFlyoutVisible,
+        setAddFlyoutVisibility: setAlertFlyoutVisibility,
+      }),
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [alertFlyoutVisible]
+  );
+
   return (
     <EuiFlexGroup>
       <EuiFlexItem grow={false}>
@@ -34,27 +35,7 @@ export const CreateAlert = ({
           onClick={() => setAlertFlyoutVisibility(true)}
         />
       </EuiFlexItem>
-      <EuiFlexItem>
-        <AlertsContextProvider
-          value={{
-            http,
-            actionTypeRegistry: triggersActionsUi.actionTypeRegistry,
-            alertTypeRegistry: triggersActionsUi.alertTypeRegistry,
-            toastNotifications,
-            uiSettings,
-            docLinks,
-            charts,
-            dataFieldsFormats: data.fieldFormats,
-            capabilities,
-          }}
-        >
-          <AlertAdd
-            consumer={ALERTING_EXAMPLE_APP_ID}
-            addFlyoutVisible={alertFlyoutVisible}
-            setAddFlyoutVisibility={setAlertFlyoutVisibility}
-          />
-        </AlertsContextProvider>
-      </EuiFlexItem>
+      <EuiFlexItem>{AddAlertFlyout}</EuiFlexItem>
     </EuiFlexGroup>
   );
 };

x-pack/plugins/apm/public/application/application.test.tsx

@@ -9,10 +9,12 @@ import { createMemoryHistory } from 'history';
 import { Observable } from 'rxjs';
 import { AppMountParameters, CoreStart, HttpSetup } from 'src/core/public';
 import { mockApmPluginContextValue } from '../context/apm_plugin/mock_apm_plugin_context';
-import { ApmPluginSetupDeps } from '../plugin';
+import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { renderApp } from './';
 import { disableConsoleWarning } from '../utils/testHelpers';
+import { dataPluginMock } from 'src/plugins/data/public/mocks';
+import { embeddablePluginMock } from 'src/plugins/embeddable/public/mocks';
 
 jest.mock('../services/rest/index_pattern', () => ({
   createStaticIndexPattern: () => Promise.resolve(undefined),
@@ -55,6 +57,19 @@ describe('renderApp', () => {
       history: createMemoryHistory(),
       setHeaderActionMenu: () => {},
     };
+
+    const data = dataPluginMock.createStartContract();
+    const embeddable = embeddablePluginMock.createStartContract();
+    const startDeps = {
+      triggersActionsUi: {
+        actionTypeRegistry: {},
+        alertTypeRegistry: {},
+        getAddAlertFlyout: jest.fn(),
+        getEditAlertFlyout: jest.fn(),
+      },
+      data,
+      embeddable,
+    };
     jest.spyOn(window, 'scrollTo').mockReturnValueOnce(undefined);
     createCallApmApi((core.http as unknown) as HttpSetup);
 
@@ -75,7 +90,8 @@ describe('renderApp', () => {
         (core as unknown) as CoreStart,
         (plugins as unknown) as ApmPluginSetupDeps,
         (params as unknown) as AppMountParameters,
-        config
+        config,
+        (startDeps as unknown) as ApmPluginStartDeps
       );
     });
 

x-pack/plugins/apm/public/application/index.tsx

@@ -19,7 +19,6 @@ import {
   RedirectAppLinks,
   useUiSetting$,
 } from '../../../../../src/plugins/kibana_react/public';
-import { AlertsContextProvider } from '../../../triggers_actions_ui/public';
 import { routes } from '../components/app/Main/route_config';
 import { ScrollToTopOnPathChange } from '../components/app/Main/ScrollToTopOnPathChange';
 import {
@@ -29,7 +28,7 @@ import {
 import { LicenseProvider } from '../context/license/license_context';
 import { UrlParamsProvider } from '../context/url_params_context/url_params_context';
 import { useBreadcrumbs } from '../hooks/use_breadcrumbs';
-import { ApmPluginSetupDeps } from '../plugin';
+import { ApmPluginSetupDeps, ApmPluginStartDeps } from '../plugin';
 import { createCallApmApi } from '../services/rest/createCallApmApi';
 import { createStaticIndexPattern } from '../services/rest/index_pattern';
 import { setHelpExtension } from '../setHelpExtension';
@@ -66,38 +65,29 @@ function App() {
 
 export function ApmAppRoot({
   apmPluginContextValue,
+  startDeps,
 }: {
   apmPluginContextValue: ApmPluginContextValue;
+  startDeps: ApmPluginStartDeps;
 }) {
-  const { appMountParameters, core, plugins } = apmPluginContextValue;
+  const { appMountParameters, core } = apmPluginContextValue;
   const { history } = appMountParameters;
   const i18nCore = core.i18n;
 
   return (
     <RedirectAppLinks application={core.application}>
       <ApmPluginContext.Provider value={apmPluginContextValue}>
-        <AlertsContextProvider
-          value={{
-            http: core.http,
-            docLinks: core.docLinks,
-            capabilities: core.application.capabilities,
-            toastNotifications: core.notifications.toasts,
-            actionTypeRegistry: plugins.triggersActionsUi.actionTypeRegistry,
-            alertTypeRegistry: plugins.triggersActionsUi.alertTypeRegistry,
-          }}
-        >
-          <KibanaContextProvider services={{ ...core, ...plugins }}>
-            <i18nCore.Context>
-              <Router history={history}>
-                <UrlParamsProvider>
-                  <LicenseProvider>
-                    <App />
-                  </LicenseProvider>
-                </UrlParamsProvider>
-              </Router>
-            </i18nCore.Context>
-          </KibanaContextProvider>
-        </AlertsContextProvider>
+        <KibanaContextProvider services={{ ...core, ...startDeps }}>
+          <i18nCore.Context>
+            <Router history={history}>
+              <UrlParamsProvider>
+                <LicenseProvider>
+                  <App />
+                </LicenseProvider>
+              </UrlParamsProvider>
+            </Router>
+          </i18nCore.Context>
+        </KibanaContextProvider>
       </ApmPluginContext.Provider>
     </RedirectAppLinks>
   );
@@ -111,7 +101,8 @@ export const renderApp = (
   core: CoreStart,
   setupDeps: ApmPluginSetupDeps,
   appMountParameters: AppMountParameters,
-  config: ConfigSchema
+  config: ConfigSchema,
+  startDeps: ApmPluginStartDeps
 ) => {
   const { element } = appMountParameters;
   const apmPluginContextValue = {
@@ -133,7 +124,10 @@ export const renderApp = (
   });
 
   ReactDOM.render(
-    <ApmAppRoot apmPluginContextValue={apmPluginContextValue} />,
+    <ApmAppRoot
+      apmPluginContextValue={apmPluginContextValue}
+      startDeps={startDeps}
+    />,
     element
   );
   return () => {

x-pack/plugins/apm/public/components/alerting/AlertingFlyout/index.tsx

@@ -3,29 +3,37 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { AlertType } from '../../../../common/alert_types';
-import { AlertAdd } from '../../../../../triggers_actions_ui/public';
-
-type AlertAddProps = React.ComponentProps<typeof AlertAdd>;
+import { TriggersAndActionsUIPublicPluginStart } from '../../../../../triggers_actions_ui/public';
 
 interface Props {
-  addFlyoutVisible: AlertAddProps['addFlyoutVisible'];
-  setAddFlyoutVisibility: AlertAddProps['setAddFlyoutVisibility'];
+  addFlyoutVisible: boolean;
+  setAddFlyoutVisibility: React.Dispatch<React.SetStateAction<boolean>>;
   alertType: AlertType | null;
 }
 
+interface KibanaDeps {
+  triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
+}
+
 export function AlertingFlyout(props: Props) {
   const { addFlyoutVisible, setAddFlyoutVisibility, alertType } = props;
-  return (
-    alertType && (
-      <AlertAdd
-        addFlyoutVisible={addFlyoutVisible}
-        setAddFlyoutVisibility={setAddFlyoutVisibility}
-        consumer="apm"
-        alertTypeId={alertType}
-        canChangeTrigger={false}
-      />
-    )
+  const {
+    services: { triggersActionsUi },
+  } = useKibana<KibanaDeps>();
+  const addAlertFlyout = useMemo(
+    () =>
+      alertType &&
+      triggersActionsUi.getAddAlertFlyout({
+        consumer: 'apm',
+        addFlyoutVisible,
+        setAddFlyoutVisibility,
+        alertTypeId: alertType,
+        canChangeTrigger: false,
+      }),
+    [addFlyoutVisible, alertType, setAddFlyoutVisibility, triggersActionsUi]
   );
+  return <>{addAlertFlyout}</>;
 }

x-pack/plugins/apm/public/plugin.ts

@@ -138,12 +138,18 @@ export class ApmPlugin implements Plugin<ApmPluginSetup, ApmPluginStart> {
 
       async mount(params: AppMountParameters<unknown>) {
         // Load application bundle and Get start services
-        const [{ renderApp }, [coreStart]] = await Promise.all([
+        const [{ renderApp }, [coreStart, corePlugins]] = await Promise.all([
           import('./application'),
           core.getStartServices(),
         ]);
 
-        return renderApp(coreStart, pluginSetupDeps, params, config);
+        return renderApp(
+          coreStart,
+          pluginSetupDeps,
+          params,
+          config,
+          corePlugins as ApmPluginStartDeps
+        );
       },
     });
 

x-pack/plugins/infra/public/alerting/common/components/alert_preview.tsx

@@ -3,7 +3,6 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
-import { HttpSetup } from 'kibana/public';
 import { omit } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
 import {
@@ -20,6 +19,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { i18n } from '@kbn/i18n';
+import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
 import { FORMATTERS } from '../../../../common/formatters';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ValidationResult } from '../../../../../triggers_actions_ui/public/types';
@@ -35,7 +35,6 @@ interface Props {
   alertInterval: string;
   alertThrottle: string;
   alertType: PreviewableAlertTypes;
-  fetch: HttpSetup['fetch'];
   alertParams: { criteria: any[]; sourceId: string } & Record<string, any>;
   validate: (params: any) => ValidationResult;
   showNoDataResults?: boolean;
@@ -47,12 +46,13 @@ export const AlertPreview: React.FC<Props> = (props) => {
     alertParams,
     alertInterval,
     alertThrottle,
-    fetch,
     alertType,
     validate,
     showNoDataResults,
     groupByDisplayName,
   } = props;
+  const { http } = useKibana().services;
+
   const [previewLookbackInterval, setPreviewLookbackInterval] = useState<string>('h');
   const [isPreviewLoading, setIsPreviewLoading] = useState<boolean>(false);
   const [previewError, setPreviewError] = useState<any | false>(false);
@@ -70,7 +70,7 @@ export const AlertPreview: React.FC<Props> = (props) => {
     setPreviewError(false);
     try {
       const result = await getAlertPreview({
-        fetch,
+        fetch: http!.fetch,
         params: {
           ...alertParams,
           lookback: previewLookbackInterval as 'h' | 'd' | 'w' | 'M',
@@ -89,12 +89,12 @@ export const AlertPreview: React.FC<Props> = (props) => {
   }, [
     alertParams,
     alertInterval,
-    fetch,
     alertType,
     groupByDisplayName,
     previewLookbackInterval,
     alertThrottle,
     showNoDataResults,
+    http,
   ]);
 
   const previewIntervalError = useMemo(() => {