@grafana/create-plugin 4.4.4 → 4.5.0-canary.847.385428e.0

package/CHANGELOG.md

@@ -1,51 +1,3 @@
-# v4.4.4 (Thu Mar 28 2024)
-
-#### 🐛 Bug Fix
-
-- Create Plugin: Fix hardcoded path [#846](https://github.com/grafana/plugin-tools/pull/846) ([@oshirohugo](https://github.com/oshirohugo))
-
-#### Authors: 1
-
-- Hugo Kiyodi Oshiro ([@oshirohugo](https://github.com/oshirohugo))
-
----
-
-# v4.4.3 (Thu Mar 28 2024)
-
-#### 🐛 Bug Fix
-
-- Create Plugin: Update default yarn version to 1.22.22 [#839](https://github.com/grafana/plugin-tools/pull/839) ([@jackw](https://github.com/jackw))
-
-#### Authors: 1
-
-- Jack Westbrook ([@jackw](https://github.com/jackw))
-
----
-
-# v4.4.2 (Thu Mar 28 2024)
-
-#### 🐛 Bug Fix
-
-- Create Plugin: Fix grafana running without plugin backend [#844](https://github.com/grafana/plugin-tools/pull/844) ([@oshirohugo](https://github.com/oshirohugo))
-
-#### Authors: 1
-
-- Hugo Kiyodi Oshiro ([@oshirohugo](https://github.com/oshirohugo))
-
----
-
-# v4.4.1 (Wed Mar 27 2024)
-
-#### 🐛 Bug Fix
-
-- Create-Plugin: Improve commands intructions [#843](https://github.com/grafana/plugin-tools/pull/843) ([@oshirohugo](https://github.com/oshirohugo))
-
-#### Authors: 1
-
-- Hugo Kiyodi Oshiro ([@oshirohugo](https://github.com/oshirohugo))
-
----
-
 # v4.4.0 (Tue Mar 26 2024)
 
 #### 🐛 Bug Fix

package/dist/commands/generate/print-success-message.js

@@ -14,9 +14,7 @@ export function printGenerateSuccessMessage(answers) {
             ]
             : []),
         '- `docker-compose up` to start a grafana development server. ' +
-            (answers.hasBackend
-                ? 'The plugin backend will be reloaded on every code change and a debugger can be attached on port `2345`.'
-                : ''),
+            (answers.hasBackend ? 'Restart this command after each time you run mage to run your new backend code.' : ''),
         '- Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin.',
     ];
     const msg = `\n# Congratulations on scaffolding a Grafana ${answers.pluginType} plugin! 🚀

package/dist/commands/generate.command.js

@@ -60,6 +60,8 @@ function getTemplateData(answers) {
         bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
         useReactRouterV6,
         reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+        e2eTestCmd: 'playwright test',
+        e2eTestUpdateCmd: 'playwright test --update-snapshots',
     };
     return templateData;
 }

package/dist/utils/utils.packageManager.js

@@ -6,7 +6,7 @@ const NPM_LOCKFILE = 'package-lock.json';
 const PNPM_LOCKFILE = 'pnpm-lock.yaml';
 const YARN_LOCKFILE = 'yarn.lock';
 const SUPPORTED_PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'];
-const DEFAULT_PACKAGE_MANAGER = { packageManagerName: 'yarn', packageManagerVersion: '1.22.22' };
+const DEFAULT_PACKAGE_MANAGER = { packageManagerName: 'yarn', packageManagerVersion: '1.22.19' };
 export function getPackageManagerFromUserAgent() {
     const agent = process.env.npm_config_user_agent;
     if (!agent) {

package/dist/utils/utils.templates.js

@@ -61,6 +61,13 @@ export function getTemplateData() {
     const useReactRouterV6 = features.useReactRouterV6 === true && pluginJson.type === PLUGIN_TYPES.app;
     const { packageManagerName, packageManagerVersion } = getPackageManagerWithFallback();
     const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
+    const hasPlaywright = isFile(path.join(process.cwd(), 'playwright.config.ts'));
+    const e2eTestCmd = hasPlaywright
+        ? 'playwright test'
+        : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run`;
+    const e2eTestUpdateCmd = hasPlaywright
+        ? 'playwright test --update-snapshots'
+        : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run --update-screenshots`;
     const templateData = {
         ...EXTRA_TEMPLATE_VARIABLES,
         pluginId: pluginJson.id,
@@ -78,6 +85,8 @@ export function getTemplateData() {
         bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
         useReactRouterV6: useReactRouterV6,
         reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+        e2eTestCmd,
+        e2eTestUpdateCmd,
     };
     debug('\nTemplate data:\n' + JSON.stringify(templateData, null, 2));
     return templateData;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "4.4.4",
+  "version": "4.5.0-canary.847.385428e.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "a274091414096629a8509b76e136a37f25ecdcbd"
+  "gitHead": "385428e1fa55a208afee1c096047ffdb5b9f3a0b"
 }

package/src/commands/generate/print-success-message.ts

@@ -16,9 +16,7 @@ export function printGenerateSuccessMessage(answers: CliArgs) {
         ]
       : []),
     '- `docker-compose up` to start a grafana development server. ' +
-      (answers.hasBackend
-       ? 'The plugin backend will be reloaded on every code change and a debugger can be attached on port `2345`.'
-        : ''),
+      (answers.hasBackend ? 'Restart this command after each time you run mage to run your new backend code.' : ''),
     '- Open http://localhost:3000 in your browser to create a dashboard to begin developing your plugin.',
   ];
 

package/src/commands/generate.command.ts

@@ -59,7 +59,9 @@ function getTemplateData(answers: CliArgs) {
   const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
   const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
   const isAppType = pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
-  const useReactRouterV6 = features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app; // We don't enable this by default yet for new scenes plugins.
+  // We don't enable this by default yet for new scenes plugins.
+  const useReactRouterV6 = features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app;
+
   const templateData: TemplateData = {
     ...answers,
     pluginId,
@@ -72,6 +74,8 @@ function getTemplateData(answers: CliArgs) {
     bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
     useReactRouterV6,
     reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+    e2eTestCmd: 'playwright test',
+    e2eTestUpdateCmd: 'playwright test --update-snapshots',
   };
 
   return templateData;

package/src/types.ts

@@ -21,4 +21,6 @@ export type TemplateData = {
   bundleGrafanaUI: boolean;
   useReactRouterV6: boolean;
   reactRouterVersion: string;
+  e2eTestCmd: string;
+  e2eTestUpdateCmd: string;
 };

package/src/utils/utils.packageManager.ts

@@ -7,7 +7,7 @@ const NPM_LOCKFILE = 'package-lock.json';
 const PNPM_LOCKFILE = 'pnpm-lock.yaml';
 const YARN_LOCKFILE = 'yarn.lock';
 const SUPPORTED_PACKAGE_MANAGERS = ['npm', 'yarn', 'pnpm'];
-const DEFAULT_PACKAGE_MANAGER = { packageManagerName: 'yarn', packageManagerVersion: '1.22.22' };
+const DEFAULT_PACKAGE_MANAGER = { packageManagerName: 'yarn', packageManagerVersion: '1.22.19' };
 
 export type PackageManager = {
   packageManagerName: string;

package/src/utils/utils.templates.ts

@@ -95,6 +95,13 @@ export function getTemplateData(): TemplateData {
   const useReactRouterV6 = features.useReactRouterV6 === true && pluginJson.type === PLUGIN_TYPES.app;
   const { packageManagerName, packageManagerVersion } = getPackageManagerWithFallback();
   const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
+  const hasPlaywright = isFile(path.join(process.cwd(), 'playwright.config.ts'));
+  const e2eTestCmd = hasPlaywright
+    ? 'playwright test'
+    : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run`;
+  const e2eTestUpdateCmd = hasPlaywright
+    ? 'playwright test --update-snapshots'
+    : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run --update-screenshots`;
 
   const templateData = {
     ...EXTRA_TEMPLATE_VARIABLES,
@@ -113,6 +120,8 @@ export function getTemplateData(): TemplateData {
     bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
     useReactRouterV6: useReactRouterV6,
     reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+    e2eTestCmd,
+    e2eTestUpdateCmd,
   };
 
   debug('\nTemplate data:\n' + JSON.stringify(templateData, null, 2));

package/templates/common/.config/supervisord/supervisord.conf

@@ -5,11 +5,7 @@ user=root
 [program:grafana]
 user=root
 directory=/var/lib/grafana
-{{#if hasBackend}}
-command=bash -c 'while [ ! -f /root/{{ pluginId }}/dist/gpx_{{ snakeCase pluginName }}* ]; do sleep 1; done; /run.sh'
-{{else}}
 command=/run.sh
-{{/if}}
 stdout_logfile=/dev/fd/1
 stdout_logfile_maxbytes=0
 redirect_stderr=true

package/templates/common/_package.json

@@ -10,8 +10,8 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "{{ packageManagerName }} run lint{{#if isNPM}} --{{/if}} --fix",
-    "e2e": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run",
-    "e2e:update": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run --update-screenshots",
+    "e2e": "{{ e2eTestCmd }}",
+    "e2e:update": "{{ e2eTestUpdateCmd }}",
     "server": "docker-compose up --build",
     "sign": "npx --yes @grafana/sign-plugin@latest"
   },
@@ -19,10 +19,10 @@
   "license": "Apache-2.0",
   "devDependencies": {
     "@babel/core": "^7.21.4",
-    "@grafana/e2e": "{{ grafanaVersion }}",
-    "@grafana/e2e-selectors": "{{ grafanaVersion }}",
     "@grafana/eslint-config": "^7.0.0",
+    "@grafana/plugin-e2e": "^0.24.0",
     "@grafana/tsconfig": "^1.2.0-rc1",
+    "@playwright/test": "^1.41.2",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",

package/templates/common/gitignore

@@ -25,11 +25,15 @@ dist/
 artifacts/
 work/
 ci/
-e2e-results/
-**/cypress/videos
-**/cypress/report.json
+
+# e2e test directories
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+/playwright/.auth/
 
 # Editor
 .idea
 
-.eslintcache
+.eslintcache

package/templates/common/playwright.config.ts

@@ -0,0 +1,51 @@
+import { defineConfig, devices } from '@playwright/test';
+import { dirname } from 'node:path';
+
+const pluginE2eAuth = `${dirname(require.resolve('@grafana/plugin-e2e'))}/auth`;
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// require('dotenv').config();
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    // 1. Login to Grafana and store the cookie on disk for use in other tests.
+    {
+      name: 'auth',
+      testDir: pluginE2eAuth,
+      testMatch: [/.*\.js/],
+    },
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/admin.json' },
+      dependencies: ['auth'],
+    },
+  ],
+
+});

package/templates/common/tests/smoke.spec.ts

@@ -0,0 +1,5 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('should load dashboard page', async ({ dashboardPage }) => {
+  expect(dashboardPage.ctx.page).toHaveTitle('New dashboard - Dashboards - Grafana');
+});

package/templates/github/ci/.github/workflows/ci.yml

@@ -74,15 +74,28 @@ jobs:
       - name: Check for E2E
         id: check-for-e2e
         run: |
-          if [ -d "cypress" ]
+          if [ -f "playwright.config.ts"]
           then
             echo "has-e2e=true" >> $GITHUB_OUTPUT
           fi
 
+      - name: Install Playwright Browsers
+        if: steps.check-for-e2e.outputs.has-e2e == 'true'
+        run: {{ packageManagerName }} exec playwright install --with-deps
+
       - name: Start grafana docker
         if: steps.check-for-e2e.outputs.has-e2e == 'true'
         run: docker-compose up -d
 
+      - name: Wait for Grafana to start
+        if: steps.check-for-e2e.outputs.has-e2e == 'true'
+        uses: nev7n/wait_for_response@v1
+        with:
+          url: 'http://localhost:3000/'
+          responseCode: 200
+          timeout: 60000
+          interval: 500
+
       - name: Run e2e tests
         if: steps.check-for-e2e.outputs.has-e2e == 'true'
         run: {{ packageManagerName }} run e2e
@@ -95,8 +108,8 @@ jobs:
         uses: actions/upload-artifact@v4
         if: steps.check-for-e2e.outputs.has-e2e == 'true' && steps.run-e2e-tests.outcome != 'success'
         with:
-          name: cypress-videos
-          path: cypress/videos
+          name: playwright-report
+          path: playwright-report/
           retention-days: 5
 
       - name: Sign plugin

package/templates/common/cypress/integration/01-smoke.spec.ts

@@ -1,10 +0,0 @@
-import { e2e } from '@grafana/e2e';
-
-e2e.scenario({
-  describeName: 'Smoke test',
-  itName: 'Smoke test',
-  scenario: () => {
-    e2e.pages.Home.visit();
-    e2e().contains('Welcome to Grafana').should('be.visible');
-  },
-});