From 983229ca4cfe1defff3232948dce34e106ad6221 Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Mon, 20 Sep 2021 19:47:04 -0700
Subject: [PATCH 1/5] working on clones

---
 .../component/control_group.scss              | 18 ++++++++--
 .../component/control_group_sortable_item.tsx | 36 ++++++++++++-------
 2 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
index a5de7ec60fab3..d19d94e459214 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
@@ -6,11 +6,24 @@
 .controlFrame--cloneWrapper {
   width: max-content;
 
-  .euiFormLabel {
+  .euiFormLabel, div {
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
 
-  .controlFrame--formControlLayout {
+  .draggableButton {
+    cursor: grabbing;
+    height: $euiButtonHeight;
+    align-items: center;
+    padding-right: 4px;
+    border-radius: 6px;
+    @include euiFontSizeS;
+    @include euiFormControlDefaultShadow;
+    font-weight: $euiFontWeightSemiBold;
+    background-color: $euiFormInputGroupLabelBackground;
+    min-width: 200px;
+  }
+
+  .controlFrame--formControlLayout, .draggableButton {
     &-clone {
       box-shadow: 0 0 0 1px $euiShadowColor,
         0 1px 6px 0 $euiShadowColor;
@@ -126,6 +139,7 @@
     .controlFrame--formControlLayout {
       background-color: $euiColorEmptyShade !important;
       color: transparent !important;
+      box-shadow: none;
 
       .euiFormLabel {
         opacity: 0;
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
index a8dac73471988..f3d54bd62eb15 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -6,7 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { EuiFlexItem, EuiFormControlLayout, EuiFormLabel, EuiIcon } from '@elastic/eui';
+import {
+  EuiFlexItem,
+  EuiFormControlLayout,
+  EuiFormLabel,
+  EuiIcon,
+  EuiFlexGroup,
+} from '@elastic/eui';
 import React, { forwardRef, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 
@@ -131,21 +137,25 @@ export const ControlClone = ({
   container: ControlGroupContainer;
 }) => {
   const embeddable = useChildEmbeddable({ embeddableId, container });
+  console.log(embeddable, 'embedabble');
+  console.log(container.getInput().controlStyle, 'container');
 
   return (
     <EuiFlexItem className={'controlFrame--cloneWrapper'}>
-      <EuiFormControlLayout
-        className={'controlFrame--formControlLayout'}
-        fullWidth
-        prepend={
-          <>
-            <button className="controlFrame--dragHandle">
-              <EuiIcon type="grabHorizontal" />
-            </button>
-            <EuiFormLabel htmlFor={embeddableId}>{embeddable?.getInput().title}</EuiFormLabel>
-          </>
-        }
-      />
+      {container.getInput().controlStyle === 'twoLine' ? (
+        <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
+      ) : undefined}
+      {/* <EuiFlexGroup className={'controlFrame--formControlLayout'}> */}
+      <EuiFlexGroup gutterSize="none" className={'draggableButton'}>
+        <EuiFlexItem grow={false}>
+          <EuiIcon type="grabHorizontal" className="controlFrame--dragHandle" />
+        </EuiFlexItem>
+        {container.getInput().controlStyle === 'oneLine' ? (
+          // <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
+          <EuiFlexItem>{embeddable?.getInput().title}</EuiFlexItem>
+        ) : undefined}
+        {/* <EuiFlexItem>{embeddable?.getInput().title}</EuiFlexItem> */}
+      </EuiFlexGroup>
     </EuiFlexItem>
   );
 };

From 695a6570406455e44362992428dea2a0a8cbff98 Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Tue, 21 Sep 2021 13:34:51 -0700
Subject: [PATCH 2/5] fix truncation

---
 .../control_frame/control_frame_component.tsx |  4 ++-
 .../component/control_group.scss              | 34 ++++++++++++++++---
 .../component/control_group_component.tsx     |  6 +++-
 .../component/control_group_sortable_item.tsx | 13 +++++--
 4 files changed, 47 insertions(+), 10 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/controls/control_frame/control_frame_component.tsx b/src/plugins/presentation_util/public/components/controls/control_frame/control_frame_component.tsx
index b4c948b2341d8..ede63fdcd429a 100644
--- a/src/plugins/presentation_util/public/components/controls/control_frame/control_frame_component.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_frame/control_frame_component.tsx
@@ -88,7 +88,9 @@ export const ControlFrame = ({
         <>
           {customPrepend ?? null}
           {usingTwoLineLayout ? undefined : (
-            <EuiFormLabel htmlFor={embeddableId}>{title}</EuiFormLabel>
+            <EuiFormLabel className="controlFrame--formControlLayout__label" htmlFor={embeddableId}>
+              {title}
+            </EuiFormLabel>
           )}
         </>
       }
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
index d19d94e459214..130df60967949 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
@@ -1,3 +1,8 @@
+$smallControl: $euiSize * 14;
+$mediumControl: $euiSize * 25;
+$largeControl: $euiSize * 50;
+$controlMinWidth: $euiSize * 14;
+
 .controlGroup {
   margin-left: $euiSizeXS;
   overflow-x: clip; // sometimes when using auto width, removing a control can cause a horizontal scrollbar to appear.
@@ -6,6 +11,18 @@
 .controlFrame--cloneWrapper {
   width: max-content;
 
+  &-small {
+    width: $smallControl;
+  }
+
+  &-medium {
+    width: $mediumControl;
+  }
+
+  &-large {
+    width: $largeControl;
+  }
+
   .euiFormLabel, div {
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
@@ -20,7 +37,7 @@
     @include euiFormControlDefaultShadow;
     font-weight: $euiFontWeightSemiBold;
     background-color: $euiFormInputGroupLabelBackground;
-    min-width: 200px;
+    min-width: $controlMinWidth;
   }
 
   .controlFrame--formControlLayout, .draggableButton {
@@ -43,9 +60,14 @@
 
   .controlFrame--formControlLayout {
     width: 100%;
-    min-width: $euiSize * 14;
+    min-width: $controlMinWidth;
     transition:background-color .1s, color .1s;
 
+    &__label {
+      @include euiTextTruncate;
+      max-width: 50%;
+    }
+
     &:not(.controlFrame--formControlLayout-clone) {
       .controlFrame--dragHandle {
         cursor: grab;
@@ -62,16 +84,18 @@
     }
   }
 
+
+
   &-small {
-    width: $euiSize * 14;
+    width: $smallControl;
   }
 
   &-medium {
-    width: $euiSize * 25;
+    width: $mediumControl;
   }
 
   &-large {
-    width: $euiSize * 50;
+    width: $largeControl;
   }
 
   &-insertBefore,
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
index e3765e1e89489..544a29af1e6bd 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_component.tsx
@@ -128,7 +128,11 @@ export const ControlGroup = ({ controlGroupContainer, openFlyout }: ControlGroup
           </SortableContext>
           <DragOverlay>
             {draggingId ? (
-              <ControlClone embeddableId={draggingId} container={controlGroupContainer} />
+              <ControlClone
+                width={controlGroupContainer.getInput().panels[draggingId].width}
+                embeddableId={draggingId}
+                container={controlGroupContainer}
+              />
             ) : null}
           </DragOverlay>
         </DndContext>
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
index f3d54bd62eb15..6b775a011c6cd 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -132,16 +132,23 @@ const SortableControlInner = forwardRef<
 export const ControlClone = ({
   embeddableId,
   container,
+  width,
 }: {
   embeddableId: string;
   container: ControlGroupContainer;
+  width: ControlWidth;
 }) => {
   const embeddable = useChildEmbeddable({ embeddableId, container });
-  console.log(embeddable, 'embedabble');
-  console.log(container.getInput().controlStyle, 'container');
 
   return (
-    <EuiFlexItem className={'controlFrame--cloneWrapper'}>
+    <EuiFlexItem
+      className={classNames('controlFrame--cloneWrapper', {
+        'controlFrame--cloneWrapper-small': width === 'small',
+        'controlFrame--cloneWrapper-medium': width === 'medium',
+        'controlFrame--cloneWrapper-large': width === 'large',
+      })}
+      // className={'controlFrame--cloneWrapper'}
+    >
       {container.getInput().controlStyle === 'twoLine' ? (
         <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
       ) : undefined}

From aef204994f18fb56c06f83ad64a95395b892f12b Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Tue, 21 Sep 2021 15:01:47 -0700
Subject: [PATCH 3/5] renamed element

---
 .../controls/control_group/component/control_group.scss  | 9 +++++----
 .../component/control_group_sortable_item.tsx            | 6 +-----
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
index 130df60967949..794631e250b03 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
@@ -27,20 +27,21 @@ $controlMinWidth: $euiSize * 14;
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
 
-  .draggableButton {
+  .controlFrame--draggable {
     cursor: grabbing;
     height: $euiButtonHeight;
     align-items: center;
-    padding-right: 4px;
     border-radius: 6px;
     @include euiFontSizeS;
-    @include euiFormControlDefaultShadow;
     font-weight: $euiFontWeightSemiBold;
+    box-shadow:
+      #{$euiFormControlBoxShadow},
+      inset 0 0 0 1px $euiFormBorderColor;
     background-color: $euiFormInputGroupLabelBackground;
     min-width: $controlMinWidth;
   }
 
-  .controlFrame--formControlLayout, .draggableButton {
+  .controlFrame--formControlLayout, .controlFrame--draggable {
     &-clone {
       box-shadow: 0 0 0 1px $euiShadowColor,
         0 1px 6px 0 $euiShadowColor;
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
index 6b775a011c6cd..6a9588f7e8ea1 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -147,21 +147,17 @@ export const ControlClone = ({
         'controlFrame--cloneWrapper-medium': width === 'medium',
         'controlFrame--cloneWrapper-large': width === 'large',
       })}
-      // className={'controlFrame--cloneWrapper'}
     >
       {container.getInput().controlStyle === 'twoLine' ? (
         <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
       ) : undefined}
-      {/* <EuiFlexGroup className={'controlFrame--formControlLayout'}> */}
-      <EuiFlexGroup gutterSize="none" className={'draggableButton'}>
+      <EuiFlexGroup gutterSize="none" className={'controlFrame--draggable'}>
         <EuiFlexItem grow={false}>
           <EuiIcon type="grabHorizontal" className="controlFrame--dragHandle" />
         </EuiFlexItem>
         {container.getInput().controlStyle === 'oneLine' ? (
-          // <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
           <EuiFlexItem>{embeddable?.getInput().title}</EuiFlexItem>
         ) : undefined}
-        {/* <EuiFlexItem>{embeddable?.getInput().title}</EuiFlexItem> */}
       </EuiFlexGroup>
     </EuiFlexItem>
   );

From 7231eca677c8ef5d150d961f49d382341395f77b Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Tue, 21 Sep 2021 16:47:02 -0700
Subject: [PATCH 4/5] small style changes

---
 .../public/components/controls/__stories__/decorators.tsx     | 2 +-
 .../controls/control_group/component/control_group.scss       | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx b/src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx
index 0aaa0e7a8a533..c5d3cf2c815be 100644
--- a/src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx
+++ b/src/plugins/presentation_util/public/components/controls/__stories__/decorators.tsx
@@ -23,7 +23,7 @@ const panelStyle = {
 
 const kqlBarStyle = { background: bar, padding: 16, minHeight, fontStyle: 'italic' };
 
-const inputBarStyle = { background: '#fff', padding: 4, minHeight };
+const inputBarStyle = { background: '#fff', padding: 4 };
 
 const layout = (OptionStory: Story) => (
   <EuiFlexGroup style={{ background }} direction="column">
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
index 794631e250b03..e4e5ee1dea69d 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
@@ -6,6 +6,8 @@ $controlMinWidth: $euiSize * 14;
 .controlGroup {
   margin-left: $euiSizeXS;
   overflow-x: clip; // sometimes when using auto width, removing a control can cause a horizontal scrollbar to appear.
+  min-height: $euiSize * 4;
+  padding: $euiSize 0;
 }
 
 .controlFrame--cloneWrapper {
@@ -104,7 +106,7 @@ $controlMinWidth: $euiSize * 14;
     .controlFrame--formControlLayout:after {
       content: '';
       position: absolute;
-      background-color: transparentize($euiColorSecondary, .5);
+      background-color: transparentize($euiColorPrimary, .5);
       border-radius: $euiBorderRadius;
       top: 0;
       bottom: 0;

From 8ae7d2961cad98fe4474329f8c2eb08e9f0f4e39 Mon Sep 17 00:00:00 2001
From: andreadelrio <delrio.andre@gmail.com>
Date: Wed, 22 Sep 2021 14:36:12 -0700
Subject: [PATCH 5/5] prevent jumping in twoLine dragging

---
 .../controls/control_group/component/control_group.scss   | 8 ++++++++
 .../component/control_group_sortable_item.tsx             | 5 +++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
index e4e5ee1dea69d..b5a15637b0dc3 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group.scss
@@ -13,6 +13,10 @@ $controlMinWidth: $euiSize * 14;
 .controlFrame--cloneWrapper {
   width: max-content;
 
+  .euiFormLabel {
+    padding-bottom: $euiSizeXS;
+  }
+
   &-small {
     width: $smallControl;
   }
@@ -25,6 +29,10 @@ $controlMinWidth: $euiSize * 14;
     width: $largeControl;
   }
 
+  &-twoLine {
+    margin-top: -$euiSize * 1.25;
+  }
+
   .euiFormLabel, div {
     cursor: grabbing !important; // prevents cursor flickering while dragging the clone
   }
diff --git a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
index 6a9588f7e8ea1..4c40bf2fed570 100644
--- a/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
+++ b/src/plugins/presentation_util/public/components/controls/control_group/component/control_group_sortable_item.tsx
@@ -139,16 +139,17 @@ export const ControlClone = ({
   width: ControlWidth;
 }) => {
   const embeddable = useChildEmbeddable({ embeddableId, container });
-
+  const layout = container.getInput().controlStyle;
   return (
     <EuiFlexItem
       className={classNames('controlFrame--cloneWrapper', {
         'controlFrame--cloneWrapper-small': width === 'small',
         'controlFrame--cloneWrapper-medium': width === 'medium',
         'controlFrame--cloneWrapper-large': width === 'large',
+        'controlFrame--cloneWrapper-twoLine': layout === 'twoLine',
       })}
     >
-      {container.getInput().controlStyle === 'twoLine' ? (
+      {layout === 'twoLine' ? (
         <EuiFormLabel>{embeddable?.getInput().title}</EuiFormLabel>
       ) : undefined}
       <EuiFlexGroup gutterSize="none" className={'controlFrame--draggable'}>