Extract store creation to plugin start, add redux providers to alert …

…registration.

x-pack/plugins/uptime/public/apps/plugin.ts

@@ -3,6 +3,8 @@
  * or more contributor license agreements. Licensed under the Elastic License;
  * you may not use this file except in compliance with the Elastic License.
  */
+
+import { Store } from 'redux';
 import { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from 'kibana/public';
 import { AppMountParameters, DEFAULT_APP_CATEGORIES } from '../../../../../src/core/public';
 import { UMFrontendLibs } from '../lib/lib';
@@ -12,6 +14,9 @@ import { HomePublicPluginSetup } from '../../../../../src/plugins/home/public';
 import { EmbeddableStart } from '../../../../../src/plugins/embeddable/public';
 import { TriggersAndActionsUIPublicPluginSetup } from '../../../triggers_actions_ui/public';
 import { DataPublicPluginSetup } from '../../../../../src/plugins/data/public';
+import { alertTypeInitializers } from '../lib/alert_types';
+import { initializeStore } from '../state';
+import { kibanaService } from '../state/kibana_service';
 
 export interface ClientPluginsSetup {
   data: DataPublicPluginSetup;
@@ -24,12 +29,21 @@ export interface ClientPluginsStart {
 }
 
 export class UptimePlugin implements Plugin<void, void, ClientPluginsSetup, ClientPluginsStart> {
-  constructor(_context: PluginInitializerContext) {}
+  private _store: Store<any, any>;
+  private _data: DataPublicPluginSetup | undefined;
+  private _triggersActionsUI: TriggersAndActionsUIPublicPluginSetup | undefined;
+
+  constructor(_context: PluginInitializerContext) {
+    this._store = initializeStore();
+  }
 
   public async setup(
     core: CoreSetup<ClientPluginsStart, unknown>,
     plugins: ClientPluginsSetup
   ): Promise<void> {
+    this._data = plugins.data;
+    this._triggersActionsUI = plugins.triggers_actions_ui;
+
     if (plugins.home) {
       plugins.home.featureCatalogue.register({
         id: PLUGIN.ID,
@@ -42,6 +56,7 @@ export class UptimePlugin implements Plugin<void, void, ClientPluginsSetup, Clie
       });
     }
 
+    const self = this;
     core.application.register({
       appRoute: '/app/uptime#/',
       id: PLUGIN.ID,
@@ -56,16 +71,32 @@ export class UptimePlugin implements Plugin<void, void, ClientPluginsSetup, Clie
         );
 
         const { element } = params;
+
         const libs: UMFrontendLibs = {
-          framework: getKibanaFrameworkAdapter(coreStart, plugins, corePlugins),
+          framework: getKibanaFrameworkAdapter(coreStart, plugins, corePlugins, self._store),
         };
         libs.framework.render(element);
         return () => {};
       },
     });
   }
 
-  public start(_start: CoreStart, _plugins: {}): void {}
+  public start(start: CoreStart, _plugins: {}): void {
+    kibanaService.core = start;
+
+    alertTypeInitializers.forEach(init => {
+      const alertInitializer = init({
+        autocomplete: this._data!.autocomplete,
+        store: this._store,
+      });
+      if (
+        this._triggersActionsUI &&
+        !this._triggersActionsUI.alertTypeRegistry.has(alertInitializer.id)
+      ) {
+        this._triggersActionsUI.alertTypeRegistry.register(alertInitializer);
+      }
+    });
+  }
 
   public stop(): void {}
 }

x-pack/plugins/uptime/public/contexts/uptime_refresh_context.tsx

@@ -5,14 +5,18 @@
  */
 
 import React, { createContext, useMemo, useState } from 'react';
-import { store } from '../state';
+import { Store } from 'redux';
 import { triggerAppRefresh } from '../state/actions';
 
 interface UptimeRefreshContext {
   lastRefresh: number;
   refreshApp: () => void;
 }
 
