build: migrate to pnpm (#722)

* build: migrate to pnpm and upgrade to Node 22

* build: restore automated prod release workflow for v7

* chore: fix local development

* fix: update e2e docker image to use pnpm

* build: sync `pnpm-lock.yaml` with `i18next-cli` dep

* build: bump pnpm to 10.33.1

* fix: wrap i18n `label` in JSX fragment to satisfy `JSX.Element` type

Author: nicwestvold

.github/workflows/cd.yml

@@ -0,0 +1,27 @@
+name: CD
+run-name: Deploy main to dev,ops by @${{ github.actor }}
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: "write"
+  id-token: "write"
+  attestations: "write"
+  pull-requests: "read"
+
+jobs:
+  CD:
+    name: Deploy plugin
+    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@ci-cd-workflows/v7.0.0
+    with:
+      branch: ${{ github.event_name == 'push' && github.ref_name || github.ref }}
+      environment: dev,ops
+      attestation: true
+      run-playwright: false
+      grafana-cloud-deployment-type: provisioned
+      auto-merge-environments: dev,ops
+      argo-workflow-slack-channel: "#proj-tracesdrilldown-cd"
+      plugin-version-suffix: ${{ github.event_name == 'push' && github.sha || github.event.pull_request.head.sha }}

.github/workflows/ci.yml

@@ -1,6 +1,7 @@
-name: Plugins - CI / CD
+name: CI
 
 on:
+  workflow_dispatch:
   push:
     branches:
       - main
@@ -9,33 +10,13 @@ on:
 permissions: {}
 
 jobs:
-  cd:
-    name: CI / CD
-    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@ci-cd-workflows/v6.0.0
+  CI:
     permissions:
       contents: write
       id-token: write
       attestations: write
-      pull-requests: read
+    uses: grafana/plugin-ci-workflows/.github/workflows/ci.yml@ci-cd-workflows/v7.0.0
     with:
-      # Checkout/build PR or main branch, depending on event
-      branch: ${{ github.event_name == 'push' && github.ref_name || github.ref }}
-
-      # When pushing to "main", publish and deploy to "dev" (CD). For PRs, skip publishing and deploying (run CI only)
-      environment: ${{ (github.event_name == 'push' && github.ref_name == 'main') && 'dev,ops' || 'none' }}
-      auto-merge-environments: dev,ops
-      # Deploy provisioned plugin to Grafana Cloud
-      grafana-cloud-deployment-type: provisioned
-      argo-workflow-slack-channel: "#proj-tracesdrilldown-cd"
-
-      # Scope for the plugin published to the catalog. Setting this to "grafana_cloud" will make it visible only in Grafana Cloud
-      # (and hide it for on-prem). This is required for some provisioned plugins.
-      # scopes: grafana_cloud
-
-      # Add the git head ref sha to the plugin version as suffix (`+abcdef`). This is required for CD builds.
-      plugin-version-suffix: ${{ github.event_name == 'push' && github.sha || github.event.pull_request.head.sha }}
-
-      # Playwright
       run-playwright: false
       run-playwright-docker: true
       upload-playwright-artifacts: true # IMPORTANT: we must ensure there are no unmasked secrets in the E2E tests

.github/workflows/is-compatible.yml

@@ -1,40 +1,37 @@
 name: Latest Grafana API compatibility check
 on: [pull_request]
+permissions:
+  contents: 'read'
+  actions: 'write'
 
 jobs:
   compatibilitycheck:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@34e114876b0b11c390a56381ad16ebd13914f8d5 # v4
+      - uses: actions/checkout@de0fac2e4500dabe0009e67214ff5f5447ce83dd # v6.0.2
         with:
           persist-credentials: false
+      - name: Install pnpm
+        uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4
       - name: Setup Node.js environment
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4
+        uses: actions/setup-node@53b83947a5a98c8d113130e565377fae1a50d02f # v6.3.0
         with:
           node-version: '22'
-          cache: 'yarn'
-
-      - name: Restore npm cache
-        id: restore-npm-cache
-        uses: actions/cache/restore@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
-        with:
-          path: |
-            node_modules
-          key: ${{ runner.os }}-npm-${{ hashFiles('**/yarn.lock', '!node_modules/**/yarn.lock') }}
-          restore-keys: ${{ runner.os }}-npm-
-
+          cache: 'pnpm'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
-
-      - name: Save npm cache
-        id: save-npm-cache
-        if: steps.restore-npm-cache.outputs.cache-hit != 'true'
-        uses: actions/cache/save@0057852bfaa89a56745cba8c7296529d2fc39830 # v4
-        with:
-          path: |
-            node_modules
-          key: ${{ steps.restore-npm-cache.outputs.cache-primary-key }}
+        run: pnpm install --frozen-lockfile
       - name: Build plugin
-        run: npm run build
+        run: pnpm run build
+      - name: Find module.ts or module.tsx
+        id: find-module-ts
+        run: >-
+          MODULETS="$(find ./src -type f \( -name "module.ts" -o -name
+          "module.tsx" \))"
+
+          echo "modulets=${MODULETS}" >> $GITHUB_OUTPUT
       - name: Compatibility check
