From fb18ddb9786bb40cd712323caacfea3053d1ae71 Mon Sep 17 00:00:00 2001 From: Pierre Gayvallet Date: Thu, 23 Dec 2021 10:20:17 +0100 Subject: [PATCH] Use KibanaThemeProvider for savedObjectTagging plugin (#121827) * Use KibanaThemeProvider for savedObjectTagging plugin * fix ui creation dependencies --- .../assign_flyout/open_assign_flyout.tsx | 7 +++-- .../components/edition_modal/open_modal.tsx | 13 +++++---- .../public/management/actions/assign.ts | 5 +++- .../public/management/actions/edit.ts | 6 +++-- .../public/management/actions/index.ts | 6 ++--- .../management/bulk_actions/bulk_assign.ts | 6 +++-- .../public/management/bulk_actions/index.ts | 3 ++- .../public/management/mount_section.tsx | 27 ++++++++++--------- .../public/management/tag_management_page.tsx | 6 ++--- .../saved_objects_tagging/public/plugin.ts | 3 ++- .../public/ui_api/components.ts | 6 +++-- .../public/ui_api/index.ts | 6 +++-- 12 files changed, 58 insertions(+), 36 deletions(-) diff --git a/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx b/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx index 9d8628a5f32e7..641bf7e22165b 100644 --- a/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/components/assign_flyout/open_assign_flyout.tsx @@ -7,13 +7,14 @@ import React from 'react'; import { EuiDelayRender, EuiLoadingSpinner } from '@elastic/eui'; -import { NotificationsStart, OverlayStart, OverlayRef } from 'src/core/public'; +import { NotificationsStart, OverlayStart, ThemeServiceStart, OverlayRef } from 'src/core/public'; import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'; import { ITagAssignmentService, ITagsCache } from '../../services'; export interface GetAssignFlyoutOpenerOptions { overlays: OverlayStart; notifications: NotificationsStart; + theme: ThemeServiceStart; tagCache: ITagsCache; assignmentService: ITagAssignmentService; assignableTypes: string[]; @@ -42,6 +43,7 @@ export const getAssignFlyoutOpener = ({ overlays, notifications, + theme, tagCache, assignmentService, assignableTypes, @@ -58,7 +60,8 @@ export const getAssignFlyoutOpener = assignmentService={assignmentService} onClose={() => flyout.close()} /> - + , + { theme$: theme.theme$ } ), { size: 'm', maxWidth: 600 } ); diff --git a/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx b/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx index 8efc527d06b0e..a4085f75d6ce5 100644 --- a/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/components/edition_modal/open_modal.tsx @@ -7,13 +7,14 @@ import React from 'react'; import { EuiDelayRender, EuiLoadingSpinner } from '@elastic/eui'; -import { OverlayStart, OverlayRef } from 'src/core/public'; +import { OverlayStart, OverlayRef, ThemeServiceStart } from 'src/core/public'; import { toMountPoint } from '../../../../../../src/plugins/kibana_react/public'; import { Tag, TagAttributes } from '../../../common/types'; import { ITagInternalClient } from '../../services'; interface GetModalOpenerOptions { overlays: OverlayStart; + theme: ThemeServiceStart; tagClient: ITagInternalClient; } @@ -39,7 +40,7 @@ const LazyEditTagModal = React.lazy(() => ); export const getCreateModalOpener = - ({ overlays, tagClient }: GetModalOpenerOptions): CreateModalOpener => + ({ overlays, theme, tagClient }: GetModalOpenerOptions): CreateModalOpener => async ({ onCreate, defaultValues }: OpenCreateModalOptions) => { const modal = overlays.openModal( toMountPoint( @@ -55,7 +56,8 @@ export const getCreateModalOpener = }} tagClient={tagClient} /> - + , + { theme$: theme.theme$ } ) ); return modal; @@ -67,7 +69,7 @@ interface OpenEditModalOptions { } export const getEditModalOpener = - ({ overlays, tagClient }: GetModalOpenerOptions) => + ({ overlays, theme, tagClient }: GetModalOpenerOptions) => async ({ tagId, onUpdate }: OpenEditModalOptions) => { const tag = await tagClient.get(tagId); @@ -85,7 +87,8 @@ export const getEditModalOpener = }} tagClient={tagClient} /> - + , + { theme$: theme.theme$ } ) ); diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts index 838749c51dc4f..c4e4706353045 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/assign.ts @@ -8,7 +8,7 @@ import { Observable, from } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; import { i18n } from '@kbn/i18n'; -import { NotificationsStart, OverlayStart } from 'kibana/public'; +import { NotificationsStart, OverlayStart, ThemeServiceStart } from 'kibana/public'; import { TagWithRelations } from '../../../common'; import { ITagsCache } from '../../services/tags'; import { getAssignFlyoutOpener } from '../../components/assign_flyout'; @@ -18,6 +18,7 @@ import { TagAction } from './types'; interface GetAssignActionOptions { overlays: OverlayStart; notifications: NotificationsStart; + theme: ThemeServiceStart; tagCache: ITagsCache; assignmentService: ITagAssignmentService; assignableTypes: string[]; @@ -28,6 +29,7 @@ interface GetAssignActionOptions { export const getAssignAction = ({ notifications, overlays, + theme, assignableTypes, assignmentService, tagCache, @@ -37,6 +39,7 @@ export const getAssignAction = ({ const openFlyout = getAssignFlyoutOpener({ overlays, notifications, + theme, tagCache, assignmentService, assignableTypes, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts index 3863ea5c13ed4..f970a15806972 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/edit.ts @@ -6,7 +6,7 @@ */ import { i18n } from '@kbn/i18n'; -import { NotificationsStart, OverlayStart } from 'kibana/public'; +import { NotificationsStart, OverlayStart, ThemeServiceStart } from 'kibana/public'; import { TagWithRelations } from '../../../common'; import { ITagInternalClient } from '../../services/tags'; import { getEditModalOpener } from '../../components/edition_modal'; @@ -14,6 +14,7 @@ import { TagAction } from './types'; interface GetEditActionOptions { overlays: OverlayStart; + theme: ThemeServiceStart; notifications: NotificationsStart; tagClient: ITagInternalClient; fetchTags: () => Promise; @@ -21,11 +22,12 @@ interface GetEditActionOptions { export const getEditAction = ({ notifications, + theme, overlays, tagClient, fetchTags, }: GetEditActionOptions): TagAction => { - const editModalOpener = getEditModalOpener({ overlays, tagClient }); + const editModalOpener = getEditModalOpener({ overlays, theme, tagClient }); return { id: 'edit', name: ({ name }) => diff --git a/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts b/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts index 5503cec4af9dc..f4eb3b2ab6fc0 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/actions/index.ts @@ -29,12 +29,11 @@ interface GetActionsOptions { } export const getTableActions = ({ - core: { notifications, overlays }, + core: { notifications, overlays, theme }, capabilities, tagClient, tagCache, assignmentService, - setLoading, assignableTypes, fetchTags, canceled$, @@ -42,7 +41,7 @@ export const getTableActions = ({ const actions: TagAction[] = []; if (capabilities.edit) { - actions.push(getEditAction({ notifications, overlays, tagClient, fetchTags })); + actions.push(getEditAction({ notifications, overlays, theme, tagClient, fetchTags })); } if (capabilities.assign && assignableTypes.length > 0) { @@ -54,6 +53,7 @@ export const getTableActions = ({ fetchTags, notifications, overlays, + theme, canceled$, }) ); diff --git a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts index a0c5913c4957b..8bb81fe017237 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/bulk_assign.ts @@ -7,7 +7,7 @@ import { from } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { OverlayStart, NotificationsStart } from 'src/core/public'; +import { OverlayStart, NotificationsStart, ThemeServiceStart } from 'src/core/public'; import { i18n } from '@kbn/i18n'; import { ITagsCache, ITagAssignmentService } from '../../services'; import { TagBulkAction } from '../types'; @@ -16,6 +16,7 @@ import { getAssignFlyoutOpener } from '../../components/assign_flyout'; interface GetBulkAssignActionOptions { overlays: OverlayStart; notifications: NotificationsStart; + theme: ThemeServiceStart; tagCache: ITagsCache; assignmentService: ITagAssignmentService; assignableTypes: string[]; @@ -25,14 +26,15 @@ interface GetBulkAssignActionOptions { export const getBulkAssignAction = ({ overlays, notifications, + theme, tagCache, assignmentService, - setLoading, assignableTypes, }: GetBulkAssignActionOptions): TagBulkAction => { const openFlyout = getAssignFlyoutOpener({ overlays, notifications, + theme, tagCache, assignmentService, assignableTypes, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts index 140931d4a10b1..be580239cbf99 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts +++ b/x-pack/plugins/saved_objects_tagging/public/management/bulk_actions/index.ts @@ -25,7 +25,7 @@ interface GetBulkActionOptions { } export const getBulkActions = ({ - core: { notifications, overlays }, + core: { notifications, overlays, theme }, capabilities, tagClient, tagCache, @@ -41,6 +41,7 @@ export const getBulkActions = ({ getBulkAssignAction({ notifications, overlays, + theme, tagCache, assignmentService, assignableTypes, diff --git a/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx b/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx index 9c36f991e8c8e..8c9fad8c31726 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/management/mount_section.tsx @@ -9,6 +9,7 @@ import React, { FC } from 'react'; import ReactDOM from 'react-dom'; import { I18nProvider } from '@kbn/i18n-react'; import { CoreSetup, ApplicationStart } from 'src/core/public'; +import { KibanaThemeProvider } from '../../../../../src/plugins/kibana_react/public'; import { ManagementAppMountParams } from '../../../../../src/plugins/management/public'; import { getTagsCapabilities } from '../../common'; import { SavedObjectTaggingPluginStart } from '../types'; @@ -44,24 +45,26 @@ export const mountSection = async ({ title, }: MountSectionParams) => { const [coreStart] = await core.getStartServices(); - const { element, setBreadcrumbs } = mountParams; + const { element, setBreadcrumbs, theme$ } = mountParams; const capabilities = getTagsCapabilities(coreStart.application.capabilities); const assignableTypes = await assignmentService.getAssignableTypes(); coreStart.chrome.docTitle.change(title); ReactDOM.render( - - - + + + + + , element ); diff --git a/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx b/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx index bbc018f8e12b0..9fdcbb81907c2 100644 --- a/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx +++ b/x-pack/plugins/saved_objects_tagging/public/management/tag_management_page.tsx @@ -40,7 +40,7 @@ export const TagManagementPage: FC = ({ capabilities, assignableTypes, }) => { - const { overlays, notifications, application, http } = core; + const { overlays, notifications, application, http, theme } = core; const [loading, setLoading] = useState(false); const [allTags, setAllTags] = useState([]); const [selectedTags, setSelectedTags] = useState([]); @@ -75,8 +75,8 @@ export const TagManagementPage: FC = ({ }); const createModalOpener = useMemo( - () => getCreateModalOpener({ overlays, tagClient }), - [overlays, tagClient] + () => getCreateModalOpener({ overlays, theme, tagClient }), + [overlays, theme, tagClient] ); const tableActions = useMemo(() => { diff --git a/x-pack/plugins/saved_objects_tagging/public/plugin.ts b/x-pack/plugins/saved_objects_tagging/public/plugin.ts index 50525ad86efc2..db314e0597803 100644 --- a/x-pack/plugins/saved_objects_tagging/public/plugin.ts +++ b/x-pack/plugins/saved_objects_tagging/public/plugin.ts @@ -67,7 +67,7 @@ export class SavedObjectTaggingPlugin return {}; } - public start({ http, application, overlays }: CoreStart) { + public start({ http, application, overlays, theme }: CoreStart) { this.tagCache = new TagsCache({ refreshHandler: () => this.tagClient!.getAll({ asSystemRequest: true }), refreshInterval: this.config.cacheRefreshInterval, @@ -91,6 +91,7 @@ export class SavedObjectTaggingPlugin client: this.tagClient, capabilities: getTagsCapabilities(application.capabilities), overlays, + theme, }), }; } diff --git a/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts b/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts index 043d0e483d964..042ce8495e012 100644 --- a/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts +++ b/x-pack/plugins/saved_objects_tagging/public/ui_api/components.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { OverlayStart } from 'src/core/public'; +import { OverlayStart, ThemeServiceStart } from 'src/core/public'; import { SavedObjectsTaggingApiUiComponent } from '../../../../../src/plugins/saved_objects_tagging_oss/public'; import { TagsCapabilities } from '../../common'; import { ITagInternalClient, ITagsCache } from '../services'; @@ -20,6 +20,7 @@ export interface GetComponentsOptions { capabilities: TagsCapabilities; cache: ITagsCache; overlays: OverlayStart; + theme: ThemeServiceStart; tagClient: ITagInternalClient; } @@ -27,9 +28,10 @@ export const getComponents = ({ capabilities, cache, overlays, + theme, tagClient, }: GetComponentsOptions): SavedObjectsTaggingApiUiComponent => { - const openCreateModal = getCreateModalOpener({ overlays, tagClient }); + const openCreateModal = getCreateModalOpener({ overlays, theme, tagClient }); return { TagList: getConnectedTagListComponent({ cache }), TagSelector: getConnectedTagSelectorComponent({ cache, capabilities, openCreateModal }), diff --git a/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts b/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts index a4aeacfbd9dd2..cc2838a1e5bd8 100644 --- a/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts +++ b/x-pack/plugins/saved_objects_tagging/public/ui_api/index.ts @@ -5,7 +5,7 @@ * 2.0. */ -import { OverlayStart } from 'src/core/public'; +import { OverlayStart, ThemeServiceStart } from 'src/core/public'; import { SavedObjectsTaggingApiUi } from '../../../../../src/plugins/saved_objects_tagging_oss/public'; import { TagsCapabilities } from '../../common'; import { ITagsCache, ITagInternalClient } from '../services'; @@ -24,6 +24,7 @@ import { hasTagDecoration } from './has_tag_decoration'; interface GetUiApiOptions { overlays: OverlayStart; + theme: ThemeServiceStart; capabilities: TagsCapabilities; cache: ITagsCache; client: ITagInternalClient; @@ -34,8 +35,9 @@ export const getUiApi = ({ capabilities, client, overlays, + theme, }: GetUiApiOptions): SavedObjectsTaggingApiUi => { - const components = getComponents({ cache, capabilities, overlays, tagClient: client }); + const components = getComponents({ cache, capabilities, overlays, theme, tagClient: client }); return { components,