Implement ScopedHistory.block

docs/development/core/public/kibana-plugin-core-public.appleavehandler.md

@@ -4,6 +4,11 @@
 
 ## AppLeaveHandler type
 
+> Warning: This API is now obsolete.
+> 
+> [AppMountParameters.onAppLeave](./kibana-plugin-core-public.appmountparameters.onappleave.md) has been deprecated in favor of [ScopedHistory.block](./kibana-plugin-core-public.scopedhistory.block.md)
+> 
+
 A handler that will be executed before leaving the application, either when going to another application or when closing the browser tab or manually changing the url. Should return `confirm` to to prompt a message to the user before leaving the page, or `default` to keep the default behavior (doing nothing).
 
 See [AppMountParameters](./kibana-plugin-core-public.appmountparameters.md) for detailed usage examples.

docs/development/core/public/kibana-plugin-core-public.appmountparameters.onappleave.md

@@ -4,6 +4,11 @@
 
 ## AppMountParameters.onAppLeave property
 
+> Warning: This API is now obsolete.
+> 
+> [ScopedHistory.block](./kibana-plugin-core-public.scopedhistory.block.md) should be used instead.
+> 
+
 A function that can be used to register a handler that will be called when the user is leaving the current application, allowing to prompt a confirmation message before actually changing the page.
 
 This will be called either when the user goes to another application, or when trying to close the tab or manually changing the url.

docs/development/core/public/kibana-plugin-core-public.scopedhistory.block.md

@@ -4,15 +4,10 @@
 
 ## ScopedHistory.block property
 
-Not supported. Use [AppMountParameters.onAppLeave](./kibana-plugin-core-public.appmountparameters.onappleave.md)<!-- -->.
+Add a block prompt requesting user confirmation when navigating away from the current page.
 
 <b>Signature:</b>
 
 ```typescript
 block: (prompt?: string | boolean | History.TransitionPromptHook<HistoryLocationState> | undefined) => UnregisterCallback;
 ```
-
-## Remarks
-
-We prefer that applications use the `onAppLeave` API because it supports a more graceful experience that prefers a modal when possible, falling back to a confirm dialog box in the beforeunload case.
-

docs/development/core/public/kibana-plugin-core-public.scopedhistory.md

@@ -27,7 +27,7 @@ export declare class ScopedHistory<HistoryLocationState = unknown> implements Hi
 |  Property | Modifiers | Type | Description |
 |  --- | --- | --- | --- |
 |  [action](./kibana-plugin-core-public.scopedhistory.action.md) |  | <code>Action</code> | The last action dispatched on the history stack. |
