feat: Add rightNavigationButton component in chrome service for app…

…lications to register and add dev tool to top right navigation (#6553) (#6684)

* feat: add dev tool to top right navigation

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

* doc: update changelog

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

* test: update component props snapshot

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

* update nav_controls_service.ts

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>

* update dependency props and constants

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

* update nav control test

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

* Update CHANGELOG.md

Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Signed-off-by: tygao <tygao@amazon.com>

* test: update snapshots

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

* doc: update changelog

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

* update click handle

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

* update click handle

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

* doc: add doc for registerRightNavigation

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

* Add `rightNavigationButton` component in chrome service for applications to register and add dev tool to top right navigation.

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

* test: update core start type

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

* update RightNavigationOrder value

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

* extract left click function

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

---------

Signed-off-by: tygao <tygao@amazon.com>
Co-authored-by: SuZhou-Joe <suzhou@amazon.com>
Co-authored-by: Yulong Ruan <ruanyl@amazon.com>
(cherry picked from commit cfe7cd1)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

src/core/public/chrome/constants.ts

@@ -31,3 +31,9 @@
 export const OPENSEARCH_DASHBOARDS_ASK_OPENSEARCH_LINK = 'https://forum.opensearch.org/';
 export const GITHUB_CREATE_ISSUE_LINK =
   'https://github.com/opensearch-project/OpenSearch-Dashboards/issues/new/choose';
+
+export enum RightNavigationOrder {
+  // order of dev tool should be after advance settings
+  Settings = 10,
+  DevTool = 20,
+}

src/core/public/chrome/index.ts

@@ -44,8 +44,9 @@ export {
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
 } from './ui/header/header_help_menu';
-export { NavType } from './ui';
+export { NavType, RightNavigationButton, RightNavigationButtonProps } from './ui';
 export { ChromeNavLink, ChromeNavLinks, ChromeNavLinkUpdateableFields } from './nav_links';
 export { ChromeRecentlyAccessed, ChromeRecentlyAccessedHistoryItem } from './recently_accessed';
 export { ChromeNavControl, ChromeNavControls } from './nav_controls';
 export { ChromeDocTitle } from './doc_title';
+export { RightNavigationOrder } from './constants';

src/core/public/chrome/ui/header/index.ts

@@ -37,3 +37,4 @@ export {
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
 } from './header_help_menu';
+export { RightNavigationButton, RightNavigationButtonProps } from './right_navigation_button';

src/core/public/chrome/ui/header/right_navigation_button.test.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { fireEvent, render } from '@testing-library/react';
+import { RightNavigationButton } from './right_navigation_button';
+import { applicationServiceMock, httpServiceMock } from '../../../../../core/public/mocks';
+
+const mockProps = {
+  application: applicationServiceMock.createStartContract(),
+  http: httpServiceMock.createStartContract(),
+  appId: 'app_id',
+  iconType: 'mock_icon',
+  title: 'title',
+};
+
+describe('Right navigation button', () => {
+  it('should render base element normally', () => {
+    const { baseElement } = render(<RightNavigationButton {...mockProps} />);
+    expect(baseElement).toMatchSnapshot();
+  });
+
+  it('should call application getUrlForApp and navigateToUrl after clicked', () => {
+    const navigateToUrl = jest.fn();
+    const getUrlForApp = jest.fn();
+    const props = {
+      ...mockProps,
+      application: {
+        ...applicationServiceMock.createStartContract(),
+        getUrlForApp,
+        navigateToUrl,
+      },
+    };
+    const { getByTestId } = render(<RightNavigationButton {...props} />);
+    const icon = getByTestId('rightNavigationButton');
+    fireEvent.click(icon);
+    expect(getUrlForApp).toHaveBeenCalledWith('app_id', {
+      path: '/',
+      absolute: false,
+    });
+    expect(navigateToUrl).toHaveBeenCalled();
+  });
+});

src/core/public/chrome/ui/header/right_navigation_button.tsx

@@ -0,0 +1,63 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
+import React, { useMemo } from 'react';
+import { CoreStart } from '../../..';
+
+import { isModifiedOrPrevented } from './nav_link';
+export interface RightNavigationButtonProps {
+  application: CoreStart['application'];
+  http: CoreStart['http'];
+  appId: string;
+  iconType: string;
+  title: string;
+}
+
+export const RightNavigationButton = ({
+  application,
+  http,
+  appId,
+  iconType,
+  title,
+}: RightNavigationButtonProps) => {
+  const targetUrl = useMemo(() => {
+    const appUrl = application.getUrlForApp(appId, {
+      path: '/',
+      absolute: false,
+    });
+    // Remove prefix in Url including workspace and other prefix
+    return http.basePath.prepend(http.basePath.remove(appUrl), {
+      withoutClientBasePath: true,
+    });
+  }, [application, http.basePath, appId]);
+
+  const isLeftClickEvent = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    return event.button === 0;
+  };
+
+  const navigateToApp = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
+    /* Use href and onClick to support "open in new tab" and SPA navigation in the same link */
+    if (
+      isLeftClickEvent(event) && // ignore everything but left clicks
+      !isModifiedOrPrevented(event)
+    ) {
+      event.preventDefault();
+      application.navigateToUrl(targetUrl);
+    }
+    return;
+  };
+
+  return (
+    <EuiHeaderSectionItemButton
+      data-test-subj="rightNavigationButton"
+      aria-label={title}
+      onClick={navigateToApp}
+      href={targetUrl}
+    >
+      <EuiIcon type={iconType} size="m" title={title} color="text" />
+    </EuiHeaderSectionItemButton>
+  );
+};

