From db7b8f516ba82efa785e0c1d9b48512d648b5035 Mon Sep 17 00:00:00 2001
From: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
Date: Mon, 24 Jul 2023 17:04:47 +0200
Subject: [PATCH] [Lens] fix drag and drop overlay (#162310)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Summary

Fixes https://github.com/elastic/kibana/issues/160735

When implementing drag and drop for the first time, to move smoothly
between the main drop target and extra drop targets (duplicate or swap),
I created an extra overlay path that keeps the elements visible when
moving around (so when user drags out of the main drop target in the
direction of extra targets, we don't loose their visibility)

Turns out it started causing the 🔝 bug in the recent versions.

This solution is not needed anymore though. Right now we keep elements
visible for a few seconds when user drags out no matter where the mouse
cursor is, so that's enough to go from main target to extra targets.

Here's the overlay path I removed (I added yellow transparent background
so it's more visible)
<img width="485" alt="Screenshot 2023-07-20 at 13 34 41"
src="https://github.com/elastic/kibana/assets/4283304/69acb1ff-1ada-4987-b47e-da282f8b992d">
---
 packages/kbn-dom-drag-drop/src/drag_drop.tsx  | 60 ++++++-------------
 .../kbn-dom-drag-drop/src/sass/drag_drop.scss |  9 +--
 2 files changed, 20 insertions(+), 49 deletions(-)

diff --git a/packages/kbn-dom-drag-drop/src/drag_drop.tsx b/packages/kbn-dom-drag-drop/src/drag_drop.tsx
index 66cb11bc15ad4..ab4158ad31543 100644
--- a/packages/kbn-dom-drag-drop/src/drag_drop.tsx
+++ b/packages/kbn-dom-drag-drop/src/drag_drop.tsx
@@ -628,21 +628,6 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) {
 
   const mainTargetProps = getProps(dropTypes && dropTypes[0]);
 
-  const extraDropStyles = useMemo(() => {
-    const extraDrops = dropTypes && dropTypes.length && dropTypes.slice(1);
-    if (!extraDrops || !extraDrops.length) {
-      return;
-    }
-
-    const height = extraDrops.length * 40;
-    const minHeight = height - (mainTargetRef.current?.clientHeight || 40);
-    const clipPath = `polygon(100% 0px, 100% ${height - minHeight}px, 0 100%, 0 0)`;
-    return {
-      clipPath,
-      height,
-    };
-  }, [dropTypes]);
-
   return (
     <div
       data-test-subj={`${dataTestSubjPrefix}Container`}
@@ -658,32 +643,25 @@ const DropsInner = memo(function DropsInner(props: DropsInnerProps) {
         children={children}
       />
       {dropTypes && dropTypes.length > 1 && (
-        <>
-          <div
-            className="domDragDrop__diamondPath"
-            style={extraDropStyles}
-            onDragEnter={dragEnter}
-          />
-          <EuiFlexGroup
-            gutterSize="none"
-            direction="column"
-            data-test-subj={`${dataTestSubjPrefix}ExtraDrops`}
-            className={classNames('domDragDrop__extraDrops', {
-              'domDragDrop__extraDrops-visible': isInZone || activeDropTarget?.id === value.id,
-            })}
-          >
-            {dropTypes.slice(1).map((dropType) => {
-              const dropChildren = getCustomDropTarget?.(dropType);
-              return dropChildren ? (
-                <EuiFlexItem key={dropType} className="domDragDrop__extraDropWrapper">
-                  <SingleDropInner {...getProps(dropType, dropChildren)}>
-                    {dropChildren}
-                  </SingleDropInner>
-                </EuiFlexItem>
-              ) : null;
-            })}
-          </EuiFlexGroup>
-        </>
+        <EuiFlexGroup
+          gutterSize="none"
+          direction="column"
+          data-test-subj={`${dataTestSubjPrefix}ExtraDrops`}
+          className={classNames('domDragDrop__extraDrops', {
+            'domDragDrop__extraDrops-visible': isInZone || activeDropTarget?.id === value.id,
+          })}
+        >
+          {dropTypes.slice(1).map((dropType) => {
+            const dropChildren = getCustomDropTarget?.(dropType);
+            return dropChildren ? (
+              <EuiFlexItem key={dropType} className="domDragDrop__extraDropWrapper">
+                <SingleDropInner {...getProps(dropType, dropChildren)}>
+                  {dropChildren}
+                </SingleDropInner>
+              </EuiFlexItem>
+            ) : null;
+          })}
+        </EuiFlexGroup>
       )}
     </div>
   );
diff --git a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss
index ffea63cf94cef..d586d86761cb5 100644
--- a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss
+++ b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss
@@ -154,19 +154,12 @@ $reorderItemMargin: $euiSizeS;
   visibility: visible;
 }
 
-.domDragDrop__diamondPath {
-  position: absolute;
-  width: 30%;
-  top: 0;
-  left: -$euiSize;
-  z-index: $domDragDropZLevel0;
-}
-
 .domDragDrop__extraDropWrapper {
   position: relative;
   width: 100%;
   height: 100%;
   background: $euiColorLightestShade;
+  border-radius: $euiSizeXS;
 
   .domDragDrop__extraDrop,
   .domDragDrop__extraDrop:before {