[rollup][licensing_management][grokdebugger] Migrate deprecated EuiPage* components (#168300)

## Summary

EUI will shortly be removing several deprecated `EuiPage*` components,
and we're updating a few remaining Kibana usages of these deprecated
components ahead of time.

See https://github.com/elastic/kibana/issues/161872 for other similar
tasks with more information about this effort.

---------

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

x-pack/plugins/grokdebugger/public/components/grok_debugger/grok_debugger.js

@@ -11,15 +11,7 @@ import { i18n } from '@kbn/i18n';
 // eslint-disable-next-line no-restricted-imports
 import isEmpty from 'lodash/isEmpty';
 
-import {
-  EuiForm,
-  EuiButton,
-  EuiPage,
-  EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiSpacer,
-} from '@elastic/eui';
+import { EuiForm, EuiButton, EuiPage, EuiPageBody, EuiPageSection, EuiSpacer } from '@elastic/eui';
 import { EventInput } from '../event_input';
 import { PatternInput } from '../pattern_input';
 import { CustomPatternsInput } from '../custom_patterns_input';
@@ -126,33 +118,31 @@ export class GrokDebuggerComponent extends React.Component {
     return (
       <EuiPage>
         <EuiPageBody>
-          <EuiPageContent>
-            <EuiPageContentBody>
-              <EuiForm className="grokdebugger-container" data-test-subj="grokDebuggerContainer">
-                <EventInput value={this.state.rawEvent} onChange={this.onRawEventChange} />
-                <PatternInput value={this.state.pattern} onChange={this.onPatternChange} />
-                <EuiSpacer />
-                <CustomPatternsInput
-                  value={this.state.customPatterns}
-                  onChange={this.onCustomPatternsChange}
+          <EuiPageSection grow={true} color="plain">
+            <EuiForm className="grokdebugger-container" data-test-subj="grokDebuggerContainer">
+              <EventInput value={this.state.rawEvent} onChange={this.onRawEventChange} />
+              <PatternInput value={this.state.pattern} onChange={this.onPatternChange} />
+              <EuiSpacer />
+              <CustomPatternsInput
+                value={this.state.customPatterns}
+                onChange={this.onCustomPatternsChange}
+              />
+              <EuiSpacer />
+              <EuiButton
+                fill
+                onClick={this.onSimulateClick}
+                isDisabled={this.isSimulateDisabled()}
+                data-test-subj="btnSimulate"
+              >
+                <FormattedMessage
+                  id="xpack.grokDebugger.simulateButtonLabel"
+                  defaultMessage="Simulate"
                 />
-                <EuiSpacer />
-                <EuiButton
-                  fill
-                  onClick={this.onSimulateClick}
-                  isDisabled={this.isSimulateDisabled()}
-                  data-test-subj="btnSimulate"
-                >
-                  <FormattedMessage
-                    id="xpack.grokDebugger.simulateButtonLabel"
-                    defaultMessage="Simulate"
-                  />
-                </EuiButton>
-                <EuiSpacer />
-                <EventOutput value={this.state.structuredEvent} />
-              </EuiForm>
-            </EuiPageContentBody>
-          </EuiPageContent>
+              </EuiButton>
+              <EuiSpacer />
+              <EventOutput value={this.state.structuredEvent} />
+            </EuiForm>
+          </EuiPageSection>
         </EuiPageBody>
       </EuiPage>
     );

x-pack/plugins/grokdebugger/public/components/inactive_license.js

@@ -13,8 +13,7 @@ import {
   EuiCode,
   EuiPage,
   EuiPageBody,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
@@ -43,49 +42,47 @@ export const InactiveLicenseSlate = () => {
   return (
     <EuiPage>
       <EuiPageBody component="div">
-        <EuiPageContent verticalPosition="center" horizontalPosition="center">
-          <EuiPageContentBody>
-            <EuiCallOut
-              title={i18n.translate('xpack.grokDebugger.licenseErrorMessageTitle', {
-                defaultMessage: 'License error',
-              })}
-              color="danger"
-              iconType="warning"
-              style={{ padding: '16px' }}
-            >
-              <EuiText size="s">
-                <p>
-                  <FormattedMessage
-                    id="xpack.grokDebugger.licenseErrorMessageDescription"
-                    defaultMessage="The Grok Debugger requires an active license ({licenseTypeList} or {platinumLicenseType}), but none were found in your cluster."
-                    values={{
-                      licenseTypeList: (
-                        <>
-                          <EuiCode>{trialLicense}</EuiCode>, <EuiCode>{basicLicense}</EuiCode>,{' '}
-                          <EuiCode>{goldLicense}</EuiCode>
-                        </>
-                      ),
-                      platinumLicenseType: <EuiCode>{platinumLicense}</EuiCode>,
-                    }}
-                  />
-                </p>
-                <p>
-                  <FormattedMessage
-                    id="xpack.grokDebugger.registerLicenseDescription"
-                    defaultMessage="Please {registerLicenseLink} to continue using the Grok Debugger"
-                    values={{
-                      registerLicenseLink: (
-                        <EuiLink href="https://www.elastic.co/subscriptions" rel="noopener">
-                          {registerLicenseLinkLabel}
-                        </EuiLink>
-                      ),
-                    }}
-                  />
-                </p>
-              </EuiText>
-            </EuiCallOut>
-          </EuiPageContentBody>
-        </EuiPageContent>
+        <EuiPageSection alignment="center" grow={true} color="plain">
+          <EuiCallOut
+            title={i18n.translate('xpack.grokDebugger.licenseErrorMessageTitle', {
+              defaultMessage: 'License error',
+            })}
+            color="danger"
+            iconType="warning"
+            style={{ padding: '16px' }}
+          >
+            <EuiText size="s">
+              <p>
+                <FormattedMessage
+                  id="xpack.grokDebugger.licenseErrorMessageDescription"
+                  defaultMessage="The Grok Debugger requires an active license ({licenseTypeList} or {platinumLicenseType}), but none were found in your cluster."
+                  values={{
+                    licenseTypeList: (
+                      <>
+                        <EuiCode>{trialLicense}</EuiCode>, <EuiCode>{basicLicense}</EuiCode>,{' '}
+                        <EuiCode>{goldLicense}</EuiCode>
+                      </>
+                    ),
+                    platinumLicenseType: <EuiCode>{platinumLicense}</EuiCode>,
+                  }}
+                />
+              </p>
+              <p>
+                <FormattedMessage
+                  id="xpack.grokDebugger.registerLicenseDescription"
+                  defaultMessage="Please {registerLicenseLink} to continue using the Grok Debugger"
+                  values={{
+                    registerLicenseLink: (
+                      <EuiLink href="https://www.elastic.co/subscriptions" rel="noopener">
+                        {registerLicenseLinkLabel}
+                      </EuiLink>
+                    ),
+                  }}
+                />
+              </p>
+            </EuiText>
+          </EuiCallOut>
+        </EuiPageSection>
       </EuiPageBody>
     </EuiPage>
   );

x-pack/plugins/license_management/public/application/app.js

@@ -11,11 +11,7 @@ import { LicenseDashboard, UploadLicense } from './sections';
 import { Routes, Route } from '@kbn/shared-ux-router';
 import { APP_PERMISSION } from '../../common/constants';
 import { SectionLoading, useExecutionContext } from '../shared_imports';
-import {
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageBody,
-  EuiEmptyPrompt,
-} from '@elastic/eui';
+import { EuiPageSection, EuiPageBody, EuiEmptyPrompt } from '@elastic/eui';
 import { UPLOAD_LICENSE_ROUTE } from '../locator';
 
 export const App = ({
@@ -37,14 +33,14 @@ export const App = ({
 
   if (permissionsLoading) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageSection alignment="center" grow={true}>
         <SectionLoading>
           <FormattedMessage
             id="xpack.licenseMgmt.app.loadingPermissionsDescription"
             defaultMessage="Checking permissions…"
           />
         </SectionLoading>
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }
 
@@ -52,8 +48,9 @@ export const App = ({
     const error = permissionsError?.data?.message;
 
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+      <EuiPageSection alignment="center" grow={true}>
         <EuiEmptyPrompt
+          color="danger"
           iconType="warning"
           title={
             <h1>
@@ -65,14 +62,15 @@ export const App = ({
           }
           body={error ? <p>{error}</p> : null}
         />
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }
 
   if (!hasPermission) {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageSection alignment="center" grow={true}>
         <EuiEmptyPrompt
+          color="subdued"
           iconType="securityApp"
           title={
             <h1>
@@ -94,7 +92,7 @@ export const App = ({
             </p>
           }
         />
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }
 

x-pack/plugins/license_management/public/application/sections/license_dashboard/license_dashboard.js

@@ -6,11 +6,7 @@
  */
 
 import React, { useEffect } from 'react';
-import {
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '@elastic/eui';
+import { EuiPageSection, EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
 import { StartTrial } from './start_trial';
 import { LicensePageHeader } from './license_page_header';
@@ -27,7 +23,7 @@ export const LicenseDashboard = ({ setBreadcrumb, telemetry } = { setBreadcrumb:
     <>
       <LicensePageHeader />
 
-      <EuiPageContentBody>
+      <EuiPageSection>
         <EuiFlexGroup justifyContent="spaceAround">
           <EuiFlexItem>
             <AddLicense />
@@ -36,7 +32,7 @@ export const LicenseDashboard = ({ setBreadcrumb, telemetry } = { setBreadcrumb:
           <RequestTrialExtension />
           <RevertToBasic />
         </EuiFlexGroup>
-      </EuiPageContentBody>
+      </EuiPageSection>
     </>
   );
 };

x-pack/plugins/license_management/public/application/sections/upload_license/upload_license.js

@@ -17,8 +17,8 @@ import {
   EuiTitle,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
+  EuiPanel,
 } from '@elastic/eui';
 import { TelemetryOptIn } from '../../components/telemetry_opt_in';
 import { shouldShowTelemetryOptIn } from '../../lib/telemetry';
@@ -126,8 +126,8 @@ export class UploadLicense extends React.PureComponent {
     const { currentLicenseType, applying, telemetry, history } = this.props;
 
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
-        <EuiPageContentBody>
+      <EuiPageSection alignment="center" grow={true}>
+        <EuiPanel color="subdued" paddingSize="l">
           <EuiTitle size="m">
             <h1>
               <FormattedMessage
@@ -215,8 +215,8 @@ export class UploadLicense extends React.PureComponent {
               </EuiFlexItem>
             </EuiFlexGroup>
           </EuiForm>
-        </EuiPageContentBody>
-      </EuiPageContent>
+        </EuiPanel>
+      </EuiPageSection>
     );
   }
 }

x-pack/plugins/rollup/public/crud_app/sections/job_create/job_create.js

@@ -18,7 +18,7 @@ import {
   EuiCallOut,
   EuiLoadingLogo,
   EuiOverlayMask,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
+  EuiPageSection,
   EuiPageHeader,
   EuiSpacer,
   EuiStepsHorizontal,
@@ -543,7 +543,7 @@ export class JobCreateUi extends Component {
     }
 
     return (
-      <EuiPageContentBody restrictWidth style={{ width: '100%' }}>
+      <EuiPageSection restrictWidth>
         <EuiPageHeader
           bottomBorder
           pageTitle={
@@ -569,7 +569,7 @@ export class JobCreateUi extends Component {
         {this.renderNavigation()}
 
         {savingFeedback}
-      </EuiPageContentBody>
+      </EuiPageSection>
     );
   }
 

x-pack/plugins/rollup/public/crud_app/sections/job_list/job_list.js

@@ -15,7 +15,7 @@ import {
   EuiButtonEmpty,
   EuiEmptyPrompt,
   EuiPageHeader,
-  EuiPageContent_Deprecated as EuiPageContent,
+  EuiPageSection,
   EuiSpacer,
 } from '@elastic/eui';
 
@@ -87,8 +87,9 @@ export class JobListUi extends Component {
       defaultMessage: 'Permission error',
     });
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+      <EuiPageSection alignment="center" grow={true}>
         <EuiEmptyPrompt
+          color="danger"
           data-test-subj="jobListNoPermission"
           iconType="warning"
           title={<h1>{title}</h1>}
@@ -101,7 +102,7 @@ export class JobListUi extends Component {
             </p>
           }
         />
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }
 
@@ -115,8 +116,9 @@ export class JobListUi extends Component {
     });
 
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+      <EuiPageSection alignment="center" grow={true}>
         <EuiEmptyPrompt
+          color="danger"
           data-test-subj="jobListError"
           iconType="warning"
           title={<h1>{title}</h1>}
@@ -126,14 +128,15 @@ export class JobListUi extends Component {
             </p>
           }
         />
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }
 
   renderEmpty() {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageSection alignment="center" grow={true}>
         <EuiEmptyPrompt
+          color="subdued"
           data-test-subj="jobListEmptyPrompt"
           iconType="indexRollupApp"
           title={
@@ -169,20 +172,20 @@ export class JobListUi extends Component {
             </EuiButton>
           }
         />
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }
 
   renderLoading() {
     return (
-      <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+      <EuiPageSection alignment="center" grow={true}>
         <SectionLoading>
           <FormattedMessage
             id="xpack.rollupJobs.jobList.loadingTitle"
             defaultMessage="Loading rollup jobs…"
           />
         </SectionLoading>
-      </EuiPageContent>
+      </EuiPageSection>
     );
   }