src/core/public/chrome/ui/index.ts

@@ -37,4 +37,6 @@ export {
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
   NavType,
+  RightNavigationButton,
+  RightNavigationButtonProps,
 } from './header';

src/core/public/index.ts

@@ -68,6 +68,9 @@ import {
   ChromeRecentlyAccessed,
   ChromeRecentlyAccessedHistoryItem,
   NavType,
+  RightNavigationOrder,
+  RightNavigationButton,
+  RightNavigationButtonProps,
 } from './chrome';
 import { FatalErrorsSetup, FatalErrorsStart, FatalErrorInfo } from './fatal_errors';
 import { HttpSetup, HttpStart } from './http';
@@ -360,6 +363,9 @@ export {
   UiSettingsState,
   NavType,
   Branding,
+  RightNavigationOrder,
+  RightNavigationButton,
+  RightNavigationButtonProps,
 };
 
 export { __osdBootstrap__ } from './osd_bootstrap';

src/plugins/dev_tools/opensearch_dashboards.json

@@ -4,5 +4,6 @@
   "server": false,
   "ui": true,
   "optionalPlugins": ["dataSource", "managementOverview", "dataSourceManagement"],
-  "requiredPlugins": ["urlForwarding"]
+  "requiredPlugins": ["urlForwarding"],
+  "requiredBundles": ["opensearchDashboardsReact"]
 }

src/plugins/dev_tools/public/plugin.ts

@@ -28,19 +28,26 @@
  * under the License.
  */
 
+import React from 'react';
 import { BehaviorSubject } from 'rxjs';
-import { Plugin, CoreSetup, AppMountParameters } from 'src/core/public';
+import { Plugin, CoreSetup, AppMountParameters, CoreStart } from 'src/core/public';
 import { AppUpdater } from 'opensearch-dashboards/public';
 import { i18n } from '@osd/i18n';
 import { sortBy } from 'lodash';
 import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
-import { AppNavLinkStatus, DEFAULT_APP_CATEGORIES } from '../../../core/public';
+import {
+  AppNavLinkStatus,
+  DEFAULT_APP_CATEGORIES,
+  RightNavigationOrder,
+  RightNavigationButton,
+} from '../../../core/public';
 import { UrlForwardingSetup } from '../../url_forwarding/public';
 import { CreateDevToolArgs, DevToolApp, createDevToolApp } from './dev_tool';
 
 import './index.scss';
 import { ManagementOverViewPluginSetup } from '../../management_overview/public';
+import { toMountPoint } from '../../opensearch_dashboards_react/public';
 
 export interface DevToolsSetupDependencies {
   urlForwarding: UrlForwardingSetup;
@@ -75,12 +82,14 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
     defaultMessage: 'Dev Tools',
   });
 
+  private id = 'dev_tools';
+
   public setup(coreSetup: CoreSetup, deps: DevToolsSetupDependencies) {
     const { application: applicationSetup, getStartServices } = coreSetup;
     const { urlForwarding, managementOverview } = deps;
 
     applicationSetup.register({
-      id: 'dev_tools',
+      id: this.id,
       title: this.title,
       updater$: this.appStateUpdater,
       icon: '/ui/logos/opensearch_mark.svg',
@@ -99,7 +108,7 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
     });
 
     managementOverview?.register({
-      id: 'dev_tools',
+      id: this.id,
       title: this.title,
       description: i18n.translate('devTools.devToolsDescription', {
         defaultMessage:
@@ -125,10 +134,22 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
     };
   }
 
-  public start() {
+  public start(core: CoreStart) {
     if (this.getSortedDevTools().length === 0) {
       this.appStateUpdater.next(() => ({ navLinkStatus: AppNavLinkStatus.hidden }));
     }
+    core.chrome.navControls.registerRight({
+      order: RightNavigationOrder.DevTool,
+      mount: toMountPoint(
+        React.createElement(RightNavigationButton, {
+          appId: this.id,
+          iconType: 'consoleApp',
+          title: this.title,
+          application: core.application,
+          http: core.http,
+        })
+      ),
+    });
   }
 
   public stop() {}