use path navigartion in place of state

Author: gmmorris

examples/alerting_example/public/application.tsx

@@ -20,16 +20,8 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import { BrowserRouter as Router, Route, withRouter, RouteComponentProps } from 'react-router-dom';
-
-import {
-  EuiPage,
-  EuiPageSideBar,
-  // @ts-ignore
-  EuiSideNav,
-} from '@elastic/eui';
-
-import { JsonObject } from '../../../src/plugins/kibana_utils/common';
-import { AppMountParameters, CoreStart, ScopedHistory } from '../../../src/core/public';
+import { EuiPage, EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { AppMountParameters, CoreStart } from '../../../src/core/public';
 import { Page } from './page';
 import { DocumentationPage } from './documentation';
 import { CreateAlertPage } from './create_alert';
@@ -66,22 +58,13 @@ const Nav = withRouter(({ history, pages }: NavProps) => {
   );
 });
 
-export interface NavState {
-  alert: JsonObject;
-  alertType: JsonObject;
-}
 export interface AlertingExampleComponentParams {
   application: CoreStart['application'];
   http: CoreStart['http'];
-  history: ScopedHistory<NavState>;
   basename: string;
 }
 
-const Home = withRouter(({ history }) => {
-  return history.location.state ? <ViewAlertPage /> : <DocumentationPage />;
-});
-
-const AlertingExampleApp = ({ basename, http, history }: AlertingExampleComponentParams) => {
+const AlertingExampleApp = ({ basename, http }: AlertingExampleComponentParams) => {
   const pages: PageDef[] = [
     {
       id: 'home',
@@ -93,20 +76,13 @@ const AlertingExampleApp = ({ basename, http, history }: AlertingExampleComponen
       title: 'Create',
       component: <CreateAlertPage http={http} />,
     },
-    {
-      id: 'view',
-      title: 'View Alert',
-      component: <ViewAlertPage />,
-    },
   ];
 
   const routes = pages.map((page, i) => (
     <Route
       key={i}
       path={`/${page.id}`}
-      render={props => {
-        return <Page title={page.title}>{page.component}</Page>;
-      }}
+      render={() => <Page title={page.title}>{page.component}</Page>}
     />
   ));
 
@@ -116,7 +92,17 @@ const AlertingExampleApp = ({ basename, http, history }: AlertingExampleComponen
         <EuiPageSideBar>
           <Nav pages={pages} />
         </EuiPageSideBar>
-        <Route path="/" exact component={Home} />
+        <Route path="/" exact render={DocumentationPage} />
+        <Route
+          path={`/alert/:id`}
+          render={(props: RouteComponentProps<{ id: string }>) => {
+            return (
+              <Page title={`View Alert ${props.match.params.id}`}>
+                <ViewAlertPage http={http} id={props.match.params.id} />
+              </Page>
+            );
+          }}
+        />
         {routes}
       </EuiPage>
     </Router>
@@ -126,12 +112,11 @@ const AlertingExampleApp = ({ basename, http, history }: AlertingExampleComponen
 export const renderApp = (
   coreStart: CoreStart,
   deps: any,
-  { appBasePath, element, history }: AppMountParameters<NavState>
+  { appBasePath, element }: AppMountParameters
 ) => {
   ReactDOM.render(
     <AlertingExampleApp
       basename={appBasePath}
-      history={history}
       application={coreStart.application}
       http={coreStart.http}
     />,

examples/alerting_example/public/documentation.tsx

@@ -31,7 +31,7 @@ import {
 } from '@elastic/eui';
 
 export const DocumentationPage = () => (
-  <EuiPageBody data-test-subj="dataPluginExplorerHome">
+  <EuiPageBody>
     <EuiPageHeader>
       <EuiPageHeaderSection>
         <EuiTitle size="l">

examples/alerting_example/public/plugin.tsx

@@ -18,7 +18,6 @@
  */
 
 import { Plugin, CoreSetup, AppMountParameters } from 'kibana/public';
-import { NavState } from './application';
 import { PluginSetupContract as AlertingSetup } from '../../../x-pack/plugins/alerting/public';
 import { ALERTING_EXAMPLE_APP_ID } from '../common/constants';
 import { AlertType, SanitizedAlert } from '../../../x-pack/plugins/alerting/common';
@@ -35,7 +34,7 @@ export class AlertingExamplePlugin implements Plugin<Setup, Start, AlertingExamp
     core.application.register({
       id: 'AlertingExample',
       title: 'Alerting Example',
-      async mount(params: AppMountParameters<NavState>) {
+      async mount(params: AppMountParameters) {
         const [coreStart, depsStart] = await core.getStartServices();
         const { renderApp } = await import('./application');
         return renderApp(coreStart, depsStart, params);
@@ -45,13 +44,7 @@ export class AlertingExamplePlugin implements Plugin<Setup, Start, AlertingExamp
     alerting.registerNavigation(
       ALERTING_EXAMPLE_APP_ID,
       '.alerting-example',
-      (alert: SanitizedAlert, alertType: AlertType) => ({
-        state: {
-          // LOLs
-          alert: JSON.parse(JSON.stringify(alert)),
-          alertType: JSON.parse(JSON.stringify(alertType)),
-        },
-      })
+      (alert: SanitizedAlert, alertType: AlertType) => `/alert/${alert.id}`
     );
   }
 

examples/alerting_example/public/view_alert.tsx

@@ -16,48 +16,37 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 
-import {
-  EuiText,
-  EuiPageBody,
-  EuiPageContent,
-  EuiPageContentBody,
-  EuiPageContentHeader,
-  EuiPageContentHeaderSection,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
-import { withRouter } from 'react-router-dom';
+import { EuiText, EuiLoadingKibana } from '@elastic/eui';
+import { withRouter, RouteComponentProps } from 'react-router-dom';
+import { CoreStart } from 'kibana/public';
+import { Alert, AlertTaskState } from '../../../x-pack/plugins/alerting/common';
 
-export const ViewAlertPage = withRouter(({ history }) => (
-  <EuiPageBody data-test-subj="dataPluginExplorerHome">
-    <EuiPageHeader>
-      <EuiPageHeaderSection>
-        <EuiTitle size="l">
-          <h1>Welcome to the Alerting plugin example</h1>
-        </EuiTitle>
-      </EuiPageHeaderSection>
-    </EuiPageHeader>
-    <EuiPageContent>
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
-          <EuiTitle>
-            <h2>Documentation links</h2>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
-      <EuiPageContentBody>
-        <EuiText>
-          <h2>Plugin Structure</h2>
-          <p>
-            This example solution has both `server` and a `public` plugins. The `server` handles
-            registration of the AlertType, while the `public` handles registration of the
-            navigation.
-          </p>
-        </EuiText>
-      </EuiPageContentBody>
-    </EuiPageContent>
-  </EuiPageBody>
-));
+type Props = RouteComponentProps & {
+  http: CoreStart['http'];
+  id: string;
+};
+export const ViewAlertPage = withRouter(({ http, id }: Props) => {
+  const [alert, setAlert] = useState<Alert | null>(null);
+  const [alertState, setAlertState] = useState<AlertTaskState | null>(null);
+
+  useEffect(() => {
+    if (!alert) {
+      http.get(`/api/alert/${id}`).then(setAlert);
+    }
+    if (!alertState) {
+      http.get(`/api/alert/${id}/state`).then(setAlertState);
+    }
+  }, [alert, alertState, http, id]);
+
+  return alert && alertState ? (
+    <EuiText>
+      <h2>Alert JSON</h2>
+      <p>{JSON.stringify(alert)}</p>
+      <p>{JSON.stringify(alertState)}</p>
+    </EuiText>
+  ) : (
+    <EuiLoadingKibana size="xl" />
+  );
+});

x-pack/plugins/alerting/common/alert_navigation.ts

@@ -6,7 +6,7 @@
 
 import { JsonObject } from '../../infra/common/typed_json';
 export interface AlertUrlNavigation {
-  url: string;
+  path: string;
 }
 export interface AlertStateNavigation {
   state: JsonObject;

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

@@ -48,7 +48,7 @@ export class AlertingPublicPlugin implements Plugin<PluginSetupContract, PluginS
         if (this.alertNavigationRegistry!.has(alert.consumer, alertType)) {
           const navigationHandler = this.alertNavigationRegistry!.get(alert.consumer, alertType);
           const state = navigationHandler(alert, alertType);
-          return typeof state === 'string' ? { url: state } : { state };
+          return typeof state === 'string' ? { path: state } : { state };
         }
       },
     };

x-pack/plugins/triggers_actions_ui/public/application/sections/alert_details/components/view_in_app.tsx

@@ -21,9 +21,9 @@ interface ViewInAppProps {
   alert: Alert;
 }
 
-const NO_NAVIGATION = 'NO_NAVIGATION';
+const NO_NAVIGATION = false;
 
-type AlertNavigationLoadingState = AlertNavigation | 'NO_NAVIGATION' | null;
+type AlertNavigationLoadingState = AlertNavigation | false | null;
 
 export const ViewInApp: React.FunctionComponent<ViewInAppProps> = ({ alert }) => {
   const { navigateToApp, alerting } = useAppDependencies();
@@ -53,36 +53,24 @@ export const ViewInApp: React.FunctionComponent<ViewInAppProps> = ({ alert }) =>
   );
 };
 
-function hasNavigation(alertNavigation: AlertNavigationLoadingState) {
-  return hasNavigationState(alertNavigation) || hasNavigationUrl(alertNavigation);
-}
-
-function hasNavigationState(
-  alertNavigation: AlertNavigationLoadingState
-): alertNavigation is AlertStateNavigation {
-  return alertNavigation ? alertNavigation.hasOwnProperty('state') : false;
-}
-
-function hasNavigationUrl(
+function hasNavigation(
   alertNavigation: AlertNavigationLoadingState
-): alertNavigation is AlertUrlNavigation {
-  return alertNavigation ? alertNavigation.hasOwnProperty('url') : false;
+): alertNavigation is AlertStateNavigation | AlertUrlNavigation {
+  return alertNavigation
+    ? alertNavigation.hasOwnProperty('state') || alertNavigation.hasOwnProperty('path')
+    : NO_NAVIGATION;
 }
 
 function getNavigationHandler(
   alertNavigation: AlertNavigationLoadingState,
   alert: Alert,
   navigateToApp: CoreStart['application']['navigateToApp']
 ): object {
-  if (hasNavigationState(alertNavigation)) {
-    return {
-      onClick: () => {
-        navigateToApp(alert.consumer, { state: alertNavigation.state });
-      },
-    };
-  }
-  if (hasNavigationUrl(alertNavigation)) {
-    return { href: alertNavigation.url };
-  }
-  return {};
+  return hasNavigation(alertNavigation)
+    ? {
+        onClick: () => {
+          navigateToApp(alert.consumer, alertNavigation);
+        },
+      }
+    : {};
 }

x-pack/test/functional_with_es_ssl/fixtures/plugins/alerts/public/plugin.tsx

@@ -18,15 +18,9 @@ export interface AlertingExamplePublicSetupDeps {
 export class AlertingFixturePlugin implements Plugin<Setup, Start, AlertingExamplePublicSetupDeps> {
   public setup(core: CoreSetup, { alerting }: AlertingExamplePublicSetupDeps) {
     alerting.registerNavigation(
-      'test.noop',
       'consumer.noop',
-      (alert: SanitizedAlert, alertType: AlertType) => ({
-        state: {
-          // LOLs
-          alert: JSON.parse(JSON.stringify(alert)),
-          alertType: JSON.parse(JSON.stringify(alertType)),
-        },
-      })
+      'test.noop',
+      (alert: SanitizedAlert, alertType: AlertType) => `/alert/${alert.id}`
     );
   }