ScrollContainer: Use ScrollContainer in some dashboard components (#95668)

* use ScrollContainer in some dashboard components

* remove unnecessary wrapper

* remove unnecessary minHeight

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>
   );

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),
     }),

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>
   );
 }

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,

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>
   );

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>
     );
   }
 }

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"

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}

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>