From fc607b0d535cbffdfb50e67b61aa96f8017b5dd5 Mon Sep 17 00:00:00 2001
From: nreese <reese.nathan@elastic.co>
Date: Mon, 31 Oct 2022 12:02:41 -0600
Subject: [PATCH 1/9] [Maps] add in product help for layer group drag and drop
 instructions

---
 .../layer_settings/layer_settings.tsx         | 51 +++++++++++++++++++
 1 file changed, 51 insertions(+)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 6d63fc08ef85e..8be691a5b6395 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -7,6 +7,7 @@
 
 import React, { ChangeEvent, Fragment } from 'react';
 import {
+  EuiCallOut,
   EuiTitle,
   EuiPanel,
   EuiFormRow,
@@ -242,6 +243,55 @@ export function LayerSettings(props: Props) {
     );
   };
 
+  const renderLayerGroupInstructions = () => {
+    return isLayerGroup(props.layer)
+      ? <>
+          <EuiCallOut
+            title={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupCalloutTitle', {
+              defaultMessage: 'Use drag and drop to populate layer group',
+            })}
+            iconType="layers"
+          >
+            <p>
+              {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddText', {
+                defaultMessage: 'To add a layer to the layer group:',
+              })}
+              <ul>
+                <li>
+                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
+                    defaultMessage: 'Drag a layer over the layer group. This will add the layer to the top of the layer group.',
+                  })}
+                </li>
+                <li>
+                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
+                    defaultMessage: 'Drag a layer above a layer in the layer group.',
+                  })}
+                </li>
+              </ul>
+            </p>
+            <p>
+              {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveText', {
+                defaultMessage: 'To remove a layer from the layer group:',
+              })}
+              <ul>
+                <li>
+                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveAbove', {
+                    defaultMessage: 'Drag a layer above the layer group.',
+                  })}
+                </li>
+                <li>
+                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveBelow', {
+                    defaultMessage: 'Drag a layer below the last layer in the layer group.',
+                  })}
+                </li>
+              </ul>
+            </p>
+          </EuiCallOut>
+          <EuiSpacer size="s" />
+        </>
+      : null;
+  };
+
   return (
     <Fragment>
       <EuiPanel>
@@ -255,6 +305,7 @@ export function LayerSettings(props: Props) {
         </EuiTitle>
 
         <EuiSpacer size="m" />
+        {renderLayerGroupInstructions()}
         {renderLabel()}
         {renderZoomSliders()}
         {isLayerGroup(props.layer) ? null : (

From b0d5e7ea094a8584076be51dff254817ceab9420 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Mon, 31 Oct 2022 18:10:04 +0000
Subject: [PATCH 2/9] [CI] Auto-commit changed files from 'node
 scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

---
 .../layer_settings/layer_settings.tsx         | 91 ++++++++++---------
 1 file changed, 46 insertions(+), 45 deletions(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 8be691a5b6395..e8155093850db 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -244,52 +244,53 @@ export function LayerSettings(props: Props) {
   };
 
   const renderLayerGroupInstructions = () => {
-    return isLayerGroup(props.layer)
-      ? <>
-          <EuiCallOut
-            title={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupCalloutTitle', {
-              defaultMessage: 'Use drag and drop to populate layer group',
+    return isLayerGroup(props.layer) ? (
+      <>
+        <EuiCallOut
+          title={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupCalloutTitle', {
+            defaultMessage: 'Use drag and drop to populate layer group',
+          })}
+          iconType="layers"
+        >
+          <p>
+            {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddText', {
+              defaultMessage: 'To add a layer to the layer group:',
+            })}
+            <ul>
+              <li>
+                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
+                  defaultMessage:
+                    'Drag a layer over the layer group. This will add the layer to the top of the layer group.',
+                })}
+              </li>
+              <li>
+                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
+                  defaultMessage: 'Drag a layer above a layer in the layer group.',
+                })}
+              </li>
+            </ul>
+          </p>
+          <p>
+            {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveText', {
+              defaultMessage: 'To remove a layer from the layer group:',
             })}
