[MD] Expose picker using function in data source management plugin se…

…tup (#6030)

* expose picker using function in plugin setup

Signed-off-by: Lu Yu <nluyu@amazon.com>

* add changelog and test

Signed-off-by: Lu Yu <nluyu@amazon.com>

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>

CHANGELOG.md

@@ -19,6 +19,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Discover] Fix table cell content overflowing in Safari ([#5948](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5948))
 - [BUG][MD]Fix schema for test connection to separate validation based on auth type ([#5997](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5997))
 - [Discover] Enable 'Back to Top' Feature in Discover for scrolling to top ([#6008](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6008))
+- [BUG][MD]Expose picker using function in data source management plugin setup([#6030](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6030)) 
 
 ### 🚞 Infrastructure
 

src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -16,7 +16,7 @@ export const LocalCluster: ClusterOption = {
   id: '',
 };
 
-interface ClusterSelectorProps {
+export interface ClusterSelectorProps {
   savedObjectsClient: SavedObjectsClientContract;
   notifications: ToastsStart;
   onSelectedDataSource: (clusterOption: ClusterOption[]) => void;

src/plugins/data_source_management/public/components/cluster_selector/create_cluster_selector.test.tsx

@@ -0,0 +1,40 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import { createClusterSelector } from './create_cluster_selector';
+import { SavedObjectsClientContract } from '../../../../../core/public';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+import React from 'react';
+import { render } from '@testing-library/react';
+
+describe('create cluster selector', () => {
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+
+  beforeEach(() => {
+    client = {
+      find: jest.fn().mockResolvedValue([]),
+    } as any;
+  });
+
+  it('should render normally', () => {
+    const props = {
+      savedObjectsClient: client,
+      notifications: toasts,
+      onSelectedDataSource: jest.fn(),
+      disabled: false,
+      hideLocalCluster: false,
+      fullWidth: false,
+    };
+    const TestComponent = createClusterSelector();
+    const component = render(<TestComponent {...props} />);
+    expect(component).toMatchSnapshot();
+    expect(client.find).toBeCalledWith({
+      fields: ['id', 'description', 'title'],
+      perPage: 10000,
+      type: 'data-source',
+    });
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+});

src/plugins/data_source_management/public/components/cluster_selector/create_cluster_selector.tsx

@@ -0,0 +1,11 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import React from 'react';
+import { ClusterSelector, ClusterSelectorProps } from './cluster_selector';
+
+export function createClusterSelector() {
+  return (props: ClusterSelectorProps) => <ClusterSelector {...props} />;
+}

src/plugins/data_source_management/public/plugin.ts

@@ -7,6 +7,7 @@ import { DataSourcePluginSetup } from 'src/plugins/data_source/public';
 import { CoreSetup, CoreStart, Plugin } from '../../../core/public';
 
 import { PLUGIN_NAME } from '../common';
+import { createClusterSelector } from './components/cluster_selector/create_cluster_selector';
 
 import { ManagementSetup } from '../../management/public';
 import { IndexPatternManagementSetup } from '../../index_pattern_management/public';
@@ -17,6 +18,7 @@ import {
   AuthenticationMethodRegistery,
 } from './auth_registry';
 import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod } from './types';
+import { ClusterSelectorProps } from './components/cluster_selector/cluster_selector';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -26,6 +28,7 @@ export interface DataSourceManagementSetupDependencies {
 
 export interface DataSourceManagementPluginSetup {
   registerAuthenticationMethod: (authMethodValues: AuthenticationMethod) => void;
+  getDataSourcePicker: React.ComponentType<ClusterSelectorProps>;
 }
 
 export interface DataSourceManagementPluginStart {
@@ -91,7 +94,10 @@ export class DataSourceManagementPlugin
       registerAuthenticationMethod(sigV4AuthMethod);
     }
 
-    return { registerAuthenticationMethod };
+    return {
+      registerAuthenticationMethod,
+      getDataSourcePicker: createClusterSelector(),
+    };
   }
 
   public start(core: CoreStart) {