From 01a3a3c4c828809b6d73c84864a4a758774fcc8e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.org>
Date: Thu, 20 May 2021 06:52:37 +0200
Subject: [PATCH] DataLinks: Minor tweaks to links suggestions (#34423)

---
 .../grafana-ui/src/components/DataLinks/DataLinkInput.tsx  | 7 +++++--
 .../src/components/DataLinks/DataLinkSuggestions.tsx       | 1 -
 .../DataLinksInlineEditor/DataLinksInlineEditor.tsx        | 1 +
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
index 387358c2990..011da4b4d2e 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkInput.tsx
@@ -55,6 +55,9 @@ const getStyles = (theme: GrafanaTheme2) => ({
       color: ${theme.colors.primary.text};
     }
   `,
+  suggestionsWrapper: css`
+    box-shadow: ${theme.shadows.z2};
+  `,
   // Wrapper with child selector needed.
   // When classnames are applied to the same element as the wrapper, it causes the suggestions to stop working
   wrapperOverrides: css`
@@ -155,7 +158,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
               <Portal>
                 <ReactPopper
                   referenceElement={selectionRef}
-                  placement="top-end"
+                  placement="bottom-end"
                   modifiers={[
                     {
                       name: 'preventOverflow',
@@ -178,7 +181,7 @@ export const DataLinkInput: React.FC<DataLinkInputProps> = memo(
                 >
                   {({ ref, style, placement }) => {
                     return (
-                      <div ref={ref} style={style} data-placement={placement}>
+                      <div ref={ref} style={style} data-placement={placement} className={styles.suggestionsWrapper}>
                         <CustomScrollbar scrollTop={activeIndexPosition} autoHeightMax="300px">
                           <DataLinkSuggestions
                             activeRef={activeRef}
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
index 91100d26bb8..e3dff49688c 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinkSuggestions.tsx
@@ -25,7 +25,6 @@ const getStyles = (theme: GrafanaTheme2) => {
     wrapper: css`
       background: ${theme.colors.background.primary};
       width: 250px;
-      box-shadow: 0 5px 10px 0 ${theme.shadows.z1};
     `,
     item: css`
       background: none;
diff --git a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
index fa616844cb7..c4e56940a23 100644
--- a/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
+++ b/packages/grafana-ui/src/components/DataLinks/DataLinksInlineEditor/DataLinksInlineEditor.tsx
@@ -89,6 +89,7 @@ export const DataLinksInlineEditor: React.FC<DataLinksInlineEditorProps> = ({
         <Modal
           title="Edit link"
           isOpen={true}
+          closeOnBackdropClick={false}
           onDismiss={() => {
             onDataLinkCancel(editIndex);
           }}