-            iconType="layers"
-          >
-            <p>
-              {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddText', {
-                defaultMessage: 'To add a layer to the layer group:',
-              })}
-              <ul>
-                <li>
-                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
-                    defaultMessage: 'Drag a layer over the layer group. This will add the layer to the top of the layer group.',
-                  })}
-                </li>
-                <li>
-                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
-                    defaultMessage: 'Drag a layer above a layer in the layer group.',
-                  })}
-                </li>
-              </ul>
-            </p>
-            <p>
-              {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveText', {
-                defaultMessage: 'To remove a layer from the layer group:',
-              })}
-              <ul>
-                <li>
-                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveAbove', {
-                    defaultMessage: 'Drag a layer above the layer group.',
-                  })}
-                </li>
-                <li>
-                  {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveBelow', {
-                    defaultMessage: 'Drag a layer below the last layer in the layer group.',
-                  })}
-                </li>
-              </ul>
-            </p>
-          </EuiCallOut>
-          <EuiSpacer size="s" />
-        </>
-      : null;
+            <ul>
+              <li>
+                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveAbove', {
+                  defaultMessage: 'Drag a layer above the layer group.',
+                })}
+              </li>
+              <li>
+                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveBelow', {
+                  defaultMessage: 'Drag a layer below the last layer in the layer group.',
+                })}
+              </li>
+            </ul>
+          </p>
+        </EuiCallOut>
+        <EuiSpacer size="s" />
+      </>
+    ) : null;
   };
 
   return (

From ce6f28a5c575cc9c9d20b0f7937642c8d38a2e49 Mon Sep 17 00:00:00 2001
From: nreese <reese.nathan@elastic.co>
Date: Mon, 31 Oct 2022 12:23:26 -0600
Subject: [PATCH 3/9] render callout above panel

---
 .../edit_layer_panel/layer_settings/layer_settings.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index e8155093850db..0c4be1c7ef016 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -288,13 +288,14 @@ export function LayerSettings(props: Props) {
             </ul>
           </p>
         </EuiCallOut>
-        <EuiSpacer size="s" />
+        <EuiSpacer size="m" />
       </>
     ) : null;
   };
 
   return (
     <Fragment>
+      {renderLayerGroupInstructions()}
       <EuiPanel>
         <EuiTitle size="xs">
           <h5>
@@ -306,7 +307,6 @@ export function LayerSettings(props: Props) {
         </EuiTitle>
 
         <EuiSpacer size="m" />
-        {renderLayerGroupInstructions()}
         {renderLabel()}
         {renderZoomSliders()}
         {isLayerGroup(props.layer) ? null : (

From a52394c7e49c1c2f9e60e36b0cabe5652e17c362 Mon Sep 17 00:00:00 2001
From: nreese <reese.nathan@elastic.co>
Date: Tue, 1 Nov 2022 11:32:32 -0600
Subject: [PATCH 4/9] review feedback on copy

---
 .../layer_settings/layer_settings.tsx         | 28 +++++--------------
 1 file changed, 7 insertions(+), 21 deletions(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 0c4be1c7ef016..9906a25428dde 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -8,6 +8,7 @@
 import React, { ChangeEvent, Fragment } from 'react';
 import {
   EuiCallOut,
+  EuiText,
   EuiTitle,
   EuiPanel,
   EuiFormRow,
@@ -252,41 +253,26 @@ export function LayerSettings(props: Props) {
           })}
           iconType="layers"
         >
-          <p>
-            {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddText', {
-              defaultMessage: 'To add a layer to the layer group:',
-            })}
+          <EuiText>
             <ul>
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
                   defaultMessage:
-                    'Drag a layer over the layer group. This will add the layer to the top of the layer group.',
+                    'To add your first layer, drag it onto the group name',
                 })}
               </li>
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
-                  defaultMessage: 'Drag a layer above a layer in the layer group.',
-                })}
-              </li>
-            </ul>
-          </p>
-          <p>
-            {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveText', {
-              defaultMessage: 'To remove a layer from the layer group:',
-            })}
-            <ul>
-              <li>
-                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveAbove', {
-                  defaultMessage: 'Drag a layer above the layer group.',
+                  defaultMessage: 'To add another layer, drag it anywhere above the last layer in the group',
                 })}
               </li>
               <li>
