From 9c05e2dc54ffa69ef301f50a1bf77a270c4c52d2 Mon Sep 17 00:00:00 2001 From: ZuperZee Date: Wed, 4 Jun 2025 11:20:01 +0200 Subject: [PATCH] feat: add new scroll container Replaces the old deprecated CustomScrollbar with the new ScrollContainer component from Grafana. The new ScrollContainer only works with Grafana 11.5.0 or later. Older versions of Grafana will still use the old CustomScrollbar. --- package.json | 1 + pnpm-lock.yaml | 30 +++++++++++++----------------- src/HTMLPanel.tsx | 16 ++++++++++++---- 3 files changed, 26 insertions(+), 21 deletions(-) diff --git a/package.json b/package.json index daddeb5..8bfe470 100755 --- a/package.json +++ b/package.json @@ -32,6 +32,7 @@ "lodash": "^4.17.21", "react": "18.2.0", "react-dom": "18.2.0", + "semver": "^7.7.2", "tslib": "2.5.3" }, "devDependencies": { diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 18cf149..d96a0bf 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -32,6 +32,9 @@ importers: react-dom: specifier: 18.2.0 version: 18.2.0(react@18.2.0) + semver: + specifier: ^7.7.2 + version: 7.7.2 tslib: specifier: 2.5.3 version: 2.5.3 @@ -3909,11 +3912,6 @@ packages: resolution: {integrity: sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==} hasBin: true - semver@7.6.3: - resolution: {integrity: sha512-oVekP1cKtI+CTDvHWYFUcMtsK/00wmAEfyqKfNdARm8u1wNVhSgaX7A8d4UuIlUI5e84iEwOhs7ZPYRmzU9U6A==} - engines: {node: '>=10'} - hasBin: true - semver@7.7.2: resolution: {integrity: sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==} engines: {node: '>=10'} @@ -6015,7 +6013,7 @@ snapshots: graphemer: 1.4.0 ignore: 5.3.2 natural-compare: 1.4.0 - semver: 7.6.3 + semver: 7.7.2 ts-api-utils: 1.4.3(typescript@5.5.4) optionalDependencies: typescript: 5.5.4 @@ -6069,7 +6067,7 @@ snapshots: globby: 11.1.0 is-glob: 4.0.3 minimatch: 9.0.3 - semver: 7.6.3 + semver: 7.7.2 ts-api-utils: 1.4.3(typescript@5.5.4) optionalDependencies: typescript: 5.5.4 @@ -6084,7 +6082,7 @@ snapshots: fast-glob: 3.3.3 is-glob: 4.0.3 minimatch: 9.0.5 - semver: 7.6.3 + semver: 7.7.2 ts-api-utils: 2.0.0(typescript@5.5.4) typescript: 5.5.4 transitivePeerDependencies: @@ -6099,7 +6097,7 @@ snapshots: '@typescript-eslint/types': 6.21.0 '@typescript-eslint/typescript-estree': 6.21.0(typescript@5.5.4) eslint: 8.57.1 - semver: 7.6.3 + semver: 7.7.2 transitivePeerDependencies: - supports-color - typescript @@ -6655,7 +6653,7 @@ snapshots: postcss-modules-scope: 3.2.1(postcss@8.4.49) postcss-modules-values: 4.0.0(postcss@8.4.49) postcss-value-parser: 4.2.0 - semver: 7.6.3 + semver: 7.7.2 optionalDependencies: webpack: 5.97.1(@swc/core@1.10.4(@swc/helpers@0.5.15))(webpack-cli@5.1.4) @@ -7156,7 +7154,7 @@ snapshots: eslint: 8.57.1 esquery: 1.6.0 is-builtin-module: 3.2.1 - semver: 7.6.3 + semver: 7.7.2 spdx-expression-parse: 4.0.0 transitivePeerDependencies: - supports-color @@ -7401,7 +7399,7 @@ snapshots: minimatch: 3.1.2 node-abort-controller: 3.1.1 schema-utils: 3.3.0 - semver: 7.6.3 + semver: 7.7.2 tapable: 2.2.1 typescript: 5.5.4 webpack: 5.97.1(@swc/core@1.10.4(@swc/helpers@0.5.15))(webpack-cli@5.1.4) @@ -7878,7 +7876,7 @@ snapshots: '@babel/parser': 7.26.3 '@istanbuljs/schema': 0.1.3 istanbul-lib-coverage: 3.2.2 - semver: 7.6.3 + semver: 7.7.2 transitivePeerDependencies: - supports-color @@ -8188,7 +8186,7 @@ snapshots: jest-util: 29.7.0 natural-compare: 1.4.0 pretty-format: 29.7.0 - semver: 7.6.3 + semver: 7.7.2 transitivePeerDependencies: - supports-color @@ -8380,7 +8378,7 @@ snapshots: make-dir@4.0.0: dependencies: - semver: 7.6.3 + semver: 7.7.2 make-error@1.3.6: {} @@ -9265,8 +9263,6 @@ snapshots: semver@6.3.1: {} - semver@7.6.3: {} - semver@7.7.2: {} serialize-javascript@6.0.2: diff --git a/src/HTMLPanel.tsx b/src/HTMLPanel.tsx index cca2e84..9f9bc38 100755 --- a/src/HTMLPanel.tsx +++ b/src/HTMLPanel.tsx @@ -16,7 +16,8 @@ import { addShadowRoot } from 'utils/addShadowRoot'; import { triggerPanelupdate } from 'utils/events/panelupdate'; import { triggerPanelwillunmount } from 'utils/events/panelwillunmount'; import { addHtml } from 'utils/addHtml'; -import { CustomScrollbar } from '@grafana/ui'; +import { CustomScrollbar, ScrollContainer } from '@grafana/ui'; +import semver from 'semver'; interface Props extends PanelProps {} interface PanelState { @@ -301,9 +302,16 @@ export class HTMLPanel extends PureComponent { <>
{useGrafanaScrollbar && overflow === 'visible' ? ( - -
- + semver.lt(config.buildInfo.version, '11.5.0') ? ( + // eslint-disable-next-line deprecation/deprecation + +
+ + ) : ( + +
+ + ) ) : (
)}