edit datasource selector to show dafault datasource and return defaul…

…t to customer

Signed-off-by: Yuanqi(Ella) Zhu <zhyuanqi@amazon.com>

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

@@ -7,9 +7,11 @@ import { SavedObjectsClientContract } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
 import { render } from '@testing-library/react';
+import { IUiSettingsClient } from 'src/core/public';
 
 describe('create data source selector', () => {
   let client: SavedObjectsClientContract;
+  let uiSettings: IUiSettingsClient;
   const { toasts } = notificationServiceMock.createStartContract();
 
   beforeEach(() => {
@@ -27,7 +29,7 @@ describe('create data source selector', () => {
       hideLocalCluster: false,
       fullWidth: false,
     };
-    const TestComponent = createDataSourceSelector();
+    const TestComponent = createDataSourceSelector(uiSettings);
     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

@@ -4,8 +4,11 @@
  */
 
 import React from 'react';
+import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceSelector, DataSourceSelectorProps } from './data_source_selector';
 
-export function createDataSourceSelector() {
-  return (props: DataSourceSelectorProps) => <DataSourceSelector {...props} />;
+export function createDataSourceSelector(uiSettings: IUiSettingsClient) {
+  return (props: DataSourceSelectorProps) => (
+    <DataSourceSelector {...props} uiSettings={uiSettings} />
+  );
 }

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

@@ -5,11 +5,16 @@
 
 import { ShallowWrapper, shallow } from 'enzyme';
 import { DataSourceSelector } from './data_source_selector';
-import { SavedObjectsClientContract } from '../../../../../core/public';
+import { SavedObjectsClientContract, IUiSettingsClient } from '../../../../../core/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
 import React from 'react';
-import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
+import {
+  getDataSourcesWithFieldsResponse,
+  mockManagementPlugin,
+  mockResponseForSavedObjectsCalls,
+} from '../../mocks';
 import { AuthType } from 'src/plugins/data_source/common/data_sources';
+import * as utils from '../utils';
 
 describe('DataSourceSelector', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -69,6 +74,8 @@ describe('DataSourceSelector: check dataSource options', () => {
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
   const nextTick = () => new Promise((res) => process.nextTick(res));
+  const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  const uiSettings = mockedContext.uiSettings;
 
   beforeEach(async () => {
     client = {
@@ -170,4 +177,49 @@ describe('DataSourceSelector: check dataSource options', () => {
     expect(component).toMatchSnapshot();
     expect(toasts.addWarning).toBeCalledTimes(0);
   });
+
+  it('should get default datasource if uiSettings exists', async () => {
+    spyOn(uiSettings, 'get').and.returnValue({});
+    component = shallow(
+      <DataSourceSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        uiSettings={uiSettings}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    expect(component).toMatchSnapshot();
+    expect(uiSettings.get).toBeCalledWith('defaultDataSource', null);
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+
+  it('should show default datasource if configured', async () => {
+    spyOn(utils, 'getFilterDataSources').and.returnValue([]);
+    spyOn(utils, 'getDefaultDataSource').and.returnValue([]);
+    spyOn(uiSettings, 'get').and.returnValue({});
+    component = shallow(
+      <DataSourceSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        showDefault={jest.fn()}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    expect(component).toMatchSnapshot();
+    expect(utils.getFilterDataSources).toHaveBeenCalled();
+    expect(utils.getDefaultDataSource).toHaveBeenCalled();
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
 });

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

@@ -5,9 +5,10 @@
 
 import React from 'react';
 import { i18n } from '@osd/i18n';
-import { EuiComboBox } from '@elastic/eui';
+import { EuiComboBox, EuiBadge, EuiFlexItem, EuiFlexGroup } from '@elastic/eui';
 import { SavedObjectsClientContract, ToastsStart, SavedObject } from 'opensearch-dashboards/public';
-import { getDataSourcesWithFields } from '../utils';
+import { IUiSettingsClient } from 'src/core/public';
+import { getDataSourcesWithFields, getDefaultDataSource, getFilterDataSources } from '../utils';
 import { DataSourceAttributes } from '../../types';
 
 export const LocalCluster: DataSourceOption = {
@@ -29,6 +30,8 @@ export interface DataSourceSelectorProps {
   removePrepend?: boolean;
   dataSourceFilter?: (dataSource: SavedObject<DataSourceAttributes>) => boolean;
   compressed?: boolean;
+  uiSettings?: IUiSettingsClient;
+  showDefault?: (source: DataSourceOption) => void;
 }
 
 interface DataSourceSelectorState {
@@ -76,6 +79,20 @@ export class DataSourceSelector extends React.Component<
             allDataSources: fetchedDataSources,
           });
         }
+        if (this.props.showDefault) {
+          const dataSources = getFilterDataSources(
+            this.state.allDataSources,
+            this.props.dataSourceFilter
+          );
+          const defaultDataSource = getDefaultDataSource(
+            dataSources,
+            LocalCluster,
+            this.props.uiSettings,
+            this.props.hideLocalCluster,
+            this.props.defaultOption
+          );
+          this.props.showDefault(defaultDataSource);
+        }
       })
       .catch(() => {
         this.props.notifications.addWarning(
@@ -100,15 +117,17 @@ export class DataSourceSelector extends React.Component<
         ? 'Select a data source'
         : this.props.placeholderText;
 
-    const dataSources = this.props.dataSourceFilter
-      ? this.state.allDataSources.filter((ds) => this.props.dataSourceFilter!(ds))
-      : this.state.allDataSources;
+    const dataSources = getFilterDataSources(
+      this.state.allDataSources,
+      this.props.dataSourceFilter
+    );
 
     const options = dataSources.map((ds) => ({ id: ds.id, label: ds.attributes?.title || '' }));
     if (!this.props.hideLocalCluster) {
       options.unshift(LocalCluster);
     }
 
+    const defaultDataSource = this.props.uiSettings?.get('defaultDataSource', null) ?? null;
     return (
       <EuiComboBox
         aria-label={
@@ -140,6 +159,16 @@ export class DataSourceSelector extends React.Component<
         isDisabled={this.props.disabled}
         fullWidth={this.props.fullWidth || false}
         data-test-subj={'dataSourceSelectorComboBox'}
+        renderOption={(option) => (
+          <EuiFlexGroup alignItems="center">
+            <EuiFlexItem grow={1}>{option.label}</EuiFlexItem>
+            {option.id === defaultDataSource && (
+              <EuiFlexItem grow={false}>
+                <EuiBadge iconSide="left">Default</EuiBadge>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        )}
       />
     );
   }