diff --git a/packages/eui/changelogs/upcoming/7820.md b/packages/eui/changelogs/upcoming/7820.md new file mode 100644 index 00000000000..9198600ece9 --- /dev/null +++ b/packages/eui/changelogs/upcoming/7820.md @@ -0,0 +1 @@ +- Updated `setEuiDevProviderWarning` to additionally accept a custom callback function, which warning messages will be passed to diff --git a/packages/eui/src-docs/src/views/provider/provider_example.js b/packages/eui/src-docs/src/views/provider/provider_example.js index cd7e33ba3ee..0808935cb91 100644 --- a/packages/eui/src-docs/src/views/provider/provider_example.js +++ b/packages/eui/src-docs/src/views/provider/provider_example.js @@ -15,7 +15,7 @@ import { GuideSectionPropsTable } from '../../components/guide_section/guide_sec import Setup from './provider_setup'; import GlobalStyles from './provider_styles'; -import Warnings from './provider_warning'; +import Warnings, { CallbackExample } from './provider_warning'; import { EuiComponentDefaultsProps, euiProviderComponentDefaultsSnippet, @@ -237,8 +237,7 @@ export const ProviderExample = {

- setEuiDevProviderWarning - accepts three levels: + setEuiDevProviderWarning accepts three levels:

+ +

+ It also accepts a callback function instead of a default warning + level. The warning message string will be passed to your callback, + where any custom action can be performed on it. Example usage: +

+ ), }, diff --git a/packages/eui/src-docs/src/views/provider/provider_warning.tsx b/packages/eui/src-docs/src/views/provider/provider_warning.tsx index 3d5b1fc5dc3..debd683eb55 100644 --- a/packages/eui/src-docs/src/views/provider/provider_warning.tsx +++ b/packages/eui/src-docs/src/views/provider/provider_warning.tsx @@ -35,3 +35,16 @@ const AppWithDuplicateProvider = () => ( ); }; + +export const CallbackExample = () => ( + + {`import { setEuiDevProviderWarning } from '@elastic/eui'; + +const customWarningHandler = (message: string) => { + sendWarningToTelemetryService(message); + console.debug(message); +}; + +setEuiDevProviderWarning(customWarningHandler);`} + +); diff --git a/packages/eui/src/services/theme/warning.test.ts b/packages/eui/src/services/theme/warning.test.ts index 46a7bb13bc3..e83e57acb64 100644 --- a/packages/eui/src/services/theme/warning.test.ts +++ b/packages/eui/src/services/theme/warning.test.ts @@ -80,5 +80,18 @@ describe('EUI provider dev warnings', () => { expect(consoleLogSpy).not.toHaveBeenCalled(); expect(consoleWarnSpy).not.toHaveBeenCalled(); }); + + it('passes messages to callback functions', () => { + const devCallback = jest.fn(); + setEuiDevProviderWarning(devCallback); + + emitEuiProviderWarning(providerMessage); + + expect(devCallback).toHaveBeenCalledWith('hello world'); + expect(devCallback).toHaveBeenCalledTimes(1); + + expect(consoleLogSpy).not.toHaveBeenCalled(); + expect(consoleWarnSpy).not.toHaveBeenCalled(); + }); }); }); diff --git a/packages/eui/src/services/theme/warning.ts b/packages/eui/src/services/theme/warning.ts index f4d2ac7f9b5..bcff37ed4ac 100644 --- a/packages/eui/src/services/theme/warning.ts +++ b/packages/eui/src/services/theme/warning.ts @@ -7,16 +7,22 @@ */ type LEVELS = 'log' | 'warn' | 'error'; +type ProviderCallback = (message: string | Error) => void; -let providerWarning: LEVELS | undefined = undefined; +let providerWarning: LEVELS | ProviderCallback | undefined = undefined; -export const setEuiDevProviderWarning = (level: LEVELS | undefined) => - (providerWarning = level); +export const setEuiDevProviderWarning = (warningType: typeof providerWarning) => + (providerWarning = warningType); export const getEuiDevProviderWarning = () => providerWarning; // Not a public top-level EUI export, currently for internal use export const emitEuiProviderWarning = (providerMessage: string) => { + // Handle callback types + if (typeof providerWarning === 'function') { + return providerWarning(providerMessage); + } + // Handle level types switch (providerWarning) { case 'log': console.log(providerMessage);