-                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemoveBelow', {
-                  defaultMessage: 'Drag a layer below the last layer in the layer group.',
+                {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemove', {
+                  defaultMessage: 'To remove a layer, drag it above or below the group',
                 })}
               </li>
             </ul>
-          </p>
+          </EuiText>
         </EuiCallOut>
         <EuiSpacer size="m" />
       </>

From b70379e004503417abdfd9510fd2fb4e4f670308 Mon Sep 17 00:00:00 2001
From: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Date: Tue, 1 Nov 2022 17:39:08 +0000
Subject: [PATCH 5/9] [CI] Auto-commit changed files from 'node
 scripts/precommit_hook.js --ref HEAD~1..HEAD --fix'

---
 .../edit_layer_panel/layer_settings/layer_settings.tsx      | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 9906a25428dde..822747971f9d6 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -257,13 +257,13 @@ export function LayerSettings(props: Props) {
             <ul>
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
-                  defaultMessage:
-                    'To add your first layer, drag it onto the group name',
+                  defaultMessage: 'To add your first layer, drag it onto the group name',
                 })}
               </li>
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
-                  defaultMessage: 'To add another layer, drag it anywhere above the last layer in the group',
+                  defaultMessage:
+                    'To add another layer, drag it anywhere above the last layer in the group',
                 })}
               </li>
               <li>

From 7019c03295237d95f0391a8f3b197bf3eabe5951 Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 2 Nov 2022 08:54:38 -0600
Subject: [PATCH 6/9] Update
 x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
---
 .../edit_layer_panel/layer_settings/layer_settings.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 822747971f9d6..2284dd687211a 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -257,7 +257,7 @@ export function LayerSettings(props: Props) {
             <ul>
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToFront', {
-                  defaultMessage: 'To add your first layer, drag it onto the group name',
+                  defaultMessage: 'To add your first layer, drag it onto the group name.',
                 })}
               </li>
               <li>

From d39ba0e7c13293a44f8e32bb7fc30fe955fd3fdf Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 2 Nov 2022 08:54:46 -0600
Subject: [PATCH 7/9] Update
 x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
---
 .../edit_layer_panel/layer_settings/layer_settings.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 2284dd687211a..11643e8396d01 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -263,7 +263,7 @@ export function LayerSettings(props: Props) {
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupAddToPosition', {
                   defaultMessage:
-                    'To add another layer, drag it anywhere above the last layer in the group',
+                    'To add another layer, drag it anywhere above the last layer in the group.',
                 })}
               </li>
               <li>

From a18f47c6830362245a907567f970a8a82bcd1fcf Mon Sep 17 00:00:00 2001
From: Nathan Reese <reese.nathan@gmail.com>
Date: Wed, 2 Nov 2022 08:54:56 -0600
Subject: [PATCH 8/9] Update
 x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx

Co-authored-by: gchaps <33642766+gchaps@users.noreply.github.com>
---
 .../edit_layer_panel/layer_settings/layer_settings.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 11643e8396d01..80663c4c7d236 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -268,7 +268,7 @@ export function LayerSettings(props: Props) {
               </li>
               <li>
                 {i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupRemove', {
-                  defaultMessage: 'To remove a layer, drag it above or below the group',
+                  defaultMessage: 'To remove a layer, drag it above or below the group.',
                 })}
               </li>
             </ul>

From 7c79756221b843880912fa334d01391d1be4706a Mon Sep 17 00:00:00 2001
From: nreese <reese.nathan@elastic.co>
Date: Wed, 2 Nov 2022 08:57:06 -0600
Subject: [PATCH 9/9] update title

---
 .../edit_layer_panel/layer_settings/layer_settings.tsx          | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 80663c4c7d236..162f43f0911a6 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -249,7 +249,7 @@ export function LayerSettings(props: Props) {
       <>
         <EuiCallOut
           title={i18n.translate('xpack.maps.layerPanel.settingsPanel.layerGroupCalloutTitle', {
-            defaultMessage: 'Use drag and drop to populate layer group',
+            defaultMessage: 'Drag layers in and out of the group',
           })}
           iconType="layers"
         >