-        run: npx @grafana/levitate@latest is-compatible --path src/module.tsx --target @grafana/data,@grafana/ui,@grafana/runtime
+        uses: grafana/plugin-actions/is-compatible@4698961fa64137fcac207108397ebe8a738a33d1 # main
+        with:
+          module: ${{ steps.find-module-ts.outputs.modulets }}
+          comment-pr: no
+          fail-if-incompatible: yes

.github/workflows/release.yml .github/workflows/publish.yml.github/workflows/release.yml renamed to .github/workflows/publish.yml

@@ -33,7 +33,7 @@ jobs:
   CD:
     name: Deploy plugin
     needs: bump-version
-    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@ci-cd-workflows/v6.0.0
+    uses: grafana/plugin-ci-workflows/.github/workflows/cd.yml@ci-cd-workflows/v7.0.0
     permissions:
       contents: write
       id-token: write

.gitignore

@@ -8,6 +8,13 @@ yarn-error.log*
 
 node_modules/
 
+# yarn
+.yarn/cache
+.yarn/unplugged
+.yarn/build-state.yml
+.yarn/install-state.gz
+.pnp.*
+
 # Runtime data
 pids
 *.pid
@@ -29,6 +36,9 @@ e2e-results/
 **/cypress/videos
 **/cypress/report.json
 
+# AI workflow artifacts (Claude Code / superpowers)
+docs/superpowers/
+
 # Editor
 .idea
 

devenv/docker-compose.e2e.yaml

@@ -103,4 +103,4 @@ services:
       CI: "true"
     depends_on:
       - grafana
-    command: sh -c "yarn install --frozen-lockfile && sleep 30 && yarn e2e:fast"
+    command: sh -c "corepack enable && pnpm install --frozen-lockfile && sleep 30 && pnpm e2e:fast"

devenv/docker-compose.yaml

@@ -6,25 +6,26 @@ services:
     build:
       context: ../.config
       args:
-        grafana_image: ${GRAFANA_IMAGE:-grafana-dev}
+        grafana_image: ${GRAFANA_IMAGE:-grafana}
         grafana_version: ${GRAFANA_VERSION:-12.3.0}
     environment:
       - GF_FEATURE_TOGGLES_ENABLE=${GF_FEATURE_TOGGLES_ENABLE:-localizationForPlugins}
     ports:
       - 3000:3000/tcp
     volumes:
-      - ../dist:/var/lib/grafana/plugins/grafana-explore-traces
+      - ../dist:/var/lib/grafana/plugins/grafana-exploretraces-app
       - ../provisioning:/etc/grafana/provisioning
+      - ./grafana.ini:/etc/grafana/grafana.ini
     extra_hosts:
