[Lens] fix drag and drop failing test (#215439)

## Summary

Fixes #213324

For some reason this PR #213928
didn't catch that the changes make the test fail. This PR fixes it.
After this, we'll be able to backport the original PR.
(The pattern of using `data-attr-field` is already used in Discover so I
think it's a good opportunity to align)

---------

Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Nick Partridge <[email protected]>

Author: 3 people

x-pack/platform/plugins/shared/lens/public/datasources/common/field_item.tsx

@@ -244,7 +244,7 @@ export function InnerFieldItem(props: FieldItemProps) {
   }, [dataViewField, filters, hideDetails, indexPattern, query, services]);
 
   return (
-    <li>
+    <li data-attr-field={field.name}>
       <FieldPopover
         isOpen={infoIsOpen}
         closePopover={closePopover}

x-pack/test/functional/apps/lens/group5/drag_and_drop.ts

@@ -14,8 +14,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
   const listingTable = getService('listingTable');
   const xyChartContainer = 'xyVisChart';
 
-  // Failing: See https://github.com/elastic/kibana/issues/213324
-  describe.skip('lens drag and drop tests', () => {
+  describe('lens drag and drop tests', () => {
     describe('basic drag and drop', () => {
       it('should construct a bar chart when dropping a field to create top values chart', async () => {
         await visualize.navigateToNewVisualization();
@@ -260,7 +259,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await lens.assertFocusedField('clientip');
       });
       it('should duplicate an element in a group', async () => {
-        await lens.dimensionKeyboardDragDrop('lnsXY_yDimensionPanel', 0, 2);
+        await lens.dimensionKeyboardDragDrop('lnsXY_yDimensionPanel', 0, 1);
         expect(await lens.getDimensionTriggersTexts('lnsXY_yDimensionPanel')).to.eql([
           'Count of records',
           'Median of bytes',

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

@@ -398,7 +398,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       metaKey?: 'shift' | 'alt' | 'ctrl'
     ) {
       const field = await find.byCssSelector(
-        `[data-test-subj="lnsFieldListPanelField-${fieldName}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
+        `[data-attr-field="${fieldName}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
       );
       await field.focus();
       await retry.try(async () => {
@@ -433,17 +433,21 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       metaKey?: 'shift' | 'alt' | 'ctrl'
     ) {
       const elements = await find.allByCssSelector(
-        `[data-test-subj="${group}"]  [data-test-subj="lnsDragDrop-keyboardHandler"]`
+        `[data-test-subj="${group}"] [data-test-subj="lnsDragDrop-keyboardHandler"]`
       );
       const el = elements[index];
       await el.focus();
       await browser.pressKeys(browser.keys.ENTER);
       for (let i = 0; i < steps; i++) {
+        // This needs to be slowed down to avoid flakiness
+        await common.sleep(200);
         await browser.pressKeys(reverse ? browser.keys.LEFT : browser.keys.RIGHT);
       }
       if (metaKey) {
         await this.pressMetaKey(metaKey);
       }
+
+      await common.sleep(200);
       await browser.pressKeys(browser.keys.ENTER);
 
       await this.waitForLensDragDropToFinish();
@@ -465,8 +469,12 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
       await el.focus();
       await browser.pressKeys(browser.keys.ENTER);
       for (let i = 0; i < steps; i++) {
+        // This needs to be slowed down to avoid flakiness
+        await common.sleep(200);
         await browser.pressKeys(reverse ? browser.keys.ARROW_UP : browser.keys.ARROW_DOWN);
       }
+
+      await common.sleep(200);
       await browser.pressKeys(browser.keys.ENTER);
 
       await this.waitForLensDragDropToFinish();
@@ -1539,10 +1547,10 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
      */
     async assertFocusedField(name: string) {
       const input = await find.activeElement();
-      const fieldAncestor = await input.findByXpath('./../..');
-      const focusedElementText = await fieldAncestor.getVisibleText();
-      const dataTestSubj = await fieldAncestor.getAttribute('data-test-subj');
+      const fieldPopover = await input.findByXpath('./..');
+      const focusedElementText = await fieldPopover.getVisibleText();
       expect(focusedElementText).to.eql(name);
+      const dataTestSubj = await fieldPopover.getAttribute('data-test-subj');
       expect(dataTestSubj).to.eql('lnsFieldListPanelField');
     },
 
@@ -1553,7 +1561,7 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
      */
     async assertFocusedDimension(name: string) {
       const input = await find.activeElement();
-      const fieldAncestor = await input.findByXpath('./../../..');
+      const fieldAncestor = await input.findByXpath('./../..');
       const focusedElementText = await fieldAncestor.getVisibleText();
       expect(focusedElementText).to.eql(name);
     },