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

## Summary Partially addresses #161422 --------- Co-authored-by: kibanamachine <[email protected]>
elastic · Aug 14, 2023 · cc8e8fe · cc8e8fe
1 parent 1fe8ffd
commit cc8e8fe
Show file tree

Hide file tree

Showing 8 changed files with 53 additions and 83 deletions.
diff --git 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>
   );

diff --git 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>
   );

diff --git 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>

diff --git 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>
   );

diff --git 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>
   );
 }
diff --git 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,27 +28,17 @@ 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>
     );
   }
 
   return (
-    <KibanaThemeProvider theme$={theme.theme$}>
-      <EuiPageTemplate
-        template="centeredContent"
-        pageContentProps={{
-          color: 'primary',
-        }}
-      >
+    <KibanaThemeProvider theme={{ theme$: theme.theme$ }}>
+      <EuiPageTemplate>
         <Spinner showPlainSpinner={Boolean(hasCustomBranding)} />
       </EuiPageTemplate>
     </KibanaThemeProvider>

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

diff --git 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>
   );
 };