[FTR] fix flaky: cmn/mgmt/data_views/_edit_field.ts (elastic#194738)

## Summary

What I tried before pushing

1. Better specificity - Couldn't get it just right (due to the dom
structure)
1. Changing dom structure - Couldn't do that how I would like, due to
the structure of `.tsx` file

So, I went with adding a service method that simply filters down by two
table dropdowns, instead of one.
_Sadly I spend most of my time with the specificity (different css
combinators), so lesson learned there_.
 
Also, cleaned up the test code to simply call the service method and
nothing more.

### Note
~~Will probably drop the other added service method
(`openEditFlyoutByRowNumber`)~~ ✅


Resolves: elastic#194662

test/functional/page_objects/settings_page.ts

@@ -9,7 +9,6 @@
 
 import expect from '@kbn/expect';
 import { FtrService } from '../ftr_provider_context';
-
 export class SettingsPageObject extends FtrService {
   private readonly log = this.ctx.getService('log');
   private readonly retry = this.ctx.getService('retry');
@@ -387,6 +386,11 @@ export class SettingsPageObject extends FtrService {
     const input = await this.testSubjects.find('indexPatternFieldFilter');
     await input.clearValueWithKeyboard();
     await input.type(name);
+    const value = await this.testSubjects.getAttribute('indexPatternFieldFilter', 'value');
+    expect(value).to.eql(
+      name,
+      `Expected new value to be the input: [${name}}], but got: [${value}]`
+    );
   }
 
   async openControlsByName(name: string) {
@@ -1048,4 +1052,18 @@ export class SettingsPageObject extends FtrService {
       [data-test-subj="indexPatternOption-${newIndexPatternTitle}"]`
     );
   }
+
+  async changeAndValidateFieldFormat(name: string, fieldType: string) {
+    await this.filterField(name);
+    await this.setFieldTypeFilter(fieldType);
+    await this.testSubjects.click('editFieldFormat');
+
+    expect(await this.testSubjects.getVisibleText('flyoutTitle')).to.eql(`Edit field '${name}'`);
+
+    await this.retry.tryForTime(5000, async () => {
+      const previewText = await this.testSubjects.getVisibleText('fieldPreviewItem > value');
+      expect(previewText).to.be('css');
+    });
+    await this.closeIndexPatternFieldEditor();
+  }
 }

x-pack/test_serverless/functional/test_suites/common/management/data_views/_edit_field.ts

@@ -5,12 +5,10 @@
  * 2.0.
  */
 
-import expect from '@kbn/expect';
 import { FtrProviderContext } from '../../../../ftr_provider_context';
 
 export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const kibanaServer = getService('kibanaServer');
-  const retry = getService('retry');
   const PageObjects = getPageObjects(['settings', 'common']);
   const testSubjects = getService('testSubjects');
 
@@ -32,23 +30,11 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should show preview for fields in _source', async function () {
-        await PageObjects.settings.filterField('extension');
-        await testSubjects.click('editFieldFormat');
-        await retry.tryForTime(5000, async () => {
-          const previewText = await testSubjects.getVisibleText('fieldPreviewItem > value');
-          expect(previewText).to.be('css');
-        });
-        await PageObjects.settings.closeIndexPatternFieldEditor();
+        await PageObjects.settings.changeAndValidateFieldFormat('extension', 'text');
       });
 
       it('should show preview for fields not in _source', async function () {
-        await PageObjects.settings.filterField('extension.raw');
-        await testSubjects.click('editFieldFormat');
-        await retry.tryForTime(5000, async () => {
-          const previewText = await testSubjects.getVisibleText('fieldPreviewItem > value');
-          expect(previewText).to.be('css');
-        });
-        await PageObjects.settings.closeIndexPatternFieldEditor();
+        await PageObjects.settings.changeAndValidateFieldFormat('extension.raw', 'keyword');
       });
     });
   });