[MD] Expose a few properties for customize the appearance of the data source selector component

CHANGELOG.md

@@ -22,6 +22,9 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Dynamic Configurations] Add support for dynamic application configurations ([#5855](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5855))
 - [Workspace] Optional workspaces params in repository ([#5949](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/5949))
 - [Multiple Datasource] Refactoring create and edit form to use authentication registry ([#6002](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6002))
+- [Multiple Datasource] Expose a few properties for customize the appearance of the data source selector component ([#6057](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6057))
+
+
 
 ### 🐛 Bug Fixes
 

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

@@ -31,7 +31,7 @@ describe('create data source selector', () => {
     const component = render(<TestComponent {...props} />);
     expect(component).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
-      fields: ['id', 'description', 'title'],
+      fields: ['id', 'title', 'auth.type'],
       perPage: 10000,
       type: 'data-source',
     });

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

@@ -8,7 +8,8 @@ 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';
+import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
+import { AuthType } from 'src/plugins/data_source/common/data_sources';
 
 describe('DataSourceSelector', () => {
   let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
@@ -35,7 +36,7 @@ describe('DataSourceSelector', () => {
     );
     expect(component).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
-      fields: ['id', 'description', 'title'],
+      fields: ['id', 'title', 'auth.type'],
       perPage: 10000,
       type: 'data-source',
     });
@@ -55,7 +56,7 @@ describe('DataSourceSelector', () => {
     );
     expect(component).toMatchSnapshot();
     expect(client.find).toBeCalledWith({
-      fields: ['id', 'description', 'title'],
+      fields: ['id', 'title', 'auth.type'],
       perPage: 10000,
       type: 'data-source',
     });
@@ -74,7 +75,7 @@ describe('DataSourceSelector: check dataSource options', () => {
       find: jest.fn().mockResolvedValue([]),
     } as any;
 
-    mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesResponse);
+    mockResponseForSavedObjectsCalls(client, 'find', getDataSourcesWithFieldsResponse);
   });
 
   it('should always place local cluster option as the first option when local cluster not hidden', async () => {
@@ -94,4 +95,61 @@ describe('DataSourceSelector: check dataSource options', () => {
     expect(component).toMatchSnapshot();
     expect(toasts.addWarning).toBeCalledTimes(0);
   });
+
+  it('should hide prepend if removePrepend is true', async () => {
+    component = shallow(
+      <DataSourceSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        removePrepend={true}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    expect(component).toMatchSnapshot();
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+
+  it('should show custom placeholder text if configured', async () => {
+    component = shallow(
+      <DataSourceSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        placeholderText={'Make a selection'}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    expect(component).toMatchSnapshot();
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
+
+  it('should filter options if configured', async () => {
+    component = shallow(
+      <DataSourceSelector
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSource={jest.fn()}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        filterFn={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+
+    component.instance().componentDidMount!();
+    await nextTick();
+    expect(component).toMatchSnapshot();
+    expect(toasts.addWarning).toBeCalledTimes(0);
+  });
 });