From c5be2d8d6235d654e639027c1e238b22b101a7d7 Mon Sep 17 00:00:00 2001 From: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com> Date: Tue, 24 Sep 2024 09:13:31 -0400 Subject: [PATCH] [Onboarding] Expose settings component in index_management to reuse in search_indices (#193492) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary This PR exposes `index_management` index details [settings component ](https://github.com/elastic/kibana/blob/main/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_settings.tsx#L16)during `index_management` plugin start. This would enable `search_indices` plugin to reuse. With this change, in new search index details page user can : - Can View settings - Update settings & save - Reset changes Screenshot 2024-09-19 at 5 48 28 PM **How to test:** 1. Enable searchIndices plugin in `kibana.dev.yml` as this plugin is behind Feature flag ``` xpack.searchIndices.enabled: true ``` 2. [Create new index](https://www.elastic.co/guide/en/elasticsearch/reference/current/indices-create-index.html) 3. Navigate to `/app/elasticsearch/indices/index_details/${indexName}/settings` ### Checklist - [x] Any text added follows [EUI's writing guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses sentence case text and includes [i18n support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md) - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] [Flaky Test Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was used on any tests changed --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Elastic Machine (cherry picked from commit d925391b90d2ed06c3e940d4112baaa634a9182a) --- .../src/types.ts | 7 ++- .../index_mapping_with_context.tsx | 14 ++--- .../index_mapping_with_context_types.tsx | 4 +- .../index_mappings_embeddable.tsx | 0 .../index_settings_embeddable.tsx | 29 +++++++++++ .../index_settings_with_context.tsx | 52 +++++++++++++++++++ .../index_settings_with_context_types.tsx | 22 ++++++++ .../plugins/index_management/public/plugin.ts | 41 ++++++++++++++- .../components/indices/details_page.tsx | 30 +++++++---- .../indices/details_page_settings.tsx | 24 +++++++++ .../components/indices/indices_router.tsx | 4 +- .../plugins/search_indices/public/routes.ts | 3 +- .../svl_search_index_detail_page.ts | 10 +++- .../test_suites/search/search_index_detail.ts | 8 ++- 14 files changed, 220 insertions(+), 28 deletions(-) rename x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/{ => with_context_components}/index_mapping_with_context.tsx (78%) rename x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/{ => with_context_components}/index_mapping_with_context_types.tsx (82%) rename x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/{ => with_context_components}/index_mappings_embeddable.tsx (100%) create mode 100644 x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_embeddable.tsx create mode 100644 x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context.tsx create mode 100644 x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context_types.tsx create mode 100644 x-pack/plugins/search_indices/public/components/indices/details_page_settings.tsx diff --git a/x-pack/packages/index-management/index_management_shared_types/src/types.ts b/x-pack/packages/index-management/index_management_shared_types/src/types.ts index 1413830f2931f..82dba5ed7e310 100644 --- a/x-pack/packages/index-management/index_management_shared_types/src/types.ts +++ b/x-pack/packages/index-management/index_management_shared_types/src/types.ts @@ -25,6 +25,9 @@ export interface IndexManagementPluginStart { getIndexMappingComponent: (deps: { history: ScopedHistory; }) => React.FC; + getIndexSettingsComponent: (deps: { + history: ScopedHistory; + }) => React.FC; } export interface Index { @@ -56,7 +59,9 @@ export interface IndexMappingProps { index?: Index; showAboutMappings?: boolean; } - +export interface IndexSettingProps { + indexName: string; +} export interface SendRequestResponse { data: D | null; error: E | null; diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mapping_with_context.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mapping_with_context.tsx similarity index 78% rename from x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mapping_with_context.tsx rename to x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mapping_with_context.tsx index 7aa0f07e8e492..a341b0fb67813 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mapping_with_context.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mapping_with_context.tsx @@ -6,14 +6,14 @@ */ import React from 'react'; -import { documentationService } from '../../../../services'; -import { UIM_APP_NAME } from '../../../../../../common/constants/ui_metric'; -import { httpService } from '../../../../services/http'; -import { notificationService } from '../../../../services/notification'; -import { UiMetricService } from '../../../../services/ui_metric'; -import { AppDependencies, IndexManagementAppContext } from '../../../..'; +import { documentationService } from '../../../../../services'; +import { UIM_APP_NAME } from '../../../../../../../common/constants/ui_metric'; +import { httpService } from '../../../../../services/http'; +import { notificationService } from '../../../../../services/notification'; +import { UiMetricService } from '../../../../../services/ui_metric'; +import { AppDependencies, IndexManagementAppContext } from '../../../../..'; import { IndexMappingWithContextProps } from './index_mapping_with_context_types'; -import { DetailsPageMappings } from './details_page_mappings'; +import { DetailsPageMappings } from '../details_page_mappings'; export const IndexMappingWithContext: React.FC = ({ core, diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mapping_with_context_types.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mapping_with_context_types.tsx similarity index 82% rename from x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mapping_with_context_types.tsx rename to x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mapping_with_context_types.tsx index 228f928f1ec74..86d16fc35e65b 100644 --- a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mapping_with_context_types.tsx +++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mapping_with_context_types.tsx @@ -7,8 +7,8 @@ import { CoreStart } from '@kbn/core/public'; import { IndexMappingProps } from '@kbn/index-management-shared-types'; -import { AppDependencies } from '../../../../app_context'; -import { ExtensionsService } from '../../../../../services/extensions_service'; +import { AppDependencies } from '../../../../../app_context'; +import { ExtensionsService } from '../../../../../../services/extensions_service'; export type IndexMappingWithContextProps = { core: CoreStart; diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mappings_embeddable.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mappings_embeddable.tsx similarity index 100% rename from x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/index_mappings_embeddable.tsx rename to x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_mappings_embeddable.tsx diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_embeddable.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_embeddable.tsx new file mode 100644 index 0000000000000..70e738dbd5bd7 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_embeddable.tsx @@ -0,0 +1,29 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +/* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { EuiLoadingSpinner } from '@elastic/eui'; +import { dynamic } from '@kbn/shared-ux-utility'; +import React, { Suspense, ComponentType } from 'react'; +import { IndexSettingWithContextProps } from './index_settings_with_context_types'; + +const IndexSettingsWithContext = dynamic>(() => + import('./index_settings_with_context').then((mod) => ({ default: mod.IndexSettingsWithContext })) +); + +export const IndexSettings: React.FC = (props) => { + return ( + }> + + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context.tsx new file mode 100644 index 0000000000000..d56c2c46e8ec4 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context.tsx @@ -0,0 +1,52 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ +import React from 'react'; +import { documentationService } from '../../../../../services'; +import { UIM_APP_NAME } from '../../../../../../../common/constants/ui_metric'; +import { httpService } from '../../../../../services/http'; +import { notificationService } from '../../../../../services/notification'; +import { UiMetricService } from '../../../../../services/ui_metric'; +import { AppDependencies, IndexManagementAppContext } from '../../../../..'; +import { DetailsPageSettings } from '../details_page_settings'; +import { IndexSettingWithContextProps } from './index_settings_with_context_types'; +import { setUiMetricService } from '../../../../../services/api'; + +export const IndexSettingsWithContext: React.FC = ({ + core, + dependencies, + indexName, + usageCollection, +}) => { + // this normally happens when the index management app is rendered + // but if components are embedded elsewhere that setup is skipped, so we have to do it here + // would do it in plugin.ts but that blows up the bundle size + // can't do it in an effect because then the first http call fails as the instantiation happens after first render + if (!httpService.httpClient) { + httpService.setup(core.http); + notificationService.setup(core.notifications); + } + documentationService.setup(core.docLinks); + + const uiMetricService = new UiMetricService(UIM_APP_NAME); + setUiMetricService(uiMetricService); + uiMetricService.setup(usageCollection); + + const newDependencies: AppDependencies = { + ...dependencies, + services: { + ...(dependencies.services || {}), + httpService, + notificationService, + uiMetricService, + }, + }; + return ( + + + + ); +}; diff --git a/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context_types.tsx b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context_types.tsx new file mode 100644 index 0000000000000..39600edcc1306 --- /dev/null +++ b/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/with_context_components/index_settings_with_context_types.tsx @@ -0,0 +1,22 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import { CoreStart } from '@kbn/core/public'; +import type { IndexSettingProps } from '@kbn/index-management-shared-types'; +import { UsageCollectionSetup } from '@kbn/usage-collection-plugin/public'; +import { AppDependencies } from '../../../../../app_context'; +import { ExtensionsService } from '../../../../../../services/extensions_service'; + +export type IndexSettingWithContextProps = { + core: CoreStart; + // omitting services here to constitute them inside the component + // this helps reduce bundle size significantly + dependencies: Omit & { + services: { extensionsService: ExtensionsService }; + }; + usageCollection: UsageCollectionSetup; +} & IndexSettingProps; diff --git a/x-pack/plugins/index_management/public/plugin.ts b/x-pack/plugins/index_management/public/plugin.ts index 49693bb0d9aa9..347dc7ada24f6 100644 --- a/x-pack/plugins/index_management/public/plugin.ts +++ b/x-pack/plugins/index_management/public/plugin.ts @@ -26,8 +26,9 @@ import { ClientConfigType, SetupDependencies, StartDependencies } from './types' // avoid import from index files in plugin.ts, use specific import paths import { PLUGIN } from '../common/constants/plugin'; -import { IndexMapping } from './application/sections/home/index_list/details_page/index_mappings_embeddable'; +import { IndexMapping } from './application/sections/home/index_list/details_page/with_context_components/index_mappings_embeddable'; import { PublicApiService } from './services/public_api_service'; +import { IndexSettings } from './application/sections/home/index_list/details_page/with_context_components/index_settings_embeddable'; export class IndexMgmtUIPlugin implements @@ -159,6 +160,44 @@ export class IndexMgmtUIPlugin return IndexMapping({ dependencies: appDependencies, core: coreStart, ...props }); }; }, + getIndexSettingsComponent: (deps: { history: ScopedHistory }) => { + const { docLinks, fatalErrors, application, uiSettings, executionContext, settings, http } = + coreStart; + const { url } = share; + const appDependencies = { + core: { + fatalErrors, + getUrlForApp: application.getUrlForApp, + executionContext, + application, + http, + }, + plugins: { + usageCollection, + isFleetEnabled: Boolean(fleet), + share, + cloud, + console, + ml, + licensing, + }, + services: { + extensionsService: this.extensionsService, + }, + config: this.config, + history: deps.history, + setBreadcrumbs: undefined as any, // breadcrumbService.setBreadcrumbs, + uiSettings, + settings, + url, + docLinks, + kibanaVersion: this.kibanaVersion, + theme$: coreStart.theme.theme$, + }; + return (props: any) => { + return IndexSettings({ dependencies: appDependencies, core: coreStart, ...props }); + }; + }, }; } public stop() {} diff --git a/x-pack/plugins/search_indices/public/components/indices/details_page.tsx b/x-pack/plugins/search_indices/public/components/indices/details_page.tsx index bca02f1ef1264..46e595a3d2207 100644 --- a/x-pack/plugins/search_indices/public/components/indices/details_page.tsx +++ b/x-pack/plugins/search_indices/public/components/indices/details_page.tsx @@ -34,8 +34,9 @@ import { useIndexMapping } from '../../hooks/api/use_index_mappings'; import { IndexDocuments } from '../index_documents/index_documents'; import { DeleteIndexModal } from './delete_index_modal'; import { IndexloadingError } from './details_page_loading_error'; -import { SearchIndicesDetailsMappingsTabs } from '../../routes'; +import { SearchIndexDetailsTabs } from '../../routes'; import { SearchIndexDetailsMappings } from './details_page_mappings'; +import { SearchIndexDetailsSettings } from './details_page_settings'; export const SearchIndexDetailsPage = () => { const indexName = decodeURIComponent(useParams<{ indexName: string }>().indexName); @@ -49,33 +50,40 @@ export const SearchIndexDetailsPage = () => { isInitialLoading: isMappingsInitialLoading, } = useIndexMapping(indexName); - const SearchIndexDetailsTabs: EuiTabbedContentTab[] = useMemo(() => { + const detailsPageTabs: EuiTabbedContentTab[] = useMemo(() => { return [ { - id: SearchIndicesDetailsMappingsTabs.DATA, + id: SearchIndexDetailsTabs.DATA, name: i18n.translate('xpack.searchIndices.documentsTabLabel', { defaultMessage: 'Data', }), content: , - 'data-test-subj': `${SearchIndicesDetailsMappingsTabs.DATA}Tab`, + 'data-test-subj': `${SearchIndexDetailsTabs.DATA}Tab`, }, { - id: SearchIndicesDetailsMappingsTabs.MAPPINGS, + id: SearchIndexDetailsTabs.MAPPINGS, name: i18n.translate('xpack.searchIndices.mappingsTabLabel', { defaultMessage: 'Mappings', }), content: , - 'data-test-subj': `${SearchIndicesDetailsMappingsTabs.MAPPINGS}Tab`, + 'data-test-subj': `${SearchIndexDetailsTabs.MAPPINGS}Tab`, + }, + { + id: SearchIndexDetailsTabs.SETTINGS, + name: i18n.translate('xpack.searchIndices.settingsTabLabel', { + defaultMessage: 'Settings', + }), + content: , + 'data-test-subj': `${SearchIndexDetailsTabs.SETTINGS}Tab`, }, ]; }, [index, indexName]); - - const [selectedTab, setSelectedTab] = useState(SearchIndexDetailsTabs[0]); + const [selectedTab, setSelectedTab] = useState(detailsPageTabs[0]); useEffect(() => { - const newTab = SearchIndexDetailsTabs.find((tab) => tab.id === tabId); + const newTab = detailsPageTabs.find((tab) => tab.id === tabId); if (newTab) setSelectedTab(newTab); - }, [SearchIndexDetailsTabs, tabId]); + }, [detailsPageTabs, tabId]); const handleTabClick = useCallback( (tab) => { @@ -215,7 +223,7 @@ export const SearchIndexDetailsPage = () => { diff --git a/x-pack/plugins/search_indices/public/components/indices/details_page_settings.tsx b/x-pack/plugins/search_indices/public/components/indices/details_page_settings.tsx new file mode 100644 index 0000000000000..d70591c065b13 --- /dev/null +++ b/x-pack/plugins/search_indices/public/components/indices/details_page_settings.tsx @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0; you may not use this file except in compliance with the Elastic License + * 2.0. + */ + +import React from 'react'; +import { useMemo } from 'react'; +import { useKibana } from '../../hooks/use_kibana'; + +interface SearchIndexDetailsSettingsProps { + indexName: string; +} +export const SearchIndexDetailsSettings = ({ indexName }: SearchIndexDetailsSettingsProps) => { + const { indexManagement, history } = useKibana().services; + + const IndexSettingsComponent = useMemo( + () => indexManagement.getIndexSettingsComponent({ history }), + [indexManagement, history] + ); + + return ; +}; diff --git a/x-pack/plugins/search_indices/public/components/indices/indices_router.tsx b/x-pack/plugins/search_indices/public/components/indices/indices_router.tsx index 73aec33f80b5c..f6c931d73a99e 100644 --- a/x-pack/plugins/search_indices/public/components/indices/indices_router.tsx +++ b/x-pack/plugins/search_indices/public/components/indices/indices_router.tsx @@ -9,7 +9,7 @@ import { Route, Router, Routes } from '@kbn/shared-ux-router'; import { Redirect } from 'react-router-dom'; import { useKibana } from '../../hooks/use_kibana'; import { - SearchIndicesDetailsMappingsTabs, + SearchIndexDetailsTabs, SEARCH_INDICES_DETAILS_PATH, SEARCH_INDICES_DETAILS_TABS_PATH, } from '../../routes'; @@ -25,7 +25,7 @@ export const SearchIndicesRouter: React.FC = () => { diff --git a/x-pack/plugins/search_indices/public/routes.ts b/x-pack/plugins/search_indices/public/routes.ts index 3e347881d1219..9afa046385576 100644 --- a/x-pack/plugins/search_indices/public/routes.ts +++ b/x-pack/plugins/search_indices/public/routes.ts @@ -8,7 +8,8 @@ export const ROOT_PATH = '/'; export const SEARCH_INDICES_DETAILS_PATH = `${ROOT_PATH}index_details/:indexName`; export const SEARCH_INDICES_DETAILS_TABS_PATH = `${SEARCH_INDICES_DETAILS_PATH}/:tabId`; -export enum SearchIndicesDetailsMappingsTabs { +export enum SearchIndexDetailsTabs { DATA = 'data', MAPPINGS = 'mappings', + SETTINGS = 'settings', } diff --git a/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts b/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts index 8ffbfd2bcb8c1..f19a713eece5b 100644 --- a/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts +++ b/x-pack/test_serverless/functional/page_objects/svl_search_index_detail_page.ts @@ -115,11 +115,17 @@ export function SvlSearchIndexDetailPageProvider({ getService }: FtrProviderCont async expectShouldDefaultToDataTab() { expect(await browser.getCurrentUrl()).contain('/data'); }, - async withDataChangeTabs(tab: 'dataTab' | 'mappingsTab') { + async withDataChangeTabs(tab: 'dataTab' | 'mappingsTab' | 'settingsTab') { await testSubjects.click(tab); }, - async expectUrlShouldChangeTo(tab: 'data' | 'mappings') { + async expectUrlShouldChangeTo(tab: 'data' | 'mappings' | 'settings') { expect(await browser.getCurrentUrl()).contain(`/${tab}`); }, + async expectMappingsComponentIsVisible() { + await testSubjects.existOrFail('indexDetailsMappingsToggleViewButton', { timeout: 2000 }); + }, + async expectSettingsComponentIsVisible() { + await testSubjects.existOrFail('indexDetailsSettingsEditModeSwitch', { timeout: 2000 }); + }, }; } diff --git a/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts b/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts index 7f40ec9127c6c..a4d58d32c751b 100644 --- a/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts +++ b/x-pack/test_serverless/functional/test_suites/search/search_index_detail.ts @@ -91,9 +91,15 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) { await pageObjects.svlSearchIndexDetailPage.expectWithDataTabsExists(); await pageObjects.svlSearchIndexDetailPage.expectShouldDefaultToDataTab(); }); - it('should be able to change tabs', async () => { + it('should be able to change tabs to mappings and mappings is shown', async () => { await pageObjects.svlSearchIndexDetailPage.withDataChangeTabs('mappingsTab'); await pageObjects.svlSearchIndexDetailPage.expectUrlShouldChangeTo('mappings'); + await pageObjects.svlSearchIndexDetailPage.expectMappingsComponentIsVisible(); + }); + it('should be able to change tabs to settings and settings is shown', async () => { + await pageObjects.svlSearchIndexDetailPage.withDataChangeTabs('settingsTab'); + await pageObjects.svlSearchIndexDetailPage.expectUrlShouldChangeTo('settings'); + await pageObjects.svlSearchIndexDetailPage.expectSettingsComponentIsVisible(); }); });