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.

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

Combine with kibana#163137 #24

Merged
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
22 changes: 7 additions & 15 deletions packages/react/kibana_context/render/render_provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,33 +8,25 @@

import React, { FC } from 'react';

import { EuiErrorBoundary } from '@elastic/eui';
import type { I18nStart } from '@kbn/core-i18n-browser';
import {
KibanaThemeProvider,
type KibanaThemeProviderProps,
} from '@kbn/react-kibana-context-theme';
KibanaRootContextProvider,
type KibanaRootContextProviderProps,
} from '@kbn/react-kibana-context-root';

/** Props for the KibanaContextProvider */
export interface KibanaRenderContextProviderProps extends KibanaThemeProviderProps {
/** The `I18nStart` API from `CoreStart`. */
i18n: I18nStart;
}
export type KibanaRenderContextProviderProps = Omit<KibanaRootContextProviderProps, 'globalStyles'>;

/**
* The `KibanaRenderContextProvider` provides the necessary context for an out-of-current
* React render, such as using `ReactDOM.render()`.
*/
export const KibanaRenderContextProvider: FC<KibanaRenderContextProviderProps> = ({
children,
i18n,
...props
}) => {
return (
<i18n.Context>
<KibanaThemeProvider {...props}>
<EuiErrorBoundary>{children}</EuiErrorBoundary>
Copy link
Owner

Choose a reason for hiding this comment

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

Does the lost <EuiErrorBoundary> matter here at all? No worries if not, just thought I'd check!

</KibanaThemeProvider>
</i18n.Context>
<KibanaRootContextProvider globalStyles={false} {...props}>
Copy link
Owner

Choose a reason for hiding this comment

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

Love this DRYness! I was going to ask you earlier if you thought it would be weird to have the RenderContext reuse the RootContext - glad to know I wasn't totally crazy 😆

{children}
</KibanaRootContextProvider>
);
};
3 changes: 1 addition & 2 deletions packages/react/kibana_context/render/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@
"target/**/*"
],
"kbn_references": [
"@kbn/core-i18n-browser",
"@kbn/react-kibana-context-theme",
"@kbn/react-kibana-context-root",
]
}
3 changes: 2 additions & 1 deletion packages/react/kibana_context/root/eui_provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,8 @@ utilitiesCache.compat = true;
const cache = { default: emotionCache, global: globalCache, utility: utilitiesCache };

/**
* Prepares and returns a configured `EuiProvider` for use in Kibana roots.
* Prepares and returns a configured `EuiProvider` for use in Kibana roots. In most cases, this utility context
* should not be used. Instead, refer to `KibanaRootContextProvider` to set up the root of Kibana.
*/
export const KibanaEuiProvider: FC<KibanaEuiProviderProps> = ({
theme: { theme$ },
Expand Down
1 change: 1 addition & 0 deletions packages/react/kibana_context/root/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,3 +7,4 @@
*/

export { KibanaRootContextProvider, type KibanaRootContextProviderProps } from './root_provider';
export { KibanaEuiProvider, type KibanaEuiProviderProps } from './eui_provider';
15 changes: 8 additions & 7 deletions packages/react/kibana_context/theme/theme_provider.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,12 +10,13 @@ import React, { useMemo } from 'react';
import useObservable from 'react-use/lib/useObservable';

import { EuiThemeProvider, EuiThemeProviderProps } from '@elastic/eui';

// @ts-ignore EUI exports this component internally, but Kibana isn't picking it up its types
import { useIsNestedEuiProvider } from '@elastic/eui/lib/components/provider/nested';
// @ts-ignore EUI exports this component internally, but Kibana isn't picking it up its types
import { emitEuiProviderWarning } from '@elastic/eui/lib/services/theme/warning';

import { KibanaEuiProvider } from '@kbn/react-kibana-context-root/eui_provider';
import { KibanaEuiProvider } from '@kbn/react-kibana-context-root';

import {
getColorMode,
Expand Down Expand Up @@ -46,7 +47,7 @@ export interface KibanaThemeProviderProps extends EuiProps {
* TODO: Restore this to the main `KibanaThemeProvider` once all theme providers can be guaranteed
* to have a parent `EuiProvider`
*/
export const KibanaThemeProviderOnly = ({
const KibanaThemeProviderOnly = ({
theme: { theme$ },
euiTheme: theme,
children,
Expand All @@ -62,11 +63,11 @@ export const KibanaThemeProviderOnly = ({
* Unfortunately, a lot of plugins are using `KibanaThemeProvider` without a parent
* `EuiProvider` which provides very necessary setup (e.g. Emotion cache, breakpoints).
*
* If so, we need to render an EuiProvider first (but without global styles, since those
* are already handled by `KibanaRootContextProvider`)
* If a render call is using the deprecated context, we need to render an EuiProvider first
* (but without global styles, since those are already handled by `KibanaRootContextProvider`)
*
* TODO: We can hopefully remove this and revert to only exporting the above component once
* all plugins are on `KibanaRootContextProvider`?
* TODO: clintandrewhall - We can remove this and revert to only exporting the above component
* once all out-of-band renders are using `KibanaRenderContextProvider`.
*/
const KibanaThemeProviderCheck = ({ theme, children, ...props }: KibanaThemeProviderProps) => {
const hasEuiProvider = useIsNestedEuiProvider();
Expand All @@ -79,7 +80,7 @@ const KibanaThemeProviderCheck = ({ theme, children, ...props }: KibanaThemeProv
);
} else {
emitEuiProviderWarning(
'Your plugin used an KibanaThemeProvider without a required parent KibanaRootContextProvider.'
'KibanaThemeProvider requires a parent KibanaRenderContextProvider. Check your React tree and ensure that they are wrapped in a KibanaRenderContextProvider.'
);
return (
<KibanaEuiProvider theme={theme} globalStyles={false}>
Expand Down