mirror of
https://github.com/elastic/kibana.git
synced 2025-06-27 18:51:07 -04:00
Rm canvas deprecations (#163467)
## Summary Substitutes deprecated components from `kibana_react` plugin in Canvas app by latest ones from packages. Partially addresses https://github.com/elastic/kibana/issues/161422 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
This commit is contained in:
parent
92d4a6df7d
commit
2113878837
10 changed files with 24 additions and 19 deletions
|
@ -9,7 +9,7 @@ import React, { FC } from 'react';
|
||||||
import useObservable from 'react-use/lib/useObservable';
|
import useObservable from 'react-use/lib/useObservable';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { CoreStart } from '@kbn/core/public';
|
import { CoreStart } from '@kbn/core/public';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import {
|
import {
|
||||||
IEmbeddable,
|
IEmbeddable,
|
||||||
EmbeddableFactory,
|
EmbeddableFactory,
|
||||||
|
@ -62,7 +62,7 @@ const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => {
|
||||||
style={{ width: '100%', height: '100%', cursor: 'auto' }}
|
style={{ width: '100%', height: '100%', cursor: 'auto' }}
|
||||||
>
|
>
|
||||||
<I18nContext>
|
<I18nContext>
|
||||||
<KibanaThemeProvider theme$={core.theme.theme$}>
|
<KibanaThemeProvider theme={{ theme$: core.theme.theme$ }}>
|
||||||
<EmbeddableRenderer embeddable={embeddableObject} />
|
<EmbeddableRenderer embeddable={embeddableObject} />
|
||||||
</KibanaThemeProvider>
|
</KibanaThemeProvider>
|
||||||
</I18nContext>
|
</I18nContext>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import { StartInitializer } from '../../../plugin';
|
import { StartInitializer } from '../../../plugin';
|
||||||
import { RendererFactory } from '../../../../types';
|
import { RendererFactory } from '../../../../types';
|
||||||
import { AdvancedFilter } from './component';
|
import { AdvancedFilter } from './component';
|
||||||
|
@ -24,7 +24,7 @@ export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> =
|
||||||
height: 50,
|
height: 50,
|
||||||
render(domNode, _, handlers) {
|
render(domNode, _, handlers) {
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={core.theme.theme$}>
|
<KibanaThemeProvider theme={{ theme$: core.theme.theme$ }}>
|
||||||
<AdvancedFilter
|
<AdvancedFilter
|
||||||
commit={(filter) => handlers.event({ name: 'applyFilterAction', data: filter })}
|
commit={(filter) => handlers.event({ name: 'applyFilterAction', data: filter })}
|
||||||
value={handlers.getFilter()}
|
value={handlers.getFilter()}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import { fromExpression, toExpression, Ast } from '@kbn/interpreter';
|
||||||
import { get } from 'lodash';
|
import { get } from 'lodash';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
|
import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
|
||||||
import { RendererFactory } from '../../../../types';
|
import { RendererFactory } from '../../../../types';
|
||||||
import { StartInitializer } from '../../../plugin';
|
import { StartInitializer } from '../../../plugin';
|
||||||
|
@ -97,7 +97,7 @@ export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
|
||||||
);
|
);
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={core.theme.theme$}>{filter}</KibanaThemeProvider>,
|
<KibanaThemeProvider theme={{ theme$: core.theme.theme$ }}>{filter}</KibanaThemeProvider>,
|
||||||
domNode,
|
domNode,
|
||||||
() => handlers.done()
|
() => handlers.done()
|
||||||
);
|
);
|
||||||
|
|
|
@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { toExpression } from '@kbn/interpreter';
|
import { toExpression } from '@kbn/interpreter';
|
||||||
import { UI_SETTINGS } from '@kbn/data-plugin/public';
|
import { UI_SETTINGS } from '@kbn/data-plugin/public';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
|
import { syncFilterExpression } from '../../../../public/lib/sync_filter_expression';
|
||||||
import { RendererStrings } from '../../../../i18n';
|
import { RendererStrings } from '../../../../i18n';
|
||||||
import { TimeFilter } from './components';
|
import { TimeFilter } from './components';
|
||||||
|
@ -60,7 +60,7 @@ export const timeFilterFactory: StartInitializer<RendererFactory<Arguments>> = (
|
||||||
}
|
}
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={theme.theme$}>
|
<KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
|
||||||
<TimeFilter
|
<TimeFilter
|
||||||
commit={(filter) => handlers.event({ name: 'applyFilterAction', data: filter })}
|
commit={(filter) => handlers.event({ name: 'applyFilterAction', data: filter })}
|
||||||
filter={filterExpression}
|
filter={filterExpression}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import React, { CSSProperties } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
import { CoreTheme } from '@kbn/core/public';
|
import { CoreTheme } from '@kbn/core/public';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
|
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
|
||||||
import { Markdown } from '@kbn/kibana-react-plugin/public';
|
import { Markdown } from '@kbn/kibana-react-plugin/public';
|
||||||
import { StartInitializer } from '../../plugin';
|
import { StartInitializer } from '../../plugin';
|
||||||
|
@ -30,7 +30,7 @@ export const getMarkdownRenderer =
|
||||||
const fontStyle = config.font ? config.font.spec : {};
|
const fontStyle = config.font ? config.font.spec : {};
|
||||||
|
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={theme$}>
|
<KibanaThemeProvider theme={{ theme$ }}>
|
||||||
<Markdown
|
<Markdown
|
||||||
className="canvasMarkdown"
|
className="canvasMarkdown"
|
||||||
style={fontStyle as CSSProperties}
|
style={fontStyle as CSSProperties}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { CoreTheme } from '@kbn/core/public';
|
import { CoreTheme } from '@kbn/core/public';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
|
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
|
||||||
import { StartInitializer } from '../plugin';
|
import { StartInitializer } from '../plugin';
|
||||||
import { Datatable as DatatableComponent } from '../../public/components/datatable';
|
import { Datatable as DatatableComponent } from '../../public/components/datatable';
|
||||||
|
@ -35,7 +35,7 @@ export const getTableRenderer =
|
||||||
render(domNode, config, handlers) {
|
render(domNode, config, handlers) {
|
||||||
const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
|
const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={theme$}>
|
<KibanaThemeProvider theme={{ theme$ }}>
|
||||||
<div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
|
<div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
|
||||||
<DatatableComponent
|
<DatatableComponent
|
||||||
datatable={datatable}
|
datatable={datatable}
|
||||||
|
|
|
@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { CoreTheme } from '@kbn/core/public';
|
import { CoreTheme } from '@kbn/core/public';
|
||||||
import { Observable } from 'rxjs';
|
import { Observable } from 'rxjs';
|
||||||
import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
|
import { defaultTheme$ } from '@kbn/presentation-util-plugin/common';
|
||||||
import { StartInitializer } from '../plugin';
|
import { StartInitializer } from '../plugin';
|
||||||
import { RendererStrings } from '../../i18n';
|
import { RendererStrings } from '../../i18n';
|
||||||
|
@ -26,7 +26,7 @@ export const getTextRenderer =
|
||||||
reuseDomNode: true,
|
reuseDomNode: true,
|
||||||
render(domNode, { text: textString }, handlers) {
|
render(domNode, { text: textString }, handlers) {
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={theme$}>
|
<KibanaThemeProvider theme={{ theme$ }}>
|
||||||
<div>{textString}</div>
|
<div>{textString}</div>
|
||||||
</KibanaThemeProvider>,
|
</KibanaThemeProvider>,
|
||||||
domNode,
|
domNode,
|
||||||
|
|
|
@ -17,7 +17,8 @@ import { includes, remove } from 'lodash';
|
||||||
|
|
||||||
import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from '@kbn/core/public';
|
import { AppMountParameters, CoreStart, CoreSetup, AppUpdater } from '@kbn/core/public';
|
||||||
|
|
||||||
import { KibanaContextProvider, KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
|
import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
|
||||||
|
import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
|
||||||
import { PluginServices } from '@kbn/presentation-util-plugin/public';
|
import { PluginServices } from '@kbn/presentation-util-plugin/public';
|
||||||
|
|
||||||
import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
|
import { CanvasStartDeps, CanvasSetupDeps } from './plugin';
|
||||||
|
@ -75,7 +76,7 @@ export const renderApp = ({
|
||||||
<LegacyServicesProvider providers={services}>
|
<LegacyServicesProvider providers={services}>
|
||||||
<presentationUtil.ContextProvider>
|
<presentationUtil.ContextProvider>
|
||||||
<I18nProvider>
|
<I18nProvider>
|
||||||
<KibanaThemeProvider theme$={coreStart.theme.theme$}>
|
<KibanaThemeProvider theme={{ theme$: coreStart.theme.theme$ }}>
|
||||||
<Provider store={canvasStore}>
|
<Provider store={canvasStore}>
|
||||||
<App history={params.history} />
|
<App history={params.history} />
|
||||||
</Provider>
|
</Provider>
|
||||||
|
@ -151,7 +152,7 @@ export const initializeCanvas = async (
|
||||||
],
|
],
|
||||||
content: (domNode, { hideHelpMenu }) => {
|
content: (domNode, { hideHelpMenu }) => {
|
||||||
ReactDOM.render(
|
ReactDOM.render(
|
||||||
<KibanaThemeProvider theme$={coreStart.theme.theme$}>
|
<KibanaThemeProvider theme={{ theme$: coreStart.theme.theme$ }}>
|
||||||
<Provider store={canvasStore}>
|
<Provider store={canvasStore}>
|
||||||
<HelpMenu hideHelpMenu={hideHelpMenu} />
|
<HelpMenu hideHelpMenu={hideHelpMenu} />
|
||||||
</Provider>
|
</Provider>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
|
|
||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
import { i18n } from '@kbn/i18n';
|
import { i18n } from '@kbn/i18n';
|
||||||
import { KibanaPageTemplate } from '@kbn/kibana-react-plugin/public';
|
import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
|
||||||
import { withSuspense } from '@kbn/presentation-util-plugin/public';
|
import { withSuspense } from '@kbn/presentation-util-plugin/public';
|
||||||
|
|
||||||
import { WorkpadCreate } from './workpad_create';
|
import { WorkpadCreate } from './workpad_create';
|
||||||
|
@ -48,7 +48,9 @@ export const Home = ({ activeTab = 'workpads' }: Props) => {
|
||||||
],
|
],
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{tab === 'workpads' ? <MyWorkpads /> : <WorkpadTemplates />}
|
<KibanaPageTemplate.Section>
|
||||||
|
{tab === 'workpads' ? <MyWorkpads /> : <WorkpadTemplates />}
|
||||||
|
</KibanaPageTemplate.Section>
|
||||||
</KibanaPageTemplate>
|
</KibanaPageTemplate>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
|
@ -82,6 +82,8 @@
|
||||||
"@kbn/core-saved-objects-server",
|
"@kbn/core-saved-objects-server",
|
||||||
"@kbn/discover-utils",
|
"@kbn/discover-utils",
|
||||||
"@kbn/content-management-plugin",
|
"@kbn/content-management-plugin",
|
||||||
|
"@kbn/react-kibana-context-theme",
|
||||||
|
"@kbn/shared-ux-page-kibana-template",
|
||||||
],
|
],
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"target/**/*",
|
"target/**/*",
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue