Migrates all security and spaces usage of deprecated Eui Page components (#167078)

Closes #161419

## Summary

Replaces deprecated EuiPage*_Deprecated components with the suggested
replacement components (see
[issue](https://github.com/elastic/kibana/issues/161419)).

### Visual Difference
The only UI that is noticeably affected is the User Profile page. The
spacing and header font size are slightly different from the previous
implementation, however, it is consistent with other
`Eui/KibanaPageTemplate` pages.

Previous render:
<img width="1391" alt="Screenshot 2023-09-22 at 1 27 27 PM"
src="58d2a86e-63b7-4c7d-bcf1-2071290d25b2">

New render:
<img width="1286" alt="Screenshot 2023-09-22 at 2 56 44 PM"
src="0f2b3e38-8ea3-4daf-8937-03e47474658c">

### Applicable Tests

-
x-pack/plugins/security/public/account_management/user_profile/user_profile.test.tsx
-
x-pack/plugins/security/public/management/users/users_grid/users_grid_page.test.tsx
-
x-pack/plugins/spaces/public/management/edit_space/manage_space_page.test.tsx
-
x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.test.tsx
-
x-pack/plugins/security/public/management/roles/roles_grid/roles_grid_page.test.tsx
(for permission denied)

---------

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

x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx

@@ -22,7 +22,6 @@ import {
   EuiIconTip,
   EuiKeyPadMenu,
   EuiKeyPadMenuItem,
-  EuiPageTemplate_Deprecated as EuiPageTemplate,
   EuiPopover,
   EuiSpacer,
   EuiText,
@@ -39,6 +38,7 @@ import type { CoreStart, IUiSettingsClient } from '@kbn/core/public';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 import { useKibana } from '@kbn/kibana-react-plugin/public';
+import { KibanaPageTemplate } from '@kbn/shared-ux-page-kibana-template';
 import type { DarkModeValue, UserProfileData } from '@kbn/user-profile-components';
 import { UserAvatar, useUpdateUserProfile } from '@kbn/user-profile-components';
 
@@ -750,17 +750,16 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
               />
             ) : null}
 
-            <EuiPageTemplate
+            <KibanaPageTemplate className="eui-fullHeight" restrictWidth={1000}>
-              className="eui-fullHeight"
+              <KibanaPageTemplate.Header
-              pageHeader={{
+                pageTitle={
-                pageTitle: (
                   <FormattedMessage
                     id="xpack.security.accountManagement.userProfile.title"
                     defaultMessage="Profile"
                   />
-                ),
+                }
-                pageTitleProps: { id: titleId },
+                id={titleId}
-                rightSideItems: rightSideItems.reverse().map((item) => (
+                rightSideItems={rightSideItems.reverse().map((item) => (
                   <EuiDescriptionList
                     textStyle="reverse"
                     listItems={[
@@ -791,28 +790,31 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
                     ]}
                     compressed
                   />
-                )),
+                ))}
-              }}
+              />
-              bottomBar={formChanges.count > 0 ? <SaveChangesBottomBar /> : null}
+              <KibanaPageTemplate.Section>
-              bottomBarProps={{ paddingSize: 'm', position: 'fixed' }}
+                <Form aria-labelledby={titleId}>
-              restrictWidth={1000}
+                  <UserDetailsEditor user={user} />
-            >
+                  {isCloudUser ? null : <UserAvatarEditor user={user} formik={formik} />}
-              <Form aria-labelledby={titleId}>
+                  <UserPasswordEditor
-                <UserDetailsEditor user={user} />
+                    user={user}
-                {isCloudUser ? null : <UserAvatarEditor user={user} formik={formik} />}
+                    onShowPasswordForm={() => setShowChangePasswordForm(true)}
-                <UserPasswordEditor
-                  user={user}
-                  onShowPasswordForm={() => setShowChangePasswordForm(true)}
-                />
-                {isCloudUser ? null : (
-                  <UserSettingsEditor
-                    formik={formik}
-                    isThemeOverridden={isThemeOverridden}
-                    isOverriddenThemeDarkMode={isOverriddenThemeDarkMode}
                   />
-                )}
+                  {isCloudUser ? null : (
-              </Form>
+                    <UserSettingsEditor
-            </EuiPageTemplate>
+                      formik={formik}
+                      isThemeOverridden={isThemeOverridden}
+                      isOverriddenThemeDarkMode={isOverriddenThemeDarkMode}
+                    />
+                  )}
+                </Form>
+              </KibanaPageTemplate.Section>
+              {formChanges.count > 0 ? (
+                <KibanaPageTemplate.BottomBar paddingSize="m" position="fixed">
+                  <SaveChangesBottomBar />
+                </KibanaPageTemplate.BottomBar>
+              ) : null}
+            </KibanaPageTemplate>
           </Breadcrumb>
         </FormChangesProvider>
       </FormikProvider>

x-pack/plugins/security/public/management/role_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx

@@ -21,7 +21,7 @@ interface CreateRoleMappingButtonProps {
 export const CreateRoleMappingButton = ({ history }: CreateRoleMappingButtonProps) => {
   return (
     <EuiButton
-      iconType="plusInCircle"
+      iconType="plusInCircleFilled"
       data-test-subj="createRoleMappingButton"
       {...reactRouterNavigate(history, EDIT_ROLE_MAPPING_PATH)}
       fill

x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap

@@ -1,50 +1,53 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<RolesGridPage /> renders permission denied if required 1`] = `
-<div
+<section
-  class="euiPanel euiPanel--danger euiPanel--paddingLarge euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter emotion-euiPanel-grow-m-l-danger"
+  class="emotion-euiPageSection-l-center-danger"
-  role="main"
 >
   <div
-    class="euiPanel euiPanel--transparent euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-transparent"
+    class="emotion-euiPageSection__content-l-center"
   >
     <div
-      class="euiEmptyPrompt__main"
+      class="euiPanel euiPanel--transparent euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge emotion-euiPanel-m-transparent"
     >
       <div
-        class="euiEmptyPrompt__icon"
+        class="euiEmptyPrompt__main"
-      >
-        <span
-          color="subdued"
-          data-euiicon-type="securityApp"
-        />
-      </div>
-      <div
-        class="euiEmptyPrompt__content"
       >
         <div
-          class="euiEmptyPrompt__contentInner"
+          class="euiEmptyPrompt__icon"
         >
-          <h2
+          <span
-            class="euiTitle emotion-euiTitle-m"
+            color="subdued"
-          >
+            data-euiicon-type="securityApp"
-            You need permission to manage roles
-          </h2>
-          <div
-            class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
           />
+        </div>
+        <div
+          class="euiEmptyPrompt__content"
+        >
           <div
-            class="euiText emotion-euiText-m-euiTextColor-subdued"
+            class="euiEmptyPrompt__contentInner"
           >
-            <p
+            <h2
-              data-test-subj="permissionDeniedMessage"
+              class="euiTitle emotion-euiTitle-m"
             >
-              Contact your system administrator.
+              You need permission to manage roles
-            </p>
+            </h2>
+            <div
+              class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
+            />
+            <div
+              class="euiText emotion-euiText-m-euiTextColor-subdued"
+            >
+              <p
+                data-test-subj="permissionDeniedMessage"
+              >
+                Contact your system administrator.
+              </p>
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-</div>
+</section>
 `;

x-pack/plugins/security/public/management/roles/roles_grid/permission_denied/permission_denied.tsx

@@ -5,13 +5,13 @@
  * 2.0.
  */
 
-import { EuiEmptyPrompt, EuiPageContent_Deprecated as EuiPageContent } from '@elastic/eui';
+import { EuiEmptyPrompt, EuiPageSection } from '@elastic/eui';
 import React from 'react';
 
 import { FormattedMessage } from '@kbn/i18n-react';
 
 export const PermissionDenied = () => (
-  <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+  <EuiPageSection alignment="center" color="danger">
     <EuiEmptyPrompt
       iconType="securityApp"
       title={
@@ -31,5 +31,5 @@ export const PermissionDenied = () => (
         </p>
       }
     />
-  </EuiPageContent>
+  </EuiPageSection>
 );

x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx

@@ -13,8 +13,8 @@ import {
   EuiFlexItem,
   EuiInMemoryTable,
   EuiLink,
-  EuiPageContent_Deprecated as EuiPageContent,
   EuiPageHeader,
+  EuiPageSection,
   EuiSpacer,
   EuiSwitch,
 } from '@elastic/eui';
@@ -85,7 +85,7 @@ export class UsersGridPage extends Component<Props, State> {
     if (permissionDenied) {
       return (
         <EuiFlexGroup gutterSize="none">
-          <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+          <EuiPageSection alignment="center" color="danger">
             <EuiEmptyPrompt
               iconType="securityApp"
               title={
@@ -105,7 +105,7 @@ export class UsersGridPage extends Component<Props, State> {
                 </p>
               }
             />
-          </EuiPageContent>
+          </EuiPageSection>
         </EuiFlexGroup>
       );
     }

x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx

@@ -10,9 +10,8 @@ import {
   EuiButtonEmpty,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiPageContent_Deprecated as EuiPageContent,
-  EuiPageContentBody_Deprecated as EuiPageContentBody,
   EuiPageHeader,
+  EuiPageSection,
   EuiSpacer,
   hexToHsv,
   hsvToHex,
@@ -119,9 +118,9 @@ export class ManageSpacePage extends Component<Props, State> {
   public render() {
     if (!this.props.capabilities.spaces.manage) {
       return (
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <EuiPageSection alignment="center" color="danger">
           <UnauthorizedPrompt />
-        </EuiPageContent>
+        </EuiPageSection>
       );
     }
 
@@ -130,24 +129,24 @@ export class ManageSpacePage extends Component<Props, State> {
     }
 
     return (
-      <EuiPageContentBody restrictWidth>
+      <EuiPageSection restrictWidth>
         <EuiPageHeader pageTitle={this.getTitle()} description={getSpacesFeatureDescription()} />
         <EuiSpacer size="l" />
 
         {this.getForm()}
-      </EuiPageContentBody>
+      </EuiPageSection>
     );
   }
 
   public getLoadingIndicator = () => (
-    <EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
+    <EuiPageSection alignment="center" color="subdued">
       <SectionLoading>
         <FormattedMessage
           id="xpack.spaces.management.manageSpacePage.loadingMessage"
           defaultMessage="Loading…"
         />
       </SectionLoading>
-    </EuiPageContent>
+    </EuiPageSection>
   );
 
   public getForm = () => {

x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx

@@ -12,8 +12,8 @@ import {
   EuiInMemoryTable,
   EuiLink,
   EuiLoadingSpinner,
-  EuiPageContent_Deprecated as EuiPageContent,
   EuiPageHeader,
+  EuiPageSection,
   EuiSpacer,
   EuiText,
 } from '@elastic/eui';
@@ -108,9 +108,9 @@ export class SpacesGridPage extends Component<Props, State> {
   public getPageContent() {
     if (!this.props.capabilities.spaces.manage) {
       return (
-        <EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
+        <EuiPageSection alignment="center" color="danger">
           <UnauthorizedPrompt />
-        </EuiPageContent>
+        </EuiPageSection>
       );
     }