Add default icon in multi-selectable picker and fix a bug

Signed-off-by: Yuanqi(Ella) Zhu <[email protected]>
opensearch-project · Apr 5, 2024 · b0c6c81 · b0c6c81
1 parent 6ab9065
commit b0c6c81
Show file tree

Hide file tree

Showing 8 changed files with 162 additions and 42 deletions.
diff --git a/config/opensearch_dashboards.yml b/config/opensearch_dashboards.yml
@@ -247,7 +247,7 @@
 # vis_builder.enabled: false
 
 # Set the value of this setting to true to enable multiple data source feature.
-#data_source.enabled: false
+data_source.enabled: true
 # Set the value of this setting to true to hide local cluster in data source feature.
 #data_source.hideLocalCluster: false
 # Set the value of these settings to customize crypto materials to encryption saved credentials

diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.tsx
@@ -50,6 +50,7 @@ export function DataSourceMenu<T>(props: DataSourceMenuProps<T>): ReactElement |
         savedObjectsClient={savedObjects!}
         notifications={notifications!.toasts}
         onSelectedDataSources={onSelectedDataSources!}
+        uiSettings={uiSettings}
       />
     );
   }

diff --git a/...ponents/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap b/...ponents/data_source_multi_selectable/__snapshots__/data_source_filter_group.test.tsx.snap
diff --git a/...nts/data_source_multi_selectable/__snapshots__/data_source_multi_selectable.test.tsx.snap b/...nts/data_source_multi_selectable/__snapshots__/data_source_multi_selectable.test.tsx.snap
diff --git a/...nagement/public/components/data_source_multi_selectable/data_source_filter_group.test.tsx b/...nagement/public/components/data_source_multi_selectable/data_source_filter_group.test.tsx
@@ -17,6 +17,7 @@ describe('DataSourceFilterGroup', () => {
       <DataSourceFilterGroup
         selectedOptions={[{ id: '1', label: 'name1', checked: 'on', visible: true }]}
         setSelectedOptions={(items) => mockCallBack(items)}
+        defaultDataSource="1"
       />
     );
     expect(component).toMatchSnapshot();
@@ -28,6 +29,7 @@ describe('DataSourceFilterGroup', () => {
       <DataSourceFilterGroup
         selectedOptions={[{ id: '1', label: 'name1', checked: 'on', visible: true }]}
         setSelectedOptions={(items) => mockCallBack(items)}
+        defaultDataSource="1"
       />
     );
     const button = await container.findByTestId('dataSourceFilterGroupButton');

diff --git a/...ce_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx b/...ce_management/public/components/data_source_multi_selectable/data_source_filter_group.tsx
@@ -14,6 +14,9 @@ import {
   EuiPopoverFooter,
   EuiButtonGroup,
   EuiButtonEmpty,
+  EuiBadge,
+  EuiFlexGroup,
+  EuiFlexItem,
 } from '@elastic/eui';
 import { DataSourceOption } from '../data_source_selector/data_source_selector';
 
@@ -27,6 +30,7 @@ export interface SelectedDataSourceOption extends DataSourceOption {
 export interface DataSourceFilterGroupProps {
   selectedOptions: SelectedDataSourceOption[];
   setSelectedOptions: (options: SelectedDataSourceOption[]) => void;
+  defaultDataSource: string | null;
 }
 
 type SelectionToggleOptionIds = 'select_all' | 'deselect_all';
@@ -45,6 +49,7 @@ const selectionToggleButtons = [
 export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
   selectedOptions,
   setSelectedOptions,
+  defaultDataSource,
 }) => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const [selectionToggleSelectedId, setSelectionToggleSelectedId] = useState<
@@ -148,7 +153,14 @@ export const DataSourceFilterGroup: React.FC<DataSourceFilterGroupProps> = ({
               showIcons={true}
               style={itemStyle}
             >
-              {item.label}
+              <EuiFlexGroup alignItems="center">
+                <EuiFlexItem grow={1}>{item.label}</EuiFlexItem>
+                {item.id === defaultDataSource && (
+                  <EuiFlexItem grow={false}>
+                    <EuiBadge iconSide="left">Default</EuiBadge>
+                  </EuiFlexItem>
+                )}
+              </EuiFlexGroup>
             </EuiFilterSelectItem>
           );
         })}

diff --git a/...ment/public/components/data_source_multi_selectable/data_source_multi_selectable.test.tsx b/...ment/public/components/data_source_multi_selectable/data_source_multi_selectable.test.tsx
@@ -5,7 +5,11 @@
 
 import { SavedObjectsClientContract } from 'opensearch-dashboards/public';
 import { notificationServiceMock } from '../../../../../core/public/mocks';
-import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
+import {
+  getDataSourcesWithFieldsResponse,
+  mockResponseForSavedObjectsCalls,
+  mockManagementPlugin,
+} from '../../mocks';
 import { ShallowWrapper, shallow } from 'enzyme';
 import { DataSourceMultiSelectable } from './data_source_multi_selectable';
 import React from 'react';
