Page: add scrollbar ID to use in image renderer (#88214)

packages/grafana-ui/src/components/CustomScrollbar/CustomScrollbar.tsx

@@ -26,6 +26,7 @@ interface Props {
   autoHeightMin?: number | string;
   updateAfterMountMs?: number;
   onScroll?: React.UIEventHandler;
+  divId?: string;
 }
 
 /**
@@ -48,6 +49,7 @@ export const CustomScrollbar = ({
   scrollTop,
   onScroll,
   children,
+  divId,
 }: React.PropsWithChildren<Props>) => {
   const ref = useRef<Scrollbars & { view: HTMLDivElement; update: () => void }>(null);
   const styles = useStyles2(getStyles);
@@ -110,14 +112,17 @@ export const CustomScrollbar = ({
     return <div {...passedProps} className="thumb-vertical" />;
   }, []);
 
-  const renderView = useCallback((passedProps: JSX.IntrinsicElements['div']) => {
-    // fixes issues of visibility on safari and ios devices
-    if (passedProps.style && passedProps.style['WebkitOverflowScrolling'] === 'touch') {
-      passedProps.style['WebkitOverflowScrolling'] = 'auto';
-    }
+  const renderView = useCallback(
+    (passedProps: JSX.IntrinsicElements['div']) => {
+      // fixes issues of visibility on safari and ios devices
+      if (passedProps.style && passedProps.style['WebkitOverflowScrolling'] === 'touch') {
+        passedProps.style['WebkitOverflowScrolling'] = 'auto';
+      }
 
-    return <div {...passedProps} className="scrollbar-view" />;
-  }, []);
+      return <div {...passedProps} className="scrollbar-view" id={divId} />;
+    },
+    [divId]
+  );
 
   const onScrollStop = useCallback(() => {
     ref.current && setScrollTop && setScrollTop(ref.current.getValues());

public/app/core/components/FlaggedScroller.tsx

@@ -15,7 +15,7 @@ export default function FlaggedScrollbar(props: FlaggedScrollerProps) {
 }
 
 // Shim to provide API-compatibility for Page's scroll-related props
-function NativeScrollbar({ children, scrollRefCallback, scrollTop }: FlaggedScrollerProps) {
+function NativeScrollbar({ children, scrollRefCallback, scrollTop, divId }: FlaggedScrollerProps) {
   const styles = useStyles2(getStyles);
   const ref = useRef<HTMLDivElement>(null);
 
@@ -33,7 +33,7 @@ function NativeScrollbar({ children, scrollRefCallback, scrollTop }: FlaggedScro
 
   return (
     // Set the .scrollbar-view class to help e2e tests find this, like in CustomScrollbar
-    <div ref={ref} className={cx(styles.nativeScrollbars, 'scrollbar-view')}>
+    <div ref={ref} className={cx(styles.nativeScrollbars, 'scrollbar-view')} id={divId}>
       {children}
     </div>
   );

public/app/core/components/Page/Page.tsx

@@ -53,7 +53,13 @@ export const Page: PageType = ({
   return (
     <div className={cx(styles.wrapper, className)} {...otherProps}>
       {layout === PageLayoutType.Standard && (
-        <FlaggedScrollbar autoHeightMin={'100%'} scrollTop={scrollTop} scrollRefCallback={scrollRef}>
+        <FlaggedScrollbar
+          // This id is used by the image renderer to scroll through the dashboard
+          divId="page-scrollbar"
+          autoHeightMin={'100%'}
+          scrollTop={scrollTop}
+          scrollRefCallback={scrollRef}
+        >
           <div className={styles.pageInner}>
             {pageHeaderNav && (
               <PageHeader
@@ -72,7 +78,13 @@ export const Page: PageType = ({
       )}
 
       {layout === PageLayoutType.Canvas && (
-        <FlaggedScrollbar autoHeightMin={'100%'} scrollTop={scrollTop} scrollRefCallback={scrollRef}>
+        <FlaggedScrollbar
+          // This id is used by the image renderer to scroll through the dashboard
+          divId="page-scrollbar"
+          autoHeightMin={'100%'}
+          scrollTop={scrollTop}
+          scrollRefCallback={scrollRef}
+        >
           <div className={styles.canvasContent}>{children}</div>
         </FlaggedScrollbar>
       )}

public/app/features/dashboard-scene/scene/DashboardSceneRenderer.tsx

@@ -64,6 +64,8 @@ export function DashboardSceneRenderer({ model }: SceneComponentProps<DashboardS
             </div>
           )}
           <CustomScrollbar
+            // This id is used by the image renderer to scroll through the dashboard
+            divId="page-scrollbar"
             autoHeightMin={'100%'}
             className={styles.scrollbarContainer}
             testId={selectors.pages.Dashboard.DashNav.scrollContainer}