Migrates all security and spaces usage of deprecated Eui Page compone…

…nts (elastic#167078) Closes elastic#161419 ## Summary Replaces deprecated EuiPage*_Deprecated components with the suggested replacement components (see [issue](elastic#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="https://github.com/elastic/kibana/assets/103939324/58d2a86e-63b7-4c7d-bcf1-2071290d25b2"> New render: <img width="1286" alt="Screenshot 2023-09-22 at 2 56 44 PM" src="https://github.com/elastic/kibana/assets/103939324/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 <[email protected]>
Heenawter · Sep 29, 2023 · 90faf2b · 90faf2b
1 parent d4b7a48
commit 90faf2b
Show file tree

Hide file tree

Showing 7 changed files with 79 additions and 75 deletions.
diff --git a/x-pack/plugins/security/public/account_management/user_profile/user_profile.tsx b/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
-              className="eui-fullHeight"
-              pageHeader={{
-                pageTitle: (
+            <KibanaPageTemplate className="eui-fullHeight" restrictWidth={1000}>
+              <KibanaPageTemplate.Header
+                pageTitle={
                   <FormattedMessage
                     id="xpack.security.accountManagement.userProfile.title"
                     defaultMessage="Profile"
                   />
-                ),
-                pageTitleProps: { id: titleId },
-                rightSideItems: rightSideItems.reverse().map((item) => (
+                }
+                id={titleId}
+                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}
-              bottomBarProps={{ paddingSize: 'm', position: 'fixed' }}
-              restrictWidth={1000}
-            >
-              <Form aria-labelledby={titleId}>
-                <UserDetailsEditor user={user} />
-                {isCloudUser ? null : <UserAvatarEditor user={user} formik={formik} />}
-                <UserPasswordEditor
-                  user={user}
-                  onShowPasswordForm={() => setShowChangePasswordForm(true)}
-                />
-                {isCloudUser ? null : (
-                  <UserSettingsEditor
-                    formik={formik}
-                    isThemeOverridden={isThemeOverridden}
-                    isOverriddenThemeDarkMode={isOverriddenThemeDarkMode}
+                ))}
+              />
+              <KibanaPageTemplate.Section>
+                <Form aria-labelledby={titleId}>
+                  <UserDetailsEditor user={user} />
+                  {isCloudUser ? null : <UserAvatarEditor user={user} formik={formik} />}
+                  <UserPasswordEditor
+                    user={user}
+                    onShowPasswordForm={() => setShowChangePasswordForm(true)}
                   />
-                )}
-              </Form>
-            </EuiPageTemplate>
+                  {isCloudUser ? null : (
+                    <UserSettingsEditor
+                      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>

diff --git a/...ole_mappings/role_mappings_grid/create_role_mapping_button/create_role_mapping_button.tsx b/...ole_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

diff --git a/...s/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap b/...s/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap
diff --git a/...ugins/security/public/management/roles/roles_grid/permission_denied/permission_denied.tsx b/...ugins/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>
 );
diff --git a/x-pack/plugins/security/public/management/users/users_grid/users_grid_page.tsx b/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>
       );
     }

diff --git a/x-pack/plugins/spaces/public/management/edit_space/manage_space_page.tsx b/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 = () => {

diff --git a/x-pack/plugins/spaces/public/management/spaces_grid/spaces_grid_page.tsx b/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>
       );
     }