From ee7f521c084d7c16cf75e19f412ee9cce6bdfa03 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 11 Nov 2024 09:50:35 +0000
Subject: [PATCH] ScrollContainer: Use `ScrollContainer` in some dashboard
 components (#95668)

* use ScrollContainer in some dashboard components

* remove unnecessary wrapper

* remove unnecessary minHeight
---
 .../src/components/VizLayout/VizLayout.tsx    |  4 ++--
 .../panel-edit/PanelOptionsPane.tsx           | 11 +++------
 .../panel-edit/PanelVizTypePicker.tsx         |  7 +++---
 .../PanelEditor/OptionsPaneOptions.tsx        | 15 ++++--------
 .../PanelEditor/VisualizationSelectPane.tsx   |  7 +++---
 .../TransformationsEditor.tsx                 | 24 +++++++++----------
 .../components/picker/DataSourceModal.tsx     | 23 +++++++-----------
 .../components/picker/DataSourcePicker.tsx    |  7 +++---
 .../scopes/internal/ScopesDashboardsScene.tsx |  7 +++---
 9 files changed, 46 insertions(+), 59 deletions(-)

diff --git a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
index 29fa9ddc0b7..6194b3ac6b2 100644
--- a/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
+++ b/packages/grafana-ui/src/components/VizLayout/VizLayout.tsx
@@ -8,7 +8,7 @@ import { LegendPlacement } from '@grafana/schema';
 
 import { useStyles2, useTheme2 } from '../../themes/ThemeContext';
 import { getFocusStyles } from '../../themes/mixins';
-import { CustomScrollbar } from '../CustomScrollbar/CustomScrollbar';
+import { ScrollContainer } from '../ScrollContainer/ScrollContainer';
 
 /**
  * @beta
@@ -98,7 +98,7 @@ export const VizLayout: VizLayoutComponentType = ({ width, height, legend, child
     <div style={containerStyle}>
       <div className={styles.viz}>{size && children(size.width, size.height)}</div>
       <div style={legendStyle} ref={legendRef}>
-        <CustomScrollbar hideHorizontalTrack>{legend}</CustomScrollbar>
+        <ScrollContainer>{legend}</ScrollContainer>
       </div>
     </div>
   );
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx
index 85566677b42..128e0049791 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelOptionsPane.tsx
@@ -23,6 +23,7 @@ import {
   sceneGraph,
 } from '@grafana/scenes';
 import { Button, Card, FilterInput, RadioButtonGroup, Stack, ToolbarButton, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { Trans } from 'app/core/internationalization';
 import { OptionFilter } from 'app/features/dashboard/components/PanelEditor/OptionsPaneOptions';
 import { getPanelPluginNotFound } from 'app/features/panel/components/PanelPluginError';
@@ -175,9 +176,9 @@ export class PanelOptionsPane extends SceneObjectBase<PanelOptionsPaneState> {
                 </AngularDeprecationPluginNotice>
               </div>
             )}
-            <div className={styles.listOfOptions}>
+            <ScrollContainer>
               <PanelOptions panel={panel} searchQuery={searchQuery} listMode={listMode} data={data} />
-            </div>
+            </ScrollContainer>
           </>
         )}
         {isVizPickerOpen && (
@@ -201,12 +202,6 @@ function getStyles(theme: GrafanaTheme2) {
       padding: theme.spacing(2, 1),
       gap: theme.spacing(2),
     }),
-    listOfOptions: css({
-      display: 'flex',
-      flexDirection: 'column',
-      flexGrow: '1',
-      overflow: 'auto',
-    }),
     searchOptions: css({
       minHeight: theme.spacing(4),
     }),
diff --git a/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx b/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx
index e2757499d8e..32d5614fb83 100644
--- a/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx
+++ b/public/app/features/dashboard-scene/panel-edit/PanelVizTypePicker.tsx
@@ -7,7 +7,8 @@ import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
 import { VizPanel } from '@grafana/scenes';
-import { Button, CustomScrollbar, Field, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { Button, Field, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
 import { VisualizationSelectPaneTab } from 'app/features/dashboard/components/PanelEditor/types';
 import { VisualizationSuggestions } from 'app/features/panel/components/VizTypePicker/VisualizationSuggestions';
@@ -100,7 +101,7 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose }: Props) {
       <Field className={styles.customFieldMargin}>
         <RadioButtonGroup options={radioOptions} value={listMode} onChange={handleListModeChange} fullWidth />
       </Field>
-      <CustomScrollbar>
+      <ScrollContainer>
         {listMode === VisualizationSelectPaneTab.Visualizations && (
           <VizTypePicker
             pluginId={panel.state.pluginId}
@@ -118,7 +119,7 @@ export function PanelVizTypePicker({ panel, data, onChange, onClose }: Props) {
             data={data}
           />
         )}
-      </CustomScrollbar>
+      </ScrollContainer>
     </div>
   );
 }
diff --git a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
index e843b9848c0..0ad106559d9 100644
--- a/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/OptionsPaneOptions.tsx
@@ -4,7 +4,8 @@ import * as React from 'react';
 
 import { GrafanaTheme2, SelectableValue } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { AngularDeprecationPluginNotice } from 'app/features/plugins/angularDeprecation/AngularDeprecationPluginNotice';
 
 import { isPanelModelLibraryPanel } from '../../../library-panels/guard';
@@ -129,11 +130,9 @@ export const OptionsPaneOptions = (props: OptionPaneRenderProps) => {
           </div>
         )}
       </div>
-      <div className={styles.scrollWrapper}>
-        <CustomScrollbar autoHeightMin="100%">
-          <div className={styles.mainBox}>{mainBoxElements}</div>
-        </CustomScrollbar>
-      </div>
+      <ScrollContainer>
+        <div className={styles.mainBox}>{mainBoxElements}</div>
+      </ScrollContainer>
     </div>
   );
 };
@@ -207,10 +206,6 @@ const getStyles = (theme: GrafanaTheme2) => ({
   searchHits: css({
     padding: theme.spacing(1, 1, 0, 1),
   }),
-  scrollWrapper: css({
-    flexGrow: 1,
-    minHeight: 0,
-  }),
   searchNotice: css({
     fontSize: theme.typography.size.sm,
     color: theme.colors.text.secondary,
diff --git a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
index cfe3a96f7f3..4b516a253bc 100644
--- a/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
+++ b/public/app/features/dashboard/components/PanelEditor/VisualizationSelectPane.tsx
@@ -4,8 +4,9 @@ import { useLocalStorage } from 'react-use';
 
 import { GrafanaTheme2, PanelData, SelectableValue } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { Button, CustomScrollbar, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
+import { Button, FilterInput, RadioButtonGroup, useStyles2 } from '@grafana/ui';
 import { Field } from '@grafana/ui/src/components/Forms/Field';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { LS_VISUALIZATION_SELECT_TAB_KEY } from 'app/core/constants';
 import { PanelLibraryOptionsGroup } from 'app/features/library-panels/components/PanelLibraryOptionsGroup/PanelLibraryOptionsGroup';
 import { VisualizationSuggestions } from 'app/features/panel/components/VizTypePicker/VisualizationSuggestions';
@@ -93,7 +94,7 @@ export const VisualizationSelectPane = ({ panel, data }: Props) => {
         </Field>
       </div>
       <div className={styles.scrollWrapper}>
-        <CustomScrollbar autoHeightMin="100%">
+        <ScrollContainer>
           <div className={styles.scrollContent}>
             {listMode === VisualizationSelectPaneTab.Visualizations && (
               <VizTypePicker pluginId={plugin.meta.id} onChange={onVizChange} searchQuery={searchQuery} />
@@ -105,7 +106,7 @@ export const VisualizationSelectPane = ({ panel, data }: Props) => {
               <PanelLibraryOptionsGroup searchQuery={searchQuery} panel={panel} key="Panel Library" />
             )}
           </div>
-        </CustomScrollbar>
+        </ScrollContainer>
       </div>
     </div>
   );
diff --git a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
index 62771c558d5..8f7240fda3c 100644
--- a/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
+++ b/public/app/features/dashboard/components/TransformationsEditor/TransformationsEditor.tsx
@@ -1,5 +1,5 @@
 import { DragDropContext, Droppable, DropResult } from '@hello-pangea/dnd';
-import { ChangeEvent } from 'react';
+import { ChangeEvent, createRef, RefObject } from 'react';
 import * as React from 'react';
 import { Unsubscribable } from 'rxjs';
 
@@ -13,16 +13,8 @@ import {
 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
-import {
-  Button,
-  ConfirmModal,
-  Container,
-  CustomScrollbar,
-  Themeable,
-  withTheme,
-  IconButton,
-  ButtonGroup,
-} from '@grafana/ui';
+import { Button, ConfirmModal, Container, Themeable, withTheme, IconButton, ButtonGroup } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import config from 'app/core/config';
 import { EmptyTransformationsMessage } from 'app/features/dashboard-scene/panel-edit/PanelDataPane/EmptyTransformationsMessage';
 
@@ -60,6 +52,7 @@ interface State {
 
 class UnThemedTransformationsEditor extends React.PureComponent<TransformationsEditorProps, State> {
   subscription?: Unsubscribable;
+  ref: RefObject<HTMLDivElement>;
 
   constructor(props: TransformationsEditorProps) {
     super(props);
@@ -78,6 +71,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
       selectedFilter: VIEW_ALL_VALUE,
       showIllustrations: true,
     };
+    this.ref = createRef<HTMLDivElement>();
   }
 
   onSearchChange = (event: ChangeEvent<HTMLInputElement>) => {
@@ -152,6 +146,10 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
         this.setState({ scrollTop: currentShowPicker ? kindOfZero : Number.MAX_SAFE_INTEGER });
       }
     }
+
+    if (prevState.scrollTop !== this.state.scrollTop) {
+      this.ref.current?.scrollTo({ top: this.state.scrollTop });
+    }
   }
 
   onChange(transformations: TransformationsEditorTransformation[]) {
@@ -459,7 +457,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
     }
 
     return (
-      <CustomScrollbar scrollTop={this.state.scrollTop} autoHeightMin="100%">
+      <ScrollContainer ref={this.ref} minHeight="100%">
         <Container padding="lg">
           <div data-testid={selectors.components.TransformTab.content}>
             {!hasTransforms && config.featureToggles.transformationsRedesign && this.renderEmptyMessage()}
@@ -467,7 +465,7 @@ class UnThemedTransformationsEditor extends React.PureComponent<TransformationsE
             {this.renderTransformsPicker()}
           </div>
         </Container>
-      </CustomScrollbar>
+      </ScrollContainer>
     );
   }
 }
diff --git a/public/app/features/datasources/components/picker/DataSourceModal.tsx b/public/app/features/datasources/components/picker/DataSourceModal.tsx
index 5ea31b34431..0e0b47da61b 100644
--- a/public/app/features/datasources/components/picker/DataSourceModal.tsx
+++ b/public/app/features/datasources/components/picker/DataSourceModal.tsx
@@ -5,15 +5,8 @@ import { useMemo, useState } from 'react';
 import { DataSourceInstanceSettings, DataSourceRef, GrafanaTheme2 } from '@grafana/data';
 import { config, reportInteraction } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
-import {
-  Modal,
-  FileDropzone,
-  FileDropzoneDefaultChildren,
-  CustomScrollbar,
-  useStyles2,
-  Input,
-  Icon,
-} from '@grafana/ui';
+import { Modal, FileDropzone, FileDropzoneDefaultChildren, useStyles2, Input, Icon } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { t, Trans } from 'app/core/internationalization';
 import * as DFImport from 'app/features/dataframe-import';
 import { GrafanaQuery } from 'app/plugins/datasource/grafana/types';
@@ -166,7 +159,7 @@ export function DataSourceModal({
             reportSearchUsageOnce();
           }}
         />
-        <CustomScrollbar>
+        <ScrollContainer>
           <DataSourceList
             onChange={onChangeDataSource}
             current={current}
@@ -189,13 +182,15 @@ export function DataSourceModal({
             mixed={mixed}
           />
           <BuiltInList className={styles.appendBuiltInDataSourcesList} />
-        </CustomScrollbar>
+        </ScrollContainer>
       </div>
       <div className={styles.rightColumn}>
         <div className={styles.builtInDataSources}>
-          <CustomScrollbar className={styles.builtInDataSourcesList}>
-            <BuiltInList />
-          </CustomScrollbar>
+          <div className={styles.builtInDataSourcesList}>
+            <ScrollContainer>
+              <BuiltInList />
+            </ScrollContainer>
+          </div>
           {uploadFile && config.featureToggles.editPanelCSVDragAndDrop && (
             <FileDropzone
               readAs="readAsArrayBuffer"
diff --git a/public/app/features/datasources/components/picker/DataSourcePicker.tsx b/public/app/features/datasources/components/picker/DataSourcePicker.tsx
index 332d5ec020a..267dd8a1b1d 100644
--- a/public/app/features/datasources/components/picker/DataSourcePicker.tsx
+++ b/public/app/features/datasources/components/picker/DataSourcePicker.tsx
@@ -12,7 +12,8 @@ import { DataSourceInstanceSettings, GrafanaTheme2 } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
 import { reportInteraction } from '@grafana/runtime';
 import { DataQuery, DataSourceRef } from '@grafana/schema';
-import { Button, CustomScrollbar, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
+import { Button, Icon, Input, ModalsController, Portal, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import config from 'app/core/config';
 import { Trans } from 'app/core/internationalization';
 import { useKeyNavigationListener } from 'app/features/search/hooks/useSearchKeyboardSelection';
@@ -347,7 +348,7 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
 
   return (
     <div style={props.style} ref={ref} className={styles.container}>
-      <CustomScrollbar>
+      <ScrollContainer showScrollIndicators>
         <DataSourceList
           {...props}
           enableKeyboardNavigation
@@ -361,7 +362,7 @@ const PickerContent = React.forwardRef<HTMLDivElement, PickerContentProps>((prop
             })
           }
         ></DataSourceList>
-      </CustomScrollbar>
+      </ScrollContainer>
       <FocusScope>
         <Footer
           {...props}
diff --git a/public/app/features/scopes/internal/ScopesDashboardsScene.tsx b/public/app/features/scopes/internal/ScopesDashboardsScene.tsx
index b5450af8630..30e66ba2ba9 100644
--- a/public/app/features/scopes/internal/ScopesDashboardsScene.tsx
+++ b/public/app/features/scopes/internal/ScopesDashboardsScene.tsx
@@ -4,7 +4,8 @@ import { finalize, from, Subscription } from 'rxjs';
 
 import { GrafanaTheme2, ScopeDashboardBinding } from '@grafana/data';
 import { SceneComponentProps, SceneObjectBase, SceneObjectRef, SceneObjectState } from '@grafana/scenes';
-import { Button, CustomScrollbar, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { Button, LoadingPlaceholder, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { t, Trans } from 'app/core/internationalization';
 
 import { ScopesDashboardsTree } from './ScopesDashboardsTree';
@@ -248,13 +249,13 @@ export function ScopesDashboardsSceneRenderer({ model }: SceneComponentProps<Sco
           data-testid="scopes-dashboards-loading"
         />
       ) : filteredFolders[''] ? (
-        <CustomScrollbar>
+        <ScrollContainer>
           <ScopesDashboardsTree
             folders={filteredFolders}
             folderPath={['']}
             onFolderUpdate={(path, isExpanded) => model.updateFolder(path, isExpanded)}
           />
-        </CustomScrollbar>
+        </ScrollContainer>
       ) : (
         <p className={styles.noResultsContainer} data-testid="scopes-dashboards-notFoundForFilter">
           <Trans i18nKey="scopes.dashboards.noResultsForFilter">No results found for your query</Trans>