From a7880534cb6b6d7a309d78877199aa2c93863747 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Tue, 29 Sep 2020 16:46:35 -0400
Subject: [PATCH 1/4] A few other minor fixes

---
 .../lens/public/indexpattern_datasource/field_item.tsx |  2 +-
 .../definitions/shared_components/buckets.tsx          | 10 ++++++++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
index 05d732b1f5def..f139bf4def7c1 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -512,7 +512,7 @@ function FieldItemPopoverContents(props: State & FieldItemProps) {
               </EuiFlexItem>
 
               <EuiFlexItem grow={false} className="eui-textTruncate">
-                <EuiText size="s" color="subdued">
+                <EuiText size="xs" color="subdued">
                   {Math.round((otherCount / props.sampledValues!) * 100)}%
                 </EuiText>
               </EuiFlexItem>
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
index 47380f7865578..50471ca84c0d8 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/operations/definitions/shared_components/buckets.tsx
@@ -96,7 +96,13 @@ export const DraggableBucketContainer = ({
   children: React.ReactNode;
 } & BucketContainerProps) => {
   return (
-    <EuiDraggable spacing="m" index={idx} draggableId={id} disableInteractiveElementBlocking>
+    <EuiDraggable
+      style={{ marginBottom: 4 }}
+      spacing="none"
+      index={idx}
+      draggableId={id}
+      disableInteractiveElementBlocking
+    >
       {(provided) => <BucketContainer {...bucketContainerProps}>{children}</BucketContainer>}
     </EuiDraggable>
   );
@@ -134,7 +140,7 @@ export const DragDropBuckets = ({
   };
   return (
     <EuiDragDropContext onDragEnd={handleDragEnd} onDragStart={onDragStart}>
-      <EuiDroppable droppableId={droppableId} spacing="s">
+      <EuiDroppable droppableId={droppableId} spacing="none">
         {children}
       </EuiDroppable>
     </EuiDragDropContext>

From 97ddc8cef24ad1636e994a295421cf1832c11a7b Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 30 Sep 2020 10:19:16 +0200
Subject: [PATCH 2/4] stuff

---
 x-pack/plugins/lens/public/drag_drop/_index.scss   |  1 -
 .../drag_drop/{_drag_drop.scss => drag_drop.scss}  |  3 +++
 x-pack/plugins/lens/public/drag_drop/drag_drop.tsx | 13 +++++++++++--
 .../editor_frame/config_panel/layer_panel.tsx      | 14 ++++++++++++++
 x-pack/plugins/lens/public/index.scss              | 14 --------------
 x-pack/plugins/lens/public/plugin.ts               |  1 -
 6 files changed, 28 insertions(+), 18 deletions(-)
 delete mode 100644 x-pack/plugins/lens/public/drag_drop/_index.scss
 rename x-pack/plugins/lens/public/drag_drop/{_drag_drop.scss => drag_drop.scss} (95%)
 delete mode 100644 x-pack/plugins/lens/public/index.scss

diff --git a/x-pack/plugins/lens/public/drag_drop/_index.scss b/x-pack/plugins/lens/public/drag_drop/_index.scss
deleted file mode 100644
index ddf9b9aa3e429..0000000000000
--- a/x-pack/plugins/lens/public/drag_drop/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'drag_drop';
diff --git a/x-pack/plugins/lens/public/drag_drop/_drag_drop.scss b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
similarity index 95%
rename from x-pack/plugins/lens/public/drag_drop/_drag_drop.scss
rename to x-pack/plugins/lens/public/drag_drop/drag_drop.scss
index 0bcdf7b2c8908..410aaef9a5195 100644
--- a/x-pack/plugins/lens/public/drag_drop/_drag_drop.scss
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.scss
@@ -1,3 +1,6 @@
+@import '../variables';
+@import '../mixins';
+
 .lnsDragDrop {
   transition: background-color $euiAnimSpeedFast ease-in-out, border-color $euiAnimSpeedFast ease-in-out;
 }
diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
index d4a4d04d03852..685ae7b36f229 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+import './drag_drop.scss';
+
 import React, { useState, useContext } from 'react';
 import classNames from 'classnames';
 import { DragContext } from './providers';
@@ -38,6 +40,11 @@ interface BaseProps {
    */
   value?: unknown;
 
+  /**
+   * Optional comparison function to check whether a value is the dragged one
+   */
+  isValueEqual?: (value1: unknown, value2: unknown) => boolean;
+
   /**
    * The React element which will be passed the draggable handlers
    */
@@ -108,12 +115,14 @@ type Props = DraggableProps | NonDraggableProps;
 
 export const DragDrop = (props: Props) => {
   const { dragging, setDragging } = useContext(DragContext);
-  const { value, draggable, droppable } = props;
+  const { value, draggable, droppable, isValueEqual } = props;
   return (
     <DragDropInner
       {...props}
       dragging={droppable ? dragging : undefined}
-      isDragging={!!(draggable && value === dragging)}
+      isDragging={
+        !!(draggable && ((isValueEqual && isValueEqual(value, dragging)) || value === dragging))
+      }
       isNotDroppable={
         // If the configuration has provided a droppable flag, but this particular item is not
         // droppable, then it should be less prominent. Ignores items that are both
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index fef170dfa8d84..5609e0e9f47ad 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -32,6 +32,19 @@ const initialDimensionContainerState = {
   addingToGroupId: null,
 };
 
+// { columnId: accessor, groupId: group.groupId, layerId }
+function isSameConfiguration(config1: unknown, config2: unknown) {
+  return (
+    config1 &&
+    config2 &&
+    typeof config1 === 'object' &&
+    typeof config2 === 'object' &&
+    config1.columnId === config2.columnId &&
+    config1.groupId === config2.groupId &&
+    config1.layerId === config2.layerId
+  );
+}
+
 export function LayerPanel(
   props: Exclude<ConfigPanelWrapperProps, 'state' | 'setState'> & {
     layerId: string;
@@ -217,6 +230,7 @@ export function LayerPanel(
                       data-test-subj={group.dataTestSubj}
                       draggable={!dimensionContainerState.isOpen}
                       value={{ columnId: accessor, groupId: group.groupId, layerId }}
+                      isValueEqual={isSameConfiguration}
                       label={group.groupLabel}
                       droppable={
                         Boolean(dragDropContext.dragging) &&
diff --git a/x-pack/plugins/lens/public/index.scss b/x-pack/plugins/lens/public/index.scss
deleted file mode 100644
index 67bbac12be8c3..0000000000000
--- a/x-pack/plugins/lens/public/index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-// Import the EUI global scope so we can use EUI constants
-@import '@elastic/eui/src/global_styling/variables/index';
-@import '@elastic/eui/src/global_styling/mixins/index';
-
-@import 'variables';
-@import 'mixins';
-
-@import 'app_plugin/index';
-@import 'datatable_visualization/index';
-@import 'drag_drop/index';
-@import 'editor_frame_service/index';
-@import 'indexpattern_datasource/index';
-@import 'xy_visualization/index';
-@import 'metric_visualization/index';
diff --git a/x-pack/plugins/lens/public/plugin.ts b/x-pack/plugins/lens/public/plugin.ts
index 1655a571721f5..d23c9febec29d 100644
--- a/x-pack/plugins/lens/public/plugin.ts
+++ b/x-pack/plugins/lens/public/plugin.ts
@@ -35,7 +35,6 @@ import { EditorFrameStart } from './types';
 import { getLensAliasConfig } from './vis_type_alias';
 import { getSearchProvider } from './search_provider';
 
-import './index.scss';
 import { getLensAttributeService, LensAttributeService } from './lens_attribute_service';
 
 export interface LensPluginSetupDependencies {

From 645974da2d9e501dad8980ecf315e6d41e121d7f Mon Sep 17 00:00:00 2001
From: Joe Reuter <johannes.reuter@elastic.co>
Date: Wed, 30 Sep 2020 10:46:27 +0200
Subject: [PATCH 3/4] fix bugs and styles

---
 .../lens/public/drag_drop/drag_drop.tsx       |  6 ++++--
 .../editor_frame/config_panel/layer_panel.tsx | 19 ++++++++++++++-----
 .../workspace_panel_wrapper.scss              |  2 ++
 .../indexpattern_datasource/field_item.tsx    |  2 +-
 4 files changed, 21 insertions(+), 8 deletions(-)

diff --git a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
index 685ae7b36f229..b36415fee5b15 100644
--- a/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
+++ b/x-pack/plugins/lens/public/drag_drop/drag_drop.tsx
@@ -161,16 +161,18 @@ const DragDropInner = React.memo(function DragDropInner(
     dropType = 'add',
   } = props;
 
+  const isMoveDragging = isDragging && dragType === 'move';
+
   const classes = classNames(
     'lnsDragDrop',
     {
       'lnsDragDrop-isDraggable': draggable,
       'lnsDragDrop-isDragging': isDragging,
-      'lnsDragDrop-isHidden': isDragging && dragType === 'move',
+      'lnsDragDrop-isHidden': isMoveDragging,
       'lnsDragDrop-isDroppable': !draggable,
       'lnsDragDrop-isDropTarget': droppable,
       'lnsDragDrop-isActiveDropTarget': droppable && state.isActive,
-      'lnsDragDrop-isNotDroppable': isNotDroppable,
+      'lnsDragDrop-isNotDroppable': !isMoveDragging && isNotDroppable,
       'lnsDragDrop-isReplacing': droppable && state.isActive && dropType === 'replace',
     },
     className,
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index 5609e0e9f47ad..ce2955da890d7 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -32,13 +32,22 @@ const initialDimensionContainerState = {
   addingToGroupId: null,
 };
 
-// { columnId: accessor, groupId: group.groupId, layerId }
+function isConfiguration(
+  value: unknown
+): value is { columnId: string; groupId: string; layerId: string } {
+  return (
+    value &&
+    typeof value === 'object' &&
+    'columnId' in value &&
+    'groupId' in value &&
+    'layerId' in value
+  );
+}
+
 function isSameConfiguration(config1: unknown, config2: unknown) {
   return (
-    config1 &&
-    config2 &&
-    typeof config1 === 'object' &&
-    typeof config2 === 'object' &&
+    isConfiguration(config1) &&
+    isConfiguration(config2) &&
     config1.columnId === config2.columnId &&
     config1.groupId === config2.groupId &&
     config1.layerId === config2.layerId
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
index d19985003f512..33b9b2fe1dbf0 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/workspace_panel/workspace_panel_wrapper.scss
@@ -1,3 +1,5 @@
+@import '../../../mixins';
+
 .lnsWorkspacePanelWrapper {
   @include euiScrollBar;
   overflow: hidden;
diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
index af6b10124fffa..2fbe23f9085f2 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/field_item.tsx
@@ -185,7 +185,7 @@ export const InnerFieldItem = function InnerFieldItem(props: FieldItemProps) {
       ownFocus
       className="lnsFieldItem__popoverAnchor"
       display="block"
-      data-test-sub="lnsFieldListPanelField"
+      data-test-subj="lnsFieldListPanelField"
       container={document.querySelector<HTMLElement>('.application') || undefined}
       button={
         <DragDrop

From a6c954edb09712395acc0f17bc8b9fedeb40b604 Mon Sep 17 00:00:00 2001
From: cchaos <caroline.horn@elastic.co>
Date: Wed, 30 Sep 2020 09:37:54 -0400
Subject: [PATCH 4/4] One last fix to fields list

---
 .../plugins/lens/public/indexpattern_datasource/datapanel.scss  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
index 155b954e9cf17..df73789eadedf 100644
--- a/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
+++ b/x-pack/plugins/lens/public/indexpattern_datasource/datapanel.scss
@@ -12,7 +12,7 @@
 
 .lnsInnerIndexPatternDataPanel__fieldItems {
   // Quick fix for making sure the shadow and focus rings are visible outside the accordion bounds
-  padding: $euiSizeXS $euiSizeXS 0;
+  padding: $euiSizeXS;
 }
 
 .lnsInnerIndexPatternDataPanel__textField {