Add addInfo toast to core notifications service (#60574)

* addInfo toast

* md files

* fis types

* Added options to toast methods

* Export ToastOptions

* Export ToastOptions

* added test

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Liza Katz 2020-03-20 06:38:02 +00:00 committed by GitHub
parent c638cc2a11
commit ef0935ff45
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
18 changed files with 145 additions and 21 deletions

View file

@ -4,12 +4,12 @@
## ErrorToastOptions interface
Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) APIs.
Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) error APIs.
<b>Signature:</b>
```typescript
export interface ErrorToastOptions
export interface ErrorToastOptions extends ToastOptions
```
## Properties

View file

@ -9,5 +9,5 @@ Methods for adding and removing global toast messages. See [ToastsApi](./kibana-
<b>Signature:</b>
```typescript
export declare type IToasts = Pick<ToastsApi, 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'>;
export declare type IToasts = Pick<ToastsApi, 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' | 'addInfo'>;
```

View file

@ -57,7 +57,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
| [CoreStart](./kibana-plugin-core-public.corestart.md) | Core services exposed to the <code>Plugin</code> start lifecycle |
| [DocLinksStart](./kibana-plugin-core-public.doclinksstart.md) | |
| [EnvironmentMode](./kibana-plugin-core-public.environmentmode.md) | |
| [ErrorToastOptions](./kibana-plugin-core-public.errortoastoptions.md) | Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) APIs. |
| [ErrorToastOptions](./kibana-plugin-core-public.errortoastoptions.md) | Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) error APIs. |
| [FatalErrorInfo](./kibana-plugin-core-public.fatalerrorinfo.md) | Represents the <code>message</code> and <code>stack</code> of a fatal Error |
| [FatalErrorsSetup](./kibana-plugin-core-public.fatalerrorssetup.md) | FatalErrors stop the Kibana Public Core and displays a fatal error screen with details about the Kibana build and the error. |
| [HttpFetchOptions](./kibana-plugin-core-public.httpfetchoptions.md) | All options that may be used with a [HttpHandler](./kibana-plugin-core-public.httphandler.md)<!-- -->. |
@ -115,6 +115,7 @@ The plugin integrates with the core system via lifecycle events: `setup`<!-- -->
| [SavedObjectsUpdateOptions](./kibana-plugin-core-public.savedobjectsupdateoptions.md) | |
| [StringValidationRegex](./kibana-plugin-core-public.stringvalidationregex.md) | StringValidation with regex object |
| [StringValidationRegexString](./kibana-plugin-core-public.stringvalidationregexstring.md) | StringValidation as regex string |
| [ToastOptions](./kibana-plugin-core-public.toastoptions.md) | Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) APIs. |
| [UiSettingsParams](./kibana-plugin-core-public.uisettingsparams.md) | UiSettings parameters defined by the plugins. |
| [UiSettingsState](./kibana-plugin-core-public.uisettingsstate.md) | |
| [UserProvidedValues](./kibana-plugin-core-public.userprovidedvalues.md) | Describes the values explicitly set by user. |

View file

@ -0,0 +1,20 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ToastOptions](./kibana-plugin-core-public.toastoptions.md)
## ToastOptions interface
Options available for [IToasts](./kibana-plugin-core-public.itoasts.md) APIs.
<b>Signature:</b>
```typescript
export interface ToastOptions
```
## Properties
| Property | Type | Description |
| --- | --- | --- |
| [toastLifeTimeMs](./kibana-plugin-core-public.toastoptions.toastlifetimems.md) | <code>number</code> | How long should the toast remain on screen. |

View file

@ -0,0 +1,13 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ToastOptions](./kibana-plugin-core-public.toastoptions.md) &gt; [toastLifeTimeMs](./kibana-plugin-core-public.toastoptions.toastlifetimems.md)
## ToastOptions.toastLifeTimeMs property
How long should the toast remain on screen.
<b>Signature:</b>
```typescript
toastLifeTimeMs?: number;
```

