@grafana/create-plugin 0.5.4 → 0.6.0-canary.160.e62f4fc.0

package/CHANGELOG.md

@@ -1,53 +1,3 @@
-# v0.5.4 (Fri Nov 18 2022)
-
-#### 🐛 Bug Fix
-
-- Create-plugin: Fix failing jest config [#151](https://github.com/grafana/plugin-tools/pull/151) ([@jackw](https://github.com/jackw))
-
-#### Authors: 1
-
-- Jack Westbrook ([@jackw](https://github.com/jackw))
-
----
-
-# v0.5.3 (Thu Nov 17 2022)
-
-#### 🐛 Bug Fix
-
-- Create-Plugin: Transform known ES modules in jest config [#145](https://github.com/grafana/plugin-tools/pull/145) ([@jackw](https://github.com/jackw))
-
-#### Authors: 1
-
-- Jack Westbrook ([@jackw](https://github.com/jackw))
-
----
-
-# v0.5.2 (Thu Nov 17 2022)
-
-#### 🐛 Bug Fix
-
-- Create-Plugin: Bump dependencies to support node 18 [#144](https://github.com/grafana/plugin-tools/pull/144) ([@jackw](https://github.com/jackw))
-- Create-Plugin: Backend template: Switch from Info to Debug level [#146](https://github.com/grafana/plugin-tools/pull/146) ([@xnyo](https://github.com/xnyo))
-
-#### Authors: 2
-
-- Giuseppe Guerra ([@xnyo](https://github.com/xnyo))
-- Jack Westbrook ([@jackw](https://github.com/jackw))
-
----
-
-# v0.5.1 (Mon Nov 14 2022)
-
-#### 🐛 Bug Fix
-
-- Fix: include uppercase characters when normalising plugin id [#142](https://github.com/grafana/plugin-tools/pull/142) ([@jackw](https://github.com/jackw))
-
-#### Authors: 1
-
-- Jack Westbrook ([@jackw](https://github.com/jackw))
-
----
-
 # v0.5.0 (Mon Nov 07 2022)
 
 :tada: This release contains work from a new contributor! :tada:

package/dist/commands/generate.plopfile.js

@@ -31,6 +31,7 @@ var constants_1 = require("../constants");
 function default_1(plop) {
     plop.setHelper('if_eq', utils_handlebars_1.ifEq);
     plop.setHelper('normalize_id', utils_handlebars_1.normalizeId);
+    plop.setActionType('printSuccessMessage', printSuccessMessage);
     plop.setGenerator('create-plugin', {
         description: 'used to scaffold a grafana plugin',
         prompts: [
@@ -111,7 +112,11 @@ function default_1(plop) {
                 ? getActionsForTemplateFolder({ folderPath: constants_1.TEMPLATE_PATHS.isCompatibleWorkflow, exportPath: exportPath })
                 : [];
             var readmeActions = getActionsForReadme({ exportPath: exportPath });
-            return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], commonActions, true), pluginTypeSpecificActions, true), backendActions, true), ciWorkflowActions, true), readmeActions, true), isCompatibleWorkflowActions, true);
+            return __spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray(__spreadArray([], commonActions, true), pluginTypeSpecificActions, true), backendActions, true), ciWorkflowActions, true), readmeActions, true), isCompatibleWorkflowActions, true), [
+                {
+                    type: 'printSuccessMessage'
+                },
+            ], false);
         }
     });
 }
@@ -121,6 +126,7 @@ function getActionsForReadme(_a) {
     return [
         replacePatternWithTemplateInReadme('-- INSERT FRONTEND GETTING STARTED --', 'frontend-getting-started.md', exportPath),
         replacePatternWithTemplateInReadme('-- INSERT BACKEND GETTING STARTED --', 'backend-getting-started.md', exportPath),
+        replacePatternWithTemplateInReadme('-- INSERT DISTRIBUTING YOUR PLUGIN --', 'distributing-your-plugin.md', exportPath),
     ];
 }
 function replacePatternWithTemplateInReadme(pattern, partialsFile, exportPath) {
@@ -170,3 +176,14 @@ function getExportPath(pluginName, orgName, pluginType) {
         return path_1["default"].join(process.cwd(), (0, utils_handlebars_1.normalizeId)(pluginName, orgName, pluginType));
     }
 }
+function printSuccessMessage(answers) {
+    var directory = (0, utils_handlebars_1.normalizeId)(answers.pluginName, answers.orgName, answers.pluginType);
+    var commands = __spreadArray(__spreadArray([
+        '  * `yarn install` to install frontend dependencies.',
+        '  * `docker-compose up` to start a grafana development server.',
+        '  * `yarn dev` to build (and watch) the plugin frontend code.'
+    ], (answers.hasBackend ? ['  * `mage -v build:linux` to build the plugin backend code.'] : []), true), [
+        '  * Open http://localhost:3000/dashboard/new in your browser to create a dashboard to begin developing your plugin.',
+    ], false);
+    return "\n  Congratulations on scaffolding a Grafana ".concat(answers.pluginName, " plugin! \uD83D\uDE80\n\n  ## What's next?\n  Navigate into ./").concat(directory, " and run the following commands to get started:\n").concat(commands.map(function (command) { return command; }).join('\n'), "\n\n  View the README.md for futher information.\n  Learn more about Grafana Plugins at https://grafana.com/docs/grafana/latest/plugins/developing/development/\n\n");
+}

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

@@ -22,11 +22,5 @@ describe('Handlebars helpers', function () {
             var actual = (0, utils_handlebars_1.normalizeId)(pluginName, orgName, type);
             expect(actual).toEqual("myorg-myplugin-".concat(type));
         });
-        test.each([constants_1.PLUGIN_TYPES.app, constants_1.PLUGIN_TYPES.datasource, constants_1.PLUGIN_TYPES.panel])('should handle uppercase characters', function (type) {
-            var pluginName = "MyPlugin";
-            var orgName = 'MyOrg';
-            var actual = (0, utils_handlebars_1.normalizeId)(pluginName, orgName, type);
-            expect(actual).toEqual("myorg-myplugin-".concat(type));
-        });
     });
 });

