Skip to content

Commit

Permalink
Implement ScopedHistory.block (#91099) (#92150)
Browse files Browse the repository at this point in the history
* implements ScopedHistory.block

* add FTR tests

* fix test plugin id

* update generated doc

* deprecates AppMountParameters.onAppLeave

* typo fix

* add new FTR test

* fix added test
  • Loading branch information
pgayvallet authored Feb 22, 2021
1 parent 579de12 commit 3c6bdca
Show file tree
Hide file tree
Showing 19 changed files with 598 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Original file line number Diff line number Diff line change
Expand Up @@ -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. |
Expand Down
15 changes: 13 additions & 2 deletions src/core/public/application/application_service.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand Down Expand Up @@ -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 },
Expand All @@ -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
Expand Down Expand Up @@ -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$);

Expand Down
96 changes: 96 additions & 0 deletions src/core/public/application/navigation_confirm.test.ts
Original file line number Diff line number Diff line change
@@ -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();
});
});
62 changes: 62 additions & 0 deletions src/core/public/application/navigation_confirm.ts
Original file line number Diff line number Diff line change
@@ -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);
}
);
};
};
Loading

0 comments on commit 3c6bdca

Please sign in to comment.