Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[EuiProviders] Warn Developer if EuiProvider is missing #184608

Merged
merged 4 commits into from
Jul 23, 2024
Merged

[EuiProviders] Warn Developer if EuiProvider is missing #184608

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1d84ed9
[EuiProviders] Warn Developer if EuiProvider is missing
tsullivan Jul 1, 2024
535fe00
add data-test-subj for functional test support
tsullivan Jul 22, 2024
4e940cc
Merge branch 'main' into euiprovider/detect-issues
tsullivan Jul 23, 2024
ea7f208
helper method
tsullivan Jul 23, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions packages/core/chrome/core-chrome-browser-internal/src/chrome_service.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
import { BehaviorSubject, combineLatest, merge, type Observable, of, ReplaySubject } from 'rxjs';
import { mergeMap, map, takeUntil, filter } from 'rxjs';
import { parse } from 'url';
import { setEuiDevProviderWarning } from '@elastic/eui';
import useObservable from 'react-use/lib/useObservable';

import type { CoreContext } from '@kbn/core-base-browser-internal';
Expand Down Expand Up @@ -189,6 +190,37 @@ export class ChromeService {
this.initVisibility(application);
this.handleEuiFullScreenChanges();

// Ensure developers are notified if working in a context that lacks the EUI Provider.
const isDev = this.params.coreContext.env.mode.name === 'development';
if (isDev) {
tsullivan marked this conversation as resolved.
Show resolved Hide resolved
setEuiDevProviderWarning((providerError) => {
const errorObject = new Error(providerError.toString());
// show a stack trace in the console
// eslint-disable-next-line no-console
console.error(errorObject);

notifications.toasts.addDanger({
title: '`EuiProvider` is missing',
text: mountReactNode(
<p data-test-sub="core-chrome-euiDevProviderWarning-toast">
Copy link
Member Author

@tsullivan tsullivan Jul 22, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With this data-test-subj, there could be a change in another PR to catch scenarios when this unwanted toast shows in functional tests. We could update the navigation methods of CommonPageObject class, to catch this toast message during functional testing, and throw a helpful error.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Update: #189018 (comment)

<FormattedMessage
id="core.chrome.euiDevProviderWarning"
defaultMessage="Kibana components must be wrapped in a React Context provider for full functionality and proper theming support. See {link}."
values={{
link: (
<a href="https://docs.elastic.dev/kibana-dev-docs/react-context">
https://docs.elastic.dev/kibana-dev-docs/react-context
</a>
),
}}
/>
</p>
),
toastLifeTimeMs: 60 * 60 * 1000, // keep message visible for up to an hour
});
});
}

const globalHelpExtensionMenuLinks$ = new BehaviorSubject<ChromeGlobalHelpExtensionMenuLink[]>(
[]
);
Expand Down