package/dist/utils/utils.handlebars.js

@@ -39,7 +39,7 @@ var ifEq = function (a, b, options) {
 exports.ifEq = ifEq;
 var normalizeId = function (pluginName, orgName, type) {
     var re = new RegExp("-?".concat(type, "$"), 'i');
-    var nameRegex = new RegExp('[^0-9a-zA-Z]', 'g');
+    var nameRegex = new RegExp('[^0-9a-z]', 'g');
     var newPluginName = pluginName.replace(re, '').replace(nameRegex, '');
     var newOrgName = orgName.replace(nameRegex, '');
     return changeCase.lowerCase(newOrgName) + '-' + changeCase.lowerCase(newPluginName) + "-".concat(type);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "0.5.4",
+  "version": "0.6.0-canary.160.e62f4fc.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",
@@ -59,5 +59,5 @@
   "engines": {
     "node": ">=16"
   },
-  "gitHead": "c1aa7f5feb47e958cc2b683f654ab28803b1eeb5"
+  "gitHead": "e62f4fc1fe115ff39cb9cd7f224515c8660cd797"
 }

package/src/commands/generate.plopfile.ts

@@ -27,6 +27,8 @@ export default function (plop: NodePlopAPI) {
   plop.setHelper('if_eq', ifEq);
   plop.setHelper('normalize_id', normalizeId);
 
+  plop.setActionType('printSuccessMessage', printSuccessMessage);
+
   plop.setGenerator('create-plugin', {
     description: 'used to scaffold a grafana plugin',
     prompts: [
@@ -131,6 +133,9 @@ export default function (plop: NodePlopAPI) {
         ...ciWorkflowActions,
         ...readmeActions,
         ...isCompatibleWorkflowActions,
+        {
+          type: 'printSuccessMessage',
+        },
       ];
     },
   });
@@ -148,6 +153,11 @@ function getActionsForReadme({ exportPath }: { exportPath: string }): ModifyActi
       'backend-getting-started.md',
       exportPath
     ),
+    replacePatternWithTemplateInReadme(
+      '-- INSERT DISTRIBUTING YOUR PLUGIN --',
+      'distributing-your-plugin.md',
+      exportPath
+    ),
   ];
 }
 
