From 675cb579c798fba7d2f3664780dce9b60240b007 Mon Sep 17 00:00:00 2001
From: Kurt Greiner <kurt.greiner@elastic.co>
Date: Wed, 22 Jun 2022 15:41:48 -0400
Subject: [PATCH 1/5] Removing left/right padding overrides on the page
 template and the header

---
 .../public/account_management/user_profile/user_profile.tsx     | 2 --
 1 file changed, 2 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
index f0371cc8d868b..64b4e8e365a3c 100644
--- 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
@@ -513,9 +513,7 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
           <EuiPageTemplate
             style={{ backgroundColor: euiTheme.colors.emptyShade }}
             className="eui-fullHeight"
-            pageContentBodyProps={{ style: { paddingLeft: 0, paddingRight: 0 } }}
             pageHeader={{
-              style: { paddingLeft: 0, paddingRight: 0 },
               bottomBorder: true,
               pageTitle: (
                 <FormattedMessage

From f6a2e393f1a30947286b28c06ba7145e4b9e148e Mon Sep 17 00:00:00 2001
From: Kurt Greiner <kurt.greiner@elastic.co>
Date: Fri, 24 Jun 2022 13:34:17 -0400
Subject: [PATCH 2/5] Explicitly using EuiPageHeader w/ bottomBorder appears to
 match width of the content

---
 .../user_profile/user_profile.tsx             | 87 ++++++++++---------
 1 file changed, 45 insertions(+), 42 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
index 64b4e8e365a3c..b0495d5f799f2 100644
--- 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
@@ -18,6 +18,7 @@ import {
   EuiFormRow,
   EuiIcon,
   EuiIconTip,
+  EuiPageHeader,
   EuiPageTemplate,
   EuiSpacer,
   EuiText,
@@ -513,52 +514,54 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
           <EuiPageTemplate
             style={{ backgroundColor: euiTheme.colors.emptyShade }}
             className="eui-fullHeight"
-            pageHeader={{
-              bottomBorder: true,
-              pageTitle: (
-                <FormattedMessage
-                  id="xpack.security.accountManagement.userProfile.title"
-                  defaultMessage="Profile"
-                />
-              ),
-              pageTitleProps: { id: titleId },
-              rightSideItems: rightSideItems.reverse().map((item) => (
-                <EuiDescriptionList
-                  textStyle="reverse"
-                  listItems={[
-                    {
-                      title: (
-                        <EuiText color={euiTheme.colors.darkestShade} size="s">
-                          <EuiFlexGroup responsive={false} alignItems="center" gutterSize="none">
-                            <EuiFlexItem grow={false}>{item.title}</EuiFlexItem>
-                            <EuiFlexItem grow={false} style={{ marginLeft: '0.33em' }}>
-                              <EuiIconTip type="questionInCircle" content={item.helpText} />
-                            </EuiFlexItem>
-                          </EuiFlexGroup>
-                        </EuiText>
-                      ),
-                      description: (
-                        <span data-test-subj={item.testSubj}>
-                          {item.description || (
-                            <EuiText color={euiTheme.colors.disabledText} size="s">
-                              <FormattedMessage
-                                id="xpack.security.accountManagement.userProfile.noneProvided"
-                                defaultMessage="None provided"
-                              />
-                            </EuiText>
-                          )}
-                        </span>
-                      ),
-                    },
-                  ]}
-                  compressed
-                />
-              )),
-            }}
             bottomBar={formChanges.count > 0 ? <SaveChangesBottomBar /> : null}
             bottomBarProps={{ paddingSize: 'm', position: 'fixed' }}
             restrictWidth={1000}
           >
+            <EuiPageHeader
+              pageTitle={
+                <FormattedMessage
+                  id="xpack.security.accountManagement.userProfile.title"
+                  defaultMessage="Profile"
+                />
+              }
+              bottomBorder={true}
+              rightSideItems={rightSideItems.reverse().map((item) => (
+                <>
+                  <EuiDescriptionList
+                    textStyle="reverse"
+                    listItems={[
+                      {
+                        title: (
+                          <EuiText color={euiTheme.colors.darkestShade} size="s">
+                            <EuiFlexGroup responsive={false} alignItems="center" gutterSize="none">
+                              <EuiFlexItem grow={false}>{item.title}</EuiFlexItem>
+                              <EuiFlexItem grow={false} style={{ marginLeft: '0.33em' }}>
+                                <EuiIconTip type="questionInCircle" content={item.helpText} />
+                              </EuiFlexItem>
+                            </EuiFlexGroup>
+                          </EuiText>
+                        ),
+                        description: (
+                          <span data-test-subj={item.testSubj}>
+                            {item.description || (
+                              <EuiText color={euiTheme.colors.disabledText} size="s">
+                                <FormattedMessage
+                                  id="xpack.security.accountManagement.userProfile.noneProvided"
+                                  defaultMessage="None provided"
+                                />
+                              </EuiText>
+                            )}
+                          </span>
+                        ),
+                      },
+                    ]}
+                    compressed
+                  />
+                </>
+              ))}
+            />
+            <EuiSpacer />
             <Form aria-labelledby={titleId}>
               <UserDetailsEditor user={user} />
               <UserAvatarEditor user={user} formik={formik} />

From 7971e95c0f4f6d1eab483a6dcd9c661261411812 Mon Sep 17 00:00:00 2001
From: Kurt Greiner <kurt.greiner@elastic.co>
Date: Mon, 27 Jun 2022 13:23:22 -0400
Subject: [PATCH 3/5] Removing bottom border and using EuiPageTemplate
 pageHeader prop to facilitate adopting future changes

---
 .../user_profile/user_profile.tsx             | 23 ++++++++-----------
 1 file changed, 10 insertions(+), 13 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
index b0495d5f799f2..2eb351f751ab6 100644
--- 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
@@ -18,7 +18,6 @@ import {
   EuiFormRow,
   EuiIcon,
   EuiIconTip,
-  EuiPageHeader,
   EuiPageTemplate,
   EuiSpacer,
   EuiText,
@@ -514,19 +513,14 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
           <EuiPageTemplate
             style={{ backgroundColor: euiTheme.colors.emptyShade }}
             className="eui-fullHeight"
-            bottomBar={formChanges.count > 0 ? <SaveChangesBottomBar /> : null}
-            bottomBarProps={{ paddingSize: 'm', position: 'fixed' }}
-            restrictWidth={1000}
-          >
-            <EuiPageHeader
-              pageTitle={
+            pageHeader={{
+              pageTitle: (
                 <FormattedMessage
                   id="xpack.security.accountManagement.userProfile.title"
                   defaultMessage="Profile"
                 />
-              }
-              bottomBorder={true}
-              rightSideItems={rightSideItems.reverse().map((item) => (
+              ),
+              rightSideItems: rightSideItems.reverse().map((item) => (
                 <>
                   <EuiDescriptionList
                     textStyle="reverse"
@@ -559,9 +553,12 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
                     compressed
                   />
                 </>
-              ))}
-            />
-            <EuiSpacer />
+              )),
+            }}
+            bottomBar={formChanges.count > 0 ? <SaveChangesBottomBar /> : null}
+            bottomBarProps={{ paddingSize: 'm', position: 'fixed' }}
+            restrictWidth={1000}
+          >
             <Form aria-labelledby={titleId}>
               <UserDetailsEditor user={user} />
               <UserAvatarEditor user={user} formik={formik} />

From a78d0be9cd9d0c10a9056b68ca91caef658af8cf Mon Sep 17 00:00:00 2001
From: Kurt Greiner <kurt.greiner@elastic.co>
Date: Tue, 28 Jun 2022 07:55:18 -0400
Subject: [PATCH 4/5] Adding titleProps back and removing unnecessary React
 wrapper

---
 .../user_profile/user_profile.tsx             | 63 +++++++++----------
 1 file changed, 31 insertions(+), 32 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
index 2eb351f751ab6..206d024cbea9e 100644
--- 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
@@ -520,39 +520,38 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
                   defaultMessage="Profile"
                 />
               ),
+              pageTitleProps: { id: titleId },
               rightSideItems: rightSideItems.reverse().map((item) => (
-                <>
-                  <EuiDescriptionList
-                    textStyle="reverse"
-                    listItems={[
-                      {
-                        title: (
-                          <EuiText color={euiTheme.colors.darkestShade} size="s">
-                            <EuiFlexGroup responsive={false} alignItems="center" gutterSize="none">
-                              <EuiFlexItem grow={false}>{item.title}</EuiFlexItem>
-                              <EuiFlexItem grow={false} style={{ marginLeft: '0.33em' }}>
-                                <EuiIconTip type="questionInCircle" content={item.helpText} />
-                              </EuiFlexItem>
-                            </EuiFlexGroup>
-                          </EuiText>
-                        ),
-                        description: (
-                          <span data-test-subj={item.testSubj}>
-                            {item.description || (
-                              <EuiText color={euiTheme.colors.disabledText} size="s">
-                                <FormattedMessage
-                                  id="xpack.security.accountManagement.userProfile.noneProvided"
-                                  defaultMessage="None provided"
-                                />
-                              </EuiText>
-                            )}
-                          </span>
-                        ),
-                      },
-                    ]}
-                    compressed
-                  />
-                </>
+                <EuiDescriptionList
+                  textStyle="reverse"
+                  listItems={[
+                    {
+                      title: (
+                        <EuiText color={euiTheme.colors.darkestShade} size="s">
+                          <EuiFlexGroup responsive={false} alignItems="center" gutterSize="none">
+                            <EuiFlexItem grow={false}>{item.title}</EuiFlexItem>
+                            <EuiFlexItem grow={false} style={{ marginLeft: '0.33em' }}>
+                              <EuiIconTip type="questionInCircle" content={item.helpText} />
+                            </EuiFlexItem>
+                          </EuiFlexGroup>
+                        </EuiText>
+                      ),
+                      description: (
+                        <span data-test-subj={item.testSubj}>
+                          {item.description || (
+                            <EuiText color={euiTheme.colors.disabledText} size="s">
+                              <FormattedMessage
+                                id="xpack.security.accountManagement.userProfile.noneProvided"
+                                defaultMessage="None provided"
+                              />
+                            </EuiText>
+                          )}
+                        </span>
+                      ),
+                    },
+                  ]}
+                  compressed
+                />
               )),
             }}
             bottomBar={formChanges.count > 0 ? <SaveChangesBottomBar /> : null}

From 1db6989419731022ce96c83fc6134319764212dd Mon Sep 17 00:00:00 2001
From: Kurt Greiner <kurt.greiner@elastic.co>
Date: Tue, 28 Jun 2022 10:28:06 -0400
Subject: [PATCH 5/5] Removing this style so that the default light gray
 background will show through on the header and provide some contrast between
 header and body.

---
 .../public/account_management/user_profile/user_profile.tsx      | 1 -
 1 file changed, 1 deletion(-)

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
index 206d024cbea9e..cc42f10da39b9 100644
--- 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
@@ -511,7 +511,6 @@ export const UserProfile: FunctionComponent<UserProfileProps> = ({ user, data })
           ) : null}
 
           <EuiPageTemplate
-            style={{ backgroundColor: euiTheme.colors.emptyShade }}
             className="eui-fullHeight"
             pageHeader={{
               pageTitle: (