From 180b7e116931723d0557c0eb1d3363a581630c57 Mon Sep 17 00:00:00 2001
From: Vadim Kibana <82822460+vadimkibana@users.noreply.github.com>
Date: Tue, 8 Aug 2023 18:46:40 +0200
Subject: [PATCH] remove deprecated components, improve spacing and title
 (#163378)

## Summary

Partially addresses https://github.com/elastic/kibana/issues/161425

New look:

<img width="1645" alt="image"
src="https://github.com/elastic/kibana/assets/82822460/9da0ae4a-9f6e-4744-80c1-9a13b6d23d1c">
---
 .../public/actions_and_expressions.tsx           | 15 +++++++++------
 .../public/actions_and_expressions2.tsx          | 15 +++++++++------
 examples/expressions_explorer/public/app.tsx     | 16 +++++++++-------
 .../public/render_expressions.tsx                | 15 +++++++++------
 .../public/run_expressions.tsx                   | 15 +++++++++------
 5 files changed, 45 insertions(+), 31 deletions(-)

diff --git a/examples/expressions_explorer/public/actions_and_expressions.tsx b/examples/expressions_explorer/public/actions_and_expressions.tsx
index d7322cd34e236..5e118fb4e411c 100644
--- a/examples/expressions_explorer/public/actions_and_expressions.tsx
+++ b/examples/expressions_explorer/public/actions_and_expressions.tsx
@@ -11,13 +11,14 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageTemplate,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,
   EuiText,
   EuiTitle,
+  EuiSpacer,
 } from '@elastic/eui';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@@ -55,8 +56,8 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent data-test-subj="expressionsActionsTest">
-        <EuiPageContentBody>
+      <EuiPageTemplate.Section data-test-subj="expressionsActionsTest">
+        <EuiPageSection>
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiText>
@@ -67,6 +68,8 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
             </EuiFlexItem>
           </EuiFlexGroup>
 
+          <EuiSpacer />
+
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@@ -86,8 +89,8 @@ export function ActionsExpressionsExample({ expressions, actions }: Props) {
               </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageSection>
+      </EuiPageTemplate.Section>
     </EuiPageBody>
   );
 }
diff --git a/examples/expressions_explorer/public/actions_and_expressions2.tsx b/examples/expressions_explorer/public/actions_and_expressions2.tsx
index 10a3c7a679195..4887d358ec731 100644
--- a/examples/expressions_explorer/public/actions_and_expressions2.tsx
+++ b/examples/expressions_explorer/public/actions_and_expressions2.tsx
@@ -11,13 +11,14 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageTemplate,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,
   EuiText,
   EuiTitle,
+  EuiSpacer,
 } from '@elastic/eui';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { UiActionsStart } from '@kbn/ui-actions-plugin/public';