@@ -221,3 +231,27 @@ function getExportPath(pluginName: string, orgName: string, pluginType: PLUGIN_T
     return path.join(process.cwd(), normalizeId(pluginName, orgName, pluginType));
   }
 }
+
+function printSuccessMessage(answers: CliArgs) {
+  const directory = normalizeId(answers.pluginName, answers.orgName, answers.pluginType);
+
+  const commands = [
+    '  * `yarn install` to install frontend dependencies.',
+    '  * `docker-compose up` to start a grafana development server.',
+    '  * `yarn dev` to build (and watch) the plugin frontend code.',
+    ...(answers.hasBackend ? ['  * `mage -v build:linux` to build the plugin backend code.'] : []),
+    '  * Open http://localhost:3000/dashboard/new in your browser to create a dashboard to begin developing your plugin.',
+  ];
+
+  return `
+  Congratulations on scaffolding a Grafana ${answers.pluginName} plugin! 🚀
+
+  ## What's next?
+  Navigate into ./${directory} and run the following commands to get started:
+${commands.map((command) => command).join('\n')}
+
+  View the README.md for futher information.
+  Learn more about Grafana Plugins at https://grafana.com/docs/grafana/latest/plugins/developing/development/
+
+`;
+}

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

@@ -31,15 +31,5 @@ describe('Handlebars helpers', () => {
         expect(actual).toEqual(`myorg-myplugin-${type}`);
       }
     );
-
-    test.each([PLUGIN_TYPES.app, PLUGIN_TYPES.datasource, PLUGIN_TYPES.panel])(
-      'should handle uppercase characters',
-      (type: PLUGIN_TYPES) => {
-        const pluginName = `MyPlugin`;
-        const orgName = 'MyOrg';
-        const actual = normalizeId(pluginName, orgName, type);
-        expect(actual).toEqual(`myorg-myplugin-${type}`);
-      }
-    );
   });
 });

package/src/utils/utils.handlebars.ts

