From de18a7c5eb765352002805c5d4f8bbd94650b23c Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Tue, 6 Aug 2024 23:09:20 -0400
Subject: [PATCH 01/24] Adds initial commit to add header components and
 modifies get started and user list pages

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../header/header-components.tsx              |  69 +++++++++
 .../configuration/header/header-props.tsx     |  40 +++++
 .../apps/configuration/panels/get-started.tsx |  41 +++++-
 .../apps/configuration/panels/user-list.tsx   | 139 +++++++++++++-----
 4 files changed, 243 insertions(+), 46 deletions(-)
 create mode 100644 public/apps/configuration/header/header-components.tsx
 create mode 100644 public/apps/configuration/header/header-props.tsx

diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
new file mode 100644
index 00000000..67162001
--- /dev/null
+++ b/public/apps/configuration/header/header-components.tsx
@@ -0,0 +1,69 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
+import { EuiTitle } from '@elastic/eui';
+import { ControlProps, DescriptionProps, TitleProps } from './header-props';
+
+// controlType should be one of: https://github.com/AMoo-Miki/OpenSearch-Dashboards/blob/header-collective/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx#L91
+
+export const HeaderButtonOrLink = React.memo((props: ControlProps) => {
+  const { HeaderControl } = props.navigation.ui;
+
+  return (
+    <HeaderControl
+      setMountPoint={props.application.setAppRightControls}
+      controls={props.controls}
+      className={props.className}
+    />
+  );
+});
+
+export const HeaderTitle = React.memo((props: TitleProps) => {
+  const { HeaderControl } = props.navigation.ui;
+  const titleData: TopNavControlData[] = [
+    {
+      renderComponent: (
+        <EuiTitle size="l">
+          <h1>
+            {props.pageHeader}
+            {props.shouldDisplayCount ? ` (${props.count})` : null}
+          </h1>
+        </EuiTitle>
+      ),
+    },
+  ];
+
+  return (
+    <HeaderControl
+      setMountPoint={props.application.setAppLeftControls}
+      controls={titleData}
+      className={props.className}
+    />
+  );
+});
+
+export const HeaderDescription = React.memo((props: DescriptionProps) => {
+  const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
+
+  return (
+    <HeaderControl
+      setMountPoint={props.application.setAppDescriptionControls}
+      controls={props.controls}
+      className={props.className}
+    />
+  );
+});
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
new file mode 100644
index 00000000..b65aeb8e
--- /dev/null
+++ b/public/apps/configuration/header/header-props.tsx
@@ -0,0 +1,40 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import { ApplicationStart } from 'opensearch-dashboards/public';
+import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
+import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
+
+export interface HeaderProps {
+  navigation: NavigationPublicPluginStart;
+  className?: string;
+  application: ApplicationStart;
+}
+
+export interface ControlProps extends HeaderProps {
+  controls: TopNavControlData[];
+  // mount: (menuMount: MountPoint | undefined) => void;
+}
+
+export interface TitleProps extends HeaderProps {
+  pageHeader: string;
+  shouldDisplayCount?: boolean;
+  count?: number;
+}
+
+export interface DescriptionProps extends HeaderProps {
+  description: string;
+  controls: TopNavControlData[];
+}
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index 4918bc16..4b13f173 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -39,6 +39,7 @@ import { createSuccessToast, createUnknownErrorToast, useToastState } from '../u
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { DataSourceContext } from '../app-router';
 import { getClusterInfo } from '../../../utils/datasource-utils';
