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

package/CHANGELOG.md

@@ -1,3 +1,87 @@
+# 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
+
+- Plugin E2E: Fix APIs that are broken in older versions of Grafana [#739](https://github.com/grafana/plugin-tools/pull/739) ([@sunker](https://github.com/sunker))
+
+#### Authors: 1
+
+- Erik Sundell ([@sunker](https://github.com/sunker))
+
+---
+
+# v4.4.5 (Tue Apr 02 2024)
+
+#### 🐛 Bug Fix
+
+- Create Plugins: Remove unused env variable [#850](https://github.com/grafana/plugin-tools/pull/850) ([@oshirohugo](https://github.com/oshirohugo))
+
+#### Authors: 1
+
+- Hugo Kiyodi Oshiro ([@oshirohugo](https://github.com/oshirohugo))
+
+---
+
+# 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,7 +14,9 @@ export function printGenerateSuccessMessage(answers) {
             ]
             : []),
         '- `docker-compose up` to start a grafana development server. ' +
-            (answers.hasBackend ? 'Restart this command after each time you run mage to run your new backend code.' : ''),
+            (answers.hasBackend
+                ? 'The plugin backend will be reloaded on every code change and a debugger can be attached on port `2345`.'
+                : ''),
         '- 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,8 +60,6 @@ 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/tests/utils.templates.test.js

@@ -17,11 +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',
-                'playwright.config.ts',
-                '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.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.19' };
+const DEFAULT_PACKAGE_MANAGER = { packageManagerName: 'yarn', packageManagerVersion: '1.22.22' };
 export function getPackageManagerFromUserAgent() {
     const agent = process.env.npm_config_user_agent;
     if (!agent) {

package/dist/utils/utils.templates.js

@@ -61,13 +61,6 @@ 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,
@@ -85,8 +78,6 @@ 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.5.0-canary.847.e7bd94b.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": "e7bd94bd0ab20a916e27dd10694f086c763c9a2c"
+  "gitHead": "79b462dd77503ddb597debb3575a90e43316c865"
 }

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

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

package/src/commands/generate.command.ts

@@ -59,9 +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 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,
@@ -74,8 +72,6 @@ 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,6 +21,4 @@ export type TemplateData = {
   bundleGrafanaUI: boolean;
   useReactRouterV6: boolean;
   reactRouterVersion: string;
-  e2eTestCmd: string;
-  e2eTestUpdateCmd: string;
 };

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

@@ -28,11 +28,7 @@ describe('Utils / Templates', () => {
     });
 
     test('should be possible to filter for multiple different files', () => {
-      const templateFiles = getTemplateFiles(PLUGIN_TYPES.app, [
-        '.prettierrc.js',
-        'playwright.config.ts',
-        '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.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.19' };
+const DEFAULT_PACKAGE_MANAGER = { packageManagerName: 'yarn', packageManagerVersion: '1.22.22' };
 
 export type PackageManager = {
   packageManagerName: string;

package/src/utils/utils.templates.ts

@@ -95,13 +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 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,
@@ -120,8 +113,6 @@ 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/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/.config/supervisord/supervisord.conf

@@ -5,7 +5,11 @@ 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": "{{ e2eTestCmd }}",
-    "e2e:update": "{{ e2eTestUpdateCmd }}",
+    "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"
   },
@@ -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/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/docker-compose.yaml

@@ -32,4 +32,3 @@ services:
       GF_LOG_LEVEL: debug
       GF_DATAPROXY_LOGGING: 1
       GF_PLUGINS_ALLOW_LOADING_UNSIGNED_PLUGINS: {{ pluginId }}
-      GF_PLUGINS_DELVE_ENABLED: true

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/github/ci/.github/workflows/ci.yml

@@ -74,28 +74,15 @@ 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
         if: steps.check-for-e2e.outputs.has-e2e == 'true'
         run: {{ packageManagerName }} run e2e
@@ -108,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/common/playwright.config.ts

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

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