From 98556375406b43f0c15bd3f0dc5d2a517ce45441 Mon Sep 17 00:00:00 2001 From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Date: Wed, 12 Mar 2025 12:30:51 +0100 Subject: [PATCH 1/2] [Lens] fix drag and drop ghost after Chrome update to 134 (#213928) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Summary Fixes https://github.com/elastic/kibana/issues/213708 Fixes the ghost display. As @nickofthyme pointed out [here](https://github.com/elastic/kibana/issues/213708#issuecomment-2712076212), the reason was using inset-inline-start: -10000px for the keyboard handler that is one of the children of the draggable component. The quick fix is to just move it outside of the html element that is dragged. @markov00 please assesswhere it should be merged 🙏🏼 --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com> (cherry picked from commit 84ae9c98c208957b3efc02c6b00bed8d567d4209) --- packages/kbn-dom-drag-drop/src/draggable.tsx | 36 ++++++++++--------- test/functional/page_objects/discover_page.ts | 2 +- 2 files changed, 21 insertions(+), 17 deletions(-) diff --git a/packages/kbn-dom-drag-drop/src/draggable.tsx b/packages/kbn-dom-drag-drop/src/draggable.tsx index f5edb5176a658..a547ec6c44b98 100644 --- a/packages/kbn-dom-drag-drop/src/draggable.tsx +++ b/packages/kbn-dom-drag-drop/src/draggable.tsx @@ -345,20 +345,7 @@ const DraggableImpl = memo(function DraggableImpl({ hoveredDropTarget.dropType !== 'reorder'; return ( -
+ <>
+
+ {children} +
+ ); }); diff --git a/test/functional/page_objects/discover_page.ts b/test/functional/page_objects/discover_page.ts index 56f6e53ffa052..3c3d61127330a 100644 --- a/test/functional/page_objects/discover_page.ts +++ b/test/functional/page_objects/discover_page.ts @@ -809,7 +809,7 @@ export class DiscoverPageObject extends FtrService { * */ public async dragFieldWithKeyboardToTable(fieldName: string) { const field = await this.find.byCssSelector( - `[data-test-subj="dscFieldListPanelField-${fieldName}"] [data-test-subj="domDragDrop-keyboardHandler"]` + `[data-attr-field="${fieldName}"] [data-test-subj="domDragDrop-keyboardHandler"]` ); await field.focus(); await this.retry.try(async () => { From 5b00f2968af30a470e2b1e8fb7cf2393da9029f7 Mon Sep 17 00:00:00 2001 From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com> Date: Sat, 22 Mar 2025 00:21:35 +0100 Subject: [PATCH 2/2] [Lens] fix drag and drop failing test (#215439) ## Summary Fixes https://github.com/elastic/kibana/issues/213324 For some reason this PR https://github.com/elastic/kibana/pull/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 <42973632+kibanamachine@users.noreply.github.com> Co-authored-by: Nick Partridge --- .../public/datasources/common/field_item.tsx | 2 +- .../test/functional/page_objects/lens_page.ts | 20 +++++++++++++------ 2 files changed, 15 insertions(+), 7 deletions(-) diff --git a/x-pack/plugins/lens/public/datasources/common/field_item.tsx b/x-pack/plugins/lens/public/datasources/common/field_item.tsx index b76dc9f4b9641..78e2dfa0dd146 100644 --- a/x-pack/plugins/lens/public/datasources/common/field_item.tsx +++ b/x-pack/plugins/lens/public/datasources/common/field_item.tsx @@ -246,7 +246,7 @@ export function InnerFieldItem(props: FieldItemProps) { }, [dataViewField, filters, hideDetails, indexPattern, query, services]); return ( -
  • +
  • { @@ -432,17 +432,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(); @@ -464,8 +468,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(); @@ -1528,10 +1536,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'); }, @@ -1542,7 +1550,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); },