[Vega] Fix update vega spec in functional tests (#216620)

## Summary

This PR fixes a flaky test practice that was causing issues in 7.17
branch.
The flakiness was introduced long ago when the choosen method to
update/add more content to the Vega Spec was done by manually clicking
in the Vega spec editor the left border (where the editor shows the line
numbers) to select all the text in the editor and go to the last line
but a char before the end of the text (right before the closing
bracket).

The failure highlighted by
https://github.com/elastic/kibana/issues/213646 where caused the added
`config` text positioned in the wrong line/column due to the Konami Code
like type of functional test operation.


The fix instead provides a more robust method: it takes the written text
in the editor, parse it to JSON, update the JSON and write it back again
to the editor.

Will fix the issue https://github.com/elastic/kibana/issues/213646 when
backported to 7.17.

src/platform/test/functional/apps/visualize/group6/_vega_chart.ts

@@ -96,7 +96,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
 
         it('should render different data in response to filter change', async function () {
-          await vegaChart.typeInSpec('"config": { "kibana": {"renderer": "svg"} },');
+          const { spec, isValid } = await vegaChart.getSpecAsJSON();
+          expect(isValid).to.be(true);
+          // add SVG renderer to read the Y axis labels
+          const updatedSpec = { ...spec, config: { kibana: { renderer: 'svg' } } };
+          await vegaChart.fillSpec(JSON.stringify(updatedSpec, null, 2));
           await visEditor.clickGo();
           await visChart.waitForVisualizationRenderingStabilized();
           const fullDataLabels = await vegaChart.getYAxisLabels();

src/platform/test/functional/page_objects/vega_chart_page.ts

@@ -8,6 +8,7 @@
  */
 
 import expect from '@kbn/expect';
+import hjson from 'hjson';
 import { FtrService } from '../ftr_provider_context';
 
 const compareSpecs = (first: string, second: string) => {
@@ -18,7 +19,6 @@ const compareSpecs = (first: string, second: string) => {
 export class VegaChartPageObject extends FtrService {
   private readonly find = this.ctx.getService('find');
   private readonly testSubjects = this.ctx.getService('testSubjects');
-  private readonly browser = this.ctx.getService('browser');
   private readonly retry = this.ctx.getService('retry');
   private readonly monacoEditor = this.ctx.getService('monacoEditor');
 
@@ -51,14 +51,17 @@ export class VegaChartPageObject extends FtrService {
     });
   }
 
-  public async typeInSpec(text: string) {
-    const editor = await this.testSubjects.find('vega-editor');
-    const textarea = await editor.findByCssSelector('textarea');
-
-    await textarea.focus();
-    await this.browser.pressKeys(this.browser.keys.RIGHT);
-    await this.browser.pressKeys(this.browser.keys.RIGHT);
-    await textarea.type(text);
+  public async getSpecAsJSON() {
+    const text = await this.monacoEditor.getCodeEditorValue();
+    try {
+      const spec = hjson.parse(text, { legacyRoot: false, keepWsc: true });
+      return {
+        spec,
+        isValid: true,
+      };
+    } catch (err) {
+      return { spec: text, isValid: false };
+    }
   }
 
   public async cleanSpec() {

x-pack/test_serverless/functional/test_suites/common/visualizations/group1/vega_chart.ts

@@ -86,7 +86,11 @@ export default function ({ getPageObjects, getService }: FtrProviderContext) {
         });
 
         it('should render different data in response to filter change', async function () {
-          await PageObjects.vegaChart.typeInSpec('"config": { "kibana": {"renderer": "svg"} },');
+          const { spec, isValid } = await PageObjects.vegaChart.getSpecAsJSON();
+          expect(isValid).to.be(true);
+          // add SVG renderer to read the Y axis labels
+          const updatedSpec = { ...spec, config: { kibana: { renderer: 'svg' } } };
+          await PageObjects.vegaChart.fillSpec(JSON.stringify(updatedSpec, null, 2));
           await PageObjects.visEditor.clickGo();
           await PageObjects.visChart.waitForVisualizationRenderingStabilized();
           const fullDataLabels = await PageObjects.vegaChart.getYAxisLabels();