make flagged scroller the actual scrolling element,

grafana · Feb 16, 2024 · c767bb7 · c767bb7
1 parent 2cc5982
commit c767bb7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 98 deletions.
diff --git a/.betterer.results.json b/.betterer.results.json
@@ -1028,12 +1028,6 @@
         "count": 5
       }
     ],
-    "/packages/grafana-ui/src/components/Splitter/Splitter.tsx": [
-      {
-        "message": "Do not use any type assertions.",
-        "count": 1
-      }
-    ],
     "/packages/grafana-ui/src/components/StatsPicker/StatsPicker.story.tsx": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -1564,12 +1558,6 @@
         "count": 1
       }
     ],
-    "/public/app/core/specs/time_series.test.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/core/time_series2.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -1790,12 +1778,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/alerting/unified/AlertsFolderView.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/alerting/unified/AlertsFolderView.tsx": [
       {
         "message": "Styles should be written using objects.",
@@ -2936,12 +2918,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/dashboard-scene/panel-edit/VizPanelManager.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/dashboard-scene/saving/SaveDashboardForm.tsx": [
       {
         "message": "Use data-testid for E2E selectors instead of aria-label",
@@ -2960,12 +2936,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/dashboard-scene/scene/DashboardScene.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/dashboard-scene/scene/PanelMenuBehavior.tsx": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -2976,18 +2946,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/dashboard-scene/scene/setDashboardPanelContext.test.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
-    "/public/app/features/dashboard-scene/serialization/angularMigration.test.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 2
-      }
-    ],
     "/public/app/features/dashboard-scene/serialization/transformSaveModelToScene.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -3061,7 +3019,7 @@
     "/public/app/features/dashboard/components/DashExportModal/DashboardExporter.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 21
+        "count": 6
       }
     ],
     "/public/app/features/dashboard/components/DashExportModal/DashboardExporter.ts": [
@@ -3447,7 +3405,7 @@
     "/public/app/features/dashboard/state/DashboardMigrator.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 19
+        "count": 12
       }
     ],
     "/public/app/features/dashboard/state/DashboardMigrator.ts": [
@@ -3463,7 +3421,7 @@
     "/public/app/features/dashboard/state/DashboardModel.repeat.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 7
+        "count": 4
       }
     ],
     "/public/app/features/dashboard/state/DashboardModel.test.ts": [
@@ -3513,7 +3471,7 @@
     "/public/app/features/dashboard/state/initDashboard.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 2
+        "count": 1
       }
     ],
     "/public/app/features/dashboard/utils/getPanelMenu.test.ts": [
@@ -4649,7 +4607,7 @@
     "/public/app/features/plugins/tests/datasource_srv.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 4
+        "count": 3
       }
     ],
     "/public/app/features/plugins/utils.ts": [
@@ -4749,7 +4707,7 @@
     "/public/app/features/query/state/updateQueries.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 12
+        "count": 11
       }
     ],
     "/public/app/features/search/page/components/ActionRow.tsx": [
@@ -5109,7 +5067,7 @@
     "/public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 2
+        "count": 1
       }
     ],
     "/public/app/features/transformers/prepareTimeSeries/prepareTimeSeries.ts": [
@@ -5272,12 +5230,6 @@
         "count": 1
       }
     ],
-    "/public/app/features/variables/query/QueryVariableEditor.test.tsx": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 1
-      }
-    ],
     "/public/app/features/variables/query/QueryVariableEditor.tsx": [
       {
         "message": "Unexpected any. Specify a different type.",
@@ -5315,7 +5267,7 @@
     "/public/app/features/variables/query/queryRunners.test.ts": [
       {
         "message": "Unexpected any. Specify a different type.",
-        "count": 7
+        "count": 1
       }
     ],
     "/public/app/features/variables/query/queryRunners.ts": [
@@ -7110,46 +7062,6 @@
         "count": 2
       }
     ],
-    "/public/app/plugins/panel/table-old/column_options.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 22
-      }
-    ],
-    "/public/app/plugins/panel/table-old/editor.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 9
-      }
-    ],
-    "/public/app/plugins/panel/table-old/module.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 12
-      }
-    ],
-    "/public/app/plugins/panel/table-old/renderer.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 12
-      },
-      {
-        "message": "Do not use any type assertions.",
-        "count": 1
-      }
-    ],
-    "/public/app/plugins/panel/table-old/transformers.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 9
-      }
-    ],
-    "/public/app/plugins/panel/table-old/types.ts": [
-      {
-        "message": "Unexpected any. Specify a different type.",
-        "count": 13
-      }
-    ],
     "/public/app/plugins/panel/table/TablePanel.tsx": [
       {
         "message": "Styles should be written using objects.",

diff --git a/public/app/core/components/FlaggedScroller.tsx b/public/app/core/components/FlaggedScroller.tsx
@@ -1,11 +1,14 @@
+import { css } from '@emotion/css';
 import React, { useEffect } from 'react';
 
+import { GrafanaTheme2 } from '@grafana/data';
 import { config } from '@grafana/runtime';
-import { CustomScrollbar, useTheme2 } from '@grafana/ui';
+import { CustomScrollbar, useStyles2, useTheme2 } from '@grafana/ui';
 
 type FlaggedScrollerProps = Parameters<typeof CustomScrollbar>[0];
 
 export default function FlaggedScroller(props: FlaggedScrollerProps) {
+  const styles = useStyles2(getStyles);
   const theme = useTheme2();
 
   useEffect(() => {
@@ -16,8 +19,21 @@ export default function FlaggedScroller(props: FlaggedScrollerProps) {
   }, [theme]);
 
   if (config.featureToggles.removeCustomScrollbars) {
-    return props.children;
+    return <div className={styles.nativeScrollbars}>{props.children}</div>;
   }
 
   return <CustomScrollbar {...props} />;
 }
+
+function getStyles(theme: GrafanaTheme2) {
+  return {
+    nativeScrollbars: css({
+      minHeight: `calc(100% + 0px)`,
+      maxHeight: `calc(100% + 0px)`,
+      display: 'flex',
+      flexDirection: 'column',
+      flexGrow: 1,
+      overflow: 'auto',
+    }),
+  };
+}
diff --git a/public/app/core/components/Page/Page.tsx b/public/app/core/components/Page/Page.tsx
@@ -2,6 +2,7 @@ import { css, cx } from '@emotion/css';
 import React, { useLayoutEffect } from 'react';
 
 import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
+import { config } from '@grafana/runtime';
 import { useStyles2 } from '@grafana/ui';
 import { useGrafana } from 'app/core/context/GrafanaContext';
 
@@ -50,6 +51,9 @@ export const Page: PageType = ({
     }
   }, [navModel, pageNav, chrome, layout]);
 
+  // When the
+  // const applyPrimaryBgClass = config.featureToggles.removeCustomScrollbars && layout === PageLayoutType.Standard;
+
   return (
     <div className={cx(styles.wrapper, className)} {...otherProps}>
       {layout === PageLayoutType.Standard && (
@@ -98,6 +102,9 @@ const getStyles = (theme: GrafanaTheme2) => {
       label: 'page-content',
       flexGrow: 1,
     }),
+    primaryBg: css({
+      background: theme.colors.background.primary,
+    }),
     pageInner: css({
       label: 'page-inner',
       padding: theme.spacing(2),