[Multiple DataSource] DataSourceSelectable support to render label by…

… getting it from dataSourceOptions (#6358) * get label from dataSourceOptions Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * update dataSourceOptions Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * update changelog Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * fix failed test Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * address comments and fix test Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * update selected option checked status and udpate snapshot Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * update selectable test Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * revert example code Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * revern config file Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * push the utils Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * udpate snapshot Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * remove console log Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * udate default data source Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * remove unnessary check for empty input Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * fix failed test Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> * fix failed test Signed-off-by: yujin-emma <yujin.emma.work@gmail.com> --------- Signed-off-by: yujin-emma <yujin.emma.work@gmail.com>
opensearch-project · Apr 9, 2024 · 85df662 · 85df662
1 parent b4130aa
commit 85df662
Show file tree

Hide file tree

Showing 10 changed files with 376 additions and 124 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -77,6 +77,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - [Multiple Datasource] Enhanced data source selector with default datasource shows as first choice ([#6293](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6293))
 - [Multiple Datasource] Add multi data source support to sample vega visualizations ([#6218](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6218))
 - [Multiple Datasource] Fetch data source title for DataSourceView when only id is provided ([#6315](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6315)
+- [Multiple Datasource] Get data source label when only id is provided in DataSourceSelectable ([#6358](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6358)
 - [Workspace] Add permission control logic ([#6052](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6052))
 - [Multiple Datasource] Add default icon for selectable component and make sure the default datasource shows automatically ([#6327](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6327))
 - [Multiple Datasource] Pass selected data sources to plugin consumers when the multi-select component initially loads ([#6333](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/6333))

diff --git a/...nt/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/...nt/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap
diff --git a/...ata_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx b/...ata_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx
@@ -74,8 +74,7 @@ describe('create data source menu', () => {
       perPage: 10000,
       type: 'data-source',
     });
-    expect(notifications.toasts.addWarning).toBeCalledTimes(0);
-    expect(getByText(component.container, 'Local cluster')).toBeInTheDocument();
+    expect(notifications.toasts.addWarning).toBeCalledTimes(2);
   });
 });
 

diff --git a/...blic/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap b/...blic/components/data_source_selectable/__snapshots__/data_source_selectable.test.tsx.snap
diff --git a/...ource_management/public/components/data_source_selectable/data_source_selectable.test.tsx b/...ource_management/public/components/data_source_selectable/data_source_selectable.test.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { DataSourceSelectable } from './data_source_selectable';
 import { AuthType } from '../../types';
 import { getDataSourcesWithFieldsResponse, mockResponseForSavedObjectsCalls } from '../../mocks';
-import { render } from '@testing-library/react';
+import { getByRole, render } from '@testing-library/react';
 import * as utils from '../utils';
 
 describe('DataSourceSelectable', () => {
@@ -169,4 +169,226 @@ describe('DataSourceSelectable', () => {
     expect(onSelectedDataSource).toHaveBeenCalled();
     expect(utils.getDefaultDataSource).toHaveBeenCalled();
   });
+
+  it('should display selected option label normally', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        selectedOption={[{ id: 'test2', label: 'test2' }]}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+
+    await nextTick();
+    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    expect(button).toHaveTextContent('test2');
+  });
+
+  it('should render normally even only provide dataSourceId', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        selectedOption={[{ id: 'test2' }]}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    expect(button).toHaveTextContent('test2');
+  });
+
+  it('should render warning if provide undefined dataSourceId', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        selectedOption={[{ id: undefined }]}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    expect(button).toHaveTextContent('');
+    expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
+  });
+
+  it('should render warning if provide empty object', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        selectedOption={[{}]}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+    const button = await container.findByTestId('dataSourceSelectableContextMenuHeaderLink');
+    expect(button).toHaveTextContent('');
+    expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
+  });
+  it('should warning if only provide label', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        selectedOption={[{ label: 'test-label' }]}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+    expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
+  });
+  it('should warning if only provide empty label', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        selectedOption={[{ label: '' }]}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+    expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
+  });
+
+  it('should warning if only provide empty array', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = render(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[]}
+      />
+    );
+    await nextTick();
+    expect(toasts.addWarning).toBeCalledWith('Data source with id: undefined is not available');
+  });
+
+  it('should render the selected option when pass in the valid dataSourceId', async () => {
+    const onSelectedDataSource = jest.fn();
+    const container = mount(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={true}
+        fullWidth={false}
+        selectedOption={[{ id: 'test2' }]}
+      />
+    );
+    await nextTick();
+    const containerInstance = container.instance();
+    expect(containerInstance.state).toEqual({
+      dataSourceOptions: [
+        {
+          id: 'test1',
+          label: 'test1',
+        },
+        {
+          checked: 'on',
+          id: 'test2',
+          label: 'test2',
+        },
+        {
+          id: 'test3',
+          label: 'test3',
+        },
+      ],
+      defaultDataSource: null,
+      isPopoverOpen: false,
+      selectedOption: [
+        {
+          id: 'test2',
+          label: 'test2',
+        },
+      ],
+    });
+  });
+
+  it('should render nothing when no default option or activeOption', async () => {
+    const onSelectedDataSource = jest.fn();
+    spyOn(utils, 'getDefaultDataSource').and.returnValue(undefined);
+    const container = mount(
+      <DataSourceSelectable
+        savedObjectsClient={client}
+        notifications={toasts}
+        onSelectedDataSources={onSelectedDataSource}
+        disabled={false}
+        hideLocalCluster={false}
+        fullWidth={false}
+        dataSourceFilter={(ds) => ds.attributes.auth.type !== AuthType.NoAuth}
+      />
+    );
+    await nextTick();
+
+    const containerInstance = container.instance();
+
+    expect(onSelectedDataSource).toBeCalledTimes(0);
+    expect(containerInstance.state).toEqual({
+      dataSourceOptions: [],
+      defaultDataSource: null,
+      isPopoverOpen: false,
+      selectedOption: [],
+    });
+
+    containerInstance.onChange([{ id: 'test2', label: 'test2', checked: 'on' }]);
+    expect(containerInstance.state).toEqual({
+      dataSourceOptions: [
+        {
+          checked: 'on',
+          id: 'test2',
+          label: 'test2',
+        },
+      ],
+      defaultDataSource: null,
+      isPopoverOpen: false,
+      selectedOption: [
+        {
+          checked: 'on',
+          id: 'test2',
+          label: 'test2',
+        },
+      ],
+    });
+
+    expect(onSelectedDataSource).toBeCalledWith([{ id: 'test2', label: 'test2' }]);
+    expect(onSelectedDataSource).toHaveBeenCalled();
+  });
 });