[MD] Change cluster selector component name to data source selector (#…

…6042)

* change component name

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

* add change log

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

---------

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

CHANGELOG.md

@@ -11,6 +11,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 ### 🛡 Security
 
 ### 📈 Features/Enhancements
+- [MD]Change cluster selector component name to data source selector ([#6042](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6042)) 
 
 ### 🐛 Bug Fixes
 

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}