[Enterprise Search]Migrate all usages of EuiPage*_Deprecated (#163482)

## Summary This PR migrates all the usage of EuiPage*_Deprecated in Enterprise Search ### Checklist - [ ] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [ ] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
elastic · Aug 10, 2023 · 2d8f045 · 2d8f045
1 parent 6463418
commit 2d8f045
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 65 deletions.
diff --git a/...arch/public/applications/app_search/components/analytics/components/analytics_section.tsx b/...arch/public/applications/app_search/components/analytics/components/analytics_section.tsx
@@ -11,17 +11,17 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiIcon,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiSpacer,
   EuiText,
   EuiTitle,
   IconType,
 } from '@elastic/eui';
 
 interface Props {
-  title: string;
-  subtitle: string;
   iconType?: IconType;
+  subtitle: string;
+  title: string;
 }
 export const AnalyticsSection: React.FC<Props> = ({ title, subtitle, iconType, children }) => (
   <section>
@@ -49,6 +49,6 @@ export const AnalyticsSection: React.FC<Props> = ({ title, subtitle, iconType, c
       </EuiText>
     </header>
     <EuiSpacer size="m" />
-    <EuiPageContentBody>{children}</EuiPageContentBody>
+    <EuiPageSection paddingSize="none">{children}</EuiPageSection>
   </section>
 );
diff --git a/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx b/...s/enterprise_search/public/applications/app_search/components/credentials/credentials.tsx
@@ -16,8 +16,7 @@ import {
   EuiButtonIcon,
   EuiSpacer,
   EuiButton,
-  EuiPageContentHeader_Deprecated as EuiPageContentHeader,
-  EuiPageContentHeaderSection_Deprecated as EuiPageContentHeaderSection,
+  EuiPageHeader,
   EuiSkeletonText,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -85,31 +84,27 @@ export const Credentials: React.FC = () => {
         </EuiCopy>
       </EuiPanel>
       <EuiSpacer size="xxl" />
-      <EuiPageContentHeader responsive={false}>
-        <EuiPageContentHeaderSection>
-          <EuiTitle size="m">
-            <h2>
-              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
-                defaultMessage: 'API keys',
-              })}
-            </h2>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
-        <EuiPageContentHeaderSection>
-          {!dataLoading && (
-            <EuiButton
-              color="primary"
-              data-test-subj="CreateAPIKeyButton"
-              fill
-              onClick={() => showCredentialsForm()}
-            >
-              {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
-                defaultMessage: 'Create key',
-              })}
-            </EuiButton>
-          )}
-        </EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
+      <EuiPageHeader responsive={false}>
+        <EuiTitle size="m">
+          <h2>
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.apiKeys', {
+              defaultMessage: 'API keys',
+            })}
+          </h2>
+        </EuiTitle>
+        {!dataLoading && (
+          <EuiButton
+            color="primary"
+            data-test-subj="CreateAPIKeyButton"
+            fill
+            onClick={() => showCredentialsForm()}
+          >
+            {i18n.translate('xpack.enterpriseSearch.appSearch.credentials.createKey', {
+              defaultMessage: 'Create key',
+            })}
+          </EuiButton>
+        )}
+      </EuiPageHeader>
       <EuiSpacer size="m" />
       <EuiPanel hasBorder>
         <EuiSkeletonText lines={3} isLoading={!!dataLoading}>

diff --git a/...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx b/...k/plugins/enterprise_search/public/applications/app_search/components/library/library.tsx
@@ -13,13 +13,13 @@ import {
   EuiSpacer,
   EuiPageHeader,
   EuiTitle,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageSection,
   EuiDragDropContext,
   EuiDroppable,
   EuiDraggable,
   EuiButtonIconProps,
   EuiEmptyPrompt,
+  EuiPageBody,
 } from '@elastic/eui';
 
 import { SetAppSearchChrome as SetPageChrome } from '../../../shared/kibana_chrome';