@@ -12,7 +12,7 @@ export const ifEq = (a: any, b: any, options: HelperOptions) => {
 
 export const normalizeId = (pluginName: string, orgName: string, type: PLUGIN_TYPES) => {
   const re = new RegExp(`-?${type}$`, 'i');
-  const nameRegex = new RegExp('[^0-9a-zA-Z]', 'g');
+  const nameRegex = new RegExp('[^0-9a-z]', 'g');
 
   const newPluginName = pluginName.replace(re, '').replace(nameRegex, '');
   const newOrgName = orgName.replace(nameRegex, '');

package/templates/_partials/distributing-your-plugin.md

@@ -0,0 +1,38 @@
+# Distributing your plugin
+
+When distributing a Grafana plugin either within the community or privately the plugin must be signed so the Grafana application can verify its authenticity. This can be done with the `@grafana/sign-plugin` package.
+
+_Note: It's not necessary to sign a plugin during development. The docker development environment that is scaffolded with `@grafana/create-plugin` caters for running the plugin without a signature._
+
+## Initial steps
+
+Before signing a plugin please read the Grafana [plugin publishing and signing criteria](https://grafana.com/docs/grafana/latest/developers/plugins/publishing-and-signing-criteria/) documentation carefully.
+
+`@grafana/create-plugin` has added the necessary commands and workflows to make signing and distributing a plugin via the grafana plugins catalog as straightforward as possible.
+
+Before signing a plugin for the first time please consult the Grafana [plugin signature levels](https://grafana.com/docs/grafana/latest/developers/plugins/sign-a-plugin/#plugin-signature-levels) documentation to understand the differences between the types of signature level.
+
+1. Create a [Grafana Cloud account](https://grafana.com/signup).
+2. Make sure that the first part of the plugin ID matches the slug of your Grafana Cloud account.
+   - _You can find the plugin ID in the plugin.json file inside your plugin directory. For example, if your account slug is `acmecorp`, you need to prefix the plugin ID with `acmecorp-`._
+3. Create a Grafana Cloud API key with the `PluginPublisher` role.
+4. Keep a record of this API key as it will be required for signing a plugin
+
+## Signing a plugin
+
+### Using Github actions release workflow
+
+If the plugin is using the github actions supplied with `@grafana/create-plugin` signing a plugin is included out of the box. The [release workflow](./.github/workflows/release.yml) can prepare everything to make submitting your plugin to Grafana as easy as possible. Before being able to sign the plugin however a secret needs adding to the Github repository.
+
+1. Please navigate to "settings > secrets > actions" within your repo to create secrets.
+2. Click "New repository secret"
+3. Name the secret "GRAFANA_API_KEY"
+4. Paste your Grafana Cloud API key in the Secret field
+5. Click "Add secret"
+
+#### Push a version tag
+
+To trigger the workflow we need to push a version tag to github. This can be achieved with the following steps:
+
+1. Run `npm version <major|minor|patch>`
+2. Run `git push origin main --follow-tags`

package/templates/app/README.md

@@ -11,6 +11,8 @@ App plugins can let you create a custom out-of-the-box monitoring experience by
 -- INSERT FRONTEND GETTING STARTED --
 {{#if hasBackend}}-- INSERT BACKEND GETTING STARTED --{{/if}}
 
+-- INSERT DISTRIBUTING YOUR PLUGIN --
+
 ## Learn more
 
 Below you can find source code for existing app plugins and other related documentation.

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

@@ -44,9 +44,7 @@ func (d *Datasource) Dispose() {
 // The QueryDataResponse contains a map of RefID to the response for each query, and each response
 // contains Frames ([]*Frame).
 func (d *Datasource) QueryData(ctx context.Context, req *backend.QueryDataRequest) (*backend.QueryDataResponse, error) {
-	// when logging at a non-Debug level, make sure you don't include sensitive information in the message
-	// (like the *backend.QueryDataRequest)
-	log.DefaultLogger.Debug("QueryData called", "numQueries", len(req.Queries))
+	log.DefaultLogger.Info("QueryData called", "request", req)
 
 	// create response struct
 	response := backend.NewQueryDataResponse()
@@ -96,9 +94,7 @@ 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) {
-	// when logging at a non-Debug level, make sure you don't include sensitive information in the message
-	// (like the *backend.QueryDataRequest)
-	log.DefaultLogger.Debug("CheckHealth called")
+	log.DefaultLogger.Info("CheckHealth called", "request", req)
 
 	var status = backend.HealthStatusOk
 	var message = "Data source is working"

package/templates/common/.config/README.md

@@ -16,12 +16,11 @@ to issues around working with the project.
 Edit the `.eslintrc` file in the project root in order to extend the ESLint configuration.
 
 **Example:**
-
 ```json
 {
   "extends": "./.config/.eslintrc",
   "rules": {
-    "react/prop-types": "off"
+      "react/prop-types": "off"
   }
 }
 ```
@@ -33,11 +32,10 @@ Edit the `.eslintrc` file in the project root in order to extend the ESLint conf
 Edit the `.prettierrc.js` file in the project root in order to extend the Prettier configuration.
 
 **Example:**
-
 ```javascript
 module.exports = {
   // Prettier configuration provided by Grafana scaffolding
-  ...require('./.config/.prettierrc.js'),
+  ...require("./.config/.prettierrc.js"),
 
   semi: false,
 };
@@ -52,23 +50,7 @@ There are two configuration in the project root that belong to Jest: `jest-setup
 **`jest-setup.js`:** A file that is run before each test file in the suite is executed. We are using it to
 set up the Jest DOM for the testing library and to apply some polyfills. ([link to Jest docs](https://jestjs.io/docs/configuration#setupfilesafterenv-array))
 
-**`jest.config.js`:** The main Jest configuration file that extends the Grafana recommended setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
-
-#### ESM errors with Jest
-
-A common issue found with the current jest config involves importing an npm package which only offers an ESM build. These packages cause jest to error with `SyntaxError: Cannot use import statement outside a module`. To work around this we provide a list of known packages to pass to the `[transformIgnorePatterns](https://jestjs.io/docs/configuration#transformignorepatterns-arraystring)` jest configuration property. If need be this can be extended in the following way:
-
-```javascript
-process.env.TZ = 'UTC';
-const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
-
-module.exports = {
-  // Jest configuration provided by Grafana
-  ...require('./.config/jest.config'),
-  // Inform jest to only transform specific node_module packages.
-  transformIgnorePatterns: [nodeModulesToTransform([...grafanaESModules, 'packageName'])],
-};
-```
+**`jest.config.js`:** The main Jest configuration file that is extending our basic Grafana-tailored setup. ([link to Jest docs](https://jestjs.io/docs/configuration))
 
 ---
 
@@ -77,7 +59,6 @@ module.exports = {
 Edit the `tsconfig.json` file in the project root in order to extend the TypeScript configuration.
 
 **Example:**
-
 ```json
 {
   "extends": "./.config/tsconfig.json",
@@ -99,7 +80,6 @@ Create a new config file that is going to extend the basic one provided by Grafa
 It can live in the project root, e.g. `webpack.config.ts`.
 
 #### 2. Merge the basic config provided by Grafana and your custom setup
-
 We are going to use [`webpack-merge`](https://github.com/survivejs/webpack-merge) for this.
 
 ```typescript
@@ -120,6 +100,7 @@ const config = async (env): Promise<Configuration> => {
 };
 
 export default config;
+
 ```
 
 #### 3. Update the `package.json` to use the new Webpack config
@@ -127,14 +108,12 @@ export default config;
 We need to update the `scripts` in the `package.json` to use the extended Webpack configuration.
 
 **Update for `build`:**
-
 ```diff
 -"build": "webpack -c ./.config/webpack/webpack.config.ts --env production",
 +"build": "webpack -c ./webpack.config.ts --env production",
 ```
 
 **Update for `dev`:**
-
 ```diff
 -"dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
 +"dev": "webpack -w -c ./webpack.config.ts --env development",

package/templates/common/.config/jest.config.js

@@ -5,12 +5,11 @@
  */
 
 const path = require('path');
-const { grafanaESModules, nodeModulesToTransform } = require('./jest/utils');
 
 module.exports = {
   moduleNameMapper: {
-    '\\.(css|scss|sass)$': 'identity-obj-proxy',
-    'react-inlinesvg': path.resolve(__dirname, 'jest', 'mocks', 'react-inlinesvg.tsx'),
+    "\\.(css|scss|sass)$": "identity-obj-proxy",
+    "react-inlinesvg": path.resolve(__dirname, "mocks", "react-inlinesvg.tsx"),
   },
   modulePaths: ['<rootDir>/src'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
@@ -36,7 +35,5 @@ module.exports = {
       },
     ],
   },
-  // Jest will throw `Cannot use import statement outside module` if it tries to load an
-  // ES module without it being transformed first. ./config/README.md#esm-errors-with-jest
-  transformIgnorePatterns: [nodeModulesToTransform(grafanaESModules)],
+  transformIgnorePatterns: [],
 };

package/templates/common/package.json

@@ -12,7 +12,8 @@
     "lint:fix": "yarn lint --fix",
     "e2e": "yarn cypress install && yarn grafana-e2e run",
     "e2e:update": "yarn cypress install && yarn grafana-e2e run --update-screenshots",
-    "server": "docker-compose up --build"
+    "server": "docker-compose up --build",
+    "sign": "npx --yes @grafana/sign-plugin"
   },
   "author": "{{ sentenceCase orgName }}",
   "license": "Apache-2.0",
@@ -20,40 +21,40 @@
     "@babel/core": "^7.16.7",
     "@grafana/e2e": "{{ grafanaVersion }}",
     "@grafana/e2e-selectors": "{{ grafanaVersion }}",
-    "@grafana/eslint-config": "^5.1.0",
+    "@grafana/eslint-config": "^2.5.0",
     "@grafana/tsconfig": "^1.2.0-rc1",
     "@swc/core": "^1.2.144",
-    "@swc/helpers": "^0.4.12",
+    "@swc/helpers": "^0.3.6",
     "@swc/jest": "^0.2.20",
     "@testing-library/jest-dom": "^5.16.2",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^12.1.3",
     "@types/glob": "^8.0.0",
-    "@types/jest": "^29.2.2",
-    "@types/lodash": "^4.14.188",{{#if_eq pluginType "app"}}
+    "@types/jest": "^27.4.1",
+    "@types/lodash": "latest",{{#if_eq pluginType "app"}}
     "@types/react-router-dom": "^5.3.3",{{/if_eq}}
-    "@types/node": "^18.11.9",
-    "@typescript-eslint/eslint-plugin": "^5.42.1",
-    "@typescript-eslint/parser": "^5.42.1",
-    "copy-webpack-plugin": "^11.0.0",
-    "css-loader": "^6.7.1",
-    "eslint": "8.26.0",
+    "@types/node": "^17.0.19",
+    "@typescript-eslint/eslint-plugin": "^4.33.0",
+    "@typescript-eslint/parser": "^4.33.0",
+    "copy-webpack-plugin": "^10.0.0",
+    "css-loader": "6.7.1",
+    "eslint": "^7.32.0",
     "eslint-config-prettier": "^8.3.0",
-    "eslint-plugin-jsdoc": "^39.6.2",
+    "eslint-plugin-jsdoc": "^36.1.0",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
     "eslint-plugin-react-hooks": "^4.2.0",
     "eslint-webpack-plugin": "^3.1.1",
-    "fork-ts-checker-webpack-plugin": "^7.2.0",
     "glob": "^8.0.3",
     "identity-obj-proxy": "3.0.0",
     "jest": "27.5.0",
+    "fork-ts-checker-webpack-plugin": "^7.2.0",
     "prettier": "^2.5.0",
     "replace-in-file-webpack-plugin": "^1.0.6",
-    "sass": "1.56.1",
-    "sass-loader": "13.2.0",
+    "sass": "1.55.0",
+    "sass-loader": "13.1.0",
     "style-loader": "3.3.1",
-    "swc-loader": "^0.2.3",
-    "tsconfig-paths": "^4.1.0",
+    "swc-loader": "^0.1.15",
+    "tsconfig-paths": "^3.12.0",
     "ts-node": "^10.5.0",
     "typescript": "^4.4.0",
     "webpack": "^5.69.1",

package/templates/datasource/README.md

@@ -11,6 +11,8 @@ Grafana supports a wide range of data sources, including Prometheus, MySQL, and
 -- INSERT FRONTEND GETTING STARTED --
 {{#if hasBackend}}-- INSERT BACKEND GETTING STARTED --{{/if}}
 
+-- INSERT DISTRIBUTING YOUR PLUGIN --
+
 ## Learn more
 
 Below you can find source code for existing app plugins and other related documentation.

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

@@ -10,6 +10,7 @@ on:
     branches:
       - master
       - main
+
 jobs:
   build:
     runs-on: ubuntu-latest
@@ -19,34 +20,18 @@ jobs:
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
-
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - name: Cache yarn cache
-        uses: actions/cache@v3
-        id: cache-yarn-cache
-        with:
-          path: $\{{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: $\{{ runner.os }}-yarn-$\{{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            $\{{ runner.os }}-yarn-
-
-      - name: Cache node_modules
-        id: cache-node-modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-$\{{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-
-
+          node-version: '16'
+          cache: 'yarn'
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable --prefer-offline
 
-      - name: Build and test frontend
+      - name: Check types
+        run: yarn typecheck
+      - name: Lint
+        run: yarn lint
+      - name: Unit tests
+        run: yarn test:ci
+      - name: Build frontend
         run: yarn build
 
       - name: Start grafana docker
@@ -55,7 +40,7 @@ jobs:
       - name: Run e2e tests
         run: yarn e2e
 
-      - name: stop grafana docker
+      - name: Stop grafana docker
         run: docker-compose down
 
       - name: Check for backend

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

@@ -4,52 +4,29 @@ name: Release
 on:
   push:
     tags:
-      - 'v*.*.*' # Run workflow on version tags, e.g. v1.0.0.
+      - 'v*' # Run workflow on version tags, e.g. v1.0.0.
 
 jobs:
   release:
     runs-on: ubuntu-latest
-
+    env:
+      GRAFANA_API_KEY: $\{{ secrets.GRAFANA_API_KEY }} # Requires a Grafana API key from Grafana.com.
     steps:
       - uses: actions/checkout@v3
 
       - name: Setup Node.js environment
         uses: actions/setup-node@v3
         with:
-          node-version: '16.x'
+          node-version: '16'
+          cache: 'yarn'
 
       - name: Setup Go environment
         uses: actions/setup-go@v3
         with:
           go-version: '1.19'
 
-      - name: Get yarn cache directory path
-        id: yarn-cache-dir-path
-        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
-
-      - name: Cache yarn cache
-        uses: actions/cache@v3
-        id: cache-yarn-cache
-        with:
-          path: $\{{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: $\{{ runner.os }}-yarn-$\{{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            $\{{ runner.os }}-yarn-
-
-      - name: Cache node_modules
-        id: cache-node-modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-$\{{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-
-
       - name: Install dependencies
-        run: yarn install --frozen-lockfile;
-        if: |
-          steps.cache-yarn-cache.outputs.cache-hit != 'true' ||
-          steps.cache-node-modules.outputs.cache-hit != 'true'
+        run: yarn install --immutable --prefer-offline
 
       - name: Build and test frontend
         run: yarn build
@@ -76,10 +53,15 @@ jobs:
           version: latest
           args: buildAll
 
+      - name: Warn missing Grafana API key
+        run: |
+          echo Please generate a Grafana API key: https://grafana.com/docs/grafana/latest/developers/plugins/sign-a-plugin/#generate-an-api-key
+          echo Once done please go to \"settings \> secrets \> actions\" to add it as GRAFANA_API_KEY
+        if: $\{{ env.GRAFANA_API_KEY == '' }}
+
       - name: Sign plugin
         run: yarn sign
-        env:
-          GRAFANA_API_KEY: $\{{ secrets.GRAFANA_API_KEY }} # Requires a Grafana API key from Grafana.com.
+        if: $\{{ env.GRAFANA_API_KEY != '' }}
 
       - name: Get plugin metadata
         id: metadata
@@ -117,49 +99,35 @@ jobs:
           md5sum $\{{ steps.metadata.outputs.archive }} > $\{{ steps.metadata.outputs.archive-checksum }}
           echo "checksum=$(cat ./$\{{ steps.metadata.outputs.archive-checksum }} | cut -d' ' -f1)" >> $GITHUB_OUTPUT
 
-      - name: Lint plugin
+      - name: Validate plugin
         run: |
           git clone https://github.com/grafana/plugin-validator
           pushd ./plugin-validator/pkg/cmd/plugincheck2
           go install
           popd
-          plugincheck2 -config ./plugin-validator/config/publishing.yaml $\{{ steps.metadata.outputs.archive }}
+          plugincheck2 -config ./plugin-validator/config/default.yaml $\{{ steps.metadata.outputs.archive }}
 
-      - name: Create release
-        id: create_release
-        uses: actions/create-release@v1
-        env:
-          GITHUB_TOKEN: $\{{ secrets.GITHUB_TOKEN }}
+      - name: Create Github release
+        uses: softprops/action-gh-release@v1
         with:
-          tag_name: $\{{ github.ref }}
-          release_name: Release $\{{ github.ref }}
-          body_path: $\{{ steps.changelog.outputs.path }}
           draft: true
-
-      - name: Add plugin to release
-        id: upload-plugin-asset
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: $\{{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: $\{{ steps.create_release.outputs.upload_url }}
-          asset_path: ./$\{{ steps.metadata.outputs.archive }}
-          asset_name: $\{{ steps.metadata.outputs.archive }}
-          asset_content_type: application/zip
-
-      - name: Add checksum to release
-        id: upload-checksum-asset
-        uses: actions/upload-release-asset@v1
-        env:
-          GITHUB_TOKEN: $\{{ secrets.GITHUB_TOKEN }}
-        with:
-          upload_url: $\{{ steps.create_release.outputs.upload_url }}
-          asset_path: ./$\{{ steps.metadata.outputs.archive-checksum }}
-          asset_name: $\{{ steps.metadata.outputs.archive-checksum }}
-          asset_content_type: text/plain
-
-      - name: Publish to Grafana.com
-        run: |
-          echo A draft release has been created for your plugin. Please review and publish it. Then submit your plugin to grafana.com/plugins by opening a PR to https://github.com/grafana/grafana-plugin-repository with the following entry:
-          echo
-          echo '{ "id": "$\{{ steps.metadata.outputs.plugin-id }}", "type": "$\{{ steps.metadata.outputs.plugin-type }}", "url": "https://github.com/$\{{ github.repository }}", "versions": [ { "version": "$\{{ steps.metadata.outputs.plugin-version }}", "commit": "$\{{ github.sha }}", "url": "https://github.com/$\{{ github.repository }}", "download": { "any": { "url": "https://github.com/$\{{ github.repository }}/releases/download/v$\{{ steps.metadata.outputs.plugin-version }}/$\{{ steps.metadata.outputs.archive }}", "md5": "$\{{ steps.package-plugin.outputs.checksum }}" } } } ] }' | jq .
+          generate_release_notes: true
+          files: |
+            ./$\{{ steps.metadata.outputs.archive }}
+            ./$\{{ steps.metadata.outputs.archive-checksum }}
+          body: |
+            **This Github draft release has been created for your plugin.**
+
+            _Note: if this is the first release for your plugin please consult the [distributing-your-plugin section](https://github.com/$\{{github.repository}}/blob/main/README.md#distributing-your-plugin) of the README_
+
+            If you would like to submit this release to Grafana please consider the following steps:
+
+            - Check the Validate plugin step in the [release workflow](https://github.com/$\{{github.repository}}/commit/$\{{github.sha}}/checks/$\{{github.run_id}}) for any warnings that need attention
+            - Navigate to https://grafana.com/auth/sign-in/ to sign into your account
+            - Once logged in click **My Plugins** in the admin navigation
+            - Click the **Submit Plugin** button
+            - Fill in the Plugin Submission form:
+              - Paste this [.zip asset link](https://github.com/$\{{ github.repository }}/releases/download/v$\{{ steps.metadata.outputs.plugin-version }}/$\{{ steps.metadata.outputs.archive }}) in the Plugin URL field
+              - Paste this [.zip.md5 link](https://github.com/$\{{ github.repository }}/releases/download/v$\{{ steps.metadata.outputs.plugin-version }}/$\{{ steps.metadata.outputs.archive-checksum }}) in the MD5 field
+
+            Once done please remove these instructions and publish this release.

package/templates/github/is-compatible/.github/workflows/is-compatible.yml

@@ -1,5 +1,5 @@
 name: Latest Grafana API compatibility check
-on: [push, pull_request]
+on: [pull_request]
 
 jobs:
   compatibilitycheck:
@@ -9,8 +9,9 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version: '16'
+          cache: 'yarn'
       - name: Install dependencies
-        run: yarn install
+        run: yarn install --immutable --prefer-offline
       - name: Build plugin
         run: yarn build
       - name: Compatibility check

package/templates/panel/README.md

@@ -13,6 +13,8 @@ Use panel plugins when you want to do things like visualize data returned by dat
 -- INSERT FRONTEND GETTING STARTED --
 {{#if hasBackend}}-- INSERT BACKEND GETTING STARTED --{{/if}}
 
+-- INSERT DISTRIBUTING YOUR PLUGIN --
+
 ## Learn more
 
 Below you can find source code for existing app plugins and other related documentation.

package/templates/common/.config/jest/utils.js

@@ -1,19 +0,0 @@
-/*
- * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
- *
- * In order to extend the configuration follow the steps in .config/README.md
- */
-
-/*
- * This utility function is useful in combination with jest `transformIgnorePatterns` config
- * to transform specific packages (e.g.ES modules) in a projects node_modules folder.
- */
-const nodeModulesToTransform = (moduleNames) => `node_modules\/(?!(${moduleNames.join('|')})\/)`;
-
-// Array of known nested grafana package dependencies that only bundle an ESM version
-const grafanaESModules = ['ol', 'react-colorful'];
-
-module.exports = {
-  nodeModulesToTransform,
-  grafanaESModules
-}