feat: add config for topRightNavigation (opensearch-project#6712)

* feat: add config for topRightNavigation

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

* doc: update changelog

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

* Changeset file for PR opensearch-project#6712 created/updated

* test: update context test

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

* doc: update changelog

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

* update changeset

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

* update joi default value

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

* add experimental annotation and add futureNavigation configuration

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

* add experimental annotation and add futureNavigation configuration

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

---------

Signed-off-by: tygao <tygao@amazon.com>
Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>
Co-authored-by: Ashwin P Chandran <ashwinpc@amazon.com>

CHANGELOG.md

@@ -109,6 +109,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [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))
 - Enable UI Metric Collector to collect UI Metrics and Application Usage ([#6203](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6203))
+- Add `opensearchDashboards.futureNavigation` config to control dev tool top right nav button. ([#6712](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6712))
 
 ### 🐛 Bug Fixes
 

changelogs/fragments/6712.yml

@@ -0,0 +1,2 @@
+feat:
+- Add `opensearchDashboards.futureNavigation` config to control dev tool top right nav button. ([#6712](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6712))

config/opensearch_dashboards.yml

@@ -303,6 +303,9 @@
 # Set the value of this setting to false to hide the help menu link to the OpenSearch Dashboards user survey
 # opensearchDashboards.survey.url: "https://survey.opensearch.org"
 
+# @experimental Set the value of this setting to display navigation updates, including dev tool top right navigation
+# opensearchDashboards.futureNavigation: false
+
 # Set the value of this setting to true to enable plugin augmentation on Dashboard
 # vis_augmenter.pluginAugmentationEnabled: true
 

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

@@ -6,8 +6,12 @@
 import { EuiHeaderSectionItemButton, EuiIcon } from '@elastic/eui';
 import React, { useMemo } from 'react';
 import { CoreStart } from '../../..';
-
 import { isModifiedOrPrevented } from './nav_link';
+
+/**
+ * This component is used for application to render top right navigation button in header.
+ */
+
 export interface RightNavigationButtonProps {
   application: CoreStart['application'];
   http: CoreStart['http'];
@@ -16,6 +20,9 @@ export interface RightNavigationButtonProps {
   title: string;
 }
 
+/**
+ * @experimental this class is experimental and might change in future releases.
+ */
 export const RightNavigationButton = ({
   application,
   http,

src/core/server/mocks.ts

@@ -80,6 +80,7 @@ export function pluginInitializerContextConfigMock<T>(config: T) {
       configIndex: '.opensearch_dashboards_config_tests',
       autocompleteTerminateAfter: duration(100000),
       autocompleteTimeout: duration(1000),
+      futureNavigation: false,
     },
     opensearch: {
       shardTimeout: duration('30s'),

src/core/server/opensearch_dashboards_config.ts

@@ -91,6 +91,7 @@ export const config = {
         defaultValue: 'https://survey.opensearch.org',
       }),
     }),
+    futureNavigation: schema.boolean({ defaultValue: false }),
   }),
   deprecations,
 };

src/core/server/plugins/plugin_context.test.ts

@@ -101,6 +101,7 @@ describe('createPluginInitializerContext', () => {
         configIndex: '.opensearch_dashboards_config',
         autocompleteTerminateAfter: duration(100000),
         autocompleteTimeout: duration(1000),
+        futureNavigation: false,
       },
       opensearch: {
         shardTimeout: duration(30, 's'),

src/core/server/plugins/types.ts

@@ -292,6 +292,7 @@ export const SharedGlobalConfigKeys = {
     'configIndex',
     'autocompleteTerminateAfter',
     'autocompleteTimeout',
+    'futureNavigation',
   ] as const,
   opensearch: ['shardTimeout', 'requestTimeout', 'pingTimeout'] as const,
   path: ['data'] as const,

src/legacy/server/config/schema.js

@@ -251,6 +251,7 @@ export default () =>
       survey: Joi.object({
         url: Joi.any().default('/'),
       }),
+      futureNavigation: Joi.boolean().default(false),
     }).default(),
 
     savedObjects: HANDLED_IN_NEW_PLATFORM,

src/plugins/console/server/plugin.ts

@@ -51,10 +51,15 @@ export class ConsoleServerPlugin implements Plugin<ConsoleSetup, ConsoleStart> {
   }
 
   async setup({ http, capabilities, opensearch, security }: CoreSetup) {
+    const config = await this.ctx.config.create().pipe(first()).toPromise();
+    const globalConfig = await this.ctx.config.legacy.globalConfig$.pipe(first()).toPromise();
+    const proxyPathFilters = config.proxyFilter.map((str: string) => new RegExp(str));
+
     capabilities.registerProvider(() => ({
       dev_tools: {
         show: true,
         save: true,
+        futureNavigation: globalConfig.opensearchDashboards.futureNavigation,
       },
     }));
 
@@ -66,10 +71,6 @@ export class ConsoleServerPlugin implements Plugin<ConsoleSetup, ConsoleStart> {
       });
     });
 
-    const config = await this.ctx.config.create().pipe(first()).toPromise();
-    const globalConfig = await this.ctx.config.legacy.globalConfig$.pipe(first()).toPromise();
-    const proxyPathFilters = config.proxyFilter.map((str: string) => new RegExp(str));
-
     this.opensearchLegacyConfigService.setup(opensearch.legacy.config$);
 
     const router = http.createRouter();

src/plugins/dev_tools/public/plugin.ts

@@ -138,19 +138,22 @@ export class DevToolsPlugin implements Plugin<DevToolsSetup> {
     if (this.getSortedDevTools().length === 0) {
       this.appStateUpdater.next(() => ({ navLinkStatus: AppNavLinkStatus.hidden }));
     } else {
-      // Register right navigation for dev tool only when console is enabled.
-      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,
-          })
-        ),
-      });
+      // Register right navigation for dev tool only when console and futureNavigation are both enabled.
+      const topRightNavigationEnabled = core.application.capabilities?.dev_tools?.futureNavigation;
+      if (topRightNavigationEnabled) {
+        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,
+            })
+          ),
+        });
+      }
     }
   }