@@ -167,8 +167,8 @@ export const Library: React.FC = () => {
     <>
       <SetPageChrome trail={['Library']} />
       <EuiPageHeader pageTitle="Library" />
-      <EuiPageContent hasBorder>
-        <EuiPageContentBody>
+      <EuiPageBody panelled hasBorder>
+        <EuiPageSection>
           <EuiTitle size="m">
             <h2>Result</h2>
           </EuiTitle>
@@ -540,8 +540,8 @@ export const Library: React.FC = () => {
 
           <EuiSpacer />
           <EuiSpacer />
-        </EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPageSection>
+      </EuiPageBody>
     </>
   );
 };
diff --git a/...k/plugins/enterprise_search/public/applications/shared/setup_guide/cloud/instructions.tsx b/...k/plugins/enterprise_search/public/applications/shared/setup_guide/cloud/instructions.tsx
@@ -9,13 +9,7 @@
 
 import React from 'react';
 
-import {
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiSteps,
-  EuiText,
-  EuiLink,
-  EuiCallOut,
-} from '@elastic/eui';
+import { EuiPageSection, EuiSteps, EuiText, EuiLink, EuiCallOut } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
@@ -27,7 +21,7 @@ interface Props {
 }
 
 export const CloudSetupInstructions: React.FC<Props> = ({ productName, cloudDeploymentLink }) => (
-  <EuiPageContent>
+  <EuiPageSection>
     <EuiSteps
       headingElement="h2"
       steps={[
@@ -176,5 +170,5 @@ export const CloudSetupInstructions: React.FC<Props> = ({ productName, cloudDepl
         },
       ]}
     />
-  </EuiPageContent>
+  </EuiPageSection>
 );
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/instructions.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/instructions.tsx
@@ -8,7 +8,7 @@
 import React from 'react';
 
 import {
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageSection,
   EuiText,
   EuiSteps,
   EuiCode,
@@ -27,7 +27,7 @@ interface Props {
 }
 
 export const SetupInstructions: React.FC<Props> = ({ productName }) => (
-  <EuiPageContent>
+  <EuiPageSection>
     <EuiSteps
       headingElement="h2"
       steps={[
@@ -126,5 +126,5 @@ export const SetupInstructions: React.FC<Props> = ({ productName }) => (
         },
       ]}
     />
-  </EuiPageContent>
+  </EuiPageSection>
 );
diff --git a/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.tsx b/x-pack/plugins/enterprise_search/public/applications/shared/setup_guide/setup_guide.tsx
@@ -11,7 +11,7 @@ import { useValues } from 'kea';
 
 import {
   EuiPage,
-  EuiPageSideBar_Deprecated as EuiPageSideBar,
+  EuiPageSidebar,
   EuiPageBody,
   EuiSpacer,
   EuiFlexGroup,
@@ -35,8 +35,8 @@ import './setup_guide.scss';
 
 interface Props {
   children: React.ReactNode;
-  productName: string;
   productEuiIcon: 'logoAppSearch' | 'logoWorkplaceSearch' | 'logoEnterpriseSearch';
+  productName: string;
 }
 
 export const SetupGuideLayout: React.FC<Props> = ({ children, productName, productEuiIcon }) => {
@@ -46,7 +46,7 @@ export const SetupGuideLayout: React.FC<Props> = ({ children, productName, produ
 
   return (
     <EuiPage className="setupGuide" data-test-subj="setupGuide">
-      <EuiPageSideBar className="setupGuide__sidebar">
+      <EuiPageSidebar className="setupGuide__sidebar">
         <EuiText color="subdued" size="s">
           <strong>{SETUP_GUIDE_TITLE}</strong>
         </EuiText>
@@ -64,7 +64,7 @@ export const SetupGuideLayout: React.FC<Props> = ({ children, productName, produ
         </EuiFlexGroup>
 
         {children}
-      </EuiPageSideBar>
+      </EuiPageSidebar>
 
       <EuiPageBody className="setupGuide__body">
         {isCloudEnabled ? (

diff --git a/...rkplace_search/components/layout/personal_dashboard_layout/personal_dashboard_layout.scss b/...rkplace_search/components/layout/personal_dashboard_layout/personal_dashboard_layout.scss
@@ -18,6 +18,7 @@
   }
 
   &__body {
+    padding-top:0;
     position: relative;
     width: 100%;
     height: 100%;

diff --git a/...orkplace_search/components/layout/personal_dashboard_layout/personal_dashboard_layout.tsx b/...orkplace_search/components/layout/personal_dashboard_layout/personal_dashboard_layout.tsx
@@ -11,12 +11,12 @@ import { useRouteMatch } from 'react-router-dom';
 import { useValues } from 'kea';
 
 import {
-  EuiPage,
-  EuiPageSideBar_Deprecated as EuiPageSideBar,
+  EuiPageSidebar,
   EuiPageBody,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiCallOut,
   EuiSpacer,
+  EuiPageTemplate,
 } from '@elastic/eui';
 
 import { AccountHeader, AccountSettingsSidebar, PrivateSourcesSidebar } from '..';
@@ -47,13 +47,22 @@ export const PersonalDashboardLayout: React.FC<LayoutProps> = ({
     <>
       {pageChrome && <SetWorkplaceSearchChrome trail={pageChrome} />}
       <AccountHeader />
-      <EuiPage className="personalDashboardLayout" paddingSize="none">
-        <EuiPageSideBar role="navigation" className="personalDashboardLayout__sideBar" sticky>
+      <EuiPageTemplate className="personalDashboardLayout" paddingSize="none">
+        <EuiPageSidebar
+          role="navigation"
+          className="personalDashboardLayout__sideBar"
+          sticky
+          minWidth="480px"
+        >
           {useRouteMatch(PRIVATE_SOURCES_PATH) && <PrivateSourcesSidebar />}
           {useRouteMatch(PERSONAL_SETTINGS_PATH) && <AccountSettingsSidebar />}
-        </EuiPageSideBar>
+        </EuiPageSidebar>
         <EuiPageBody component="main" panelled role="main">
-          <EuiPageContentBody className="personalDashboardLayout__body" restrictWidth>
+          <EuiPageSection
+            className="personalDashboardLayout__body"
+            paddingSize="none"
+            restrictWidth
+          >
             {readOnlyMode && (
               <>
                 <EuiCallOut
@@ -65,10 +74,11 @@ export const PersonalDashboardLayout: React.FC<LayoutProps> = ({
               </>
             )}
             <FlashMessages />
+
             {isLoading ? <Loading /> : children}
-          </EuiPageContentBody>
+          </EuiPageSection>
         </EuiPageBody>
-      </EuiPage>
+      </EuiPageTemplate>
     </>
   );
 };
diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -40464,4 +40464,4 @@
     "xpack.painlessLab.walkthroughButtonLabel": "Présentation",
     "xpack.serverlessObservability.nav.getStarted": "Démarrer"
   }
-}
+}
diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -40455,4 +40455,4 @@
     "xpack.painlessLab.walkthroughButtonLabel": "実地検証",
     "xpack.serverlessObservability.nav.getStarted": "使ってみる"
   }
-}
+}
diff --git a/x-pack/plugins/translations/translations/zh-CN.json b/x-pack/plugins/translations/translations/zh-CN.json
@@ -40449,4 +40449,4 @@
     "xpack.painlessLab.walkthroughButtonLabel": "指导",
     "xpack.serverlessObservability.nav.getStarted": "开始使用"
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -40464,4 +40464,4 @@ @@
         "xpack.painlessLab.walkthroughButtonLabel": "Présentation",
         "xpack.serverlessObservability.nav.getStarted": "Démarrer"
       }
-    }
+    }