From c9a2dbce58dc22225112ad95f3808b9bf5b3a414 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 3 Sep 2024 11:21:21 -0400
Subject: [PATCH] Ux fixes for page header (#2108) (#2110)

---
 public/apps/configuration/app-router.tsx      |  7 +--
 .../panels/audit-logging/audit-logging.tsx    | 14 +++---
 .../__snapshots__/audit-logging.test.tsx.snap | 44 ++++++++++---------
 .../internal-user-edit/internal-user-edit.tsx |  1 +
 .../panels/role-edit/role-edit.tsx            |  1 +
 5 files changed, 38 insertions(+), 29 deletions(-)

diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index eb987e7a..a5f63b99 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -108,9 +108,10 @@ export const allNavPanelUrls = (multitenancyEnabled: boolean) =>
       ...(multitenancyEnabled ? [buildUrl(ResourceType.tenantsConfigureTab)] : []),
     ]);
 
-function decodeParams(params: { [k: string]: string }): any {
-  return Object.keys(params).reduce((obj: { [k: string]: string }, key: string) => {
-    obj[key] = decodeURIComponent(params[key]);
+function decodeParams(params: { [k: string]: string | undefined }): any {
+  return Object.keys(params).reduce((obj: { [k: string]: string | undefined }, key: string) => {
+    const value = params[key];
+    obj[key] = value !== undefined ? decodeURIComponent(value) : undefined;
     return obj;
   }, {});
 }
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index 1b05e42d..943a4afe 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -263,15 +263,17 @@ export function AuditLogging(props: AuditLoggingProps) {
         coreStart={props.coreStart}
         navigation={props.depsStart.navigation}
         fallBackComponent={
-          <EuiPageHeader>
-            <EuiText size="s">
-              <h1>Audit logging</h1>
-            </EuiText>
-          </EuiPageHeader>
+          <>
+            <EuiPageHeader>
+              <EuiText size="s">
+                <h1>Audit logging</h1>
+              </EuiText>
+            </EuiPageHeader>
+            <EuiSpacer />
+          </>
         }
         resourceType={ResourceType.auditLogging}
       />
-      <EuiSpacer />
       {loading ? <EuiLoadingContent /> : content}
     </div>
   );
diff --git a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
index e22e5956..6ce5f42c 100644
--- a/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
+++ b/public/apps/configuration/panels/audit-logging/test/__snapshots__/audit-logging.test.tsx.snap
@@ -273,20 +273,22 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
       }
     }
     fallBackComponent={
-      <EuiPageHeader>
-        <EuiText
-          size="s"
-        >
-          <h1>
-            Audit logging
-          </h1>
-        </EuiText>
-      </EuiPageHeader>
+      <React.Fragment>
+        <EuiPageHeader>
+          <EuiText
+            size="s"
+          >
+            <h1>
+              Audit logging
+            </h1>
+          </EuiText>
+        </EuiPageHeader>
+        <EuiSpacer />
+      </React.Fragment>
     }
     navigation={Object {}}
     resourceType="auditLogging"
   />
-  <EuiSpacer />
   <EuiPanel>
     <EuiForm>
       <EuiDescribedFormGroup
@@ -705,20 +707,22 @@ exports[`Audit logs should load access error component 1`] = `
       }
     }
     fallBackComponent={
-      <EuiPageHeader>
-        <EuiText
-          size="s"
-        >
-          <h1>
-            Audit logging
-          </h1>
-        </EuiText>
-      </EuiPageHeader>
+      <React.Fragment>
+        <EuiPageHeader>
+          <EuiText
+            size="s"
+          >
+            <h1>
+              Audit logging
+            </h1>
+          </EuiText>
+        </EuiPageHeader>
+        <EuiSpacer />
+      </React.Fragment>
     }
     navigation={Object {}}
     resourceType="auditLogging"
   />
-  <EuiSpacer />
   <AccessErrorComponent
     loading={false}
     message="You do not have permissions to configure audit logging settings"
diff --git a/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx b/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
index 6b5c7aa9..ce67d0c1 100644
--- a/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
+++ b/public/apps/configuration/panels/internal-user-edit/internal-user-edit.tsx
@@ -194,6 +194,7 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
         }
         resourceType={ResourceType.users}
         subAction={TITLE_TEXT_DICT[props.action]}
+        pageTitle={props.sourceUserName}
       />
       <PanelWithHeader headerText="Credentials">
         <EuiForm>
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index ef4a104f..0ec79109 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -281,6 +281,7 @@ export function RoleEdit(props: RoleEditDeps) {
         descriptionControls={descriptionData}
         resourceType={ResourceType.roles}
         subAction={TITLE_TEXT_DICT[props.action]}
+        pageTitle={props.sourceRoleName}
       />
       <PanelWithHeader headerText="Name">
         <EuiForm>