@@ -17,8 +21,12 @@ describe('DataSourceMultiSelectable', () => {
   let client: SavedObjectsClientContract;
   const { toasts } = notificationServiceMock.createStartContract();
   const nextTick = () => new Promise((res) => process.nextTick(res));
+  const mockedContext = mockManagementPlugin.createDataSourceManagementContext();
+  const uiSettings = mockedContext.uiSettings;
 
   beforeEach(() => {
+    jest.clearAllMocks();
+
     client = {
       find: jest.fn().mockResolvedValue([]),
     } as any;
@@ -102,4 +110,40 @@ describe('DataSourceMultiSelectable', () => {
 
     expect(callbackMock).toBeCalledWith([]);
   });
+
+  it('should retrun correct state when ui Settings provided', async () => {
+    spyOn(uiSettings, 'get').and.returnValue('test1');
+    component = shallow(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={true}
+        fullWidth={false}
+        uiSettings={uiSettings}
+      />
+    );
+    await component.instance().componentDidMount!();
+    expect(uiSettings.get).toBeCalledWith('defaultDataSource', null);
+    expect(component.state('defaultDataSource')).toEqual('test1');
+    expect(component.state('selectedOptions')).toHaveLength(3);
+  });
+
+  it('should retrun correct state when ui Settings provided and hide cluster is false', async () => {
+    spyOn(uiSettings, 'get').and.returnValue('test1');
+    component = shallow(
+      <DataSourceMultiSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={jest.fn()}
+        hideLocalCluster={false}
+        fullWidth={false}
+        uiSettings={uiSettings}
+      />
+    );
+    await component.instance().componentDidMount!();
+    expect(uiSettings.get).toBeCalledWith('defaultDataSource', null);
+    expect(component.state('defaultDataSource')).toEqual('test1');
+    expect(component.state('selectedOptions')).toHaveLength(4);
+  });
 });
diff --git a/...anagement/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx b/...anagement/public/components/data_source_multi_selectable/data_source_multi_selectable.tsx
@@ -6,6 +6,7 @@
 import React from 'react';
 import { SavedObjectsClientContract, ToastsStart } from 'opensearch-dashboards/public';
 import { i18n } from '@osd/i18n';
+import { IUiSettingsClient } from 'src/core/public';
 import { DataSourceFilterGroup, SelectedDataSourceOption } from './data_source_filter_group';
 import { getDataSourcesWithFields } from '../utils';
 
@@ -15,11 +16,13 @@ export interface DataSourceMultiSeletableProps {
   onSelectedDataSources: (dataSources: SelectedDataSourceOption[]) => void;
   hideLocalCluster: boolean;
   fullWidth: boolean;
+  uiSettings?: IUiSettingsClient;
 }
 
 interface DataSourceMultiSeletableState {
   dataSourceOptions: SelectedDataSourceOption[];
   selectedOptions: SelectedDataSourceOption[];
+  defaultDataSource: string | null;
 }
 
 export class DataSourceMultiSelectable extends React.Component<
@@ -34,6 +37,7 @@ export class DataSourceMultiSelectable extends React.Component<
     this.state = {
       dataSourceOptions: [],
       selectedOptions: [],
+      defaultDataSource: null,
     };
   }
 
@@ -43,46 +47,49 @@ export class DataSourceMultiSelectable extends React.Component<
 
   async componentDidMount() {
     this._isMounted = true;
-    getDataSourcesWithFields(this.props.savedObjectsClient, ['id', 'title', 'auth.type'])
-      .then((fetchedDataSources) => {
-        if (fetchedDataSources?.length) {
-          // all data sources are selected by default on initial page load
-          const selectedOptions: SelectedDataSourceOption[] = fetchedDataSources.map(
-            (dataSource) => ({
-              id: dataSource.id,
-              label: dataSource.attributes?.title || '',
-              checked: 'on',
-              visible: true,
-            })
-          );
+    try {
+      const defaultDataSource = this.props.uiSettings?.get('defaultDataSource', null) ?? null;
+      let selectedOptions: SelectedDataSourceOption[] = [];
+      const fetchedDataSources = await getDataSourcesWithFields(this.props.savedObjectsClient, [
+        'id',
+        'title',
+        'auth.type',
+      ]);
 
-          if (!this.props.hideLocalCluster) {
-            selectedOptions.unshift({
-              id: '',
-              label: 'Local cluster',
-              checked: 'on',
-              visible: true,
-            });
-          }
+      if (fetchedDataSources?.length) {
+        selectedOptions = fetchedDataSources.map((dataSource) => ({
+          id: dataSource.id,
+          label: dataSource.attributes?.title || '',
+          checked: 'on',
+          visible: true,
+        }));
+      }
 
-          if (!this._isMounted) return;
-          this.setState({
-            ...this.state,
-            selectedOptions,
-          });
+      if (!this.props.hideLocalCluster) {
+        selectedOptions.unshift({
+          id: '',
+          label: 'Local cluster',
+          checked: 'on',
+          visible: true,
+        });
+      }
 
-          this.props.onSelectedDataSources(
-            selectedOptions.filter((option) => option.checked === 'on')
-          );
-        }
-      })
-      .catch(() => {
-        this.props.notifications.addWarning(
-          i18n.translate('dataSource.fetchDataSourceError', {
-            defaultMessage: 'Unable to fetch existing data sources',
-          })
-        );
+      if (!this._isMounted) return;
+
+      this.setState({
+        ...this.state,
+        selectedOptions,
+        defaultDataSource,
       });
+
+      this.props.onSelectedDataSources(selectedOptions.filter((option) => option.checked === 'on'));
+    } catch (error) {
+      this.props.notifications.addWarning(
+        i18n.translate('dataSource.fetchDataSourceError', {
+          defaultMessage: 'Unable to fetch existing data sources',
+        })
+      );
+    }
   }
 
   onChange(selectedOptions: SelectedDataSourceOption[]) {
@@ -98,6 +105,7 @@ export class DataSourceMultiSelectable extends React.Component<
       <DataSourceFilterGroup
         selectedOptions={this.state.selectedOptions}
         setSelectedOptions={this.onChange.bind(this)}
+        defaultDataSource={this.state.defaultDataSource}
       />
     );
   }