change component name and add test

Signed-off-by: Lu Yu <[email protected]>

src/plugins/data_source_management/opensearch_dashboards.json

@@ -6,5 +6,5 @@
   "requiredPlugins": ["management", "dataSource", "indexPatternManagement"],
   "optionalPlugins": [],
   "requiredBundles": ["opensearchDashboardsReact"],
-  "extraPublicDirs": ["public/components/utils", "public/components/data_source_picker/data_source_picker"]
+  "extraPublicDirs": ["public/components/utils"]
 }

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

@@ -0,0 +1,42 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import { ShallowWrapper, shallow } from 'enzyme';
+import { ClusterSelector } from './cluster_selector';
+import { SavedObjectsClientContract } from '../../../../../core/public';
+import { notificationServiceMock } from '../../../../../core/public/mocks';
+import React from 'react';
+
+describe('ClusterSelector', () => {
+  let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
+
+  let client: SavedObjectsClientContract;
+  const { toasts } = notificationServiceMock.createStartContract();
+
+  beforeEach(() => {
+    client = {
+      find: jest.fn().mockResolvedValue([]),
+    } as any;
+    component = shallow(
+      <ClusterSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        fullWidth={false}
+      />
+    );
+  });
+
+  it('should render normally', () => {
+    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/data_source_picker/data_source_picker.js → src/plugins/data_source_management/public/components/cluster_selector/cluster_selector.tsx

@@ -4,23 +4,44 @@
  */
 
 import React from 'react';
-import { getDataSources } from '../utils';
 import { i18n } from '@osd/i18n';
 import { EuiComboBox } from '@elastic/eui';
+import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
+import { getDataSources } from '../utils';
 
-export const LocalCluster = {
+export const LocalCluster: ClusterOption = {
   label: i18n.translate('dataSource.localCluster', {
     defaultMessage: 'Local cluster',
   }),
   id: '',
 };
 
-export class DataSourcePicker extends React.Component {
-  constructor(props) {
+interface ClusterSelectorProps {
+  savedObjectsClient: SavedObjectsClientContract;
+  notifications: ToastsStart;
+  onSelectedDataSource: (clusterOption: ClusterOption[]) => void;
+  disabled: boolean;
+  fullWidth: boolean;
+}
+
+interface ClusterSelectorState {
+  clusterOptions: ClusterOption[];
+  selectedOption: ClusterOption[];
+}
+
+export interface ClusterOption {
+  label: string;
+  id: string;
+}
+
+export class ClusterSelector extends React.Component<ClusterSelectorProps, ClusterSelectorState> {
+  private _isMounted: boolean = false;
+
+  constructor(props: ClusterSelectorProps) {
     super(props);
 
     this.state = {
-      dataSources: [],
+      clusterOptions: [],
       selectedOption: [LocalCluster],
     };
   }
@@ -34,17 +55,17 @@ export class DataSourcePicker extends React.Component {
     getDataSources(this.props.savedObjectsClient)
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          const dataSourceOptions = fetchedDataSources.map((dataSource) => ({
+          const clusterOptions = fetchedDataSources.map((dataSource) => ({
             id: dataSource.id,
             label: dataSource.title,
           }));
 
-          dataSourceOptions.push(LocalCluster);
+          clusterOptions.push(LocalCluster);
 
           if (!this._isMounted) return;
           this.setState({
             ...this.state,
-            dataSources: dataSourceOptions,
+            clusterOptions,
           });
         }
       })
@@ -75,7 +96,7 @@ export class DataSourcePicker extends React.Component {
           defaultMessage: 'Select a data source',
         })}
         singleSelection={{ asPlainText: true }}
-        options={this.state.dataSources}
+        options={this.state.clusterOptions}
         selectedOptions={this.state.selectedOption}
         onChange={(e) => this.onChange(e)}
         prepend={i18n.translate('dataSourceComboBoxPrepend', {
@@ -84,6 +105,7 @@ export class DataSourcePicker extends React.Component {
         compressed
         isDisabled={this.props.disabled}
         fullWidth={this.props.fullWidth || false}
+        data-test-subj={'clusterSelectorComboBox'}
       />
     );
   }

src/plugins/data_source_management/public/components/cluster_selector/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright OpenSearch Contributors
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+export { ClusterSelector } from './cluster_selector';

src/plugins/data_source_management/public/index.ts

@@ -11,3 +11,4 @@ export function plugin() {
   return new DataSourceManagementPlugin();
 }
 export { DataSourceManagementPluginStart } from './types';
+export { ClusterSelector } from './components/cluster_selector';

src/plugins/dev_tools/public/application.tsx

@@ -44,8 +44,7 @@ import {
   ScopedHistory,
 } from 'src/core/public';
 
-// eslint-disable-next-line @osd/eslint/no-restricted-paths
-import { DataSourcePicker } from '../../data_source_management/public/components/data_source_picker/data_source_picker';
+import { ClusterSelector } from 'src/plugins/data_source_management/public';
 import { DevToolApp } from './dev_tool';
 import { DevToolsSetupDependencies } from './plugin';
 import { addHelpMenuToAppChrome } from './utils/util';
@@ -131,12 +130,13 @@ function DevToolsWrapper({
           </EuiToolTip>
         ))}
         {dataSourceEnabled ? (
-          <div className="devAppDataSourcePicker">
-            <DataSourcePicker
+          <div className="devAppClusterSelector">
+            <ClusterSelector
               savedObjectsClient={savedObjects.client}
               notifications={toasts}
               onSelectedDataSource={onChange}
               disabled={!dataSourceEnabled}
+              fullWidth={false}
             />
           </div>
         ) : null}

src/plugins/home/public/application/components/tutorial_directory.js

@@ -34,8 +34,6 @@ import PropTypes from 'prop-types';
 import { Synopsis } from './synopsis';
 import { SampleDataSetCards } from './sample_data_set_cards';
 import { getServices } from '../opensearch_dashboards_services';
-// eslint-disable-next-line @osd/eslint/no-restricted-paths
-import { DataSourcePicker } from '../../../../data_source_management/public/components/data_source_picker/data_source_picker';
 
 import {
   EuiPage,
@@ -53,6 +51,7 @@ import {
 import { getTutorials } from '../load_tutorials';
 import { injectI18n, FormattedMessage } from '@osd/i18n/react';
 import { i18n } from '@osd/i18n';
+import { ClusterSelector } from '../../../../data_source_management/public';
 
 const ALL_TAB_ID = 'all';
 const SAMPLE_DATA_TAB_ID = 'sampleData';
@@ -228,8 +227,8 @@ class TutorialDirectoryUi extends React.Component {
     const { isDataSourceEnabled } = this.state;
 
     return isDataSourceEnabled ? (
-      <div className="sampledataSourcePicker">
-        <DataSourcePicker
+      <div className="sampleDataClusterSelector">
+        <ClusterSelector
           savedObjectsClient={getServices().savedObjectsClient}
           notifications={getServices().toastNotifications}
           onSelectedDataSource={this.onSelectedDataSourceChange}

src/plugins/saved_objects_management/opensearch_dashboards.json

@@ -14,5 +14,5 @@
     "dataSource"
   ],
   "extraPublicDirs": ["public/lib"],
-  "requiredBundles": ["opensearchDashboardsReact", "home", "dataSourceManagement"]
+  "requiredBundles": ["opensearchDashboardsReact", "home"]
 }