From bae6984b35593bea4a44a6e462e888419fbb2a6b Mon Sep 17 00:00:00 2001 From: "opensearch-trigger-bot[bot]" <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com> Date: Tue, 26 Mar 2024 14:08:51 -0700 Subject: [PATCH] [Multiple Datasource] Refactor data source menu and interface to allow cleaner selection of component and related configurations (#6256) (#6267) * refactor Signed-off-by: Lu Yu * refactor data source menu Signed-off-by: Lu Yu * add change log Signed-off-by: Lu Yu * move configs based on if it is required Signed-off-by: Lu Yu * move optional params below required Signed-off-by: Lu Yu --------- Signed-off-by: Lu Yu Co-authored-by: ZilongX <99905560+ZilongX@users.noreply.github.com> (cherry picked from commit 4f1884b2e458ca5f7fa72dd0a0ee94aba6f547c4) Signed-off-by: github-actions[bot] # Conflicts: # CHANGELOG.md Co-authored-by: github-actions[bot] Co-authored-by: Lu Yu --- .../create_data_source_menu.test.tsx.snap | 174 ++++++++--- .../data_source_menu.test.tsx.snap | 287 +++++++++++++----- .../create_data_source_menu.test.tsx | 91 +++++- .../create_data_source_menu.tsx | 18 +- .../data_source_menu.test.tsx | 69 +++-- .../data_source_menu/data_source_menu.tsx | 161 ++++------ .../data_source_selectable.test.tsx | 6 +- .../data_source_selectable.tsx | 7 +- .../components/data_source_menu/index.ts | 7 + .../components/data_source_menu/types.ts | 59 ++++ .../data_source_view/data_source_view.tsx | 2 +- .../data_source_management/public/index.ts | 8 + .../data_source_management/public/plugin.ts | 6 +- 13 files changed, 619 insertions(+), 276 deletions(-) create mode 100644 src/plugins/data_source_management/public/components/data_source_menu/types.ts diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap index 207e38d657da..55b037cb8307 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/create_data_source_menu.test.tsx.snap @@ -1,13 +1,138 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`create data source menu should render normally 1`] = ` +exports[`create data source menu should render data source selectable normally 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+
+
+ + +
+
+
+ , + "container":
+
+
+ + +
+
+
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} +`; + +exports[`when setMenuMountPoint is provided should mount data source component 1`] = ` Object { "asFragment": [Function], "baseElement":
+
, - "container":
- -
, + "container":
, "debug": [Function], "findAllByAltText": [Function], "findAllByDisplayValue": [Function], diff --git a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap index ea00d96c5798..6fa9b51ce3e7 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_menu/__snapshots__/data_source_menu.test.tsx.snap @@ -4,9 +4,109 @@ exports[`DataSourceMenu should render data source aggregated view 1`] = ` Object { "asFragment": [Function], "baseElement": -
+
+ + + All + +
+
+ +
+
+
, - "container":
, + "container":
+ + + All + +
+
+ +
+
+
, "debug": [Function], "findAllByAltText": [Function], "findAllByDisplayValue": [Function], @@ -62,83 +162,120 @@ Object { `; exports[`DataSourceMenu should render data source selectable only with local cluster is hidden 1`] = ` - - - - - + `; exports[`DataSourceMenu should render data source selectable only with local cluster not hidden 1`] = ` - - - - - + `; exports[`DataSourceMenu should render data source view only 1`] = ` - - - - - + +`; + +exports[`DataSourceMenu should render nothing 1`] = ` +Object { + "asFragment": [Function], + "baseElement": +
+ , + "container":
, + "debug": [Function], + "findAllByAltText": [Function], + "findAllByDisplayValue": [Function], + "findAllByLabelText": [Function], + "findAllByPlaceholderText": [Function], + "findAllByRole": [Function], + "findAllByTestId": [Function], + "findAllByText": [Function], + "findAllByTitle": [Function], + "findByAltText": [Function], + "findByDisplayValue": [Function], + "findByLabelText": [Function], + "findByPlaceholderText": [Function], + "findByRole": [Function], + "findByTestId": [Function], + "findByText": [Function], + "findByTitle": [Function], + "getAllByAltText": [Function], + "getAllByDisplayValue": [Function], + "getAllByLabelText": [Function], + "getAllByPlaceholderText": [Function], + "getAllByRole": [Function], + "getAllByTestId": [Function], + "getAllByText": [Function], + "getAllByTitle": [Function], + "getByAltText": [Function], + "getByDisplayValue": [Function], + "getByLabelText": [Function], + "getByPlaceholderText": [Function], + "getByRole": [Function], + "getByTestId": [Function], + "getByText": [Function], + "getByTitle": [Function], + "queryAllByAltText": [Function], + "queryAllByDisplayValue": [Function], + "queryAllByLabelText": [Function], + "queryAllByPlaceholderText": [Function], + "queryAllByRole": [Function], + "queryAllByTestId": [Function], + "queryAllByText": [Function], + "queryAllByTitle": [Function], + "queryByAltText": [Function], + "queryByDisplayValue": [Function], + "queryByLabelText": [Function], + "queryByPlaceholderText": [Function], + "queryByRole": [Function], + "queryByTestId": [Function], + "queryByText": [Function], + "queryByTitle": [Function], + "rerender": [Function], + "unmount": [Function], +} `; diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx index 1e4c43389847..52aaefe5ea75 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx +++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.test.tsx @@ -4,10 +4,12 @@ */ import { createDataSourceMenu } from './create_data_source_menu'; -import { SavedObjectsClientContract } from '../../../../../core/public'; +import { MountPoint, SavedObjectsClientContract } from '../../../../../core/public'; import { notificationServiceMock } from '../../../../../core/public/mocks'; import React from 'react'; -import { render } from '@testing-library/react'; +import { act, render } from '@testing-library/react'; +import { DataSourceComponentType, DataSourceSelectableConfig } from './types'; +import { ReactWrapper } from 'enzyme'; describe('create data source menu', () => { let client: SavedObjectsClientContract; @@ -19,18 +21,18 @@ describe('create data source menu', () => { } as any; }); - it('should render normally', () => { + it('should render data source selectable normally', () => { const props = { - showDataSourceSelectable: true, - appName: 'myapp', - savedObjects: client, - notifications, - fullWidth: true, - hideLocalCluster: true, - disableDataSourceSelectable: false, - className: 'myclass', + componentType: DataSourceComponentType.DataSourceSelectable, + componentConfig: { + fullWidth: true, + hideLocalCluster: true, + onSelectedDataSources: jest.fn(), + savedObjects: client, + notifications, + }, }; - const TestComponent = createDataSourceMenu(); + const TestComponent = createDataSourceMenu(); const component = render(); expect(component).toMatchSnapshot(); expect(client.find).toBeCalledWith({ @@ -41,3 +43,68 @@ describe('create data source menu', () => { expect(notifications.toasts.addWarning).toBeCalledTimes(0); }); }); + +describe('when setMenuMountPoint is provided', () => { + let portalTarget: HTMLElement; + let mountPoint: MountPoint; + let setMountPoint: jest.Mock<(mountPoint: MountPoint) => void>; + let dom: ReactWrapper; + + let client: SavedObjectsClientContract; + const notifications = notificationServiceMock.createStartContract(); + + const refresh = () => { + new Promise(async (resolve) => { + if (dom) { + act(() => { + dom.update(); + }); + } + setImmediate(() => resolve(dom)); // flushes any pending promises + }); + }; + + beforeEach(() => { + portalTarget = document.createElement('div'); + document.body.append(portalTarget); + setMountPoint = jest.fn().mockImplementation((mp) => (mountPoint = mp)); + client = { + find: jest.fn().mockResolvedValue([]), + } as any; + }); + + afterEach(() => { + if (portalTarget) { + portalTarget.remove(); + } + }); + + it('should mount data source component', async () => { + const props = { + setMenuMountPoint: setMountPoint, + componentType: DataSourceComponentType.DataSourceSelectable, + componentConfig: { + fullWidth: true, + hideLocalCluster: true, + onSelectedDataSources: jest.fn(), + savedObjects: client, + notifications, + }, + }; + const TestComponent = createDataSourceMenu(); + const component = render(); + act(() => { + mountPoint(portalTarget); + }); + + await refresh(); + expect(component).toMatchSnapshot(); + expect(client.find).toBeCalledWith({ + fields: ['id', 'title', 'auth.type'], + perPage: 10000, + type: 'data-source', + }); + expect(notifications.toasts.addWarning).toBeCalledTimes(0); + expect(setMountPoint).toBeCalledTimes(1); + }); +}); diff --git a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx index 7d5972f8e068..2e76c2cf23c6 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx +++ b/src/plugins/data_source_management/public/components/data_source_menu/create_data_source_menu.tsx @@ -4,10 +4,22 @@ */ import React from 'react'; -import { DataSourceMenu, DataSourceMenuProps } from './data_source_menu'; +import { EuiHeaderLinks } from '@elastic/eui'; +import { DataSourceMenu } from './data_source_menu'; +import { DataSourceMenuProps } from './types'; +import { MountPointPortal } from '../../../../opensearch_dashboards_react/public'; -export function createDataSourceMenu() { - return (props: DataSourceMenuProps) => { +export function createDataSourceMenu() { + return (props: DataSourceMenuProps) => { + if (props.setMenuMountPoint) { + return ( + + + + + + ); + } return ; }; } diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx index a5ec61107b3e..af5ef0cf3f32 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx +++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_menu.test.tsx @@ -9,6 +9,7 @@ import { notificationServiceMock } from '../../../../../core/public/mocks'; import React from 'react'; import { DataSourceMenu } from './data_source_menu'; import { render } from '@testing-library/react'; +import { DataSourceComponentType } from './types'; describe('DataSourceMenu', () => { let component: ShallowWrapper, React.Component<{}, {}, any>>; @@ -25,15 +26,14 @@ describe('DataSourceMenu', () => { it('should render data source selectable only with local cluster not hidden', () => { component = shallow( ); expect(component).toMatchSnapshot(); @@ -42,15 +42,14 @@ describe('DataSourceMenu', () => { it('should render data source selectable only with local cluster is hidden', () => { component = shallow( ); expect(component).toMatchSnapshot(); @@ -59,10 +58,8 @@ describe('DataSourceMenu', () => { it('should render data source view only', () => { component = shallow( ); expect(component).toMatchSnapshot(); @@ -71,12 +68,28 @@ describe('DataSourceMenu', () => { it('should render data source aggregated view', () => { const container = render( + ); + expect(container).toMatchSnapshot(); + }); + + it('should render nothing', () => { + const container = render( + ); expect(container).toMatchSnapshot(); 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 index 9be65882a9b8..c5d4cf421696 100644 --- 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 @@ -4,94 +4,68 @@ */ import React, { ReactElement } from 'react'; -import { EuiHeaderLinks } from '@elastic/eui'; -import classNames from 'classnames'; -import { - MountPoint, - NotificationsStart, - SavedObjectsClientContract, - SavedObject, -} from '../../../../../core/public'; -import { MountPointPortal } from '../../../../opensearch_dashboards_react/public'; import { DataSourceSelectable } from './data_source_selectable'; -import { DataSourceOption } from '../data_source_selector/data_source_selector'; import { DataSourceAggregatedView } from '../data_source_aggregated_view'; import { DataSourceView } from '../data_source_view'; -import { DataSourceAttributes } from '../../types'; - -export interface DataSourceMenuProps { - showDataSourceSelectable?: boolean; - showDataSourceView?: boolean; - showDataSourceAggregatedView?: boolean; - activeDataSourceIds?: string[]; - appName: string; - savedObjects?: SavedObjectsClientContract; - notifications?: NotificationsStart; - fullWidth: boolean; - hideLocalCluster?: boolean; - dataSourceCallBackFunc?: (dataSource: DataSourceOption) => void; - disableDataSourceSelectable?: boolean; - className?: string; - selectedOption?: DataSourceOption[]; - setMenuMountPoint?: (menuMount: MountPoint | undefined) => void; - dataSourceFilter?: (dataSource: SavedObject) => boolean; - displayAllCompatibleDataSources?: boolean; -} - -export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null { - const { - savedObjects, - notifications, - dataSourceCallBackFunc, - showDataSourceSelectable, - disableDataSourceSelectable, - showDataSourceAggregatedView, - fullWidth, - hideLocalCluster, - selectedOption, - showDataSourceView, - dataSourceFilter, - activeDataSourceIds, - displayAllCompatibleDataSources, - } = props; +import { + DataSourceAggregatedViewConfig, + DataSourceComponentType, + DataSourceMenuProps, + DataSourceSelectableConfig, + DataSourceViewConfig, +} from './types'; - if (!showDataSourceSelectable && !showDataSourceView && !showDataSourceAggregatedView) { - return null; - } +export function DataSourceMenu(props: DataSourceMenuProps): ReactElement | null { + const { componentType, componentConfig } = props; - function renderDataSourceView(className: string): ReactElement | null { - if (!showDataSourceView) return null; + function renderDataSourceView(config: DataSourceViewConfig): ReactElement | null { + const { activeOption, fullWidth } = config; return ( - - 0 ? selectedOption : undefined} - /> - + 0 ? activeOption : undefined} + fullWidth={fullWidth} + /> ); } - function renderDataSourceSelectable(className: string): ReactElement | null { - if (!showDataSourceSelectable) return null; + function renderDataSourceSelectable(config: DataSourceSelectableConfig): ReactElement | null { + const { + onSelectedDataSources, + disabled, + activeOption, + hideLocalCluster, + fullWidth, + savedObjects, + notifications, + dataSourceFilter, + } = config; return ( - - 0 ? selectedOption : undefined} - dataSourceFilter={dataSourceFilter} - /> - + 0 ? activeOption : undefined} + dataSourceFilter={dataSourceFilter} + hideLocalCluster={hideLocalCluster || false} + fullWidth={fullWidth} + /> ); } - function renderDataSourceAggregatedView(): ReactElement | null { - if (!showDataSourceAggregatedView) return null; + function renderDataSourceAggregatedView( + config: DataSourceAggregatedViewConfig + ): ReactElement | null { + const { + fullWidth, + hideLocalCluster, + activeDataSourceIds, + displayAllCompatibleDataSources, + savedObjects, + notifications, + dataSourceFilter, + } = config; return ( - - {renderDataSourceAggregatedView()} - {renderDataSourceSelectable(menuClassName)} - {renderDataSourceView(menuClassName)} - - - ); - } else { - return ( - <> - {renderDataSourceSelectable(menuClassName)} - {renderDataSourceView(menuClassName)} - - ); + function renderLayout(): ReactElement | null { + switch (componentType) { + case DataSourceComponentType.DataSourceAggregatedView: + return renderDataSourceAggregatedView(componentConfig as DataSourceAggregatedViewConfig); + case DataSourceComponentType.DataSourceSelectable: + return renderDataSourceSelectable(componentConfig as DataSourceSelectableConfig); + case DataSourceComponentType.DataSourceView: + return renderDataSourceView(componentConfig as DataSourceViewConfig); + default: + return null; } } return renderLayout(); } - -DataSourceMenu.defaultProps = { - disableDataSourceSelectable: false, - showDataSourceAggregatedView: false, - showDataSourceSelectable: false, - displayAllCompatibleDataSources: false, - showDataSourceView: false, - hideLocalCluster: false, -}; diff --git a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx b/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx index 9b0215d157e8..b9f06ce3f8bb 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx +++ b/src/plugins/data_source_management/public/components/data_source_menu/data_source_selectable.test.tsx @@ -30,7 +30,7 @@ describe('DataSourceSelectable', () => { { { void; + onSelectedDataSources: (dataSources: DataSourceOption[]) => void; disabled: boolean; hideLocalCluster: boolean; fullWidth: boolean; @@ -119,7 +120,7 @@ export class DataSourceSelectable extends React.Component< this.setState({ selectedOption: [selectedDataSource], }); - this.props.onSelectedDataSource({ ...selectedDataSource }); + this.props.onSelectedDataSources([selectedDataSource]); } render() { diff --git a/src/plugins/data_source_management/public/components/data_source_menu/index.ts b/src/plugins/data_source_management/public/components/data_source_menu/index.ts index 21951dc8d29e..2a764d602b56 100644 --- a/src/plugins/data_source_management/public/components/data_source_menu/index.ts +++ b/src/plugins/data_source_management/public/components/data_source_menu/index.ts @@ -4,3 +4,10 @@ */ export { DataSourceMenu } from './data_source_menu'; +export { + DataSourceSelectableConfig, + DataSourceAggregatedViewConfig, + DataSourceComponentType, + DataSourceViewConfig, + DataSourceMenuProps, +} from './types'; diff --git a/src/plugins/data_source_management/public/components/data_source_menu/types.ts b/src/plugins/data_source_management/public/components/data_source_menu/types.ts new file mode 100644 index 000000000000..e570eb83ec82 --- /dev/null +++ b/src/plugins/data_source_management/public/components/data_source_menu/types.ts @@ -0,0 +1,59 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ +import { + MountPoint, + NotificationsStart, + SavedObjectsClientContract, + SavedObject, +} from '../../../../../core/public'; +import { DataSourceAttributes } from '../../types'; + +export interface DataSourceOption { + id: string; + label?: string; +} + +export interface DataSourceBaseConfig { + fullWidth: boolean; + disabled?: boolean; +} + +export interface DataSourceMenuProps { + componentType: DataSourceComponentType; + componentConfig: T; + setMenuMountPoint?: (menuMount: MountPoint | undefined) => void; +} + +export const DataSourceComponentType = { + DataSourceSelectable: 'DataSourceSelectable', + DataSourceView: 'DataSourceView', + DataSourceAggregatedView: 'DataSourceAggregatedView', +} as const; + +export type DataSourceComponentType = typeof DataSourceComponentType[keyof typeof DataSourceComponentType]; + +export interface DataSourceViewConfig extends DataSourceBaseConfig { + activeOption: DataSourceOption[]; + savedObjects?: SavedObjectsClientContract; + notifications?: NotificationsStart; +} + +export interface DataSourceAggregatedViewConfig extends DataSourceBaseConfig { + savedObjects: SavedObjectsClientContract; + notifications: NotificationsStart; + activeDataSourceIds?: string[]; + hideLocalCluster?: boolean; + displayAllCompatibleDataSources?: boolean; + dataSourceFilter?: (dataSource: SavedObject) => boolean; +} + +export interface DataSourceSelectableConfig extends DataSourceBaseConfig { + onSelectedDataSources: (dataSources: DataSourceOption[]) => void; + savedObjects: SavedObjectsClientContract; + notifications: NotificationsStart; + activeOption?: DataSourceOption[]; + hideLocalCluster?: boolean; + dataSourceFilter?: (dataSource: SavedObject) => boolean; +} diff --git a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx index 068842ef26a6..23bb2e34feab 100644 --- a/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx +++ b/src/plugins/data_source_management/public/components/data_source_view/data_source_view.tsx @@ -6,7 +6,7 @@ import React from 'react'; import { i18n } from '@osd/i18n'; import { EuiPopover, EuiButtonEmpty, EuiButtonIcon, EuiContextMenu } from '@elastic/eui'; -import { DataSourceOption } from '../data_source_selector/data_source_selector'; +import { DataSourceOption } from '../data_source_menu/types'; interface DataSourceViewProps { fullWidth: boolean; diff --git a/src/plugins/data_source_management/public/index.ts b/src/plugins/data_source_management/public/index.ts index 5e2e9b647396..8ffda8701f68 100644 --- a/src/plugins/data_source_management/public/index.ts +++ b/src/plugins/data_source_management/public/index.ts @@ -10,7 +10,15 @@ import { DataSourceManagementPlugin } from './plugin'; export function plugin() { return new DataSourceManagementPlugin(); } + export { DataSourceManagementPluginStart } from './types'; export { DataSourceSelector } from './components/data_source_selector'; export { DataSourceMenu } from './components/data_source_menu'; export { DataSourceManagementPlugin, DataSourceManagementPluginSetup } from './plugin'; +export { + DataSourceSelectableConfig, + DataSourceComponentType, + DataSourceAggregatedViewConfig, + DataSourceViewConfig, + DataSourceMenuProps, +} from './components/data_source_menu'; diff --git a/src/plugins/data_source_management/public/plugin.ts b/src/plugins/data_source_management/public/plugin.ts index 12cab715b205..3b23683a9036 100644 --- a/src/plugins/data_source_management/public/plugin.ts +++ b/src/plugins/data_source_management/public/plugin.ts @@ -20,7 +20,7 @@ import { import { noAuthCredentialAuthMethod, sigV4AuthMethod, usernamePasswordAuthMethod } from './types'; import { DataSourceSelectorProps } from './components/data_source_selector/data_source_selector'; import { createDataSourceMenu } from './components/data_source_menu/create_data_source_menu'; -import { DataSourceMenuProps } from './components/data_source_menu/data_source_menu'; +import { DataSourceMenuProps } from './components/data_source_menu'; export interface DataSourceManagementSetupDependencies { management: ManagementSetup; @@ -32,7 +32,7 @@ export interface DataSourceManagementPluginSetup { registerAuthenticationMethod: (authMethodValues: AuthenticationMethod) => void; ui: { DataSourceSelector: React.ComponentType; - DataSourceMenu: React.ComponentType; + getDataSourceMenu: () => React.ComponentType>; }; } @@ -103,7 +103,7 @@ export class DataSourceManagementPlugin registerAuthenticationMethod, ui: { DataSourceSelector: createDataSourceSelector(), - DataSourceMenu: createDataSourceMenu(), + getDataSourceMenu: () => createDataSourceMenu(), }, }; }