@grafana/create-plugin 6.1.1-canary.2232.18584719214.0 → 6.2.0-canary.2233.18586197736.0

package/src/constants.ts

@@ -1,5 +1,5 @@
-import { fileURLToPath } from 'node:url';
 import path from 'node:path';
+import { fileURLToPath } from 'node:url';
 
 const __dirname = fileURLToPath(new URL('.', import.meta.url));
 
@@ -51,11 +51,19 @@ export const EXTRA_TEMPLATE_VARIABLES = {
 export const DEFAULT_FEATURE_FLAGS = {
   useReactRouterV6: true,
   bundleGrafanaUI: false,
+  usePlaywright: true,
   useExperimentalRspack: false,
   useExperimentalUpdates: true,
 };
 
-export const GRAFANA_FE_PACKAGES = ['@grafana/data', '@grafana/runtime', '@grafana/schema', '@grafana/ui'];
+export const GRAFANA_FE_PACKAGES = [
+  '@grafana/data',
+  '@grafana/e2e-selectors',
+  '@grafana/e2e',
+  '@grafana/runtime',
+  '@grafana/schema',
+  '@grafana/ui',
+];
 
 export const MIGRATION_CONFIG = {
   // Files that should be overriden during a migration.

package/src/types.ts

@@ -25,6 +25,8 @@ export type TemplateData = {
   useReactRouterV6: boolean;
   scenesVersion: string;
   reactRouterVersion: string;
+  usePlaywright: boolean;
+  useCypress: boolean;
   useExperimentalRspack: boolean;
   pluginExecutable?: string;
   frontendBundler: 'webpack' | 'rspack';

package/src/utils/utils.config.ts

@@ -1,12 +1,11 @@
-import { argv, commandName } from './utils.cli.js';
-
+import fs from 'node:fs';
+import { writeFile } from 'node:fs/promises';
+import path from 'node:path';
 import { CURRENT_APP_VERSION } from './utils.version.js';
+import { argv, commandName } from './utils.cli.js';
 import { DEFAULT_FEATURE_FLAGS } from '../constants.js';
-import fs from 'node:fs';
 import { output } from './utils.console.js';
 import { partitionArr } from './utils.helpers.js';
-import path from 'node:path';
-import { writeFile } from 'node:fs/promises';
 
 export type FeatureFlags = {
   bundleGrafanaUI?: boolean;
@@ -14,6 +13,7 @@ export type FeatureFlags = {
   // If set to true, the plugin will be scaffolded with React Router v6. Defaults to true.
   // (Attention! We always scaffold new projects with React Router v6, so if you are changing this to `false` manually you will need to make changes to the React code as well.)
   useReactRouterV6?: boolean;
+  usePlaywright?: boolean;
   useExperimentalRspack?: boolean;
   useExperimentalUpdates?: boolean;
 };

package/src/utils/utils.templates.ts

@@ -1,27 +1,27 @@
+import { lt as semverLt } from 'semver';
+import { glob } from 'glob';
+import path from 'node:path';
+import fs from 'node:fs';
+import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
+import { normalizeId, renderHandlebarsTemplate } from './utils.handlebars.js';
+import { getPluginJson } from './utils.plugin.js';
+import { debug } from './utils.cli.js';
 import {
-  DEFAULT_FEATURE_FLAGS,
+  TEMPLATE_PATHS,
   EXPORT_PATH_PREFIX,
   EXTRA_TEMPLATE_VARIABLES,
   PLUGIN_TYPES,
-  TEMPLATE_PATHS,
+  DEFAULT_FEATURE_FLAGS,
 } from '../constants.js';
 import { GenerateCliArgs, TemplateData } from '../types.js';
-import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
 import {
-  getPackageManagerFromUserAgent,
   getPackageManagerInstallCmd,
   getPackageManagerWithFallback,
+  getPackageManagerFromUserAgent,
 } from './utils.packageManager.js';
-import { normalizeId, renderHandlebarsTemplate } from './utils.handlebars.js';
-
-import { CURRENT_APP_VERSION } from './utils.version.js';
-import { debug } from './utils.cli.js';
-import fs from 'node:fs';
-import { getConfig } from './utils.config.js';
 import { getExportFileName } from '../utils/utils.files.js';
-import { getPluginJson } from './utils.plugin.js';
-import { glob } from 'glob';
-import path from 'node:path';
+import { getGrafanaRuntimeVersion, CURRENT_APP_VERSION } from './utils.version.js';
+import { getConfig } from './utils.config.js';
 
 const templatesDebugger = debug.extend('templates');
 
@@ -95,6 +95,11 @@ export function renderTemplateFromFile(templateFile: string, data?: any) {
 export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
   const { features } = getConfig();
   const currentVersion = CURRENT_APP_VERSION;
+  const grafanaVersion = getGrafanaRuntimeVersion();
+  const usePlaywright = features.usePlaywright === true || isFile(path.join(process.cwd(), 'playwright.config.ts'));
+  //@grafana/e2e was deprecated in Grafana 11
+  const useCypress =
+    !usePlaywright && semverLt(grafanaVersion, '11.0.0') && fs.existsSync(path.join(process.cwd(), 'cypress'));
   const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
   const getReactRouterVersion = () => (features.useReactRouterV6 ? '6.22.0' : '5.2.0');
   const isAppType = (pluginType: string) => pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
@@ -125,6 +130,8 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
       useReactRouterV6: features.useReactRouterV6 ?? DEFAULT_FEATURE_FLAGS.useReactRouterV6,
       reactRouterVersion: getReactRouterVersion(),
       scenesVersion: features.useReactRouterV6 ? '^6.10.4' : '^5.41.3',
+      usePlaywright,
+      useCypress,
       useExperimentalRspack: Boolean(features.useExperimentalRspack),
       frontendBundler,
     };
@@ -151,6 +158,8 @@ export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
       useReactRouterV6: features.useReactRouterV6 ?? DEFAULT_FEATURE_FLAGS.useReactRouterV6,
       reactRouterVersion: getReactRouterVersion(),
       scenesVersion: features.useReactRouterV6 ? '^6.10.4' : '^5.41.3',
+      usePlaywright,
+      useCypress,
       pluginExecutable: pluginJson.executable,
       useExperimentalRspack: Boolean(features.useExperimentalRspack),
       frontendBundler,

package/templates/common/_package.json

@@ -8,18 +8,22 @@
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
     "typecheck": "tsc --noEmit",
     "lint": "eslint --cache .",
-    "lint:fix": "{{ packageManagerName }} run lint{{#if isNPM}} --{{/if}} --fix && prettier --write --list-different .",
-    "e2e": "playwright test",
+    "lint:fix": "{{ packageManagerName }} run lint{{#if isNPM}} --{{/if}} --fix && prettier --write --list-different .",{{#if usePlaywright}}
+    "e2e": "playwright test",{{/if}}{{#if useCypress}}
+    "e2e": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run",
+    "e2e:update": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run --update-screenshots",{{/if}}
     "server": "docker compose up --build",
     "sign": "npx --yes @grafana/sign-plugin@latest"
   },
   "author": "{{ sentenceCase orgName }}",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@grafana/eslint-config": "^8.2.0",
-    "@grafana/plugin-e2e": "^2.2.0",
-    "@grafana/tsconfig": "^2.0.0",
-    "@playwright/test": "^1.52.0",{{#if useExperimentalRspack}}
+{{#if useCypress}}    "@grafana/e2e": "^11.0.7",
+    "@grafana/e2e-selectors": "^12.2.0",{{/if}}
+    "@grafana/eslint-config": "^8.2.0",{{#if usePlaywright}}
+    "@grafana/plugin-e2e": "^2.2.0",{{/if}}
+    "@grafana/tsconfig": "^2.0.0",{{#if usePlaywright}}
+    "@playwright/test": "^1.52.0",{{/if}}{{#if useExperimentalRspack}}
     "@rspack/core": "^1.3.0",
     "@rspack/cli": "^1.3.0",{{/if}}
     "@stylistic/eslint-plugin-ts": "^2.9.0",
@@ -52,8 +56,8 @@
     "replace-in-file-webpack-plugin": "^1.0.6",{{#if useExperimentalRspack}}
     "rspack-plugin-virtual-module": "^0.1.13",{{/if}}
     "sass": "1.63.2",
-    "sass-loader": "13.3.1",
-    "semver": "^7.6.3",
+    "sass-loader": "13.3.1",{{#if usePlaywright}}
+    "semver": "^7.6.3",{{/if}}
     "style-loader": "3.3.3",{{#unless useExperimentalRspack}}
     "swc-loader": "^0.2.3",{{/unless}}
     "terser-webpack-plugin": "^5.3.10",

package/templates/common/npmrc

@@ -10,3 +10,6 @@ public-hoist-pattern[]="*prettier*"
 # Hoist all types packages to the root for better TS support
 public-hoist-pattern[]="@types/*"
 public-hoist-pattern[]="*terser-webpack-plugin*"
+{{#unless usePlaywright}}
+# @grafana/e2e expects cypress to exist in the root of the node_modules directory
+public-hoist-pattern[]="*cypress*"{{/unless}}