Get rid of useHooks in components

[CI] Auto-commit changed files from 'node scripts/eslint --no-cache --fix'

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,
+  } = pluginServices.getServices();
 
   const createNewControl = async () => {
     const ControlsServicesProvider = pluginServices.getContextProvider();
@@ -115,7 +116,7 @@ export const CreateControlButton = ({
               }
             />
           </ControlsServicesProvider>,
-          { theme$: themeService.theme$ }
+          { theme$: 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,
+  } = 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$: 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,
+  } = 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$: theme.theme$ }
       ),
       {
         outsideClickCloses: false,

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/services/data/data.story.ts

@@ -6,7 +6,7 @@
  * 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 { ControlsDataService } from './types';