From 68f4bf9d6ff71a9ec1bfa11d1ecb68bd70d37740 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]" <github-actions[bot]@users.noreply.github.com>
Date: Thu, 7 Mar 2024 18:55:28 +0000
Subject: [PATCH] [MD] Expose a few properties for customize the appearance of
 the data source selector component (#6057)

* allow customize picker

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

* fix placeholder

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

* add changelog

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

---------

Signed-off-by: Lu Yu <nluyu@amazon.com>
(cherry picked from commit 144c022dde279a55d5b2ca965457210b76852ad0)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md
---
 .../create_data_source_selector.test.tsx.snap |  16 +-
 .../data_source_selector.test.tsx.snap        | 158 ++++++++++++++++--
 .../create_data_source_selector.test.tsx      |   2 +-
 .../data_source_selector.test.tsx             |  66 +++++++-
 .../data_source_selector.tsx                  |  69 ++++++--
 .../public/components/utils.ts                |  13 ++
 .../data_source_management/public/mocks.ts    |  37 ++++
 7 files changed, 322 insertions(+), 39 deletions(-)

diff --git a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/create_data_source_selector.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/create_data_source_selector.test.tsx.snap
index 4ce6e1bc30ab..5babe5d1eae3 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/create_data_source_selector.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/create_data_source_selector.test.tsx.snap
@@ -9,12 +9,12 @@ Object {
         aria-expanded="false"
         aria-haspopup="listbox"
         aria-label="Select a data source"
-        class="euiComboBox euiComboBox--compressed"
+        class="euiComboBox"
         data-test-subj="dataSourceSelectorComboBox"
         role="combobox"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
+          class="euiFormControlLayout euiFormControlLayout--group"
         >
           <label
             class="euiFormLabel euiFormControlLayout__prepend"
@@ -25,7 +25,7 @@ Object {
             class="euiFormControlLayout__childrenWrapper"
           >
             <div
-              class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable euiComboBox__inputWrap--inGroup"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable euiComboBox__inputWrap--inGroup"
               data-test-subj="comboBoxInput"
               tabindex="-1"
             >
@@ -56,7 +56,7 @@ Object {
             >
               <button
                 aria-label="Clear input"
-                class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
+                class="euiFormControlLayoutClearButton"
                 data-test-subj="comboBoxClearButton"
                 type="button"
               >
@@ -88,12 +88,12 @@ Object {
       aria-expanded="false"
       aria-haspopup="listbox"
       aria-label="Select a data source"
-      class="euiComboBox euiComboBox--compressed"
+      class="euiComboBox"
       data-test-subj="dataSourceSelectorComboBox"
       role="combobox"
     >
       <div
-        class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayout--group"
+        class="euiFormControlLayout euiFormControlLayout--group"
       >
         <label
           class="euiFormLabel euiFormControlLayout__prepend"
@@ -104,7 +104,7 @@ Object {
           class="euiFormControlLayout__childrenWrapper"
         >
           <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--compressed euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable euiComboBox__inputWrap--inGroup"
+            class="euiComboBox__inputWrap euiComboBox__inputWrap--noWrap euiComboBox__inputWrap-isClearable euiComboBox__inputWrap--inGroup"
             data-test-subj="comboBoxInput"
             tabindex="-1"
           >
@@ -135,7 +135,7 @@ Object {
           >
             <button
               aria-label="Clear input"
-              class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
+              class="euiFormControlLayoutClearButton"
               data-test-subj="comboBoxClearButton"
               type="button"
             >
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
index c921d0e10d1b..07359ef9ac05 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
+++ b/src/plugins/data_source_management/public/components/data_source_selector/__snapshots__/data_source_selector.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`DataSourceSelector should render normally with local cluster is hidden
 <EuiComboBox
   aria-label="Select a data source"
   async={false}
-  compressed={true}
+  compressed={false}
   data-test-subj="dataSourceSelectorComboBox"
   fullWidth={false}
   isClearable={true}
@@ -27,7 +27,7 @@ exports[`DataSourceSelector should render normally with local cluster not hidden
 <EuiComboBox
   aria-label="Select a data source"
   async={false}
-  compressed={true}
+  compressed={false}
   data-test-subj="dataSourceSelectorComboBox"
   fullWidth={false}
   isClearable={true}
@@ -64,7 +64,7 @@ exports[`DataSourceSelector: check dataSource options should always place local
 <EuiComboBox
   aria-label="Select a data source"
   async={false}
-  compressed={true}
+  compressed={false}
   data-test-subj="dataSourceSelectorComboBox"
   fullWidth={false}
   isClearable={true}
@@ -77,20 +77,61 @@ exports[`DataSourceSelector: check dataSource options should always place local
         "label": "Local cluster",
       },
       Object {
-        "id": "test",
-        "label": "test",
+        "id": "test1",
+        "label": "test1",
       },
       Object {
         "id": "test2",
-        "label": "test",
+        "label": "test3",
       },
       Object {
-        "id": "alpha-test",
-        "label": "alpha-test",
+        "id": "test3",
+        "label": "test3",
+      },
+    ]
+  }
+  placeholder="Select a data source"
+  prepend="Data source"
+  selectedOptions={
+    Array [
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      },
+    ]
+  }
+  singleSelection={
+    Object {
+      "asPlainText": true,
+    }
+  }
+  sortMatchesBy="none"
+/>
+`;
+
+exports[`DataSourceSelector: check dataSource options should filter options if configured 1`] = `
+<EuiComboBox
+  aria-label="Select a data source"
+  async={false}
+  compressed={false}
+  data-test-subj="dataSourceSelectorComboBox"
+  fullWidth={false}
+  isClearable={true}
+  isDisabled={false}
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      },
+      Object {
+        "id": "test2",
+        "label": "test3",
       },
       Object {
-        "id": "beta-test",
-        "label": "beta-test",
+        "id": "test3",
+        "label": "test3",
       },
     ]
   }
@@ -112,3 +153,100 @@ exports[`DataSourceSelector: check dataSource options should always place local
   sortMatchesBy="none"
 />
 `;
+
+exports[`DataSourceSelector: check dataSource options should hide prepend if removePrepend is true 1`] = `
+<EuiComboBox
+  aria-label="Select a data source"
+  async={false}
+  compressed={false}
+  data-test-subj="dataSourceSelectorComboBox"
+  fullWidth={false}
+  isClearable={true}
+  isDisabled={false}
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      },
+      Object {
+        "id": "test1",
+        "label": "test1",
+      },
+      Object {
+        "id": "test2",
+        "label": "test3",
+      },
+      Object {
+        "id": "test3",
+        "label": "test3",
+      },
+    ]
+  }
+  placeholder="Select a data source"
+  selectedOptions={
+    Array [
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      },
+    ]
+  }
+  singleSelection={
+    Object {
+      "asPlainText": true,
+    }
+  }
+  sortMatchesBy="none"
+/>
+`;
+
+exports[`DataSourceSelector: check dataSource options should show custom placeholder text if configured 1`] = `
+<EuiComboBox
+  aria-label="Make a selection"
+  async={false}
+  compressed={false}
+  data-test-subj="dataSourceSelectorComboBox"
+  fullWidth={false}
+  isClearable={true}
+  isDisabled={false}
+  onChange={[Function]}
+  options={
+    Array [
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      },
+      Object {
+        "id": "test1",
+        "label": "test1",
+      },
+      Object {
+        "id": "test2",
+        "label": "test3",
+      },
+      Object {
+        "id": "test3",
+        "label": "test3",
+      },
+    ]
+  }
+  placeholder="Make a selection"
+  prepend="Data source"
+  selectedOptions={
+    Array [
+      Object {
+        "id": "",
+        "label": "Local cluster",
+      },
+    ]
+  }
+  singleSelection={
+    Object {
+      "asPlainText": true,
+    }
+  }
+  sortMatchesBy="none"
+/>
+`;
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/create_data_source_selector.test.tsx b/src/plugins/data_source_management/public/components/data_source_selector/create_data_source_selector.test.tsx
index 07080e8fa492..5147a572ca82 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/create_data_source_selector.test.tsx
+++ b/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',
     });
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx
index d74f74160b22..83f98ae01b70 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.test.tsx
+++ b/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);
+  });
 });
