Update usage of deprecated EUI components in SharedUx plugins (#163560)

## Summary Partially addresses https://github.com/elastic/kibana/issues/161422 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
2025-04-23 17:28:26 -04:00 · 2023-08-14 15:36:38 +02:00 · 2023-08-14 15:36:38 +02:00 · cc8e8fe6a6
commit cc8e8fe6a6
parent 1fe8ffd0c8
8 changed files with 53 additions and 83 deletions
--- a/examples/state_containers_examples/public/common/example_page.tsx
+++ b/examples/state_containers_examples/public/common/example_page.tsx
@ -7,7 +7,7 @@
 */

 import React, { PropsWithChildren } from 'react';
-import { EuiPage, EuiPageSideBar_Deprecated as EuiPageSideBar, EuiSideNav } from '@elastic/eui';
+import { EuiPage, EuiPageTemplate, EuiSideNav } from '@elastic/eui';
 import { CoreStart } from '@kbn/core/public';

 export interface ExampleLink {
@ -53,9 +53,9 @@ export const StateContainersExamplesPage: React.FC<Props> = ({
 }: PropsWithChildren<Props>) => {
  return (
    <EuiPage>
-      <EuiPageSideBar>
+      <EuiPageTemplate.Sidebar>
        <SideNav navigateToApp={navigateToApp} exampleLinks={exampleLinks} />
-      </EuiPageSideBar>
+      </EuiPageTemplate.Sidebar>
      {children}
    </EuiPage>
  );
--- a/examples/state_containers_examples/public/todo/todo.tsx
+++ b/examples/state_containers_examples/public/todo/todo.tsx
@ -15,8 +15,8 @@ import {
  EuiCheckbox,
  EuiFieldText,
  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageTemplate,
+  EuiPageSection,
  EuiPageHeader,
  EuiPageHeaderSection,
  EuiSpacer,
@ -202,8 +202,8 @@ export const TodoAppPage: React.FC<{
            </EuiText>
          </EuiPageHeaderSection>
        </EuiPageHeader>
-        <EuiPageContent>
-          <EuiPageContentBody>
+        <EuiPageTemplate.Section>
+          <EuiPageSection>
            <Routes>
              <Route path={'/completed'}>
                <TodoApp filter={'completed'} stateContainer={stateContainer} />
@ -233,8 +233,8 @@ export const TodoAppPage: React.FC<{
            <EuiButton onClick={() => setUseHashedUrl(!useHashedUrl)}>
              {useHashedUrl ? 'Use Expanded State' : 'Use Hashed State'}
            </EuiButton>
-          </EuiPageContentBody>
-        </EuiPageContent>
+          </EuiPageSection>
+        </EuiPageTemplate.Section>
      </EuiPageBody>
    </Router>
  );
--- a/examples/state_containers_examples/public/with_data_services/app.tsx
+++ b/examples/state_containers_examples/public/with_data_services/app.tsx
@ -13,7 +13,7 @@ import { Router } from '@kbn/shared-ux-router';
 import {
  EuiFieldText,
  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageTemplate,
  EuiPageHeader,
  EuiText,
  EuiTitle,
@ -99,7 +99,7 @@ export const App = ({
            useDefaultBehaviors={true}
            showSaveQuery={true}
          />
-          <EuiPageContent>
+          <EuiPageTemplate.Section>
            <EuiText>
              <p>In addition to state from query bar also sync your arbitrary application state:</p>
            </EuiText>
@ -109,7 +109,7 @@ export const App = ({
              onChange={(e) => appStateContainer.set({ ...appState, name: e.target.value })}
              aria-label="My name"
            />
-          </EuiPageContent>
+          </EuiPageTemplate.Section>
        </EuiPageBody>
      </Router>
    </StateContainersExamplesPage>
--- a/examples/ui_actions_explorer/public/app.tsx
+++ b/examples/ui_actions_explorer/public/app.tsx
@ -9,18 +9,19 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom';

-import { EuiPage } from '@elastic/eui';
-
-import { EuiButton } from '@elastic/eui';
-import { EuiPageBody } from '@elastic/eui';
-import { EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
-import { EuiPageContentBody_Deprecated as EuiPageContentBody } from '@elastic/eui';
-import { EuiSpacer } from '@elastic/eui';
-import { EuiText } from '@elastic/eui';
-import { EuiFieldText } from '@elastic/eui';
-import { EuiCallOut } from '@elastic/eui';
-import { EuiPageHeader } from '@elastic/eui';
-import { EuiModalBody } from '@elastic/eui';
+import {
+  EuiPage,
+  EuiButton,
+  EuiPageBody,
+  EuiPageTemplate,
+  EuiPageSection,
+  EuiSpacer,
+  EuiText,
+  EuiFieldText,
+  EuiCallOut,
+  EuiPageHeader,
+  EuiModalBody,
+} from '@elastic/eui';
 import { toMountPoint } from '@kbn/kibana-react-plugin/public';
 import { UiActionsStart, createAction } from '@kbn/ui-actions-plugin/public';
 import { AppMountParameters, OverlayStart } from '@kbn/core/public';
@ -39,9 +40,11 @@ const ActionsExplorer = ({ uiActionsApi, openModal }: Props) => {
  return (
    <EuiPage>
      <EuiPageBody>
-        <EuiPageHeader>Ui Actions Explorer</EuiPageHeader>
-        <EuiPageContent>
-          <EuiPageContentBody>
+        <EuiPageSection>
+          <EuiPageHeader pageTitle={'Ui Actions Explorer'} />
+        </EuiPageSection>
+        <EuiPageTemplate.Section>
+          <EuiPageSection>
            <EuiText>
              <p>
                By default there is a single action attached to the `HELLO_WORLD_TRIGGER`. Clicking
@ -105,8 +108,8 @@ const ActionsExplorer = ({ uiActionsApi, openModal }: Props) => {
            <EuiSpacer />

            <ContextMenuExamples />
-          </EuiPageContentBody>
-        </EuiPageContent>
+          </EuiPageSection>
+        </EuiPageTemplate.Section>
      </EuiPageBody>
    </EuiPage>
  );
--- a/examples/ui_actions_explorer/public/page.tsx
+++ b/examples/ui_actions_explorer/public/page.tsx
@ -8,14 +8,7 @@

 import React from 'react';

-import {
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageBody, EuiPageTemplate, EuiPageSection, EuiPageHeader } from '@elastic/eui';

 interface PageProps {
  title: string;
@ -25,16 +18,12 @@ interface PageProps {
 export function Page({ title, children }: PageProps) {
  return (
    <EuiPageBody data-test-subj="searchTestPage">
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{title}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>{children}</EuiPageContentBody>
-      </EuiPageContent>
+      <EuiPageSection>
+        <EuiPageHeader pageTitle={title} />
+      </EuiPageSection>
+      <EuiPageTemplate.Section>
+        <EuiPageSection>{children}</EuiPageSection>
+      </EuiPageTemplate.Section>
    </EuiPageBody>
  );
 }
--- a/src/plugins/share/public/url_service/redirect/components/page.tsx
+++ b/src/plugins/share/public/url_service/redirect/components/page.tsx
@ -8,9 +8,9 @@

 import * as React from 'react';
 import useObservable from 'react-use/lib/useObservable';
-import { EuiPageTemplate_Deprecated as EuiPageTemplate } from '@elastic/eui';
+import { EuiPageTemplate } from '@elastic/eui';
 import { ThemeServiceSetup } from '@kbn/core/public';
-import { KibanaThemeProvider } from '@kbn/kibana-react-plugin/public';
+import { KibanaThemeProvider } from '@kbn/react-kibana-context-theme';
 import { CustomBrandingStart } from '@kbn/core-custom-branding-browser';
 import { Error } from './error';
 import { RedirectManager } from '../redirect_manager';
@ -28,13 +28,8 @@ export const Page: React.FC<PageProps> = ({ manager, theme, customBranding }) =>

  if (error) {
    return (
-      <KibanaThemeProvider theme$={theme.theme$}>
-        <EuiPageTemplate
-          template="centeredContent"
-          pageContentProps={{
-            color: 'danger',
-          }}
-        >
+      <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
+        <EuiPageTemplate>
          <Error error={error} />
        </EuiPageTemplate>
      </KibanaThemeProvider>
@ -42,13 +37,8 @@ export const Page: React.FC<PageProps> = ({ manager, theme, customBranding }) =>
  }

  return (
-    <KibanaThemeProvider theme$={theme.theme$}>
-      <EuiPageTemplate
-        template="centeredContent"
-        pageContentProps={{
-          color: 'primary',
-        }}
-      >
+    <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
+      <EuiPageTemplate>
        <Spinner showPlainSpinner={Boolean(hasCustomBranding)} />
      </EuiPageTemplate>
    </KibanaThemeProvider>
--- a/src/plugins/share/tsconfig.json
+++ b/src/plugins/share/tsconfig.json
@ -14,6 +14,7 @@
    "@kbn/config-schema",
    "@kbn/core-custom-branding-browser",
    "@kbn/core-saved-objects-utils-server",
+    "@kbn/react-kibana-context-theme",
  ],
  "exclude": [
    "target/**/*",
--- a/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx
+++ b/x-pack/examples/ui_actions_enhanced_examples/public/components/page/index.tsx
@ -6,14 +6,7 @@
 */

 import * as React from 'react';
-import {
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageHeader,
-  EuiPageHeaderSection,
-  EuiTitle,
-} from '@elastic/eui';
+import { EuiPageBody, EuiPageTemplate, EuiPageSection, EuiPageHeader } from '@elastic/eui';

 export interface PageProps {
  title?: React.ReactNode;
@ -22,18 +15,12 @@ export interface PageProps {
 export const Page: React.FC<PageProps> = ({ title = 'Untitled', children }) => {
  return (
    <EuiPageBody style={{ maxWidth: 1200, margin: '0 auto' }}>
-      <EuiPageHeader>
-        <EuiPageHeaderSection>
-          <EuiTitle size="l">
-            <h1>{title}</h1>
-          </EuiTitle>
-        </EuiPageHeaderSection>
-      </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody style={{ maxWidth: 800, margin: '0 auto' }}>
-          {children}
-        </EuiPageContentBody>
-      </EuiPageContent>
+      <EuiPageSection>
+        <EuiPageHeader pageTitle={title} />
+      </EuiPageSection>
+      <EuiPageTemplate.Section>
+        <EuiPageSection style={{ maxWidth: 800, margin: '0 auto' }}>{children}</EuiPageSection>
+      </EuiPageTemplate.Section>
    </EuiPageBody>
  );
 };