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

…pensearch-project#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>
bandinib-amzn · Mar 6, 2024 · 8839256 · 8839256
1 parent 70adcc9
commit 8839256
Show file tree

Hide file tree

Showing 16 changed files with 68 additions and 64 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/...ins/data_source_management/public/components/cluster_selector/create_cluster_selector.tsx b/...ins/data_source_management/public/components/cluster_selector/create_cluster_selector.tsx
diff --git a/...s__/create_cluster_selector.test.tsx.snap → ...create_data_source_selector.test.tsx.snap b/...s__/create_cluster_selector.test.tsx.snap → ...create_data_source_selector.test.tsx.snap
diff --git a/...napshots__/cluster_selector.test.tsx.snap → ...hots__/data_source_selector.test.tsx.snap b/...napshots__/cluster_selector.test.tsx.snap → ...hots__/data_source_selector.test.tsx.snap
diff --git a/...selector/create_cluster_selector.test.tsx → ...ctor/create_data_source_selector.test.tsx b/...selector/create_cluster_selector.test.tsx → ...ctor/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({

diff --git a/..._source_management/public/components/data_source_selector/create_data_source_selector.tsx b/..._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} />;
+}
diff --git a/...luster_selector/cluster_selector.test.tsx → ...ce_selector/data_source_selector.test.tsx b/...luster_selector/cluster_selector.test.tsx → ...ce_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()}

diff --git a/...nts/cluster_selector/cluster_selector.tsx → ..._source_selector/data_source_selector.tsx b/...nts/cluster_selector/cluster_selector.tsx → ..._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'}
       />
     );
   }

diff --git a/...blic/components/cluster_selector/index.ts → .../components/data_source_selector/index.ts b/...blic/components/cluster_selector/index.ts → .../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';
diff --git a/src/plugins/data_source_management/public/index.ts b/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';
diff --git a/src/plugins/data_source_management/public/plugin.ts b/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(),
     };
   }
 

diff --git a/src/plugins/dev_tools/public/application.tsx b/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}

diff --git a/src/plugins/dev_tools/public/index.scss b/src/plugins/dev_tools/public/index.scss
@@ -22,7 +22,7 @@
   flex-grow: 1;
 }
 
-.devAppClusterSelector {
+.devAppDataSourceSelector {
   margin: 7px 8px 0 0;
   min-width: 400px;
 }

diff --git a/src/plugins/home/public/application/components/tutorial_directory.js b/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}