+import { HeaderButtonOrLink, HeaderTitle } from '../header/header-components';
 
 const addBackendStep = {
   title: 'Add backends',
@@ -165,6 +166,8 @@ export function GetStarted(props: AppDependencies) {
   const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
   let steps;
   if (props.config.ui.backend_configurable) {
     steps = [addBackendStep, ...setOfSteps];
@@ -173,6 +176,17 @@ export function GetStarted(props: AppDependencies) {
   }
   const [toasts, addToast, removeToast] = useToastState();
 
+  const buttonData = [
+    {
+      label: 'Open in new window',
+      isLoading: false,
+      href: buildHashUrl(),
+      iconType: 'popout',
+      iconSide: 'right',
+      type: 'button',
+      // target: "_blank"
+    },
+  ];
   return (
     <>
       <div className="panel-restrict-width">
@@ -182,12 +196,27 @@ export function GetStarted(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Get started</h1>
-          </EuiTitle>
-          <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
-        </EuiPageHeader>
+        {updatedUX ? (
+          <>
+            <HeaderTitle
+              navigation={props.depsStart.navigation}
+              pageHeader="Get started with access control"
+              application={props.coreStart.application}
+            />
+            <HeaderButtonOrLink
+              navigation={props.depsStart.navigation}
+              controls={buttonData}
+              application={props.coreStart.application}
+            />
+          </>
+        ) : (
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Get started</h1>
+            </EuiTitle>
+            <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
+          </EuiPageHeader>
+        )}
 
         <EuiPanel paddingSize="l">
           <EuiText size="s" color="subdued">
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index 1d1aedf3..b71e1234 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -33,6 +33,7 @@ import {
 } from '@elastic/eui';
 import { Dictionary, difference, isEmpty, map } from 'lodash';
 import React, { useContext, useState } from 'react';
+import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
 import { getAuthInfo } from '../../../utils/auth-info-utils';
 import { AppDependencies } from '../../types';
 import { API_ENDPOINT_INTERNALUSERS, DocLinks } from '../constants';
@@ -52,6 +53,7 @@ import { buildHashUrl } from '../utils/url-builder';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { AccessErrorComponent } from '../access-error-component';
+import { HeaderButtonOrLink, HeaderTitle, HeaderDescription } from '../header/header-components';
 
 export function dictView(items: Dictionary<string>) {
   if (isEmpty(items)) {
@@ -204,6 +206,37 @@ export function UserList(props: AppDependencies) {
 
   const [actionsMenu, closeActionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
 
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const buttonData = [
+    {
+      label: 'Create internal user',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.users, Action.create),
+      fill: true,
+      iconType: 'plus',
+      iconSide: 'left',
+      type: 'button',
+      testId: 'create-user',
+      // target: "_blank"
+    },
+  ];
+  const descriptionData: TopNavControlData[] = [
+    {
+      isLoading: loading,
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          The Security plugin includes an internal user database. Use this database in place of, or
+          in addition to, an external <br /> authentication system such as LDAP server or Active
+          Directory. You can map an internal user to a role from{' '}
+          <EuiLink href={buildHashUrl(ResourceType.roles)}>Roles</EuiLink>
+          . First, click <br /> into the detail page of the role. Then, under “Mapped users”, click
+          “Manage mapping” <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const userLen = Query.execute(query || '', userData).length;
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -212,52 +245,77 @@ export function UserList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Internal users</h1>
-        </EuiTitle>
-      </EuiPageHeader>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader="Internal Users"
+            shouldDisplayCount={true}
+            count={userLen}
+            application={props.coreStart.application}
+          />
+          <HeaderDescription
+            navigation={props.depsStart.navigation}
+            description=""
+            application={props.coreStart.application}
+            controls={descriptionData}
+          />
+          <HeaderButtonOrLink
+            navigation={props.depsStart.navigation}
+            controls={buttonData}
+            application={props.coreStart.application}
+          />
+        </>
+      ) : (
+        <EuiPageHeader>
+          <EuiTitle size="l">
+            <h1>Internal users</h1>
+          </EuiTitle>
+        </EuiPageHeader>
+      )}
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="s">
-                <h3>
-                  Internal users
-                  <span className="panel-header-count">
-                    {' '}
-                    ({Query.execute(query || '', userData).length})
-                  </span>
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs" color="subdued">
-                The Security plugin includes an internal user database. Use this database in place
-                of, or in addition to, an external authentication system such as LDAP server or
-                Active Directory. You can map an internal user to a role from{' '}
-                <EuiLink href={buildHashUrl(ResourceType.roles)}>Roles</EuiLink>
-                . First, click into the detail page of the role. Then, under “Mapped users”, click
-                “Manage mapping” <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
-              </EuiText>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup>
-                <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiSmallButton
-                    fill
-                    href={buildHashUrl(ResourceType.users, Action.create)}
-                    data-test-subj="create-user"
-                  >
-                    Create internal user
-                  </EuiSmallButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+          {updatedUX ? null : (
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Internal users
+                    <span className="panel-header-count">
+                      {' '}
+                      ({Query.execute(query || '', userData).length})
+                    </span>
+                  </h3>
+                </EuiTitle>
+                <EuiText size="xs" color="subdued">
+                  The Security plugin includes an internal user database. Use this database in place
+                  of, or in addition to, an external authentication system such as LDAP server or
+                  Active Directory. You can map an internal user to a role from{' '}
+                  <EuiLink href={buildHashUrl(ResourceType.roles)}>Roles</EuiLink>
+                  . First, click into the detail page of the role. Then, under “Mapped users”, click
+                  “Manage mapping” <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup>
+                  <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiSmallButton
+                      fill
+                      href={buildHashUrl(ResourceType.users, Action.create)}
+                      data-test-subj="create-user"
+                    >
+                      Create internal user
+                    </EuiSmallButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          )}
           <EuiPageBody>
             <EuiInMemoryTable
               tableLayout={'auto'}
@@ -273,6 +331,7 @@ export function UserList(props: AppDependencies) {
                   setQuery(arg.query);
                   return true;
                 },
+                toolsRight: updatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               // @ts-ignore
               selection={{ onSelectionChange: setSelection }}

From a773c6a5e172f3dc2d19d9f9d267f2bcab127978 Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Tue, 6 Aug 2024 23:49:08 -0400
Subject: [PATCH 02/24] Updates auth-view page

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/auth-view/auth-view.tsx            | 90 ++++++++++++++-----
 .../panels/auth-view/instruction-view.tsx     |  4 +-
 2 files changed, 70 insertions(+), 24 deletions(-)

diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index 8022ca26..83715e65 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -26,6 +26,7 @@ import { InstructionView } from './instruction-view';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
+import { HeaderButtonOrLink, HeaderTitle } from '../../header/header-components';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
@@ -60,6 +61,21 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
+
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
+  const buttonData = [
+    {
+      label: 'Manage via config.yml',
+      isLoading: false,
+      href: DocLinks.BackendConfigurationDoc,
+      iconType: 'popout',
+      iconSide: 'right',
+      type: 'button',
+      // target: "_blank"
+    },
+  ];
+
   if (isEmpty(authentication) && !loading) {
     return (
       <>
@@ -69,18 +85,34 @@ export function AuthView(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        {accessErrorFlag ? (
-          <EuiTitle size="l">
-            <h1>Authentication and authorization</h1>
-          </EuiTitle>
-        ) : null}
-        {accessErrorFlag ? (
-          <AccessErrorComponent
-            loading={loading}
-            dataSourceLabel={dataSource && dataSource.label}
-          />
+        { updatedUX ? (
+          <>
+            <HeaderTitle
+              navigation={props.depsStart.navigation}
+              pageHeader="Authentication and authorization"
+              application={props.coreStart.application}
+            />
+            { accessErrorFlag ? (
+              <AccessErrorComponent
+                loading={loading}
+                dataSourceLabel={dataSource && dataSource.label}
+              />
+            ) : (
+              <InstructionView config={props.config} />
+            )}
+            
+          </>
         ) : (
-          <InstructionView config={props.config} />
+          <>
+            <EuiTitle size="l">
+              <h1>Authentication and authorization</h1>
+            </EuiTitle>
+            { accessErrorFlag ? <AccessErrorComponent
+                loading={loading}
+                dataSourceLabel={dataSource && dataSource.label}
+              /> : <InstructionView config={props.config}/>
+              }
+          </>
         )}
       </>
     );
@@ -94,17 +126,31 @@ export function AuthView(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Authentication and authorization</h1>
-        </EuiTitle>
-        {!loading && !errorFlag && props.config.ui.backend_configurable && (
-          <ExternalLinkButton
-            href={DocLinks.BackendConfigurationDoc}
-            text="Manage via config.yml"
-          />
-        )}
-      </EuiPageHeader>
+      {updatedUX ? (
+          <>
+            <HeaderTitle
+              navigation={props.depsStart.navigation}
+              pageHeader="Authentication and authorization"
+              application={props.coreStart.application}
+            />
+            <HeaderButtonOrLink
+              navigation={props.depsStart.navigation}
+              controls={buttonData}
+              application={props.coreStart.application}
+            />
+          </>
+        ) : (
+        <EuiPageHeader>
+          <EuiTitle size="l">
+            <h1>Authentication and authorization</h1>
+          </EuiTitle>
+          {!loading && !errorFlag && props.config.ui.backend_configurable && (
+            <ExternalLinkButton
+              href={DocLinks.BackendConfigurationDoc}
+              text="Manage via config.yml"
+            />
+          )}
+      </EuiPageHeader>)}
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
diff --git a/public/apps/configuration/panels/auth-view/instruction-view.tsx b/public/apps/configuration/panels/auth-view/instruction-view.tsx
index c06383e2..20985f01 100644
--- a/public/apps/configuration/panels/auth-view/instruction-view.tsx
+++ b/public/apps/configuration/panels/auth-view/instruction-view.tsx
@@ -22,9 +22,9 @@ import { DocLinks } from '../../constants';
 export function InstructionView(props: { config: ClientConfigType }) {
   return (
     <>
-      <EuiTitle size="l">
+      {/* <EuiTitle size="l">
         <h1>Authentication and authorization</h1>
-      </EuiTitle>
+      </EuiTitle> */}
 
       <EuiSpacer size="xxl" />
 

From 128d15c97cc66b8ede9906fe7953780d3a03546b Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Wed, 7 Aug 2024 00:13:42 -0400
Subject: [PATCH 03/24] Updates user edit and create pages

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/auth-view/auth-view.tsx            | 44 ++++++------
 .../panels/auth-view/instruction-view.tsx     |  6 +-
 .../internal-user-edit/internal-user-edit.tsx | 69 ++++++++++++++-----
 .../apps/configuration/panels/user-list.tsx   |  3 +-
 4 files changed, 76 insertions(+), 46 deletions(-)

diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index 83715e65..c1db7e44 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -61,7 +61,6 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
-
   const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   const buttonData = [
@@ -85,14 +84,14 @@ export function AuthView(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        { updatedUX ? (
+        {updatedUX ? (
           <>
             <HeaderTitle
               navigation={props.depsStart.navigation}
               pageHeader="Authentication and authorization"
               application={props.coreStart.application}
             />
-            { accessErrorFlag ? (
+            {accessErrorFlag ? (
               <AccessErrorComponent
                 loading={loading}
                 dataSourceLabel={dataSource && dataSource.label}
@@ -100,18 +99,20 @@ export function AuthView(props: AppDependencies) {
             ) : (
               <InstructionView config={props.config} />
             )}
-            
           </>
         ) : (
           <>
             <EuiTitle size="l">
               <h1>Authentication and authorization</h1>
             </EuiTitle>
-            { accessErrorFlag ? <AccessErrorComponent
+            {accessErrorFlag ? (
+              <AccessErrorComponent
                 loading={loading}
                 dataSourceLabel={dataSource && dataSource.label}
-              /> : <InstructionView config={props.config}/>
-              }
+              />
+            ) : (
+              <InstructionView config={props.config} />
+            )}
           </>
         )}
       </>
@@ -127,19 +128,19 @@ export function AuthView(props: AppDependencies) {
         selectedDataSource={dataSource}
       />
       {updatedUX ? (
-          <>
-            <HeaderTitle
-              navigation={props.depsStart.navigation}
-              pageHeader="Authentication and authorization"
-              application={props.coreStart.application}
-            />
-            <HeaderButtonOrLink
-              navigation={props.depsStart.navigation}
-              controls={buttonData}
-              application={props.coreStart.application}
-            />
-          </>
-        ) : (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader="Authentication and authorization"
+            application={props.coreStart.application}
+          />
+          <HeaderButtonOrLink
+            navigation={props.depsStart.navigation}
+            controls={buttonData}
+            application={props.coreStart.application}
+          />
+        </>
+      ) : (
         <EuiPageHeader>
           <EuiTitle size="l">
             <h1>Authentication and authorization</h1>
@@ -150,7 +151,8 @@ export function AuthView(props: AppDependencies) {
               text="Manage via config.yml"
             />
           )}
-      </EuiPageHeader>)}
+        </EuiPageHeader>
+      )}
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
diff --git a/public/apps/configuration/panels/auth-view/instruction-view.tsx b/public/apps/configuration/panels/auth-view/instruction-view.tsx
index 20985f01..0e53938e 100644
--- a/public/apps/configuration/panels/auth-view/instruction-view.tsx
+++ b/public/apps/configuration/panels/auth-view/instruction-view.tsx
@@ -13,7 +13,7 @@
  *   permissions and limitations under the License.
  */
 
-import { EuiCode, EuiSpacer, EuiText, EuiTitle } from '@elastic/eui';
+import { EuiCode, EuiSpacer, EuiText } from '@elastic/eui';
 import React from 'react';
 import { ClientConfigType } from '../../../../types';
 import { ExternalLinkButton } from '../../utils/display-utils';
@@ -22,10 +22,6 @@ import { DocLinks } from '../../constants';
 export function InstructionView(props: { config: ClientConfigType }) {
   return (
     <>
-      {/* <EuiTitle size="l">
-        <h1>Authentication and authorization</h1>
-      </EuiTitle> */}
-
       <EuiSpacer size="xxl" />
 
       <EuiText textAlign="center">
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 5b122f38..73c57272 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
@@ -49,6 +49,7 @@ import { constructErrorMessageAndLog } from '../../../error-utils';
 import { BackendRolePanel } from './backend-role-panel';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { HeaderTitle, HeaderDescription } from '../../header/header-components';
 
 interface InternalUserEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -147,6 +148,20 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
     }
   };
 
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          The security plugin includes an internal user database. Use this database in place of, or
+          in addition to, an external <br /> authentication system such as LDAP or Active Directory.{' '}
+          <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -155,24 +170,42 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-      <EuiSpacer />
-      <EuiPageHeader>
-        <EuiFlexGroup direction="column" gutterSize="xs">
-          <EuiFlexItem>
-            <EuiTitle size="l">
-              <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-            </EuiTitle>
-          </EuiFlexItem>
-          <EuiFlexItem>
-            <EuiText size="xs" color="subdued">
-              The security plugin includes an internal user database. Use this database in place of,
-              or in addition to, an external authentication system such as LDAP or Active Directory.{' '}
-              <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-            </EuiText>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPageHeader>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader={TITLE_TEXT_DICT[props.action]}
+            application={props.coreStart.application}
+          />
+          <HeaderDescription
+            navigation={props.depsStart.navigation}
+            description=""
+            application={props.coreStart.application}
+            controls={descriptionData}
+          />
+        </>
+      ) : (
+        <>
+          {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
+          <EuiSpacer />
+          <EuiPageHeader>
+            <EuiFlexGroup direction="column" gutterSize="xs">
+              <EuiFlexItem>
+                <EuiTitle size="l">
+                  <h1>{TITLE_TEXT_DICT[props.action]}</h1>
+                </EuiTitle>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiText size="xs" color="subdued">
+                  The security plugin includes an internal user database. Use this database in place
+                  of, or in addition to, an external authentication system such as LDAP or Active
+                  Directory. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                </EuiText>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageHeader>
+        </>
+      )}
       <PanelWithHeader headerText="Credentials">
         <EuiForm>
           <NameRow
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index b71e1234..88c3218c 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -33,7 +33,6 @@ import {
 } from '@elastic/eui';
 import { Dictionary, difference, isEmpty, map } from 'lodash';
 import React, { useContext, useState } from 'react';
-import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
 import { getAuthInfo } from '../../../utils/auth-info-utils';
 import { AppDependencies } from '../../types';
 import { API_ENDPOINT_INTERNALUSERS, DocLinks } from '../constants';
@@ -220,7 +219,7 @@ export function UserList(props: AppDependencies) {
       // target: "_blank"
     },
   ];
-  const descriptionData: TopNavControlData[] = [
+  const descriptionData = [
     {
       isLoading: loading,
       renderComponent: (

From cfc92998fc21db7f2f17d0a182cdc0139ee25623 Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Wed, 7 Aug 2024 00:38:25 -0400
Subject: [PATCH 04/24] Updates user permissions page

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../permission-list/permission-list.tsx       | 122 +++++++++++++-----
 .../apps/configuration/utils/context-menu.tsx |   7 +-
 2 files changed, 93 insertions(+), 36 deletions(-)

diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 17116dd3..5539eef9 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -65,6 +65,7 @@ import { DocLinks } from '../../constants';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { AccessErrorComponent } from '../../access-error-component';
+import { HeaderTitle, HeaderDescription, HeaderButtonOrLink } from '../../header/header-components';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -353,12 +354,41 @@ export function PermissionList(props: AppDependencies) {
     </EuiSmallButtonEmpty>,
   ];
 
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
   const [createActionGroupMenu] = useContextMenuState(
     'Create action group',
     { fill: true },
-    createActionGroupMenuItems
+    createActionGroupMenuItems,
+    updatedUX
   );
 
+  const buttonData = [
+    {
+      isLoading: loading,
+      renderComponent: <EuiFlexItem>{createActionGroupMenu}</EuiFlexItem>,
+    },
+  ];
+
+  const descriptionData = [
+    {
+      isLoading: loading,
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          Permissions are individual actions, such as cluster:admin/snapshot/restore, which lets you
+          restore snapshots. Action groups <br />
+          are reusable collections of permissions, such as MANAGE_SNAPSHOTS, which lets you view,
+          take, delete, and restore <br />
+          snapshots. You can often meet your security needs using the default action groups, but you
+          might find it convenient to create <br />
+          your own. <ExternalLink href={DocLinks.PermissionsDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const permissionLen = Query.execute(query || '', permissionList).length;
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -367,44 +397,69 @@ export function PermissionList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Permissions</h1>
-        </EuiTitle>
-      </EuiPageHeader>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader="Permissions"
+            shouldDisplayCount={true}
+            count={permissionLen}
+            application={props.coreStart.application}
+          />
+          <HeaderDescription
+            navigation={props.depsStart.navigation}
+            description=""
+            application={props.coreStart.application}
+            controls={descriptionData}
+          />
+          <HeaderButtonOrLink
+            navigation={props.depsStart.navigation}
+            controls={buttonData}
+            application={props.coreStart.application}
+          />
+        </>
+      ) : (
+        <EuiPageHeader>
+          <EuiTitle size="l">
+            <h1>Permissions</h1>
+          </EuiTitle>
+        </EuiPageHeader>
+      )}
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="s">
-                <h3>
-                  Permissions
-                  <span className="panel-header-count">
-                    {' '}
-                    ({Query.execute(query || '', permissionList).length})
-                  </span>
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs" color="subdued">
-                Permissions are individual actions, such as cluster:admin/snapshot/restore, which
-                lets you restore snapshots. Action groups are reusable collections of permissions,
-                such as MANAGE_SNAPSHOTS, which lets you view, take, delete, and restore snapshots.
-                You can often meet your security needs using the default action groups, but you
-                might find it convenient to create your own.{' '}
-                <ExternalLink href={DocLinks.PermissionsDoc} />
-              </EuiText>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup>
-                <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-                <EuiFlexItem>{createActionGroupMenu}</EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+          {updatedUX ? null : (
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Permissions
+                    <span className="panel-header-count">
+                      {' '}
+                      ({Query.execute(query || '', permissionList).length})
+                    </span>
+                  </h3>
+                </EuiTitle>
+                <EuiText size="xs" color="subdued">
+                  Permissions are individual actions, such as cluster:admin/snapshot/restore, which
+                  lets you restore snapshots. Action groups are reusable collections of permissions,
+                  such as MANAGE_SNAPSHOTS, which lets you view, take, delete, and restore
+                  snapshots. You can often meet your security needs using the default action groups,
+                  but you might find it convenient to create your own.{' '}
+                  <ExternalLink href={DocLinks.PermissionsDoc} />
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup>
+                  <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+                  <EuiFlexItem>{createActionGroupMenu}</EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          )}
           <EuiPageBody>
             <EuiInMemoryTable
               tableLayout={'auto'}
@@ -423,6 +478,7 @@ export function PermissionList(props: AppDependencies) {
                   setQuery(arg.query);
                   return true;
                 },
+                toolsRight: updatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               selection={{ onSelectionChange: setSelection }}
               sorting={{ sort: { field: 'type', direction: 'asc' } }}
diff --git a/public/apps/configuration/utils/context-menu.tsx b/public/apps/configuration/utils/context-menu.tsx
index b0a199a8..aeb44a76 100644
--- a/public/apps/configuration/utils/context-menu.tsx
+++ b/public/apps/configuration/utils/context-menu.tsx
@@ -27,15 +27,16 @@ import React from 'react';
 export function useContextMenuState(
   buttonText: string,
   buttonProps: EuiButtonProps,
-  children: React.ReactElement[]
+  children: React.ReactElement[],
+  updatedUX?: boolean
 ): [React.ReactElement, () => void] {
   const [isContextMenuOpen, setContextMenuOpen] = useState<boolean>(false);
   const closeContextMenu = () => setContextMenuOpen(false);
 
   const button = (
     <EuiSmallButton
-      iconType="arrowDown"
-      iconSide="right"
+      iconType={updatedUX ? 'plus' : 'arrowDown'}
+      iconSide={updatedUX ? 'left' : 'right'}
       onClick={() => {
         setContextMenuOpen(true);
       }}

From baea892e685b6d00ba43e309cf9cc46441349e69 Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Wed, 7 Aug 2024 01:03:22 -0400
Subject: [PATCH 05/24] Updates dashboards tenancy page

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/tenant-list/manage_tab.tsx         | 24 +++++++-
 .../panels/tenant-list/tenant-list.tsx        | 59 +++++++++++++++----
 2 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index 1d9a4918..758a4da0 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -75,6 +75,7 @@ import { buildUrl } from '../../utils/url-builder';
 import { CrossPageToast } from '../../cross-page-toast';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { AccessErrorComponent } from '../../access-error-component';
+import { HeaderButtonOrLink } from '../../header/header-components';
 
 export function ManageTab(props: AppDependencies) {
   const setGlobalBreadcrumbs = flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs);
@@ -503,6 +504,20 @@ export function ManageTab(props: AppDependencies) {
       />
     );
   }
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const createTenantButton = [
+    {
+      id: 'createTenant',
+      label: 'Creat tenant',
+      iconType: 'plus',
+      iconSide: 'left',
+      isLoading: false,
+      run: () => showEditModal('', Action.create, ''),
+      type: 'button',
+      fill: true,
+      // target: "_blank"
+    },
+  ];
   /* eslint-disable */
   return (
     <>
@@ -528,6 +543,13 @@ export function ManageTab(props: AppDependencies) {
           <EuiPageContentHeaderSection>
             <EuiFlexGroup>
               <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+              { updatedUX ? 
+                <HeaderButtonOrLink
+                  navigation={props.depsStart.navigation}
+                  controls={createTenantButton}
+                  application={props.coreStart.application}
+                />
+              : 
               <EuiFlexItem>
                 <EuiSmallButton
                   id="createTenant"
@@ -536,7 +558,7 @@ export function ManageTab(props: AppDependencies) {
                 >
                   Create tenant
                 </EuiSmallButton>
-              </EuiFlexItem>
+              </EuiFlexItem>}
             </EuiFlexGroup>
           </EuiPageContentHeaderSection>
         </EuiPageContentHeader>
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index f804f09d..1a2e8428 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -32,6 +32,7 @@ import { DocLinks } from '../../constants';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { HeaderTitle, HeaderDescription } from '../../header/header-components';
 
 interface TenantListProps extends AppDependencies {
   tabID: string;
@@ -127,6 +128,21 @@ export function TenantList(props: TenantListProps) {
     ));
   };
 
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
+          Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
+          dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely sharing
+          your work with other OpenSearch Dashboards users. You can control which roles have access
+          to a tenant and whether those roles have read or write access.{' '}
+          <ExternalLink href={DocLinks.MultiTenancyDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -135,18 +151,37 @@ export function TenantList(props: TenantListProps) {
         setDataSource={() => {}}
         selectedDataSource={LocalCluster}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Dashboards multi-tenancy</h1>
-        </EuiTitle>
-      </EuiPageHeader>
-      <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
-        Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
-        dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely sharing
-        your work with other OpenSearch Dashboards users. You can control which roles have access to
-        a tenant and whether those roles have read or write access.{' '}
-        <ExternalLink href={DocLinks.MultiTenancyDoc} />
-      </EuiText>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader="Dashboards multi-tenancy"
+            application={props.coreStart.application}
+          />
+          <HeaderDescription
+            navigation={props.depsStart.navigation}
+            description=""
+            application={props.coreStart.application}
+            controls={descriptionData}
+          />
+        </>
+      ) : (
+        <>
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Dashboards multi-tenancy</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+          <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
+            Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
+            dashboards, and other OpenSearch
+            <br /> Dashboards objects. Tenants are useful for safely sharing your work with other
+            OpenSearch Dashboards users. You can control <br />
+            which roles have access to a tenant and whether those roles have read or write access.{' '}
+            <ExternalLink href={DocLinks.MultiTenancyDoc} />
+          </EuiText>
+        </>
+      )}
 
       <EuiTabs>{renderTabs()}</EuiTabs>
       {!isMultiTenancyEnabled && selectedTabId === 'Manage' && tenancyDisabledWarning}

From 451e95790866dd5210a6b7a21cdfef3a837e944e Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Wed, 7 Aug 2024 01:08:31 -0400
Subject: [PATCH 06/24] Updates dashboards audit logs page

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/audit-logging/audit-logging.tsx    | 20 ++++++++++++++-----
 1 file changed, 15 insertions(+), 5 deletions(-)

diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index 4db10637..a7a1449a 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -49,6 +49,7 @@ import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
+import { HeaderTitle } from '../../header/header-components';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -249,6 +250,7 @@ export function AuditLogging(props: AuditLoggingProps) {
       </>
     );
   }
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   return (
     <div className="panel-restrict-width">
@@ -258,11 +260,19 @@ export function AuditLogging(props: AuditLoggingProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h3>Audit logging</h3>
-        </EuiTitle>
-      </EuiPageHeader>
+      {updatedUX ? (
+        <HeaderTitle
+          navigation={props.depsStart.navigation}
+          pageHeader="Audit Logs"
+          application={props.coreStart.application}
+        />
+      ) : (
+        <EuiPageHeader>
+          <EuiTitle size="l">
+            <h3>Audit logging</h3>
+          </EuiTitle>
+        </EuiPageHeader>
+      )}
       <EuiSpacer />
       {loading ? <EuiLoadingContent /> : content}
     </div>

From d4e5da3f0023f8d717b197f9eef21a5f3d8ea02f Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Wed, 7 Aug 2024 14:30:44 -0400
Subject: [PATCH 07/24] Updates roles and related pages

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/role-edit/role-edit.tsx            |  63 ++++++--
 .../apps/configuration/panels/role-list.tsx   | 141 +++++++++++++-----
 .../panels/role-view/role-view.tsx            |  90 +++++++++--
 .../apps/configuration/utils/context-menu.tsx |   2 +-
 4 files changed, 233 insertions(+), 63 deletions(-)

diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index e025cda0..efe0b27d 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -59,6 +59,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { NameRow } from '../../utils/name-row';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
+import { HeaderDescription, HeaderTitle } from '../../header/header-components';
 
 interface RoleEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -233,6 +234,23 @@ export function RoleEdit(props: RoleEditDeps) {
 
   const tenantOptions = tenantNames.map(stringToComboBoxOption);
 
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
+  const descriptionData = [
+    {
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          Roles are the core way of controlling access to your cluster. Roles contain any
+          combination of cluster-wide permission, index-
+          <br />
+          specific permissions, document- and field-level security, and tenants. Then you map users
+          to these roles so that users <br />
+          gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -241,19 +259,38 @@ export function RoleEdit(props: RoleEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-      <EuiPageHeader>
-        <EuiText size="xs" color="subdued" className="panel-header-subtext">
-          <EuiTitle size="m">
-            <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-          </EuiTitle>
-          Roles are the core way of controlling access to your cluster. Roles contain any
-          combination of cluster-wide permission, index-specific permissions, document- and
-          field-level security, and tenants. Once you&apos;ve created the role, you can map users to
-          the roles so that users gain those permissions.{' '}
-          <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-        </EuiText>
-      </EuiPageHeader>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader={TITLE_TEXT_DICT[props.action]}
+            application={props.coreStart.application}
+          />
+          <HeaderDescription
+            navigation={props.depsStart.navigation}
+            description=""
+            application={props.coreStart.application}
+            controls={descriptionData}
+          />
+        </>
+      ) : (
+        <>
+          {' '}
+          {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
+          <EuiPageHeader>
+            <EuiText size="xs" color="subdued" className="panel-header-subtext">
+              <EuiTitle size="m">
+                <h1>{TITLE_TEXT_DICT[props.action]}</h1>
+              </EuiTitle>
+              Roles are the core way of controlling access to your cluster. Roles contain any
+              combination of cluster-wide permission, index-specific permissions, document- and
+              field-level security, and tenants. Once you&apos;ve created the role, you can map
+              users to the roles so that users gain those permissions.{' '}
+              <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+            </EuiText>
+          </EuiPageHeader>
+        </>
+      )}
       <PanelWithHeader headerText="Name">
         <EuiForm>
           <NameRow
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 2d7e2a85..b256d520 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -58,6 +58,7 @@ import { DocLinks } from '../constants';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { AccessErrorComponent } from '../access-error-component';
+import { HeaderTitle, HeaderDescription, HeaderButtonOrLink } from '../header/header-components';
 
 const columns: Array<EuiBasicTableColumn<RoleListing>> = [
   {
@@ -198,6 +199,9 @@ export function RoleList(props: AppDependencies) {
 
   const [searchOptions, setSearchOptions] = useState<EuiSearchBarProps>({});
   const [query, setQuery] = useState<Query | null>(null);
+
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+
   useEffect(() => {
     setSearchOptions({
       onChange: (arg) => {
@@ -260,6 +264,37 @@ export function RoleList(props: AppDependencies) {
     });
   }, [roleData]);
 
+  const buttonData = [
+    {
+      label: 'Create role',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.roles, Action.create),
+      fill: true,
+      iconType: 'plus',
+      iconSide: 'left',
+      type: 'button',
+      testId: 'create-role',
+      // target: "_blank"
+    },
+  ];
+  const descriptionData = [
+    {
+      isLoading: loading,
+      renderComponent: (
+        <EuiText size="xs" color="subdued">
+          Roles are the core way of controlling access to your cluster. Roles contain any
+          combination of cluster-wide permission, index-
+          <br />
+          specific permissions, document- and field-level security, and tenants. Then you map users
+          to these roles so that users <br />
+          gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+        </EuiText>
+      ),
+    },
+  ];
+
+  const roleLen = Query.execute(query || '', roleData).length;
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -268,50 +303,75 @@ export function RoleList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      <EuiPageHeader>
-        <EuiTitle size="l">
-          <h1>Roles</h1>
-        </EuiTitle>
-      </EuiPageHeader>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader="Roles"
+            shouldDisplayCount={true}
+            count={roleLen}
+            application={props.coreStart.application}
+          />
+          <HeaderDescription
+            navigation={props.depsStart.navigation}
+            description=""
+            application={props.coreStart.application}
+            controls={descriptionData}
+          />
+          <HeaderButtonOrLink
+            navigation={props.depsStart.navigation}
+            controls={buttonData}
+            application={props.coreStart.application}
+          />
+        </>
+      ) : (
+        <EuiPageHeader>
+          <EuiTitle size="l">
+            <h1>Roles</h1>
+          </EuiTitle>
+        </EuiPageHeader>
+      )}
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          <EuiPageContentHeader id="role-table-container">
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="s">
-                <h3>
-                  Roles
-                  <span className="panel-header-count">
-                    {' '}
-                    ({Query.execute(query || '', roleData).length})
-                  </span>
-                </h3>
-              </EuiTitle>
-              <EuiText size="xs" color="subdued">
-                Roles are the core way of controlling access to your cluster. Roles contain any
-                combination of cluster-wide permission, index-specific permissions, document- and
-                field-level security, and tenants. Then you map users to these roles so that users
-                gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-              </EuiText>
-            </EuiPageContentHeaderSection>
-            <EuiPageContentHeaderSection>
-              <EuiFlexGroup>
-                <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-                <EuiFlexItem>
-                  <EuiSmallButton
-                    fill
-                    href={buildHashUrl(ResourceType.roles, Action.create)}
-                    data-test-subj="create-role"
-                  >
-                    Create role
-                  </EuiSmallButton>
-                </EuiFlexItem>
-              </EuiFlexGroup>
-            </EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
+          {updatedUX ? null : (
+            <EuiPageContentHeader id="role-table-container">
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="s">
+                  <h3>
+                    Roles
+                    <span className="panel-header-count">
+                      {' '}
+                      ({Query.execute(query || '', roleData).length})
+                    </span>
+                  </h3>
+                </EuiTitle>
+                <EuiText size="xs" color="subdued">
+                  Roles are the core way of controlling access to your cluster. Roles contain any
+                  combination of cluster-wide permission, index-specific permissions, document- and
+                  field-level security, and tenants. Then you map users to these roles so that users
+                  gain those permissions. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                </EuiText>
+              </EuiPageContentHeaderSection>
+              <EuiPageContentHeaderSection>
+                <EuiFlexGroup>
+                  <EuiFlexItem>{actionsMenu}</EuiFlexItem>
+                  <EuiFlexItem>
+                    <EuiSmallButton
+                      fill
+                      href={buildHashUrl(ResourceType.roles, Action.create)}
+                      data-test-subj="create-role"
+                    >
+                      Create role
+                    </EuiSmallButton>
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+              </EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          )}
           <EuiPageBody>
             <EuiInMemoryTable
               data-test-subj="role-list"
@@ -323,7 +383,10 @@ export function RoleList(props: AppDependencies) {
               pagination={true}
               selection={{ onSelectionChange: setSelection }}
               sorting={true}
-              search={searchOptions}
+              search={{
+                ...searchOptions,
+                toolsRight: updatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
+              }}
               error={errorFlag ? 'Load data failed, please check console log for more detail.' : ''}
               message={showTableStatusMessage(loading, roleData)}
             />
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 7e41f27c..14564dbb 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -72,6 +72,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { HeaderTitle, HeaderButtonOrLink } from '../../header/header-components';
 
 interface RoleViewProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -378,6 +379,7 @@ export function RoleView(props: RoleViewProps) {
     </EuiSmallButtonEmpty>,
   ];
   const [actionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
+  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   if (isReserved) {
     pageActions = <EuiSmallButton href={duplicateRoleLink}>Duplicate role</EuiSmallButton>;
@@ -394,6 +396,58 @@ export function RoleView(props: RoleViewProps) {
     );
   }
 
+  const reservedRoleButtons = [
+    {
+      label: 'Duplicate role',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
+      type: 'button',
+      fill: true,
+      // target: "_blank"
+    },
+  ];
+  const roleButtons = [
+    {
+      isLoading: false,
+      run: async () => {
+        try {
+          await requestDeleteRoles(props.coreStart.http, [props.roleName], dataSource.id);
+          setCrossPageToast(buildUrl(ResourceType.roles), {
+            id: 'deleteRole',
+            color: 'success',
+            title: `${props.roleName} deleted ${getClusterInfo(dataSourceEnabled, dataSource)}`,
+          });
+          window.location.href = buildHashUrl(ResourceType.roles);
+        } catch (e) {
+          addToast(createUnknownErrorToast('deleteRole', 'delete role'));
+        }
+      },
+      iconType: 'trash',
+      color: 'danger',
+      type: 'button', // this should be icon, but icons current do not support a border currently
+      testId: 'delete',
+      ariaLabel: 'delete',
+      // target: "_blank"
+    },
+    {
+      label: 'Duplicate',
+      isLoading: false,
+      href: duplicateRoleLink,
+      type: 'button',
+      // target: "_blank"
+    },
+    {
+      label: 'Edit role',
+      isLoading: false,
+      href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
+      fill: true,
+      type: 'button',
+      // target: "_blank"
+    },
+  ];
+
+  const roleView = isReserved ? reservedRoleButtons : roleButtons;
+
   return (
     <>
       <SecurityPluginTopNavMenu
@@ -402,18 +456,34 @@ export function RoleView(props: RoleViewProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(props.roleName)}
-
-      <EuiPageContentHeader>
-        <EuiPageContentHeaderSection>
-          <EuiTitle size="l">
-            <h1>{props.roleName}</h1>
-          </EuiTitle>
-        </EuiPageContentHeaderSection>
+      {updatedUX ? (
+        <>
+          <HeaderTitle
+            navigation={props.depsStart.navigation}
+            pageHeader={props.roleName}
+            application={props.coreStart.application}
+          />
+          <HeaderButtonOrLink
+            navigation={props.depsStart.navigation}
+            controls={roleView}
+            application={props.coreStart.application}
+          />
+        </>
+      ) : (
+        <>
+          {props.buildBreadcrumbs(props.roleName)}
 
-        <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
-      </EuiPageContentHeader>
+          <EuiPageContentHeader>
+            <EuiPageContentHeaderSection>
+              <EuiTitle size="l">
+                <h1>{props.roleName}</h1>
+              </EuiTitle>
+            </EuiPageContentHeaderSection>
 
+            <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
+          </EuiPageContentHeader>
+        </>
+      )}
       <EuiTabbedContent
         tabs={tabs}
         initialSelectedTab={
diff --git a/public/apps/configuration/utils/context-menu.tsx b/public/apps/configuration/utils/context-menu.tsx
index aeb44a76..7a5eee74 100644
--- a/public/apps/configuration/utils/context-menu.tsx
+++ b/public/apps/configuration/utils/context-menu.tsx
@@ -38,7 +38,7 @@ export function useContextMenuState(
       iconType={updatedUX ? 'plus' : 'arrowDown'}
       iconSide={updatedUX ? 'left' : 'right'}
       onClick={() => {
-        setContextMenuOpen(true);
+        setContextMenuOpen(!isContextMenuOpen);
       }}
       {...buttonProps}
     >

From f4f6278db07ba0ed084c36944145595b2c8ab38c Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Wed, 7 Aug 2024 14:39:47 -0400
Subject: [PATCH 08/24] Updates variable name and fixes indentation

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/audit-logging/audit-logging.tsx     |  4 ++--
 .../panels/auth-view/auth-view.tsx             |  6 +++---
 .../apps/configuration/panels/get-started.tsx  |  4 ++--
 .../internal-user-edit/internal-user-edit.tsx  |  4 ++--
 .../panels/permission-list/permission-list.tsx | 10 +++++-----
 .../panels/role-edit/role-edit.tsx             |  4 ++--
 public/apps/configuration/panels/role-list.tsx | 14 +++++---------
 .../panels/role-view/role-view.tsx             |  4 ++--
 .../panels/tenant-list/manage_tab.tsx          |  4 ++--
 .../panels/tenant-list/tenant-list.tsx         | 18 +++++++++---------
 public/apps/configuration/panels/user-list.tsx | 13 +++++--------
 .../apps/configuration/utils/context-menu.tsx  |  6 +++---
 12 files changed, 42 insertions(+), 49 deletions(-)

diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index a7a1449a..744d886c 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -250,7 +250,7 @@ export function AuditLogging(props: AuditLoggingProps) {
       </>
     );
   }
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   return (
     <div className="panel-restrict-width">
@@ -260,7 +260,7 @@ export function AuditLogging(props: AuditLoggingProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <HeaderTitle
           navigation={props.depsStart.navigation}
           pageHeader="Audit Logs"
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index c1db7e44..c8afc91f 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -61,7 +61,7 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   const buttonData = [
     {
@@ -84,7 +84,7 @@ export function AuthView(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        {updatedUX ? (
+        {useUpdatedUX ? (
           <>
             <HeaderTitle
               navigation={props.depsStart.navigation}
@@ -127,7 +127,7 @@ export function AuthView(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index 4b13f173..23c6ab67 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -166,7 +166,7 @@ export function GetStarted(props: AppDependencies) {
   const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   let steps;
   if (props.config.ui.backend_configurable) {
@@ -196,7 +196,7 @@ export function GetStarted(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        {updatedUX ? (
+        {useUpdatedUX ? (
           <>
             <HeaderTitle
               navigation={props.depsStart.navigation}
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 73c57272..228b242c 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
@@ -148,7 +148,7 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
     }
   };
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   const descriptionData = [
     {
@@ -170,7 +170,7 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 5539eef9..6e3bbdff 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -354,13 +354,13 @@ export function PermissionList(props: AppDependencies) {
     </EuiSmallButtonEmpty>,
   ];
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   const [createActionGroupMenu] = useContextMenuState(
     'Create action group',
     { fill: true },
     createActionGroupMenuItems,
-    updatedUX
+    useUpdatedUX
   );
 
   const buttonData = [
@@ -397,7 +397,7 @@ export function PermissionList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
@@ -431,7 +431,7 @@ export function PermissionList(props: AppDependencies) {
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          {updatedUX ? null : (
+          {useUpdatedUX ? null : (
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle size="s">
@@ -478,7 +478,7 @@ export function PermissionList(props: AppDependencies) {
                   setQuery(arg.query);
                   return true;
                 },
-                toolsRight: updatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
+                toolsRight: useUpdatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               selection={{ onSelectionChange: setSelection }}
               sorting={{ sort: { field: 'type', direction: 'asc' } }}
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index efe0b27d..43e71497 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -234,7 +234,7 @@ export function RoleEdit(props: RoleEditDeps) {
 
   const tenantOptions = tenantNames.map(stringToComboBoxOption);
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   const descriptionData = [
     {
@@ -259,7 +259,7 @@ export function RoleEdit(props: RoleEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index b256d520..79d0792f 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -200,8 +200,6 @@ export function RoleList(props: AppDependencies) {
   const [searchOptions, setSearchOptions] = useState<EuiSearchBarProps>({});
   const [query, setQuery] = useState<Query | null>(null);
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
-
   useEffect(() => {
     setSearchOptions({
       onChange: (arg) => {
@@ -264,6 +262,7 @@ export function RoleList(props: AppDependencies) {
     });
   }, [roleData]);
 
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
   const buttonData = [
     {
       label: 'Create role',
@@ -303,7 +302,7 @@ export function RoleList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
@@ -337,16 +336,13 @@ export function RoleList(props: AppDependencies) {
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          {updatedUX ? null : (
+          {useUpdatedUX ? null : (
             <EuiPageContentHeader id="role-table-container">
               <EuiPageContentHeaderSection>
                 <EuiTitle size="s">
                   <h3>
                     Roles
-                    <span className="panel-header-count">
-                      {' '}
-                      ({Query.execute(query || '', roleData).length})
-                    </span>
+                    <span className="panel-header-count"> ({roleLen})</span>
                   </h3>
                 </EuiTitle>
                 <EuiText size="xs" color="subdued">
@@ -385,7 +381,7 @@ export function RoleList(props: AppDependencies) {
               sorting={true}
               search={{
                 ...searchOptions,
-                toolsRight: updatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
+                toolsRight: useUpdatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               error={errorFlag ? 'Load data failed, please check console log for more detail.' : ''}
               message={showTableStatusMessage(loading, roleData)}
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 14564dbb..0e857600 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -379,7 +379,7 @@ export function RoleView(props: RoleViewProps) {
     </EuiSmallButtonEmpty>,
   ];
   const [actionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   if (isReserved) {
     pageActions = <EuiSmallButton href={duplicateRoleLink}>Duplicate role</EuiSmallButton>;
@@ -456,7 +456,7 @@ export function RoleView(props: RoleViewProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index 758a4da0..c5307dd1 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -504,7 +504,7 @@ export function ManageTab(props: AppDependencies) {
       />
     );
   }
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
   const createTenantButton = [
     {
       id: 'createTenant',
@@ -543,7 +543,7 @@ export function ManageTab(props: AppDependencies) {
           <EuiPageContentHeaderSection>
             <EuiFlexGroup>
               <EuiFlexItem>{actionsMenu}</EuiFlexItem>
-              { updatedUX ? 
+              { useUpdatedUX ? 
                 <HeaderButtonOrLink
                   navigation={props.depsStart.navigation}
                   controls={createTenantButton}
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index 1a2e8428..70ee1b86 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -128,15 +128,16 @@ export function TenantList(props: TenantListProps) {
     ));
   };
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
   const descriptionData = [
     {
       renderComponent: (
         <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
           Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
-          dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely sharing
-          your work with other OpenSearch Dashboards users. You can control which roles have access
-          to a tenant and whether those roles have read or write access.{' '}
+          dashboards, and other OpenSearch
+          <br /> Dashboards objects. Tenants are useful for safely sharing your work with other
+          OpenSearch Dashboards users. You can control <br />
+          which roles have access to a tenant and whether those roles have read or write access.{' '}
           <ExternalLink href={DocLinks.MultiTenancyDoc} />
         </EuiText>
       ),
@@ -151,7 +152,7 @@ export function TenantList(props: TenantListProps) {
         setDataSource={() => {}}
         selectedDataSource={LocalCluster}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
@@ -174,10 +175,9 @@ export function TenantList(props: TenantListProps) {
           </EuiPageHeader>
           <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
             Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
-            dashboards, and other OpenSearch
-            <br /> Dashboards objects. Tenants are useful for safely sharing your work with other
-            OpenSearch Dashboards users. You can control <br />
-            which roles have access to a tenant and whether those roles have read or write access.{' '}
+            dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely
+            sharing your work with other OpenSearch Dashboards users. You can control which roles
+            have access to a tenant and whether those roles have read or write access.{' '}
             <ExternalLink href={DocLinks.MultiTenancyDoc} />
           </EuiText>
         </>
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index 88c3218c..239f5b9a 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -205,7 +205,7 @@ export function UserList(props: AppDependencies) {
 
   const [actionsMenu, closeActionsMenu] = useContextMenuState('Actions', {}, actionsMenuItems);
 
-  const updatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
+  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
   const buttonData = [
     {
       label: 'Create internal user',
@@ -244,7 +244,7 @@ export function UserList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {updatedUX ? (
+      {useUpdatedUX ? (
         <>
           <HeaderTitle
             navigation={props.depsStart.navigation}
@@ -278,16 +278,13 @@ export function UserList(props: AppDependencies) {
         <AccessErrorComponent loading={loading} dataSourceLabel={dataSource && dataSource.label} />
       ) : (
         <EuiPageContent>
-          {updatedUX ? null : (
+          {useUpdatedUX ? null : (
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle size="s">
                   <h3>
                     Internal users
-                    <span className="panel-header-count">
-                      {' '}
-                      ({Query.execute(query || '', userData).length})
-                    </span>
+                    <span className="panel-header-count"> ({userLen})</span>
                   </h3>
                 </EuiTitle>
                 <EuiText size="xs" color="subdued">
@@ -330,7 +327,7 @@ export function UserList(props: AppDependencies) {
                   setQuery(arg.query);
                   return true;
                 },
-                toolsRight: updatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
+                toolsRight: useUpdatedUX ? [<EuiFlexItem>{actionsMenu}</EuiFlexItem>] : undefined,
               }}
               // @ts-ignore
               selection={{ onSelectionChange: setSelection }}
diff --git a/public/apps/configuration/utils/context-menu.tsx b/public/apps/configuration/utils/context-menu.tsx
index 7a5eee74..aea6ae5a 100644
--- a/public/apps/configuration/utils/context-menu.tsx
+++ b/public/apps/configuration/utils/context-menu.tsx
@@ -28,15 +28,15 @@ export function useContextMenuState(
   buttonText: string,
   buttonProps: EuiButtonProps,
   children: React.ReactElement[],
-  updatedUX?: boolean
+  useUpdatedUX?: boolean
 ): [React.ReactElement, () => void] {
   const [isContextMenuOpen, setContextMenuOpen] = useState<boolean>(false);
   const closeContextMenu = () => setContextMenuOpen(false);
 
   const button = (
     <EuiSmallButton
-      iconType={updatedUX ? 'plus' : 'arrowDown'}
-      iconSide={updatedUX ? 'left' : 'right'}
+      iconType={useUpdatedUX ? 'plus' : 'arrowDown'}
+      iconSide={useUpdatedUX ? 'left' : 'right'}
       onClick={() => {
         setContextMenuOpen(!isContextMenuOpen);
       }}

From 67c4f245f643e9c1645e885509a881526b5aafea Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Aug 2024 15:26:34 -0400
Subject: [PATCH 09/24] Push logic into new component

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../header/header-components.tsx              | 27 +++++++++++++-
 .../configuration/header/header-props.tsx     | 21 ++++-------
 .../apps/configuration/panels/get-started.tsx | 37 ++++++-------------
 3 files changed, 45 insertions(+), 40 deletions(-)

diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index 67162001..62da6d6b 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -16,7 +16,7 @@
 import React from 'react';
 import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
 import { EuiTitle } from '@elastic/eui';
-import { ControlProps, DescriptionProps, TitleProps } from './header-props';
+import { ControlProps, DescriptionProps, HeaderProps, TitleProps } from './header-props';
 
 // controlType should be one of: https://github.com/AMoo-Miki/OpenSearch-Dashboards/blob/header-collective/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx#L91
 
@@ -67,3 +67,28 @@ export const HeaderDescription = React.memo((props: DescriptionProps) => {
     />
   );
 });
+
+export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps) => {
+  const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
+  const useNewUx = props.coreStart.chrome.navGroup.getNavGroupEnabled();
+  if (useNewUx) {
+    return (
+      <>
+      {props.descriptionControls ? <HeaderControl
+        setMountPoint={props.coreStart.application.setAppDescriptionControls}
+        controls={props.descriptionControls}
+      /> : null}
+      {props.controlControls ? <HeaderControl
+        setMountPoint={props.coreStart.application.setAppRightControls}
+        controls={props.controlControls}
+      /> : null}
+      </>
+    );
+
+  } else {
+    return props.fallBackComponent;
+  }
+
+  
+
+}
\ No newline at end of file
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index b65aeb8e..dbadcd33 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -13,28 +13,21 @@
  *   permissions and limitations under the License.
  */
 
-import { ApplicationStart } from 'opensearch-dashboards/public';
+import { CoreStart } from 'opensearch-dashboards/public';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
 
 export interface HeaderProps {
   navigation: NavigationPublicPluginStart;
-  className?: string;
-  application: ApplicationStart;
+  coreStart: CoreStart;
+  fallBackComponent: JSX.Element
 }
 
-export interface ControlProps extends HeaderProps {
-  controls: TopNavControlData[];
+export interface ControlProps {
+  controlControls?: TopNavControlData[];
   // mount: (menuMount: MountPoint | undefined) => void;
 }
 
-export interface TitleProps extends HeaderProps {
-  pageHeader: string;
-  shouldDisplayCount?: boolean;
-  count?: number;
-}
-
-export interface DescriptionProps extends HeaderProps {
-  description: string;
-  controls: TopNavControlData[];
+export interface DescriptionProps {
+  descriptionControls?: TopNavControlData[];
 }
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index 23c6ab67..796ec1b6 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -39,7 +39,7 @@ import { createSuccessToast, createUnknownErrorToast, useToastState } from '../u
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { DataSourceContext } from '../app-router';
 import { getClusterInfo } from '../../../utils/datasource-utils';
-import { HeaderButtonOrLink, HeaderTitle } from '../header/header-components';
+import { HeaderButtonOrLink, HeaderTitle, PageHeader } from '../header/header-components';
 
 const addBackendStep = {
   title: 'Add backends',
@@ -166,8 +166,6 @@ export function GetStarted(props: AppDependencies) {
   const dataSourceEnabled = !!props.depsStart.dataSource?.dataSourceEnabled;
   const { dataSource, setDataSource } = useContext(DataSourceContext)!;
 
-  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
-
   let steps;
   if (props.config.ui.backend_configurable) {
     steps = [addBackendStep, ...setOfSteps];
@@ -196,28 +194,17 @@ export function GetStarted(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        {useUpdatedUX ? (
-          <>
-            <HeaderTitle
-              navigation={props.depsStart.navigation}
-              pageHeader="Get started with access control"
-              application={props.coreStart.application}
-            />
-            <HeaderButtonOrLink
-              navigation={props.depsStart.navigation}
-              controls={buttonData}
-              application={props.coreStart.application}
-            />
-          </>
-        ) : (
-          <EuiPageHeader>
-            <EuiTitle size="l">
-              <h1>Get started</h1>
-            </EuiTitle>
-            <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
-          </EuiPageHeader>
-        )}
-
+        <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        controlControls={buttonData}
+        fallBackComponent={<EuiPageHeader>
+          <EuiTitle size="l">
+            <h1>Get started</h1>
+          </EuiTitle>
+          <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
+        </EuiPageHeader>}
+        />
         <EuiPanel paddingSize="l">
           <EuiText size="s" color="subdued">
             <p>

From 8309c6625171dfdd97e1801ede0bc8a8ba067563 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Aug 2024 15:26:50 -0400
Subject: [PATCH 10/24] Lint

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../header/header-components.tsx              | 26 +++++++++----------
 .../configuration/header/header-props.tsx     |  2 +-
 .../apps/configuration/panels/get-started.tsx | 22 +++++++++-------
 3 files changed, 26 insertions(+), 24 deletions(-)

diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index 62da6d6b..a4bd9d83 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -74,21 +74,21 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
   if (useNewUx) {
     return (
       <>
-      {props.descriptionControls ? <HeaderControl
-        setMountPoint={props.coreStart.application.setAppDescriptionControls}
-        controls={props.descriptionControls}
-      /> : null}
-      {props.controlControls ? <HeaderControl
-        setMountPoint={props.coreStart.application.setAppRightControls}
-        controls={props.controlControls}
-      /> : null}
+        {props.descriptionControls ? (
+          <HeaderControl
+            setMountPoint={props.coreStart.application.setAppDescriptionControls}
+            controls={props.descriptionControls}
+          />
+        ) : null}
+        {props.controlControls ? (
+          <HeaderControl
+            setMountPoint={props.coreStart.application.setAppRightControls}
+            controls={props.controlControls}
+          />
+        ) : null}
       </>
     );
-
   } else {
     return props.fallBackComponent;
   }
-
-  
-
-}
\ No newline at end of file
+};
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index dbadcd33..aee1878c 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -20,7 +20,7 @@ import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/to
 export interface HeaderProps {
   navigation: NavigationPublicPluginStart;
   coreStart: CoreStart;
-  fallBackComponent: JSX.Element
+  fallBackComponent: JSX.Element;
 }
 
 export interface ControlProps {
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index 796ec1b6..fb7355b8 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -39,7 +39,7 @@ import { createSuccessToast, createUnknownErrorToast, useToastState } from '../u
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { DataSourceContext } from '../app-router';
 import { getClusterInfo } from '../../../utils/datasource-utils';
-import { HeaderButtonOrLink, HeaderTitle, PageHeader } from '../header/header-components';
+import { PageHeader } from '../header/header-components';
 
 const addBackendStep = {
   title: 'Add backends',
@@ -195,15 +195,17 @@ export function GetStarted(props: AppDependencies) {
           selectedDataSource={dataSource}
         />
         <PageHeader
-        navigation={props.depsStart.navigation}
-        coreStart={props.coreStart}
-        controlControls={buttonData}
-        fallBackComponent={<EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Get started</h1>
-          </EuiTitle>
-          <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
-        </EuiPageHeader>}
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          controlControls={buttonData}
+          fallBackComponent={
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>Get started</h1>
+              </EuiTitle>
+              <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
+            </EuiPageHeader>
+          }
         />
         <EuiPanel paddingSize="l">
           <EuiText size="s" color="subdued">

From 9f8b026254a9f22a91635734bb234a012cd8c84a Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Aug 2024 15:45:01 -0400
Subject: [PATCH 11/24] Migrate audit logging and tenant tabs to new page
 header

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../audit-logging-edit-settings.tsx           | 33 ++++++++----
 .../panels/audit-logging/audit-logging.tsx    | 27 +++++-----
 .../panels/tenant-list/tenant-list.tsx        | 53 ++++++++-----------
 3 files changed, 57 insertions(+), 56 deletions(-)

diff --git a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
index 7f2ab07a..1f90442b 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
@@ -38,6 +38,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { PageHeader } from '../../header/header-components';
 
 interface AuditLoggingEditSettingProps extends AppDependencies {
   setting: 'general' | 'compliance';
@@ -155,11 +156,17 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
   const renderComplianceSetting = () => {
     return (
       <>
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Compliance settings</h1>
-          </EuiTitle>
-        </EuiPageHeader>
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          fallBackComponent={
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>Compliance settings</h1>
+              </EuiTitle>
+            </EuiPageHeader>
+          }
+        />
 
         <EuiPanel>
           <EditSettingGroup
@@ -207,11 +214,17 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
   const renderGeneralSettings = () => {
     return (
       <>
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>General settings</h1>
-          </EuiTitle>
-        </EuiPageHeader>
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          fallBackComponent={
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>General settings</h1>
+              </EuiTitle>
+            </EuiPageHeader>
+          }
+        />
 
         <EuiPanel>
           <EditSettingGroup
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index 744d886c..0eb46b61 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -49,7 +49,7 @@ import { DocLinks } from '../../constants';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
-import { HeaderTitle } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 interface AuditLoggingProps extends AppDependencies {
   fromType: string;
@@ -250,7 +250,6 @@ export function AuditLogging(props: AuditLoggingProps) {
       </>
     );
   }
-  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
 
   return (
     <div className="panel-restrict-width">
@@ -260,19 +259,17 @@ export function AuditLogging(props: AuditLoggingProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <HeaderTitle
-          navigation={props.depsStart.navigation}
-          pageHeader="Audit Logs"
-          application={props.coreStart.application}
-        />
-      ) : (
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h3>Audit logging</h3>
-          </EuiTitle>
-        </EuiPageHeader>
-      )}
+      <PageHeader
+        coreStart={props.coreStart}
+        navigation={props.depsStart.navigation}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h3>Audit logging</h3>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+      />
       <EuiSpacer />
       {loading ? <EuiLoadingContent /> : content}
     </div>
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index 70ee1b86..1a64e38a 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -32,7 +32,7 @@ import { DocLinks } from '../../constants';
 import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
-import { HeaderTitle, HeaderDescription } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 interface TenantListProps extends AppDependencies {
   tabID: string;
@@ -152,36 +152,27 @@ export function TenantList(props: TenantListProps) {
         setDataSource={() => {}}
         selectedDataSource={LocalCluster}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader="Dashboards multi-tenancy"
-            application={props.coreStart.application}
-          />
-          <HeaderDescription
-            navigation={props.depsStart.navigation}
-            description=""
-            application={props.coreStart.application}
-            controls={descriptionData}
-          />
-        </>
-      ) : (
-        <>
-          <EuiPageHeader>
-            <EuiTitle size="l">
-              <h1>Dashboards multi-tenancy</h1>
-            </EuiTitle>
-          </EuiPageHeader>
-          <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
-            Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
-            dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely
-            sharing your work with other OpenSearch Dashboards users. You can control which roles
-            have access to a tenant and whether those roles have read or write access.{' '}
-            <ExternalLink href={DocLinks.MultiTenancyDoc} />
-          </EuiText>
-        </>
-      )}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        fallBackComponent={
+          <>
+            <EuiPageHeader>
+              <EuiTitle size="l">
+                <h1>Dashboards multi-tenancy</h1>
+              </EuiTitle>
+            </EuiPageHeader>
+            <EuiText size="s" color="subdued" grow={true} textAlign={'left'}>
+              Tenants in OpenSearch Dashboards are spaces for saving index patterns, visualizations,
+              dashboards, and other OpenSearch Dashboards objects. Tenants are useful for safely
+              sharing your work with other OpenSearch Dashboards users. You can control which roles
+              have access to a tenant and whether those roles have read or write access.{' '}
+              <ExternalLink href={DocLinks.MultiTenancyDoc} />
+            </EuiText>
+          </>
+        }
+      />
 
       <EuiTabs>{renderTabs()}</EuiTabs>
       {!isMultiTenancyEnabled && selectedTabId === 'Manage' && tenancyDisabledWarning}

From 0b4b9e8acc5865e4a67a34103b4e162c0f9d9ff9 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Aug 2024 16:39:56 -0400
Subject: [PATCH 12/24] Migrate all tabs to new component

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../panels/auth-view/auth-view.tsx            | 88 +++++++------------
 .../internal-user-edit/internal-user-edit.tsx | 67 ++++++--------
 .../permission-list/permission-list.tsx       | 43 +++------
 .../panels/role-edit/role-edit.tsx            | 57 +++++-------
 .../apps/configuration/panels/role-list.tsx   | 43 +++------
 .../panels/role-view/role-view.tsx            | 46 ++++------
 .../panels/tenant-list/tenant-list.tsx        |  1 -
 .../apps/configuration/panels/user-list.tsx   | 43 +++------
 8 files changed, 145 insertions(+), 243 deletions(-)

diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index c8afc91f..ce96223b 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -26,7 +26,7 @@ import { InstructionView } from './instruction-view';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
-import { HeaderButtonOrLink, HeaderTitle } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
@@ -61,8 +61,6 @@ export function AuthView(props: AppDependencies) {
     fetchData();
   }, [props.coreStart.http, dataSource]);
 
-  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
-
   const buttonData = [
     {
       label: 'Manage via config.yml',
@@ -84,36 +82,22 @@ export function AuthView(props: AppDependencies) {
           setDataSource={setDataSource}
           selectedDataSource={dataSource}
         />
-        {useUpdatedUX ? (
-          <>
-            <HeaderTitle
-              navigation={props.depsStart.navigation}
-              pageHeader="Authentication and authorization"
-              application={props.coreStart.application}
-            />
-            {accessErrorFlag ? (
-              <AccessErrorComponent
-                loading={loading}
-                dataSourceLabel={dataSource && dataSource.label}
-              />
-            ) : (
-              <InstructionView config={props.config} />
-            )}
-          </>
-        ) : (
-          <>
+        <PageHeader
+          navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+          fallBackComponent={
             <EuiTitle size="l">
               <h1>Authentication and authorization</h1>
             </EuiTitle>
-            {accessErrorFlag ? (
-              <AccessErrorComponent
-                loading={loading}
-                dataSourceLabel={dataSource && dataSource.label}
-              />
-            ) : (
-              <InstructionView config={props.config} />
-            )}
-          </>
+          }
+        />
+        {accessErrorFlag ? (
+          <AccessErrorComponent
+            loading={loading}
+            dataSourceLabel={dataSource && dataSource.label}
+          />
+        ) : (
+          <InstructionView config={props.config} />
         )}
       </>
     );
@@ -127,32 +111,24 @@ export function AuthView(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader="Authentication and authorization"
-            application={props.coreStart.application}
-          />
-          <HeaderButtonOrLink
-            navigation={props.depsStart.navigation}
-            controls={buttonData}
-            application={props.coreStart.application}
-          />
-        </>
-      ) : (
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Authentication and authorization</h1>
-          </EuiTitle>
-          {!loading && !errorFlag && props.config.ui.backend_configurable && (
-            <ExternalLinkButton
-              href={DocLinks.BackendConfigurationDoc}
-              text="Manage via config.yml"
-            />
-          )}
-        </EuiPageHeader>
-      )}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        controlControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Authentication and authorization</h1>
+            </EuiTitle>
+            {!loading && !errorFlag && props.config.ui.backend_configurable && (
+              <ExternalLinkButton
+                href={DocLinks.BackendConfigurationDoc}
+                text="Manage via config.yml"
+              />
+            )}
+          </EuiPageHeader>
+        }
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
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 228b242c..66edb73e 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
@@ -49,7 +49,7 @@ import { constructErrorMessageAndLog } from '../../../error-utils';
 import { BackendRolePanel } from './backend-role-panel';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
-import { HeaderTitle, HeaderDescription } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 interface InternalUserEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -148,8 +148,6 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
     }
   };
 
-  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
-
   const descriptionData = [
     {
       renderComponent: (
@@ -170,42 +168,33 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader={TITLE_TEXT_DICT[props.action]}
-            application={props.coreStart.application}
-          />
-          <HeaderDescription
-            navigation={props.depsStart.navigation}
-            description=""
-            application={props.coreStart.application}
-            controls={descriptionData}
-          />
-        </>
-      ) : (
-        <>
-          {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-          <EuiSpacer />
-          <EuiPageHeader>
-            <EuiFlexGroup direction="column" gutterSize="xs">
-              <EuiFlexItem>
-                <EuiTitle size="l">
-                  <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-                </EuiTitle>
-              </EuiFlexItem>
-              <EuiFlexItem>
-                <EuiText size="xs" color="subdued">
-                  The security plugin includes an internal user database. Use this database in place
-                  of, or in addition to, an external authentication system such as LDAP or Active
-                  Directory. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-                </EuiText>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPageHeader>
-        </>
-      )}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        fallBackComponent={
+          <>
+            {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
+            <EuiSpacer />
+            <EuiPageHeader>
+              <EuiFlexGroup direction="column" gutterSize="xs">
+                <EuiFlexItem>
+                  <EuiTitle size="l">
+                    <h1>{TITLE_TEXT_DICT[props.action]}</h1>
+                  </EuiTitle>
+                </EuiFlexItem>
+                <EuiFlexItem>
+                  <EuiText size="xs" color="subdued">
+                    The security plugin includes an internal user database. Use this database in
+                    place of, or in addition to, an external authentication system such as LDAP or
+                    Active Directory. <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+                  </EuiText>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiPageHeader>
+          </>
+        }
+      />
       <PanelWithHeader headerText="Credentials">
         <EuiForm>
           <NameRow
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 6e3bbdff..8406f005 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -65,7 +65,7 @@ import { DocLinks } from '../../constants';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { AccessErrorComponent } from '../../access-error-component';
-import { HeaderTitle, HeaderDescription, HeaderButtonOrLink } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -397,34 +397,19 @@ export function PermissionList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader="Permissions"
-            shouldDisplayCount={true}
-            count={permissionLen}
-            application={props.coreStart.application}
-          />
-          <HeaderDescription
-            navigation={props.depsStart.navigation}
-            description=""
-            application={props.coreStart.application}
-            controls={descriptionData}
-          />
-          <HeaderButtonOrLink
-            navigation={props.depsStart.navigation}
-            controls={buttonData}
-            application={props.coreStart.application}
-          />
-        </>
-      ) : (
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Permissions</h1>
-          </EuiTitle>
-        </EuiPageHeader>
-      )}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        controlControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Permissions</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index 43e71497..eb4a035a 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -59,7 +59,7 @@ import { generateResourceName } from '../../utils/resource-utils';
 import { NameRow } from '../../utils/name-row';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
-import { HeaderDescription, HeaderTitle } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 interface RoleEditDeps extends BreadcrumbsPageDependencies {
   action: 'create' | 'edit' | 'duplicate';
@@ -259,38 +259,29 @@ export function RoleEdit(props: RoleEditDeps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader={TITLE_TEXT_DICT[props.action]}
-            application={props.coreStart.application}
-          />
-          <HeaderDescription
-            navigation={props.depsStart.navigation}
-            description=""
-            application={props.coreStart.application}
-            controls={descriptionData}
-          />
-        </>
-      ) : (
-        <>
-          {' '}
-          {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
-          <EuiPageHeader>
-            <EuiText size="xs" color="subdued" className="panel-header-subtext">
-              <EuiTitle size="m">
-                <h1>{TITLE_TEXT_DICT[props.action]}</h1>
-              </EuiTitle>
-              Roles are the core way of controlling access to your cluster. Roles contain any
-              combination of cluster-wide permission, index-specific permissions, document- and
-              field-level security, and tenants. Once you&apos;ve created the role, you can map
-              users to the roles so that users gain those permissions.{' '}
-              <ExternalLink href={DocLinks.UsersAndRolesDoc} />
-            </EuiText>
-          </EuiPageHeader>
-        </>
-      )}
+      <PageHeader
+        fallBackComponent={
+          <>
+            {' '}
+            {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
+            <EuiPageHeader>
+              <EuiText size="xs" color="subdued" className="panel-header-subtext">
+                <EuiTitle size="m">
+                  <h1>{TITLE_TEXT_DICT[props.action]}</h1>
+                </EuiTitle>
+                Roles are the core way of controlling access to your cluster. Roles contain any
+                combination of cluster-wide permission, index-specific permissions, document- and
+                field-level security, and tenants. Once you&apos;ve created the role, you can map
+                users to the roles so that users gain those permissions.{' '}
+                <ExternalLink href={DocLinks.UsersAndRolesDoc} />
+              </EuiText>
+            </EuiPageHeader>
+          </>
+        }
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+      />
       <PanelWithHeader headerText="Name">
         <EuiForm>
           <NameRow
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 79d0792f..03b0494d 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -58,7 +58,7 @@ import { DocLinks } from '../constants';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { AccessErrorComponent } from '../access-error-component';
-import { HeaderTitle, HeaderDescription, HeaderButtonOrLink } from '../header/header-components';
+import { PageHeader } from '../header/header-components';
 
 const columns: Array<EuiBasicTableColumn<RoleListing>> = [
   {
@@ -302,34 +302,19 @@ export function RoleList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader="Roles"
-            shouldDisplayCount={true}
-            count={roleLen}
-            application={props.coreStart.application}
-          />
-          <HeaderDescription
-            navigation={props.depsStart.navigation}
-            description=""
-            application={props.coreStart.application}
-            controls={descriptionData}
-          />
-          <HeaderButtonOrLink
-            navigation={props.depsStart.navigation}
-            controls={buttonData}
-            application={props.coreStart.application}
-          />
-        </>
-      ) : (
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Roles</h1>
-          </EuiTitle>
-        </EuiPageHeader>
-      )}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        controlControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Roles</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 0e857600..d1fe3e44 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -72,7 +72,7 @@ import { setCrossPageToast } from '../../utils/storage-utils';
 import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
-import { HeaderTitle, HeaderButtonOrLink } from '../../header/header-components';
+import { PageHeader } from '../../header/header-components';
 
 interface RoleViewProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -456,34 +456,26 @@ export function RoleView(props: RoleViewProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader={props.roleName}
-            application={props.coreStart.application}
-          />
-          <HeaderButtonOrLink
-            navigation={props.depsStart.navigation}
-            controls={roleView}
-            application={props.coreStart.application}
-          />
-        </>
-      ) : (
-        <>
-          {props.buildBreadcrumbs(props.roleName)}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        controlControls={roleView}
+        fallBackComponent={
+          <>
+            {props.buildBreadcrumbs(props.roleName)}
 
-          <EuiPageContentHeader>
-            <EuiPageContentHeaderSection>
-              <EuiTitle size="l">
-                <h1>{props.roleName}</h1>
-              </EuiTitle>
-            </EuiPageContentHeaderSection>
+            <EuiPageContentHeader>
+              <EuiPageContentHeaderSection>
+                <EuiTitle size="l">
+                  <h1>{props.roleName}</h1>
+                </EuiTitle>
+              </EuiPageContentHeaderSection>
 
-            <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
-          </EuiPageContentHeader>
-        </>
-      )}
+              <EuiPageContentHeaderSection>{pageActions}</EuiPageContentHeaderSection>
+            </EuiPageContentHeader>
+          </>
+        }
+      />
       <EuiTabbedContent
         tabs={tabs}
         initialSelectedTab={
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index 1a64e38a..7fdcf50c 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -128,7 +128,6 @@ export function TenantList(props: TenantListProps) {
     ));
   };
 
-  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
   const descriptionData = [
     {
       renderComponent: (
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index 239f5b9a..345d5b28 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -52,7 +52,7 @@ import { buildHashUrl } from '../utils/url-builder';
 import { DataSourceContext } from '../app-router';
 import { SecurityPluginTopNavMenu } from '../top-nav-menu';
 import { AccessErrorComponent } from '../access-error-component';
-import { HeaderButtonOrLink, HeaderTitle, HeaderDescription } from '../header/header-components';
+import { PageHeader } from '../header/header-components';
 
 export function dictView(items: Dictionary<string>) {
   if (isEmpty(items)) {
@@ -244,34 +244,19 @@ export function UserList(props: AppDependencies) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {useUpdatedUX ? (
-        <>
-          <HeaderTitle
-            navigation={props.depsStart.navigation}
-            pageHeader="Internal Users"
-            shouldDisplayCount={true}
-            count={userLen}
-            application={props.coreStart.application}
-          />
-          <HeaderDescription
-            navigation={props.depsStart.navigation}
-            description=""
-            application={props.coreStart.application}
-            controls={descriptionData}
-          />
-          <HeaderButtonOrLink
-            navigation={props.depsStart.navigation}
-            controls={buttonData}
-            application={props.coreStart.application}
-          />
-        </>
-      ) : (
-        <EuiPageHeader>
-          <EuiTitle size="l">
-            <h1>Internal users</h1>
-          </EuiTitle>
-        </EuiPageHeader>
-      )}
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        descriptionControls={descriptionData}
+        controlControls={buttonData}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiTitle size="l">
+              <h1>Internal users</h1>
+            </EuiTitle>
+          </EuiPageHeader>
+        }
+      />
       {loading ? (
         <EuiLoadingContent />
       ) : accessErrorFlag ? (

From f3f2cafd3313d91bb42fc4d07b3be691ab55ec3d Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Wed, 7 Aug 2024 18:05:49 -0400
Subject: [PATCH 13/24] Remove prop and fix some test failures

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../configuration/header/header-props.tsx     |  1 -
 .../audit-logging/test/audit-logging.test.tsx | 14 +++++++------
 .../panels/auth-view/test/auth-view.test.tsx  |  8 ++++---
 .../test/permission-list.test.tsx             | 14 +++++++++----
 .../panels/role-edit/test/role-edit.test.tsx  |  3 +++
 .../panels/role-view/test/role-view.test.tsx  |  3 +++
 .../panels/test/role-list.test.tsx            | 20 +++++++++++-------
 .../panels/test/user-list.test.tsx            | 21 +++++++++++++------
 8 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index aee1878c..0a6712eb 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -25,7 +25,6 @@ export interface HeaderProps {
 
 export interface ControlProps {
   controlControls?: TopNavControlData[];
-  // mount: (menuMount: MountPoint | undefined) => void;
 }
 
 export interface DescriptionProps {
diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
index b3628e0c..572d2259 100644
--- a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
+++ b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
@@ -58,7 +58,7 @@ describe('Audit logs', () => {
     mockAuditLoggingUtils.getAuditLogging = jest.fn().mockReturnValue(mockAuditLoggingData);
 
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
 
     const switchFound = component.find(EuiCompressedSwitch);
@@ -76,7 +76,9 @@ describe('Audit logs', () => {
 
     mockAuditLoggingUtils.getAuditLogging = jest.fn().mockReturnValue(mockAuditLoggingData);
 
-    shallow(<AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
+    );
 
     process.nextTick(() => {
       expect(mockAuditLoggingUtils.getAuditLogging).toHaveBeenCalledTimes(1);
@@ -120,7 +122,7 @@ describe('Audit logs', () => {
 
   it('audit logging switch change', () => {
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="audit-logging-enabled-switch"]').simulate('change');
     expect(mockAuditLoggingUtils.updateAuditLogging).toHaveBeenCalledTimes(1);
@@ -150,7 +152,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [auditLoggingSettings, setState])
       .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     expect(component).toMatchSnapshot();
   });
@@ -163,7 +165,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [auditLoggingSettings, setState])
       .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="general-settings-configure"]').simulate('click');
     expect(window.location.hash).toBe(
@@ -198,7 +200,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [false, jest.fn()])
       .mockImplementationOnce(() => [true, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     expect(component).toMatchSnapshot();
   });
diff --git a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
index 5643f86f..91d020da 100644
--- a/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
+++ b/public/apps/configuration/panels/auth-view/test/auth-view.test.tsx
@@ -62,7 +62,7 @@ describe('Auth view', () => {
   it('valid data', (done) => {
     mockAuthViewUtils.getSecurityConfig = jest.fn().mockReturnValue(config);
 
-    shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(<AuthView coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />);
 
     process.nextTick(() => {
       expect(mockAuthViewUtils.getSecurityConfig).toHaveBeenCalledTimes(1);
@@ -81,7 +81,7 @@ describe('Auth view', () => {
 
     jest.spyOn(console, 'log').mockImplementationOnce(() => {});
 
-    shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(<AuthView coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />);
 
     process.nextTick(() => {
       expect(mockAuthViewUtils.getSecurityConfig).toHaveBeenCalledTimes(1);
@@ -104,7 +104,9 @@ describe('Auth view', () => {
     mockAuthViewUtils.getSecurityConfig = jest
       .fn()
       .mockRejectedValue({ response: { status: 403 } });
-    const component = shallow(<AuthView coreStart={mockCoreStart as any} navigation={{} as any} />);
+    const component = shallow(
+      <AuthView coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
+    );
     expect(component).toMatchSnapshot();
   });
 });
diff --git a/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx b/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx
index daa6a86f..cb26109e 100644
--- a/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx
+++ b/public/apps/configuration/panels/permission-list/test/permission-list.test.tsx
@@ -100,12 +100,15 @@ describe('Permission list page ', () => {
 
   describe('PermissionList', () => {
     const mockCoreStart = {
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
       http: 1,
     };
     it('render empty', () => {
       const component = shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -141,7 +144,7 @@ describe('Permission list page ', () => {
       jest.spyOn(console, 'log').mockImplementationOnce(() => {});
       shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -182,7 +185,7 @@ describe('Permission list page ', () => {
       });
       const component = shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -219,7 +222,7 @@ describe('Permission list page ', () => {
       jest.spyOn(React, 'useState').mockImplementation(() => [[sampleActionGroup], jest.fn()]);
       const component = shallow(
         <PermissionList
-          coreStart={{} as any}
+          coreStart={mockCoreStart as any}
           depsStart={{} as any}
           params={{} as any}
           config={{} as any}
@@ -234,6 +237,9 @@ describe('Permission list page ', () => {
   describe('AccessError component', () => {
     const mockCoreStart = {
       http: 1,
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     let component;
     beforeEach(() => {
diff --git a/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx b/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
index d5051809..80730c0e 100644
--- a/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
+++ b/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
@@ -47,6 +47,9 @@ describe('Role edit', () => {
   const sampleSourceRole = 'role';
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   const useEffect = jest.spyOn(React, 'useEffect');
diff --git a/public/apps/configuration/panels/role-view/test/role-view.test.tsx b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
index 48a76b59..5f1157ca 100644
--- a/public/apps/configuration/panels/role-view/test/role-view.test.tsx
+++ b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
@@ -82,6 +82,9 @@ describe('Role view', () => {
   const sampleRole = 'role';
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
   const buildBreadcrumbs = jest.fn();
 
diff --git a/public/apps/configuration/panels/test/role-list.test.tsx b/public/apps/configuration/panels/test/role-list.test.tsx
index c5f69363..48c1a99d 100644
--- a/public/apps/configuration/panels/test/role-list.test.tsx
+++ b/public/apps/configuration/panels/test/role-list.test.tsx
@@ -48,6 +48,9 @@ describe('Role list', () => {
   const setState = jest.fn();
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   beforeEach(() => {
@@ -72,7 +75,7 @@ describe('Role list', () => {
     const component = shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -92,7 +95,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={{} as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -125,7 +128,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -144,7 +147,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -167,7 +170,7 @@ describe('Role list', () => {
     shallow(
       <RoleList
         coreStart={mockCoreStart as any}
-        navigation={{} as any}
+        depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
       />
@@ -200,7 +203,7 @@ describe('Role list', () => {
       component = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -236,7 +239,7 @@ describe('Role list', () => {
       const wrapper = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -255,6 +258,7 @@ describe('Role list', () => {
       const wrapper = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
+          depsStart={{ navigation: {} }}
           navigation={{} as any}
           params={{} as any}
           config={{} as any}
@@ -285,7 +289,7 @@ describe('Role list', () => {
       component = shallow(
         <RoleList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
diff --git a/public/apps/configuration/panels/test/user-list.test.tsx b/public/apps/configuration/panels/test/user-list.test.tsx
index 980e8d21..d7f6e47f 100644
--- a/public/apps/configuration/panels/test/user-list.test.tsx
+++ b/public/apps/configuration/panels/test/user-list.test.tsx
@@ -90,6 +90,9 @@ describe('User list', () => {
   describe('UserList', () => {
     const mockCoreStart = {
       http: 1,
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     const setState = jest.fn();
     jest.spyOn(React, 'useState').mockImplementation((initValue) => [initValue, setState]);
@@ -98,7 +101,7 @@ describe('User list', () => {
       const component = shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -132,7 +135,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -146,7 +149,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -171,7 +174,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -194,6 +197,9 @@ describe('User list', () => {
           serverBasePath: '',
         },
       },
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     let component;
     const mockUserListingData: InternalUsersListing = {
@@ -215,7 +221,7 @@ describe('User list', () => {
       component = shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />
@@ -244,6 +250,9 @@ describe('User list', () => {
           serverBasePath: '',
         },
       },
+      uiSettings: {
+        get: jest.fn().mockReturnValue(false),
+      },
     };
     let component;
     beforeEach(() => {
@@ -260,7 +269,7 @@ describe('User list', () => {
       component = shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />

From 2174a3be5f5b7a11b3fe33d9d7eeb850d597d9c3 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 8 Aug 2024 00:38:08 -0400
Subject: [PATCH 14/24] fix most tests

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../audit-logging/test/audit-logging.test.tsx | 11 +++++--
 .../auth-view/test/instruction-view.test.tsx  |  3 --
 .../test/role-edit-filtering.test.tsx         | 12 +++++--
 .../panels/role-view/test/role-view.test.tsx  | 11 ++++---
 .../tenant-list/test/tenant-list.test.tsx     | 32 +++++++++----------
 .../panels/test/role-list.test.tsx            |  3 +-
 .../panels/test/user-list.test.tsx            |  2 +-
 7 files changed, 42 insertions(+), 32 deletions(-)

diff --git a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
index 572d2259..49fe0f80 100644
--- a/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
+++ b/public/apps/configuration/panels/audit-logging/test/audit-logging.test.tsx
@@ -37,6 +37,9 @@ describe('Audit logs', () => {
   const setState = jest.fn();
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   beforeEach(() => {
@@ -96,7 +99,9 @@ describe('Audit logs', () => {
       throw Error();
     });
 
-    shallow(<AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />);
+    shallow(
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
+    );
 
     process.nextTick(() => {
       expect(mockAuditLoggingUtils.getAuditLogging).toHaveBeenCalledTimes(1);
@@ -136,7 +141,7 @@ describe('Audit logs', () => {
       throw Error();
     });
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="audit-logging-enabled-switch"]').simulate('change');
 
@@ -181,7 +186,7 @@ describe('Audit logs', () => {
       .mockImplementationOnce(() => [auditLoggingSettings, setState])
       .mockImplementationOnce(() => [false, jest.fn()]);
     const component = shallow(
-      <AuditLogging coreStart={mockCoreStart as any} navigation={{} as any} />
+      <AuditLogging coreStart={mockCoreStart as any} depsStart={{ navigation: {} } as any} />
     );
     component.find('[data-test-subj="compliance-settings-configure"]').simulate('click');
     expect(window.location.hash).toBe(
diff --git a/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx b/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx
index 16a8c664..9ab4902a 100644
--- a/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx
+++ b/public/apps/configuration/panels/auth-view/test/instruction-view.test.tsx
@@ -15,7 +15,6 @@
 
 import { shallow } from 'enzyme';
 import { InstructionView } from '../instruction-view';
-import { EuiTitle } from '@elastic/eui';
 import React from 'react';
 import { ExternalLinkButton } from '../../../utils/display-utils';
 
@@ -27,8 +26,6 @@ describe('Instruction view', () => {
       },
     };
     const component = shallow(<InstructionView config={config as any} />);
-
-    expect(component.find(EuiTitle).find('h1').text()).toBe('Authentication and authorization');
     expect(component.find(ExternalLinkButton).prop('text')).toBe('Create config.yml');
   });
 });
diff --git a/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx b/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
index 36d67fdc..715be82a 100644
--- a/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
+++ b/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
@@ -53,6 +53,14 @@ describe('Role edit filtering', () => {
   const sampleSourceRole = 'role';
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
+    chrome: {
+      navGroup: {
+        getNavGroupEnabled: jest.fn().mockReturnValue(false),
+      },
+    },
   };
 
   (fetchActionGroups as jest.Mock).mockResolvedValue({
@@ -100,7 +108,7 @@ describe('Role edit filtering', () => {
         sourceRoleName={sampleSourceRole}
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: {} } } as any}
         params={{} as any}
         config={{} as any}
       />
@@ -156,7 +164,7 @@ describe('Role edit filtering', () => {
         sourceRoleName={sampleSourceRole}
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: {} } } as any}
         params={{} as any}
         config={{} as any}
       />
diff --git a/public/apps/configuration/panels/role-view/test/role-view.test.tsx b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
index 5f1157ca..021b44f6 100644
--- a/public/apps/configuration/panels/role-view/test/role-view.test.tsx
+++ b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
@@ -14,7 +14,7 @@
  */
 
 import React from 'react';
-import { mount, shallow } from 'enzyme';
+import { mount, render, shallow } from 'enzyme';
 import { RoleView } from '../role-view';
 import { ClusterPermissionPanel } from '../../role-view/cluster-permission-panel';
 import { IndexPermissionPanel } from '../index-permission-panel';
@@ -85,6 +85,7 @@ describe('Role view', () => {
     uiSettings: {
       get: jest.fn().mockReturnValue(false),
     },
+    chrome: { navGroup: { getNavGroupEnabled: jest.fn().mockReturnValue(false) } },
   };
   const buildBreadcrumbs = jest.fn();
 
@@ -246,13 +247,13 @@ describe('Role view', () => {
       throw new Error();
     });
     const spy = jest.spyOn(console, 'log').mockImplementationOnce(() => {});
-    shallow(
+    render(
       <RoleView
         roleName={sampleRole}
         prevAction=""
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: { HeaderControl: {} } } } as any}
         params={{} as any}
         config={{} as any}
       />
@@ -268,13 +269,13 @@ describe('Role view', () => {
   });
 
   it('delete role', () => {
-    const component = shallow(
+    const component = render(
       <RoleView
         roleName={sampleRole}
         prevAction=""
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: { HeaderControl: {} } } } as any}
         params={{} as any}
         config={{} as any}
       />
diff --git a/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx b/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
index 66117c39..a602f507 100644
--- a/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
+++ b/public/apps/configuration/panels/tenant-list/test/tenant-list.test.tsx
@@ -60,13 +60,13 @@ describe('Tenant list', () => {
   const setState = jest.fn();
   const mockCoreStart = {
     http: 1,
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
     chrome: {
       setBreadcrumbs() {
         return 1;
       },
-      navGroup: {
-        getNavGroupEnabled: jest.fn().mockReturnValue(false),
-      },
     },
   };
   const config = {
@@ -101,7 +101,7 @@ describe('Tenant list', () => {
     const component = shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -121,7 +121,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -151,7 +151,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -171,7 +171,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -196,7 +196,7 @@ describe('Tenant list', () => {
     shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -215,7 +215,7 @@ describe('Tenant list', () => {
     const component = shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -237,7 +237,7 @@ describe('Tenant list', () => {
     const component = shallow(
       <ManageTab
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: {} } as any}
         params={{} as any}
         config={config as any}
       />
@@ -290,7 +290,7 @@ describe('Tenant list', () => {
       const component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -319,7 +319,7 @@ describe('Tenant list', () => {
       const component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -352,7 +352,7 @@ describe('Tenant list', () => {
       const component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -397,7 +397,7 @@ describe('Tenant list', () => {
       component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -487,7 +487,7 @@ describe('Tenant list', () => {
       component = shallow(
         <ManageTab
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
@@ -499,7 +499,7 @@ describe('Tenant list', () => {
       component = shallow(
         <ConfigureTab1
           coreStart={mockCoreStart as any}
-          depsStart={{} as any}
+          depsStart={{ navigation: {} } as any}
           params={{} as any}
           config={config as any}
         />
diff --git a/public/apps/configuration/panels/test/role-list.test.tsx b/public/apps/configuration/panels/test/role-list.test.tsx
index 48c1a99d..4fd5e7ce 100644
--- a/public/apps/configuration/panels/test/role-list.test.tsx
+++ b/public/apps/configuration/panels/test/role-list.test.tsx
@@ -94,7 +94,7 @@ describe('Role list', () => {
 
     shallow(
       <RoleList
-        coreStart={{} as any}
+        coreStart={mockCoreStart as any}
         depsStart={{ navigation: {} }}
         params={{} as any}
         config={{} as any}
@@ -259,7 +259,6 @@ describe('Role list', () => {
         <RoleList
           coreStart={mockCoreStart as any}
           depsStart={{ navigation: {} }}
-          navigation={{} as any}
           params={{} as any}
           config={{} as any}
         />
diff --git a/public/apps/configuration/panels/test/user-list.test.tsx b/public/apps/configuration/panels/test/user-list.test.tsx
index d7f6e47f..3b2e062c 100644
--- a/public/apps/configuration/panels/test/user-list.test.tsx
+++ b/public/apps/configuration/panels/test/user-list.test.tsx
@@ -115,7 +115,7 @@ describe('User list', () => {
       shallow(
         <UserList
           coreStart={mockCoreStart as any}
-          navigation={{} as any}
+          depsStart={{ navigation: {} }}
           params={{} as any}
           config={{} as any}
         />

From 6bf5b8e3fca2bb431ca0b278f6620a3ebb4fb577 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Thu, 8 Aug 2024 12:43:45 -0400
Subject: [PATCH 15/24] Fix existing tests

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../__snapshots__/audit-logging.test.tsx.snap |  80 +++-
 .../__snapshots__/auth-view.test.tsx.snap     |  30 +-
 .../permission-list.test.tsx.snap             | 156 +++++++-
 .../__snapshots__/role-view.test.tsx.snap     | 370 ++++++++++++++----
 .../panels/role-view/test/role-view.test.tsx  |  10 +-
 .../__snapshots__/get-started.test.tsx.snap   |  94 +++--
 .../__snapshots__/role-list.test.tsx.snap     | 107 ++++-
 .../__snapshots__/user-list.test.tsx.snap     | 109 +++++-
 8 files changed, 785 insertions(+), 171 deletions(-)

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 c5b689b9..cd5ae973 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
@@ -245,10 +245,17 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     selectedDataSource={
       Object {
         "id": "test",
@@ -256,15 +263,28 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h3>
-        Audit logging
-      </h3>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
+      }
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h3>
+            Audit logging
+          </h3>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+  />
   <EuiSpacer />
   <EuiPanel>
     <EuiForm>
@@ -655,10 +675,17 @@ exports[`Audit logs should load access error component 1`] = `
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     selectedDataSource={
       Object {
         "id": "test",
@@ -666,15 +693,28 @@ exports[`Audit logs should load access error component 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h3>
-        Audit logging
-      </h3>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction],
+        },
+      }
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h3>
+            Audit logging
+          </h3>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+  />
   <EuiSpacer />
   <AccessErrorComponent
     loading={false}
diff --git a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
index aff22a5f..6ede754f 100644
--- a/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
+++ b/public/apps/configuration/panels/auth-view/test/__snapshots__/auth-view.test.tsx.snap
@@ -9,7 +9,11 @@ exports[`Auth view should load access error component 1`] = `
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     selectedDataSource={
       Object {
         "id": "test",
@@ -17,13 +21,23 @@ exports[`Auth view should load access error component 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiTitle
-    size="l"
-  >
-    <h1>
-      Authentication and authorization
-    </h1>
-  </EuiTitle>
+  <PageHeader
+    coreStart={
+      Object {
+        "http": 1,
+      }
+    }
+    fallBackComponent={
+      <EuiTitle
+        size="l"
+      >
+        <h1>
+          Authentication and authorization
+        </h1>
+      </EuiTitle>
+    }
+    navigation={Object {}}
+  />
   <AccessErrorComponent
     loading={false}
   />
diff --git a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
index 4b86b497..0a286c12 100644
--- a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
+++ b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -7,6 +7,49 @@ exports[`Permission list page  AccessError component should load access error co
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={false}
@@ -19,15 +62,110 @@ exports[`Permission list page  AccessError component should load access error co
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h1>
-        Permissions
-      </h1>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    controlControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiFlexItem>
+            <EuiSmallButtonEmpty
+              onClick={[Function]}
+            >
+              Create from blank
+            </EuiSmallButtonEmpty>
+            <EuiSmallButtonEmpty
+              disabled={false}
+              id="create-from-selection"
+              onClick={[Function]}
+            >
+              Create from selection
+            </EuiSmallButtonEmpty>
+          </EuiFlexItem>,
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    descriptionControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiText
+            color="subdued"
+            size="xs"
+          >
+            Permissions are individual actions, such as cluster:admin/snapshot/restore, which lets you restore snapshots. Action groups 
+            <br />
+            are reusable collections of permissions, such as MANAGE_SNAPSHOTS, which lets you view, take, delete, and restore 
+            <br />
+            snapshots. You can often meet your security needs using the default action groups, but you might find it convenient to create 
+            <br />
+            your own. 
+            <ExternalLink
+              href="https://opensearch.org/docs/latest/security-plugin/access-control/default-action-groups/"
+            />
+          </EuiText>,
+        },
+      ]
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h1>
+            Permissions
+          </h1>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+  />
   <AccessErrorComponent
     loading={false}
   />
diff --git a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
index ece52281..b5e526b4 100644
--- a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
+++ b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
@@ -21,7 +21,27 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
     config={Object {}}
     coreStart={
       Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+        },
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={true}
@@ -36,46 +56,101 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageContentHeader>
-    <EuiPageContentHeaderSection>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          role
-        </h1>
-      </EuiTitle>
-    </EuiPageContentHeaderSection>
-    <EuiPageContentHeaderSection>
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <EuiFlexItem>
-          <EuiSmallButtonEmpty
-            href="#/roles/duplicate/role"
-            key="duplicate"
-          >
-            duplicate
-          </EuiSmallButtonEmpty>
-          <EuiSmallButtonEmpty
-            color="danger"
-            data-test-subj="delete"
-            key="delete"
-            onClick={[Function]}
-          >
-            delete
-          </EuiSmallButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiSmallButton
-            href="#/roles/edit/role"
-          >
-            Edit role
-          </EuiSmallButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPageContentHeaderSection>
-  </EuiPageContentHeader>
+  <PageHeader
+    controlControls={
+      Array [
+        Object {
+          "ariaLabel": "delete",
+          "color": "danger",
+          "iconType": "trash",
+          "isLoading": false,
+          "run": [Function],
+          "testId": "delete",
+          "type": "button",
+        },
+        Object {
+          "href": "#/roles/duplicate/role",
+          "isLoading": false,
+          "label": "Duplicate",
+          "type": "button",
+        },
+        Object {
+          "fill": true,
+          "href": "#/roles/edit/role",
+          "isLoading": false,
+          "label": "Edit role",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+        },
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    fallBackComponent={
+      <React.Fragment>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle
+              size="l"
+            >
+              <h1>
+                role
+              </h1>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+          <EuiPageContentHeaderSection>
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <EuiFlexItem>
+                <EuiSmallButtonEmpty
+                  href="#/roles/duplicate/role"
+                >
+                  duplicate
+                </EuiSmallButtonEmpty>
+                <EuiSmallButtonEmpty
+                  color="danger"
+                  data-test-subj="delete"
+                  onClick={[Function]}
+                >
+                  delete
+                </EuiSmallButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiSmallButton
+                  href="#/roles/edit/role"
+                >
+                  Edit role
+                </EuiSmallButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+      </React.Fragment>
+    }
+  />
   <EuiTabbedContent
     autoFocus="initial"
     initialSelectedTab={
@@ -111,7 +186,27 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
           <TenantsPanel
             coreStart={
               Object {
+                "chrome": Object {
+                  "navGroup": Object {
+                    "getNavGroupEnabled": [MockFunction],
+                  },
+                },
                 "http": 1,
+                "uiSettings": Object {
+                  "get": [MockFunction] {
+                    "calls": Array [
+                      Array [
+                        "home:useNewHomePage",
+                      ],
+                    ],
+                    "results": Array [
+                      Object {
+                        "type": "return",
+                        "value": false,
+                      },
+                    ],
+                  },
+                },
               }
             }
             dataSourceId="test"
@@ -161,7 +256,27 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
             <TenantsPanel
               coreStart={
                 Object {
+                  "chrome": Object {
+                    "navGroup": Object {
+                      "getNavGroupEnabled": [MockFunction],
+                    },
+                  },
                   "http": 1,
+                  "uiSettings": Object {
+                    "get": [MockFunction] {
+                      "calls": Array [
+                        Array [
+                          "home:useNewHomePage",
+                        ],
+                      ],
+                      "results": Array [
+                        Object {
+                          "type": "return",
+                          "value": false,
+                        },
+                      ],
+                    },
+                  },
                 }
               }
               dataSourceId="test"
@@ -348,7 +463,27 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
     config={Object {}}
     coreStart={
       Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+        },
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={true}
@@ -363,46 +498,101 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageContentHeader>
-    <EuiPageContentHeaderSection>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          role
-        </h1>
-      </EuiTitle>
-    </EuiPageContentHeaderSection>
-    <EuiPageContentHeaderSection>
-      <EuiFlexGroup
-        gutterSize="s"
-      >
-        <EuiFlexItem>
-          <EuiSmallButtonEmpty
-            href="#/roles/duplicate/role"
-            key="duplicate"
-          >
-            duplicate
-          </EuiSmallButtonEmpty>
-          <EuiSmallButtonEmpty
-            color="danger"
-            data-test-subj="delete"
-            key="delete"
-            onClick={[Function]}
-          >
-            delete
-          </EuiSmallButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem>
-          <EuiSmallButton
-            href="#/roles/edit/role"
-          >
-            Edit role
-          </EuiSmallButton>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiPageContentHeaderSection>
-  </EuiPageContentHeader>
+  <PageHeader
+    controlControls={
+      Array [
+        Object {
+          "ariaLabel": "delete",
+          "color": "danger",
+          "iconType": "trash",
+          "isLoading": false,
+          "run": [Function],
+          "testId": "delete",
+          "type": "button",
+        },
+        Object {
+          "href": "#/roles/duplicate/role",
+          "isLoading": false,
+          "label": "Duplicate",
+          "type": "button",
+        },
+        Object {
+          "fill": true,
+          "href": "#/roles/edit/role",
+          "isLoading": false,
+          "label": "Edit role",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "chrome": Object {
+          "navGroup": Object {
+            "getNavGroupEnabled": [MockFunction],
+          },
+        },
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    fallBackComponent={
+      <React.Fragment>
+        <EuiPageContentHeader>
+          <EuiPageContentHeaderSection>
+            <EuiTitle
+              size="l"
+            >
+              <h1>
+                role
+              </h1>
+            </EuiTitle>
+          </EuiPageContentHeaderSection>
+          <EuiPageContentHeaderSection>
+            <EuiFlexGroup
+              gutterSize="s"
+            >
+              <EuiFlexItem>
+                <EuiSmallButtonEmpty
+                  href="#/roles/duplicate/role"
+                >
+                  duplicate
+                </EuiSmallButtonEmpty>
+                <EuiSmallButtonEmpty
+                  color="danger"
+                  data-test-subj="delete"
+                  onClick={[Function]}
+                >
+                  delete
+                </EuiSmallButtonEmpty>
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <EuiSmallButton
+                  href="#/roles/edit/role"
+                >
+                  Edit role
+                </EuiSmallButton>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiPageContentHeaderSection>
+        </EuiPageContentHeader>
+      </React.Fragment>
+    }
+  />
   <EuiTabbedContent
     autoFocus="initial"
     initialSelectedTab={
@@ -579,7 +769,27 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
             <TenantsPanel
               coreStart={
                 Object {
+                  "chrome": Object {
+                    "navGroup": Object {
+                      "getNavGroupEnabled": [MockFunction],
+                    },
+                  },
                   "http": 1,
+                  "uiSettings": Object {
+                    "get": [MockFunction] {
+                      "calls": Array [
+                        Array [
+                          "home:useNewHomePage",
+                        ],
+                      ],
+                      "results": Array [
+                        Object {
+                          "type": "return",
+                          "value": false,
+                        },
+                      ],
+                    },
+                  },
                 }
               }
               dataSourceId="test"
diff --git a/public/apps/configuration/panels/role-view/test/role-view.test.tsx b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
index 021b44f6..6b3dac86 100644
--- a/public/apps/configuration/panels/role-view/test/role-view.test.tsx
+++ b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
@@ -269,7 +269,7 @@ describe('Role view', () => {
   });
 
   it('delete role', () => {
-    const component = render(
+    const component = mount(
       <RoleView
         roleName={sampleRole}
         prevAction=""
@@ -280,7 +280,7 @@ describe('Role view', () => {
         config={{} as any}
       />
     );
-    component.find('[data-test-subj="delete"]').simulate('click');
+    component.find('[data-test-subj="delete"]').first().simulate('click');
 
     expect(requestDeleteRoles).toBeCalled();
   });
@@ -289,18 +289,18 @@ describe('Role view', () => {
     (requestDeleteRoles as jest.Mock).mockImplementationOnce(() => {
       throw new Error();
     });
-    const component = shallow(
+    const component = mount(
       <RoleView
         roleName={sampleRole}
         prevAction=""
         buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
-        depsStart={{} as any}
+        depsStart={{ navigation: { ui: { HeaderControl: {} } } } as any}
         params={{} as any}
         config={{} as any}
       />
     );
-    component.find('[data-test-subj="delete"]').simulate('click');
+    component.find('[data-test-subj="delete"]').first().simulate('click');
     expect(createUnknownErrorToast).toBeCalled();
   });
 });
diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index d380f615..d2edd18e 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -31,19 +31,40 @@ exports[`Get started (landing page) renders when backend configuration is disabl
       }
       setDataSource={[MockFunction]}
     />
-    <EuiPageHeader>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          Get started
-        </h1>
-      </EuiTitle>
-      <ExternalLinkButton
-        href="#/"
-        text="Open in new window"
-      />
-    </EuiPageHeader>
+    <PageHeader
+      controlControls={
+        Array [
+          Object {
+            "href": "#/",
+            "iconSide": "right",
+            "iconType": "popout",
+            "isLoading": false,
+            "label": "Open in new window",
+            "type": "button",
+          },
+        ]
+      }
+      coreStart={
+        Object {
+          "http": 1,
+        }
+      }
+      fallBackComponent={
+        <EuiPageHeader>
+          <EuiTitle
+            size="l"
+          >
+            <h1>
+              Get started
+            </h1>
+          </EuiTitle>
+          <ExternalLinkButton
+            href="#/"
+            text="Open in new window"
+          />
+        </EuiPageHeader>
+      }
+    />
     <EuiPanel
       paddingSize="l"
     >
@@ -310,19 +331,40 @@ exports[`Get started (landing page) renders when backend configuration is enable
       }
       setDataSource={[MockFunction]}
     />
-    <EuiPageHeader>
-      <EuiTitle
-        size="l"
-      >
-        <h1>
-          Get started
-        </h1>
-      </EuiTitle>
-      <ExternalLinkButton
-        href="#/"
-        text="Open in new window"
-      />
-    </EuiPageHeader>
+    <PageHeader
+      controlControls={
+        Array [
+          Object {
+            "href": "#/",
+            "iconSide": "right",
+            "iconType": "popout",
+            "isLoading": false,
+            "label": "Open in new window",
+            "type": "button",
+          },
+        ]
+      }
+      coreStart={
+        Object {
+          "http": 1,
+        }
+      }
+      fallBackComponent={
+        <EuiPageHeader>
+          <EuiTitle
+            size="l"
+          >
+            <h1>
+              Get started
+            </h1>
+          </EuiTitle>
+          <ExternalLinkButton
+            href="#/"
+            text="Open in new window"
+          />
+        </EuiPageHeader>
+      }
+    />
     <EuiPanel
       paddingSize="l"
     >
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index 52233ddc..78ec518d 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -7,10 +7,29 @@ exports[`Role list AccessError component should load access error component 1`]
     coreStart={
       Object {
         "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     params={Object {}}
     selectedDataSource={
       Object {
@@ -19,15 +38,74 @@ exports[`Role list AccessError component should load access error component 1`]
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h1>
-        Roles
-      </h1>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    controlControls={
+      Array [
+        Object {
+          "fill": true,
+          "href": "#/roles/create",
+          "iconSide": "left",
+          "iconType": "plus",
+          "isLoading": false,
+          "label": "Create role",
+          "testId": "create-role",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "http": 1,
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    descriptionControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiText
+            color="subdued"
+            size="xs"
+          >
+            Roles are the core way of controlling access to your cluster. Roles contain any combination of cluster-wide permission, index-
+            <br />
+            specific permissions, document- and field-level security, and tenants. Then you map users to these roles so that users 
+            <br />
+            gain those permissions. 
+            <mockConstructor
+              href="https://opensearch.org/docs/latest/security-plugin/access-control/users-roles/"
+            />
+          </EuiText>,
+        },
+      ]
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h1>
+            Roles
+          </h1>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+  />
   <EuiPageContent>
     <EuiPageContentHeader
       id="role-table-container"
@@ -41,8 +119,7 @@ exports[`Role list AccessError component should load access error component 1`]
             <span
               className="panel-header-count"
             >
-               
-              (
+               (
               0
               )
             </span>
@@ -150,7 +227,11 @@ exports[`Role list AccessError component should load access error component 1`]
         message="No items found"
         pagination={true}
         responsive={true}
-        search={Object {}}
+        search={
+          Object {
+            "toolsRight": undefined,
+          }
+        }
         selection={
           Object {
             "onSelectionChange": [MockFunction],
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
index 82f4af42..efeebad7 100644
--- a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -11,10 +11,29 @@ exports[`User list AccessError component should load access error component 1`]
             "serverBasePath": "",
           },
         },
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
       }
     }
     dataSourcePickerReadOnly={false}
-    navigation={Object {}}
+    depsStart={
+      Object {
+        "navigation": Object {},
+      }
+    }
     params={Object {}}
     selectedDataSource={
       Object {
@@ -23,15 +42,85 @@ exports[`User list AccessError component should load access error component 1`]
     }
     setDataSource={[MockFunction]}
   />
-  <EuiPageHeader>
-    <EuiTitle
-      size="l"
-    >
-      <h1>
-        Internal users
-      </h1>
-    </EuiTitle>
-  </EuiPageHeader>
+  <PageHeader
+    controlControls={
+      Array [
+        Object {
+          "fill": true,
+          "href": "#/users/create",
+          "iconSide": "left",
+          "iconType": "plus",
+          "isLoading": false,
+          "label": "Create internal user",
+          "testId": "create-user",
+          "type": "button",
+        },
+      ]
+    }
+    coreStart={
+      Object {
+        "http": Object {
+          "basePath": Object {
+            "serverBasePath": "",
+          },
+        },
+        "uiSettings": Object {
+          "get": [MockFunction] {
+            "calls": Array [
+              Array [
+                "home:useNewHomePage",
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": false,
+              },
+            ],
+          },
+        },
+      }
+    }
+    descriptionControls={
+      Array [
+        Object {
+          "isLoading": false,
+          "renderComponent": <EuiText
+            color="subdued"
+            size="xs"
+          >
+            The Security plugin includes an internal user database. Use this database in place of, or in addition to, an external 
+            <br />
+             authentication system such as LDAP server or Active Directory. You can map an internal user to a role from
+             
+            <EuiLink
+              href="#/roles"
+            >
+              Roles
+            </EuiLink>
+            . First, click 
+            <br />
+             into the detail page of the role. Then, under “Mapped users”, click “Manage mapping” 
+            <ExternalLink
+              href="https://opensearch.org/docs/latest/security-plugin/access-control/users-roles/#map-users-to-roles"
+            />
+          </EuiText>,
+        },
+      ]
+    }
+    fallBackComponent={
+      <EuiPageHeader>
+        <EuiTitle
+          size="l"
+        >
+          <h1>
+            Internal users
+          </h1>
+        </EuiTitle>
+      </EuiPageHeader>
+    }
+    navigation={Object {}}
+  />
   <AccessErrorComponent
     loading={false}
   />

From 132001e8801c386b478707c14777568411ed1b1c Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 9 Aug 2024 12:01:54 -0400
Subject: [PATCH 16/24] Push breadcrumb population into child components

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/apps/configuration/app-router.tsx      | 75 ++++++++++++++-----
 .../header/header-components.tsx              | 14 ++++
 .../configuration/header/header-props.tsx     |  4 +
 .../audit-logging-edit-settings.tsx           |  4 +
 .../panels/audit-logging/audit-logging.tsx    |  1 +
 .../__snapshots__/audit-logging.test.tsx.snap |  2 +
 .../panels/auth-view/auth-view.tsx            |  2 +
 .../apps/configuration/panels/get-started.tsx |  1 +
 .../permission-list/permission-list.tsx       |  2 +
 .../permission-list.test.tsx.snap             |  1 +
 .../panels/role-edit/role-edit.tsx            |  2 -
 .../test/role-edit-filtering.test.tsx         |  1 +
 .../apps/configuration/panels/role-list.tsx   |  1 +
 .../__snapshots__/role-view.test.tsx.snap     |  7 ++
 .../panels/role-view/test/role-view.test.tsx  |  5 +-
 .../panels/tenant-list/tenant-list.tsx        |  2 +
 .../__snapshots__/get-started.test.tsx.snap   |  2 +
 .../__snapshots__/role-list.test.tsx.snap     |  1 +
 .../__snapshots__/user-list.test.tsx.snap     |  1 +
 .../apps/configuration/panels/user-list.tsx   |  1 +
 .../__snapshots__/app-router.test.tsx.snap    | 70 +++++++++++++++++
 .../configuration/test/app-router.test.tsx    |  3 +
 public/apps/configuration/types.ts            |  1 +
 .../configuration/utils/resource-utils.tsx    | 48 ++++++++++++
 24 files changed, 228 insertions(+), 23 deletions(-)

diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index f0dc0cae..74615722 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -47,22 +47,27 @@ const LANDING_PAGE_URL = '/getstarted';
 export const ROUTE_MAP: { [key: string]: RouteItem } = {
   getStarted: {
     name: 'Get Started',
+    displayNameWithoutSecurityBase: 'Get started with access control',
     href: LANDING_PAGE_URL,
   },
   [ResourceType.roles]: {
     name: 'Roles',
+    displayNameWithoutSecurityBase: 'Roles',
     href: buildUrl(ResourceType.roles),
   },
   [ResourceType.users]: {
     name: 'Internal users',
+    displayNameWithoutSecurityBase: 'Internal users',
     href: buildUrl(ResourceType.users),
   },
   [ResourceType.permissions]: {
     name: 'Permissions',
+    displayNameWithoutSecurityBase: 'Permissions',
     href: buildUrl(ResourceType.permissions),
   },
   [ResourceType.tenants]: {
     name: 'Tenants',
+    displayNameWithoutSecurityBase: 'Dashboard multi-tenancy',
     href: buildUrl(ResourceType.tenants),
   },
   [ResourceType.tenantsConfigureTab]: {
@@ -71,10 +76,12 @@ export const ROUTE_MAP: { [key: string]: RouteItem } = {
   },
   [ResourceType.auth]: {
     name: 'Authentication',
+    displayNameWithoutSecurityBase: 'Authentication and authorization',
     href: buildUrl(ResourceType.auth),
   },
   [ResourceType.auditLogging]: {
     name: 'Audit logs',
+    displayNameWithoutSecurityBase: 'Audit logs',
     href: buildUrl(ResourceType.auditLogging),
   },
 };
@@ -101,16 +108,19 @@ export const allNavPanelUrls = (multitenancyEnabled: boolean) =>
     ]);
 
 export function getBreadcrumbs(
+  includeSecurityBase: boolean,
   resourceType?: ResourceType,
   pageTitle?: string,
   subAction?: string
 ): EuiBreadcrumb[] {
-  const breadcrumbs: EuiBreadcrumb[] = [
-    {
-      text: 'Security',
-      href: buildHashUrl(),
-    },
-  ];
+  const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
+    ? [
+        {
+          text: 'Security',
+          href: buildHashUrl(),
+        },
+      ]
+    : [];
 
   if (resourceType) {
     breadcrumbs.push({
@@ -154,6 +164,7 @@ export function AppRouter(props: AppDependencies) {
   const dataSourceFromUrl = dataSourceEnabled ? getDataSourceFromUrl() : LocalCluster;
 
   const [dataSource, setDataSource] = useState<DataSourceOption>(dataSourceFromUrl);
+  const includeSecurityBase = !props.coreStart.uiSettings.get('home:useNewHomePage');
 
   return (
     <DataSourceContext.Provider value={{ dataSource, setDataSource }}>
@@ -174,7 +185,11 @@ export function AppRouter(props: AppDependencies) {
                 path={buildUrl(ResourceType.roles, Action.edit) + '/:roleName/' + SubAction.mapuser}
                 render={(match) => (
                   <RoleEditMappedUser
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.roles)}
+                    buildBreadcrumbs={partial(
+                      setGlobalBreadcrumbs,
+                      includeSecurityBase,
+                      ResourceType.roles
+                    )}
                     {...{ ...props, ...decodeParams(match.match.params) }}
                   />
                 )}
@@ -183,7 +198,11 @@ export function AppRouter(props: AppDependencies) {
                 path={buildUrl(ResourceType.roles, Action.view) + '/:roleName/:prevAction?'}
                 render={(match) => (
                   <RoleView
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.roles)}
+                    buildBreadcrumbs={partial(
+                      setGlobalBreadcrumbs,
+                      includeSecurityBase,
+                      ResourceType.roles
+                    )}
                     {...{ ...props, ...decodeParams(match.match.params) }}
                   />
                 )}
@@ -192,7 +211,11 @@ export function AppRouter(props: AppDependencies) {
                 path={buildUrl(ResourceType.roles) + '/:action/:sourceRoleName?'}
                 render={(match) => (
                   <RoleEdit
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.roles)}
+                    buildBreadcrumbs={partial(
+                      setGlobalBreadcrumbs,
+                      includeSecurityBase,
+                      ResourceType.roles
+                    )}
                     {...{ ...props, ...decodeParams(match.match.params) }}
                   />
                 )}
@@ -200,14 +223,14 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={ROUTE_MAP.roles.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.roles);
+                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.roles);
                   return <RoleList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auth.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.auth);
+                  //  setGlobalBreadcrumbs(includeSecurityBase, ResourceType.auth);
                   return <AuthView {...props} />;
                 }}
               />
@@ -215,7 +238,11 @@ export function AppRouter(props: AppDependencies) {
                 path={buildUrl(ResourceType.users) + '/:action/:sourceUserName?'}
                 render={(match) => (
                   <InternalUserEdit
-                    buildBreadcrumbs={partial(setGlobalBreadcrumbs, ResourceType.users)}
+                    buildBreadcrumbs={partial(
+                      setGlobalBreadcrumbs,
+                      includeSecurityBase,
+                      ResourceType.users
+                    )}
                     {...{ ...props, ...decodeParams(match.match.params) }}
                   />
                 )}
@@ -223,42 +250,50 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={ROUTE_MAP.users.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.users);
+                  //    setGlobalBreadcrumbs(includeSecurityBase, ResourceType.users);
                   return <UserList {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_GENERAL_SETTINGS_EDIT}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.auditLogging, 'General settings');
+                  // setGlobalBreadcrumbs(
+                  //   includeSecurityBase,
+                  //   ResourceType.auditLogging,
+                  //   'General settings'
+                  // );
                   return <AuditLoggingEditSettings setting={'general'} {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.auditLogging, 'Compliance settings');
+                  // setGlobalBreadcrumbs(
+                  //   includeSecurityBase,
+                  //   ResourceType.auditLogging,
+                  //   'Compliance settings'
+                  // );
                   return <AuditLoggingEditSettings setting={'compliance'} {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auditLogging.href + '/:fromType?'}
                 render={(match) => {
-                  setGlobalBreadcrumbs(ResourceType.auditLogging);
+                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.auditLogging);
                   return <AuditLogging {...{ ...props, ...match.match.params }} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.permissions.href}
                 render={() => {
-                  setGlobalBreadcrumbs(ResourceType.permissions);
+                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.permissions);
                   return <PermissionList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.getStarted.href}
                 render={() => {
-                  setGlobalBreadcrumbs();
+                  // setGlobalBreadcrumbs(includeSecurityBase);
                   return <GetStarted {...props} />;
                 }}
               />
@@ -266,7 +301,7 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenants.href}
                   render={() => {
-                    setGlobalBreadcrumbs(ResourceType.tenants);
+                    // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.tenants);
                     return <TenantList tabID={'Manage'} {...props} />;
                   }}
                 />
@@ -275,7 +310,7 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenantsConfigureTab.href}
                   render={() => {
-                    setGlobalBreadcrumbs(ResourceType.tenants);
+                    //  setGlobalBreadcrumbs(includeSecurityBase, ResourceType.tenants);
                     return <TenantList tabID={'Configure'} {...props} />;
                   }}
                 />
diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index a4bd9d83..59e30e65 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -16,7 +16,9 @@
 import React from 'react';
 import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
 import { EuiTitle } from '@elastic/eui';
+import { flow } from 'lodash';
 import { ControlProps, DescriptionProps, HeaderProps, TitleProps } from './header-props';
+import { getBreadcrumbs } from '../utils/resource-utils';
 
 // controlType should be one of: https://github.com/AMoo-Miki/OpenSearch-Dashboards/blob/header-collective/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx#L91
 
@@ -72,6 +74,12 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
   const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
   const useNewUx = props.coreStart.chrome.navGroup.getNavGroupEnabled();
   if (useNewUx) {
+    flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
+      !props.coreStart.uiSettings.get('home:useNewHomePage'),
+      props.resourceType,
+      props.pageTitle,
+      props.subAction
+    );
     return (
       <>
         {props.descriptionControls ? (
@@ -89,6 +97,12 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
       </>
     );
   } else {
+    flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
+      !props.coreStart.uiSettings.get('home:useNewHomePage'),
+      props.resourceType,
+      props.pageTitle,
+      props.subAction
+    );
     return props.fallBackComponent;
   }
 };
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index 0a6712eb..e716b425 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -14,6 +14,7 @@
  */
 
 import { CoreStart } from 'opensearch-dashboards/public';
+import { ResourceType } from 'plugins/security-dashboards-plugin/common';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
 
@@ -21,6 +22,9 @@ export interface HeaderProps {
   navigation: NavigationPublicPluginStart;
   coreStart: CoreStart;
   fallBackComponent: JSX.Element;
+  resourceType?: ResourceType;
+  pageTitle?: string;
+  subAction?: string;
 }
 
 export interface ControlProps {
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
index 1f90442b..4de73094 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging-edit-settings.tsx
@@ -166,6 +166,8 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
               </EuiTitle>
             </EuiPageHeader>
           }
+          resourceType={ResourceType.auditLogging}
+          pageTitle="Compliance settings"
         />
 
         <EuiPanel>
@@ -224,6 +226,8 @@ export function AuditLoggingEditSettings(props: AuditLoggingEditSettingProps) {
               </EuiTitle>
             </EuiPageHeader>
           }
+          resourceType={ResourceType.auditLogging}
+          pageTitle="General settings"
         />
 
         <EuiPanel>
diff --git a/public/apps/configuration/panels/audit-logging/audit-logging.tsx b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
index 0eb46b61..efaa13d1 100644
--- a/public/apps/configuration/panels/audit-logging/audit-logging.tsx
+++ b/public/apps/configuration/panels/audit-logging/audit-logging.tsx
@@ -269,6 +269,7 @@ export function AuditLogging(props: AuditLoggingProps) {
             </EuiTitle>
           </EuiPageHeader>
         }
+        resourceType={ResourceType.auditLogging}
       />
       <EuiSpacer />
       {loading ? <EuiLoadingContent /> : content}
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 cd5ae973..fa157563 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
@@ -284,6 +284,7 @@ exports[`Audit logs render when AuditLoggingSettings.enabled is true 1`] = `
       </EuiPageHeader>
     }
     navigation={Object {}}
+    resourceType="auditLogging"
   />
   <EuiSpacer />
   <EuiPanel>
@@ -714,6 +715,7 @@ exports[`Audit logs should load access error component 1`] = `
       </EuiPageHeader>
     }
     navigation={Object {}}
+    resourceType="auditLogging"
   />
   <EuiSpacer />
   <AccessErrorComponent
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index ce96223b..a244e974 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -27,6 +27,7 @@ import { DataSourceContext } from '../../app-router';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { AccessErrorComponent } from '../../access-error-component';
 import { PageHeader } from '../../header/header-components';
+import { ResourceType } from '../../../../../common';
 
 export function AuthView(props: AppDependencies) {
   const [authentication, setAuthentication] = React.useState([]);
@@ -128,6 +129,7 @@ export function AuthView(props: AppDependencies) {
             )}
           </EuiPageHeader>
         }
+        resourceType={ResourceType.auth}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index fb7355b8..e0a965ee 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -206,6 +206,7 @@ export function GetStarted(props: AppDependencies) {
               <ExternalLinkButton text="Open in new window" href={buildHashUrl()} />
             </EuiPageHeader>
           }
+          resourceType={'getStarted'}
         />
         <EuiPanel paddingSize="l">
           <EuiText size="s" color="subdued">
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 8406f005..42922c77 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -66,6 +66,7 @@ import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { AccessErrorComponent } from '../../access-error-component';
 import { PageHeader } from '../../header/header-components';
+import { ResourceType } from '../../../../../common';
 
 export function renderBooleanToCheckMark(value: boolean): React.ReactNode {
   return value ? <EuiIcon type="check" /> : '';
@@ -409,6 +410,7 @@ export function PermissionList(props: AppDependencies) {
             </EuiTitle>
           </EuiPageHeader>
         }
+        resourceType={ResourceType.permissions}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
index 0a286c12..2bc30b2c 100644
--- a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
+++ b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -165,6 +165,7 @@ exports[`Permission list page  AccessError component should load access error co
         </EuiTitle>
       </EuiPageHeader>
     }
+    resourceType="permissions"
   />
   <AccessErrorComponent
     loading={false}
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index eb4a035a..5ed47cab 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -234,8 +234,6 @@ export function RoleEdit(props: RoleEditDeps) {
 
   const tenantOptions = tenantNames.map(stringToComboBoxOption);
 
-  const useUpdatedUX = props.coreStart.uiSettings.get('home:useNewHomePage');
-
   const descriptionData = [
     {
       renderComponent: (
diff --git a/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx b/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
index 715be82a..fcd83ecf 100644
--- a/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
+++ b/public/apps/configuration/panels/role-edit/test/role-edit-filtering.test.tsx
@@ -60,6 +60,7 @@ describe('Role edit filtering', () => {
       navGroup: {
         getNavGroupEnabled: jest.fn().mockReturnValue(false),
       },
+      setBreadcrumbs: jest.fn(),
     },
   };
 
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 03b0494d..94b642bc 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -314,6 +314,7 @@ export function RoleList(props: AppDependencies) {
             </EuiTitle>
           </EuiPageHeader>
         }
+        resourceType={ResourceType.roles}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
index b5e526b4..c7ca56a9 100644
--- a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
+++ b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
@@ -25,6 +25,7 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
           "navGroup": Object {
             "getNavGroupEnabled": [MockFunction],
           },
+          "setBreadcrumbs": [MockFunction],
         },
         "http": 1,
         "uiSettings": Object {
@@ -89,6 +90,7 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
           "navGroup": Object {
             "getNavGroupEnabled": [MockFunction],
           },
+          "setBreadcrumbs": [MockFunction],
         },
         "http": 1,
         "uiSettings": Object {
@@ -190,6 +192,7 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
                   "navGroup": Object {
                     "getNavGroupEnabled": [MockFunction],
                   },
+                  "setBreadcrumbs": [MockFunction],
                 },
                 "http": 1,
                 "uiSettings": Object {
@@ -260,6 +263,7 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
                     "navGroup": Object {
                       "getNavGroupEnabled": [MockFunction],
                     },
+                    "setBreadcrumbs": [MockFunction],
                   },
                   "http": 1,
                   "uiSettings": Object {
@@ -467,6 +471,7 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
           "navGroup": Object {
             "getNavGroupEnabled": [MockFunction],
           },
+          "setBreadcrumbs": [MockFunction],
         },
         "http": 1,
         "uiSettings": Object {
@@ -531,6 +536,7 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
           "navGroup": Object {
             "getNavGroupEnabled": [MockFunction],
           },
+          "setBreadcrumbs": [MockFunction],
         },
         "http": 1,
         "uiSettings": Object {
@@ -773,6 +779,7 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
                     "navGroup": Object {
                       "getNavGroupEnabled": [MockFunction],
                     },
+                    "setBreadcrumbs": [MockFunction],
                   },
                   "http": 1,
                   "uiSettings": Object {
diff --git a/public/apps/configuration/panels/role-view/test/role-view.test.tsx b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
index 6b3dac86..52d48b5c 100644
--- a/public/apps/configuration/panels/role-view/test/role-view.test.tsx
+++ b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
@@ -85,7 +85,10 @@ describe('Role view', () => {
     uiSettings: {
       get: jest.fn().mockReturnValue(false),
     },
-    chrome: { navGroup: { getNavGroupEnabled: jest.fn().mockReturnValue(false) } },
+    chrome: {
+      navGroup: { getNavGroupEnabled: jest.fn().mockReturnValue(false) },
+      setBreadcrumbs: jest.fn(),
+    },
   };
   const buildBreadcrumbs = jest.fn();
 
diff --git a/public/apps/configuration/panels/tenant-list/tenant-list.tsx b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
index 7fdcf50c..aa5ee9e4 100644
--- a/public/apps/configuration/panels/tenant-list/tenant-list.tsx
+++ b/public/apps/configuration/panels/tenant-list/tenant-list.tsx
@@ -33,6 +33,7 @@ import { getDashboardsInfo } from '../../../../utils/dashboards-info-utils';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { PageHeader } from '../../header/header-components';
+import { ResourceType } from '../../../../../common';
 
 interface TenantListProps extends AppDependencies {
   tabID: string;
@@ -171,6 +172,7 @@ export function TenantList(props: TenantListProps) {
             </EuiText>
           </>
         }
+        resourceType={ResourceType.tenants}
       />
 
       <EuiTabs>{renderTabs()}</EuiTabs>
diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index d2edd18e..574297b0 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -64,6 +64,7 @@ exports[`Get started (landing page) renders when backend configuration is disabl
           />
         </EuiPageHeader>
       }
+      resourceType="getStarted"
     />
     <EuiPanel
       paddingSize="l"
@@ -364,6 +365,7 @@ exports[`Get started (landing page) renders when backend configuration is enable
           />
         </EuiPageHeader>
       }
+      resourceType="getStarted"
     />
     <EuiPanel
       paddingSize="l"
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index 78ec518d..7b4c6ad7 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -105,6 +105,7 @@ exports[`Role list AccessError component should load access error component 1`]
       </EuiPageHeader>
     }
     navigation={Object {}}
+    resourceType="roles"
   />
   <EuiPageContent>
     <EuiPageContentHeader
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
index efeebad7..6a3e0719 100644
--- a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -120,6 +120,7 @@ exports[`User list AccessError component should load access error component 1`]
       </EuiPageHeader>
     }
     navigation={Object {}}
+    resourceType="users"
   />
   <AccessErrorComponent
     loading={false}
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index 345d5b28..dab0129f 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -256,6 +256,7 @@ export function UserList(props: AppDependencies) {
             </EuiTitle>
           </EuiPageHeader>
         }
+        resourceType={ResourceType.users}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
index d5ee503b..7f96d34b 100644
--- a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
+++ b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
@@ -24,30 +24,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -66,30 +73,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -108,30 +122,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -150,30 +171,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -192,30 +220,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -234,30 +269,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -276,30 +318,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -318,30 +367,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -360,30 +416,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -402,30 +465,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
+                  "displayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
+                  "displayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
diff --git a/public/apps/configuration/test/app-router.test.tsx b/public/apps/configuration/test/app-router.test.tsx
index 4bb61888..ff3ededf 100644
--- a/public/apps/configuration/test/app-router.test.tsx
+++ b/public/apps/configuration/test/app-router.test.tsx
@@ -35,6 +35,9 @@ describe('SecurityPluginTopNavMenu', () => {
         getNavGroupEnabled: jest.fn().mockReturnValue(false),
       },
     },
+    uiSettings: {
+      get: jest.fn().mockReturnValue(false),
+    },
   };
 
   const securityPluginConfigMock = {
diff --git a/public/apps/configuration/types.ts b/public/apps/configuration/types.ts
index 967072d1..adbede12 100644
--- a/public/apps/configuration/types.ts
+++ b/public/apps/configuration/types.ts
@@ -46,6 +46,7 @@ export enum TenantPermissionType {
 export interface RouteItem {
   name: string;
   href: string;
+  displayNameWithoutSecurityBase: string;
 }
 
 export interface DataObject<T> {
diff --git a/public/apps/configuration/utils/resource-utils.tsx b/public/apps/configuration/utils/resource-utils.tsx
index ac30e425..aa56b4bf 100644
--- a/public/apps/configuration/utils/resource-utils.tsx
+++ b/public/apps/configuration/utils/resource-utils.tsx
@@ -13,6 +13,11 @@
  *   permissions and limitations under the License.
  */
 
+import { EuiBreadcrumb } from '@elastic/eui';
+import { ResourceType } from 'plugins/security-dashboards-plugin/common';
+import { buildHashUrl } from './url-builder';
+import { ROUTE_MAP } from '../app-router';
+
 export function generateResourceName(action: string, sourceResourceName: string): string {
   switch (action) {
     case 'edit':
@@ -27,3 +32,46 @@ export function generateResourceName(action: string, sourceResourceName: string)
 export function getResourceUrl(endpoint: string, resourceName: string) {
   return endpoint + '/' + encodeURIComponent(resourceName);
 }
+
+export function getBreadcrumbs(
+  includeSecurityBase: boolean,
+  resourceType?: ResourceType,
+  pageTitle?: string,
+  subAction?: string
+): EuiBreadcrumb[] {
+  const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
+    ? [
+        {
+          text: 'Security',
+          href: buildHashUrl(),
+        },
+      ]
+    : [];
+
+  if (resourceType) {
+    if (includeSecurityBase) {
+      breadcrumbs.push({
+        text: ROUTE_MAP[resourceType].name,
+        href: buildHashUrl(resourceType),
+      });
+    } else {
+      breadcrumbs.push({
+        text: ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
+        href: buildHashUrl(resourceType),
+      });
+    }
+  }
+
+  if (pageTitle) {
+    breadcrumbs.push({
+      text: pageTitle,
+    });
+  }
+
+  if (subAction) {
+    breadcrumbs.push({
+      text: subAction,
+    });
+  }
+  return breadcrumbs;
+}

From 44983ad4997c54fa127402e1c56b182bf408f876 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 9 Aug 2024 14:44:29 -0400
Subject: [PATCH 17/24] Migrate breadcrumbs into the page header component for
 the top level of all pages

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/apps/configuration/app-router.tsx      | 55 +------------------
 .../header/header-components.tsx              | 20 +++----
 .../configuration/header/header-props.tsx     |  1 +
 .../permission-list/permission-list.tsx       |  1 +
 .../permission-list.test.tsx.snap             |  1 +
 .../apps/configuration/panels/role-list.tsx   |  1 +
 .../panels/tenant-list/manage_tab.tsx         |  3 +-
 .../__snapshots__/role-list.test.tsx.snap     |  1 +
 .../__snapshots__/user-list.test.tsx.snap     |  1 +
 .../apps/configuration/panels/user-list.tsx   |  1 +
 .../configuration/utils/resource-utils.tsx    |  8 ++-
 11 files changed, 22 insertions(+), 71 deletions(-)

diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index 74615722..ddcc0494 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -41,6 +41,7 @@ import { ResourceType } from '../../../common';
 import { buildHashUrl, buildUrl } from './utils/url-builder';
 import { CrossPageToast } from './cross-page-toast';
 import { getDataSourceFromUrl, LocalCluster } from '../../utils/datasource-utils';
+import { getBreadcrumbs } from './utils/resource-utils';
 
 const LANDING_PAGE_URL = '/getstarted';
 
@@ -107,42 +108,6 @@ export const allNavPanelUrls = (multitenancyEnabled: boolean) =>
       ...(multitenancyEnabled ? [buildUrl(ResourceType.tenantsConfigureTab)] : []),
     ]);
 
-export function getBreadcrumbs(
-  includeSecurityBase: boolean,
-  resourceType?: ResourceType,
-  pageTitle?: string,
-  subAction?: string
-): EuiBreadcrumb[] {
-  const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
-    ? [
-        {
-          text: 'Security',
-          href: buildHashUrl(),
-        },
-      ]
-    : [];
-
-  if (resourceType) {
-    breadcrumbs.push({
-      text: ROUTE_MAP[resourceType].name,
-      href: buildHashUrl(resourceType),
-    });
-  }
-
-  if (pageTitle) {
-    breadcrumbs.push({
-      text: pageTitle,
-    });
-  }
-
-  if (subAction) {
-    breadcrumbs.push({
-      text: subAction,
-    });
-  }
-  return breadcrumbs;
-}
-
 function decodeParams(params: { [k: string]: string }): any {
   return Object.keys(params).reduce((obj: { [k: string]: string }, key: string) => {
     obj[key] = decodeURIComponent(params[key]);
@@ -223,14 +188,12 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={ROUTE_MAP.roles.href}
                 render={() => {
-                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.roles);
                   return <RoleList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auth.href}
                 render={() => {
-                  //  setGlobalBreadcrumbs(includeSecurityBase, ResourceType.auth);
                   return <AuthView {...props} />;
                 }}
               />
@@ -250,50 +213,36 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={ROUTE_MAP.users.href}
                 render={() => {
-                  //    setGlobalBreadcrumbs(includeSecurityBase, ResourceType.users);
                   return <UserList {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_GENERAL_SETTINGS_EDIT}
                 render={() => {
-                  // setGlobalBreadcrumbs(
-                  //   includeSecurityBase,
-                  //   ResourceType.auditLogging,
-                  //   'General settings'
-                  // );
                   return <AuditLoggingEditSettings setting={'general'} {...props} />;
                 }}
               />
               <Route
                 path={buildUrl(ResourceType.auditLogging) + SUB_URL_FOR_COMPLIANCE_SETTINGS_EDIT}
                 render={() => {
-                  // setGlobalBreadcrumbs(
-                  //   includeSecurityBase,
-                  //   ResourceType.auditLogging,
-                  //   'Compliance settings'
-                  // );
                   return <AuditLoggingEditSettings setting={'compliance'} {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.auditLogging.href + '/:fromType?'}
                 render={(match) => {
-                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.auditLogging);
                   return <AuditLogging {...{ ...props, ...match.match.params }} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.permissions.href}
                 render={() => {
-                  // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.permissions);
                   return <PermissionList {...props} />;
                 }}
               />
               <Route
                 path={ROUTE_MAP.getStarted.href}
                 render={() => {
-                  // setGlobalBreadcrumbs(includeSecurityBase);
                   return <GetStarted {...props} />;
                 }}
               />
@@ -301,7 +250,6 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenants.href}
                   render={() => {
-                    // setGlobalBreadcrumbs(includeSecurityBase, ResourceType.tenants);
                     return <TenantList tabID={'Manage'} {...props} />;
                   }}
                 />
@@ -310,7 +258,6 @@ export function AppRouter(props: AppDependencies) {
                 <Route
                   path={ROUTE_MAP.tenantsConfigureTab.href}
                   render={() => {
-                    //  setGlobalBreadcrumbs(includeSecurityBase, ResourceType.tenants);
                     return <TenantList tabID={'Configure'} {...props} />;
                   }}
                 />
diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index 59e30e65..e3437c8f 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -73,13 +73,15 @@ export const HeaderDescription = React.memo((props: DescriptionProps) => {
 export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps) => {
   const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
   const useNewUx = props.coreStart.chrome.navGroup.getNavGroupEnabled();
+  flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
+    !props.coreStart.uiSettings.get('home:useNewHomePage'),
+    props.resourceType,
+    props.pageTitle,
+    props.subAction,
+    props.count
+  );
   if (useNewUx) {
-    flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
-      !props.coreStart.uiSettings.get('home:useNewHomePage'),
-      props.resourceType,
-      props.pageTitle,
-      props.subAction
-    );
+    
     return (
       <>
         {props.descriptionControls ? (
@@ -97,12 +99,6 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
       </>
     );
   } else {
-    flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
-      !props.coreStart.uiSettings.get('home:useNewHomePage'),
-      props.resourceType,
-      props.pageTitle,
-      props.subAction
-    );
     return props.fallBackComponent;
   }
 };
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index e716b425..9e532e2e 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -25,6 +25,7 @@ export interface HeaderProps {
   resourceType?: ResourceType;
   pageTitle?: string;
   subAction?: string;
+  count?: number;
 }
 
 export interface ControlProps {
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index 42922c77..bc17f93e 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -411,6 +411,7 @@ export function PermissionList(props: AppDependencies) {
           </EuiPageHeader>
         }
         resourceType={ResourceType.permissions}
+        count={permissionList.length}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
index 2bc30b2c..04c70f89 100644
--- a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
+++ b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -132,6 +132,7 @@ exports[`Permission list page  AccessError component should load access error co
         },
       }
     }
+    count={0}
     descriptionControls={
       Array [
         Object {
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 94b642bc..94635a2a 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -315,6 +315,7 @@ export function RoleList(props: AppDependencies) {
           </EuiPageHeader>
         }
         resourceType={ResourceType.roles}
+        count={roleData.length}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index c5307dd1..2e3f0e8e 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -66,10 +66,9 @@ import { PageId } from '../../types';
 import { useDeleteConfirmState } from '../../utils/delete-confirm-modal-utils';
 import { showTableStatusMessage } from '../../utils/loading-spinner-utils';
 import { useContextMenuState } from '../../utils/context-menu';
-import { generateResourceName } from '../../utils/resource-utils';
+import { generateResourceName, getBreadcrumbs } from '../../utils/resource-utils';
 import { DocLinks } from '../../constants';
 import { TenantList } from './tenant-list';
-import { getBreadcrumbs } from '../../app-router';
 import { LocalCluster } from '../../../../utils/datasource-utils';
 import { buildUrl } from '../../utils/url-builder';
 import { CrossPageToast } from '../../cross-page-toast';
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index 7b4c6ad7..f55060ec 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -73,6 +73,7 @@ exports[`Role list AccessError component should load access error component 1`]
         },
       }
     }
+    count={0}
     descriptionControls={
       Array [
         Object {
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
index 6a3e0719..f069a919 100644
--- a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -81,6 +81,7 @@ exports[`User list AccessError component should load access error component 1`]
         },
       }
     }
+    count={0}
     descriptionControls={
       Array [
         Object {
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index dab0129f..ac89e280 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -257,6 +257,7 @@ export function UserList(props: AppDependencies) {
           </EuiPageHeader>
         }
         resourceType={ResourceType.users}
+        count={userData.length}
       />
       {loading ? (
         <EuiLoadingContent />
diff --git a/public/apps/configuration/utils/resource-utils.tsx b/public/apps/configuration/utils/resource-utils.tsx
index aa56b4bf..e0e3e571 100644
--- a/public/apps/configuration/utils/resource-utils.tsx
+++ b/public/apps/configuration/utils/resource-utils.tsx
@@ -14,7 +14,8 @@
  */
 
 import { EuiBreadcrumb } from '@elastic/eui';
-import { ResourceType } from 'plugins/security-dashboards-plugin/common';
+import { ResourceType } from '../../../../common';
+import { i18n } from '@osd/i18n';
 import { buildHashUrl } from './url-builder';
 import { ROUTE_MAP } from '../app-router';
 
@@ -37,7 +38,8 @@ export function getBreadcrumbs(
   includeSecurityBase: boolean,
   resourceType?: ResourceType,
   pageTitle?: string,
-  subAction?: string
+  subAction?: string,
+  count?: number,
 ): EuiBreadcrumb[] {
   const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
     ? [
@@ -56,7 +58,7 @@ export function getBreadcrumbs(
       });
     } else {
       breadcrumbs.push({
-        text: ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
+        text: count ? `${ROUTE_MAP[resourceType].displayNameWithoutSecurityBase} (${count})` : ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
         href: buildHashUrl(resourceType),
       });
     }

From a09d6437d7e55bfd2524baff33a75da9eac74342 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 9 Aug 2024 14:44:53 -0400
Subject: [PATCH 18/24]  Lint

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/apps/configuration/app-router.tsx               | 4 ++--
 public/apps/configuration/header/header-components.tsx | 1 -
 public/apps/configuration/utils/resource-utils.tsx     | 7 ++++---
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index ddcc0494..f83bb331 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -13,7 +13,7 @@
  *   permissions and limitations under the License.
  */
 
-import { EuiBreadcrumb, EuiPage, EuiPageBody, EuiPageSideBar } from '@elastic/eui';
+import { EuiPage, EuiPageBody, EuiPageSideBar } from '@elastic/eui';
 import { flow, partial } from 'lodash';
 import React, { createContext, useState } from 'react';
 import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
@@ -38,7 +38,7 @@ import { TenantList } from './panels/tenant-list/tenant-list';
 import { UserList } from './panels/user-list';
 import { Action, RouteItem, SubAction } from './types';
 import { ResourceType } from '../../../common';
-import { buildHashUrl, buildUrl } from './utils/url-builder';
+import { buildUrl } from './utils/url-builder';
 import { CrossPageToast } from './cross-page-toast';
 import { getDataSourceFromUrl, LocalCluster } from '../../utils/datasource-utils';
 import { getBreadcrumbs } from './utils/resource-utils';
diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index e3437c8f..05d0f566 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -81,7 +81,6 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
     props.count
   );
   if (useNewUx) {
-    
     return (
       <>
         {props.descriptionControls ? (
diff --git a/public/apps/configuration/utils/resource-utils.tsx b/public/apps/configuration/utils/resource-utils.tsx
index e0e3e571..708b64f2 100644
--- a/public/apps/configuration/utils/resource-utils.tsx
+++ b/public/apps/configuration/utils/resource-utils.tsx
@@ -15,7 +15,6 @@
 
 import { EuiBreadcrumb } from '@elastic/eui';
 import { ResourceType } from '../../../../common';
-import { i18n } from '@osd/i18n';
 import { buildHashUrl } from './url-builder';
 import { ROUTE_MAP } from '../app-router';
 
@@ -39,7 +38,7 @@ export function getBreadcrumbs(
   resourceType?: ResourceType,
   pageTitle?: string,
   subAction?: string,
-  count?: number,
+  count?: number
 ): EuiBreadcrumb[] {
   const breadcrumbs: EuiBreadcrumb[] = includeSecurityBase
     ? [
@@ -58,7 +57,9 @@ export function getBreadcrumbs(
       });
     } else {
       breadcrumbs.push({
-        text: count ? `${ROUTE_MAP[resourceType].displayNameWithoutSecurityBase} (${count})` : ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
+        text: count
+          ? `${ROUTE_MAP[resourceType].displayNameWithoutSecurityBase} (${count})`
+          : ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
         href: buildHashUrl(resourceType),
       });
     }

From 9b74854086f0af2a757bfe55df7299907845ba95 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Fri, 9 Aug 2024 18:09:02 -0400
Subject: [PATCH 19/24] Update all instances of breadcrumbs to new component
 and all existing tests pass

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/apps/configuration/app-router.tsx      | 38 +++--------------
 .../header/header-components.tsx              | 40 +-----------------
 .../internal-user-edit/internal-user-edit.tsx |  3 +-
 .../test/internal-user-edit.test.tsx          |  2 -
 .../panels/role-edit/role-edit.tsx            |  3 +-
 .../panels/role-edit/test/role-edit.test.tsx  |  5 ---
 .../role-mapping/role-edit-mapped-user.tsx    | 41 ++++++++++++++-----
 .../test/role-edit-mapped-user.test.tsx       |  6 ---
 .../panels/role-view/role-view.tsx            |  4 +-
 .../__snapshots__/role-view.test.tsx.snap     | 34 ++-------------
 .../panels/role-view/test/role-view.test.tsx  |  3 --
 11 files changed, 47 insertions(+), 132 deletions(-)

diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index f83bb331..36c3c381 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -14,7 +14,7 @@
  */
 
 import { EuiPage, EuiPageBody, EuiPageSideBar } from '@elastic/eui';
-import { flow, partial } from 'lodash';
+import { flow } from 'lodash';
 import React, { createContext, useState } from 'react';
 import { HashRouter as Router, Route, Switch, Redirect } from 'react-router-dom';
 import { DataSourceOption } from 'src/plugins/data_source_management/public/components/data_source_menu/types';
@@ -149,40 +149,19 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={buildUrl(ResourceType.roles, Action.edit) + '/:roleName/' + SubAction.mapuser}
                 render={(match) => (
-                  <RoleEditMappedUser
-                    buildBreadcrumbs={partial(
-                      setGlobalBreadcrumbs,
-                      includeSecurityBase,
-                      ResourceType.roles
-                    )}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <RoleEditMappedUser {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
                 path={buildUrl(ResourceType.roles, Action.view) + '/:roleName/:prevAction?'}
                 render={(match) => (
-                  <RoleView
-                    buildBreadcrumbs={partial(
-                      setGlobalBreadcrumbs,
-                      includeSecurityBase,
-                      ResourceType.roles
-                    )}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <RoleView {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
                 path={buildUrl(ResourceType.roles) + '/:action/:sourceRoleName?'}
                 render={(match) => (
-                  <RoleEdit
-                    buildBreadcrumbs={partial(
-                      setGlobalBreadcrumbs,
-                      includeSecurityBase,
-                      ResourceType.roles
-                    )}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <RoleEdit {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
@@ -200,14 +179,7 @@ export function AppRouter(props: AppDependencies) {
               <Route
                 path={buildUrl(ResourceType.users) + '/:action/:sourceUserName?'}
                 render={(match) => (
-                  <InternalUserEdit
-                    buildBreadcrumbs={partial(
-                      setGlobalBreadcrumbs,
-                      includeSecurityBase,
-                      ResourceType.users
-                    )}
-                    {...{ ...props, ...decodeParams(match.match.params) }}
-                  />
+                  <InternalUserEdit {...{ ...props, ...decodeParams(match.match.params) }} />
                 )}
               />
               <Route
diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index 05d0f566..b2edb396 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -14,10 +14,8 @@
  */
 
 import React from 'react';
-import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
-import { EuiTitle } from '@elastic/eui';
 import { flow } from 'lodash';
-import { ControlProps, DescriptionProps, HeaderProps, TitleProps } from './header-props';
+import { ControlProps, DescriptionProps, HeaderProps } from './header-props';
 import { getBreadcrumbs } from '../utils/resource-utils';
 
 // controlType should be one of: https://github.com/AMoo-Miki/OpenSearch-Dashboards/blob/header-collective/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx#L91
@@ -34,42 +32,6 @@ export const HeaderButtonOrLink = React.memo((props: ControlProps) => {
   );
 });
 
-export const HeaderTitle = React.memo((props: TitleProps) => {
-  const { HeaderControl } = props.navigation.ui;
-  const titleData: TopNavControlData[] = [
-    {
-      renderComponent: (
-        <EuiTitle size="l">
-          <h1>
-            {props.pageHeader}
-            {props.shouldDisplayCount ? ` (${props.count})` : null}
-          </h1>
-        </EuiTitle>
-      ),
-    },
-  ];
-
-  return (
-    <HeaderControl
-      setMountPoint={props.application.setAppLeftControls}
-      controls={titleData}
-      className={props.className}
-    />
-  );
-});
-
-export const HeaderDescription = React.memo((props: DescriptionProps) => {
-  const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
-
-  return (
-    <HeaderControl
-      setMountPoint={props.application.setAppDescriptionControls}
-      controls={props.controls}
-      className={props.className}
-    />
-  );
-});
-
 export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps) => {
   const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
   const useNewUx = props.coreStart.chrome.navGroup.getNavGroupEnabled();
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 66edb73e..6546978c 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
@@ -174,7 +174,6 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
         descriptionControls={descriptionData}
         fallBackComponent={
           <>
-            {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
             <EuiSpacer />
             <EuiPageHeader>
               <EuiFlexGroup direction="column" gutterSize="xs">
@@ -194,6 +193,8 @@ export function InternalUserEdit(props: InternalUserEditDeps) {
             </EuiPageHeader>
           </>
         }
+        resourceType={ResourceType.users}
+        subAction={TITLE_TEXT_DICT[props.action]}
       />
       <PanelWithHeader headerText="Credentials">
         <EuiForm>
diff --git a/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx b/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx
index 241f4e14..dc734e45 100644
--- a/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx
+++ b/public/apps/configuration/panels/internal-user-edit/test/internal-user-edit.test.tsx
@@ -54,7 +54,6 @@ describe('Internal user edit', () => {
       <InternalUserEdit
         action={action}
         sourceUserName={sampleUsername}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -62,7 +61,6 @@ describe('Internal user edit', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(AttributePanel).length).toBe(1);
   });
 
diff --git a/public/apps/configuration/panels/role-edit/role-edit.tsx b/public/apps/configuration/panels/role-edit/role-edit.tsx
index 5ed47cab..6006600f 100644
--- a/public/apps/configuration/panels/role-edit/role-edit.tsx
+++ b/public/apps/configuration/panels/role-edit/role-edit.tsx
@@ -261,7 +261,6 @@ export function RoleEdit(props: RoleEditDeps) {
         fallBackComponent={
           <>
             {' '}
-            {props.buildBreadcrumbs(TITLE_TEXT_DICT[props.action])}
             <EuiPageHeader>
               <EuiText size="xs" color="subdued" className="panel-header-subtext">
                 <EuiTitle size="m">
@@ -279,6 +278,8 @@ export function RoleEdit(props: RoleEditDeps) {
         navigation={props.depsStart.navigation}
         coreStart={props.coreStart}
         descriptionControls={descriptionData}
+        resourceType={ResourceType.roles}
+        subAction={TITLE_TEXT_DICT[props.action]}
       />
       <PanelWithHeader headerText="Name">
         <EuiForm>
diff --git a/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx b/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
index 80730c0e..fca458cb 100644
--- a/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
+++ b/public/apps/configuration/panels/role-edit/test/role-edit.test.tsx
@@ -58,13 +58,11 @@ describe('Role edit', () => {
 
   it('basic rendering', () => {
     const action = 'create';
-    const buildBreadcrumbs = jest.fn();
 
     const component = shallow(
       <RoleEdit
         action={action}
         sourceRoleName={sampleSourceRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -72,7 +70,6 @@ describe('Role edit', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(ClusterPermissionPanel).length).toBe(1);
     expect(component.find(IndexPermissionPanel).length).toBe(1);
     expect(component.find(TenantPanel).length).toBe(1);
@@ -84,13 +81,11 @@ describe('Role edit', () => {
     useEffect.mockImplementationOnce((f) => f());
     useState.mockImplementation((initialValue) => [initialValue, jest.fn()]);
     const action = 'edit';
-    const buildBreadcrumbs = jest.fn();
 
     const component = shallow(
       <RoleEdit
         action={action}
         sourceRoleName={sampleSourceRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
diff --git a/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx b/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
index a99689fd..956f9ebe 100644
--- a/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
+++ b/public/apps/configuration/panels/role-mapping/role-edit-mapped-user.tsx
@@ -46,6 +46,7 @@ import { ExternalLink } from '../../utils/display-utils';
 import { SecurityPluginTopNavMenu } from '../../top-nav-menu';
 import { DataSourceContext } from '../../app-router';
 import { getClusterInfo } from '../../../../utils/datasource-utils';
+import { PageHeader } from '../../header/header-components';
 
 interface RoleEditMappedUserProps extends BreadcrumbsPageDependencies {
   roleName: string;
@@ -55,6 +56,17 @@ const TITLE_TEXT_DICT = {
   mapuser: 'Map user',
 };
 
+const descriptionData = [
+  {
+    renderComponent: (
+      <EuiText size="xs" color="subdued">
+        Map users to this role to inherit role permissions. Two types of users are supported: user,
+        and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+      </EuiText>
+    ),
+  },
+];
+
 export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
   const [internalUsers, setInternalUsers] = React.useState<ComboBoxOptions>([]);
   const [externalIdentities, setExternalIdentities] = React.useState<ExternalIdentityStateClass[]>(
@@ -150,16 +162,25 @@ export function RoleEditMappedUser(props: RoleEditMappedUserProps) {
         setDataSource={setDataSource}
         selectedDataSource={dataSource}
       />
-      {props.buildBreadcrumbs(props.roleName, TITLE_TEXT_DICT[SubAction.mapuser])}
-      <EuiPageHeader>
-        <EuiText size="xs" color="subdued">
-          <EuiTitle size="m">
-            <h1>Map user</h1>
-          </EuiTitle>
-          Map users to this role to inherit role permissions. Two types of users are supported:
-          user, and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
-        </EuiText>
-      </EuiPageHeader>
+      <PageHeader
+        navigation={props.depsStart.navigation}
+        coreStart={props.coreStart}
+        fallBackComponent={
+          <EuiPageHeader>
+            <EuiText size="xs" color="subdued">
+              <EuiTitle size="m">
+                <h1>Map user</h1>
+              </EuiTitle>
+              Map users to this role to inherit role permissions. Two types of users are supported:
+              user, and backend role. <ExternalLink href={DocLinks.MapUsersToRolesDoc} />
+            </EuiText>
+          </EuiPageHeader>
+        }
+        resourceType={ResourceType.roles}
+        subAction={TITLE_TEXT_DICT[SubAction.mapuser]}
+        pageTitle={props.roleName}
+        descriptionControls={descriptionData}
+      />
       <EuiSpacer size="m" />
       <InternalUsersPanel
         state={internalUsers}
diff --git a/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx b/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx
index 44d4d0a2..d934dbd0 100644
--- a/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx
+++ b/public/apps/configuration/panels/role-mapping/test/role-edit-mapped-user.test.tsx
@@ -39,7 +39,6 @@ describe('Role mapping edit', () => {
   const mockCoreStart = {
     http: 1,
   };
-  const buildBreadcrumbs = jest.fn();
 
   const useEffect = jest.spyOn(React, 'useEffect');
   const useState = jest.spyOn(React, 'useState');
@@ -54,7 +53,6 @@ describe('Role mapping edit', () => {
     const component = shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -62,7 +60,6 @@ describe('Role mapping edit', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(InternalUsersPanel).length).toBe(1);
     expect(component.find(ExternalIdentitiesPanel).length).toBe(1);
   });
@@ -79,7 +76,6 @@ describe('Role mapping edit', () => {
     shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -100,7 +96,6 @@ describe('Role mapping edit', () => {
     const component = shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -133,7 +128,6 @@ describe('Role mapping edit', () => {
     const component = shallow(
       <RoleEditMappedUser
         roleName={sampleRole}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index d1fe3e44..6ac2b750 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -462,8 +462,6 @@ export function RoleView(props: RoleViewProps) {
         controlControls={roleView}
         fallBackComponent={
           <>
-            {props.buildBreadcrumbs(props.roleName)}
-
             <EuiPageContentHeader>
               <EuiPageContentHeaderSection>
                 <EuiTitle size="l">
@@ -475,6 +473,8 @@ export function RoleView(props: RoleViewProps) {
             </EuiPageContentHeader>
           </>
         }
+        resourceType={ResourceType.roles}
+        subAction={props.roleName}
       />
       <EuiTabbedContent
         tabs={tabs}
diff --git a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
index c7ca56a9..dd05b6aa 100644
--- a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
+++ b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
@@ -3,21 +3,6 @@
 exports[`Role view basic rendering when permission tab is selected 1`] = `
 <Fragment>
   <Memo()
-    buildBreadcrumbs={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "role",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
     config={Object {}}
     coreStart={
       Object {
@@ -152,6 +137,8 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
         </EuiPageContentHeader>
       </React.Fragment>
     }
+    resourceType="roles"
+    subAction="role"
   />
   <EuiTabbedContent
     autoFocus="initial"
@@ -449,21 +436,6 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
 exports[`Role view renders when mapped user tab is selected 1`] = `
 <Fragment>
   <Memo()
-    buildBreadcrumbs={
-      [MockFunction] {
-        "calls": Array [
-          Array [
-            "role",
-          ],
-        ],
-        "results": Array [
-          Object {
-            "type": "return",
-            "value": undefined,
-          },
-        ],
-      }
-    }
     config={Object {}}
     coreStart={
       Object {
@@ -598,6 +570,8 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
         </EuiPageContentHeader>
       </React.Fragment>
     }
+    resourceType="roles"
+    subAction="role"
   />
   <EuiTabbedContent
     autoFocus="initial"
diff --git a/public/apps/configuration/panels/role-view/test/role-view.test.tsx b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
index 52d48b5c..50b0e81d 100644
--- a/public/apps/configuration/panels/role-view/test/role-view.test.tsx
+++ b/public/apps/configuration/panels/role-view/test/role-view.test.tsx
@@ -105,7 +105,6 @@ describe('Role view', () => {
       <RoleView
         roleName={sampleRole}
         prevAction=""
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}
@@ -113,7 +112,6 @@ describe('Role view', () => {
       />
     );
 
-    expect(buildBreadcrumbs).toBeCalledTimes(1);
     expect(component.find(EuiTabbedContent).length).toBe(1);
 
     const tabs = component.find(EuiTabbedContent).dive();
@@ -128,7 +126,6 @@ describe('Role view', () => {
       <RoleView
         roleName={sampleRole}
         prevAction={SubAction.mapuser}
-        buildBreadcrumbs={buildBreadcrumbs}
         coreStart={mockCoreStart as any}
         depsStart={{} as any}
         params={{} as any}

From ff7b0434752bcc34c11e7ff8f9509e2c60496650 Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Fri, 9 Aug 2024 19:26:16 -0400
Subject: [PATCH 20/24] Fixes target _blank redirects

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 public/apps/configuration/panels/auth-view/auth-view.tsx    | 2 +-
 public/apps/configuration/panels/get-started.tsx            | 2 +-
 public/apps/configuration/panels/role-list.tsx              | 1 -
 public/apps/configuration/panels/role-view/role-view.tsx    | 4 ----
 public/apps/configuration/panels/tenant-list/manage_tab.tsx | 1 -
 public/apps/configuration/panels/user-list.tsx              | 1 -
 6 files changed, 2 insertions(+), 9 deletions(-)

diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index a244e974..feb18b5d 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -70,7 +70,7 @@ export function AuthView(props: AppDependencies) {
       iconType: 'popout',
       iconSide: 'right',
       type: 'button',
-      // target: "_blank"
+      target: '_blank',
     },
   ];
 
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index e0a965ee..1e45d09b 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -182,7 +182,7 @@ export function GetStarted(props: AppDependencies) {
       iconType: 'popout',
       iconSide: 'right',
       type: 'button',
-      // target: "_blank"
+      target: '_blank',
     },
   ];
   return (
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 94635a2a..74623083 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -273,7 +273,6 @@ export function RoleList(props: AppDependencies) {
       iconSide: 'left',
       type: 'button',
       testId: 'create-role',
-      // target: "_blank"
     },
   ];
   const descriptionData = [
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index 6ac2b750..aebfc67d 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -403,7 +403,6 @@ export function RoleView(props: RoleViewProps) {
       href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
       type: 'button',
       fill: true,
-      // target: "_blank"
     },
   ];
   const roleButtons = [
@@ -427,14 +426,12 @@ export function RoleView(props: RoleViewProps) {
       type: 'button', // this should be icon, but icons current do not support a border currently
       testId: 'delete',
       ariaLabel: 'delete',
-      // target: "_blank"
     },
     {
       label: 'Duplicate',
       isLoading: false,
       href: duplicateRoleLink,
       type: 'button',
-      // target: "_blank"
     },
     {
       label: 'Edit role',
@@ -442,7 +439,6 @@ export function RoleView(props: RoleViewProps) {
       href: buildHashUrl(ResourceType.roles, Action.edit, props.roleName),
       fill: true,
       type: 'button',
-      // target: "_blank"
     },
   ];
 
diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index 2e3f0e8e..f0f91856 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -514,7 +514,6 @@ export function ManageTab(props: AppDependencies) {
       run: () => showEditModal('', Action.create, ''),
       type: 'button',
       fill: true,
-      // target: "_blank"
     },
   ];
   /* eslint-disable */
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index ac89e280..b51a0d61 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -216,7 +216,6 @@ export function UserList(props: AppDependencies) {
       iconSide: 'left',
       type: 'button',
       testId: 'create-user',
-      // target: "_blank"
     },
   ];
   const descriptionData = [

From d4ed1dfec9a31f1284991a29e584710c73e93429 Mon Sep 17 00:00:00 2001
From: Darshit Chanpura <dchanp@amazon.com>
Date: Fri, 9 Aug 2024 19:47:45 -0400
Subject: [PATCH 21/24] Fixes unit tests

Signed-off-by: Darshit Chanpura <dchanp@amazon.com>
---
 .../panels/test/__snapshots__/get-started.test.tsx.snap         | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index 574297b0..b43cc332 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -40,6 +40,7 @@ exports[`Get started (landing page) renders when backend configuration is disabl
             "iconType": "popout",
             "isLoading": false,
             "label": "Open in new window",
+            "target": "_blank",
             "type": "button",
           },
         ]
@@ -341,6 +342,7 @@ exports[`Get started (landing page) renders when backend configuration is enable
             "iconType": "popout",
             "isLoading": false,
             "label": "Open in new window",
+            "target": "_blank",
             "type": "button",
           },
         ]

From 6ccede6469095699800fa6ae7ab03874bed88815 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 12 Aug 2024 14:16:54 -0400
Subject: [PATCH 22/24] Add tests for new component and breadcrumb function

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../header/header-components.tsx              |  4 +-
 .../configuration/header/header-props.tsx     |  2 +-
 .../header/test/header-components.test.tsx    | 92 +++++++++++++++++++
 .../utils/test/resource-utils.test.tsx        | 61 +++++++++++-
 4 files changed, 151 insertions(+), 8 deletions(-)
 create mode 100644 public/apps/configuration/header/test/header-components.test.tsx

diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index b2edb396..2be3edfc 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -34,9 +34,9 @@ export const HeaderButtonOrLink = React.memo((props: ControlProps) => {
 
 export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps) => {
   const { HeaderControl } = props.navigation.ui; // need to get this from SecurityPluginStartDependencies
-  const useNewUx = props.coreStart.chrome.navGroup.getNavGroupEnabled();
+  const useNewUx = props.coreStart.uiSettings.get('home:useNewHomePage');
   flow(getBreadcrumbs, props.coreStart.chrome.setBreadcrumbs)(
-    !props.coreStart.uiSettings.get('home:useNewHomePage'),
+    !useNewUx,
     props.resourceType,
     props.pageTitle,
     props.subAction,
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index 9e532e2e..516c1833 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -14,9 +14,9 @@
  */
 
 import { CoreStart } from 'opensearch-dashboards/public';
-import { ResourceType } from 'plugins/security-dashboards-plugin/common';
 import { NavigationPublicPluginStart } from 'src/plugins/navigation/public';
 import { TopNavControlData } from 'src/plugins/navigation/public/top_nav_menu/top_nav_control_data';
+import { ResourceType } from '../../../../common';
 
 export interface HeaderProps {
   navigation: NavigationPublicPluginStart;
diff --git a/public/apps/configuration/header/test/header-components.test.tsx b/public/apps/configuration/header/test/header-components.test.tsx
new file mode 100644
index 00000000..703faec5
--- /dev/null
+++ b/public/apps/configuration/header/test/header-components.test.tsx
@@ -0,0 +1,92 @@
+/*
+ *   Copyright OpenSearch Contributors
+ *
+ *   Licensed under the Apache License, Version 2.0 (the "License").
+ *   You may not use this file except in compliance with the License.
+ *   A copy of the License is located at
+ *
+ *       http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *   or in the "license" file accompanying this file. This file is distributed
+ *   on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either
+ *   express or implied. See the License for the specific language governing
+ *   permissions and limitations under the License.
+ */
+
+import React from 'react';
+import { mount } from 'enzyme';
+import { PageHeader } from '../header-components'; // Adjust the import path as needed
+import { getBreadcrumbs } from '../../utils/resource-utils';
+
+jest.mock('../../utils/resource-utils', () => ({
+  getBreadcrumbs: jest.fn(),
+}));
+
+describe('PageHeader', () => {
+  let props;
+
+  beforeEach(() => {
+    jest.resetAllMocks();
+    props = {
+      navigation: {
+        ui: {
+          HeaderControl: jest.fn(({ setMountPoint, controls }) => null),
+        },
+      },
+      coreStart: {
+        chrome: {
+          navGroup: {
+            getNavGroupEnabled: jest.fn(),
+          },
+          setBreadcrumbs: jest.fn(),
+        },
+        application: {
+          setAppRightControls: jest.fn(),
+          setAppDescriptionControls: jest.fn(),
+        },
+        uiSettings: {
+          get: jest.fn(),
+        },
+      },
+      resourceType: 'test-resource',
+      pageTitle: 'Test Page Title',
+      subAction: 'test-sub-action',
+      count: 5,
+      descriptionControls: ['control-1'],
+      controlControls: ['control-2'],
+      fallBackComponent: <div>Fallback Component</div>,
+    };
+  });
+
+  it('renders with the feature flag off', () => {
+    props.coreStart.uiSettings.get.mockReturnValueOnce(false);
+    const wrapper = mount(<PageHeader {...props} />);
+
+    expect(getBreadcrumbs).toHaveBeenCalledWith(
+      true,
+      'test-resource',
+      'Test Page Title',
+      'test-sub-action',
+      5
+    );
+    expect(wrapper.contains(props.fallBackComponent)).toBe(true);
+
+    expect(props.navigation.ui.HeaderControl).not.toBeCalled();
+  });
+
+  it('renders with the feature flag on', () => {
+    props.coreStart.uiSettings.get.mockReturnValueOnce(true);
+    const wrapper = mount(<PageHeader {...props} />);
+
+    expect(getBreadcrumbs).toHaveBeenCalledWith(
+      false,
+      'test-resource',
+      'Test Page Title',
+      'test-sub-action',
+      5
+    );
+    expect(wrapper.contains(props.fallBackComponent)).toBe(false);
+    expect(props.navigation.ui.HeaderControl.mock.calls[0][0].controls).toEqual(['control-1']);
+    expect(props.navigation.ui.HeaderControl.mock.calls[1][0].controls).toEqual(['control-2']);
+  });
+});
diff --git a/public/apps/configuration/utils/test/resource-utils.test.tsx b/public/apps/configuration/utils/test/resource-utils.test.tsx
index ab0dac6b..b69b899d 100644
--- a/public/apps/configuration/utils/test/resource-utils.test.tsx
+++ b/public/apps/configuration/utils/test/resource-utils.test.tsx
@@ -13,24 +13,75 @@
  *   permissions and limitations under the License.
  */
 
-import { generateResourceName } from '../resource-utils';
+import { ResourceType } from '../../../../../common';
+import { generateResourceName, getBreadcrumbs } from '../resource-utils';
 
-describe('generateResourceName', () => {
-  it('edit should return same name', () => {
+describe('ResourceUtilsTests', () => {
+  it('generateResourceName edit should return same name', () => {
     const result = generateResourceName('edit', 'user1');
 
     expect(result).toBe('user1');
   });
 
-  it('duplicate should append _copy suffix', () => {
+  it('generateResourceName duplicate should append _copy suffix', () => {
     const result = generateResourceName('duplicate', 'role1');
 
     expect(result).toBe('role1_copy');
   });
 
-  it('other action should return empty string', () => {
+  it('generateResourceName other action should return empty string', () => {
     const result = generateResourceName('create', 'tenant1');
 
     expect(result).toBe('');
   });
+
+  it('getBreadcrumbs with security base should include security breadcrumb', () => {
+    const breadcrumbs = getBreadcrumbs(true);
+    expect(breadcrumbs).toEqual([
+      {
+        href: '#/',
+        text: 'Security',
+      },
+    ]);
+  });
+
+  it('getBreadcrumbs without security base should not include security breadcrumb', () => {
+    const breadcrumbs = getBreadcrumbs(false);
+    expect(breadcrumbs).toEqual([]);
+  });
+
+  it('getBreadcrumbs without security base should use display name', () => {
+    const breadcrumbs = getBreadcrumbs(false, ResourceType.auth);
+    expect(breadcrumbs).toEqual([{ href: '#/auth', text: 'Authentication and authorization' }]);
+  });
+
+  it('getBreadcrumbs with security base should use regular name and have security base', () => {
+    const breadcrumbs = getBreadcrumbs(true, ResourceType.auth);
+    expect(breadcrumbs).toEqual([
+      { href: '#/', text: 'Security' },
+      { href: '#/auth', text: 'Authentication' },
+    ]);
+  });
+
+  it('getBreadcrumbs with title and subactions should include those breadcrumbs', () => {
+    const breadcrumbs = getBreadcrumbs(false, ResourceType.roles, 'Derek', 'Map user');
+    expect(breadcrumbs).toEqual([
+      { href: '#/roles', text: 'Roles' },
+      { text: 'Derek' },
+      { text: 'Map user' },
+    ]);
+  });
+
+  it('getBreadcrumbs should show breadcrumb with count when security base is not included', () => {
+    const breadcrumbs = getBreadcrumbs(false, ResourceType.roles, undefined, undefined, 30);
+    expect(breadcrumbs).toEqual([{ href: '#/roles', text: 'Roles (30)' }]);
+  });
+
+  it('getBreadcrumbs should not show breadcrumb with count when security base is included', () => {
+    const breadcrumbs = getBreadcrumbs(true, ResourceType.roles, undefined, undefined, 30);
+    expect(breadcrumbs).toEqual([
+      { href: '#/', text: 'Security' },
+      { href: '#/roles', text: 'Roles' },
+    ]);
+  });
 });

From 442f525acd2ae2720e5fbf3426f20f2c0eadd1c9 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 19 Aug 2024 14:53:43 -0400
Subject: [PATCH 23/24] Address PR feedback

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 public/apps/configuration/app-router.tsx      |  14 +-
 .../header/header-components.tsx              |  13 +-
 .../configuration/header/header-props.tsx     |   2 +-
 .../header/test/header-components.test.tsx    |   1 +
 .../panels/auth-view/auth-view.tsx            |   2 +-
 .../apps/configuration/panels/get-started.tsx |   2 +-
 .../permission-list/permission-list.tsx       |   2 +-
 .../apps/configuration/panels/role-list.tsx   |   2 +-
 .../panels/role-view/role-view.tsx            |   2 +-
 .../panels/tenant-list/manage_tab.tsx         |   8 +-
 .../apps/configuration/panels/user-list.tsx   |   2 +-
 .../__snapshots__/app-router.test.tsx.snap    | 140 +++++++++---------
 public/apps/configuration/types.ts            |   2 +-
 .../configuration/utils/resource-utils.tsx    |   4 +-
 14 files changed, 98 insertions(+), 98 deletions(-)

diff --git a/public/apps/configuration/app-router.tsx b/public/apps/configuration/app-router.tsx
index 36c3c381..eb987e7a 100644
--- a/public/apps/configuration/app-router.tsx
+++ b/public/apps/configuration/app-router.tsx
@@ -48,27 +48,27 @@ const LANDING_PAGE_URL = '/getstarted';
 export const ROUTE_MAP: { [key: string]: RouteItem } = {
   getStarted: {
     name: 'Get Started',
-    displayNameWithoutSecurityBase: 'Get started with access control',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Get started with access control',
     href: LANDING_PAGE_URL,
   },
   [ResourceType.roles]: {
     name: 'Roles',
-    displayNameWithoutSecurityBase: 'Roles',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Roles',
     href: buildUrl(ResourceType.roles),
   },
   [ResourceType.users]: {
     name: 'Internal users',
-    displayNameWithoutSecurityBase: 'Internal users',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Internal users',
     href: buildUrl(ResourceType.users),
   },
   [ResourceType.permissions]: {
     name: 'Permissions',
-    displayNameWithoutSecurityBase: 'Permissions',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Permissions',
     href: buildUrl(ResourceType.permissions),
   },
   [ResourceType.tenants]: {
     name: 'Tenants',
-    displayNameWithoutSecurityBase: 'Dashboard multi-tenancy',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Dashboard multi-tenancy',
     href: buildUrl(ResourceType.tenants),
   },
   [ResourceType.tenantsConfigureTab]: {
@@ -77,12 +77,12 @@ export const ROUTE_MAP: { [key: string]: RouteItem } = {
   },
   [ResourceType.auth]: {
     name: 'Authentication',
-    displayNameWithoutSecurityBase: 'Authentication and authorization',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Authentication and authorization',
     href: buildUrl(ResourceType.auth),
   },
   [ResourceType.auditLogging]: {
     name: 'Audit logs',
-    displayNameWithoutSecurityBase: 'Audit logs',
+    breadCrumbDisplayNameWithoutSecurityBase: 'Audit logs',
     href: buildUrl(ResourceType.auditLogging),
   },
 };
diff --git a/public/apps/configuration/header/header-components.tsx b/public/apps/configuration/header/header-components.tsx
index 2be3edfc..dde2bbbc 100644
--- a/public/apps/configuration/header/header-components.tsx
+++ b/public/apps/configuration/header/header-components.tsx
@@ -18,16 +18,13 @@ import { flow } from 'lodash';
 import { ControlProps, DescriptionProps, HeaderProps } from './header-props';
 import { getBreadcrumbs } from '../utils/resource-utils';
 
-// controlType should be one of: https://github.com/AMoo-Miki/OpenSearch-Dashboards/blob/header-collective/src/plugins/navigation/public/top_nav_menu/top_nav_control_data.tsx#L91
-
-export const HeaderButtonOrLink = React.memo((props: ControlProps) => {
+export const HeaderButtonOrLink = React.memo((props: HeaderProps & ControlProps) => {
   const { HeaderControl } = props.navigation.ui;
 
   return (
     <HeaderControl
-      setMountPoint={props.application.setAppRightControls}
-      controls={props.controls}
-      className={props.className}
+      setMountPoint={props.coreStart.application.setAppRightControls}
+      controls={props.appRightControls}
     />
   );
 });
@@ -51,10 +48,10 @@ export const PageHeader = (props: HeaderProps & DescriptionProps & ControlProps)
             controls={props.descriptionControls}
           />
         ) : null}
-        {props.controlControls ? (
+        {props.appRightControls ? (
           <HeaderControl
             setMountPoint={props.coreStart.application.setAppRightControls}
-            controls={props.controlControls}
+            controls={props.appRightControls}
           />
         ) : null}
       </>
diff --git a/public/apps/configuration/header/header-props.tsx b/public/apps/configuration/header/header-props.tsx
index 516c1833..f9411e20 100644
--- a/public/apps/configuration/header/header-props.tsx
+++ b/public/apps/configuration/header/header-props.tsx
@@ -29,7 +29,7 @@ export interface HeaderProps {
 }
 
 export interface ControlProps {
-  controlControls?: TopNavControlData[];
+  appRightControls?: TopNavControlData[];
 }
 
 export interface DescriptionProps {
diff --git a/public/apps/configuration/header/test/header-components.test.tsx b/public/apps/configuration/header/test/header-components.test.tsx
index 703faec5..24b41f15 100644
--- a/public/apps/configuration/header/test/header-components.test.tsx
+++ b/public/apps/configuration/header/test/header-components.test.tsx
@@ -86,6 +86,7 @@ describe('PageHeader', () => {
       5
     );
     expect(wrapper.contains(props.fallBackComponent)).toBe(false);
+    // Verifies that the HeaderControl is called with both controls passed as props
     expect(props.navigation.ui.HeaderControl.mock.calls[0][0].controls).toEqual(['control-1']);
     expect(props.navigation.ui.HeaderControl.mock.calls[1][0].controls).toEqual(['control-2']);
   });
diff --git a/public/apps/configuration/panels/auth-view/auth-view.tsx b/public/apps/configuration/panels/auth-view/auth-view.tsx
index feb18b5d..6c19a981 100644
--- a/public/apps/configuration/panels/auth-view/auth-view.tsx
+++ b/public/apps/configuration/panels/auth-view/auth-view.tsx
@@ -115,7 +115,7 @@ export function AuthView(props: AppDependencies) {
       <PageHeader
         navigation={props.depsStart.navigation}
         coreStart={props.coreStart}
-        controlControls={buttonData}
+        appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
             <EuiTitle size="l">
diff --git a/public/apps/configuration/panels/get-started.tsx b/public/apps/configuration/panels/get-started.tsx
index 1e45d09b..d1a1fa72 100644
--- a/public/apps/configuration/panels/get-started.tsx
+++ b/public/apps/configuration/panels/get-started.tsx
@@ -197,7 +197,7 @@ export function GetStarted(props: AppDependencies) {
         <PageHeader
           navigation={props.depsStart.navigation}
           coreStart={props.coreStart}
-          controlControls={buttonData}
+          appRightControls={buttonData}
           fallBackComponent={
             <EuiPageHeader>
               <EuiTitle size="l">
diff --git a/public/apps/configuration/panels/permission-list/permission-list.tsx b/public/apps/configuration/panels/permission-list/permission-list.tsx
index bc17f93e..7981abb2 100644
--- a/public/apps/configuration/panels/permission-list/permission-list.tsx
+++ b/public/apps/configuration/panels/permission-list/permission-list.tsx
@@ -402,7 +402,7 @@ export function PermissionList(props: AppDependencies) {
         navigation={props.depsStart.navigation}
         coreStart={props.coreStart}
         descriptionControls={descriptionData}
-        controlControls={buttonData}
+        appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
             <EuiTitle size="l">
diff --git a/public/apps/configuration/panels/role-list.tsx b/public/apps/configuration/panels/role-list.tsx
index 74623083..af640bf1 100644
--- a/public/apps/configuration/panels/role-list.tsx
+++ b/public/apps/configuration/panels/role-list.tsx
@@ -305,7 +305,7 @@ export function RoleList(props: AppDependencies) {
         navigation={props.depsStart.navigation}
         coreStart={props.coreStart}
         descriptionControls={descriptionData}
-        controlControls={buttonData}
+        appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
             <EuiTitle size="l">
diff --git a/public/apps/configuration/panels/role-view/role-view.tsx b/public/apps/configuration/panels/role-view/role-view.tsx
index aebfc67d..1c04351c 100644
--- a/public/apps/configuration/panels/role-view/role-view.tsx
+++ b/public/apps/configuration/panels/role-view/role-view.tsx
@@ -455,7 +455,7 @@ export function RoleView(props: RoleViewProps) {
       <PageHeader
         navigation={props.depsStart.navigation}
         coreStart={props.coreStart}
-        controlControls={roleView}
+        appRightControls={roleView}
         fallBackComponent={
           <>
             <EuiPageContentHeader>
diff --git a/public/apps/configuration/panels/tenant-list/manage_tab.tsx b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
index f0f91856..adce0ec7 100644
--- a/public/apps/configuration/panels/tenant-list/manage_tab.tsx
+++ b/public/apps/configuration/panels/tenant-list/manage_tab.tsx
@@ -543,9 +543,11 @@ export function ManageTab(props: AppDependencies) {
               <EuiFlexItem>{actionsMenu}</EuiFlexItem>
               { useUpdatedUX ? 
                 <HeaderButtonOrLink
-                  navigation={props.depsStart.navigation}
-                  controls={createTenantButton}
-                  application={props.coreStart.application}
+
+                navigation={props.depsStart.navigation}
+          coreStart={props.coreStart}
+                  appRightControls={createTenantButton}
+  
                 />
               : 
               <EuiFlexItem>
diff --git a/public/apps/configuration/panels/user-list.tsx b/public/apps/configuration/panels/user-list.tsx
index b51a0d61..545f9071 100644
--- a/public/apps/configuration/panels/user-list.tsx
+++ b/public/apps/configuration/panels/user-list.tsx
@@ -247,7 +247,7 @@ export function UserList(props: AppDependencies) {
         navigation={props.depsStart.navigation}
         coreStart={props.coreStart}
         descriptionControls={descriptionData}
-        controlControls={buttonData}
+        appRightControls={buttonData}
         fallBackComponent={
           <EuiPageHeader>
             <EuiTitle size="l">
diff --git a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
index 7f96d34b..85c8181a 100644
--- a/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
+++ b/public/apps/configuration/test/__snapshots__/app-router.test.tsx.snap
@@ -24,37 +24,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -73,37 +73,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -122,37 +122,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -171,37 +171,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -220,37 +220,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -269,37 +269,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -318,37 +318,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -367,37 +367,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -416,37 +416,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
@@ -465,37 +465,37 @@ exports[`SecurityPluginTopNavMenu renders DataSourceMenu when dataSource is enab
             items={
               Array [
                 Object {
-                  "displayNameWithoutSecurityBase": "Get started with access control",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Get started with access control",
                   "href": "/getstarted",
                   "name": "Get Started",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Authentication and authorization",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Authentication and authorization",
                   "href": "/auth",
                   "name": "Authentication",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Roles",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Roles",
                   "href": "/roles",
                   "name": "Roles",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Internal users",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Internal users",
                   "href": "/users",
                   "name": "Internal users",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Permissions",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Permissions",
                   "href": "/permissions",
                   "name": "Permissions",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Dashboard multi-tenancy",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Dashboard multi-tenancy",
                   "href": "/tenants",
                   "name": "Tenants",
                 },
                 Object {
-                  "displayNameWithoutSecurityBase": "Audit logs",
+                  "breadCrumbDisplayNameWithoutSecurityBase": "Audit logs",
                   "href": "/auditLogging",
                   "name": "Audit logs",
                 },
diff --git a/public/apps/configuration/types.ts b/public/apps/configuration/types.ts
index adbede12..6736d8e1 100644
--- a/public/apps/configuration/types.ts
+++ b/public/apps/configuration/types.ts
@@ -46,7 +46,7 @@ export enum TenantPermissionType {
 export interface RouteItem {
   name: string;
   href: string;
-  displayNameWithoutSecurityBase: string;
+  breadCrumbDisplayNameWithoutSecurityBase: string;
 }
 
 export interface DataObject<T> {
diff --git a/public/apps/configuration/utils/resource-utils.tsx b/public/apps/configuration/utils/resource-utils.tsx
index 708b64f2..e5d1156a 100644
--- a/public/apps/configuration/utils/resource-utils.tsx
+++ b/public/apps/configuration/utils/resource-utils.tsx
@@ -58,8 +58,8 @@ export function getBreadcrumbs(
     } else {
       breadcrumbs.push({
         text: count
-          ? `${ROUTE_MAP[resourceType].displayNameWithoutSecurityBase} (${count})`
-          : ROUTE_MAP[resourceType].displayNameWithoutSecurityBase,
+          ? `${ROUTE_MAP[resourceType].breadCrumbDisplayNameWithoutSecurityBase} (${count})`
+          : ROUTE_MAP[resourceType].breadCrumbDisplayNameWithoutSecurityBase,
         href: buildHashUrl(resourceType),
       });
     }

From 040bc3e43371cc415774e650dd3cfce0a0b4fbb2 Mon Sep 17 00:00:00 2001
From: Derek Ho <dxho@amazon.com>
Date: Mon, 19 Aug 2024 15:07:40 -0400
Subject: [PATCH 24/24] Update tests and snapshots

Signed-off-by: Derek Ho <dxho@amazon.com>
---
 .../apps/configuration/header/test/header-components.test.tsx | 2 +-
 .../test/__snapshots__/permission-list.test.tsx.snap          | 2 +-
 .../role-view/test/__snapshots__/role-view.test.tsx.snap      | 4 ++--
 .../panels/test/__snapshots__/get-started.test.tsx.snap       | 4 ++--
 .../panels/test/__snapshots__/role-list.test.tsx.snap         | 2 +-
 .../panels/test/__snapshots__/user-list.test.tsx.snap         | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/apps/configuration/header/test/header-components.test.tsx b/public/apps/configuration/header/test/header-components.test.tsx
index 24b41f15..e9a677f5 100644
--- a/public/apps/configuration/header/test/header-components.test.tsx
+++ b/public/apps/configuration/header/test/header-components.test.tsx
@@ -53,7 +53,7 @@ describe('PageHeader', () => {
       subAction: 'test-sub-action',
       count: 5,
       descriptionControls: ['control-1'],
-      controlControls: ['control-2'],
+      appRightControls: ['control-2'],
       fallBackComponent: <div>Fallback Component</div>,
     };
   });
diff --git a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
index 04c70f89..2dc58bac 100644
--- a/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
+++ b/public/apps/configuration/panels/permission-list/test/__snapshots__/permission-list.test.tsx.snap
@@ -63,7 +63,7 @@ exports[`Permission list page  AccessError component should load access error co
     setDataSource={[MockFunction]}
   />
   <PageHeader
-    controlControls={
+    appRightControls={
       Array [
         Object {
           "isLoading": false,
diff --git a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
index dd05b6aa..2f557ebd 100644
--- a/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
+++ b/public/apps/configuration/panels/role-view/test/__snapshots__/role-view.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`Role view basic rendering when permission tab is selected 1`] = `
     setDataSource={[MockFunction]}
   />
   <PageHeader
-    controlControls={
+    appRightControls={
       Array [
         Object {
           "ariaLabel": "delete",
@@ -476,7 +476,7 @@ exports[`Role view renders when mapped user tab is selected 1`] = `
     setDataSource={[MockFunction]}
   />
   <PageHeader
-    controlControls={
+    appRightControls={
       Array [
         Object {
           "ariaLabel": "delete",
diff --git a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
index b43cc332..33a5d800 100644
--- a/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/get-started.test.tsx.snap
@@ -32,7 +32,7 @@ exports[`Get started (landing page) renders when backend configuration is disabl
       setDataSource={[MockFunction]}
     />
     <PageHeader
-      controlControls={
+      appRightControls={
         Array [
           Object {
             "href": "#/",
@@ -334,7 +334,7 @@ exports[`Get started (landing page) renders when backend configuration is enable
       setDataSource={[MockFunction]}
     />
     <PageHeader
-      controlControls={
+      appRightControls={
         Array [
           Object {
             "href": "#/",
diff --git a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
index f55060ec..cdc9a6f1 100644
--- a/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/role-list.test.tsx.snap
@@ -39,7 +39,7 @@ exports[`Role list AccessError component should load access error component 1`]
     setDataSource={[MockFunction]}
   />
   <PageHeader
-    controlControls={
+    appRightControls={
       Array [
         Object {
           "fill": true,
diff --git a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
index f069a919..105e6dd3 100644
--- a/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
+++ b/public/apps/configuration/panels/test/__snapshots__/user-list.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`User list AccessError component should load access error component 1`]
     setDataSource={[MockFunction]}
   />
   <PageHeader
-    controlControls={
+    appRightControls={
       Array [
         Object {
           "fill": true,