some optimizations and remove dependency on getter/setters

elastic · Jan 6, 2022 · b0a13ac · b0a13ac
1 parent 3419d8e
commit b0a13ac
Show file tree

Hide file tree

Showing 24 changed files with 88 additions and 61 deletions.
diff --git a/...public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx b/...public/components/edit_index_pattern/indexed_fields_table/components/table/table.test.tsx
@@ -11,7 +11,9 @@ import { shallow } from 'enzyme';
 import { IndexPattern } from 'src/plugins/data/public';
 import { IndexedFieldItem } from '../../types';
 import { Table, renderFieldName, getConflictModalContent } from './table';
-import { overlayServiceMock } from 'src/core/public/mocks';
+import { overlayServiceMock, themeServiceMock } from 'src/core/public/mocks';
+
+const theme = themeServiceMock.createStartContract();
 
 const indexPattern = {
   timeFieldName: 'timestamp',
@@ -89,6 +91,7 @@ const renderTable = (
       editField={editField}
       deleteField={() => {}}
       openModal={overlayServiceMock.createStartContract().openModal}
+      theme={theme}
     />
   );
 

diff --git a/...ment/public/components/edit_index_pattern/indexed_fields_table/components/table/table.tsx b/...ment/public/components/edit_index_pattern/indexed_fields_table/components/table/table.tsx
@@ -7,7 +7,7 @@
  */
 
 import React, { PureComponent } from 'react';
-import { OverlayModalStart } from 'src/core/public';
+import { OverlayModalStart, ThemeServiceStart } from 'src/core/public';
 
 import {
   EuiIcon,
@@ -32,7 +32,6 @@ import { toMountPoint } from '../../../../../../../kibana_react/public';
 
 import { IIndexPattern } from '../../../../../../../data/public';
 import { IndexedFieldItem } from '../../types';
-import { getTheme } from '../../../../../';
 
 // localized labels
 const additionalInfoAriaLabel = i18n.translate(
@@ -180,6 +179,7 @@ interface IndexedFieldProps {
   editField: (field: IndexedFieldItem) => void;
   deleteField: (fieldName: string) => void;
   openModal: OverlayModalStart['open'];
+  theme: ThemeServiceStart;
 }
 
 const getItems = (conflictDescriptions: IndexedFieldItem['conflictDescriptions']) => {
@@ -312,7 +312,8 @@ export const getConflictModalContent = ({
 const getConflictBtn = (
   fieldName: string,
   conflictDescriptions: IndexedFieldItem['conflictDescriptions'],
-  openModal: IndexedFieldProps['openModal']
+  openModal: IndexedFieldProps['openModal'],
+  theme: ThemeServiceStart
 ) => {
   const onClick = () => {
     const overlayRef = openModal(
@@ -324,7 +325,7 @@ const getConflictBtn = (
           fieldName,
           conflictDescriptions,
         }),
-        { theme$: getTheme().theme$ }
+        { theme$: theme.theme$ }
       )
     );
   };
@@ -357,7 +358,12 @@ export class Table extends PureComponent<IndexedFieldProps> {
       <span>
         {type === 'conflict' && conflictDescription ? '' : type}
         {field.conflictDescriptions
-          ? getConflictBtn(field.name, field.conflictDescriptions, this.props.openModal)
+          ? getConflictBtn(
+              field.name,
+              field.conflictDescriptions,
+              this.props.openModal,
+              this.props.theme
+            )
           : ''}
       </span>
     );

diff --git a/...gement/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.tsx b/...gement/public/components/edit_index_pattern/indexed_fields_table/indexed_fields_table.tsx
@@ -8,7 +8,7 @@
 
 import React, { Component } from 'react';
 import { createSelector } from 'reselect';
-import { OverlayStart } from 'src/core/public';
+import { OverlayStart, ThemeServiceStart } from 'src/core/public';
 import { IndexPatternField, IndexPattern } from '../../../../../../plugins/data/public';
 import { useKibana } from '../../../../../../plugins/kibana_react/public';
 import { Table } from './components/table';
@@ -28,6 +28,7 @@ interface IndexedFieldsTableProps {
   fieldWildcardMatcher: (filters: any[]) => (val: any) => boolean;
   userEditPermission: boolean;
   openModal: OverlayStart['openModal'];
+  theme: ThemeServiceStart;
 }
 
 interface IndexedFieldsTableState {
@@ -129,6 +130,7 @@ class IndexedFields extends Component<IndexedFieldsTableProps, IndexedFieldsTabl
           editField={(field) => this.props.helpers.editField(field.name)}
           deleteField={(fieldName) => this.props.helpers.deleteField(fieldName)}
           openModal={this.props.openModal}
+          theme={this.props.theme}
         />
       </div>
     );

diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx
@@ -80,7 +80,7 @@ export function Tabs({
   location,
   refreshFields,
 }: TabsProps) {
-  const { application, uiSettings, docLinks, dataViewFieldEditor, overlays } =
+  const { application, uiSettings, docLinks, dataViewFieldEditor, overlays, theme } =
     useKibana<IndexPatternManagmentContext>().services;
   const [fieldFilter, setFieldFilter] = useState<string>('');
   const [indexedFieldTypeFilter, setIndexedFieldTypeFilter] = useState<string>('');
@@ -236,6 +236,7 @@ export function Tabs({
                       getFieldInfo,
                     }}
                     openModal={overlays.openModal}
+                    theme={theme}
                   />
                 )}
               </DeleteRuntimeFieldProvider>
@@ -295,6 +296,7 @@ export function Tabs({
       DeleteRuntimeFieldProvider,
       refreshFields,
       overlays,
+      theme,
     ]
   );
 

diff --git a/src/plugins/data_view_management/public/index.ts b/src/plugins/data_view_management/public/index.ts
@@ -17,13 +17,10 @@
  * in the setup/start interfaces in `plugin.ts`. The remaining items exported here are
  * either types, or static code.
  */
-import { PluginInitializerContext, ThemeServiceStart } from 'src/core/public';
-import { createGetterSetter } from '../../kibana_utils/public';
+import { PluginInitializerContext } from 'src/core/public';
 import { IndexPatternManagementPlugin } from './plugin';
 export type { IndexPatternManagementSetup, IndexPatternManagementStart } from './plugin';
 
 export function plugin(initializerContext: PluginInitializerContext) {
   return new IndexPatternManagementPlugin(initializerContext);
 }
-
-export const [getTheme, setTheme] = createGetterSetter<ThemeServiceStart>('Theme');
diff --git a/src/plugins/data_view_management/public/management_app/mount_management_section.tsx b/src/plugins/data_view_management/public/management_app/mount_management_section.tsx
@@ -39,7 +39,7 @@ export async function mountManagementSection(
   params: ManagementAppMountParams
 ) {
   const [
-    { chrome, application, uiSettings, notifications, overlays, http, docLinks },
+    { chrome, application, uiSettings, notifications, overlays, http, docLinks, theme },
     { data, dataViewFieldEditor, dataViewEditor },
     indexPatternManagementStart,
   ] = await getStartServices();
@@ -67,7 +67,7 @@ export async function mountManagementSection(
 
   ReactDOM.render(
     <KibanaContextProvider services={deps}>
-      <KibanaThemeProvider theme$={params.theme$}>
+      <KibanaThemeProvider theme$={theme.theme$}>
         <I18nProvider>
           <Router history={params.history}>
             <Switch>

diff --git a/src/plugins/data_view_management/public/plugin.ts b/src/plugins/data_view_management/public/plugin.ts
@@ -14,7 +14,6 @@ import { UrlForwardingSetup } from '../../url_forwarding/public';
 import { ManagementSetup } from '../../management/public';
 import { IndexPatternFieldEditorStart } from '../../data_view_field_editor/public';
 import { DataViewEditorStart } from '../../data_view_editor/public';
-import { setTheme } from '.';
 
 export interface IndexPatternManagementSetupDependencies {
   management: ManagementSetup;
@@ -55,7 +54,6 @@ export class IndexPatternManagementPlugin
     { management, urlForwarding }: IndexPatternManagementSetupDependencies
   ) {
     const kibanaSection = management.sections.section.kibana;
-    setTheme(core.theme);
 
     if (!kibanaSection) {
       throw new Error('`kibana` management section not found.');

diff --git a/src/plugins/embeddable/public/index.ts b/src/plugins/embeddable/public/index.ts
@@ -10,8 +10,6 @@ import './index.scss';
 
 import { PluginInitializerContext } from 'src/core/public';
 import { EmbeddablePublicPlugin } from './plugin';
-import type { ThemeServiceStart } from '../../../core/public';
-import { createGetterSetter } from '../../../plugins/kibana_utils/public';
 
 export type {
   Adapters,
@@ -85,8 +83,6 @@ export function plugin(initializerContext: PluginInitializerContext) {
   return new EmbeddablePublicPlugin(initializerContext);
 }
 
-export const [getTheme, setTheme] = createGetterSetter<ThemeServiceStart>('Theme');
-
 export type {
   EmbeddableSetup,
   EmbeddableStart,

diff --git a/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx b/src/plugins/embeddable/public/lib/embeddables/error_embeddable.tsx
@@ -13,7 +13,7 @@ import { KibanaThemeProvider, Markdown } from '../../../../kibana_react/public';
 import { Embeddable } from './embeddable';
 import { EmbeddableInput, EmbeddableOutput, IEmbeddable } from './i_embeddable';
 import { IContainer } from '../containers';
-import { getTheme } from '../..';
+import { getTheme } from '../../services';
 
 export const ERROR_EMBEDDABLE_TYPE = 'error';
 
@@ -44,7 +44,6 @@ export class ErrorEmbeddable extends Embeddable<EmbeddableInput, EmbeddableOutpu
     } catch (err) {
       theme = {};
     }
-    // @ts-ignore
     const node = (
       <div className="embPanel__error embPanel__content" data-test-subj="embeddableStackError">
         <EuiText color="subdued" size="xs">

diff --git a/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx b/src/plugins/embeddable/public/lib/panel/embeddable_panel.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 import { Subscription } from 'rxjs';
 import deepEqual from 'fast-deep-equal';
 import { buildContextMenuForActions, UiActionsService, Action } from '../ui_actions';
-import { CoreStart, OverlayStart } from '../../../../../core/public';
+import { CoreStart, OverlayStart, ThemeServiceStart } from '../../../../../core/public';
 import { toMountPoint } from '../../../../kibana_react/public';
 import { UsageCollectionStart } from '../../../../usage_collection/public';
 
@@ -42,7 +42,6 @@ import { CustomizePanelModal } from './panel_header/panel_actions/customize_titl
 import { EmbeddableStart } from '../../plugin';
 import { EmbeddableErrorLabel } from './embeddable_error_label';
 import { EmbeddableStateTransfer, ErrorEmbeddable } from '..';
-import { getTheme } from '../..';
 
 const sortByOrderField = (
   { order: orderA }: { order?: number },
@@ -84,6 +83,7 @@ interface Props {
   showBadges?: boolean;
   showNotifications?: boolean;
   containerContext?: EmbeddableContainerContext;
+  theme: ThemeServiceStart;
 }
 
 interface State {
@@ -348,8 +348,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     ) {
       return actions;
     }
-
-    const createGetUserData = (overlays: OverlayStart) =>
+    const createGetUserData = (overlays: OverlayStart, theme: ThemeServiceStart) =>
       async function getUserData(context: { embeddable: IEmbeddable }) {
         return new Promise<{ title: string | undefined; hideTitle?: boolean }>((resolve) => {
           const session = overlays.openModal(
@@ -362,7 +361,7 @@ export class EmbeddablePanel extends React.Component<Props, State> {
                 }}
                 cancel={() => session.close()}
               />,
-              { theme$: getTheme().theme$ }
+              { theme$: theme.theme$ }
             ),
             {
               'data-test-subj': 'customizePanel',
@@ -375,13 +374,16 @@ export class EmbeddablePanel extends React.Component<Props, State> {
     // registry.
     return {
       ...actions,
-      customizePanelTitle: new CustomizePanelTitleAction(createGetUserData(this.props.overlays)),
+      customizePanelTitle: new CustomizePanelTitleAction(
+        createGetUserData(this.props.overlays, this.props.theme)
+      ),
       addPanel: new AddPanelAction(
         this.props.getEmbeddableFactory,
         this.props.getAllEmbeddableFactories,
         this.props.overlays,
         this.props.notifications,
         this.props.SavedObjectFinder,
+        this.props.theme,
         this.props.reportUiCounter
       ),
       removePanel: new RemovePanelAction(),

diff --git a/...mbeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx b/...mbeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.test.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../../../test_samples/embeddables/filterable_embeddable';
 import { FilterableEmbeddableFactory } from '../../../../test_samples/embeddables/filterable_embeddable_factory';
 import { FilterableContainer } from '../../../../test_samples/embeddables/filterable_container';
-import { coreMock } from '../../../../../../../../core/public/mocks';
+import { coreMock, themeServiceMock } from '../../../../../../../../core/public/mocks';
 import { ContactCardEmbeddable } from '../../../../test_samples';
 import { EmbeddableStart } from '../../../../../plugin';
 import { embeddablePluginMock } from '../../../../../mocks';
@@ -25,6 +25,7 @@ import { defaultTrigger } from '../../../../../../../ui_actions/public/triggers'
 const { setup, doStart } = embeddablePluginMock.createInstance();
 setup.registerEmbeddableFactory(FILTERABLE_EMBEDDABLE, new FilterableEmbeddableFactory());
 const getFactory = doStart().getEmbeddableFactory;
+const theme = themeServiceMock.createStartContract();
 
 let container: FilterableContainer;
 let embeddable: FilterableEmbeddable;
@@ -37,7 +38,8 @@ beforeEach(async () => {
     () => [] as any,
     start.overlays,
     start.notifications,
-    () => null
+    () => null,
+    theme
   );
 
   const derivedFilter: MockFilter = {
@@ -72,7 +74,8 @@ test('Is not compatible when container is in view mode', async () => {
     () => [] as any,
     start.overlays,
     start.notifications,
-    () => null
+    () => null,
+    theme
   );
   container.updateInput({ viewMode: ViewMode.VIEW });
   expect(

diff --git a/...gins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts b/...gins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_action.ts
@@ -8,7 +8,7 @@
 
 import { i18n } from '@kbn/i18n';
 import { Action, ActionExecutionContext } from 'src/plugins/ui_actions/public';
-import { NotificationsStart, OverlayStart } from 'src/core/public';
+import { NotificationsStart, OverlayStart, ThemeServiceStart } from 'src/core/public';
 import { EmbeddableStart } from 'src/plugins/embeddable/public/plugin';
 import { ViewMode } from '../../../../types';
 import { openAddPanelFlyout } from './open_add_panel_flyout';
@@ -31,6 +31,7 @@ export class AddPanelAction implements Action<ActionContext> {
     private readonly overlays: OverlayStart,
     private readonly notifications: NotificationsStart,
     private readonly SavedObjectFinder: React.ComponentType<any>,
+    private readonly theme: ThemeServiceStart,
     private readonly reportUiCounter?: UsageCollectionStart['reportUiCounter']
   ) {}
 
@@ -63,6 +64,7 @@ export class AddPanelAction implements Action<ActionContext> {
       notifications: this.notifications,
       SavedObjectFinder: this.SavedObjectFinder,
       reportUiCounter: this.reportUiCounter,
+      theme: this.theme,
     });
   }
 }
diff --git a/...mbeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx b/...mbeddable/public/lib/panel/panel_header/panel_actions/add_panel/open_add_panel_flyout.tsx
@@ -7,13 +7,12 @@
  */
 
 import React from 'react';
-import { NotificationsStart, OverlayRef, OverlayStart } from 'src/core/public';
+import { NotificationsStart, OverlayRef, OverlayStart, ThemeServiceStart } from 'src/core/public';
 import { EmbeddableStart } from '../../../../../plugin';
 import { toMountPoint } from '../../../../../../../kibana_react/public';
 import { IContainer } from '../../../../containers';
 import { AddPanelFlyout } from './add_panel_flyout';
 import { UsageCollectionStart } from '../../../../../../../usage_collection/public';
-import { getTheme } from '../../../../../';
 
 export function openAddPanelFlyout(options: {
   embeddable: IContainer;
@@ -24,6 +23,7 @@ export function openAddPanelFlyout(options: {
   SavedObjectFinder: React.ComponentType<any>;
   showCreateNewMenu?: boolean;
   reportUiCounter?: UsageCollectionStart['reportUiCounter'];
+  theme: ThemeServiceStart;
 }): OverlayRef {
   const {
     embeddable,
@@ -34,6 +34,7 @@ export function openAddPanelFlyout(options: {
     SavedObjectFinder,
     showCreateNewMenu,
     reportUiCounter,
+    theme,
   } = options;
   const flyoutSession = overlays.openFlyout(
     toMountPoint(
@@ -51,7 +52,7 @@ export function openAddPanelFlyout(options: {
         SavedObjectFinder={SavedObjectFinder}
         showCreateNewMenu={showCreateNewMenu}
       />,
-      { theme$: getTheme().theme$ }
+      { theme$: theme.theme$ }
     ),
     {
       'data-test-subj': 'dashboardAddPanel',