View file

@ -9,7 +9,7 @@ Adds a new toast pre-configured with the danger color and alert icon.
<b>Signature:</b>
```typescript
addDanger(toastOrTitle: ToastInput): Toast;
addDanger(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
```
## Parameters
@ -17,6 +17,7 @@ addDanger(toastOrTitle: ToastInput): Toast;
| Parameter | Type | Description |
| --- | --- | --- |
| toastOrTitle | <code>ToastInput</code> | a [ToastInput](./kibana-plugin-core-public.toastinput.md) |
| options | <code>ToastOptions</code> | a [ToastOptions](./kibana-plugin-core-public.toastoptions.md) |
<b>Returns:</b>

View file

@ -0,0 +1,27 @@
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
[Home](./index.md) &gt; [kibana-plugin-core-public](./kibana-plugin-core-public.md) &gt; [ToastsApi](./kibana-plugin-core-public.toastsapi.md) &gt; [addInfo](./kibana-plugin-core-public.toastsapi.addinfo.md)
## ToastsApi.addInfo() method
Adds a new toast pre-configured with the info color and info icon.
<b>Signature:</b>
```typescript
addInfo(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
```
## Parameters
| Parameter | Type | Description |
| --- | --- | --- |
| toastOrTitle | <code>ToastInput</code> | a [ToastInput](./kibana-plugin-core-public.toastinput.md) |
| options | <code>ToastOptions</code> | a [ToastOptions](./kibana-plugin-core-public.toastoptions.md) |
<b>Returns:</b>
`Toast`
a [Toast](./kibana-plugin-core-public.toast.md)

View file

@ -9,7 +9,7 @@ Adds a new toast pre-configured with the success color and check icon.
<b>Signature:</b>
```typescript
addSuccess(toastOrTitle: ToastInput): Toast;
addSuccess(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
```
## Parameters
@ -17,6 +17,7 @@ addSuccess(toastOrTitle: ToastInput): Toast;
| Parameter | Type | Description |
| --- | --- | --- |
| toastOrTitle | <code>ToastInput</code> | a [ToastInput](./kibana-plugin-core-public.toastinput.md) |
| options | <code>ToastOptions</code> | a [ToastOptions](./kibana-plugin-core-public.toastoptions.md) |
<b>Returns:</b>

View file

@ -9,7 +9,7 @@ Adds a new toast pre-configured with the warning color and help icon.
<b>Signature:</b>
```typescript
addWarning(toastOrTitle: ToastInput): Toast;
addWarning(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
```
## Parameters
@ -17,6 +17,7 @@ addWarning(toastOrTitle: ToastInput): Toast;
| Parameter | Type | Description |
| --- | --- | --- |
| toastOrTitle | <code>ToastInput</code> | a [ToastInput](./kibana-plugin-core-public.toastinput.md) |
| options | <code>ToastOptions</code> | a [ToastOptions](./kibana-plugin-core-public.toastoptions.md) |
<b>Returns:</b>

View file

