Refactor: update page header for settings, objects and index pattern …

…page opensearch-project#7744

Signed-off-by: tygao <tygao@amazon.com>

changelogs/fragments/7744.yml

@@ -0,0 +1,2 @@
+refactor:
+- Update page header for settings, objects and index pattern page ([#7744](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/7744))

src/plugins/advanced_settings/opensearch_dashboards.json

@@ -3,7 +3,7 @@
   "version": "opensearchDashboards",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["management"],
+  "requiredPlugins": ["management","navigation"],
   "optionalPlugins": ["home"],
   "requiredBundles": ["opensearchDashboardsReact", "home"]
 }

src/plugins/advanced_settings/public/management_app/advanced_settings.test.tsx

@@ -40,7 +40,11 @@ import {
 } from '../../../../core/public';
 import { FieldSetting } from './types';
 import { AdvancedSettingsComponent } from './advanced_settings';
-import { notificationServiceMock, docLinksServiceMock } from '../../../../core/public/mocks';
+import {
+  notificationServiceMock,
+  docLinksServiceMock,
+  applicationServiceMock,
+} from '../../../../core/public/mocks';
 import { ComponentRegistry } from '../component_registry';
 
 jest.mock('./components/field', () => ({
@@ -288,4 +292,21 @@ describe('AdvancedSettings', () => {
         .prop('enableSaving')
     ).toBe(false);
   });
+
+  it('should render normally when use updated UX', async () => {
+    const component = mountWithI18nProvider(
+      <AdvancedSettingsComponent
+        queryText="test:string:setting"
+        enableSaving={false}
+        toasts={notificationServiceMock.createStartContract().toasts}
+        dockLinks={docLinksServiceMock.createStartContract().links}
+        uiSettings={mockConfig().core.uiSettings}
+        componentRegistry={new ComponentRegistry().start}
+        useUpdatedUX={true}
+        navigationUI={{ HeaderControl: () => null, TopNavMenu: () => null }}
+        application={applicationServiceMock.createStartContract()}
+      />
+    );
+    expect(component).toMatchSnapshot();
+  });
 });

src/plugins/advanced_settings/public/management_app/advanced_settings.tsx

@@ -37,19 +37,28 @@ import { CallOuts } from './components/call_outs';
 import { Search } from './components/search';
 import { Form } from './components/form';
 import { AdvancedSettingsVoiceAnnouncement } from './components/advanced_settings_voice_announcement';
-import { IUiSettingsClient, DocLinksStart, ToastsStart } from '../../../../core/public/';
+import {
+  IUiSettingsClient,
+  DocLinksStart,
+  ToastsStart,
+  ApplicationStart,
+} from '../../../../core/public/';
 import { ComponentRegistry } from '../';
 
 import { getAriaName, toEditableConfig, DEFAULT_CATEGORY } from './lib';
 
 import { FieldSetting, SettingsChanges } from './types';
+import { NavigationPublicPluginStart } from '../../../../plugins/navigation/public';
 
 interface AdvancedSettingsProps {
   enableSaving: boolean;
   uiSettings: IUiSettingsClient;
   dockLinks: DocLinksStart['links'];
   toasts: ToastsStart;
   componentRegistry: ComponentRegistry['start'];
+  useUpdatedUX: boolean;
+  navigationUI: NavigationPublicPluginStart['ui'];
+  application: ApplicationStart;
 }
 
 interface AdvancedSettingsComponentProps extends AdvancedSettingsProps {
@@ -224,21 +233,50 @@ export class AdvancedSettingsComponent extends Component<
     );
     const PageFooter = componentRegistry.get(componentRegistry.componentType.PAGE_FOOTER_COMPONENT);
 
-    return (
-      <div>
-        <EuiFlexGroup gutterSize="none">
-          <EuiFlexItem>
-            <PageTitle />
-          </EuiFlexItem>
-          <EuiFlexItem>
+    const renderHeader = () => {
+      if (!this.props.useUpdatedUX) {
+        return (
+          <>
+            <EuiSpacer size="m" />
+            <EuiFlexGroup gutterSize="none">
+              <EuiFlexItem>
+                <PageTitle />
+              </EuiFlexItem>
+              <EuiFlexItem>
+                <Search
+                  query={query}
+                  categories={this.categories}
+                  onQueryChange={this.onQueryChange}
+                />
+              </EuiFlexItem>
+            </EuiFlexGroup>
+            <PageSubtitle />
+            <EuiSpacer size="m" />
+            <CallOuts />
+          </>
+        );
+      } else {
+        const { HeaderControl } = this.props.navigationUI;
+        return (
+          <>
+            <HeaderControl
+              setMountPoint={this.props.application.setAppBottomControls}
+              controls={[
+                {
+                  renderComponent: <CallOuts />,
+                },
+              ]}
+            />
             <Search query={query} categories={this.categories} onQueryChange={this.onQueryChange} />
-          </EuiFlexItem>
-        </EuiFlexGroup>
-        <PageSubtitle />
-        <EuiSpacer size="m" />
-        <CallOuts />
-        <EuiSpacer size="m" />
+            <EuiSpacer size="m" />
+          </>
+        );
+      }
+    };
 
+    return (
+      <div>
+        {renderHeader()}
         <AdvancedSettingsVoiceAnnouncement queryText={query.text} settings={filteredSettings} />
 
         <Form
@@ -274,6 +312,9 @@ export const AdvancedSettings = (props: AdvancedSettingsProps) => {
       dockLinks={props.dockLinks}
       toasts={props.toasts}
       componentRegistry={props.componentRegistry}
+      useUpdatedUX={props.useUpdatedUX}
+      navigationUI={props.navigationUI}
+      application={props.application}
     />
   );
 };

src/plugins/advanced_settings/public/management_app/mount_management_section.tsx

@@ -40,14 +40,10 @@ import { EuiPageContent } from '@elastic/eui';
 import { AdvancedSettings } from './advanced_settings';
 import { ManagementAppMountParams } from '../../../management/public';
 import { ComponentRegistry } from '../types';
+import { NavigationPublicPluginStart } from '../../../../plugins/navigation/public';
 
 import './index.scss';
 
-const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
-  defaultMessage: 'Advanced settings',
-});
-const crumb = [{ text: title }];
-
 const readOnlyBadge = {
   text: i18n.translate('advancedSettings.badge.readOnly.text', {
     defaultMessage: 'Read only',
@@ -59,19 +55,35 @@ const readOnlyBadge = {
 };
 
 export async function mountManagementSection(
-  getStartServices: StartServicesAccessor,
+  getStartServices: StartServicesAccessor<{
+    navigation: NavigationPublicPluginStart;
+  }>,
   params: ManagementAppMountParams & { wrapInPage?: boolean },
   componentRegistry: ComponentRegistry['start']
 ) {
-  params.setBreadcrumbs(crumb);
-  const [{ uiSettings, notifications, docLinks, application, chrome }] = await getStartServices();
+  const [
+    { uiSettings, notifications, docLinks, application, chrome },
+    { navigation },
+  ] = await getStartServices();
 
   const canSave = application.capabilities.advancedSettings.save as boolean;
 
   if (!canSave) {
     chrome.setBadge(readOnlyBadge);
   }
 
+  const title = i18n.translate('advancedSettings.advancedSettingsLabel', {
+    defaultMessage: 'Advanced settings',
+  });
+  const newUXTitle = i18n.translate('advancedSettings.newHeader.pageTitle', {
+    defaultMessage: 'Application settings',
+  });
+
+  const useUpdatedUX = uiSettings.get('home:useNewHomePage');
+  // If new navigation is off, this will be rendered as breadcrumb. If is on, this will be rendered as title.
+  const crumb = [{ text: useUpdatedUX ? newUXTitle : title }];
+  params.setBreadcrumbs(crumb);
+
   const content = (
     <Router history={params.history}>
       <Switch>
@@ -82,6 +94,9 @@ export async function mountManagementSection(
             dockLinks={docLinks.links}
             uiSettings={uiSettings}
             componentRegistry={componentRegistry}
+            useUpdatedUX={useUpdatedUX}
+            navigationUI={navigation.ui}
+            application={application}
           />
         </Route>
       </Switch>

src/plugins/advanced_settings/public/plugin.ts

@@ -32,7 +32,12 @@ import { i18n } from '@osd/i18n';
 import { AppMountParameters, CoreSetup, Plugin } from 'opensearch-dashboards/public';
 import { FeatureCatalogueCategory } from '../../home/public';
 import { ComponentRegistry } from './component_registry';
-import { AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup } from './types';
+import {
+  AdvancedSettingsSetup,
+  AdvancedSettingsStart,
+  AdvancedSettingsPluginSetup,
+  AdvancedSettingsPluginStart,
+} from './types';
 import { DEFAULT_NAV_GROUPS, AppNavLinkStatus, WorkspaceAvailability } from '../../../core/public';
 import { getScopedBreadcrumbs } from '../../opensearch_dashboards_react/public';
 
@@ -47,8 +52,17 @@ const titleInGroup = i18n.translate('advancedSettings.applicationSettingsLabel',
 });
 
 export class AdvancedSettingsPlugin
-  implements Plugin<AdvancedSettingsSetup, AdvancedSettingsStart, AdvancedSettingsPluginSetup> {
-  public setup(core: CoreSetup, { management, home }: AdvancedSettingsPluginSetup) {
+  implements
+    Plugin<
+      AdvancedSettingsSetup,
+      AdvancedSettingsStart,
+      AdvancedSettingsPluginSetup,
+      AdvancedSettingsPluginStart
+    > {
+  public setup(
+    core: CoreSetup<AdvancedSettingsPluginStart>,
+    { management, home }: AdvancedSettingsPluginSetup
+  ) {
     const opensearchDashboardsSection = management.sections.section.opensearchDashboards;
 
     opensearchDashboardsSection.registerApp({

src/plugins/advanced_settings/public/types.ts

@@ -32,6 +32,7 @@ import { ComponentRegistry } from './component_registry';
 import { HomePublicPluginSetup } from '../../home/public';
 
 import { ManagementSetup } from '../../management/public';
+import { NavigationPublicPluginStart } from '../../../plugins/navigation/public';
 
 export interface AdvancedSettingsSetup {
   component: ComponentRegistry['setup'];
@@ -45,4 +46,8 @@ export interface AdvancedSettingsPluginSetup {
   home?: HomePublicPluginSetup;
 }
 
+export interface AdvancedSettingsPluginStart {
+  navigation: NavigationPublicPluginStart;
+}
+
 export { ComponentRegistry };