[ftr] migrate "MenuToggle" service to FtrService class (#100608)

Co-authored-by: spalger <spalger@users.noreply.github.com>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

test/functional/page_objects/time_picker.ts

@@ -30,9 +30,9 @@ export function TimePickerProvider({ getService, getPageObjects }: FtrProviderCo
   const testSubjects = getService('testSubjects');
   const { header } = getPageObjects(['header']);
   const kibanaServer = getService('kibanaServer');
-  const MenuToggle = getService('MenuToggle');
+  const menuToggle = getService('menuToggle');
 
-  const quickSelectTimeMenuToggle = new MenuToggle({
+  const quickSelectTimeMenuToggle = menuToggle.create({
     name: 'QuickSelectTime Menu',
     menuTestSubject: 'superDatePickerQuickMenu',
     toggleButtonTestSubject: 'superDatePickerToggleQuickMenuButton',

test/functional/services/index.ts

@@ -46,7 +46,7 @@ import {
 import { ListingTableService } from './listing_table';
 import { SavedQueryManagementComponentProvider } from './saved_query_management_component';
 import { KibanaSupertestProvider } from './supertest';
-import { MenuToggleProvider } from './menu_toggle';
+import { MenuToggleService } from './menu_toggle';
 import { MonacoEditorProvider } from './monaco_editor';
 
 export const services = {
@@ -85,5 +85,5 @@ export const services = {
   supertest: KibanaSupertestProvider,
   managementMenu: ManagementMenuService,
   monacoEditor: MonacoEditorProvider,
-  MenuToggle: MenuToggleProvider,
+  menuToggle: MenuToggleService,
 };

test/functional/services/menu_toggle.ts

@@ -6,61 +6,56 @@
  * Side Public License, v 1.
  */
 
-import { FtrProviderContext } from '../ftr_provider_context';
+import { FtrService } from '../ftr_provider_context';
 
-export function MenuToggleProvider({ getService }: FtrProviderContext) {
-  const log = getService('log');
-  const retry = getService('retry');
-  const testSubjects = getService('testSubjects');
+interface Options {
+  name: string;
+  menuTestSubject: string;
+  toggleButtonTestSubject: string;
+}
 
-  interface Options {
-    name: string;
-    menuTestSubject: string;
-    toggleButtonTestSubject: string;
-  }
+export class MenuToggleService extends FtrService {
+  private readonly log = this.ctx.getService('log');
+  private readonly retry = this.ctx.getService('retry');
+  private readonly testSubjects = this.ctx.getService('testSubjects');
 
-  return class MenuToggle {
-    private readonly name: string;
-    private readonly menuTestSubject: string;
-    private readonly toggleButtonTestSubject: string;
+  create(options: Options) {
+    const { log, retry, testSubjects } = this;
+    const { name, menuTestSubject, toggleButtonTestSubject } = options;
 
-    constructor(options: Options) {
-      this.name = options.name;
-      this.menuTestSubject = options.menuTestSubject;
-      this.toggleButtonTestSubject = options.toggleButtonTestSubject;
-    }
-
-    async open() {
-      await this.setState(true);
-    }
-
-    async close() {
-      await this.setState(false);
-    }
-
-    private async setState(expectedState: boolean) {
+    async function setState(expectedState: boolean) {
       log.debug(
-        `setting menu open state [name=${this.name}] [state=${expectedState ? 'open' : 'closed'}]`
+        `setting menu open state [name=${name}] [state=${expectedState ? 'open' : 'closed'}]`
       );
 
       await retry.try(async () => {
         // if the menu is clearly in the expected state already, bail out quickly if so
-        const isOpen = await testSubjects.exists(this.menuTestSubject, { timeout: 1000 });
+        const isOpen = await testSubjects.exists(menuTestSubject, { timeout: 1000 });
         if (isOpen === expectedState) {
           return;
         }
 
         // toggle the view state by clicking the button
-        await testSubjects.click(this.toggleButtonTestSubject);
+        await testSubjects.click(toggleButtonTestSubject);
 
         if (expectedState === true) {
           // wait for up to 10 seconds for the menu to show up, otherwise fail and retry
-          await testSubjects.existOrFail(this.menuTestSubject, { timeout: 10000 });
+          await testSubjects.existOrFail(menuTestSubject, { timeout: 10000 });
         } else {
           // wait for the form to hide, otherwise fail and retry
-          await testSubjects.waitForDeleted(this.menuTestSubject);
+          await testSubjects.waitForDeleted(menuTestSubject);
         }
       });
     }
-  };
+
+    return {
+      async open() {
+        await setState(true);
+      },
+
+      async close() {
+        await setState(false);
+      },
+    };
+  }
 }

x-pack/test/functional/page_objects/gis_page.ts

@@ -21,12 +21,12 @@ export function GisPageProvider({ getService, getPageObjects }: FtrProviderConte
   const comboBox = getService('comboBox');
   const renderable = getService('renderable');
   const browser = getService('browser');
-  const MenuToggle = getService('MenuToggle');
+  const menuToggle = getService('menuToggle');
   const listingTable = getService('listingTable');
   const monacoEditor = getService('monacoEditor');
   const dashboardPanelActions = getService('dashboardPanelActions');
 
-  const setViewPopoverToggle = new MenuToggle({
+  const setViewPopoverToggle = menuToggle.create({
     name: 'SetView Popover',
     menuTestSubject: 'mapSetViewForm',
     toggleButtonTestSubject: 'toggleSetViewVisibilityButton',