-|  [block](./kibana-plugin-core-public.scopedhistory.block.md) |  | <code>(prompt?: string &#124; boolean &#124; History.TransitionPromptHook&lt;HistoryLocationState&gt; &#124; undefined) =&gt; UnregisterCallback</code> | Not supported. Use [AppMountParameters.onAppLeave](./kibana-plugin-core-public.appmountparameters.onappleave.md)<!-- -->. |
+|  [block](./kibana-plugin-core-public.scopedhistory.block.md) |  | <code>(prompt?: string &#124; boolean &#124; History.TransitionPromptHook&lt;HistoryLocationState&gt; &#124; undefined) =&gt; UnregisterCallback</code> | Add a block prompt requesting user confirmation when navigating away from the current page. |
 |  [createHref](./kibana-plugin-core-public.scopedhistory.createhref.md) |  | <code>(location: LocationDescriptorObject&lt;HistoryLocationState&gt;, { prependBasePath }?: {</code><br/><code>        prependBasePath?: boolean &#124; undefined;</code><br/><code>    }) =&gt; Href</code> | Creates an href (string) to the location. If <code>prependBasePath</code> is true (default), it will prepend the location's path with the scoped history basePath. |
 |  [createSubHistory](./kibana-plugin-core-public.scopedhistory.createsubhistory.md) |  | <code>&lt;SubHistoryLocationState = unknown&gt;(basePath: string) =&gt; ScopedHistory&lt;SubHistoryLocationState&gt;</code> | Creates a <code>ScopedHistory</code> for a subpath of this <code>ScopedHistory</code>. Useful for applications that may have sub-apps that do not need access to the containing application's history. |
 |  [go](./kibana-plugin-core-public.scopedhistory.go.md) |  | <code>(n: number) =&gt; void</code> | Send the user forward or backwards in the history stack. |

src/core/public/application/application_service.tsx

@@ -8,7 +8,7 @@
 
 import React from 'react';
 import { BehaviorSubject, Observable, Subject, Subscription } from 'rxjs';
-import { map, shareReplay, takeUntil, distinctUntilChanged, filter } from 'rxjs/operators';
+import { map, shareReplay, takeUntil, distinctUntilChanged, filter, take } from 'rxjs/operators';
 import { createBrowserHistory, History } from 'history';
 
 import { MountPoint } from '../types';
@@ -31,6 +31,7 @@ import {
   NavigateToAppOptions,
 } from './types';
 import { getLeaveAction, isConfirmAction } from './application_leave';
+import { getUserConfirmationHandler } from './navigation_confirm';
 import { appendAppPath, parseAppUrl, relativeToAbsolute, getAppInfo } from './utils';
 
 interface SetupDeps {
@@ -92,6 +93,7 @@ export class ApplicationService {
   private history?: History<any>;
   private navigate?: (url: string, state: unknown, replace: boolean) => void;
   private redirectTo?: (url: string) => void;
+  private overlayStart$ = new Subject<OverlayStart>();
 
   public setup({
     http: { basePath },
@@ -101,7 +103,14 @@ export class ApplicationService {
     history,
   }: SetupDeps): InternalApplicationSetup {
     const basename = basePath.get();
-    this.history = history || createBrowserHistory({ basename });
+    this.history =
+      history ||
+      createBrowserHistory({
+        basename,
+        getUserConfirmation: getUserConfirmationHandler({
+          overlayPromise: this.overlayStart$.pipe(take(1)).toPromise(),
+        }),
+      });
 
     this.navigate = (url, state, replace) => {
       // basePath not needed here because `history` is configured with basename
@@ -173,6 +182,8 @@ export class ApplicationService {
       throw new Error('ApplicationService#setup() must be invoked before start.');
     }
 
+    this.overlayStart$.next(overlays);
+
     const httpLoadingCount$ = new BehaviorSubject(0);
     http.addLoadingCountSource(httpLoadingCount$);
 

src/core/public/application/navigation_confirm.test.ts

@@ -0,0 +1,96 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { OverlayStart } from '../overlays';
+import { overlayServiceMock } from '../overlays/overlay_service.mock';
+import { getUserConfirmationHandler, ConfirmHandler } from './navigation_confirm';
+
+const nextTick = () => new Promise((resolve) => setImmediate(resolve));
+
+describe('getUserConfirmationHandler', () => {
+  let overlayStart: ReturnType<typeof overlayServiceMock.createStartContract>;
+  let overlayPromise: Promise<OverlayStart>;
+  let resolvePromise: Function;
+  let rejectPromise: Function;
+  let fallbackHandler: jest.MockedFunction<ConfirmHandler>;
+  let handler: ConfirmHandler;
+
+  beforeEach(() => {
+    overlayStart = overlayServiceMock.createStartContract();
+    overlayPromise = new Promise((resolve, reject) => {
+      resolvePromise = () => resolve(overlayStart);
+      rejectPromise = () => reject('some error');
+    });
+    fallbackHandler = jest.fn().mockImplementation((message, callback) => {
+      callback(true);
+    });
+
+    handler = getUserConfirmationHandler({
+      overlayPromise,
+      fallbackHandler,
+    });
+  });
+
+  it('uses the fallback handler if the promise is not resolved yet', () => {
+    const callback = jest.fn();
+    handler('foo', callback);
+
+    expect(fallbackHandler).toHaveBeenCalledTimes(1);
+    expect(fallbackHandler).toHaveBeenCalledWith('foo', callback);
+  });
+
+  it('calls the callback with the value returned by the fallback handler', async () => {
+    const callback = jest.fn();
+    handler('foo', callback);
+
+    expect(fallbackHandler).toHaveBeenCalledTimes(1);
+    expect(fallbackHandler).toHaveBeenCalledWith('foo', callback);
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the overlay handler once the promise is resolved', async () => {
+    resolvePromise();
+    await nextTick();
+
+    const callback = jest.fn();
+    handler('foo', callback);
+
+    expect(fallbackHandler).not.toHaveBeenCalled();
+
+    expect(overlayStart.openConfirm).toHaveBeenCalledTimes(1);
+    expect(overlayStart.openConfirm).toHaveBeenCalledWith('foo', expect.any(Object));
+  });
+
+  it('calls the callback with the value returned by `openConfirm`', async () => {
+    overlayStart.openConfirm.mockResolvedValue(true);
+
+    resolvePromise();
+    await nextTick();
+
+    const callback = jest.fn();
+    handler('foo', callback);
+
+    await nextTick();
+
+    expect(callback).toHaveBeenCalledTimes(1);
+    expect(callback).toHaveBeenCalledWith(true);
+  });
+
+  it('uses the fallback handler if the promise rejects', async () => {
+    rejectPromise();
+    await nextTick();
+
+    const callback = jest.fn();
+    handler('foo', callback);
+
+    expect(fallbackHandler).toHaveBeenCalledTimes(1);
+    expect(overlayStart.openConfirm).not.toHaveBeenCalled();
+  });
+});

src/core/public/application/navigation_confirm.ts

@@ -0,0 +1,62 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { OverlayStart } from 'kibana/public';
+
+export type ConfirmHandlerCallback = (result: boolean) => void;
+export type ConfirmHandler = (message: string, callback: ConfirmHandlerCallback) => void;
+
+interface GetUserConfirmationHandlerParams {
+  overlayPromise: Promise<OverlayStart>;
+  fallbackHandler?: ConfirmHandler;
+}
+
+export const getUserConfirmationHandler = ({
+  overlayPromise,
+  fallbackHandler = windowConfirm,
+}: GetUserConfirmationHandlerParams): ConfirmHandler => {
+  let overlayConfirm: ConfirmHandler;
+
+  overlayPromise.then(
+    (overlay) => {
+      overlayConfirm = getOverlayConfirmHandler(overlay);
+    },
+    () => {
+      // should never append, but even if it does, we don't need to do anything,
+      // and will just use the default window confirm instead
+    }
+  );
+
+  return (message: string, callback: ConfirmHandlerCallback) => {
+    if (overlayConfirm) {
+      overlayConfirm(message, callback);
+    } else {
+      fallbackHandler(message, callback);
+    }
+  };
+};
+
+const windowConfirm: ConfirmHandler = (message: string, callback: ConfirmHandlerCallback) => {
+  const confirmed = window.confirm(message);
+  callback(confirmed);
+};
+
+const getOverlayConfirmHandler = (overlay: OverlayStart): ConfirmHandler => {
+  return (message: string, callback: ConfirmHandlerCallback) => {
+    overlay
+      .openConfirm(message, { title: ' ', 'data-test-subj': 'navigationBlockConfirmModal' })
+      .then(
+        (confirmed) => {
+          callback(confirmed);
+        },
+        () => {
+          callback(false);
+        }
+      );
+  };
+};