[Manual Backport 2.x] feat: add config for topRightNavigation

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

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,7 +303,10 @@
 # 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"
 
-# Set the value of this setting to true to enable plugin augmentation
+# @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
 
 # Set the value to true to enable permission control for saved objects

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,
+            })
+          ),
+        });
+      }
     }
   }