IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-12-28 01:41:24 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Remove betterPageScrolling toggle (#89339)

Browse Source 
* remove betterPageScrolling toggle

* add scrollTo test shim
This commit is contained in:
Ashley Harrison 2024-06-18 14:33:08 +01:00 committed by GitHub
parent 3badf73b45
commit 50dd95c09b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 11 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
docs/sources/setup-grafana/configure-grafana/feature-toggles/index.md
View File

@ -62,7 +62,6 @@ Most [generally available](https://grafana.com/docs/release-life-cycle/#general-
| `logRowsPopoverMenu` | Enable filtering menu displayed when text of a log line is selected | Yes |
| `lokiQueryHints` | Enables query hints for Loki | Yes |
| `alertingQueryOptimization` | Optimizes eligible queries in order to reduce load on datasources | |
| `betterPageScrolling` | Removes CustomScrollbar from the UI, relying on native browser scrollbars | Yes |
| `cloudWatchNewLabelParsing` | Updates CloudWatch label parsing to be more accurate | Yes |
| `pluginProxyPreserveTrailingSlash` | Preserve plugin proxy trailing slash. | |

1
packages/grafana-data/src/types/featureToggles.gen.ts
View File

@ -169,7 +169,6 @@ export interface FeatureToggles {
kubernetesAggregator?: boolean;
expressionParser?: boolean;
groupByVariable?: boolean;
betterPageScrolling?: boolean;
authAPIAccessTokenAuth?: boolean;
scopeFilters?: boolean;
ssoSettingsSAML?: boolean;

8
pkg/services/featuremgmt/registry.go
View File

@ -1126,14 +1126,6 @@ var (
HideFromDocs: true,
HideFromAdminPage: true,
},
{
Name: "betterPageScrolling",
Description: "Removes CustomScrollbar from the UI, relying on native browser scrollbars",
Stage: FeatureStageGeneralAvailability,
FrontendOnly: true,
Owner: grafanaFrontendPlatformSquad,
Expression: "true", // enabled by default
},
{
Name: "authAPIAccessTokenAuth",
Description: "Enables the use of Auth API access tokens for authentication",

1
pkg/services/featuremgmt/toggles_gen.csv
View File

@ -150,7 +150,6 @@ tlsMemcached,experimental,@grafana/grafana-operator-experience-squad,false,false
kubernetesAggregator,experimental,@grafana/grafana-app-platform-squad,false,true,false
expressionParser,experimental,@grafana/grafana-app-platform-squad,false,true,false
groupByVariable,experimental,@grafana/dashboards-squad,false,false,false
betterPageScrolling,GA,@grafana/grafana-frontend-platform,false,false,true
authAPIAccessTokenAuth,experimental,@grafana/identity-access-team,false,false,false
scopeFilters,experimental,@grafana/dashboards-squad,false,false,false
ssoSettingsSAML,preview,@grafana/identity-access-team,false,false,false

1 Name Stage Owner requiresDevMode RequiresRestart FrontendOnly
150 kubernetesAggregator experimental @grafana/grafana-app-platform-squad false true false
151 expressionParser experimental @grafana/grafana-app-platform-squad false true false
152 groupByVariable experimental @grafana/dashboards-squad false false false
betterPageScrolling GA @grafana/grafana-frontend-platform false false true
153 authAPIAccessTokenAuth experimental @grafana/identity-access-team false false false
154 scopeFilters experimental @grafana/dashboards-squad false false false
155 ssoSettingsSAML preview @grafana/identity-access-team false false false

4
pkg/services/featuremgmt/toggles_gen.go
View File

@ -611,10 +611,6 @@ const (
// Enable groupBy variable support in scenes dashboards
FlagGroupByVariable = "groupByVariable"
// FlagBetterPageScrolling
// Removes CustomScrollbar from the UI, relying on native browser scrollbars
FlagBetterPageScrolling = "betterPageScrolling"
// FlagAuthAPIAccessTokenAuth
// Enables the use of Auth API access tokens for authentication
FlagAuthAPIAccessTokenAuth = "authAPIAccessTokenAuth"

3
pkg/services/featuremgmt/toggles_gen.json
View File

@ -463,7 +463,8 @@
"metadata": {
"name": "betterPageScrolling",
"resourceVersion": "1717578796182",
"creationTimestamp": "2024-03-06T15:06:47Z"
"creationTimestamp": "2024-03-06T15:06:47Z",
"deletionTimestamp": "2024-06-18T09:25:56Z"
},
"spec": {
"description": "Removes CustomScrollbar from the UI, relying on native browser scrollbars",

11
public/app/app.ts
View File

@ -42,7 +42,6 @@ import {
import { setPanelDataErrorView } from '@grafana/runtime/src/components/PanelDataErrorView';
import { setPanelRenderer } from '@grafana/runtime/src/components/PanelRenderer';
import { setPluginPage } from '@grafana/runtime/src/components/PluginPage';
import { getScrollbarWidth } from '@grafana/ui';
import config, { updateConfig } from 'app/core/config';
import { arrayMove } from 'app/core/utils/arrayMove';
import { getStandardTransformers } from 'app/features/transformers/standardTransformers';
@ -136,10 +135,6 @@ export class GrafanaApp {
// This needs to be done after the `initEchoSrv` since it is being used under the hood.
startMeasure('frontend_app_init');
if (!config.featureToggles.betterPageScrolling) {
addClassIfNoOverlayScrollbar();
}
setLocale(config.bootData.user.locale);
setWeekStart(config.bootData.user.weekStart);
setPanelRenderer(PanelRenderer);
@ -367,12 +362,6 @@ function initEchoSrv() {
}
}
function addClassIfNoOverlayScrollbar() {
if (getScrollbarWidth() > 0) {
document.body.classList.add('no-overlay-scrollbar');
}
}
/**
* Report when a metric of a given name was marked during the document lifecycle. Works for markers with no duration,
* like PerformanceMark or PerformancePaintTiming (e.g. created with performance.mark, or first-contentful-paint)

13
public/app/core/components/FlaggedScroller.tsx → public/app/core/components/NativeScrollbar.tsx
View File

@ -1,21 +1,12 @@
import { css, cx } from '@emotion/css';
import React, { useEffect, useRef } from 'react';
import { config } from '@grafana/runtime';
import { CustomScrollbar, useStyles2 } from '@grafana/ui';
type FlaggedScrollerProps = Parameters<typeof CustomScrollbar>[0];
export default function FlaggedScrollbar(props: FlaggedScrollerProps) {
if (config.featureToggles.betterPageScrolling) {
return <NativeScrollbar {...props}>{props.children}</NativeScrollbar>;
}
return <CustomScrollbar {...props} />;
}
type Props = Parameters<typeof CustomScrollbar>[0];
// Shim to provide API-compatibility for Page's scroll-related props
function NativeScrollbar({ children, scrollRefCallback, scrollTop, divId }: FlaggedScrollerProps) {
export default function NativeScrollbar({ children, scrollRefCallback, scrollTop, divId }: Props) {
const styles = useStyles2(getStyles);
const ref = useRef<HTMLDivElement>(null);

10
public/app/core/components/Page/Page.tsx
View File

@ -5,7 +5,7 @@ import { GrafanaTheme2, PageLayoutType } from '@grafana/data';
import { useStyles2 } from '@grafana/ui';
import { useGrafana } from 'app/core/context/GrafanaContext';
import FlaggedScrollbar from '../FlaggedScroller';
import NativeScrollbar from '../NativeScrollbar';
import { PageContents } from './PageContents';
import { PageHeader } from './PageHeader';
@ -53,7 +53,7 @@ export const Page: PageType = ({
return (
<div className={cx(styles.wrapper, className)} {...otherProps}>
{layout === PageLayoutType.Standard && (
<FlaggedScrollbar
<NativeScrollbar
// This id is used by the image renderer to scroll through the dashboard
divId="page-scrollbar"
autoHeightMin={'100%'}
@ -74,11 +74,11 @@ export const Page: PageType = ({
{pageNav && pageNav.children && <PageTabs navItem={pageNav} />}
<div className={styles.pageContent}>{children}</div>
</div>
</FlaggedScrollbar>
</NativeScrollbar>
)}
{layout === PageLayoutType.Canvas && (
<FlaggedScrollbar
<NativeScrollbar
// This id is used by the image renderer to scroll through the dashboard
divId="page-scrollbar"
autoHeightMin={'100%'}
@ -86,7 +86,7 @@ export const Page: PageType = ({
scrollRefCallback={scrollRef}
>
<div className={styles.canvasContent}>{children}</div>
</FlaggedScrollbar>
</NativeScrollbar>
)}
{layout === PageLayoutType.Custom && children}

1
public/sass/_grafana.scss
View File

@ -20,7 +20,6 @@
@import 'utils/widths';
// COMPONENTS
@import 'components/scrollbar';
@import 'components/buttons';
@import 'components/alerts';
@import 'components/tags';

72
public/sass/components/_scrollbar.scss
View File

@ -1,72 +0,0 @@
// Scrollbars
// Note, this is not applied by default if the `betterPageScrolling` feature flag is applied
.no-overlay-scrollbar {
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar:hover {
height: 8px;
}
::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: none;
}
::-webkit-scrollbar-button:horizontal:decrement {
display: none;
}
::-webkit-scrollbar-button:horizontal:increment {
display: none;
}
::-webkit-scrollbar-button:vertical:decrement {
display: none;
}
::-webkit-scrollbar-button:vertical:increment {
display: none;
}
::-webkit-scrollbar-button:horizontal:decrement:active {
background-image: none;
}
::-webkit-scrollbar-button:horizontal:increment:active {
background-image: none;
}
::-webkit-scrollbar-button:vertical:decrement:active {
background-image: none;
}
::-webkit-scrollbar-button:vertical:increment:active {
background-image: none;
}
::-webkit-scrollbar-track-piece {
background-color: transparent;
}
::-webkit-scrollbar-thumb:vertical {
height: 50px;
background: -webkit-gradient(
linear,
left top,
right top,
color-stop(0%, $scrollbarBackground),
color-stop(100%, $scrollbarBackground2)
);
border: 1px solid $scrollbarBorder;
border-top: 1px solid $scrollbarBorder;
border-left: 1px solid $scrollbarBorder;
}
::-webkit-scrollbar-thumb:horizontal {
width: 50px;
background: -webkit-gradient(
linear,
left top,
left bottom,
color-stop(0%, $scrollbarBackground),
color-stop(100%, $scrollbarBackground2)
);
border: 1px solid $scrollbarBorder;
border-top: 1px solid $scrollbarBorder;
border-left: 1px solid $scrollbarBorder;
}
}

2
public/test/jest-setup.ts
View File

@ -67,6 +67,8 @@ global.IntersectionObserver = mockIntersectionObserver;
global.TextEncoder = TextEncoder;
global.TextDecoder = TextDecoder;
// add scrollTo interface since it's not implemented in jsdom
Element.prototype.scrollTo = () => {};
jest.mock('../app/core/core', () => ({
...jest.requireActual('../app/core/core'),