From d6e07d7715e7affe3dc3696f4142b9cfc9d02296 Mon Sep 17 00:00:00 2001
From: "Grot (@grafanabot)" <43478413+grafanabot@users.noreply.github.com>
Date: Tue, 23 May 2023 00:21:00 +0200
Subject: [PATCH] [v10.0.x] DS Picker: Use custom scrollbar (#68858)

DS Picker: Use custom scrollbar (#68845)

(cherry picked from commit 9e61172245e6dfc026092d01f905959fd2d88ac3)

Co-authored-by: Ivan Ortega Alba <ivanortegaalba@gmail.com>
---
 .../components/picker/DataSourceDropdown.tsx  | 32 +++++++++----------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
index c63b3deba27..f6b96e79f39 100644
--- a/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceDropdown.tsx
@@ -8,7 +8,7 @@ import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
 import { DataSourceJsonData } from '@grafana/schema';
-import { Button, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
+import { Button, CustomScrollbar, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
 import config from 'app/core/config';
 import { useKeyNavigationListener } from 'app/features/search/hooks/useSearchKeyboardSelection';
 
@@ -212,19 +212,21 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
 
   return (
     <div style={props.style} ref={ref} className={styles.container}>
-      <DataSourceList
-        {...props}
-        enableKeyboardNavigation
-        className={styles.dataSourceList}
-        current={current}
-        onChange={changeCallback}
-        filter={(ds) => matchDataSourceWithSearch(ds, filterTerm)}
-        onClickEmptyStateCTA={() =>
-          reportInteraction(INTERACTION_EVENT_NAME, {
-            item: INTERACTION_ITEM.CONFIG_NEW_DS_EMPTY_STATE,
-          })
-        }
-      ></DataSourceList>
+      <CustomScrollbar>
+        <DataSourceList
+          {...props}
+          enableKeyboardNavigation
+          className={styles.dataSourceList}
+          current={current}
+          onChange={changeCallback}
+          filter={(ds) => matchDataSourceWithSearch(ds, filterTerm)}
+          onClickEmptyStateCTA={() =>
+            reportInteraction(INTERACTION_EVENT_NAME, {
+              item: INTERACTION_ITEM.CONFIG_NEW_DS_EMPTY_STATE,
+            })
+          }
+        ></DataSourceList>
+      </CustomScrollbar>
       <div className={styles.footer}>
         <ModalsController>
           {({ showModal, hideModal }) => (
@@ -267,7 +269,6 @@ PickerContent.displayName = 'PickerContent';
 function getStylesPickerContent(theme: GrafanaTheme2) {
   return {
     container: css`
-      overflow-y: auto;
       display: flex;
       flex-direction: column;
       max-width: 480px;
@@ -279,7 +280,6 @@ function getStylesPickerContent(theme: GrafanaTheme2) {
     `,
     dataSourceList: css`
       flex: 1;
-      overflow: scroll;
     `,
     footer: css`
       flex: 0;