From 9219222d2444b54af41a93c033b52ed9ad874039 Mon Sep 17 00:00:00 2001 From: Wei Wang <93847013+weiwang118@users.noreply.github.com> Date: Fri, 6 Sep 2024 16:18:13 -0700 Subject: [PATCH] display direct query connections of local cluster in data sources page (#8059) (#8068) Signed-off-by: Wei Wang (cherry picked from commit e62142256484ca56382ca46b6394ed874b5a10e9) --- .../create_button/create_button.test.tsx | 4 +- .../create_button/create_button.tsx | 7 +- .../data_source_home_panel.test.tsx.snap | 2 + .../data_source_page_header.test.tsx.snap | 2 +- .../data_source_home_panel.test.tsx | 4 +- .../data_source_home_panel.tsx | 96 ++++++++++--------- .../data_source_page_header.test.tsx | 5 +- .../data_source_page_header.tsx | 21 ++-- .../data_source_table.test.tsx.snap | 16 ++-- .../data_source_table/data_source_table.tsx | 4 +- ...query_data_connections_table.test.tsx.snap | 74 +++++++------- ...rect_query_data_connections_table.test.tsx | 3 + ...ge_direct_query_data_connections_table.tsx | 80 +++++++++++++--- .../public/components/utils.ts | 46 ++++++++- .../public/constants.ts | 1 + 15 files changed, 245 insertions(+), 120 deletions(-) diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx index f54aef129df3..4b9cf66e513f 100644 --- a/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx +++ b/src/plugins/data_source_management/public/components/create_button/create_button.test.tsx @@ -17,7 +17,9 @@ describe('CreateButton', () => { let component: ShallowWrapper, React.Component<{}, {}, any>>; beforeEach(() => { - component = shallow(); + component = shallow( + + ); }); it('should render normally', () => { diff --git a/src/plugins/data_source_management/public/components/create_button/create_button.tsx b/src/plugins/data_source_management/public/components/create_button/create_button.tsx index 303379a0c890..f7b65401ae65 100644 --- a/src/plugins/data_source_management/public/components/create_button/create_button.tsx +++ b/src/plugins/data_source_management/public/components/create_button/create_button.tsx @@ -13,9 +13,10 @@ interface Props { history: History; isEmptyState?: boolean; dataTestSubj: string; + featureFlagStatus: boolean; } -export const CreateButton = ({ history, isEmptyState, dataTestSubj }: Props) => { +export const CreateButton = ({ history, isEmptyState, dataTestSubj, featureFlagStatus }: Props) => { return ( > ); diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap index cda3acc64031..d517ae9bc78b 100644 --- a/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_home_panel/__snapshots__/data_source_home_panel.test.tsx.snap @@ -15,6 +15,7 @@ exports[`DataSourceHomePanel renders correctly 1`] = ` grow={false} >

diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx index 04704ffa913e..d9040f7bf8af 100644 --- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx +++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.test.tsx @@ -100,9 +100,9 @@ describe('DataSourceHomePanel', () => { expect(wrapper.find(ManageDirectQueryDataConnectionsTableWithRouter)).toHaveLength(1); }); - test('does not render OpenSearch connections tab when featureFlagStatus is false', () => { + test('does not render any tab when featureFlagStatus is false', () => { const wrapper = shallowComponent({ ...defaultProps, featureFlagStatus: false }); - expect(wrapper.find(EuiTab)).toHaveLength(1); + expect(wrapper.find(EuiTab)).toHaveLength(0); }); test('calls history.push when CreateButton is clicked', () => { diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx index 85e83f0a35b4..1730c2f79751 100644 --- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx +++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_home_panel.tsx @@ -38,17 +38,9 @@ export const DataSourceHomePanel: React.FC = ({ useNewUX, ...props }) => { - const { - setBreadcrumbs, - notifications, - http, - savedObjects, - uiSettings, - application, - workspaces, - docLinks, - navigation, - } = useOpenSearchDashboards().services; + const { setBreadcrumbs, application, workspaces, docLinks, navigation } = useOpenSearchDashboards< + DataSourceManagementContext + >().services; const defaultTabId = featureFlagStatus ? 'manageOpensearchDataSources' @@ -69,7 +61,7 @@ export const DataSourceHomePanel: React.FC = ({ const createDataSourceButton = [ { id: 'Create data source', - label: 'Create data source connection', + label: featureFlagStatus ? 'Create data source connection' : 'Create direct query connection', testId: 'createDataSourceButton', run: () => props.history.push('/create'), fill: true, @@ -110,6 +102,25 @@ export const DataSourceHomePanel: React.FC = ({ }, ]; + const description = { + description: i18n.translate('dataSourcesManagement.dataSourcesTable.description', { + defaultMessage: featureFlagStatus + ? 'Create and manage data source connections.' + : 'Manage direct query data source connections.', + }), + links: [ + { + href: docLinks.links.opensearchDashboards.dataSource.guide, + controlType: 'link', + target: '_blank', + className: 'external-link-inline-block', + label: i18n.translate('dataSourcesManagement.dataSourcesTable.documentation', { + defaultMessage: 'Learn more', + }), + }, + ], + } as TopNavControlDescriptionData; + const renderTabs = () => { return tabs.map((tab) => ( = ({ {useNewUX && ( <> - + {featureFlagStatus && ( + + )} {canManageDataSource && ( = ({ } ), } - : ({ - description: i18n.translate( - 'dataSourcesManagement.dataSourcesTable.description', - { - defaultMessage: 'Create and manage data source connections.', - } - ), - links: [ - { - href: docLinks.links.opensearchDashboards.dataSource.guide, - controlType: 'link', - target: '_blank', - className: 'external-link-inline-block', - label: i18n.translate( - 'dataSourcesManagement.dataSourcesTable.documentation', - { - defaultMessage: 'Learn more', - } - ), - }, - ], - } as TopNavControlDescriptionData), + : description, ]} /> @@ -184,28 +176,40 @@ export const DataSourceHomePanel: React.FC = ({ - + {canManageDataSource ? ( - + ) : null} - - - {renderTabs()} - + {featureFlagStatus && ( + + + {renderTabs()} + + )} )} {selectedTabId === 'manageOpensearchDataSources' && featureFlagStatus && ( )} - {selectedTabId === 'manageDirectQueryDataSources' && featureFlagStatus && ( - + {(!featureFlagStatus || selectedTabId === 'manageDirectQueryDataSources') && ( + )} diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.test.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.test.tsx index ca9d959e01e9..18db39cd0c04 100644 --- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.test.tsx +++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.test.tsx @@ -16,7 +16,8 @@ describe('DataSourceHeader', () => { match: {} as any, }; - const shallowComponent = (props = defaultProps) => shallow(); + const shallowComponent = (props = defaultProps) => + shallow(); test('renders correctly', () => { const wrapper = shallowComponent(); @@ -31,7 +32,7 @@ describe('DataSourceHeader', () => { const descriptionMessage = wrapper.find(EuiText).at(1).find(FormattedMessage); expect(descriptionMessage.prop('id')).toEqual( - 'dataSourcesManagement.dataSourcesTable.description' + 'dataSourcesManagement.dataSourcesTable.mdsEnabled.description' ); expect(descriptionMessage.prop('defaultMessage')).toEqual( 'Create and manage data source connections.' diff --git a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.tsx b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.tsx index c69147dff090..eb804a745d69 100644 --- a/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.tsx +++ b/src/plugins/data_source_management/public/components/data_source_home_panel/data_source_page_header.tsx @@ -8,9 +8,11 @@ import React from 'react'; import { FormattedMessage } from '@osd/i18n/react'; import { RouteComponentProps } from 'react-router-dom'; -type DataSourceHeaderProps = RouteComponentProps; +interface DataSourceHeaderProps extends RouteComponentProps { + featureFlagStatus: boolean; +} -export const DataSourceHeader: React.FC = () => { +export const DataSourceHeader: React.FC = ({ featureFlagStatus }) => { return ( @@ -25,10 +27,17 @@ export const DataSourceHeader: React.FC = () => {

- + {featureFlagStatus ? ( + + ) : ( + + )}

diff --git a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap index 5809054f8293..b4757bc469ac 100644 --- a/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap +++ b/src/plugins/data_source_management/public/components/data_source_table/__snapshots__/data_source_table.test.tsx.snap @@ -155,12 +155,12 @@ exports[`DataSourceTable should get datasources failed should render empty table className="euiButton__text" > - Create data source connection + Create direct query connection @@ -1452,11 +1452,12 @@ exports[`DataSourceTable should get datasources successful should render normall className="euiTableCellContent euiTableCellContent--overflowingContent" >