diff --git a/opensearch_dashboards.json b/opensearch_dashboards.json index 36fb434b..f2af009b 100644 --- a/opensearch_dashboards.json +++ b/opensearch_dashboards.json @@ -7,6 +7,6 @@ "requiredPlugins": [ "navigation" ], - "optionalPlugins": ["dataSource","dataSourceManagement"], + "optionalPlugins": ["dataSource","dataSourceManagement","contentManagement"], "supportedOSDataSourceVersions": ">=2.8.0" } \ No newline at end of file diff --git a/public/components/service_card/__test__/compare_query_card.test.tsx b/public/components/service_card/__test__/compare_query_card.test.tsx new file mode 100644 index 00000000..167d16ec --- /dev/null +++ b/public/components/service_card/__test__/compare_query_card.test.tsx @@ -0,0 +1,49 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import { registerCompareQueryCard } from '../compare_query_card'; + +describe('CompareQueryCard', () => { + const registerContentProviderMock = jest.fn(); + + const contentManagement = { + registerContentProvider: registerContentProviderMock, + updatePageSection: jest.fn(), + renderPage: jest.fn(), + }; + + it('registerCompareQueryCard', () => { + registerCompareQueryCard(contentManagement, {}); + const call = registerContentProviderMock.mock.calls[0]; + expect(call[0].getTargetArea()).toEqual('search_overview/config_evaluate_search'); + expect(call[0].getContent()).toMatchInlineSnapshot(` + Object { + "cardProps": Object { + "children": + + + Compare search results + + + , + "layout": "horizontal", + }, + "description": "The search comparison tool lets you compare the results of two different DSL queries applied to the same user query.", + "getIcon": [Function], + "id": "compare_query", + "kind": "card", + "order": 20, + "title": "Compare queries", + } + `); + }); +}); diff --git a/public/components/service_card/compare_query_card.tsx b/public/components/service_card/compare_query_card.tsx new file mode 100644 index 00000000..f8f4f571 --- /dev/null +++ b/public/components/service_card/compare_query_card.tsx @@ -0,0 +1,60 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +import React from 'react'; +import { EuiButton, EuiFlexGroup, EuiFlexItem, EuiIcon } from '@elastic/eui'; +import { i18n } from '@osd/i18n'; +import { PLUGIN_ID } from '../../../common'; +import { ContentManagementPluginStart } from '../../../../../src/plugins/content_management/public'; +import { CoreStart } from '../../../../../src/core/public'; +import compareQueriesIcon from './icon.svg'; + +export const registerCompareQueryCard = ( + contentManagement: ContentManagementPluginStart, + core: CoreStart +) => { + const icon = ( + + ); + + const footer = ( + + + { + core.application.navigateToApp(PLUGIN_ID); + }} + > + {i18n.translate('searchRelevanceDashboards.compareQueryCard.footer', { + defaultMessage: 'Compare search results', + })} + + + + ); + + contentManagement.registerContentProvider({ + id: 'compare_query_card', + getContent: () => ({ + id: 'compare_query', + kind: 'card', + order: 20, + title: i18n.translate('searchRelevanceDashboards.compareQueryCard.title', { + defaultMessage: 'Compare queries', + }), + description: i18n.translate('searchRelevanceDashboards.compareQueryCard.description', { + defaultMessage: + 'The search comparison tool lets you compare the results of two different DSL queries applied to the same user query.', + }), + getIcon: () => icon, + cardProps: { + children: footer, + layout: 'horizontal', + }, + }), + getTargetArea: () => 'search_overview/config_evaluate_search', + }); +}; diff --git a/public/components/service_card/icon.svg b/public/components/service_card/icon.svg new file mode 100644 index 00000000..3ed577eb --- /dev/null +++ b/public/components/service_card/icon.svg @@ -0,0 +1,209 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/public/plugin.ts b/public/plugin.ts index fe628029..72c1a2ad 100644 --- a/public/plugin.ts +++ b/public/plugin.ts @@ -5,7 +5,10 @@ import { i18n } from '@osd/i18n'; import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '../../../src/core/public'; -import { DataSourcePluginSetup, DataSourcePluginStart } from '../../../src/plugins/data_source/public'; +import { + DataSourcePluginSetup, + DataSourcePluginStart, +} from '../../../src/plugins/data_source/public'; import { DataSourceManagementPluginSetup } from '../../../src/plugins/data_source_management/public'; import { PLUGIN_ID, PLUGIN_NAME } from '../common'; import { @@ -14,19 +17,25 @@ import { SearchRelevancePluginStart, } from './types'; import { registerAllPluginNavGroups } from './plugin_nav'; +import { ContentManagementPluginStart } from '../../../src/plugins/content_management/public'; +import { registerCompareQueryCard } from './components/service_card/compare_query_card'; export interface SearchRelevancePluginSetupDependencies { dataSource: DataSourcePluginSetup; - dataSourceManagement: DataSourceManagementPluginSetup + dataSourceManagement: DataSourceManagementPluginSetup; } export interface SearchRelevanceStartDependencies { dataSource: DataSourcePluginStart; + contentManagement?: ContentManagementPluginStart; } export class SearchRelevancePlugin implements Plugin { - public setup(core: CoreSetup, {dataSource, dataSourceManagement} : SearchRelevancePluginSetupDependencies): SearchRelevancePluginSetup { + public setup( + core: CoreSetup, + { dataSource, dataSourceManagement }: SearchRelevancePluginSetupDependencies + ): SearchRelevancePluginSetup { // Register an application into the side navigation menu core.application.register({ id: PLUGIN_ID, @@ -42,7 +51,12 @@ export class SearchRelevancePlugin // Get start services as specified in opensearch_dashboards.json const [coreStart, depsStart] = await core.getStartServices(); // Render the application - return renderApp(coreStart, depsStart as AppPluginStartDependencies, params, dataSourceManagement); + return renderApp( + coreStart, + depsStart as AppPluginStartDependencies, + params, + dataSourceManagement + ); }, }); registerAllPluginNavGroups(core); @@ -59,7 +73,13 @@ export class SearchRelevancePlugin }; } - public start(core: CoreStart, {dataSource}: SearchRelevanceStartDependencies): SearchRelevancePluginStart { + public start( + core: CoreStart, + { dataSource, contentManagement }: SearchRelevanceStartDependencies + ): SearchRelevancePluginStart { + if (contentManagement) { + registerCompareQueryCard(contentManagement, core); + } return {}; } diff --git a/test/__mocks__/fileMock.js b/test/__mocks__/fileMock.js new file mode 100644 index 00000000..92cb5884 --- /dev/null +++ b/test/__mocks__/fileMock.js @@ -0,0 +1,7 @@ +/* + * Copyright OpenSearch Contributors + * SPDX-License-Identifier: Apache-2.0 + */ + +// mock import svg file +module.exports = 'file-stub';