chore: React 19 upgrade (#666)

* chore: React 19 upgrade

* Fix package version

* Fix docker compose loc

* Add playwright

* Fix playwright version

* Fix test packages

* Fix base url

* Do not run e2e tests on release: for speed and as they are already run on each commit

* npx @grafana/create-plugin@latest add externalize-jsx-runtime

* Remove superfluous externals

* Run for release just in case

* Update grafanaDependency

* Update grafanaDependency

* Update docker images

* Update gependency to support broader range

Author: joey-grafana

.config/Dockerfile

@@ -1,4 +1,4 @@
-ARG grafana_version=latest@sha256:9dedb4a38c272933f7fb1033573a349bb06b181eadcda614bddc99bc5f75491e
+ARG grafana_version=12.3.0
 ARG grafana_image=grafana-enterprise
 
 FROM grafana/${grafana_image}:${grafana_version}

.config/bundler/externals.ts

@@ -0,0 +1,49 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ */
+
+import type { Configuration, ExternalItemFunctionData } from 'webpack';
+
+type ExternalsType = Configuration['externals'];
+
+export const externals: ExternalsType = [
+  // Required for dynamic publicPath resolution
+  { 'amd-module': 'module' },
+  'lodash',
+  'jquery',
+  'moment',
+  'slate',
+  'emotion',
+  '@emotion/react',
+  '@emotion/css',
+  'prismjs',
+  'slate-plain-serializer',
+  '@grafana/slate-react',
+  'react',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom',
+  'react-redux',
+  'redux',
+  'rxjs',
+  'react-router',
+  'd3',
+  'angular',
+  /^@grafana\/ui/i,
+  /^@grafana\/runtime/i,
+  /^@grafana\/data/i,
+
+  // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
+  ({ request }: ExternalItemFunctionData, callback: (error?: Error, result?: string) => void) => {
+    const prefix = 'grafana/';
+    const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
+    const stripPrefix = (request: string) => request.slice(prefix.length);
+
+    if (request && hasPrefix(request)) {
+      return callback(undefined, stripPrefix(request));
+    }
+
+    callback();
+  },
+];

.config/docker-compose-base.yaml

@@ -7,7 +7,7 @@ services:
       context: .
       args:
         grafana_image: ${GRAFANA_IMAGE:-grafana-enterprise}
-        grafana_version: ${GRAFANA_VERSION:-12.1.0}
+        grafana_version: ${GRAFANA_VERSION:-12.3.0}
         development: ${DEVELOPMENT:-false}
         anonymous_auth_enabled: ${ANONYMOUS_AUTH_ENABLED:-true}
     ports:

.config/webpack/webpack.config.ts

@@ -20,6 +20,8 @@ import { BuildModeWebpackPlugin } from './BuildModeWebpackPlugin.ts';
 import { DIST_DIR, SOURCE_DIR } from './constants.ts';
 import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils.ts';
 
+import { externals } from '../bundler/externals.ts';
+
 const pluginJson = getPluginJson();
 const cpVersion = getCPConfigVersion();
 
@@ -54,44 +56,7 @@ const config = async (env: Env): Promise<Configuration> => {
 
     entry: await getEntries(),
 
-    externals: [
-      // Required for dynamic publicPath resolution
-      { 'amd-module': 'module' },
-      'lodash',
-      'jquery',
-      'moment',
-      'slate',
-      'emotion',
-      '@emotion/react',
-      '@emotion/css',
-      'prismjs',
-      'slate-plain-serializer',
-      '@grafana/slate-react',
-      'react',
-      'react-dom',
-      'react-redux',
-      'redux',
-      'rxjs',
-      'react-router',
-      'd3',
-      'angular',
-      /^@grafana\/ui/i,
-      /^@grafana\/runtime/i,
-      /^@grafana\/data/i,
-
-      // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
-      ({ request }, callback) => {
-        const prefix = 'grafana/';
-        const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
-        const stripPrefix = (request: string) => request.substr(prefix.length);
-
-        if (request && hasPrefix(request)) {
-          return callback(undefined, stripPrefix(request));
-        }
-
-        callback();
-      },
-    ],
+    externals,
 
     // Support WebAssembly according to latest spec - makes WebAssembly module async
     experiments: {

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ permissions: {}
 jobs:
   cd:
     name: CI / CD
-    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@main # zizmor: ignore[unpinned-uses]
+    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@ci-cd-workflows/v6.0.0
     permissions:
       contents: write
       id-token: write
@@ -37,9 +37,9 @@ jobs:
 
       # Playwright
       run-playwright: false
-      run-playwright-docker: false
+      run-playwright-docker: true
       upload-playwright-artifacts: true # IMPORTANT: we must ensure there are no unmasked secrets in the E2E tests
       run-playwright-with-skip-grafana-dev-image: true
       playwright-report-path: e2e/test-reports/
-      playwright-docker-compose-file: docker-compose.yaml
+      playwright-docker-compose-file: devenv/docker-compose.e2e.yaml
       playwright-grafana-url: http://localhost:3001

.github/workflows/release.yml

@@ -33,7 +33,7 @@ jobs:
   CD:
     name: Deploy plugin
     needs: bump-version
-    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@main
+    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@ci-cd-workflows/v6.0.0
     permissions:
       contents: write
       id-token: write
@@ -49,9 +49,9 @@ jobs:
 
       # Playwright
       run-playwright: false
-      run-playwright-docker: false
+      run-playwright-docker: true
       upload-playwright-artifacts: true # IMPORTANT: we must ensure there are no unmasked secrets in the E2E tests
       run-playwright-with-skip-grafana-dev-image: true
       playwright-report-path: e2e/test-reports/
-      playwright-docker-compose-file: docker-compose.yaml
+      playwright-docker-compose-file: devenv/docker-compose.e2e.yaml
       playwright-grafana-url: http://localhost:3001

devenv/docker-compose.e2e.yaml

@@ -1,5 +1,3 @@
-version: '3.0'
-
 services:
   grafana:
     container_name: 'grafana-explore-traces-e2e'
@@ -9,7 +7,7 @@ services:
       context: ../.config
       args:
         grafana_image: ${GRAFANA_IMAGE:-grafana}
-        grafana_version: ${GRAFANA_VERSION:-latest}
+        grafana_version: ${GRAFANA_VERSION:-12.3.0}
     ports:
       - 3001:3000/tcp
     volumes:
@@ -89,3 +87,18 @@ services:
       - TRACING_COLLECTOR_PORT=4317
       - OTEL_EXPORTER_OTLP_TRACES_INSECURE=true
       - OTEL_RESOURCE_ATTRIBUTES=ip=1.2.3.5
+
+  # Used by plugin-ci-workflows: docker compose --profile playwright up playwright --exit-code-from playwright
+  playwright:
+    profiles:
+      - playwright
+    image: mcr.microsoft.com/playwright:v1.55.1-noble
+    working_dir: /app
+    volumes:
+      - ..:/app
+    environment:
+      BASE_URL: http://grafana:3000
+      CI: "true"
+    depends_on:
+      - grafana
+    command: sh -c "yarn install --frozen-lockfile && sleep 30 && yarn e2e:fast"

devenv/docker-compose.yaml

@@ -7,7 +7,9 @@ services:
       context: ../.config
       args:
         grafana_image: ${GRAFANA_IMAGE:-grafana-dev}
-        grafana_version: ${GRAFANA_VERSION:-12.2.0-17432607250}
+        grafana_version: ${GRAFANA_VERSION:-12.3.0}
+    environment:
+      - GF_FEATURE_TOGGLES_ENABLE=${GF_FEATURE_TOGGLES_ENABLE:-}
     ports:
       - 3000:3000/tcp
     volumes:

e2e/components.spec.ts

@@ -8,32 +8,35 @@ test.describe('components', () => {
     explorePage = new ExplorePage(page);
     await explorePage.gotoExplorePage();
     await explorePage.assertNotLoading();
+    await explorePage.waitForExploreReady(10000);
   });
 
   test.afterEach(async () => {
-    await explorePage.unroute();
+    if (explorePage) {
+      await explorePage.unroute();
+    }
   });
 
   test('in header are visible', async ({ page }) => {
     await expect(page.getByText('Data source')).toBeVisible();
-    await expect(page.getByRole('button', { name: 'Need help' })).toBeVisible();
+    await expect(page.getByRole('button', { name: /Need help/i })).toBeVisible();
     await expect(page.getByTestId('data-testid TimePicker Open Button')).toBeVisible();
     await expect(page.getByTestId('data-testid RefreshPicker run button')).toBeVisible();
     await expect(page.getByTestId('data-testid RefreshPicker interval button')).toBeVisible();
   });
 
   test('in filters bar are visible', async ({ page }) => {
-    await expect(page.getByRole('radio', { name: 'Root spans' })).toBeVisible();
-    await expect(page.getByRole('radio', { name: 'All spans' })).toBeVisible();
-    await expect(page.getByRole('combobox', { name: 'Filter by label values' })).toBeVisible();
+    await expect(page.getByText('Root spans')).toBeVisible();
+    await expect(page.getByText('All spans')).toBeVisible();
+    await expect(page.getByRole('combobox').first()).toBeVisible();
   });
 
   test('for RED metrics are visible', async ({ page }) => {
-    await expect(page.getByText('Span rate')).toBeVisible();
-    await expect(page.getByTestId('data-testid Panel header ').locator('canvas')).toBeVisible();
-    await expect(page.getByTestId('data-testid Panel header Histogram by duration').locator('canvas')).toBeVisible();
-    // TODO: commenting out for now as it's passing fine and looks good when debugging the tests locally but failing in CI for some reason
-    // await expect(page.getByTestId('data-testid Panel header Errors rate')).toBeVisible();
+    await expect(page.getByText('Span rate')).toBeVisible({ timeout: 20000 });
+    await expect(page.getByTestId('data-testid Panel header ').locator('canvas')).toBeVisible({ timeout: 20000 });
+    await expect(page.getByTestId('data-testid Panel header Histogram by duration').locator('canvas')).toBeVisible({
+      timeout: 20000,
+    });
   });
 
   test('for tabs are visible', async ({ page }) => {
@@ -45,24 +48,12 @@ test.describe('components', () => {
 
   test('for breakdown tab are visible', async ({ page }) => {
     await expect(page.getByText('Attributes are ordered by')).toBeVisible();
-    await expect(page.getByText('Scope')).toBeVisible();
-    await expect(page.getByRole('radio', { name: 'Resource', exact: true })).toBeVisible();
-    await expect(page.getByRole('radio', { name: 'Span', exact: true })).toBeVisible();
-    await expect(page.getByText('Group by')).toBeVisible();
-    await expect(page.getByLabel('service.name')).toBeVisible();
+    await expect(page.getByText('Resource', { exact: true })).toBeVisible();
+    await expect(page.getByText('Span', { exact: true })).toBeVisible();
     await expect(page.getByText('View', { exact: true })).toBeVisible();
     await expect(page.getByLabel('Single')).toBeVisible();
     await expect(page.getByLabel('Grid')).toBeVisible();
     await expect(page.getByLabel('Rows')).toBeVisible();
-    await expect(page.getByPlaceholder('Search')).toBeVisible();
-
-    await page.getByLabel('service.name').click();
-    await expect(page.getByRole('heading', { name: 'mythical-requester' })).toBeVisible();
-    await expect(
-      page
-        .locator('div')
-        .filter({ hasText: /^Other attributes$/ })
-        .nth(1)
-    ).toBeVisible({ timeout: 10000 });
+    await expect(page.getByPlaceholder('Search attributes...')).toBeVisible();
   });
 });

e2e/fixtures/explore.ts

@@ -19,6 +19,14 @@ export class ExplorePage {
     await expect(loading).toHaveCount(0);
   }
 
+  /** Wait for the explore view to be ready (header with Data source or Filters visible). */
+  async waitForExploreReady(timeoutMs = 10000) {
+    const headerOrFilters = this.page
+      .getByText('Data source')
+      .or(this.page.getByText('Filters', { exact: true }));
+    await expect(headerOrFilters.first()).toBeVisible({ timeout: timeoutMs });
+  }
+
   async assertMissingData() {
     await expect(this.page.getByTestId(testIds.emptyState)).not.toBeVisible();
     await expect(this.page.getByTestId(testIds.errorState)).not.toBeVisible();