[MD] Expose a few properties for customize the appearance of the data…

… source selector component (#6057) * allow customize picker Signed-off-by: Lu Yu <[email protected]> * fix placeholder Signed-off-by: Lu Yu <[email protected]> * add changelog Signed-off-by: Lu Yu <[email protected]> --------- Signed-off-by: Lu Yu <[email protected]>
opensearch-project · Mar 7, 2024 · 144c022 · 144c022
1 parent 99ae1a5
commit 144c022
Show file tree

Hide file tree

Showing 8 changed files with 325 additions and 39 deletions.
diff --git a/CHANGELOG.md b/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
 

diff --git a/...c/components/data_source_selector/__snapshots__/create_data_source_selector.test.tsx.snap b/...c/components/data_source_selector/__snapshots__/create_data_source_selector.test.tsx.snap
diff --git a/...t/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap b/...t/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
diff --git a/...ce_management/public/components/data_source_selector/create_data_source_selector.test.tsx b/...ce_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',
     });

diff --git a/...ta_source_management/public/components/data_source_selector/data_source_selector.test.tsx b/...ta_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);
+  });
 });