Create Plugin: hackathon update browser ui

.cursor/mcp.json

@@ -1,7 +1,8 @@
 {
   "mcpServers": {
-    "nx-mcp": {
-      "url": "http://localhost:9529/sse"
+    "chrome-devtools": {
+      "command": "npx",
+      "args": ["chrome-devtools-mcp@latest", "--yes", "--headless=true", "--isolated=true"]
     }
   }
-}
+}

.github/workflows/ci.yml

@@ -55,9 +55,11 @@ jobs:
         run: npm run build
       - name: Lint built packages
         run: npm exec nx affected -- --target lint:package --parallel
+        # Temporarily patch bump create-plugin so it can test update command.
       - name: Pack packages for testing
         run: |
           mkdir ./packed-artifacts
+          npm version patch --workspace="@grafana/create-plugin" --commit-hooks=false --git-tag-version=false
           npm pack --workspace="@grafana/create-plugin" --workspace="@grafana/sign-plugin" --workspace="@grafana/plugin-e2e" --pack-destination="./packed-artifacts"
           cp ./.github/knip.json ./packed-artifacts
       - name: Upload artifacts for testing
@@ -97,7 +99,6 @@ jobs:
         uses: actions/setup-node@a0853c24544627f65ddf259abe73b1d18a591444 # v5.0.0
         with:
           node-version: ${{ matrix.node-version }}
-          registry-url: 'https://registry.npmjs.org'
 
       - name: Download packed artifacts
         uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5.0.0
@@ -164,6 +165,77 @@ jobs:
         run: sign-plugin --rootUrls http://www.example.com --signatureType private
         working-directory: ./${{ env.WORKING_DIR }}
 
+  test-updates:
+    name: Test create-plugin update command
+    runs-on: ubuntu-x64
+    if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"
+    needs: [test]
+    env:
+      WORKING_DIR: 'myorg-nobackend-panel'
+    steps:
+      - name: Scaffold plugin using the earliest create-plugin version mentioned in migrations
+        run: npx -y @grafana/[email protected] --plugin-name='no-backend' --org-name='myorg' --plugin-type='panel'
+
+      - name: Install generated plugin dependencies
+        run: npm install --no-audit
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Download packed artifacts
+        uses: actions/download-artifact@634f93cb2916e3fdff6788551b99b062d0335ce0 # v5.0.0
+        with:
+          name: packed-artifacts
+          path: ./packed-artifacts
+
+      - name: Install npm packages globally
+        run: for file in *.tgz; do npm install -g "$file"; done
+        working-directory: ./packed-artifacts
+
+      - name: Test create-plugin update command
+        run: npx create-plugin update --force
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Lint plugin frontend
+        run: npm run lint
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Typecheck plugin frontend
+        run: npm run typecheck
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Build plugin frontend
+        run: npm run build
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Test plugin frontend
+        run: npm run test:ci
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Install playwright dependencies
+        run: npm exec playwright install --with-deps chromium
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Start grafana server for e2e tests (10.4.0)
+        run: |
+          ANONYMOUS_AUTH_ENABLED=false docker compose build --no-cache
+          docker compose up -d
+        env:
+          GRAFANA_VERSION: '10.4.0'
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Wait for grafana server (10.4.0)
+        uses: grafana/plugin-actions/wait-for-grafana@wait-for-grafana/v1.0.1
+        with:
+          url: http://localhost:3000/login
+
+      - name: Run e2e tests (10.4.0)
+        id: run-e2e-tests-min-version
+        run: npm run e2e
+        working-directory: ./${{ env.WORKING_DIR }}
+
+      - name: Stop grafana docker (10.4.0)
+        run: docker compose down
+        working-directory: ./${{ env.WORKING_DIR }}
+
   generate-plugins:
     name: Test plugin scaffolding
     if: "!contains(github.event.head_commit.message, 'ci skip') && !contains(github.event.head_commit.message, 'skip ci')"

docusaurus/docs/how-to-guides/updating-a-plugin.md

