Use KibanaThemeProvider for savedObjectTagging plugin (#121827)

* Use KibanaThemeProvider for savedObjectTagging plugin * fix ui creation dependencies
elastic · Dec 23, 2021 · fb18ddb · fb18ddb
1 parent acb8e54
commit fb18ddb
Show file tree

Hide file tree

Showing 12 changed files with 58 additions and 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
@@ -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()}
           />
-        </React.Suspense>
+        </React.Suspense>,
+        { 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
@@ -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}
           />
-        </React.Suspense>
+        </React.Suspense>,
+        { 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}
           />
-        </React.Suspense>
+        </React.Suspense>,
+        { 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
@@ -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
@@ -6,26 +6,28 @@
  */
 
 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';
 import { TagAction } from './types';
 
 interface GetEditActionOptions {
   overlays: OverlayStart;
+  theme: ThemeServiceStart;
   notifications: NotificationsStart;
   tagClient: ITagInternalClient;
   fetchTags: () => Promise<void>;
 }
 
 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
@@ -29,20 +29,19 @@ interface GetActionsOptions {
 }
 
 export const getTableActions = ({
-  core: { notifications, overlays },
+  core: { notifications, overlays, theme },
   capabilities,
   tagClient,
   tagCache,
   assignmentService,
-  setLoading,
   assignableTypes,
   fetchTags,
   canceled$,
 }: GetActionsOptions): TagAction[] => {
   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
@@ -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
@@ -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
@@ -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(
     <I18nProvider>
-      <RedirectToHomeIfUnauthorized applications={coreStart.application}>
-        <TagManagementPage
-          setBreadcrumbs={setBreadcrumbs}
-          core={coreStart}
-          tagClient={tagClient}
-          tagCache={tagCache}
-          assignmentService={assignmentService}
-          capabilities={capabilities}
-          assignableTypes={assignableTypes}
-        />
-      </RedirectToHomeIfUnauthorized>
+      <KibanaThemeProvider theme$={theme$}>
+        <RedirectToHomeIfUnauthorized applications={coreStart.application}>
+          <TagManagementPage
+            setBreadcrumbs={setBreadcrumbs}
+            core={coreStart}
+            tagClient={tagClient}
+            tagCache={tagCache}
+            assignmentService={assignmentService}
+            capabilities={capabilities}
+            assignableTypes={assignableTypes}
+          />
+        </RedirectToHomeIfUnauthorized>
+      </KibanaThemeProvider>
     </I18nProvider>,
     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
@@ -40,7 +40,7 @@ export const TagManagementPage: FC<TagManagementPageParams> = ({
   capabilities,
   assignableTypes,
 }) => {
-  const { overlays, notifications, application, http } = core;
+  const { overlays, notifications, application, http, theme } = core;
   const [loading, setLoading] = useState<boolean>(false);
   const [allTags, setAllTags] = useState<TagWithRelations[]>([]);
   const [selectedTags, setSelectedTags] = useState<TagWithRelations[]>([]);
@@ -75,8 +75,8 @@ export const TagManagementPage: FC<TagManagementPageParams> = ({
   });
 
   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
@@ -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
@@ -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,16 +20,18 @@ export interface GetComponentsOptions {
   capabilities: TagsCapabilities;
   cache: ITagsCache;
   overlays: OverlayStart;
+  theme: ThemeServiceStart;
   tagClient: ITagInternalClient;
 }
 
 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
@@ -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,