[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 49467b3e5a)

Co-authored-by: Juan Cabanas <juan.cabanas@grafana.com>
Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>

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;
+      max-width: 480px;
-      width: 480px;
       background: ${theme.colors.background.primary};
       box-shadow: ${theme.shadows.z3};
     `,

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;
+  },
+};