@grafana/create-plugin 4.5.0 → 4.6.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v4.6.0 (Fri Apr 05 2024)
+
+#### 🚀 Enhancement
+
+- Create Plugin: Scaffold plugins with playwright for e2e [#847](https://github.com/grafana/plugin-tools/pull/847) ([@jackw](https://github.com/jackw) [@sunker](https://github.com/sunker))
+
+#### Authors: 2
+
+- Erik Sundell ([@sunker](https://github.com/sunker))
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
 # v4.5.0 (Fri Apr 05 2024)
 
 #### 🚀 Enhancement

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

@@ -7,6 +7,7 @@ export function printGenerateSuccessMessage(answers) {
     const commands = [
         `- \`cd ./${directory}\``,
         `- \`${packageManagerName} install\` to install frontend dependencies.`,
+        `- \`${packageManagerName} exec playwright install chromium\` to install e2e test dependencies.`,
         `- \`${packageManagerName} run dev\` to build (and watch) the plugin frontend code.`,
         ...(answers.hasBackend
             ? [

package/dist/commands/generate.command.js

@@ -48,6 +48,7 @@ function getTemplateData(answers) {
     const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
     const isAppType = pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
     const useReactRouterV6 = features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app;
+    const usePlaywright = features.usePlaywright === true;
     const templateData = {
         ...answers,
         pluginId,
@@ -60,6 +61,8 @@ function getTemplateData(answers) {
         bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
         useReactRouterV6,
         reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+        usePlaywright,
+        e2eTestCmd: 'playwright test',
     };
     return templateData;
 }

package/dist/constants.js

@@ -34,6 +34,7 @@ export const EXTRA_TEMPLATE_VARIABLES = {
 export const DEFAULT_FEATURE_FLAGS = {
     useReactRouterV6: true,
     bundleGrafanaUI: false,
+    usePlaywright: true,
 };
 export const GRAFANA_FE_PACKAGES = [
     '@grafana/data',

package/dist/utils/tests/utils.handlebars.test.js

@@ -1,5 +1,5 @@
 import { PLUGIN_TYPES } from '../../constants.js';
-import { normalizeId } from '../utils.handlebars.js';
+import { kebabToPascalKebab, normalizeId } from '../utils.handlebars.js';
 describe('Handlebars helpers', () => {
     describe('normalize id', () => {
         test.each([PLUGIN_TYPES.app, PLUGIN_TYPES.datasource, PLUGIN_TYPES.panel])('should return the id with the type appended', (type) => {
@@ -27,4 +27,10 @@ describe('Handlebars helpers', () => {
             expect(actual).toEqual(`myorg-myplugin-${type}`);
         });
     });
+    describe('pascal to pascal kebab', () => {
+        test('should convert pascal case to pascal kebab case', () => {
+            const actual = kebabToPascalKebab('my-plugin');
+            expect(actual).toEqual('My-Plugin');
+        });
+    });
 });

package/dist/utils/tests/utils.templates.test.js

@@ -17,7 +17,7 @@ describe('Utils / Templates', () => {
             expect(templateFiles.length).toBe(0);
         });
         test('should be possible to filter for multiple different files', () => {
-            const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, ['.prettierrc.js', 'cypress.json', 'tsconfig.json']);
+            const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, ['.prettierrc.js', 'jest.config.js', 'tsconfig.json']);
             expect(Array.isArray(templateFiles)).toBe(true);
             expect(templateFiles.length).toBe(3);
         });

package/dist/utils/utils.files.js

@@ -68,6 +68,7 @@ const configFileNamesMap = {
     npmrc: '.npmrc',
     _eslintrc: '.eslintrc',
     '_package.json': 'package.json',
+    'playwright.config': 'playwright.config.ts',
 };
 export function isFileStartingWith(file, filter) {
     if (Array.isArray(filter)) {

package/dist/utils/utils.handlebars.js

@@ -14,6 +14,15 @@ export const normalizeId = (pluginName, orgName, type) => {
     const newOrgName = orgName.replace(nameRegex, '');
     return newOrgName.toLowerCase() + '-' + newPluginName.toLowerCase() + `-${type}`;
 };
+export const kebabToPascalKebab = (str) => {
+    if (typeof str !== 'string') {
+        return '';
+    }
+    return str
+        .split('-')
+        .map((word) => pascalCase(word))
+        .join('-');
+};
 registerHandlebarsHelpers();
 registerHandlebarsPartials();
 function registerHandlebarsHelpers() {
@@ -30,6 +39,7 @@ function registerHandlebarsHelpers() {
         dashCase: kebabCase,
         kabobCase: kebabCase,
         kebabCase: kebabCase,
+        kebabToPascalKebab: kebabToPascalKebab,
         properCase: pascalCase,
         pascalCase: pascalCase,
         if_eq: ifEq,

package/dist/utils/utils.templates.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "79b462dd77503ddb597debb3575a90e43316c865"
+  "gitHead": "086e97a2aa3147c43358e269e62045cd55e97ece"
 }

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

@@ -9,6 +9,7 @@ export function printGenerateSuccessMessage(answers: CliArgs) {
   const commands = [
     `- \`cd ./${directory}\``,
     `- \`${packageManagerName} install\` to install frontend dependencies.`,
+    `- \`${packageManagerName} exec playwright install chromium\` to install e2e test dependencies.`,
     `- \`${packageManagerName} run dev\` to build (and watch) the plugin frontend code.`,
     ...(answers.hasBackend
       ? [

package/src/commands/generate.command.ts

@@ -59,7 +59,10 @@ 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 usePlaywright = features.usePlaywright === true;
+
   const templateData: TemplateData = {
     ...answers,
     pluginId,
@@ -72,6 +75,8 @@ function getTemplateData(answers: CliArgs) {
     bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
     useReactRouterV6,
     reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+    usePlaywright,
+    e2eTestCmd: 'playwright test',
   };
 
   return templateData;

package/src/constants.ts

@@ -50,6 +50,7 @@ export const EXTRA_TEMPLATE_VARIABLES = {
 export const DEFAULT_FEATURE_FLAGS = {
   useReactRouterV6: true,
   bundleGrafanaUI: false,
+  usePlaywright: true,
 };
 
 export const GRAFANA_FE_PACKAGES = [

package/src/types.ts

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

package/src/utils/tests/utils.handlebars.test.ts

@@ -1,5 +1,5 @@
 import { PLUGIN_TYPES } from '../../constants.js';
-import { normalizeId } from '../utils.handlebars.js';
+import { kebabToPascalKebab, normalizeId } from '../utils.handlebars.js';
 
 describe('Handlebars helpers', () => {
   describe('normalize id', () => {
@@ -42,4 +42,11 @@ describe('Handlebars helpers', () => {
       }
     );
   });
+
+  describe('pascal to pascal kebab', () => {
+    test('should convert pascal case to pascal kebab case', () => {
+      const actual = kebabToPascalKebab('my-plugin');
+      expect(actual).toEqual('My-Plugin');
+    });
+  });
 });

package/src/utils/tests/utils.templates.test.ts

@@ -28,7 +28,7 @@ describe('Utils / Templates', () => {
     });
 
     test('should be possible to filter for multiple different files', () => {
-      const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, ['.prettierrc.js', 'cypress.json', 'tsconfig.json']);
+      const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, ['.prettierrc.js', 'jest.config.js', 'tsconfig.json']);
 
       expect(Array.isArray(templateFiles)).toBe(true);
       expect(templateFiles.length).toBe(3);

package/src/utils/utils.config.ts

@@ -10,6 +10,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;
 };
 
 export type CreatePluginConfig = UserConfig & {

package/src/utils/utils.files.ts

@@ -91,6 +91,7 @@ const configFileNamesMap: Record<string, string> = {
   npmrc: '.npmrc',
   _eslintrc: '.eslintrc',
   '_package.json': 'package.json',
+  'playwright.config': 'playwright.config.ts',
 };
 
 /**

package/src/utils/utils.handlebars.ts

@@ -28,6 +28,16 @@ export const normalizeId = (pluginName: string, orgName: string, type: PLUGIN_TY
   return newOrgName.toLowerCase() + '-' + newPluginName.toLowerCase() + `-${type}`;
 };
 
+export const kebabToPascalKebab = (str: string) => {
+  if (typeof str !== 'string') {
+    return '';
+  }
+  return str
+    .split('-')
+    .map((word) => pascalCase(word))
+    .join('-');
+};
+
 // Register our helpers and partials with handlebars.
 registerHandlebarsHelpers();
 registerHandlebarsPartials();
@@ -46,6 +56,7 @@ function registerHandlebarsHelpers() {
     dashCase: kebabCase,
     kabobCase: kebabCase,
     kebabCase: kebabCase,
+    kebabToPascalKebab: kebabToPascalKebab,
     properCase: pascalCase,
     pascalCase: pascalCase,
     if_eq: ifEq,

package/src/utils/utils.templates.ts

@@ -3,7 +3,7 @@ import path from 'node:path';
 import fs from 'node:fs';
 import { mkdirp } from 'mkdirp';
 import createDebug from 'debug';
-import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
+import { directoryExists, filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
 import { renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
 import {
@@ -17,7 +17,7 @@ import { TemplateData } from '../types.js';
 import { getPackageManagerInstallCmd, getPackageManagerWithFallback } from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
-import { getConfig } from './utils.config.js';
+import { FeatureFlags, getConfig } from './utils.config.js';
 
 const debug = createDebug('templates');
 
@@ -95,6 +95,10 @@ export function getTemplateData(): TemplateData {
   const useReactRouterV6 = features.useReactRouterV6 === true && pluginJson.type === PLUGIN_TYPES.app;
   const { packageManagerName, packageManagerVersion } = getPackageManagerWithFallback();
   const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
+  const usePlaywright = features.usePlaywright === true || isFile(path.join(process.cwd(), 'playwright.config.ts'));
+  const e2eTestCmd = usePlaywright
+    ? 'playwright test'
+    : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run`;
 
   const templateData = {
     ...EXTRA_TEMPLATE_VARIABLES,
@@ -113,6 +117,8 @@ export function getTemplateData(): TemplateData {
     bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
     useReactRouterV6: useReactRouterV6,
     reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
+    usePlaywright,
+    e2eTestCmd,
   };
 
   debug('\nTemplate data:\n' + JSON.stringify(templateData, null, 2));

package/templates/app/src/components/AppConfig/AppConfig.tsx

@@ -50,6 +50,7 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
         <Field label="API Key" description="A secret key for authenticating to our custom API">
           <SecretInput
             width={60}
+            id="config-api-key"
             data-testid={testIds.appConfig.apiKey}
             name="apiKey"
             value={state.apiKey}
@@ -64,6 +65,7 @@ export const AppConfig = ({ plugin }: AppConfigProps) => {
           <Input
             width={60}
             name="apiUrl"
+            id="config-api-url"
             data-testid={testIds.appConfig.apiUrl}
             value={state.apiUrl}
             placeholder={`E.g.: http://mywebsite.com/api/v1`}

package/templates/app/tests/appConfig.spec.ts

@@ -0,0 +1,19 @@
+import { test, expect } from './fixtures';
+
+test('should be possible to save app configuration', async ({ appConfigPage, page }) => {
+  const saveForm = page.getByRole('button', { name: /Save API settings/i });
+
+  // reset the configured secret
+  await page.getByRole('button', { name: /reset/i }).click();
+
+  // enter some valid values
+  await page.getByRole('textbox', { name: 'API Key' }).fill('secret-api-key');
+  await page.getByRole('textbox', { name: 'API Url' }).clear();
+  await page.getByRole('textbox', { name: 'API Url' }).fill('http://www.my-awsome-grafana-app.com/api');
+
+  // listen for the server response on the saved form
+  const saveResponse = appConfigPage.waitForSettingsResponse();
+
+  await saveForm.click();
+  await expect(saveResponse).toBeOK();
+});

package/templates/app/tests/appNavigation.spec.ts

@@ -0,0 +1,32 @@
+import pluginJson from '../src/plugin.json';
+import { test, expect } from '@grafana/plugin-e2e';
+import { ROUTES } from '../src/constants';
+
+test.describe('navigating app', () => {
+  test('page one should render successfully', async ({ page }) => {
+    await page.goto(`/a/${pluginJson.id}/${ROUTES.One}`);
+    await expect(page.getByText('This is page one.')).toBeVisible();
+  });
+
+  test('page two should render successfully', async ({ page }) => {
+    await page.goto(`/a/${pluginJson.id}/${ROUTES.Two}`);
+    await expect(page.getByText('This is page two.')).toBeVisible();
+  });
+
+  test('page three should support an id parameter', async ({ page }) => {
+    await page.goto(`/a/${pluginJson.id}/${ROUTES.Three}/123456`);
+    await expect(page.getByText('ID: 123456')).toBeVisible();
+  });
+
+  test('page three should render sucessfully', async ({ page }) => {
+    // wait for page to successfully render
+    await page.goto(`/a/${pluginJson.id}/${ROUTES.One}`);
+    await expect(page.getByText('This is page one.')).toBeVisible();
+
+    // navigating to page four with full width layout without sidebar menu
+    await page.getByText('Full-width page example').click();
+
+    // navigate back to page one
+    await page.getByRole('link', { name: 'Back', exact: true }).click();
+  });
+});

package/templates/app/tests/fixtures.ts

@@ -0,0 +1,19 @@
+import { AppConfigPage, test as base } from '@grafana/plugin-e2e';
+import pluginJson from '../src/plugin.json';
+
+type AppTestFixture = { appConfigPage: AppConfigPage };
+
+export const test = base.extend<AppTestFixture>({
+  appConfigPage: async ({ page, selectors, grafanaVersion, request }, use, testInfo) => {
+    const configPage = new AppConfigPage(
+      { page, selectors, grafanaVersion, request, testInfo },
+      {
+        pluginId: pluginJson.id,
+      }
+    );
+    await configPage.goto();
+    await use(configPage);
+  },
+});
+
+export { expect } from '@grafana/plugin-e2e';

package/templates/backend/pkg/models/settings.go

@@ -0,0 +1,35 @@
+package models
+
+import (
+	"encoding/json"
+	"fmt"
+
+	"github.com/grafana/grafana-plugin-sdk-go/backend"
+)
+
+type PluginSettings struct {
+	Path    string                `json:"path"`
+	Secrets *SecretPluginSettings `json:"-"`
+}
+
+type SecretPluginSettings struct {
+	ApiKey string `json:"apiKey"`
+}
+
+func LoadPluginSettings(source backend.DataSourceInstanceSettings) (*PluginSettings, error) {
+	settings := PluginSettings{}
+	err := json.Unmarshal(source.JSONData, &settings)
+	if err != nil {
+		return nil, fmt.Errorf("could not unmarshal PluginSettings json: %w", err)
+	}
+
+	settings.Secrets = loadSecretPluginSettings(source.DecryptedSecureJSONData)
+
+	return &settings, nil
+}
+
+func loadSecretPluginSettings(source map[string]string) *SecretPluginSettings {
+	return &SecretPluginSettings{
+		ApiKey: source["apiKey"],
+	}
+}

package/templates/backend/pkg/plugin/datasource.go

@@ -4,12 +4,12 @@ import (
 	"context"
 	"encoding/json"
 	"fmt"
-	"math/rand"
 	"time"
 
 	"github.com/grafana/grafana-plugin-sdk-go/backend"
 	"github.com/grafana/grafana-plugin-sdk-go/backend/instancemgmt"
 	"github.com/grafana/grafana-plugin-sdk-go/data"
+	"github.com/{{ kebabCase orgName }}/{{ kebabCase pluginName }}/pkg/models"
 )
 
 // Make sure Datasource implements required interfaces. This is important to do
@@ -94,16 +94,23 @@ func (d *Datasource) query(_ context.Context, pCtx backend.PluginContext, query
 // datasource configuration page which allows users to verify that
 // a datasource is working as expected.
 func (d *Datasource) CheckHealth(_ context.Context, req *backend.CheckHealthRequest) (*backend.CheckHealthResult, error) {
-	var status = backend.HealthStatusOk
-	var message = "Data source is working"
+	res := &backend.CheckHealthResult{}
+	config, err := models.LoadPluginSettings(*req.PluginContext.DataSourceInstanceSettings)
 
-	if rand.Int()%2 == 0 {
-		status = backend.HealthStatusError
-		message = "randomized error"
+	if err != nil {
+		res.Status = backend.HealthStatusError
+		res.Message = "Unable to load settings"
+		return res, nil
+	}
+
+	if config.Secrets.ApiKey == "" {
+		res.Status = backend.HealthStatusError
+		res.Message = "API key is missing"
+		return res, nil
 	}
 
 	return &backend.CheckHealthResult{
-		Status:  status,
-		Message: message,
+		Status:  backend.HealthStatusOk,
+		Message: "Data source is working",
 	}, nil
 }

package/templates/backend/tests/configEditor.spec.ts

@@ -0,0 +1,26 @@
+import { test, expect } from '@grafana/plugin-e2e';
+import { MyDataSourceOptions, MySecureJsonData } from '../src/types';
+
+test('"Save & test" should be successful when configuration is valid', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  page,
+}) => {
+  const ds = await readProvisionedDataSource<MyDataSourceOptions, MySecureJsonData>({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+  await page.getByRole('textbox', { name: 'Path' }).fill(ds.jsonData.path ?? '');
+  await page.getByRole('textbox', { name: 'API Key' }).fill(ds.secureJsonData?.apiKey ?? '');
+  await expect(configPage.saveAndTest()).toBeOK();
+});
+
+test('"Save & test" should fail when configuration is invalid', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  page,
+}) => {
+  const ds = await readProvisionedDataSource<MyDataSourceOptions, MySecureJsonData>({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+  await page.getByRole('textbox', { name: 'Path' }).fill(ds.jsonData.path ?? '');
+  await expect(configPage.saveAndTest()).not.toBeOK();
+  await expect(configPage).toHaveAlert('error', { hasText: 'API key is missing' });
+});

package/templates/backend/tests/queryEditor.spec.ts

@@ -0,0 +1,22 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('should trigger new query when Constant field is changed', async ({
+  panelEditPage,
+  readProvisionedDataSource,
+}) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.getQueryEditorRow('A').getByRole('textbox', { name: 'Query Text' }).fill('test query');
+  const queryReq = panelEditPage.waitForQueryDataRequest();
+  await panelEditPage.getQueryEditorRow('A').getByRole('spinbutton').fill('10');
+  await expect(await queryReq).toBeTruthy();
+});
+
+test('data query should return values 10 and 20', async ({ panelEditPage, readProvisionedDataSource }) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.getQueryEditorRow('A').getByRole('textbox', { name: 'Query Text' }).fill('test query');
+  await panelEditPage.setVisualization('Table');
+  await expect(panelEditPage.refreshPanel()).toBeOK();
+  await expect(panelEditPage.panel.data).toContainText(['10', '20']);
+});

package/templates/common/_package.json

@@ -10,19 +10,21 @@
     "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 }}}",{{#unless usePlaywright}}
+    "e2e:update": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run --update-screenshots",{{/unless}}
     "server": "docker-compose up --build",
     "sign": "npx --yes @grafana/sign-plugin@latest"
   },
   "author": "{{ sentenceCase orgName }}",
   "license": "Apache-2.0",
   "devDependencies": {
-    "@babel/core": "^7.21.4",
+    "@babel/core": "^7.21.4",{{#unless usePlaywright}}
     "@grafana/e2e": "{{ grafanaVersion }}",
-    "@grafana/e2e-selectors": "{{ grafanaVersion }}",
-    "@grafana/eslint-config": "^7.0.0",
-    "@grafana/tsconfig": "^1.2.0-rc1",
+    "@grafana/e2e-selectors": "{{ grafanaVersion }}",{{/unless}}
+    "@grafana/eslint-config": "^7.0.0",{{#if usePlaywright}}
+    "@grafana/plugin-e2e": "^0.27.0",{{/if}}
+    "@grafana/tsconfig": "^1.2.0-rc1",{{#if usePlaywright}}
+    "@playwright/test": "^1.41.2",{{/if}}
     "@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/npmrc

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

package/templates/common/playwright.config

@@ -0,0 +1,53 @@
+import type { PluginOptions } from '@grafana/plugin-e2e';
+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<PluginOptions>({
+  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/],
+    },
+    // 2. Run tests in Google Chrome. Every test will start authenticated as admin user.
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'], storageState: 'playwright/.auth/admin.json' },
+      dependencies: ['auth'],
+    },
+  ],
+
+});

package/templates/datasource/provisioning/datasources/datasources.yml

@@ -8,3 +8,7 @@ datasources:
     orgId: 1
     version: 1
     editable: true
+    jsonData:
+      path: '/resources'
+    secureJsonData: 
+      apiKey: 'api-key'

package/templates/datasource/src/datasource.ts

@@ -1,3 +1,4 @@
+import { getBackendSrv, isFetchError } from '@grafana/runtime';
 import {
   CoreApp,
   DataQueryRequest,
@@ -8,11 +9,16 @@ import {
   FieldType,
 } from '@grafana/data';
 
-import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY } from './types';
+import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY, DataSourceResponse } from './types';
+import { lastValueFrom } from 'rxjs';
+import _ from 'lodash';
 
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
+  baseUrl: string;
+
   constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
     super(instanceSettings);
+    this.baseUrl = instanceSettings.url!;
   }
 
   getDefaultQuery(_: CoreApp): Partial<MyQuery> {
@@ -43,11 +49,46 @@ export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
     return { data };
   }
 
+  async request(url: string, params?: string) {
+    const response = getBackendSrv().fetch<DataSourceResponse>({
+      url: `${this.baseUrl}${url}${params?.length ? `?${params}` : ''}`,
+    });
+    return lastValueFrom(response);
+  }
+
+  /**
+   * Checks whether we can connect to the API.
+   */
   async testDatasource() {
-    // Implement a health check for your data source.
-    return {
-      status: 'success',
-      message: 'Success',
-    };
+    const defaultErrorMessage = 'Cannot connect to API';
+
+    try {
+      const response = await this.request('/health');
+      if (response.status === 200) {
+        return {
+          status: 'success',
+          message: 'Success',
+        };
+      } else {
+        return {
+          status: 'error',
+          message: response.statusText ? response.statusText : defaultErrorMessage,
+        };
+      }
+    } catch (err) {
+      let message = '';
+      if (_.isString(err)) {
+        message = err;
+      } else if (isFetchError(err)) {
+        message = 'Fetch error: ' + (err.statusText ? err.statusText : defaultErrorMessage);
+        if (err.data && err.data.error && err.data.error.code) {
+          message += ': ' + err.data.error.code + '. ' + err.data.error.message;
+        }
+      }
+      return {
+        status: 'error',
+        message,
+      };
+    }
   }
 }

package/templates/datasource/src/types.ts

@@ -10,6 +10,15 @@ export const DEFAULT_QUERY: Partial<MyQuery> = {
   constant: 6.5,
 };
 
+export interface DataPoint {
+  Time: number;
+  Value: number;
+}
+
+export interface DataSourceResponse {
+  datapoints: DataPoint[];
+}
+
 /**
  * These are options configured for each DataSource instance
  */

package/templates/datasource/tests/configEditor.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@grafana/plugin-e2e';
+import { MyDataSourceOptions, MySecureJsonData } from '../src/types';
+
+test('"Save & test" should be successful when configuration is valid', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  selectors,
+  page,
+}) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+  const healthCheckPath = `${selectors.apis.DataSource.proxy(
+    configPage.datasource.uid,
+    configPage.datasource.id.toString()
+  )}/health`;
+  await page.route(healthCheckPath, async (route) => await route.fulfill({ status: 200, body: 'OK' }));
+  await expect(configPage.saveAndTest({ path: healthCheckPath })).toBeOK();
+});
+
+test('"Save & test" should display success alert box when config is valid', async ({
+  createDataSourceConfigPage,
+  readProvisionedDataSource,
+  selectors,
+}) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  const configPage = await createDataSourceConfigPage({ type: ds.type });
+  const healthCheckPath = `${selectors.apis.DataSource.proxy(
+    configPage.datasource.uid,
+    configPage.datasource.id.toString()
+  )}/health`;
+  await expect(configPage.saveAndTest({ path: healthCheckPath })).not.toBeOK();
+  await expect(configPage).toHaveAlert('error');
+});

package/templates/datasource/tests/queryEditor.spec.ts

@@ -0,0 +1,11 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('data query should return a value', async ({ panelEditPage, readProvisionedDataSource }) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.setVisualization('Table');
+  await panelEditPage.getQueryEditorRow('A').getByRole('textbox', { name: 'Query Text' }).fill('test query');
+  await panelEditPage.getQueryEditorRow('A').getByRole('spinbutton').fill('10');
+  await expect(panelEditPage.panel.fieldNames).toContainText(['Time', 'Value']);
+  await expect(panelEditPage.panel.data).toContainText(['10']);
+});

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

@@ -23,7 +23,7 @@ jobs:
 {{#if_eq packageManagerName "pnpm"}}
       # pnpm action uses the packageManager field in package.json to
       # understand which version to install.
-      - uses: pnpm/action-setup@v2
+      - uses: pnpm/action-setup@v3
 {{/if_eq}}
       - name: Setup Node.js environment
         uses: actions/setup-node@v4
@@ -74,16 +74,30 @@ 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
+        id: run-e2e-tests
         if: steps.check-for-e2e.outputs.has-e2e == 'true'
         run: {{ packageManagerName }} run e2e
 
@@ -95,8 +109,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/panel/provisioning/dashboards/dashboard.json

@@ -18,6 +18,7 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
+  "id": 1,
   "links": [],
   "liveNow": false,
   "panels": [
@@ -50,11 +51,41 @@
       ],
       "title": "Panel Title",
       "type": "{{ pluginId }}"
+    },
+    {
+      "datasource": {
+        "type": "grafana-testdata-datasource",
+        "uid": "trlxrdZVk"
+      },
+      "gridPos": {
+        "h": 8,
+        "w": 12,
+        "x": 12,
+        "y": 0
+      },
+      "id": 2,
+      "options": {
+        "seriesCountSize": "sm",
+        "showSeriesCount": false,
+        "text": "Default value of text input option"
+      },
+      "targets": [
+        {
+          "alias": "",
+          "datasource": {
+            "type": "grafana-testdata-datasource",
+            "uid": "db84e60d-b92a-4089-82cb-34842fb1754b"
+          },
+          "refId": "A",
+          "scenarioId": "no_data_points"
+        }
+      ],
+      "title": "Panel Title",
+      "type": "{{ pluginId }}"
     }
   ],
   "refresh": "",
-  "schemaVersion": 38,
-  "style": "dark",
+  "schemaVersion": 39,
   "tags": [],
   "templating": {
     "list": []
@@ -66,6 +97,7 @@
   "timepicker": {},
   "timezone": "",
   "title": "Provisioned {{ pluginName }} dashboard",
-  "version": 0,
+  "uid": "a538aeff-5a8a-42a5-901c-938d896fdd6f",
+  "version": 1,
   "weekStart": ""
 }

package/templates/panel/provisioning/datasources/datasources.yml

@@ -0,0 +1,7 @@
+apiVersion: 1
+
+datasources:
+  - name: TestData DB
+    type: testdata
+    uid: trlxrdZVk
+    isDefault: true

package/templates/panel/src/components/SimplePanel.tsx

@@ -3,6 +3,7 @@ import { PanelProps } from '@grafana/data';
 import { SimpleOptions } from 'types';
 import { css, cx } from '@emotion/css';
 import { useStyles2, useTheme2 } from '@grafana/ui';
+import { PanelDataErrorView } from '@grafana/runtime';
 
 interface Props extends PanelProps<SimpleOptions> {}
 
@@ -26,9 +27,14 @@ const getStyles = () => {
   };
 };
 
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
+export const SimplePanel: React.FC<Props> = ({ options, data, width, height, fieldConfig, id }) => {
   const theme = useTheme2();
   const styles = useStyles2(getStyles);
+
+  if (data.series.length === 0) {
+    return <PanelDataErrorView fieldConfig={fieldConfig} panelId={id} data={data} needsStringField />;
+  }
+
   return (
     <div
       className={cx(
@@ -49,12 +55,12 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) =
       >
         <g>
         {{!-- /* 🚨 Escaping the following line because of Handlebars. (this comment is going to be removed after scaffolding) 🚨 */ --}}
-          <circle style=\{{ fill: theme.colors.primary.main }} r={100} />
+          <circle data-testid="simple-panel-circle" style=\{{ fill: theme.colors.primary.main }} r={100} />
         </g>
       </svg>
 
       <div className={styles.textBox}>
-        {options.showSeriesCount && <div>Number of series: {data.series.length}</div>}
+        {options.showSeriesCount && <div data-testid="simple-panel-series-counter">Number of series: {data.series.length}</div>}
         <div>Text option value: {options.text}</div>
       </div>
     </div>

package/templates/panel/tests/panel.spec.ts

@@ -0,0 +1,39 @@
+import { test, expect } from '@grafana/plugin-e2e';
+
+test('should display "No data" in case panel data is empty', async ({
+  gotoPanelEditPage,
+  readProvisionedDashboard,
+}) => {
+  const dashboard = await readProvisionedDashboard({ fileName: 'dashboard.json' });
+  const panelEditPage = await gotoPanelEditPage({ dashboard, id: '2' });
+  await expect(panelEditPage.panel.locator).toContainText('No data');
+});
+
+test('should display circle when data is passed to the panel', async ({
+  panelEditPage,
+  readProvisionedDataSource,
+  page,
+}) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.setVisualization('{{kebabToPascalKebab pluginName }}');
+  await expect(page.getByTestId('simple-panel-circle')).toBeVisible();
+});
+
+test('should display series counter when "Show series counter" option is enabled', async ({
+  panelEditPage,
+  readProvisionedDataSource,
+  page,
+  selectors,
+}) => {
+  const ds = await readProvisionedDataSource({ fileName: 'datasources.yml' });
+  await panelEditPage.datasource.set(ds.name);
+  await panelEditPage.setVisualization('{{kebabToPascalKebab pluginName }}');
+  await panelEditPage.collapseSection('{{kebabToPascalKebab pluginName }}');
+  await expect(page.getByTestId('simple-panel-circle')).toBeVisible();
+  const showSeriesSwitch = panelEditPage
+    .getByGrafanaSelector(selectors.components.PanelEditor.OptionsPane.fieldLabel('{{kebabToPascalKebab pluginName }} Show series counter'))
+    .getByLabel('Toggle switch');
+  await showSeriesSwitch.click();
+  await expect(page.getByTestId('simple-panel-series-counter')).toBeVisible();
+});

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');
-  },
-});

package/templates/common/cypress.json

@@ -1,3 +0,0 @@
-{
-  "video": false
-}