ScrollContainer: use in Explore pages (#95830)

use ScrollContainer in explore pages

e2e/old-arch/various-suite/trace-view-scrolling.spec.ts

@@ -32,7 +32,7 @@ describe('Trace view', () => {
     e2e.components.TraceViewer.spanBar()
       .its('length')
       .then((oldLength) => {
-        e2e.pages.Explore.General.scrollView().children('.scrollbar-view').scrollTo('center');
+        e2e.pages.Explore.General.scrollView().children().first().scrollTo('center');
 
         // After scrolling we should load more spans
         e2e.components.TraceViewer.spanBar().should(($span) => {

e2e/various-suite/trace-view-scrolling.spec.ts

@@ -32,7 +32,7 @@ describe('Trace view', () => {
     e2e.components.TraceViewer.spanBar()
       .its('length')
       .then((oldLength) => {
-        e2e.pages.Explore.General.scrollView().children('.scrollbar-view').scrollTo('center');
+        e2e.pages.Explore.General.scrollView().children().first().scrollTo('center');
 
         // After scrolling we should load more spans
         e2e.components.TraceViewer.spanBar().should(($span) => {

public/app/features/explore/ContentOutline/ContentOutline.tsx

@@ -4,7 +4,8 @@ import { useToggle, useScroll } from 'react-use';
 
 import { GrafanaTheme2, store } from '@grafana/data';
 import { reportInteraction } from '@grafana/runtime';
-import { useStyles2, PanelContainer, CustomScrollbar } from '@grafana/ui';
+import { useStyles2, PanelContainer } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 
 import { ContentOutlineItemContextProps, useContentOutlineContext } from './ContentOutlineContext';
 import { ContentOutlineItemButton } from './ContentOutlineItemButton';
@@ -154,7 +155,7 @@ export function ContentOutline({ scroller, panelId }: { scroller: HTMLElement |
 
   return (
     <PanelContainer className={styles.wrapper} id={panelId}>
-      <CustomScrollbar>
+      <ScrollContainer>
         <div className={styles.content}>
           <ContentOutlineItemButton
             icon={'arrow-from-right'}
@@ -235,7 +236,7 @@ export function ContentOutline({ scroller, panelId }: { scroller: HTMLElement |
             );
           })}
         </div>
-      </CustomScrollbar>
+      </ScrollContainer>
     </PanelContainer>
   );
 }

public/app/features/explore/Explore.tsx

@@ -20,15 +20,9 @@ import {
 import { selectors } from '@grafana/e2e-selectors';
 import { getDataSourceSrv, reportInteraction } from '@grafana/runtime';
 import { DataQuery } from '@grafana/schema';
-import {
-  AdHocFilterItem,
-  CustomScrollbar,
-  ErrorBoundaryAlert,
-  PanelContainer,
-  Themeable2,
-  withTheme2,
-} from '@grafana/ui';
+import { AdHocFilterItem, ErrorBoundaryAlert, PanelContainer, Themeable2, withTheme2 } from '@grafana/ui';
 import { FILTER_FOR_OPERATOR, FILTER_OUT_OPERATOR } from '@grafana/ui/src/components/Table/types';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { supportedFeatures } from 'app/core/history/richHistoryStorageProvider';
 import { MIXED_DATASOURCE_NAME } from 'app/plugins/datasource/mixed/MixedDataSource';
 import { StoreState } from 'app/types';
@@ -578,10 +572,9 @@ export class Explore extends PureComponent<Props, ExploreState> {
             {contentOutlineVisible && (
               <ContentOutline scroller={this.scrollElement} panelId={`content-outline-container-${exploreId}`} />
             )}
-            <CustomScrollbar
-              testId={selectors.pages.Explore.General.scrollView}
-              scrollRefCallback={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
-              hideHorizontalTrack
+            <ScrollContainer
+              data-testid={selectors.pages.Explore.General.scrollView}
+              ref={(scrollElement) => (this.scrollElement = scrollElement || undefined)}
             >
               <div className={styles.exploreContainer}>
                 {datasourceInstance ? (
@@ -649,7 +642,7 @@ export class Explore extends PureComponent<Props, ExploreState> {
                   this.renderEmptyState(styles.exploreContainer)
                 )}
               </div>
-            </CustomScrollbar>
+            </ScrollContainer>
           </div>
         </div>
       </ContentOutlineContextProvider>

public/app/features/explore/ExplorePaneContainer.tsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 
 import { EventBusSrv, getTimeZone } from '@grafana/data';
 import { selectors } from '@grafana/e2e-selectors';
-import { CustomScrollbar } from '@grafana/ui';
 import { stopQueryState } from 'app/core/utils/explore';
 import { StoreState, useSelector } from 'app/types';
 
@@ -45,23 +44,21 @@ function ExplorePaneContainerUnconnected({ exploreId }: Props) {
   }, []);
 
   return (
-    <CustomScrollbar hideVerticalTrack>
-      <div className={containerStyles} ref={ref} data-testid={selectors.pages.Explore.General.container}>
-        <Explore
+    <div className={containerStyles} ref={ref} data-testid={selectors.pages.Explore.General.container}>
+      <Explore
+        exploreId={exploreId}
+        eventBus={eventBus.current}
+        showQueryInspector={showQueryInspector}
+        setShowQueryInspector={setShowQueryInspector}
+      />
+      {showQueryInspector && (
+        <ExploreQueryInspector
           exploreId={exploreId}
-          eventBus={eventBus.current}
-          showQueryInspector={showQueryInspector}
-          setShowQueryInspector={setShowQueryInspector}
+          onClose={() => setShowQueryInspector(false)}
+          timeZone={getTimeZone()}
         />
-        {showQueryInspector && (
-          <ExploreQueryInspector
-            exploreId={exploreId}
-            onClose={() => setShowQueryInspector(false)}
-            timeZone={getTimeZone()}
-          />
-        )}
-      </div>
-    </CustomScrollbar>
+      )}
+    </div>
   );
 }
 

public/app/features/explore/Logs/LogsNavigationPages.tsx

@@ -2,7 +2,8 @@ import { css, cx } from '@emotion/css';
 
 import { dateTimeFormat, systemDateFormats, GrafanaTheme2 } from '@grafana/data';
 import { TimeZone } from '@grafana/schema';
-import { CustomScrollbar, Spinner, useTheme2, clearButtonStyles } from '@grafana/ui';
+import { Spinner, useTheme2, clearButtonStyles } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 
 import { LogsPage } from './LogsNavigation';
 
@@ -36,7 +37,7 @@ export function LogsNavigationPages({ pages, currentPageIndex, oldestLogsFirst,
   const styles = getStyles(theme, loading);
 
   return (
-    <CustomScrollbar autoHide>
+    <ScrollContainer>
       <div className={styles.pagesWrapper} data-testid="logsNavigationPages">
         <div className={styles.pagesContainer}>
           {pages.map((page: LogsPage, index: number) => (
@@ -58,7 +59,7 @@ export function LogsNavigationPages({ pages, currentPageIndex, oldestLogsFirst,
           ))}
         </div>
       </div>
-    </CustomScrollbar>
+    </ScrollContainer>
   );
 }
 
@@ -69,7 +70,6 @@ const getStyles = (theme: GrafanaTheme2, loading: boolean) => {
       paddingLeft: theme.spacing(0.5),
       display: 'flex',
       flexDirection: 'column',
-      overflowY: 'scroll',
       '&::after': {
         content: "''",
         display: 'block',