@ -23,10 +23,11 @@ export declare class ToastsApi implements IToasts
| Method | Modifiers | Description |
| --- | --- | --- |
| [add(toastOrTitle)](./kibana-plugin-core-public.toastsapi.add.md) | | Adds a new toast to current array of toast. |
| [addDanger(toastOrTitle)](./kibana-plugin-core-public.toastsapi.adddanger.md) | | Adds a new toast pre-configured with the danger color and alert icon. |
| [addDanger(toastOrTitle, options)](./kibana-plugin-core-public.toastsapi.adddanger.md) | | Adds a new toast pre-configured with the danger color and alert icon. |
| [addError(error, options)](./kibana-plugin-core-public.toastsapi.adderror.md) | | Adds a new toast that displays an exception message with a button to open the full stacktrace in a modal. |
| [addSuccess(toastOrTitle)](./kibana-plugin-core-public.toastsapi.addsuccess.md) | | Adds a new toast pre-configured with the success color and check icon. |
| [addWarning(toastOrTitle)](./kibana-plugin-core-public.toastsapi.addwarning.md) | | Adds a new toast pre-configured with the warning color and help icon. |
| [addInfo(toastOrTitle, options)](./kibana-plugin-core-public.toastsapi.addinfo.md) | | Adds a new toast pre-configured with the info color and info icon. |
| [addSuccess(toastOrTitle, options)](./kibana-plugin-core-public.toastsapi.addsuccess.md) | | Adds a new toast pre-configured with the success color and check icon. |
| [addWarning(toastOrTitle, options)](./kibana-plugin-core-public.toastsapi.addwarning.md) | | Adds a new toast pre-configured with the warning color and help icon. |
| [get$()](./kibana-plugin-core-public.toastsapi.get_.md) | | Observable of the toast messages to show to the user. |
| [remove(toastOrId)](./kibana-plugin-core-public.toastsapi.remove.md) | | Removes a toast from the current array of toasts if present. |

View file

@ -168,6 +168,7 @@ export {
ToastInputFields,
ToastsSetup,
ToastsStart,
ToastOptions,
ErrorToastOptions,
} from './notifications';

View file

