@grafana/create-plugin 4.5.0-canary.847.ba9d6ed.0 → 4.5.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.5.0 (Fri Apr 05 2024)
+
+#### 🚀 Enhancement
+
+- Create Plugins: Add feature to toggle docker development environment [#857](https://github.com/grafana/plugin-tools/pull/857) ([@oshirohugo](https://github.com/oshirohugo))
+
+#### Authors: 1
+
+- Hugo Kiyodi Oshiro ([@oshirohugo](https://github.com/oshirohugo))
+
+---
+
 # v4.4.6 (Wed Apr 03 2024)
 
 #### 🐛 Bug Fix

package/dist/commands/generate.command.js

@@ -48,7 +48,6 @@ 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,
@@ -61,8 +60,6 @@ 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,7 +34,6 @@ 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 { kebabToPascalKebab, normalizeId } from '../utils.handlebars.js';
+import { 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,10 +27,4 @@ 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', 'jest.config.js', 'tsconfig.json']);
+            const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, ['.prettierrc.js', 'cypress.json', 'tsconfig.json']);
             expect(Array.isArray(templateFiles)).toBe(true);
             expect(templateFiles.length).toBe(3);
         });

package/dist/utils/utils.files.js

@@ -68,7 +68,6 @@ 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,15 +14,6 @@ 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() {
@@ -39,7 +30,6 @@ function registerHandlebarsHelpers() {
         dashCase: kebabCase,
         kabobCase: kebabCase,
         kebabCase: kebabCase,
-        kebabToPascalKebab: kebabToPascalKebab,
         properCase: pascalCase,
         pascalCase: pascalCase,
         if_eq: ifEq,

package/dist/utils/utils.templates.js

@@ -61,10 +61,6 @@ 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,
@@ -82,8 +78,6 @@ 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-canary.847.ba9d6ed.0",
+  "version": "4.5.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "ba9d6ed33eb4101da6f9b23719c088fa63c9d8f8"
+  "gitHead": "79b462dd77503ddb597debb3575a90e43316c865"
 }

package/src/commands/generate.command.ts

@@ -59,10 +59,7 @@ function getTemplateData(answers: CliArgs) {
   const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
   const packageManagerInstallCmd = getPackageManagerInstallCmd(packageManagerName);
   const isAppType = pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
-  // 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 useReactRouterV6 = features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app; // We don't enable this by default yet for new scenes plugins.
   const templateData: TemplateData = {
     ...answers,
     pluginId,
@@ -75,8 +72,6 @@ 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,7 +50,6 @@ 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,6 +21,4 @@ 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 { kebabToPascalKebab, normalizeId } from '../utils.handlebars.js';
+import { normalizeId } from '../utils.handlebars.js';
 
 describe('Handlebars helpers', () => {
   describe('normalize id', () => {
@@ -42,11 +42,4 @@ 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', 'jest.config.js', 'tsconfig.json']);
+      const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, ['.prettierrc.js', 'cypress.json', 'tsconfig.json']);
 
       expect(Array.isArray(templateFiles)).toBe(true);
       expect(templateFiles.length).toBe(3);

package/src/utils/utils.config.ts

@@ -10,7 +10,6 @@ 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,7 +91,6 @@ 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,16 +28,6 @@ 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();
@@ -56,7 +46,6 @@ 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 { directoryExists, filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
+import { 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 { FeatureFlags, getConfig } from './utils.config.js';
+import { getConfig } from './utils.config.js';
 
 const debug = createDebug('templates');
 
@@ -95,10 +95,6 @@ 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,
@@ -117,8 +113,6 @@ 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,7 +50,6 @@ 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}
@@ -65,7 +64,6 @@ 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/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,23 +94,16 @@ 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) {
-	res := &backend.CheckHealthResult{}
-	config, err := models.LoadPluginSettings(*req.PluginContext.DataSourceInstanceSettings)
+	var status = backend.HealthStatusOk
+	var message = "Data source is working"
 
-	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
+	if rand.Int()%2 == 0 {
+		status = backend.HealthStatusError
+		message = "randomized error"
 	}
 
 	return &backend.CheckHealthResult{
-		Status:  backend.HealthStatusOk,
-		Message: "Data source is working",
+		Status:  status,
+		Message: message,
 	}, nil
 }

package/templates/common/.config/Dockerfile

@@ -3,11 +3,15 @@ ARG grafana_image=grafana-enterprise
 
 FROM grafana/${grafana_image}:${grafana_version}
 
+ARG development=true
+
 {{#if hasBackend}}
 ARG GO_VERSION=1.21.6
 ARG GO_ARCH=amd64
 {{/if}}
 
+ENV DEV "${development}"
+
 # Make it as simple as possible to access the grafana instance for development purposes
 # Do NOT enable these settings in a public facing / production grafana instance
 ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
@@ -24,10 +28,10 @@ WORKDIR $GF_PATHS_HOME
 
 USER root
 
-
 # Installing supervisor and inotify-tools
-RUN if grep -i -q alpine /etc/issue; then \
-      apk add supervisor inotify-tools git; \
+RUN if [ "${development}" = "true" ]; then \
+    if grep -i -q alpine /etc/issue; then \
+        apk add supervisor inotify-tools git; \
     elif grep -i -q ubuntu /etc/issue; then \
       DEBIAN_FRONTEND=noninteractive && \
       apt-get update && \
@@ -35,6 +39,7 @@ RUN if grep -i -q alpine /etc/issue; then \
       rm -rf /var/lib/apt/lists/*; \
     else \
       echo 'ERROR: Unsupported base image' && /bin/false; \
+    fi \
     fi
 
 COPY supervisord/supervisord.conf /etc/supervisor.d/supervisord.ini
@@ -43,20 +48,26 @@ COPY supervisord/supervisord.conf /etc/supervisor/conf.d/supervisord.conf
 
 {{#if hasBackend}}
 # Installing Go
-RUN curl -O -L https://golang.org/dl/go${GO_VERSION}.linux-${GO_ARCH}.tar.gz && \
+RUN if [ "${development}" = "true" ]; then \
+    curl -O -L https://golang.org/dl/go${GO_VERSION}.linux-${GO_ARCH}.tar.gz && \
     rm -rf /usr/local/go && \
     tar -C /usr/local -xzf go${GO_VERSION}.linux-${GO_ARCH}.tar.gz && \
     echo "export PATH=$PATH:/usr/local/go/bin:~/go/bin" >> ~/.bashrc && \
-    rm -f go${GO_VERSION}.linux-${GO_ARCH}.tar.gz
+    rm -f go${GO_VERSION}.linux-${GO_ARCH}.tar.gz; \
+    fi
 
 # Installing delve for debugging
-RUN /usr/local/go/bin/go install github.com/go-delve/delve/cmd/dlv@latest
+RUN if [ "${development}" = "true" ]; then \
+    /usr/local/go/bin/go install github.com/go-delve/delve/cmd/dlv@latest; \
+    fi
 
 # Installing mage for plugin (re)building
-RUN git clone https://github.com/magefile/mage; \
+RUN if [ "${development}" = "true" ]; then \
+    git clone https://github.com/magefile/mage; \
     cd mage; \
     export PATH=$PATH:/usr/local/go/bin; \
-    go run bootstrap.go
+    go run bootstrap.go; \
+    fi
 {{/if}}
 
 # Inject livereload script into grafana index.html

package/templates/common/.config/entrypoint.sh

@@ -1,5 +1,12 @@
 #!/bin/sh
 
+if [ "${DEV}" = "false" ]; then
+    echo "Starting test mode"
+    exec /run.sh
+fi
+
+echo "Starting development mode"
+
 if grep -i -q alpine /etc/issue; then
     exec /usr/bin/supervisord -c /etc/supervisord.conf
 elif grep -i -q ubuntu /etc/issue; then
@@ -8,3 +15,4 @@ else
     echo 'ERROR: Unsupported base image'
     exit 1
 fi
+

package/templates/common/_package.json

@@ -10,21 +10,19 @@
     "typecheck": "tsc --noEmit",
     "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "{{ packageManagerName }} run lint{{#if isNPM}} --{{/if}} --fix",
-    "e2e": "{{{ e2eTestCmd }}}",{{#unless usePlaywright}}
-    "e2e:update": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run --update-screenshots",{{/unless}}
+    "e2e": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run",
+    "e2e:update": "{{ packageManagerName }} exec cypress install && {{ packageManagerName }} exec grafana-e2e run --update-screenshots",
     "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",{{#unless usePlaywright}}
+    "@babel/core": "^7.21.4",
     "@grafana/e2e": "{{ grafanaVersion }}",
-    "@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}}
+    "@grafana/e2e-selectors": "{{ grafanaVersion }}",
+    "@grafana/eslint-config": "^7.0.0",
+    "@grafana/tsconfig": "^1.2.0-rc1",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",

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

@@ -0,0 +1,10 @@
+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

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

package/templates/common/gitignore

@@ -25,15 +25,11 @@ dist/
 artifacts/
 work/
 ci/
-
-# e2e test directories
-/test-results/
-/playwright-report/
-/blob-report/
-/playwright/.cache/
-/playwright/.auth/
+e2e-results/
+**/cypress/videos
+**/cypress/report.json
 
 # 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*"{{/unless}}
+public-hoist-pattern[]="*cypress*"

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

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

package/templates/datasource/src/datasource.ts

@@ -1,4 +1,3 @@
-import { getBackendSrv, isFetchError } from '@grafana/runtime';
 import {
   CoreApp,
   DataQueryRequest,
@@ -9,16 +8,11 @@ import {
   FieldType,
 } from '@grafana/data';
 
-import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY, DataSourceResponse } from './types';
-import { lastValueFrom } from 'rxjs';
-import _ from 'lodash';
+import { MyQuery, MyDataSourceOptions, DEFAULT_QUERY } from './types';
 
 export class DataSource extends DataSourceApi<MyQuery, MyDataSourceOptions> {
-  baseUrl: string;
-
   constructor(instanceSettings: DataSourceInstanceSettings<MyDataSourceOptions>) {
     super(instanceSettings);
-    this.baseUrl = instanceSettings.url!;
   }
 
   getDefaultQuery(_: CoreApp): Partial<MyQuery> {
@@ -49,46 +43,11 @@ 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() {
-    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,
-      };
-    }
+    // Implement a health check for your data source.
+    return {
+      status: 'success',
+      message: 'Success',
+    };
   }
 }

package/templates/datasource/src/types.ts

@@ -10,15 +10,6 @@ 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/github/ci/.github/workflows/ci.yml

@@ -74,30 +74,16 @@ jobs:
       - name: Check for E2E
         id: check-for-e2e
         run: |
-          if [ -f "playwright.config.ts" ]
+          if [ -d "cypress" ]
           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
 
@@ -109,8 +95,8 @@ jobs:
         uses: actions/upload-artifact@v4
         if: steps.check-for-e2e.outputs.has-e2e == 'true' && steps.run-e2e-tests.outcome != 'success'
         with:
-          name: playwright-report
-          path: playwright-report/
+          name: cypress-videos
+          path: cypress/videos
           retention-days: 5
 
       - name: Sign plugin

package/templates/panel/provisioning/dashboards/dashboard.json

@@ -18,7 +18,6 @@
   "editable": true,
   "fiscalYearStartMonth": 0,
   "graphTooltip": 0,
-  "id": 1,
   "links": [],
   "liveNow": false,
   "panels": [
@@ -51,41 +50,11 @@
       ],
       "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": 39,
+  "schemaVersion": 38,
+  "style": "dark",
   "tags": [],
   "templating": {
     "list": []
@@ -97,7 +66,6 @@
   "timepicker": {},
   "timezone": "",
   "title": "Provisioned {{ pluginName }} dashboard",
-  "uid": "a538aeff-5a8a-42a5-901c-938d896fdd6f",
-  "version": 1,
+  "version": 0,
   "weekStart": ""
 }

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

@@ -3,7 +3,6 @@ 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> {}
 
@@ -27,14 +26,9 @@ const getStyles = () => {
   };
 };
 
-export const SimplePanel: React.FC<Props> = ({ options, data, width, height, fieldConfig, id }) => {
+export const SimplePanel: React.FC<Props> = ({ options, data, width, height }) => {
   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(
@@ -55,12 +49,12 @@ export const SimplePanel: React.FC<Props> = ({ options, data, width, height, fie
       >
         <g>
         {{!-- /* 🚨 Escaping the following line because of Handlebars. (this comment is going to be removed after scaffolding) 🚨 */ --}}
-          <circle data-testid="simple-panel-circle" style=\{{ fill: theme.colors.primary.main }} r={100} />
+          <circle style=\{{ fill: theme.colors.primary.main }} r={100} />
         </g>
       </svg>
 
       <div className={styles.textBox}>
-        {options.showSeriesCount && <div data-testid="simple-panel-series-counter">Number of series: {data.series.length}</div>}
+        {options.showSeriesCount && <div>Number of series: {data.series.length}</div>}
         <div>Text option value: {options.text}</div>
       </div>
     </div>

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

@@ -1,19 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,35 +0,0 @@
-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/tests/configEditor.spec.ts

@@ -1,26 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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/playwright.config

@@ -1,53 +0,0 @@
-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/tests/configEditor.spec.ts

@@ -1,33 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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/panel/provisioning/datasources/datasources.yml

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

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

@@ -1,39 +0,0 @@
-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();
-});