From a8acaa3681f3f94d6dfab2d35b24b3e596b584ac Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Thu, 18 May 2023 20:20:28 +0200
Subject: [PATCH] [v10.0.x] DS Picker takes the max height available and flip
 when needed (#68729)

DS Picker takes the max height available and flip when needed (#68698)

(cherry picked from commit 49467b3e5a9610ccb6c15aa75fe1fc4e91d936ee)

Co-authored-by: Juan Cabanas <juan.cabanas@grafana.com>
Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
---
 .../components/picker/DataSourceDropdown.tsx  | 10 +++--
 .../components/picker/popperModifiers.ts      | 38 +++++++++++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)
 create mode 100644 public/app/features/datasources/components/picker/popperModifiers.ts

diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
index 4038aaf1f25..c63b3deba27 100644
--- a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
@@ -17,6 +17,7 @@ import { useDatasource } from '../../hooks';
 import { DataSourceList } from './DataSourceList';
 import { DataSourceLogo, DataSourceLogoPlaceHolder } from './DataSourceLogo';
 import { DataSourceModal } from './DataSourceModal';
+import { applyMaxSize, maxSize } from './popperModifiers';
 import { PickerContentProps, DataSourceDropdownProps } from './types';
 import { dataSourceLabel, matchDataSourceWithSearch } from './utils';
 
@@ -79,6 +80,8 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
           offset: [0, 4],
         },
       },
+      maxSize,
+      applyMaxSize,
     ],
   });
 
@@ -161,7 +164,8 @@ export function DataSourceDropdown(props: DataSourceDropdownProps) {
               ref={setSelectorElement}
               {...restProps}
               onDismiss={onClose}
-            ></PickerContent>
+              {...popper.attributes.popper}
+            />
           </div>
         </Portal>
       ) : null}
@@ -263,10 +267,10 @@ PickerContent.displayName = 'PickerContent';
 function getStylesPickerContent(theme: GrafanaTheme2) {
   return {
     container: css`
+      overflow-y: auto;
       display: flex;
       flex-direction: column;
-      height: 412px;
-      width: 480px;
+      max-width: 480px;
       background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z3};
     `,
diff --git a/public/app/features/datasources/components/picker/popperModifiers.ts b/public/app/features/datasources/components/picker/popperModifiers.ts
new file mode 100644
index 00000000000..a4eeb2069c3
--- /dev/null
+++ b/public/app/features/datasources/components/picker/popperModifiers.ts
@@ -0,0 +1,38 @@
+import { detectOverflow, Modifier, ModifierArguments } from '@popperjs/core';
+
+const MODAL_MARGIN = 20;
+const FLIP_THRESHOLD = 200;
+
+export const maxSize: Modifier<'maxSize', {}> = {
+  name: 'maxSize',
+  enabled: true,
+  phase: 'main',
+  requires: ['offset', 'preventOverflow', 'flip'],
+  fn({ state, name, options }: ModifierArguments<{}>) {
+    const overflow = detectOverflow(state, options);
+    const { x, y } = state.modifiersData.preventOverflow || { x: 0, y: 0 };
+    const { width, height } = state.rects.popper;
+    const [basePlacement] = state.placement.split('-');
+
+    const widthProp = basePlacement === 'left' ? 'left' : 'right';
+    const heightProp = basePlacement === 'top' ? 'top' : 'bottom';
+
+    state.modifiersData[name] = {
+      width: width - overflow[widthProp] - x,
+      height: height - overflow[heightProp] - y,
+    };
+  },
+};
+
+export const applyMaxSize: Modifier<'applyMaxSize', {}> = {
+  name: 'applyMaxSize',
+  enabled: true,
+  phase: 'beforeWrite',
+  requires: ['maxSize'],
+  fn({ state }: ModifierArguments<{}>) {
+    const { height, width } = state.modifiersData.maxSize;
+    state.styles.popper.maxHeight = `${height - MODAL_MARGIN}px`;
+    state.styles.popper.minHeight = `${FLIP_THRESHOLD}px`;
+    state.styles.popper.maxWidth = width;
+  },
+};