@ -19,6 +19,7 @@
export {
ErrorToastOptions,
ToastOptions,
Toast,
ToastInput,
IToasts,

View file

@ -20,6 +20,7 @@
export { ToastsService, ToastsSetup, ToastsStart } from './toasts_service';
export {
ErrorToastOptions,
ToastOptions,
ToastsApi,
ToastInput,
IToasts,

View file

@ -146,6 +146,21 @@ describe('#remove()', () => {
});
});
describe('#addInfo()', () => {
it('adds a info toast', async () => {
const toasts = new ToastsApi(toastDeps());
expect(toasts.addInfo({})).toHaveProperty('color', 'primary');
});
it('returns the created toast', async () => {
const toasts = new ToastsApi(toastDeps());
const toast = toasts.addInfo({}, { toastLifeTimeMs: 1 });
const currentToasts = await getCurrentToasts(toasts);
expect(currentToasts[0].toastLifeTimeMs).toBe(1);
expect(currentToasts[0]).toBe(toast);
});
});
describe('#addSuccess()', () => {
it('adds a success toast', async () => {
const toasts = new ToastsApi(toastDeps());

View file

@ -55,7 +55,18 @@ export type ToastInput = string | ToastInputFields;
* Options available for {@link IToasts} APIs.
* @public
*/
export interface ErrorToastOptions {
export interface ToastOptions {
/**
* How long should the toast remain on screen.
*/
toastLifeTimeMs?: number;
}
/**
* Options available for {@link IToasts} error APIs.
* @public
*/
export interface ErrorToastOptions extends ToastOptions {
/**
* The title of the toast and the dialog when expanding the message.
*/
@ -84,7 +95,7 @@ const normalizeToast = (toastOrTitle: ToastInput): ToastInputFields => {
*/
export type IToasts = Pick<
ToastsApi,
'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'
'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' | 'addInfo'
>;
/**
@ -145,17 +156,35 @@ export class ToastsApi implements IToasts {
}
}
/**
* Adds a new toast pre-configured with the info color and info icon.
*
* @param toastOrTitle - a {@link ToastInput}
* @param options - a {@link ToastOptions}
* @returns a {@link Toast}
*/
public addInfo(toastOrTitle: ToastInput, options?: ToastOptions) {
return this.add({
color: 'primary',
iconType: 'iInCircle',
...normalizeToast(toastOrTitle),
...options,
});
}
/**
* Adds a new toast pre-configured with the success color and check icon.
*
* @param toastOrTitle - a {@link ToastInput}
* @param options - a {@link ToastOptions}
* @returns a {@link Toast}
*/
public addSuccess(toastOrTitle: ToastInput) {
public addSuccess(toastOrTitle: ToastInput, options?: ToastOptions) {
return this.add({
color: 'success',
iconType: 'check',
...normalizeToast(toastOrTitle),
...options,
});
}
@ -163,14 +192,16 @@ export class ToastsApi implements IToasts {
* Adds a new toast pre-configured with the warning color and help icon.
*
* @param toastOrTitle - a {@link ToastInput}
* @param options - a {@link ToastOptions}
* @returns a {@link Toast}
*/
public addWarning(toastOrTitle: ToastInput) {
public addWarning(toastOrTitle: ToastInput, options?: ToastOptions) {
return this.add({
color: 'warning',
iconType: 'help',
toastLifeTimeMs: this.uiSettings.get('notifications:lifetime:warning'),
...normalizeToast(toastOrTitle),
...options,
});
}
@ -178,14 +209,16 @@ export class ToastsApi implements IToasts {
* Adds a new toast pre-configured with the danger color and alert icon.
*
* @param toastOrTitle - a {@link ToastInput}
* @param options - a {@link ToastOptions}
* @returns a {@link Toast}
*/
public addDanger(toastOrTitle: ToastInput) {
public addDanger(toastOrTitle: ToastInput, options?: ToastOptions) {
return this.add({
color: 'danger',
iconType: 'alert',
toastLifeTimeMs: this.uiSettings.get('notifications:lifetime:warning'),
...normalizeToast(toastOrTitle),
...options,
});
}
@ -201,7 +234,6 @@ export class ToastsApi implements IToasts {
return this.add({
color: 'danger',
iconType: 'alert',
title: options.title,
toastLifeTimeMs: this.uiSettings.get('notifications:lifetime:error'),
text: mountReactNode(
<ErrorToast
@ -212,6 +244,7 @@ export class ToastsApi implements IToasts {
i18nContext={() => this.i18n!.Context}
/>
),
...options,
});
}

View file

@ -25,6 +25,7 @@ const createToastsApiMock = () => {
get$: jest.fn(() => new Observable()),
add: jest.fn(),
remove: jest.fn(),
addInfo: jest.fn(),
addSuccess: jest.fn(),
addWarning: jest.fn(),
addDanger: jest.fn(),

View file

@ -561,7 +561,7 @@ export interface EnvironmentMode {
}
// @public
export interface ErrorToastOptions {
export interface ErrorToastOptions extends ToastOptions {
title: string;
toastMessage?: string;
}
@ -778,7 +778,7 @@ export interface ImageValidation {
}
// @public
export type IToasts = Pick<ToastsApi, 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError'>;
export type IToasts = Pick<ToastsApi, 'get$' | 'add' | 'remove' | 'addSuccess' | 'addWarning' | 'addDanger' | 'addError' | 'addInfo'>;
// @public
export interface IUiSettingsClient {
@ -1270,16 +1270,22 @@ export type ToastInputFields = Pick<EuiGlobalToastListToast, Exclude<keyof EuiGl
text?: string | MountPoint;
};
// @public
export interface ToastOptions {
toastLifeTimeMs?: number;
}
// @public
export class ToastsApi implements IToasts {
constructor(deps: {
uiSettings: IUiSettingsClient;
});
add(toastOrTitle: ToastInput): Toast;
addDanger(toastOrTitle: ToastInput): Toast;
addDanger(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
addError(error: Error, options: ErrorToastOptions): Toast;
addSuccess(toastOrTitle: ToastInput): Toast;
addWarning(toastOrTitle: ToastInput): Toast;
addInfo(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
addSuccess(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
addWarning(toastOrTitle: ToastInput, options?: ToastOptions): Toast;
get$(): Rx.Observable<Toast[]>;
remove(toastOrId: Toast | string): void;
// @internal (undocumented)

View file

@ -5,6 +5,7 @@
*/
export const toastNotifications = {
addInfo: () => {},
addSuccess: () => {},
addDanger: () => {},
addWarning: () => {},