ScrollContainer: Apply to dashboard panels (#95724)

* add ScrollContainer to panels

* remove unnecessary wrapper

* fix text panel

public/app/plugins/panel/alertlist/UnifiedAlertList.tsx

@@ -11,10 +11,10 @@ import {
   BigValueGraphMode,
   BigValueJustifyMode,
   BigValueTextMode,
-  CustomScrollbar,
   LoadingPlaceholder,
   useStyles2,
 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { config } from 'app/core/config';
 import alertDef from 'app/features/alerting/state/alertDef';
 import { alertRuleApi } from 'app/features/alerting/unified/api/alertRuleApi';
@@ -219,40 +219,38 @@ function UnifiedAlertList(props: PanelProps<UnifiedAlertListOptions>) {
   const havePreviousResults = Object.values(promRulesRequests).some((state) => state.result);
 
   return (
-    <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
-      <div className={styles.container}>
-        {havePreviousResults && noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
-        {havePreviousResults && (
-          <section>
-            {props.options.viewMode === ViewMode.Stat && (
-              <BigValue
-                width={props.width}
-                height={props.height}
-                graphMode={BigValueGraphMode.None}
-                textMode={BigValueTextMode.Auto}
-                justifyMode={BigValueJustifyMode.Auto}
-                theme={config.theme2}
-                value={{ text: `${rules.length}`, numeric: rules.length }}
-              />
-            )}
-            {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && (
-              <GroupedModeView rules={rules} options={parsedOptions} />
-            )}
-            {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && (
-              <UngroupedModeView
-                rules={rules}
-                options={parsedOptions}
-                handleInstancesLimit={handleInstancesLimit}
-                limitInstances={limitInstances}
-                hideViewRuleLinkText={hideViewRuleLinkText}
-              />
-            )}
-          </section>
-        )}
-        {/* loading moved here to avoid twitching  */}
-        {renderLoading && <LoadingPlaceholder text="Loading..." />}
-      </div>
-    </CustomScrollbar>
+    <ScrollContainer minHeight="100%">
+      {havePreviousResults && noAlertsMessage && <div className={styles.noAlertsMessage}>{noAlertsMessage}</div>}
+      {havePreviousResults && (
+        <section>
+          {props.options.viewMode === ViewMode.Stat && (
+            <BigValue
+              width={props.width}
+              height={props.height}
+              graphMode={BigValueGraphMode.None}
+              textMode={BigValueTextMode.Auto}
+              justifyMode={BigValueJustifyMode.Auto}
+              theme={config.theme2}
+              value={{ text: `${rules.length}`, numeric: rules.length }}
+            />
+          )}
+          {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Custom && (
+            <GroupedModeView rules={rules} options={parsedOptions} />
+          )}
+          {props.options.viewMode === ViewMode.List && props.options.groupMode === GroupMode.Default && (
+            <UngroupedModeView
+              rules={rules}
+              options={parsedOptions}
+              handleInstancesLimit={handleInstancesLimit}
+              limitInstances={limitInstances}
+              hideViewRuleLinkText={hideViewRuleLinkText}
+            />
+          )}
+        </section>
+      )}
+      {/* loading moved here to avoid twitching  */}
+      {renderLoading && <LoadingPlaceholder text="Loading..." />}
+    </ScrollContainer>
   );
 }
 
@@ -356,10 +354,6 @@ export const getStyles = (theme: GrafanaTheme2) => ({
     lineHeight: theme.typography.body.lineHeight,
     marginBottom: 0,
   }),
-  container: css({
-    overflowY: 'auto',
-    height: '100%',
-  }),
   alertRuleList: css({
     display: 'flex',
     flexWrap: 'wrap',

public/app/plugins/panel/annolist/AnnoListPanel.tsx

@@ -13,8 +13,9 @@ import {
   PanelProps,
 } from '@grafana/data';
 import { config, getBackendSrv, locationService } from '@grafana/runtime';
-import { Button, CustomScrollbar, stylesFactory, TagList } from '@grafana/ui';
+import { Button, stylesFactory, TagList } from '@grafana/ui';
 import { AbstractList } from '@grafana/ui/src/components/List/AbstractList';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import appEvents from 'app/core/app_events';
 import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
 
@@ -259,7 +260,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
 
     const hasFilter = queryUser || queryTags.length > 0;
     return (
-      <CustomScrollbar autoHeightMin="100%">
+      <ScrollContainer minHeight="100%">
         {hasFilter && (
           <div className={this.style.filter}>
             <b>Filter:</b>
@@ -290,7 +291,7 @@ export class AnnoListPanel extends PureComponent<Props, State> {
         {annotations.length < 1 && <div className={this.style.noneFound}>No Annotations Found</div>}
 
         <AbstractList items={annotations} renderItem={this.renderItem} getItemKey={(item) => `${item.id}`} />
-      </CustomScrollbar>
+      </ScrollContainer>
     );
   }
 }

public/app/plugins/panel/dashlist/DashList.tsx

@@ -11,7 +11,8 @@ import {
   UrlQueryValue,
   urlUtil,
 } from '@grafana/data';
-import { CustomScrollbar, useStyles2, IconButton } from '@grafana/ui';
+import { useStyles2, IconButton } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { updateNavIndex } from 'app/core/actions';
 import { getConfig } from 'app/core/config';
 import { appEvents } from 'app/core/core';
@@ -205,7 +206,7 @@ export function DashList(props: PanelProps<Options>) {
   );
 
   return (
-    <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
+    <ScrollContainer minHeight="100%">
       {dashboardGroups.map(
         ({ show, header, dashboards }, i) =>
           show && (
@@ -215,7 +216,7 @@ export function DashList(props: PanelProps<Options>) {
             </div>
           )
       )}
-    </CustomScrollbar>
+    </ScrollContainer>
   );
 }
 

public/app/plugins/panel/logs/LogsPanel.tsx

@@ -20,7 +20,8 @@ import {
   toUtc,
   urlUtil,
 } from '@grafana/data';
-import { CustomScrollbar, usePanelContext, useStyles2 } from '@grafana/ui';
+import { usePanelContext, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import { getFieldLinksForExplore } from 'app/features/explore/utils/links';
 import { LogRowContextModal } from 'app/features/logs/components/log-context/LogRowContextModal';
 import { PanelDataErrorView } from 'app/features/panel/components/PanelDataErrorView';
@@ -120,6 +121,10 @@ export const LogsPanel = ({
   const [displayedFields, setDisplayedFields] = useState<string[]>(options.displayedFields ?? []);
   let closeCallback = useRef<() => void>();
 
+  useEffect(() => {
+    scrollElement?.scrollTo(0, scrollTop);
+  }, [scrollElement, scrollTop]);
+
   const { eventBus, onAddAdHocFilter } = usePanelContext();
   const onLogRowHover = useCallback(
     (row?: LogRowModel) => {
@@ -356,11 +361,7 @@ export const LogsPanel = ({
           getLogRowContextUi={getLogRowContextUi}
         />
       )}
-      <CustomScrollbar
-        autoHide
-        scrollTop={scrollTop}
-        scrollRefCallback={(scrollElement) => setScrollElement(scrollElement)}
-      >
+      <ScrollContainer ref={(scrollElement) => setScrollElement(scrollElement)}>
         <div onMouseLeave={onLogContainerMouseLeave} className={style.container} ref={logsContainerRef}>
           {showCommonLabels && !isAscending && renderCommonLabels()}
           <LogRows
@@ -403,7 +404,7 @@ export const LogsPanel = ({
           />
           {showCommonLabels && isAscending && renderCommonLabels()}
         </div>
-      </CustomScrollbar>
+      </ScrollContainer>
     </>
   );
 };

public/app/plugins/panel/news/NewsPanel.tsx

@@ -2,7 +2,8 @@ import { useEffect } from 'react';
 
 import { PanelProps } from '@grafana/data';
 import { RefreshEvent } from '@grafana/runtime';
-import { Alert, CustomScrollbar, Icon } from '@grafana/ui';
+import { Alert, Icon } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 
 import { News } from './component/News';
 import { DEFAULT_FEED_URL } from './constants';
@@ -53,10 +54,10 @@ export function NewsPanel(props: NewsPanelProps) {
   }
 
   return (
-    <CustomScrollbar autoHeightMin="100%" autoHeightMax="100%">
+    <ScrollContainer minHeight="100%">
       {state.value.map((_, index) => {
         return <News key={index} index={index} width={width} showImage={showImage} data={state.value} />;
       })}
-    </CustomScrollbar>
+    </ScrollContainer>
   );
 }

public/app/plugins/panel/text/TextPanel.tsx

@@ -1,10 +1,11 @@
-import { css, cx } from '@emotion/css';
+import { css } from '@emotion/css';
 import DangerouslySetHtmlContent from 'dangerously-set-html-content';
 import { useState } from 'react';
 import { useDebounce } from 'react-use';
 
 import { GrafanaTheme2, PanelProps, renderTextPanelMarkdown, textUtil, InterpolateFunction } from '@grafana/data';
-import { CustomScrollbar, CodeEditor, useStyles2 } from '@grafana/ui';
+import { CodeEditor, useStyles2 } from '@grafana/ui';
+import { ScrollContainer } from '@grafana/ui/src/unstable';
 import config from 'app/core/config';
 
 import { defaultCodeOptions, Options, TextMode } from './panelcfg.gen';
@@ -51,14 +52,16 @@ export function TextPanel(props: Props) {
   }
 
   return (
-    <CustomScrollbar autoHeightMin="100%" className={styles.containStrict}>
-      <DangerouslySetHtmlContent
-        allowRerender
-        html={processed.content}
-        className={styles.markdown}
-        data-testid="TextPanel-converted-content"
-      />
-    </CustomScrollbar>
+    <div className={styles.containStrict}>
+      <ScrollContainer minHeight="100%">
+        <DangerouslySetHtmlContent
+          allowRerender
+          html={processed.content}
+          className="markdown-html"
+          data-testid="TextPanel-converted-content"
+        />
+      </ScrollContainer>
+    </div>
   );
 }
 
@@ -98,13 +101,8 @@ const getStyles = (theme: GrafanaTheme2) => ({
       backgroundColor: theme.colors.background.primary,
     },
   }),
-  markdown: cx(
-    'markdown-html',
-    css({
-      height: '100%',
-    })
-  ),
   containStrict: css({
     contain: 'strict',
+    height: '100%',
   }),
 });