@@ -54,8 +55,8 @@ export function ActionsExpressionsExample2({ expressions, actions }: Props) {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody data-test-subj="expressionsVariablesTest">
+      <EuiPageTemplate.Section>
+        <EuiPageSection data-test-subj="expressionsVariablesTest">
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiText>
@@ -65,6 +66,8 @@ export function ActionsExpressionsExample2({ expressions, actions }: Props) {
             </EuiFlexItem>
           </EuiFlexGroup>
 
+          <EuiSpacer />
+
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@@ -86,8 +89,8 @@ export function ActionsExpressionsExample2({ expressions, actions }: Props) {
               </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageSection>
+      </EuiPageTemplate.Section>
     </EuiPageBody>
   );
 }
diff --git a/examples/expressions_explorer/public/app.tsx b/examples/expressions_explorer/public/app.tsx
index 96e8fcb2908bd..776d612fd395d 100644
--- a/examples/expressions_explorer/public/app.tsx
+++ b/examples/expressions_explorer/public/app.tsx
@@ -12,8 +12,8 @@ import {
   EuiPage,
   EuiPageHeader,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageTemplate,
+  EuiPageSection,
   EuiSpacer,
   EuiText,
   EuiLink,
@@ -55,9 +55,11 @@ const ExpressionsExplorer = ({
     <KibanaReactContextProvider>
       <EuiPage>
         <EuiPageBody>
-          <EuiPageHeader>Expressions Explorer</EuiPageHeader>
-          <EuiPageContent>
-            <EuiPageContentBody>
+          <EuiPageSection>
+            <EuiPageHeader pageTitle="Expressions Explorer" />
+          </EuiPageSection>
+          <EuiPageTemplate.Section>
+            <EuiPageSection>
               <EuiText>
                 <p>
                   There are a couple of ways to run the expressions. Below some of the options are
@@ -87,8 +89,8 @@ const ExpressionsExplorer = ({
               <EuiSpacer />
 
               <ActionsExpressionsExample2 expressions={expressions} actions={actions} />
-            </EuiPageContentBody>
-          </EuiPageContent>
+            </EuiPageSection>
+          </EuiPageTemplate.Section>
         </EuiPageBody>
       </EuiPage>
     </KibanaReactContextProvider>
diff --git a/examples/expressions_explorer/public/render_expressions.tsx b/examples/expressions_explorer/public/render_expressions.tsx
index 768aaff133686..7901b456232cb 100644
--- a/examples/expressions_explorer/public/render_expressions.tsx
+++ b/examples/expressions_explorer/public/render_expressions.tsx
@@ -11,14 +11,15 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageTemplate,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,
   EuiText,
   EuiTitle,
   EuiButton,
+  EuiSpacer,
 } from '@elastic/eui';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { Start as InspectorStart } from '@kbn/inspector-plugin/public';
@@ -49,8 +50,8 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>
+      <EuiPageTemplate.Section>
+        <EuiPageSection>
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiText>
@@ -69,6 +70,8 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
             </EuiFlexItem>
           </EuiFlexGroup>
 
+          <EuiSpacer />
+
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@@ -90,8 +93,8 @@ export function RenderExpressionsExample({ expressions, inspector }: Props) {
               </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageSection>
+      </EuiPageTemplate.Section>
     </EuiPageBody>
   );
 }
diff --git a/examples/expressions_explorer/public/run_expressions.tsx b/examples/expressions_explorer/public/run_expressions.tsx
index 0b0558568522e..f30069acbc3ca 100644
--- a/examples/expressions_explorer/public/run_expressions.tsx
+++ b/examples/expressions_explorer/public/run_expressions.tsx
@@ -13,14 +13,15 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageTemplate,
+  EuiPageSection,
   EuiPageHeader,
   EuiPageHeaderSection,
   EuiPanel,
   EuiText,
   EuiTitle,
   EuiButton,
+  EuiSpacer,
 } from '@elastic/eui';
 import { ExpressionsStart } from '@kbn/expressions-plugin/public';
 import { Adapters, Start as InspectorStart } from '@kbn/inspector-plugin/public';
@@ -64,8 +65,8 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
           </EuiTitle>
         </EuiPageHeaderSection>
       </EuiPageHeader>
-      <EuiPageContent>
-        <EuiPageContentBody>
+      <EuiPageTemplate.Section>
+        <EuiPageSection>
           <EuiFlexGroup>
             <EuiFlexItem>
               <EuiText>
@@ -84,6 +85,8 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
             </EuiFlexItem>
           </EuiFlexGroup>
 
+          <EuiSpacer />
+
           <EuiFlexGroup gutterSize="l">
             <EuiFlexItem>
               <EuiPanel data-test-subj="expressionEditor" paddingSize="none" role="figure">
@@ -104,8 +107,8 @@ export function RunExpressionsExample({ expressions, inspector }: Props) {
               </EuiPanel>
             </EuiFlexItem>
           </EuiFlexGroup>
-        </EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageSection>
+      </EuiPageTemplate.Section>
     </EuiPageBody>
   );
 }