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>

x-pack/plugins/canvas/canvas_plugin_src/renderers/embeddable/embeddable.tsx

@@ -9,7 +9,7 @@ import React, { FC } from 'react';
 import useObservable from 'react-use/lib/useObservable';
 import ReactDOM from 'react-dom';
 import { CoreStart } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import {
   IEmbeddable,
   EmbeddableFactory,
@@ -62,7 +62,7 @@ const renderEmbeddableFactory = (core: CoreStart, plugins: StartDeps) => {
         style={{ width: '100%', height: '100%', cursor: 'auto' }}
       >
         <I18nContext>
-          <KibanaThemeProvider theme$={core.theme.theme$}>
+          <KibanaThemeProvider theme={{ theme$: core.theme.theme$ }}>
             <EmbeddableRenderer embeddable={embeddableObject} />
           </KibanaThemeProvider>
         </I18nContext>

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/advanced_filter/index.tsx

@@ -7,7 +7,7 @@
 
 import React from 'react';
 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 { RendererFactory } from '../../../../types';
 import { AdvancedFilter } from './component';
@@ -24,7 +24,7 @@ export const advancedFilterFactory: StartInitializer<RendererFactory<{}>> =
     height: 50,
     render(domNode, _, handlers) {
       ReactDOM.render(
-        <KibanaThemeProvider theme$={core.theme.theme$}>
+        <KibanaThemeProvider theme={{ theme$: core.theme.theme$ }}>
           <AdvancedFilter
             commit={(filter) => handlers.event({ name: 'applyFilterAction', data: filter })}
             value={handlers.getFilter()}

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/dropdown_filter/index.tsx

@@ -9,7 +9,7 @@ import { fromExpression, toExpression, Ast } from '@kbn/interpreter';
 import { get } from 'lodash';
 import React from 'react';
 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 { RendererFactory } from '../../../../types';
 import { StartInitializer } from '../../../plugin';
@@ -97,7 +97,7 @@ export const dropdownFilterFactory: StartInitializer<RendererFactory<Config>> =
       );
 
       ReactDOM.render(
-        <KibanaThemeProvider theme$={core.theme.theme$}>{filter}</KibanaThemeProvider>,
+        <KibanaThemeProvider theme={{ theme$: core.theme.theme$ }}>{filter}</KibanaThemeProvider>,
         domNode,
         () => handlers.done()
       );

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/index.tsx

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { toExpression } from '@kbn/interpreter';
 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 { RendererStrings } from '../../../../i18n';
 import { TimeFilter } from './components';
@@ -60,7 +60,7 @@ export const timeFilterFactory: StartInitializer<RendererFactory<Arguments>> = (
       }
 
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme.theme$}>
+        <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
           <TimeFilter
             commit={(filter) => handlers.event({ name: 'applyFilterAction', data: filter })}
             filter={filterExpression}

x-pack/plugins/canvas/canvas_plugin_src/renderers/markdown/index.tsx

@@ -9,7 +9,7 @@ import React, { CSSProperties } from 'react';
 import ReactDOM from 'react-dom';
 import { CoreTheme } from '@kbn/core/public';
 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 { Markdown } from '@kbn/kibana-react-plugin/public';
 import { StartInitializer } from '../../plugin';
@@ -30,7 +30,7 @@ export const getMarkdownRenderer =
       const fontStyle = config.font ? config.font.spec : {};
 
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme$}>
+        <KibanaThemeProvider theme={{ theme$ }}>
           <Markdown
             className="canvasMarkdown"
             style={fontStyle as CSSProperties}

x-pack/plugins/canvas/canvas_plugin_src/renderers/table.tsx

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { CoreTheme } from '@kbn/core/public';
 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 { StartInitializer } from '../plugin';
 import { Datatable as DatatableComponent } from '../../public/components/datatable';
@@ -35,7 +35,7 @@ export const getTableRenderer =
     render(domNode, config, handlers) {
       const { datatable, paginate, perPage, font = { spec: {} }, showHeader } = config;
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme$}>
+        <KibanaThemeProvider theme={{ theme$ }}>
           <div style={{ ...(font.spec as React.CSSProperties), height: '100%' }}>
             <DatatableComponent
               datatable={datatable}

x-pack/plugins/canvas/canvas_plugin_src/renderers/text.tsx

@@ -9,7 +9,7 @@ import ReactDOM from 'react-dom';
 import React from 'react';
 import { CoreTheme } from '@kbn/core/public';
 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 { StartInitializer } from '../plugin';
 import { RendererStrings } from '../../i18n';
@@ -26,7 +26,7 @@ export const getTextRenderer =
     reuseDomNode: true,
     render(domNode, { text: textString }, handlers) {
       ReactDOM.render(
-        <KibanaThemeProvider theme$={theme$}>
+        <KibanaThemeProvider theme={{ theme$ }}>
           <div>{textString}</div>
         </KibanaThemeProvider>,
         domNode,

x-pack/plugins/canvas/public/application.tsx

@@ -17,7 +17,8 @@ import { includes, remove } from 'lodash';
 
 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 { CanvasStartDeps, CanvasSetupDeps } from './plugin';
@@ -75,7 +76,7 @@ export const renderApp = ({
         <LegacyServicesProvider providers={services}>
           <presentationUtil.ContextProvider>
             <I18nProvider>
-              <KibanaThemeProvider theme$={coreStart.theme.theme$}>
+              <KibanaThemeProvider theme={{ theme$: coreStart.theme.theme$ }}>
                 <Provider store={canvasStore}>
                   <App history={params.history} />
                 </Provider>
@@ -151,7 +152,7 @@ export const initializeCanvas = async (
     ],
     content: (domNode, { hideHelpMenu }) => {
       ReactDOM.render(
-        <KibanaThemeProvider theme$={coreStart.theme.theme$}>
+        <KibanaThemeProvider theme={{ theme$: coreStart.theme.theme$ }}>
           <Provider store={canvasStore}>
             <HelpMenu hideHelpMenu={hideHelpMenu} />
           </Provider>

x-pack/plugins/canvas/public/components/home/home.component.tsx

@@ -7,7 +7,7 @@
 
 import React, { useState } from 'react';
 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 { 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>
   );
 };

x-pack/plugins/canvas/tsconfig.json

@@ -82,6 +82,8 @@
     "@kbn/core-saved-objects-server",
     "@kbn/discover-utils",
     "@kbn/content-management-plugin",
+    "@kbn/react-kibana-context-theme",
+    "@kbn/shared-ux-page-kibana-template",
   ],
   "exclude": [
     "target/**/*",