@grafana/create-plugin 6.2.0-canary.2283.19289604632.0 → 6.2.0-canary.2314.19505018775.0

package/templates/common/.config/types/setupTests.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/templates/common/.config/webpack/webpack.config.ts

@@ -187,7 +187,7 @@ const config = async (env: Env): Promise<Configuration> => {
       new ReplaceInFileWebpackPlugin([
         {
           dir: DIST_DIR,
-          files: ['plugin.json', 'README.md'],
+          test: [/(^|\/)plugin\.json$/, /(^|\/)README\.md$/],
           rules: [
             {
               search: /\%VERSION\%/g,

package/templates/common/_package.json

@@ -16,7 +16,7 @@
   "author": "{{ sentenceCase orgName }}",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@grafana/eslint-config": "^8.2.0",
+    "@grafana/eslint-config": "^9.0.0",
     "@grafana/plugin-e2e": "^3.0.1",
     "@grafana/tsconfig": "^2.0.1",
     "@playwright/test": "^1.52.0",{{#if useExperimentalRspack}}
@@ -33,7 +33,6 @@
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",{{#if isAppType}}{{#unless useReactRouterV6}}
     "@types/react-router-dom": "^{{ reactRouterVersion }}",{{/unless}}{{/if}}
-    "@types/testing-library__jest-dom": "5.14.8",
     "@typescript-eslint/eslint-plugin": "^8.3.0",
     "@typescript-eslint/parser": "^8.3.0",{{#unless useExperimentalRspack}}
     "copy-webpack-plugin": "^11.0.0",{{/unless}}
@@ -42,7 +41,7 @@
     "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-jsdoc": "^51.2.3",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-hooks": "^7.0.0",
     "eslint-webpack-plugin": "^5.0.0",{{#unless useExperimentalRspack}}
     "fork-ts-checker-webpack-plugin": "^8.0.0",{{/unless}}
     "glob": "^10.2.7",

package/templates/github/workflows/bundle-stats.yml

@@ -20,7 +20,7 @@ jobs:
 
     steps:
       - name: Checkout repository
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           persist-credentials: false
 

package/templates/github/workflows/ci.yml

@@ -25,16 +25,16 @@ jobs:
     env:
       GRAFANA_ACCESS_POLICY_TOKEN: $\{{ secrets.GRAFANA_ACCESS_POLICY_TOKEN }}
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           persist-credentials: false
 {{#if_eq packageManagerName "pnpm"}}
       # pnpm action uses the packageManager field in package.json to
       # understand which version to install.
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
 {{/if_eq}}
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '22'
           cache: '{{ packageManagerName }}'
@@ -61,7 +61,7 @@ jobs:
 
       - name: Setup Go environment
         if: steps.check-for-backend.outputs.has-backend == 'true'
-        uses: actions/setup-go@v5
+        uses: actions/setup-go@v6
         with:
           go-version: '1.22'
 
@@ -122,7 +122,7 @@ jobs:
           ARCHIVE: $\{{ steps.metadata.outputs.archive }}
 
       - name: Archive Build
-        uses: actions/upload-artifact@v4
+        uses: actions/upload-artifact@v5
         with:
           name: $\{{ steps.metadata.outputs.plugin-id }}-$\{{ steps.metadata.outputs.plugin-version }}
           path: $\{{ steps.metadata.outputs.plugin-id }}
@@ -140,7 +140,7 @@ jobs:
       matrix: $\{{ steps.resolve-versions.outputs.matrix }}
     steps:
       - name: Checkout
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
         with:
           persist-credentials: false
 
@@ -162,12 +162,12 @@ jobs:
     name: e2e test $\{{ matrix.GRAFANA_IMAGE.name }}@$\{{ matrix.GRAFANA_IMAGE.VERSION }}
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           persist-credentials: false
 
       - name: Download plugin
-        uses: actions/download-artifact@v4
+        uses: actions/download-artifact@v6
         with:
           path: dist
           name: $\{{ needs.build.outputs.plugin-id }}-$\{{ needs.build.outputs.plugin-version }}
@@ -180,10 +180,10 @@ jobs:
 {{#if_eq packageManagerName "pnpm"}}
       # pnpm action uses the packageManager field in package.json to
       # understand which version to install.
-      - uses: pnpm/action-setup@v3
+      - uses: pnpm/action-setup@v4
 {{/if_eq}}
       - name: Setup Node.js environment
-        uses: actions/setup-node@v4
+        uses: actions/setup-node@v6
         with:
           node-version: '22'
           cache: '{{ packageManagerName }}'
@@ -242,7 +242,7 @@ jobs:
     needs: [playwright-tests]
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           # required for playwright-gh-pages
           persist-credentials: true

package/templates/github/workflows/cp-update.yml

@@ -15,7 +15,7 @@ jobs:
   release:
     runs-on: ubuntu-latest
     steps:
-      - uses: grafana/plugin-actions/create-plugin-update@create-plugin-update/v1.1.0
+      - uses: grafana/plugin-actions/create-plugin-update@create-plugin-update/v2.0.1
         with:
           # Make sure to save the token in your repository secrets as `GH_PAT_TOKEN`
           token: $\{{ secrets.GH_PAT_TOKEN }}

package/templates/github/workflows/is-compatible.yml

@@ -7,18 +7,18 @@ jobs:
     permissions:
       contents: read
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           persist-credentials: false
 
 {{#if_eq packageManagerName "pnpm"}}
       # pnpm action uses the packageManager field in package.json to
       # understand which version to install.
-      - uses: pnpm/action-setup@a7487c7e89a18df4991f7f222e4898a00d66ddda # v4.1.0
+      - uses: pnpm/action-setup@41ff72655975bd51cab0327fa583b6e92b6d3061 # v4.2.0
 {{/if_eq}}
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@49933ea5288caeca8642d1e84afbd3f7d6820020 # v4.4.0
+        uses: actions/setup-node@2028fbc5c25fe9cf00d9f06a71cc4710d4507903 # v6.0.0
         with:
           node-version: '22'
           cache: '{{ packageManagerName }}'

package/templates/github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
       contents: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v4
+      - uses: actions/checkout@v5
         with:
           persist-credentials: false
 

package/templates/panel/.config/AGENTS/fundamentals.md

@@ -0,0 +1,81 @@
+# Project overview
+This repository contains a **Grafana panel plugin**, providing a custom visualization for Grafana dashboards.
+Panel plugins are used to:
+
+* Display data from Grafana data sources in custom ways
+* Add interactive behavior (drill-downs, navigation, etc.)
+* Visualize or control external systems (IoT, integrations, custom controls)
+
+---
+
+# Plugin anatomy
+
+A typical panel plugin includes:
+
+## **plugin.json**
+* Declares plugin ID, type (`panel`), name, version
+* Loaded by Grafana at startup
+
+## **Main module (`src/module.ts`)**
+* Exports: `new PanelPlugin(PanelComponent)`
+* Registers panel options, migrations, defaults
+
+## **Panel component (`src/components/Panel.tsx`)**
+* React component receiving: `data`, `timeRange`, `width`, `height`, `options`
+* Renders visualization using Grafana data frames and field configs
+
+---
+
+# Agent goals
+
+Agents must:
+
+* Preserve the existing options schema unless adding a migration handler
+* Follow idiomatic React + TypeScript patterns used in official Grafana examples
+* Treat **`AGENTS.md` as the authoritative source** over `.config/AGENTS/*`
+
+---
+
+# Repository layout (Compact)
+
+* `plugin.json` — Panel plugin manifest
+* `src/module.ts` — Main plugin entry
+* `src/components/` — Panel React components
+* `src/types.ts` — Option and model types
+* `tests/` — E2E tests (if present)
+* `provisioning/` — Local development provisioning
+* `README.md` — Human documentation
+
+---
+
+# Coding guidelines
+
+* Use **TypeScript** and **functional React components**
+* Use **@grafana/ui**, **@grafana/data**, **@grafana/runtime**
+* Respect `width` and `height`; keep layout responsive
+* Avoid unnecessary dependencies; ensure Grafana compatibility
+* Use **Emotion** for custom styling
+* Follow existing file structure
+* Keep code typed and predictable
+
+---
+
+# Safety & constraints (Compact)
+
+Agents must **not**:
+
+* Change plugin IDs or plugin type in `plugin.json`
+* Modify anything under `.config/*`
+* Add a backend — panel plugins are **frontend only**
+* Remove or change existing options without a migration handler
+* Break public APIs (options, field configs, panel props)
+
+Agents **should**:
+
+* Keep the plugin backward compatible
+* Mirror patterns from Grafana’s official panel plugin examples
+
+---
+
+# How-to
+* [How-to add panel options](./howto/add-panel-options.md)

package/templates/panel/.config/AGENTS/howto/add-panel-options.md

@@ -0,0 +1,130 @@
+# Adding a New Panel Option
+
+Always complete **all three steps**:
+
+### **1. Extend the options type**
+
+File: `src/types.ts`
+
+```ts
+export interface SimpleOptions {
+  // existing...
+  myOptionName: MyOptionType;
+}
+```
+
+* Property name must match the builder `path`.
+* Type must match expected editor output.
+
+---
+
+### **2. Register the option in `setPanelOptions`**
+
+File: `src/module.ts` inside `setPanelOptions((builder) => { ... })`
+
+Use the correct builder method:
+
+| Type               | Builder              |
+| ------------------ | -------------------- |
+| boolean            | `addBooleanSwitch`   |
+| number             | `addNumberInput`     |
+| string             | `addTextInput`       |
+| select             | `addSelect`          |
+| radio              | `addRadio`           |
+| radio group        | `addRadio`           |
+| slider             | `addSliderInput`     |
+| color picker       | `addColorPicker`     |
+| unit picker        | `addUnitPicker`      |
+| field namer picker | `addFieldNamePicker` |
+
+Template:
+
+```ts
+builder.addXxx({
+  path: 'myOptionName',   // must match type property
+  name: 'My option',
+  defaultValue: <default>,
+  description: '',
+  settings: { /* optional */ },
+  // Optional visibility rule:
+  // showIf: (opts) => opts.someOtherOption,
+});
+```
+
+Rules:
+
+* Every option **must** have a `defaultValue`.
+* Put numeric constraints in `settings` (`min`, `max`, `step`).
+* Use `showIf` for conditional display.
+
+---
+
+### **3. Use the option in the panel component**
+
+File: `src/Panel.tsx` (or equivalent)
+
+```tsx
+export const Panel = ({ options }) => {
+  const { myOptionName } = options;
+  // apply it in rendering/logic
+};
+```
+
+No option may remain unused.
+
+---
+
+# Quick Editor Recipes
+
+### **Boolean**
+
+```ts
+.addBooleanSwitch({ path: 'flag', name: 'Flag', defaultValue: false })
+```
+
+### **Number**
+
+```ts
+.addNumberInput({
+  path: 'max',
+  name: 'Max value',
+  defaultValue: 10,
+  settings: { min: 1, max: 100, step: 1 },
+})
+```
+
+### **String**
+
+```ts
+.addTextInput({ path: 'label', name: 'Label', defaultValue: '' })
+```
+
+### **Select**
+
+```ts
+.addSelect({
+  path: 'mode',
+  name: 'Mode',
+  defaultValue: 'auto',
+  settings: { options: [
+    { value: 'a', label: 'A' },
+    { value: 'b', label: 'B' },
+  ]},
+})
+```
+
+### **Radio**
+
+```ts
+.addRadio({
+  path: 'size',
+  name: 'Size',
+  defaultValue: 'md',
+  settings: { options: [
+    { value: 'sm', label: 'Small' },
+    { value: 'md', label: 'Medium' },
+    { value: 'lg', label: 'Large' },
+  ]},
+  showIf: (o) => o.showSize,
+})
+```

package/templates/panel/AGENTS.md

@@ -0,0 +1,3 @@
+## Project overview
+
+This repository contains a **Grafana panel plugin**. Fundamentals of a grafana plugin can be found [here](./config/AGENTS/fundamentals.md)