diff --git a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
index 8f9c1dc4a884..c6551f92ae50 100644
--- a/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
+++ b/src/plugins/data_source_management/public/components/data_source_selector/data_source_selector.tsx
@@ -7,7 +7,7 @@ import React from 'react';
 import { i18n } from '@osd/i18n';
 import { EuiComboBox } from '@elastic/eui';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
-import { getDataSources } from '../utils';
+import { getDataSourcesWithFields } from '../utils';
 
 export const LocalCluster: DataSourceOption = {
   label: i18n.translate('dataSource.localCluster', {
@@ -23,6 +23,11 @@ export interface DataSourceSelectorProps {
   disabled: boolean;
   hideLocalCluster: boolean;
   fullWidth: boolean;
+  defaultOption?: DataSourceOption[];
+  placeholderText?: string;
+  removePrepend?: boolean;
+  filterFn?: (dataSource: any) => boolean;
+  compressed?: boolean;
 }
 
 interface DataSourceSelectorState {
@@ -45,8 +50,16 @@ export class DataSourceSelector extends React.Component<
     super(props);
 
     this.state = {
-      dataSourceOptions: this.props.hideLocalCluster ? [] : [LocalCluster],
-      selectedOption: this.props.hideLocalCluster ? [] : [LocalCluster],
+      dataSourceOptions: this.props.defaultOption
+        ? this.props.defaultOption
+        : this.props.hideLocalCluster
+        ? []
+        : [LocalCluster],
+      selectedOption: this.props.defaultOption
+        ? this.props.defaultOption
+        : this.props.hideLocalCluster
+        ? []
+        : [LocalCluster],
     };
   }
 
@@ -56,12 +69,20 @@ export class DataSourceSelector extends React.Component<
 
   async componentDidMount() {
     this._isMounted = true;
-    getDataSources(this.props.savedObjectsClient)
+    getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
       .then((fetchedDataSources) => {
         if (fetchedDataSources?.length) {
-          const dataSourceOptions = fetchedDataSources.map((dataSource) => ({
+          let filteredDataSources = [];
+          if (this.props.filterFn) {
+            filteredDataSources = fetchedDataSources.filter((ds) => this.props.filterFn!(ds));
+          }
+
+          if (filteredDataSources.length === 0) {
+            filteredDataSources = fetchedDataSources;
+          }
+          const dataSourceOptions = filteredDataSources.map((dataSource) => ({
             id: dataSource.id,
-            label: dataSource.title,
+            label: dataSource.attributes?.title || '',
           }));
 
           if (!this.props.hideLocalCluster) {
@@ -93,22 +114,38 @@ export class DataSourceSelector extends React.Component<
   }
 
   render() {
+    const placeholderText =
+      this.props.placeholderText === undefined
+        ? 'Select a data source'
+        : this.props.placeholderText;
     return (
       <EuiComboBox
-        aria-label={i18n.translate('dataSourceSelectorComboBoxAriaLabel', {
-          defaultMessage: 'Select a data source',
-        })}
-        placeholder={i18n.translate('dataSourceSelectorComboBoxPlaceholder', {
-          defaultMessage: 'Select a data source',
-        })}
+        aria-label={
+          placeholderText
+            ? i18n.translate('dataSourceSelectorComboBoxAriaLabel', {
+                defaultMessage: placeholderText,
+              })
+            : 'dataSourceSelectorCombobox'
+        }
+        placeholder={
+          placeholderText
+            ? i18n.translate('dataSourceSelectorComboBoxPlaceholder', {
+                defaultMessage: placeholderText,
+              })
+            : ''
+        }
         singleSelection={{ asPlainText: true }}
         options={this.state.dataSourceOptions}
         selectedOptions={this.state.selectedOption}
         onChange={(e) => this.onChange(e)}
-        prepend={i18n.translate('dataSourceSelectorComboBoxPrepend', {
-          defaultMessage: 'Data source',
-        })}
-        compressed
+        prepend={
+          this.props.removePrepend
+            ? undefined
+            : i18n.translate('dataSourceSelectorComboBoxPrepend', {
+                defaultMessage: 'Data source',
+              })
+        }
+        compressed={this.props.compressed || false}
         isDisabled={this.props.disabled}
         fullWidth={this.props.fullWidth || false}
         data-test-subj={'dataSourceSelectorComboBox'}
diff --git a/src/plugins/data_source_management/public/components/utils.ts b/src/plugins/data_source_management/public/components/utils.ts
index 726fcc527f30..13709f606573 100644
--- a/src/plugins/data_source_management/public/components/utils.ts
+++ b/src/plugins/data_source_management/public/components/utils.ts
@@ -36,6 +36,19 @@ export async function getDataSources(savedObjectsClient: SavedObjectsClientContr
     );
 }
 
+export async function getDataSourcesWithFields(
+  savedObjectsClient: SavedObjectsClientContract,
+  fields: string[]
+) {
+  const response = await savedObjectsClient.find({
+    type: 'data-source',
+    fields,
+    perPage: 10000,
+  });
+
+  return response?.savedObjects;
+}
+
 export async function getDataSourceById(
   id: string,
   savedObjectsClient: SavedObjectsClientContract
diff --git a/src/plugins/data_source_management/public/mocks.ts b/src/plugins/data_source_management/public/mocks.ts
index 71e0310cb870..628cd368a91b 100644
--- a/src/plugins/data_source_management/public/mocks.ts
+++ b/src/plugins/data_source_management/public/mocks.ts
@@ -108,6 +108,43 @@ export const getDataSourcesResponse = {
   ],
 };
 
+export const getDataSourcesWithFieldsResponse = {
+  savedObjects: [
+    {
+      id: 'test1',
+      type: 'data-source',
+      attributes: {
+        title: 'test1',
+        auth: {
+          type: AuthType.NoAuth,
+        },
+      },
+    },
+    {
+      id: 'test2',
+      type: 'data-source',
+      description: 'test datasource2',
+      attributes: {
+        title: 'test3',
+        auth: {
+          type: AuthType.UsernamePasswordType,
+        },
+      },
+    },
+    {
+      id: 'test3',
+      type: 'data-source',
+      description: 'test datasource3',
+      attributes: {
+        title: 'test3',
+        auth: {
+          type: AuthType.SigV4,
+        },
+      },
+    },
+  ],
+};
+
 export const existingDatasourceNamesList = [
   'test123',
   'testTest20',