-      - "host.docker.internal:host-gateway"
+      - 'host.docker.internal:host-gateway'
 
   tempo:
-    image: grafana/tempo:latest@sha256:112d818cc82ad33052e42868fc7b2557f5962eaa5ba35d19878402675479e09d
-    command: [ "-config.file=/etc/tempo.yaml" ]
+    image: grafana/tempo:2.10.4@sha256:a6616c9d224770c883a67b50e4941e99c5df81b076ef05f516bb7cce5a96cec0
+    command: ['-config.file=/etc/tempo.yaml']
     volumes:
       - ./tempo.yaml:/etc/tempo.yaml
     ports:
-      - "3200:3200"   # tempo
+      - '3200:3200' # tempo
 
   # generates uninteresting traces, but is useful for testing
   k6-tracing:
@@ -46,8 +47,8 @@ services:
     image: rabbitmq:management@sha256:23fe4f224d3d4d4e3c3904e82fb8a47824f0ee03412c33b7b21e6bf00b9852fa
     restart: always
     ports:
-      - "5672:5672"
-      - "15672:15672"
+      - '5672:5672'
+      - '15672:15672'
     healthcheck:
       test: rabbitmq-diagnostics check_running
       interval: 5s
@@ -59,9 +60,9 @@ services:
     image: postgres:14.5@sha256:135c62a8134dcef829a1e4f5568bfae44bcfa2c75659ff948f43c71964366aa4
     restart: always
     environment:
-      POSTGRES_PASSWORD: "mythical"
+      POSTGRES_PASSWORD: 'mythical'
     ports:
-      - "5432:5432"
+      - '5432:5432'
 
   # A microservice that makes requests to the API server microservice. Requests are also pushed onto the mythical-queue.
   mythical-requester-A:
@@ -93,7 +94,7 @@ services:
       - OTEL_EXPORTER_OTLP_TRACES_INSECURE=true
       - OTEL_RESOURCE_ATTRIBUTES=ip=1.2.3.5,region=eu-east
 
-   # A microservice that makes requests to the API server microservice. Requests are also pushed onto the mythical-queue.
+    # A microservice that makes requests to the API server microservice. Requests are also pushed onto the mythical-queue.
   mythical-requester-B:
     image: grafana/intro-to-mltp:mythical-beasts-requester-0.3.1@sha256:2643fb2e2cd1100e9edecb44d67c82cfa436ea97ff23aeeb646ea063776e539b
     restart: always

devenv/grafana.ini

@@ -0,0 +1,6 @@
+[feature_toggles]
+# Disable auto-updating of preinstalled plugins so the stable `grafana` image
+# doesn't wipe our bind-mounted ../dist trying to "update" grafana-exploretraces-app
+# from the catalog. Other preinstalled plugins (loki, pyroscope, metricsdrilldown)
+# still install on first boot.
+preinstallAutoUpdate = false

devenv/tempo.yaml

@@ -32,11 +32,8 @@ storage:
     backend: local # backend configuration to use
     block:
       bloom_filter_false_positive: .05 # bloom filter false positive rate.  lower values create larger filters but fewer false positives
-      v2_index_downsample_bytes: 1000 # number of bytes per index record
-      v2_encoding: zstd # block encoding/compression.  options: none, gzip, lz4-64k, lz4-256k, lz4-1M, lz4, snappy, zstd, s2
     wal:
       path: /tmp/tempo/wal # where to store the wal locally
-      v2_encoding: snappy # wal encoding/compression.  options: none, gzip, lz4-64k, lz4-256k, lz4-1M, lz4, snappy, zstd, s2
     local:
       path: /tmp/tempo/blocks
 

package.json

