[Dashboard] [Controls] Refactor controls services

src/plugins/controls/jest_setup.ts

@@ -8,7 +8,7 @@
 
 // Start the services with stubs
 import { pluginServices } from './public/services';
-import { registry } from './public/services/stub';
+import { registry } from './public/services/plugin_services.story';
 
 registry.start({});
 pluginServices.setRegistry(registry);

src/plugins/controls/public/__stories__/controls.stories.tsx

@@ -30,11 +30,11 @@ import {
 import { decorators } from './decorators';
 import { ControlsPanels } from '../control_group/types';
 import { ControlGroupContainer } from '../control_group';
-import { pluginServices, registry } from '../services/storybook';
-import { injectStorybookDataView } from '../services/storybook/data_views';
-import { replaceOptionsListMethod } from '../services/storybook/options_list';
+import { pluginServices, registry } from '../services/plugin_services.story';
+import { injectStorybookDataView } from '../services/data_views/data_views.story';
+import { replaceOptionsListMethod } from '../services/options_list/options_list.story';
 import { populateStorybookControlFactories } from './storybook_control_factories';
-import { replaceValueSuggestionMethod } from '../services/storybook/unified_search';
+import { replaceValueSuggestionMethod } from '../services/unified_search/unified_search.story';
 import { OptionsListResponse, OptionsListRequest } from '../options_list/types';
 
 export default {

src/plugins/controls/public/__stories__/storybook_control_factories.ts

@@ -8,10 +8,10 @@
 
 import { OptionsListEmbeddableFactory } from '../options_list';
 import { RangeSliderEmbeddableFactory } from '../range_slider';
-import { ControlsService } from '../services/controls';
+import { ControlsServiceType } from '../services/controls/types';
 import { ControlFactory } from '..';
 
-export const populateStorybookControlFactories = (controlsServiceStub: ControlsService) => {
+export const populateStorybookControlFactories = (controlsServiceStub: ControlsServiceType) => {
   const optionsListFactoryStub = new OptionsListEmbeddableFactory();
 
   // cast to unknown because the stub cannot use the embeddable start contract to transform the EmbeddableFactoryDefinition into an EmbeddableFactory

src/plugins/controls/public/control_group/component/control_frame_component.tsx

@@ -49,8 +49,9 @@ export const ControlFrame = ({
   const controlStyle = select((state) => state.explicitInput.controlStyle);
 
   // Controls Services Context
-  const { overlays } = pluginServices.getHooks();
-  const { openConfirm } = overlays.useService();
+  const {
+    overlays: { openConfirm },
+  } = pluginServices.getServices();
 
   const embeddable = useChildEmbeddable({ untilEmbeddableLoaded, embeddableId, embeddableType });
 

src/plugins/controls/public/control_group/editor/control_editor.tsx

@@ -95,9 +95,10 @@ export const ControlEditor = ({
   getRelevantDataViewId,
   setLastUsedDataViewId,
 }: EditControlProps) => {
-  const { dataViews, controls } = pluginServices.getHooks();
-  const { getIdsWithTitle, getDefaultId, get } = dataViews.useService();
-  const { getControlTypes, getControlFactory } = controls.useService();
+  const {
+    dataViews: { getIdsWithTitle, getDefaultId, get },
+    controls: { getControlTypes, getControlFactory },
+  } = pluginServices.getServices();
   const [state, setState] = useState<ControlEditorState>({
     dataViewListItems: [],
   });

src/plugins/controls/public/control_group/editor/create_control.tsx

@@ -51,10 +51,11 @@ export const CreateControlButton = ({
   updateDefaultGrow,
 }: CreateControlButtonProps) => {
   // Controls Services Context
-  const { overlays, controls, theme } = pluginServices.getHooks();
-  const { getControlTypes, getControlFactory } = controls.useService();
-  const { openFlyout, openConfirm } = overlays.useService();
-  const themeService = theme.useService();
+  const {
+    overlays: { openFlyout, openConfirm },
+    controls: { getControlTypes, getControlFactory },
+    theme: { theme$ },
+  } = pluginServices.getServices();
 
   const createNewControl = async () => {
     const ControlsServicesProvider = pluginServices.getContextProvider();
@@ -115,7 +116,7 @@ export const CreateControlButton = ({
               }
             />
           </ControlsServicesProvider>,
-          { theme$: themeService.theme$ }
+          { theme$ }
         ),
         {
           'aria-label': ControlGroupStrings.manageControl.getFlyoutCreateTitle(),

src/plugins/controls/public/control_group/editor/edit_control.tsx

@@ -34,11 +34,11 @@ interface EditControlResult {
 
 export const EditControlButton = ({ embeddableId }: { embeddableId: string }) => {
   // Controls Services Context
-  const { overlays, controls, theme } = pluginServices.getHooks();
-  const { getControlFactory } = controls.useService();
-  const { openFlyout, openConfirm } = overlays.useService();
-  const themeService = theme.useService();
-
+  const {
+    overlays: { openFlyout, openConfirm },
+    controls: { getControlFactory },
+    theme: { theme$ },
+  } = pluginServices.getServices();
   // Redux embeddable container Context
   const reduxContainerContext = useReduxContainerContext<
     ControlGroupReduxState,
@@ -161,7 +161,7 @@ export const EditControlButton = ({ embeddableId }: { embeddableId: string }) =>
               }}
             />
           </ControlsServicesProvider>,
-          { theme$: themeService.theme$ }
+          { theme$ }
         ),
         {
           'aria-label': ControlGroupStrings.manageControl.getFlyoutEditTitle(),

src/plugins/controls/public/control_group/editor/edit_control_group.tsx

@@ -26,9 +26,10 @@ export const EditControlGroup = ({
   controlGroupContainer,
   closePopover,
 }: EditControlGroupButtonProps) => {
-  const { overlays, theme } = pluginServices.getHooks();
-  const { openConfirm, openFlyout } = overlays.useService();
-  const themeService = theme.useService();
+  const {
+    overlays: { openConfirm, openFlyout },
+    theme: { theme$ },
+  } = pluginServices.getServices();
 
   const editControlGroup = () => {
     const onDeleteAll = (ref: OverlayRef) => {
@@ -55,7 +56,7 @@ export const EditControlGroup = ({
           onDeleteAll={() => onDeleteAll(flyoutInstance)}
           onClose={() => flyoutInstance.close()}
         />,
-        { theme$: themeService.theme$ }
+        { theme$ }
       ),
       {
         outsideClickCloses: false,

src/plugins/controls/public/options_list/embeddable/options_list_embeddable.tsx

@@ -36,9 +36,9 @@ import {
 import { pluginServices } from '../../services';
 import { ControlInput, ControlOutput } from '../..';
 import { optionsListReducers } from '../options_list_reducers';
-import { ControlsDataViewsService } from '../../services/data_views';
 import { OptionsListControl } from '../components/options_list_control';
-import { ControlsOptionsListService } from '../../services/options_list';
+import { ControlsDataViewsService } from '../../services/data_views/types';
+import { ControlsOptionsListService } from '../../services/options_list/types';
 
 const diffDataFetchProps = (
   last?: OptionsListDataFetchProps,

src/plugins/controls/public/options_list/types.ts

@@ -7,12 +7,9 @@
  */
 
 import { ReduxEmbeddableState } from '@kbn/presentation-util-plugin/public';
-
 import { ControlOutput } from '../types';
 import { OptionsListEmbeddableInput, OptionsListField } from '../../common/options_list/types';
 
-export * from '../../common/options_list/types';
-
 // Component state is only used by public components.
 export interface OptionsListComponentState {
   field?: OptionsListField;
@@ -29,3 +26,5 @@ export type OptionsListReduxState = ReduxEmbeddableState<
   ControlOutput,
   OptionsListComponentState
 >;
+
+export * from '../../common/options_list/types';

src/plugins/controls/public/plugin.ts

@@ -17,8 +17,7 @@ import {
 } from '.';
 import { OptionsListEmbeddableFactory, OptionsListEmbeddableInput } from './options_list';
 import { RangeSliderEmbeddableFactory, RangeSliderEmbeddableInput } from './range_slider';
-import { pluginServices } from './services';
-import { controlsService } from './services/kibana/controls';
+import { controlsService } from './services/controls/controls_service';
 import {
   ControlsPluginSetup,
   ControlsPluginStart,
@@ -41,7 +40,7 @@ export class ControlsPlugin
     coreStart: CoreStart,
     startPlugins: ControlsPluginStartDeps
   ) {
-    const { registry } = await import('./services/kibana');
+    const { registry, pluginServices } = await import('./services/plugin_services');
     pluginServices.setRegistry(registry.start({ coreStart, startPlugins }));
   }
 

src/plugins/controls/public/range_slider/components/range_slider_popover.tsx

@@ -30,8 +30,9 @@ export const RangeSliderPopover: FC = () => {
   const rangeRef = useRef<EuiDualRange | null>(null);
 
   // Controls Services Context
-  const { dataViews } = pluginServices.getHooks();
-  const { get: getDataViewById } = dataViews.useService();
+  const {
+    dataViews: { get: getDataViewById },
+  } = pluginServices.getServices();
   const {
     useEmbeddableDispatch,
     useEmbeddableSelector: select,

src/plugins/controls/public/range_slider/embeddable/range_slider_embeddable.tsx

@@ -31,11 +31,11 @@ import { ReduxEmbeddableTools, ReduxEmbeddablePackage } from '@kbn/presentation-
 
 import { ControlInput, ControlOutput } from '../..';
 import { pluginServices } from '../../services';
-import { ControlsDataService } from '../../services/data';
-import { ControlsDataViewsService } from '../../services/data_views';
 import { RangeSliderControl } from '../components/range_slider_control';
 import { getDefaultComponentState, rangeSliderReducers } from '../range_slider_reducers';
 import { RangeSliderEmbeddableInput, RangeSliderReduxState, RANGE_SLIDER_CONTROL } from '../types';
+import { ControlsDataService } from '../../services/data/types';
+import { ControlsDataViewsService } from '../../services/data_views/types';
 
 const diffDataFetchProps = (
   current?: RangeSliderDataFetchProps,

src/plugins/controls/public/services/stub/controls.ts → src/plugins/controls/public/services/controls/controls.story.ts

@@ -9,9 +9,9 @@
 import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
 import { ControlEmbeddable, ControlFactory, ControlInput, ControlOutput } from '../..';
-import { ControlsService, ControlTypeRegistry } from '../controls';
+import { ControlsServiceType, ControlTypeRegistry } from './types';
 
-export type ControlsServiceFactory = PluginServiceFactory<ControlsService>;
+export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
 export const controlsServiceFactory = () => getStubControlsService();
 
 export const getStubControlsService = () => {

src/plugins/controls/public/services/kibana/controls.ts → src/plugins/controls/public/services/controls/controls_service.ts

@@ -9,15 +9,15 @@
 import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
 import { ControlEmbeddable, ControlFactory, ControlInput, ControlOutput } from '../..';
-import { ControlsService, ControlTypeRegistry } from '../controls';
+import { ControlsServiceType, ControlTypeRegistry } from './types';
 
-export type ControlsServiceFactory = PluginServiceFactory<ControlsService>;
+export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
 export const controlsServiceFactory = () => controlsService;
 
 const controlsFactoriesMap: ControlTypeRegistry = {};
 
 // export controls service directly for use in plugin setup lifecycle
-export const controlsService: ControlsService = {
+export const controlsService: ControlsServiceType = {
   registerControlType: (factory: ControlFactory) => {
     controlsFactoriesMap[factory.type] = factory;
   },

src/plugins/controls/public/services/controls.ts → src/plugins/controls/public/services/controls/types.ts

@@ -7,13 +7,16 @@
  */
 
 import { EmbeddableFactory } from '@kbn/embeddable-plugin/public';
-import { ControlEmbeddable, ControlFactory, ControlOutput, ControlInput } from '../types';
+import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
+import { ControlEmbeddable, ControlFactory, ControlOutput, ControlInput } from '../../types';
+
+export type ControlsServiceFactory = PluginServiceFactory<ControlsServiceType>;
 
 export interface ControlTypeRegistry {
   [key: string]: ControlFactory;
 }
 
-export interface ControlsService {
+export interface ControlsServiceType {
   registerControlType: (factory: ControlFactory) => void;
 
   getControlFactory: <

src/plugins/controls/public/services/storybook/data.ts → src/plugins/controls/public/services/data/data.story.ts

@@ -6,11 +6,10 @@
  * Side Public License, v 1.
  */
 
-import { of, Observable } from 'rxjs';
+import { of } from 'rxjs';
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
-import { DataView } from '@kbn/data-views-plugin/common';
-import { ControlsDataService } from '../data';
+import { ControlsDataService } from './types';
 
 export type DataServiceFactory = PluginServiceFactory<ControlsDataService>;
 export const dataServiceFactory: DataServiceFactory = () => ({
@@ -30,7 +29,4 @@ export const dataServiceFactory: DataServiceFactory = () => ({
     createFilter: () => {},
   } as unknown as DataPublicPluginStart['query']['timefilter']['timefilter'],
   fetchFieldRange: () => Promise.resolve({ min: 0, max: 100 }),
-  fetchFieldRange$: () => new Observable<{ min: number; max: number }>(),
-  getDataView: () => Promise.resolve({} as DataView),
-  getDataView$: () => new Observable({} as any),
 });

src/plugins/controls/public/services/kibana/data.ts → src/plugins/controls/public/services/data/data_service.ts

@@ -8,9 +8,9 @@
 
 import { DataViewField } from '@kbn/data-views-plugin/common';
 import { get } from 'lodash';
-import { from, lastValueFrom } from 'rxjs';
+import { lastValueFrom } from 'rxjs';
 import { KibanaPluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlsDataService } from '../data';
+import { ControlsDataService } from './types';
 import { ControlsPluginStartDeps } from '../../types';
 
 export type DataServiceFactory = KibanaPluginServiceFactory<
@@ -91,10 +91,6 @@ export const dataServiceFactory: DataServiceFactory = ({ startPlugins }) => {
 
   return {
     fetchFieldRange,
-    fetchFieldRange$: (dataView, fieldName, input) =>
-      from(fetchFieldRange(dataView, fieldName, input)),
-    getDataView: data.dataViews.get,
-    getDataView$: (id: string) => from(data.dataViews.get(id)),
     query: queryPlugin,
     searchSource: search.searchSource,
     timefilter: queryPlugin.timefilter.timefilter,

src/plugins/controls/public/services/data.ts → src/plugins/controls/public/services/data/types.ts

@@ -6,24 +6,16 @@
  * Side Public License, v 1.
  */
 
-import { Observable } from 'rxjs';
 import { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/public';
-import { ControlInput } from '../types';
+import { ControlInput } from '../../types';
 
 export interface ControlsDataService {
   fetchFieldRange: (
     dataView: DataView,
     fieldName: string,
     input: ControlInput
   ) => Promise<{ min: number; max: number }>;
-  fetchFieldRange$: (
-    dataView: DataView,
-    fieldName: string,
-    input: ControlInput
-  ) => Observable<{ min?: number; max?: number }>;
-  getDataView: DataPublicPluginStart['dataViews']['get'];
-  getDataView$: (id: string) => Observable<DataView>;
   query: DataPublicPluginStart['query'];
   searchSource: DataPublicPluginStart['search']['searchSource'];
   timefilter: DataPublicPluginStart['query']['timefilter']['timefilter'];

src/plugins/controls/public/services/storybook/data_views.ts → src/plugins/controls/public/services/data_views/data_views.story.ts

@@ -9,7 +9,7 @@
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
 import { DataViewsPublicPluginStart } from '@kbn/data-views-plugin/public';
 import { DataView } from '@kbn/data-views-plugin/common';
-import { ControlsDataViewsService } from '../data_views';
+import { ControlsDataViewsService } from './types';
 
 export type DataViewsServiceFactory = PluginServiceFactory<ControlsDataViewsService>;
 

src/plugins/controls/public/services/kibana/data_views.ts → src/plugins/controls/public/services/data_views/data_views_service.ts

@@ -8,7 +8,7 @@
 
 import { KibanaPluginServiceFactory } from '@kbn/presentation-util-plugin/public';
 import { ControlsPluginStartDeps } from '../../types';
-import { ControlsDataViewsService } from '../data_views';
+import { ControlsDataViewsService } from './types';
 
 export type DataViewsServiceFactory = KibanaPluginServiceFactory<
   ControlsDataViewsService,

src/plugins/controls/public/services/stub/http.ts → src/plugins/controls/public/services/http/http.stub.ts

@@ -8,7 +8,7 @@
 
 import { HttpResponse } from '@kbn/core/public';
 import { PluginServiceFactory } from '@kbn/presentation-util-plugin/public';
-import { ControlsHTTPService } from '../http';
+import { ControlsHTTPService } from './types';
 
 type HttpServiceFactory = PluginServiceFactory<ControlsHTTPService>;