[Alerting] fixes broken Alerting Example plugin (elastic#85774)

Author: gmmorris

x-pack/examples/alerting_example/kibana.json

@@ -4,6 +4,7 @@
   "kibanaVersion": "kibana",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["triggersActionsUi", "charts", "data", "alerts", "actions", "features", "developerExamples"],
-  "optionalPlugins": []
+  "requiredPlugins": ["triggersActionsUi", "charts", "data", "alerts", "actions", "kibanaReact", "features", "developerExamples"],
+  "optionalPlugins": [],
+  "requiredBundles": ["kibanaReact"]
 }

x-pack/examples/alerting_example/public/application.tsx

@@ -8,39 +8,27 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, RouteComponentProps } from 'react-router-dom';
 import { EuiPage } from '@elastic/eui';
-import {
-  AppMountParameters,
-  CoreStart,
-  IUiSettingsClient,
-  DocLinksStart,
-  ToastsSetup,
-  ApplicationStart,
-} from '../../../../src/core/public';
-import { DataPublicPluginStart } from '../../../../src/plugins/data/public';
-import { ChartsPluginStart } from '../../../../src/plugins/charts/public';
+import { AppMountParameters, CoreStart } from '../../../../src/core/public';
 
 import { Page } from './components/page';
 import { DocumentationPage } from './components/documentation';
 import { ViewAlertPage } from './components/view_alert';
 import { TriggersAndActionsUIPublicPluginStart } from '../../../plugins/triggers_actions_ui/public';
 import { AlertingExamplePublicStartDeps } from './plugin';
 import { ViewPeopleInSpaceAlertPage } from './components/view_astros_alert';
+import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
 
 export interface AlertingExampleComponentParams {
-  application: CoreStart['application'];
   http: CoreStart['http'];
   basename: string;
   triggersActionsUi: TriggersAndActionsUIPublicPluginStart;
-  data: DataPublicPluginStart;
-  charts: ChartsPluginStart;
-  uiSettings: IUiSettingsClient;
-  docLinks: DocLinksStart;
-  toastNotifications: ToastsSetup;
-  capabilities: ApplicationStart['capabilities'];
 }
 
-const AlertingExampleApp = (deps: AlertingExampleComponentParams) => {
-  const { basename, http } = deps;
+const AlertingExampleApp = ({
+  basename,
+  http,
+  triggersActionsUi,
+}: AlertingExampleComponentParams) => {
   return (
     <Router basename={basename}>
       <EuiPage>
@@ -49,7 +37,7 @@ const AlertingExampleApp = (deps: AlertingExampleComponentParams) => {
           exact={true}
           render={() => (
             <Page title={`Home`} isHome={true}>
-              <DocumentationPage {...deps} />
+              <DocumentationPage triggersActionsUi={triggersActionsUi} />
             </Page>
           )}
         />
@@ -79,21 +67,19 @@ const AlertingExampleApp = (deps: AlertingExampleComponentParams) => {
 };
 
 export const renderApp = (
-  { application, notifications, http, uiSettings, docLinks }: CoreStart,
+  core: CoreStart,
   deps: AlertingExamplePublicStartDeps,
   { appBasePath, element }: AppMountParameters
 ) => {
+  const { http } = core;
   ReactDOM.render(
-    <AlertingExampleApp
-      basename={appBasePath}
-      application={application}
-      toastNotifications={notifications.toasts}
-      http={http}
-      uiSettings={uiSettings}
-      docLinks={docLinks}
-      capabilities={application.capabilities}
-      {...deps}
-    />,
+    <KibanaContextProvider services={{ ...core, ...deps }}>
+      <AlertingExampleApp
+        basename={appBasePath}
+        http={http}
+        triggersActionsUi={deps.triggersActionsUi}
+      />
+    </KibanaContextProvider>,
     element
   );
 

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

@@ -11,7 +11,9 @@ import { EuiIcon, EuiFlexItem, EuiCard, EuiFlexGroup } from '@elastic/eui';
 import { AlertingExampleComponentParams } from '../application';
 import { ALERTING_EXAMPLE_APP_ID } from '../../common/constants';
 
-export const CreateAlert = ({ triggersActionsUi }: AlertingExampleComponentParams) => {
+export const CreateAlert = ({
+  triggersActionsUi,
+}: Pick<AlertingExampleComponentParams, 'triggersActionsUi'>) => {
   const [alertFlyoutVisible, setAlertFlyoutVisibility] = useState<boolean>(false);
 
   const AddAlertFlyout = useMemo(

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

@@ -21,7 +21,9 @@ import {
 import { CreateAlert } from './create_alert';
 import { AlertingExampleComponentParams } from '../application';
 
-export const DocumentationPage = (deps: AlertingExampleComponentParams) => (
+export const DocumentationPage = (
+  deps: Pick<AlertingExampleComponentParams, 'triggersActionsUi'>
+) => (
   <EuiPageBody>
     <EuiPageHeader>
       <EuiPageHeaderSection>