Vega is now GA (elastic#75157)

* Bringing Vega out of experimental

Closes: elastic#21721

* fix CI group 12

* remove experimental flag from doc

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

docs/visualize/vega.asciidoc

@@ -1,8 +1,6 @@
 [[vega-graph]]
 == Vega
 
-experimental[]
-
 Build custom visualizations using Vega and Vega-Lite, backed by one or more
 data sources including {es}, Elastic Map Service, URL,
 or static data. Use the {kib} extensions to Vega to embed Vega into
@@ -1259,7 +1257,7 @@ Override it by providing a different `stroke`, `fill`, or `color` (Vega-Lite) va
 [[vega-queries]]
 ==== Writing {es} queries in Vega
 
-experimental[] {kib} extends the Vega https://vega.github.io/vega/docs/data/[data] elements
+{kib} extends the Vega https://vega.github.io/vega/docs/data/[data] elements
 with support for direct {es} queries specified as a `url`.
 
 Because of this, {kib} is **unable to support dynamically loaded data**,
@@ -1414,7 +1412,7 @@ try to get about 10-15 data points (buckets).
 [[vega-esmfiles]]
 === Access Elastic Map Service files
 
-experimental[] Access the Elastic Map Service files via the same mechanism:
+Access the Elastic Map Service files via the same mechanism:
 
 [source,yaml]
 ----
@@ -1619,7 +1617,7 @@ kibanaSetTimeFilter(start, end)
 [[vega-useful-links]]
 === Resources and examples
 
-experimental[] To learn more about Vega and Vega-Lite, refer to the resources and examples.
+To learn more about Vega and Vega-Lite, refer to the resources and examples.
 
 ==== Vega editor
 The https://vega.github.io/editor/[Vega Editor] includes examples for Vega & Vega-Lite, but does not support any

src/plugins/vis_type_vega/public/vega_type.ts

@@ -58,7 +58,6 @@ export const createVegaTypeDefinition = (dependencies: VegaVisualizationDependen
     getSupportedTriggers: () => {
       return [VIS_EVENT_TO_TRIGGER.applyFilter];
     },
-    stage: 'experimental',
     inspectorAdapters: createInspectorAdapters,
   };
 };

test/functional/page_objects/vega_chart_page.ts

@@ -33,7 +33,6 @@ export function VegaChartPageProvider({
   const find = getService('find');
   const testSubjects = getService('testSubjects');
   const browser = getService('browser');
-  const { common } = getPageObjects(['common']);
   const retry = getService('retry');
 
   class VegaChartPage {
@@ -49,6 +48,15 @@ export function VegaChartPageProvider({
       return find.byCssSelector('div.vgaVis__controls');
     }
 
+    public getYAxisContainer() {
+      return find.byCssSelector('[aria-label^="Y-axis"]');
+    }
+
+    public async getAceGutterContainer() {
+      const editor = await this.getEditor();
+      return editor.findByClassName('ace_gutter');
+    }
+
     public async getRawSpec() {
       // Adapted from console_page.js:getVisibleTextFromAceEditor(). Is there a common utilities file?
       const editor = await this.getEditor();
@@ -83,20 +91,16 @@ export function VegaChartPageProvider({
     }
 
     public async typeInSpec(text: string) {
-      await this.focusEditor();
+      const aceGutter = await this.getAceGutterContainer();
 
-      let repeats = 20;
-      while (--repeats > 0) {
-        await browser.pressKeys(Key.ARROW_UP);
-        await common.sleep(50);
-      }
-      await browser.pressKeys(Key.ARROW_RIGHT);
+      await aceGutter.doubleClick();
+      await browser.pressKeys(Key.LEFT);
+      await browser.pressKeys(Key.RIGHT);
       await browser.pressKeys(text);
     }
 
     public async cleanSpec() {
-      const editor = await this.getEditor();
-      const aceGutter = await editor.findByClassName('ace_gutter');
+      const aceGutter = await this.getAceGutterContainer();
 
       await retry.try(async () => {
         await aceGutter.doubleClick();
@@ -107,11 +111,11 @@ export function VegaChartPageProvider({
     }
 
     public async getYAxisLabels() {
-      const chart = await testSubjects.find('visualizationLoader');
-      const yAxis = await chart.findByCssSelector('[aria-label^="Y-axis"]');
+      const yAxis = await this.getYAxisContainer();
       const tickGroup = await yAxis.findByClassName('role-axis-label');
       const labels = await tickGroup.findAllByCssSelector('text');
       const labelTexts: string[] = [];
+
       for (const label of labels) {
         labelTexts.push(await label.getVisibleText());
       }