feat: Add rightNavigationButton component in chrome service for app…

…lications to register and add dev tool to top right navigation (#6553) * 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>
opensearch-project · Apr 30, 2024 · cfe7cd1 · cfe7cd1
1 parent 876224b
commit cfe7cd1
Show file tree

Hide file tree

Showing 13 changed files with 188 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -107,6 +107,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Extract the button component for datasource picker to avoid duplicate code ([#6559](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6559))
 - [Workspace] Add workspaces filter to saved objects page. ([#6458](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6458))
 - [Multiple Datasource] Support multi data source in Region map ([#6654](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6654))
+- Add `rightNavigationButton` component in chrome service for applications to register and add dev tool to top right navigation. ([#6553](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6553))
 
 ### 🐛 Bug Fixes
 

diff --git a/src/core/public/chrome/constants.ts b/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,
+}
diff --git a/src/core/public/chrome/index.ts b/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';
diff --git a/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/right_navigation_button.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/index.ts b/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';
diff --git a/src/core/public/chrome/ui/header/right_navigation_button.test.tsx b/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();
+  });
+});
diff --git a/src/core/public/chrome/ui/header/right_navigation_button.tsx b/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>
+  );
+};
diff --git a/src/core/public/chrome/ui/index.ts b/src/core/public/chrome/ui/index.ts
@@ -37,4 +37,6 @@ export {
   ChromeHelpExtensionMenuDocumentationLink,
   ChromeHelpExtensionMenuGitHubLink,
   NavType,
+  RightNavigationButton,
+  RightNavigationButtonProps,
 } from './header';
diff --git a/src/core/public/index.ts b/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';

diff --git a/...ic/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap b/...ic/application/components/dashboard_listing/__snapshots__/dashboard_listing.test.tsx.snap
diff --git a/...ic/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap b/...ic/application/components/dashboard_top_nav/__snapshots__/dashboard_top_nav.test.tsx.snap
diff --git a/src/plugins/dev_tools/opensearch_dashboards.json b/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"]
 }
diff --git a/src/plugins/dev_tools/public/plugin.ts b/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() {}