[Backport 2.x] [MD] Change cluster selector component name to data source selector

src/plugins/data_source_management/public/components/cluster_selector/create_cluster_selector.test.tsx → src/plugins/data_source_management/public/components/data_source_selector/create_data_source_selector.test.tsx

@@ -2,13 +2,13 @@
  * Copyright OpenSearch Contributors
  * SPDX-License-Identifier: Apache-2.0
  */
-import { createClusterSelector } from './create_cluster_selector';
+import { createDataSourceSelector } from './create_data_source_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', () => {
+describe('create data source selector', () => {
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
 
@@ -27,7 +27,7 @@ describe('create cluster selector', () => {
       hideLocalCluster: false,
       fullWidth: false,
     };
-    const TestComponent = createClusterSelector();
+    const TestComponent = createDataSourceSelector();
     const component = render(<TestComponent {...props} />);
     expect(component).toMatchSnapshot();
     expect(client.find).toBeCalledWith({

src/plugins/data_source_management/public/components/data_source_selector/create_data_source_selector.tsx

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

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

@@ -4,13 +4,13 @@
  */
 
 import { ShallowWrapper, shallow } from 'enzyme';
-import { ClusterSelector } from './cluster_selector';
+import { DataSourceSelector } from './data_source_selector';
 import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
 import { getDataSourcesResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
 
-describe('ClusterSelector', () => {
+describe('DataSourceSelector', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
 
   let client: SavedObjectsClientContract;
@@ -24,7 +24,7 @@ describe('ClusterSelector', () => {
 
   it('should render normally with local cluster not hidden', () => {
     component = shallow(
-      <ClusterSelector
+      <DataSourceSelector
         savedObjectsClient={client}
         notifications={toasts}
         onSelectedDataSource={jest.fn()}
@@ -44,7 +44,7 @@ describe('ClusterSelector', () => {
 
   it('should render normally with local cluster is hidden', () => {
     component = shallow(
-      <ClusterSelector
+      <DataSourceSelector
         savedObjectsClient={client}
         notifications={toasts}
         onSelectedDataSource={jest.fn()}
@@ -63,7 +63,7 @@ describe('ClusterSelector', () => {
   });
 });
 
-describe('ClusterSelector: check dataSource options', () => {
+describe('DataSourceSelector: check dataSource options', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
@@ -79,7 +79,7 @@ describe('ClusterSelector: check dataSource options', () => {
 
   it('should always place local cluster option as the first option when local cluster not hidden', async () => {
     component = shallow(
-      <ClusterSelector
+      <DataSourceSelector
         savedObjectsClient={client}
         notifications={toasts}
         onSelectedDataSource={jest.fn()}

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

@@ -9,40 +9,43 @@ import { EuiComboBox } from '@elastic/eui';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
 import { getDataSources } from '../utils';
 
-export const LocalCluster: ClusterOption = {
+export const LocalCluster: DataSourceOption = {
   label: i18n.translate('dataSource.localCluster', {
     defaultMessage: 'Local cluster',
   }),
   id: '',
 };
 
-export interface ClusterSelectorProps {
+export interface DataSourceSelectorProps {
   savedObjectsClient: SavedObjectsClientContract;
   notifications: ToastsStart;
-  onSelectedDataSource: (clusterOption: ClusterOption[]) => void;
+  onSelectedDataSource: (dataSourceOption: DataSourceOption[]) => void;
   disabled: boolean;
   hideLocalCluster: boolean;
   fullWidth: boolean;
 }
 
-interface ClusterSelectorState {
-  clusterOptions: ClusterOption[];
-  selectedOption: ClusterOption[];
+interface DataSourceSelectorState {
+  dataSourceOptions: DataSourceOption[];
+  selectedOption: DataSourceOption[];
 }
 
-export interface ClusterOption {
+export interface DataSourceOption {
   label: string;
   id: string;
 }
 
-export class ClusterSelector extends React.Component<ClusterSelectorProps, ClusterSelectorState> {
+export class DataSourceSelector extends React.Component<
+  DataSourceSelectorProps,
+  DataSourceSelectorState
+> {
   private _isMounted: boolean = false;
 
-  constructor(props: ClusterSelectorProps) {
+  constructor(props: DataSourceSelectorProps) {
     super(props);
 
     this.state = {
-      clusterOptions: this.props.hideLocalCluster ? [] : [LocalCluster],
+      dataSourceOptions: this.props.hideLocalCluster ? [] : [LocalCluster],
       selectedOption: this.props.hideLocalCluster ? [] : [LocalCluster],
     };
   }
@@ -56,19 +59,19 @@ export class ClusterSelector extends React.Component<ClusterSelectorProps, Clust
     getDataSources(this.props.savedObjectsClient)
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          const clusterOptions = fetchedDataSources.map((dataSource) => ({
+          const dataSourceOptions = fetchedDataSources.map((dataSource) => ({
             id: dataSource.id,
             label: dataSource.title,
           }));
 
           if (!this.props.hideLocalCluster) {
-            clusterOptions.unshift(LocalCluster);
+            dataSourceOptions.unshift(LocalCluster);
           }
 
           if (!this._isMounted) return;
           this.setState({
             ...this.state,
-            clusterOptions,
+            dataSourceOptions,
           });
         }
       })
@@ -92,23 +95,23 @@ export class ClusterSelector extends React.Component<ClusterSelectorProps, Clust
   render() {
     return (
       <EuiComboBox
-        aria-label={i18n.translate('clusterSelectorComboBoxAriaLabel', {
+        aria-label={i18n.translate('dataSourceSelectorComboBoxAriaLabel', {
           defaultMessage: 'Select a data source',
         })}
-        placeholder={i18n.translate('clusterSelectorComboBoxPlaceholder', {
+        placeholder={i18n.translate('dataSourceSelectorComboBoxPlaceholder', {
           defaultMessage: 'Select a data source',
         })}
         singleSelection={{ asPlainText: true }}
-        options={this.state.clusterOptions}
+        options={this.state.dataSourceOptions}
         selectedOptions={this.state.selectedOption}
         onChange={(e) => this.onChange(e)}
-        prepend={i18n.translate('clusterSelectorComboBoxPrepend', {
+        prepend={i18n.translate('dataSourceSelectorComboBoxPrepend', {
           defaultMessage: 'Data source',
         })}
         compressed
         isDisabled={this.props.disabled}
         fullWidth={this.props.fullWidth || false}
-        data-test-subj={'clusterSelectorComboBox'}
+        data-test-subj={'dataSourceSelectorComboBox'}
       />
     );
   }

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

@@ -3,4 +3,4 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-export { ClusterSelector } from './cluster_selector';
+export { DataSourceSelector } from './data_source_selector';

src/plugins/data_source_management/public/index.ts

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

src/plugins/data_source_management/public/plugin.ts

@@ -7,7 +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 { createDataSourceSelector } from './components/data_source_selector/create_data_source_selector';
 
 import { ManagementSetup } from '../../management/public';
 import { IndexPatternManagementSetup } from '../../index_pattern_management/public';
@@ -18,7 +18,7 @@ import {
   AuthenticationMethodRegistery,
 } from './auth_registry';
 import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod } from './types';
-import { ClusterSelectorProps } from './components/cluster_selector/cluster_selector';
+import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector';
 
 export interface DataSourceManagementSetupDependencies {
   management: ManagementSetup;
@@ -28,7 +28,7 @@ export interface DataSourceManagementSetupDependencies {
 
 export interface DataSourceManagementPluginSetup {
   registerAuthenticationMethod: (authMethodValues: AuthenticationMethod) => void;
-  getDataSourcePicker: React.ComponentType<ClusterSelectorProps>;
+  getDataSourceSelector: React.ComponentType<DataSourceSelectorProps>;
 }
 
 export interface DataSourceManagementPluginStart {
@@ -96,7 +96,7 @@ export class DataSourceManagementPlugin
 
     return {
       registerAuthenticationMethod,
-      getDataSourcePicker: createClusterSelector(),
+      getDataSourceSelector: createDataSourceSelector(),
     };
   }
 

src/plugins/dev_tools/public/application.tsx

@@ -44,7 +44,7 @@ import {
   ScopedHistory,
 } from 'src/core/public';
 
-import { ClusterSelector } from '../../data_source_management/public';
+import { DataSourceSelector } from '../../data_source_management/public';
 import { DevToolApp } from './dev_tool';
 import { DevToolsSetupDependencies } from './plugin';
 import { addHelpMenuToAppChrome } from './utils/util';
@@ -132,8 +132,8 @@ function DevToolsWrapper({
           </EuiToolTip>
         ))}
         {dataSourceEnabled ? (
-          <div className="devAppClusterSelector">
-            <ClusterSelector
+          <div className="devAppDataSourceSelector">
+            <DataSourceSelector
               savedObjectsClient={savedObjects.client}
               notifications={toasts}
               onSelectedDataSource={onChange}

src/plugins/dev_tools/public/index.scss

@@ -22,7 +22,7 @@
   flex-grow: 1;
 }
 
-.devAppClusterSelector {
+.devAppDataSourceSelector {
   margin: 7px 8px 0 0;
   min-width: 400px;
 }

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

@@ -51,7 +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';
+import { DataSourceSelector } from '../../../../data_source_management/public';
 
 const ALL_TAB_ID = 'all';
 const SAMPLE_DATA_TAB_ID = 'sampleData';
@@ -229,8 +229,8 @@ class TutorialDirectoryUi extends React.Component {
     const { isDataSourceEnabled, isLocalClusterHidden } = this.state;
 
     return isDataSourceEnabled ? (
-      <div className="sampleDataClusterSelector">
-        <ClusterSelector
+      <div className="sampleDataSourceSelector">
+        <DataSourceSelector
           savedObjectsClient={getServices().savedObjectsClient}
           notifications={getServices().toastNotifications}
           onSelectedDataSource={this.onSelectedDataSourceChange}