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:
parent
c638cc2a11
commit
ef0935ff45
|
@ -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
|
||||
|
|
|
@ -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'>;
|
||||
```
|
||||
|
|
|
@ -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. |
|
||||
|
|
|
@ -0,0 +1,20 @@
|
|||
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
||||
|
||||
[Home](./index.md) > [kibana-plugin-core-public](./kibana-plugin-core-public.md) > [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. |
|
||||
|
|
@ -0,0 +1,13 @@
|
|||
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
||||
|
||||
[Home](./index.md) > [kibana-plugin-core-public](./kibana-plugin-core-public.md) > [ToastOptions](./kibana-plugin-core-public.toastoptions.md) > [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;
|
||||
```
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -0,0 +1,27 @@
|
|||
<!-- Do not edit this file. It is automatically generated by API Documenter. -->
|
||||
|
||||
[Home](./index.md) > [kibana-plugin-core-public](./kibana-plugin-core-public.md) > [ToastsApi](./kibana-plugin-core-public.toastsapi.md) > [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)
|
||||
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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. |
|
||||
|
||||
|
|
|
@ -168,6 +168,7 @@ export {
|
|||
ToastInputFields,
|
||||
ToastsSetup,
|
||||
ToastsStart,
|
||||
ToastOptions,
|
||||
ErrorToastOptions,
|
||||
} from './notifications';
|
||||
|
||||
|
|
|
@ -19,6 +19,7 @@
|
|||
|
||||
export {
|
||||
ErrorToastOptions,
|
||||
ToastOptions,
|
||||
Toast,
|
||||
ToastInput,
|
||||
IToasts,
|
||||
|
|
|
@ -20,6 +20,7 @@
|
|||
export { ToastsService, ToastsSetup, ToastsStart } from './toasts_service';
|
||||
export {
|
||||
ErrorToastOptions,
|
||||
ToastOptions,
|
||||
ToastsApi,
|
||||
ToastInput,
|
||||
IToasts,
|
||||
|
|
|
@ -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());
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
@ -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(),
|
||||
|
|
|
@ -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)
|
||||
|
|
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
export const toastNotifications = {
|
||||
addInfo: () => {},
|
||||
addSuccess: () => {},
|
||||
addDanger: () => {},
|
||||
addWarning: () => {},
|
||||
|
|
Loading…
Reference in a new issue