@@ -0,0 +1,73 @@
+---
+description: Learn how to use create-plugin update to automatically update configuration files, workflows, and dependencies.
+keywords:
+  - grafana
+  - plugin
+  - update
+  - config
+  - dependencies
+---
+
+import UpdateNPM from '@shared/createplugin-update.md';
+import UpdateNPMCommit from '@shared/createplugin-update-commit.md';
+import UpdateNPMForce from '@shared/createplugin-update-force.md';
+
+# Automate updating your plugin
+
+It's important for the health of your Grafana plugin to keep its tooling up to date. Doing so, however, can be a laborious task. To help solve this, `create-plugin` provides the `update` command to help you automate tooling updates, including:
+
+- **configuration file changes** to take advantage of updates in Grafana, development tooling, and create-plugin
+- **dependency updates** to navigate major version bumps in development tooling
+- **code refactors** to align with changes to configuration files or major dependency updates
+
+:::info[Git branch status]
+
+Create a git branch before proceeding. If there are uncommitted changes, stash or commit them first otherwise the update command will exit early.
+
+:::
+
+To update your plugin, run:
+
+<UpdateNPM />
+
+After the update is finished, run your development and build scripts to validate your plugin environment is still operating as expected.
+
+## Options and flags
+
+### `--commit`
+
+The commit flag will commit the changes to the current branch on each successful migration. This is useful for debugging and reviewing changes made by the update command.
+
+<UpdateNPMCommit />
+
+### `--force`
+
+The force flag can be used to bypass all safety checks related to uncommitted changes. Use with discretion.
+
+<UpdateNPMForce />
+
+## How it works
+
+The update command applies a series of changes, known as migrations, to your plugin to align it with the latest 'create-plugin' standards.
+
+When run, it:
+
+- Detects the current create-plugin version
+- Determines which migrations need to run to bring your plugin up to date
+- Runs each migration sequentially
+
+As each migration runs, its name and description are output to the terminal, along with a list of any files the migration has changed. If a migration updates any dependencies, it will also install and update any lock files.
+
+If you pass the `--commit` flag, after each migration finishes it adds a Git commit to the current branch with the name of the migration.
+
+## Automate updates via CI
+
+To make it even easier to keep your plugin up to date, we provide a GitHub workflow that runs the update command and automatically opens a PR if there are any changes. You can follow [these steps](/set-up/set-up-github#the-create-plugin-update-workflow) to enable it in your repository.
+
+## Automate dependency updates
+
+`create-plugin` will only update dependencies if they are required for other changes to function correctly. Besides running the update command regularly, use [dependabot](https://docs.github.com/en/code-security/getting-started/dependabot-quickstart-guide) or [renovatebot](https://docs.renovatebot.com/) to keep all dependencies up to date.
+
+## Getting help
+
+If you experience issues, please [open a bug report](https://github.com/grafana/plugin-tools/issues/new?template=bug_report.yml).

docusaurus/docs/key-concepts/best-practices.md

@@ -28,6 +28,7 @@ Is something missing from this list? [Let us know](https://github.com/grafana/pl
 - **Include a well-written README** - Give users a deeper understanding of how to configure and use your plugin, but don’t make it essential reading. You want users to be able to understand your plugin intuitively without referring to the documentation if possible.
 - **Allow incremental learning** - Hide advanced options using switches or categories, and let users learn about advanced features when they’re ready.
 - **Get beta testers** - Enlist users in your target audience to try out your plugin before you submit it. Get feedback to help improve your plugin before it's published.
+- **Keep tooling up to date** - Take advantage of the [create-plugin update](/how-to-guides/updating-a-plugin.md) command to keep your plugin up to date.
 
 ## Panel plugins
 

docusaurus/docs/shared/createplugin-update-commit.md

@@ -0,0 +1,3 @@
+```shell npm2yarn
+npx @grafana/create-plugin@latest update --commit
+```

docusaurus/website/sidebars.ts

@@ -192,6 +192,7 @@ const sidebars: SidebarsConfig = {
           items: ['how-to-guides/plugin-internationalization-grafana-11'],
         },
         'how-to-guides/runtime-checks',
+        'how-to-guides/updating-a-plugin',
         'how-to-guides/debugging-plugins',
       ],
     },