+interface RefreshContextProps {
+  store: Store<any>;
+}
+
 const defaultContext: UptimeRefreshContext = {
   lastRefresh: 0,
   refreshApp: () => {
@@ -22,19 +26,20 @@ const defaultContext: UptimeRefreshContext = {
 
 export const UptimeRefreshContext = createContext(defaultContext);
 
-export const UptimeRefreshContextProvider: React.FC = ({ children }) => {
+export const UptimeRefreshContextProvider: React.FC<RefreshContextProps> = ({
+  children,
+  store,
+}) => {
   const [lastRefresh, setLastRefresh] = useState<number>(Date.now());
 
-  const refreshApp = () => {
-    const refreshTime = Date.now();
-    setLastRefresh(refreshTime);
-    // @ts-ignore
-    store.dispatch(triggerAppRefresh(refreshTime));
-  };
-
   const value = useMemo(() => {
+    const refreshApp = () => {
+      const refreshTime = Date.now();
+      setLastRefresh(refreshTime);
+      store.dispatch(triggerAppRefresh(refreshTime));
+    };
     return { lastRefresh, refreshApp };
-  }, [lastRefresh]);
+  }, [lastRefresh, store]);
 
   return <UptimeRefreshContext.Provider value={value} children={children} />;
 };

x-pack/plugins/uptime/public/lib/adapters/framework/new_platform_adapter.tsx

@@ -9,7 +9,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { get } from 'lodash';
 import { i18n as i18nFormatter } from '@kbn/i18n';
-import { alertTypeInitializers } from '../../alert_types';
+import { Store } from 'redux';
 import { UptimeApp, UptimeAppProps } from '../../../uptime_app';
 import { getIntegratedAppAvailability } from './capabilities_adapter';
 import {
@@ -20,11 +20,13 @@ import {
 } from '../../../../common/constants';
 import { UMFrameworkAdapter } from '../../lib';
 import { ClientPluginsStart, ClientPluginsSetup } from '../../../apps/plugin';
+import { AppState } from '../../../state';
 
 export const getKibanaFrameworkAdapter = (
   core: CoreStart,
   plugins: ClientPluginsSetup,
-  startPlugins: ClientPluginsStart
+  startPlugins: ClientPluginsStart,
+  store: Store<AppState>
 ): UMFrameworkAdapter => {
   const {
     application: { capabilities },
@@ -34,18 +36,6 @@ export const getKibanaFrameworkAdapter = (
     i18n,
   } = core;
 
-  const {
-    data: { autocomplete },
-    triggers_actions_ui,
-  } = plugins;
-
-  alertTypeInitializers.forEach(init => {
-    const alertInitializer = init({ autocomplete });
-    if (!triggers_actions_ui.alertTypeRegistry.has(alertInitializer.id)) {
-      triggers_actions_ui.alertTypeRegistry.register(init({ autocomplete }));
-    }
-  });
-
   let breadcrumbs: ChromeBreadcrumb[] = [];
   core.chrome.getBreadcrumbs$().subscribe((nextBreadcrumbs?: ChromeBreadcrumb[]) => {
     breadcrumbs = nextBreadcrumbs || [];
@@ -90,6 +80,7 @@ export const getKibanaFrameworkAdapter = (
     routerBasename: basePath.prepend(PLUGIN.ROUTER_BASE_NAME),
     setBadge,
     setBreadcrumbs: core.chrome.setBreadcrumbs,
+    store,
   };
 
   return {

x-pack/plugins/uptime/public/lib/alert_types/index.ts

@@ -4,11 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import { Store } from 'redux';
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { initMonitorStatusAlertType } from './monitor_status';
 import { initTlsAlertType } from './tls';
 
-export type AlertTypeInitializer = (dependenies: { autocomplete: any }) => AlertTypeModel;
+export type AlertTypeInitializer = (dependenies: {
+  autocomplete: any;
+  store: Store<any>;
+}) => AlertTypeModel;
 
 export const alertTypeInitializers: AlertTypeInitializer[] = [
   initMonitorStatusAlertType,

x-pack/plugins/uptime/public/lib/alert_types/monitor_status.tsx

@@ -5,6 +5,7 @@
  */
 
 import { PathReporter } from 'io-ts/lib/PathReporter';
+import { Provider as ReduxProvider } from 'react-redux';
 import React from 'react';
 import DateMath from '@elastic/datemath';
 import { isRight } from 'fp-ts/lib/Either';
@@ -59,12 +60,19 @@ const { defaultActionMessage } = MonitorStatusTranslations;
 
 export const initMonitorStatusAlertType: AlertTypeInitializer = ({
   autocomplete,
+  store,
 }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.MONITOR_STATUS,
-  name: <MonitorStatusTitle />,
+  name: (
+    <ReduxProvider store={store}>
+      <MonitorStatusTitle />
+    </ReduxProvider>
+  ),
   iconClass: 'uptimeApp',
   alertParamsExpression: (params: any) => (
-    <AlertMonitorStatus {...params} autocomplete={autocomplete} />
+    <ReduxProvider store={store}>
+      <AlertMonitorStatus {...params} autocomplete={autocomplete} />
+    </ReduxProvider>
   ),
   validate,
   defaultActionMessage,

x-pack/plugins/uptime/public/lib/alert_types/tls.tsx

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { Provider as ReduxProvider } from 'react-redux';
 import { AlertTypeModel } from '../../../../triggers_actions_ui/public';
 import { CLIENT_ALERT_TYPES } from '../../../common/constants';
 import { TlsTranslations } from './translations';
@@ -13,10 +14,14 @@ import { AlertTls } from '../../components/overview/alerts/alerts_containers/ale
 
 const { name, defaultActionMessage } = TlsTranslations;
 
-export const initTlsAlertType: AlertTypeInitializer = (): AlertTypeModel => ({
+export const initTlsAlertType: AlertTypeInitializer = ({ store }): AlertTypeModel => ({
   id: CLIENT_ALERT_TYPES.TLS,
   iconClass: 'uptimeApp',
-  alertParamsExpression: () => <AlertTls />,
+  alertParamsExpression: () => (
+    <ReduxProvider store={store}>
+      <AlertTls />
+    </ReduxProvider>
+  ),
   name,
   validate: () => ({ errors: {} }),
   defaultActionMessage,

x-pack/plugins/uptime/public/state/index.ts

@@ -9,12 +9,16 @@ import createSagaMiddleware from 'redux-saga';
 import { rootEffect } from './effects';
 import { rootReducer } from './reducers';
 
-const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
+export type AppState = ReturnType<typeof rootReducer>;
 
-const sagaMW = createSagaMiddleware();
+export const initializeStore = () => {
+  const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
 
-export const store = createStore(rootReducer, composeEnhancers(applyMiddleware(sagaMW)));
+  const sagaMW = createSagaMiddleware();
 
-export type AppState = ReturnType<typeof rootReducer>;
+  const store = createStore(rootReducer, composeEnhancers(applyMiddleware(sagaMW)));
+
+  sagaMW.run(rootEffect);
 
-sagaMW.run(rootEffect);
+  return store;
+};

x-pack/plugins/uptime/public/uptime_app.tsx

@@ -10,6 +10,7 @@ import React, { useEffect } from 'react';
 import { Provider as ReduxProvider } from 'react-redux';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { I18nStart, ChromeBreadcrumb, CoreStart } from 'src/core/public';
+import { Store } from 'redux';
 import { KibanaContextProvider } from '../../../../src/plugins/kibana_react/public';
 import { ClientPluginsSetup, ClientPluginsStart } from './apps/plugin';
 import { UMUpdateBadge } from './lib/lib';
@@ -20,14 +21,12 @@ import {
   UptimeStartupPluginsContextProvider,
 } from './contexts';
 import { CommonlyUsedRange } from './components/common/uptime_date_picker';
-import { store } from './state';
 import { setBasePath } from './state/actions';
 import { PageRouter } from './routes';
 import {
   UptimeAlertsContextProvider,
   UptimeAlertsFlyoutWrapper,
 } from './components/overview/alerts';
-import { kibanaService } from './state/kibana_service';
 
 export interface UptimeAppColors {
   danger: string;
@@ -55,6 +54,7 @@ export interface UptimeAppProps {
   renderGlobalHelpControls(): void;
   commonlyUsedRanges: CommonlyUsedRange[];
   setBreadcrumbs: (crumbs: ChromeBreadcrumb[]) => void;
+  store: Store<any>;
 }
 
 const Application = (props: UptimeAppProps) => {
@@ -69,6 +69,7 @@ const Application = (props: UptimeAppProps) => {
     routerBasename,
     setBadge,
     startPlugins,
+    store,
   } = props;
 
   useEffect(() => {
@@ -88,8 +89,6 @@ const Application = (props: UptimeAppProps) => {
     );
   }, [canSave, renderGlobalHelpControls, setBadge]);
 
-  kibanaService.core = core;
-
   store.dispatch(setBasePath(basePath));
 
   return (
@@ -98,7 +97,7 @@ const Application = (props: UptimeAppProps) => {
         <ReduxProvider store={store}>
           <KibanaContextProvider services={{ ...core, ...plugins }}>
             <Router basename={routerBasename}>
-              <UptimeRefreshContextProvider>
+              <UptimeRefreshContextProvider store={store}>
                 <UptimeSettingsContextProvider {...props}>
                   <UptimeThemeContextProvider darkMode={darkMode}>
                     <UptimeStartupPluginsContextProvider {...startPlugins}>