[MD]Refactor dev tool to use dataSourceManagement.ui API to get DataS…

…ourceSelector (opensearch-project#6477)

* Refactor dev tool to use dataSourceManagement.ui interfaces to obtain DataSourceSelector

Signed-off-by: Zhongnan Su <szhongna@amazon.com>

changelogs/fragments/6477.yml

@@ -0,0 +1,2 @@
+refactor:
+- Refactor dev tool to use dataSourceManagement.ui API to get DataSourceSelector ([#6477](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6477))

src/plugins/dev_tools/opensearch_dashboards.json

@@ -3,7 +3,6 @@
   "version": "opensearchDashboards",
   "server": false,
   "ui": true,
-  "optionalPlugins": ["dataSource", "managementOverview"],
-  "requiredPlugins": ["urlForwarding"],
-  "requiredBundles": ["dataSourceManagement"]
+  "optionalPlugins": ["dataSource", "managementOverview", "dataSourceManagement"],
+  "requiredPlugins": ["urlForwarding"]
 }

src/plugins/dev_tools/public/application.tsx

@@ -39,13 +39,12 @@ import {
   ApplicationStart,
   ChromeStart,
   CoreStart,
-  IUiSettingsClient,
   NotificationsStart,
   SavedObjectsStart,
   ScopedHistory,
 } from 'src/core/public';
 
-import { DataSourceSelector } from '../../data_source_management/public';
+import { DataSourceManagementPluginSetup } from 'src/plugins/data_source_management/public';
 import { DevToolApp } from './dev_tool';
 import { DevToolsSetupDependencies } from './plugin';
 import { addHelpMenuToAppChrome } from './utils/util';
@@ -56,8 +55,7 @@ interface DevToolsWrapperProps {
   savedObjects: SavedObjectsStart;
   notifications: NotificationsStart;
   dataSourceEnabled: boolean;
-  hideLocalCluster: boolean;
-  uiSettings: IUiSettingsClient;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
 }
 
 interface MountedDevToolDescriptor {
@@ -73,8 +71,7 @@ function DevToolsWrapper({
   savedObjects,
   notifications: { toasts },
   dataSourceEnabled,
-  hideLocalCluster,
-  uiSettings,
+  dataSourceManagement,
 }: DevToolsWrapperProps) {
   const mountedTool = useRef<MountedDevToolDescriptor | null>(null);
   const [isLoading, setIsLoading] = React.useState<boolean>(true);
@@ -117,6 +114,21 @@ function DevToolsWrapper({
     setIsLoading(false);
   };
 
+  const renderDataSourceSelector = () => {
+    const DataSourceSelector = dataSourceManagement!.ui.DataSourceSelector;
+    return (
+      <div className="devAppDataSourceSelector">
+        <DataSourceSelector
+          savedObjectsClient={savedObjects.client}
+          notifications={toasts}
+          onSelectedDataSource={onChange}
+          disabled={!dataSourceEnabled}
+          fullWidth={false}
+        />
+      </div>
+    );
+  };
+
   return (
     <main className="devApp">
       <EuiTabs className="devAppTabs">
@@ -135,19 +147,7 @@ function DevToolsWrapper({
             </EuiTab>
           </EuiToolTip>
         ))}
-        {dataSourceEnabled && !isLoading ? (
-          <div className="devAppDataSourceSelector">
-            <DataSourceSelector
-              savedObjectsClient={savedObjects.client}
-              notifications={toasts}
-              onSelectedDataSource={onChange}
-              disabled={!dataSourceEnabled}
-              hideLocalCluster={hideLocalCluster}
-              fullWidth={false}
-              uiSettings={uiSettings}
-            />
-          </div>
-        ) : null}
+        {dataSourceEnabled && !isLoading && dataSourceManagement && renderDataSourceSelector()}
       </EuiTabs>
 
       <div
@@ -162,7 +162,7 @@ function DevToolsWrapper({
               mountedTool.current.mountpoint !== element)
           ) {
             let initialDataSourceId;
-            if (!dataSourceEnabled || (dataSourceEnabled && !hideLocalCluster)) {
+            if (!dataSourceEnabled) {
               initialDataSourceId = '';
             }
 
@@ -218,14 +218,13 @@ function setBreadcrumbs(chrome: ChromeStart) {
 }
 
 export function renderApp(
-  { application, chrome, docLinks, savedObjects, notifications, uiSettings }: CoreStart,
+  { application, chrome, docLinks, savedObjects, notifications }: CoreStart,
   element: HTMLElement,
   history: ScopedHistory,
   devTools: readonly DevToolApp[],
-  { dataSource }: DevToolsSetupDependencies
+  { dataSourceManagement, dataSource }: DevToolsSetupDependencies
 ) {
   const dataSourceEnabled = !!dataSource;
-  const hideLocalCluster = dataSource?.hideLocalCluster ?? false;
   if (redirectOnMissingCapabilities(application)) {
     return () => {};
   }
@@ -255,8 +254,7 @@ export function renderApp(
                     savedObjects={savedObjects}
                     notifications={notifications}
                     dataSourceEnabled={dataSourceEnabled}
-                    hideLocalCluster={hideLocalCluster}
-                    uiSettings={uiSettings}
+                    dataSourceManagement={dataSourceManagement}
                   />
                 )}
               />

src/plugins/dev_tools/public/plugin.ts

@@ -33,7 +33,7 @@ import { Plugin, CoreSetup, AppMountParameters } 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 { UrlForwardingSetup } from '../../url_forwarding/public';
@@ -43,8 +43,9 @@ import './index.scss';
 import { ManagementOverViewPluginSetup } from '../../management_overview/public';
 
 export interface DevToolsSetupDependencies {
-  dataSource?: DataSourcePluginSetup;
   urlForwarding: UrlForwardingSetup;
+  dataSource?: DataSourcePluginSetup;
+  dataSourceManagement?: DataSourceManagementPluginSetup;
   managementOverview?: ManagementOverViewPluginSetup;
 }