Skip to content

Commit

Permalink
[MD] Add OpenSearch cluster group label to top of options in DataSour…
Browse files Browse the repository at this point in the history
…ceSelectable dropdown

Signed-off-by: Zhongnan Su <[email protected]>
  • Loading branch information
zhongnansu committed Apr 10, 2024
1 parent 8151ef5 commit 5550065
Show file tree
Hide file tree
Showing 5 changed files with 71 additions and 4 deletions.
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
- [Workspace] Add APIs to support plugin state in request ([#6303](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6303))
- [Workspace] Filter left nav menu items according to the current workspace ([#6234](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6234))
- [Multiple Datasource] Refactor data source selector component to include placeholder and add tests ([#6372](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6372))
- [MD] Add OpenSearch cluster group label to top of single selectable dropdown ([#6400](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6400))

### 🐛 Bug Fixes

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,11 @@ export interface DataSourceOption {
label?: string;
}

export interface DataSourceGroupLabelOption extends DataSourceOption {
label: string;
isGroupLabel: true;
}

export interface DataSourceBaseConfig {
fullWidth: boolean;
disabled?: boolean;
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,12 @@ import { ShallowWrapper, shallow, mount } from 'enzyme';
import { SavedObjectsClientContract } from '../../../../../core/public';
import { notificationServiceMock } from '../../../../../core/public/mocks';
import React from 'react';
import { DataSourceSelectable } from './data_source_selectable';
import { DataSourceSelectable, opensearchClusterGroupLabel } from './data_source_selectable';
import { AuthType } from '../../types';
import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
import { getByRole, render } from '@testing-library/react';
import { render } from '@testing-library/react';
import * as utils from '../utils';
import { EuiSelectable } from '@elastic/eui';

describe('DataSourceSelectable', () => {
let component: ShallowWrapper<any, Readonly<{}>, React.Component<{}, {}, any>>;
Expand Down Expand Up @@ -391,4 +392,43 @@ describe('DataSourceSelectable', () => {
expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
expect(onSelectedDataSource).toHaveBeenCalled();
});

it('should render opensearch cluster group label at the top of options, when there are options availiable', async () => {
const onSelectedDataSource = jest.fn();
component = shallow(
<DataSourceSelectable
savedObjectsClient={client}
notifications={toasts}
onSelectedDataSources={onSelectedDataSource}
disabled={false}
hideLocalCluster={false}
fullWidth={false}
/>
);

component.instance().componentDidMount!();
await nextTick();
const optionsProp = component.find(EuiSelectable).prop('options');
expect(optionsProp[0]).toEqual(opensearchClusterGroupLabel);
});

it('should not render opensearch cluster group label, when there is no option availiable', async () => {
const onSelectedDataSource = jest.fn();
spyOn(utils, 'getDefaultDataSource').and.returnValue([]);
component = shallow(
<DataSourceSelectable
savedObjectsClient={client}
notifications={toasts}
onSelectedDataSources={onSelectedDataSource}
disabled={false}
hideLocalCluster={false}
fullWidth={false}
/>
);

component.instance().componentDidMount!();
await nextTick();
const optionsProp = component.find(EuiSelectable).prop('options');
expect(optionsProp).toEqual([]);
});
});
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ import { getDataSourcesWithFields, getDefaultDataSource, getFilteredDataSources
import { LocalCluster } from '../data_source_selector/data_source_selector';
import { SavedObject } from '../../../../../core/public';
import { DataSourceAttributes } from '../../types';
import { DataSourceOption } from '../data_source_menu/types';
import { DataSourceGroupLabelOption, DataSourceOption } from '../data_source_menu/types';

interface DataSourceSelectableProps {
savedObjectsClient: SavedObjectsClientContract;
Expand All @@ -50,6 +50,12 @@ interface SelectedDataSourceOption extends DataSourceOption {
checked?: string;
}

export const opensearchClusterGroupLabel: DataSourceGroupLabelOption = {
id: 'opensearchClusterGroupLabel',
label: 'OpenSearch cluster',
isGroupLabel: true,
};

export class DataSourceSelectable extends React.Component<
DataSourceSelectableProps,
DataSourceSelectableState
Expand Down Expand Up @@ -207,6 +213,16 @@ export class DataSourceSelectable extends React.Component<
}
}

getOptionsWithGroupLabel = (dataSourceOptions: DataSourceOption[]): DataSourceOption[] => {
let optionsWithGroupLabel: DataSourceOption[] = [];
if (dataSourceOptions.length === 0) {
optionsWithGroupLabel = [];
} else {
optionsWithGroupLabel = [opensearchClusterGroupLabel, ...dataSourceOptions];
}
return optionsWithGroupLabel;
};

render() {
const button = (
<>
Expand Down Expand Up @@ -248,7 +264,7 @@ export class DataSourceSelectable extends React.Component<
searchProps={{
placeholder: 'Search',
}}
options={this.state.dataSourceOptions}
options={this.getOptionsWithGroupLabel(this.state.dataSourceOptions)}
onChange={(newOptions) => this.onChange(newOptions)}
singleSelection={true}
data-test-subj={'dataSourceSelectable'}
Expand Down

0 comments on commit 5550065

Please sign in to comment.