@@ -16,13 +16,13 @@
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --cache .",
-    "lint:fix": "yarn run lint --fix && prettier --write --list-different .",
+    "lint:fix": "pnpm run lint --fix && prettier --write --list-different .",
     "server": "docker compose -f ./devenv/docker-compose.yaml up --build -d",
     "server:ci": "docker compose -f ./devenv/docker-compose.e2e.yaml up --build -d",
     "server:ci:down": "docker compose -f ./devenv/docker-compose.e2e.yaml down",
     "server:react19": "GRAFANA_VERSION=dev-preview-react19 GRAFANA_IMAGE=grafana-enterprise GF_FEATURE_TOGGLES_ENABLE=react19 docker compose -f ./devenv/docker-compose.yaml up --build",
-    "start": "yarn install && yarn dev",
-    "sign": "npx --yes @grafana/sign-plugin@latest"
+    "start": "pnpm install && pnpm dev",
+    "sign": "pnpm dlx @grafana/sign-plugin@latest"
   },
   "author": "Grafana",
   "license": "AGPL-3.0-only",
@@ -47,6 +47,8 @@
     "@types/jest": "29.5.14",
     "@types/lodash": "4.17.24",
     "@types/node": "22.19.15",
+    "@types/react": "^18.3.28",
+    "@types/react-dom": "^18.3.7",
     "@types/semver": "7.7.1",
     "@types/testing-library__jest-dom": "5.14.9",
     "@typescript-eslint/eslint-plugin": "8.57.2",
@@ -101,31 +103,43 @@
     "@openfeature/ofrep-web-provider": "^0.3.5",
     "@openfeature/react-sdk": "^1.2.0",
     "@openfeature/web-sdk": "^1.7.2",
+    "@react-aria/dialog": "^3.6.0",
+    "@react-aria/overlays": "^3.32.0",
     "@testing-library/dom": "^10.4.0",
+    "moment": "^2.30.1",
+    "rc-drawer": "^7.3.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-inlinesvg": "^4.3.0",
     "react-loading-skeleton": "^3.5.0",
     "react-router-dom": "^6.30.2",
+    "react-select": "^5.10.2",
     "react-use": "^17.6.0",
-    "rxjs": "7.8.2"
+    "rxjs": "7.8.2",
+    "uplot": "^1.6.32",
+    "uuid": "^13.0.0"
   },
-  "resolutions": {
-    "nwsapi": "2.2.23",
-    "@tootallnate/once": ">=3.0.1",
-    "schema-utils/ajv": "8.18.0",
-    "rxjs": "^7.8.1",
-    "js-yaml": "4.1.1",
-    "@remix-run/router": "1.23.2",
-    "lodash": "4.18.1",
-    "react-router": "6.30.3",
-    "rtl-css-js": "1.16.1",
-    "serialize-javascript": "7.0.5",
-    "flatted": "3.4.2",
-    "immutable": "5.1.5",
-    "dompurify": "3.4.0",
-    "diff": "4.0.4",
-    "picomatch": ">=2.3.2",
-    "yaml": ">=2.8.3"
+  "pnpm": {
+    "overrides": {
+      "@remix-run/router": "^1.23.2",
+      "lodash": "^4.18.0",
+      "react-router": "^6.30.2",
+      "serialize-javascript": "^7.0.5",
+      "flatted": "^3.4.0",
+      "immutable": "^5.1.5",
+      "dompurify": "^3.4.0",
+      "picomatch@^2": "~2.3.2",
+      "picomatch@^4": "^4.0.4",
+      "yaml": "^2.8.3",
+      "minimatch@^3": "~3.1.4",
+      "minimatch@^9": "~10.2.0",
+      "minimatch@^10": "^10.2.3",
+      "undici": "^7.24.0",
+      "brace-expansion@^1": "^1.1.13",
+      "brace-expansion@^5": "^5.0.5",
+      "@types/react": "^18.3.28",
+      "@types/react-dom": "^18.3.7"
+    }
   },
-  "packageManager": "yarn@1.22.22"
+  "packageManager": "pnpm@10.33.1+sha512.05ba3c1d5d1c18f68df06470d74055e62d41fc110a0c660db1b2dfb2785327f04cf0f68345d4609bc52089e7fa0343c31593b2f9594e2c5d5da426230acc9820"
 }