fix(Header): Fix sticky header position in Grafana v11.3+ (#218)

Author: grafakus

Dockerfile.plugin.e2e

@@ -1,9 +1,9 @@
-FROM mcr.microsoft.com/playwright:v1.47.1
+FROM mcr.microsoft.com/playwright:v1.48.0
 
 WORKDIR /app
 
 # required by the e2e test code
-RUN yarn add "@playwright/test@^1.47.1" "dotenv@^16.3.1"
+RUN yarn add "@playwright/test@^1.48.0" "dotenv@^16.3.1"
 
 ENV E2E_BASE_URL="http://localhost:3000"
 

package.json

@@ -67,7 +67,7 @@
  "@grafana/e2e-selectors": "^10.0.0",
  "@grafana/eslint-config": "^7.0.0",
  "@grafana/tsconfig": "^1.2.0-rc1",
- "@playwright/test": "^1.47.1",
+ "@playwright/test": "^1.48.0",
  "@swc/core": "^1.3.51",
  "@swc/helpers": "^0.5.0",
  "@swc/jest": "^0.2.23",

src/pages/ProfilesExplorerView/components/SceneProfilesExplorer/SceneProfilesExplorer.tsx

@@ -1,5 +1,6 @@
 import { css } from '@emotion/css';
 import { dateMath, GrafanaTheme2 } from '@grafana/data';
+import { useChromeHeaderHeight } from '@grafana/runtime';
 import {
  EmbeddedSceneState,
  getUrlSyncManager,
@@ -439,7 +440,8 @@ export class SceneProfilesExplorer extends SceneObjectBase<SceneProfilesExplorer
  };
 
  static Component({ model }: SceneComponentProps<SceneProfilesExplorer>) {
- const styles = useStyles2(getStyles); // eslint-disable-line react-hooks/rules-of-hooks
+ const chromeHeaderHeight = useChromeHeaderHeight(); // eslint-disable-line react-hooks/rules-of-hooks
+ const styles = useStyles2(getStyles, chromeHeaderHeight ?? 0); // eslint-disable-line react-hooks/rules-of-hooks
  const { data, actions } = model.useProfilesExplorer();
 
  const {
@@ -516,11 +518,11 @@ export class SceneProfilesExplorer extends SceneObjectBase<SceneProfilesExplorer
  }
 }
 
-const getStyles = (theme: GrafanaTheme2) => ({
+const getStyles = (theme: GrafanaTheme2, chromeHeaderHeight: number) => ({
  header: css`
  background-color: ${theme.colors.background.canvas};
  position: sticky;
- top: 0;
+ top: ${chromeHeaderHeight}px;
  z-index: 1;
  `,
  controls: css`

yarn.lock

@@ -2168,14 +2168,14 @@ __metadata:
  languageName: node
  linkType: hard
 
-"@playwright/test@npm:^1.47.1":
- version: 1.47.1
- resolution: "@playwright/test@npm:1.47.1"
+"@playwright/test@npm:^1.48.0":
+ version: 1.48.0
+ resolution: "@playwright/test@npm:1.48.0"
  dependencies:
- playwright: "npm:1.47.1"
+ playwright: "npm:1.48.0"
  bin:
  playwright: cli.js
- checksum: 10/d26656451cbd4cbb865c6acb25958a25171b3714907e1595301f21655b1be8f521dbd2197eecfa5b34325626c94b8ab535b8571478880633679e63ebfb6775b9
+ checksum: 10/8845ed0f0b303e10ee0a0f04562ef83be3f9123fac91d722f697ad964a119af74cd5fb08e1139f1b20b27396479456c984bfdc699fadedd92af9c0490fb4c7c0
  languageName: node
  linkType: hard
 
@@ -10147,27 +10147,27 @@ __metadata:
  languageName: node
  linkType: hard
 
-"playwright-core@npm:1.47.1":
- version: 1.47.1
- resolution: "playwright-core@npm:1.47.1"
+"playwright-core@npm:1.48.0":
+ version: 1.48.0
+ resolution: "playwright-core@npm:1.48.0"
  bin:
  playwright-core: cli.js
- checksum: 10/b5ee08e1a934237fca0f0f52a677e5d49e45578e14b48a886927428bdf453f355a120548ae2f3f97e28a9d5e23a213120f6d8f10e18ee3f9112b10716888dac4
+ checksum: 10/644489b4de9cc181e83eb639a283d3c4f8e4c3b1b1759d7c93b72fd0373b5a66ba376ee6a5ee3eca67f1b773bf15c5e01b6aeedd43c94c355bf4fc0d110713bc
  languageName: node
  linkType: hard
 
-"playwright@npm:1.47.1":
- version: 1.47.1
- resolution: "playwright@npm:1.47.1"
+"playwright@npm:1.48.0":
+ version: 1.48.0
+ resolution: "playwright@npm:1.48.0"
  dependencies:
  fsevents: "npm:2.3.2"
- playwright-core: "npm:1.47.1"
+ playwright-core: "npm:1.48.0"
  dependenciesMeta:
  fsevents:
  optional: true
  bin:
  playwright: cli.js
- checksum: 10/f4340f28485bd83a856a365a03af2013b3203c8134a075d05f1a834665e1204b98141c335d5c5c1600720c9e07db702db3dbff5ef138fc1c31d5feec3ac0057f
+ checksum: 10/85b06ae8d0ab7a5a8c9a0d416007b18f35a59455fad40438bda98cbe07c48f338e97b98b1d9214e27f08d6ac284eba0eaab722f5684cd17dd4a47f5b69d004b9
  languageName: node
  linkType: hard
 
@@ -10447,7 +10447,7 @@ __metadata:
  "@grafana/schema": "npm:11.2.0"
  "@grafana/tsconfig": "npm:^1.2.0-rc1"
  "@grafana/ui": "npm:11.2.0"
- "@playwright/test": "npm:^1.47.1"
+ "@playwright/test": "npm:^1.48.0"
  "@react-hook/resize-observer": "npm:^1.2.6"
  "@swc/core": "npm:^1.3.51"
  "@swc/helpers": "npm:^0.5.0"