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:
Vadim Kibana 2023-08-10 11:16:34 +02:00 committed by GitHub
parent 92d4a6df7d
commit 2113878837
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 24 additions and 19 deletions

View file

@ -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>

View file

@ -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()}

View file

@ -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()
); );

View file

@ -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}

View file

@ -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}

View file

@ -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}

View file

@ -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,

View file

@ -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>

View file

@ -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>
); );
}; };

View file

@ -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/**/*",