@grafana/create-plugin 0.3.1 → 0.4.0

package/dist/commands/migrate.command.js

@@ -86,10 +86,10 @@ var migrate = function () { return __awaiter(void 0, void 0, void 0, function ()
                 _a.label = 5;
             case 5:
                 if (!(0, utils_npm_1.hasNpmDependenciesToUpdate)()) return [3, 7];
-                return [4, (0, utils_console_1.confirmPrompt)(constants_1.TEXT.updateNpmDependenciesPrompt + (0, utils_npm_1.getPackageJsonUpdatesAsText)())];
+                return [4, (0, utils_console_1.confirmPrompt)(constants_1.TEXT.updateNpmDependenciesPrompt + (0, utils_npm_1.getPackageJsonUpdatesAsText)({ ignoreGrafanaDependencies: true }))];
             case 6:
                 if (_a.sent()) {
-                    (0, utils_npm_1.updatePackageJson)();
+                    (0, utils_npm_1.updatePackageJson)({ ignoreGrafanaDependencies: true });
                     (0, utils_console_1.printSuccessMessage)(constants_1.TEXT.updateNpmDependenciesSuccess);
                 }
                 else {

package/dist/constants.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 exports.__esModule = true;
-exports.TEXT = exports.UDPATE_CONFIG = exports.MIGRATION_CONFIG = exports.EXTRA_TEMPLATE_VARIABLES = exports.PLUGIN_TYPES = exports.TEMPLATE_PATHS = exports.FIXTURES_PATH = exports.PARTIALS_DIR = exports.TEMPLATES_DIR = exports.DIST_DIR = exports.EXPORT_PATH_PREFIX = exports.DEV_EXPORT_DIR = exports.IS_DEV = void 0;
+exports.TEXT = exports.UDPATE_CONFIG = exports.MIGRATION_CONFIG = exports.GRAFANA_FE_PACKAGES = exports.EXTRA_TEMPLATE_VARIABLES = exports.PLUGIN_TYPES = exports.TEMPLATE_PATHS = exports.FIXTURES_PATH = exports.PARTIALS_DIR = exports.TEMPLATES_DIR = exports.DIST_DIR = exports.EXPORT_PATH_PREFIX = exports.DEV_EXPORT_DIR = exports.IS_DEV = void 0;
 var path_1 = __importDefault(require("path"));
 exports.IS_DEV = process.env.CREATE_PLUGIN_DEV !== undefined;
 exports.DEV_EXPORT_DIR = path_1["default"].join(__dirname, '..', 'generated');
@@ -31,6 +31,14 @@ var PLUGIN_TYPES;
 exports.EXTRA_TEMPLATE_VARIABLES = {
     grafanaVersion: '9.1.2'
 };
+exports.GRAFANA_FE_PACKAGES = [
+    '@grafana/data',
+    '@grafana/e2e-selectors',
+    '@grafana/e2e',
+    '@grafana/runtime',
+    '@grafana/schema',
+    '@grafana/ui',
+];
 exports.MIGRATION_CONFIG = {
     filesToOverride: [
         '.config/',

package/dist/utils/utils.npm.js

@@ -37,12 +37,16 @@ function writePackageJson(json) {
 exports.writePackageJson = writePackageJson;
 function getNpmDependencyUpdatesAsText(dependencyUpdates) {
     return Object.entries(dependencyUpdates)
+        .filter(function (_a) {
+        var packageName = _a[0], _b = _a[1], prev = _b.prev, next = _b.next;
+        return prev !== next;
+    })
         .map(function (_a) {
         var packageName = _a[0], _b = _a[1], prev = _b.prev, next = _b.next;
         if (!prev) {
             return "`".concat(packageName, "` - `").concat(next, "` (new)");
         }
-        return "`".concat(packageName, "` - `").concat(prev, "` -> `").concat(next, "`");
+        return "`".concat(packageName, "` - `").concat(prev, "` -> `").concat(next, "` (updated)");
     })
         .join('\n  ');
 }
@@ -94,12 +98,42 @@ function getPackageJsonUpdates(options) {
     var newDevDependencies = newPackageJson.devDependencies || {};
     var dependencyUpdates = getUpdatableNpmDependencies(dependencies, newDependencies, options);
     var devDependencyUpdates = getUpdatableNpmDependencies(devDependencies, newDevDependencies, options);
+    if (options.ignoreGrafanaDependencies) {
+        var prevGrafanaDependencies = Object.entries(__assign(__assign({}, dependencies), devDependencies)).reduce(function (acc, _a) {
+            var key = _a[0], value = _a[1];
+            if (constants_1.GRAFANA_FE_PACKAGES.includes(key)) {
+                acc[key] = value;
+            }
+            return acc;
+        }, {});
+        return {
+            dependencyUpdates: ignoreGrafanaDependencies(dependencyUpdates, prevGrafanaDependencies),
+            devDependencyUpdates: ignoreGrafanaDependencies(devDependencyUpdates, prevGrafanaDependencies)
+        };
+    }
     return {
         dependencyUpdates: dependencyUpdates,
         devDependencyUpdates: devDependencyUpdates
     };
 }
 exports.getPackageJsonUpdates = getPackageJsonUpdates;
+function ignoreGrafanaDependencies(dependencyUpdates, prevGrafanaDependencies) {
+    var whatever = Object.keys(prevGrafanaDependencies);
+    var result = Object.entries(dependencyUpdates).reduce(function (acc, _a) {
+        var packageName = _a[0], value = _a[1];
+        if (whatever.includes(packageName)) {
+            acc[packageName] = {
+                prev: prevGrafanaDependencies[packageName],
+                next: prevGrafanaDependencies[packageName]
+            };
+        }
+        else {
+            acc[packageName] = value;
+        }
+        return acc;
+    }, {});
+    return result;
+}
 function getUpdatableNpmDependencies(prevDeps, nextDeps, options) {
     if (options === void 0) { options = {}; }
     var updateSummary = {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "main": "index.js",
   "repository": {
     "directory": "packages/create-plugin",

package/src/commands/migrate.command.ts

@@ -58,8 +58,12 @@ export const migrate = async () => {
     // (skipped automatically if there is nothing to update)
     // ------------------------------------------------
     if (hasNpmDependenciesToUpdate()) {
-      if (await confirmPrompt(TEXT.updateNpmDependenciesPrompt + getPackageJsonUpdatesAsText())) {
-        updatePackageJson();
+      if (
+        await confirmPrompt(
+          TEXT.updateNpmDependenciesPrompt + getPackageJsonUpdatesAsText({ ignoreGrafanaDependencies: true })
+        )
+      ) {
+        updatePackageJson({ ignoreGrafanaDependencies: true });
         printSuccessMessage(TEXT.updateNpmDependenciesSuccess);
       } else {
         printMessage(TEXT.updateNpmDependenciesAborted);

package/src/constants.ts

@@ -40,6 +40,15 @@ export const EXTRA_TEMPLATE_VARIABLES = {
   grafanaVersion: '9.1.2',
 };
 
+export const GRAFANA_FE_PACKAGES = [
+  '@grafana/data',
+  '@grafana/e2e-selectors',
+  '@grafana/e2e',
+  '@grafana/runtime',
+  '@grafana/schema',
+  '@grafana/ui',
+];
+
 export const MIGRATION_CONFIG = {
   // Files that should be overriden during a migration.
   // (paths are relative to the scaffolded projects root)

package/src/utils/utils.npm.ts

@@ -3,12 +3,13 @@ import fs from 'fs';
 import semver from 'semver';
 import { readJsonFile } from './utils.files';
 import { renderTemplateFromFile, getTemplateData } from './utils.templates';
-import { TEMPLATE_PATHS } from '../constants';
+import { GRAFANA_FE_PACKAGES, TEMPLATE_PATHS } from '../constants';
 
 type UpdateSummary = Record<string, { prev: string | null; next: string | null }>;
 
 type UpdateOptions = {
   onlyOutdated?: Boolean;
+  ignoreGrafanaDependencies?: boolean;
 };
 
 type PackageJson = {
@@ -35,6 +36,7 @@ export function writePackageJson(json: PackageJson) {
 
 export function getNpmDependencyUpdatesAsText(dependencyUpdates: UpdateSummary) {
   return Object.entries(dependencyUpdates)
+    .filter(([packageName, { prev, next }]) => prev !== next)
     .map(([packageName, { prev, next }]) => {
       // New package
       if (!prev) {
@@ -42,7 +44,7 @@ export function getNpmDependencyUpdatesAsText(dependencyUpdates: UpdateSummary)
       }
 
       // Updated package
-      return `\`${packageName}\` - \`${prev}\` -> \`${next}\``;
+      return `\`${packageName}\` - \`${prev}\` -> \`${next}\` (updated)`;
     })
     .join('\n  ');
 }
@@ -100,12 +102,44 @@ export function getPackageJsonUpdates(options: UpdateOptions = {}) {
   const dependencyUpdates = getUpdatableNpmDependencies(dependencies, newDependencies, options);
   const devDependencyUpdates = getUpdatableNpmDependencies(devDependencies, newDevDependencies, options);
 
+  if (options.ignoreGrafanaDependencies) {
+    const prevGrafanaDependencies = Object.entries({ ...dependencies, ...devDependencies }).reduce<
+      Record<string, string>
+    >((acc, [key, value]) => {
+      if (GRAFANA_FE_PACKAGES.includes(key)) {
+        acc[key] = value;
+      }
+      return acc;
+    }, {});
+    return {
+      dependencyUpdates: ignoreGrafanaDependencies(dependencyUpdates, prevGrafanaDependencies),
+      devDependencyUpdates: ignoreGrafanaDependencies(devDependencyUpdates, prevGrafanaDependencies),
+    };
+  }
+
   return {
     dependencyUpdates,
     devDependencyUpdates,
   };
 }
 
+function ignoreGrafanaDependencies(dependencyUpdates: UpdateSummary, prevGrafanaDependencies: Record<string, string>) {
+  const whatever = Object.keys(prevGrafanaDependencies);
+  const result = Object.entries(dependencyUpdates).reduce<UpdateSummary>((acc, [packageName, value]) => {
+    if (whatever.includes(packageName)) {
+      acc[packageName] = {
+        prev: prevGrafanaDependencies[packageName],
+        next: prevGrafanaDependencies[packageName],
+      };
+    } else {
+      acc[packageName] = value;
+    }
+    return acc;
+  }, {});
+
+  return result;
+}
+
 export function getUpdatableNpmDependencies(
   prevDeps: Record<string, string>,
   nextDeps: Record<string, string>,

package/templates/app/src/module.ts

@@ -4,7 +4,7 @@ import { AppConfig } from './components/AppConfig';
 
 export const plugin = new AppPlugin<{}>().setRootPage(App).addConfigPage({
   title: 'Configuration',
-  icon: 'fa fa-cog',
+  icon: 'cog',
   // @ts-ignore - Would expect a Class component, however works absolutely fine with a functional one
   // Implementation: https://github.com/grafana/grafana/blob/fd44c01675e54973370969dfb9e78f173aff7910/public/app/features/plugins/PluginPage.tsx#L157
   body: AppConfig,

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

@@ -4,9 +4,12 @@
  * In order to extend the configuration follow the steps in .config/README.md
  */
 
+const path = require('path');
+
 module.exports = {
   moduleNameMapper: {
     "\\.(css|scss|sass)$": "identity-obj-proxy",
+    "react-inlinesvg": path.resolve(__dirname, "mocks", "react-inlinesvg.tsx"),
   },
   modulePaths: ['<rootDir>/src'],
   setupFilesAfterEnv: ['<rootDir>/jest-setup.js'],
@@ -32,7 +35,5 @@ module.exports = {
       },
     ],
   },
-  transformIgnorePatterns: [
-    'node_modules/(?!(ol)/)', // <- exclude the open layers library
-  ],
+  transformIgnorePatterns: [],
 };

package/templates/common/.config/mocks/react-inlinesvg.tsx

@@ -0,0 +1,25 @@
+// Due to the grafana/ui Icon component making fetch requests to
+// `/public/img/icon/<icon_name>.svg` we need to mock react-inlinesvg to prevent
+// the failed fetch requests from displaying errors in console.
+
+import React from 'react';
+
+type Callback = (...args: any[]) => void;
+
+export interface StorageItem {
+  content: string;
+  queue: Callback[];
+  status: string;
+}
+
+export const cacheStore: { [key: string]: StorageItem } = Object.create(null);
+
+const SVG_FILE_NAME_REGEX = /(.+)\/(.+)\.svg$/;
+
+const InlineSVG = ({ src }: { src: string }) => {
+  // testId will be the file name without extension (e.g. `public/img/icons/angle-double-down.svg` -> `angle-double-down`)
+  const testId = src.replace(SVG_FILE_NAME_REGEX, '$2');
+  return <svg xmlns="http://www.w3.org/2000/svg" data-testid={testId} viewBox="0 0 24 24" />;
+};
+
+export default InlineSVG;

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

@@ -5,26 +5,28 @@ on:
   push:
     branches:
       - master
+      - main
   pull_request:
     branches:
       - master
+      - main
 jobs:
   build:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.2
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Cache yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: cache-yarn-cache
         with:
           path: $\{{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -34,7 +36,7 @@ jobs:
 
       - name: Cache node_modules
         id: cache-node-modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-$\{{ hashFiles('**/yarn.lock') }}
@@ -61,12 +63,12 @@ jobs:
         run: |
           if [ -f "Magefile.go" ]
           then
-            echo "::set-output name=has-backend::true"
+            echo "has-backend=true" >> $GITHUB_OUTPUT
           fi
 
       - name: Setup Go environment
         if: steps.check-for-backend.outputs.has-backend == 'true'
-        uses: actions/setup-go@v2
+        uses: actions/setup-go@v3
         with:
           go-version: '1.19'
 

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

@@ -11,24 +11,24 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v3
 
       - name: Setup Node.js environment
-        uses: actions/setup-node@v2.1.2
+        uses: actions/setup-node@v3
         with:
           node-version: '16.x'
 
       - name: Setup Go environment
-        uses: actions/setup-go@v2
+        uses: actions/setup-go@v3
         with:
-          go-version: '1.15'
+          go-version: '1.19'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
-        run: echo "::set-output name=dir::$(yarn cache dir)"
+        run: echo "dir=$(yarn cache dir)" >> $GITHUB_OUTPUT
 
       - name: Cache yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         id: cache-yarn-cache
         with:
           path: $\{{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -38,7 +38,7 @@ jobs:
 
       - name: Cache node_modules
         id: cache-node-modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
         with:
           path: node_modules
           key: $\{{ runner.os }}-$\{{ matrix.node-version }}-nodemodules-$\{{ hashFiles('**/yarn.lock') }}
@@ -59,7 +59,7 @@ jobs:
         run: |
           if [ -f "Magefile.go" ]
           then
-            echo "::set-output name=has-backend::true"
+            echo "has-backend=true" >> $GITHUB_OUTPUT
           fi
 
       - name: Test backend
@@ -92,19 +92,19 @@ jobs:
           export GRAFANA_PLUGIN_ARTIFACT=${GRAFANA_PLUGIN_ID}-${GRAFANA_PLUGIN_VERSION}.zip
           export GRAFANA_PLUGIN_ARTIFACT_CHECKSUM=${GRAFANA_PLUGIN_ARTIFACT}.md5
 
-          echo "::set-output name=plugin-id::${GRAFANA_PLUGIN_ID}"
-          echo "::set-output name=plugin-version::${GRAFANA_PLUGIN_VERSION}"
-          echo "::set-output name=plugin-type::${GRAFANA_PLUGIN_TYPE}"
-          echo "::set-output name=archive::${GRAFANA_PLUGIN_ARTIFACT}"
-          echo "::set-output name=archive-checksum::${GRAFANA_PLUGIN_ARTIFACT_CHECKSUM}"
+          echo "plugin-id=${GRAFANA_PLUGIN_ID}" >> $GITHUB_OUTPUT
+          echo "plugin-version=${GRAFANA_PLUGIN_VERSION}" >> $GITHUB_OUTPUT
+          echo "plugin-type=${GRAFANA_PLUGIN_TYPE}" >> $GITHUB_OUTPUT
+          echo "archive=${GRAFANA_PLUGIN_ARTIFACT}" >> $GITHUB_OUTPUT
+          echo "archive-checksum=${GRAFANA_PLUGIN_ARTIFACT_CHECKSUM}" >> $GITHUB_OUTPUT
 
-          echo ::set-output name=github-tag::${GITHUB_REF#refs/*/}
+          echo "github-tag=${GITHUB_REF#refs/*/}" >> $GITHUB_OUTPUT
 
       - name: Read changelog
         id: changelog
         run: |
           awk '/^## / {s++} s == 1 {print}' CHANGELOG.md > release_notes.md
-          echo "::set-output name=path::release_notes.md"
+          echo "path=release_notes.md" >> $GITHUB_OUTPUT
 
       - name: Check package version
         run: if [ "v$\{{ steps.metadata.outputs.plugin-version }}" != "$\{{ steps.metadata.outputs.github-tag }}" ]; then printf "\033[0;31mPlugin version doesn't match tag name\033[0m\n"; exit 1; fi
@@ -115,7 +115,7 @@ jobs:
           mv dist $\{{ steps.metadata.outputs.plugin-id }}
           zip $\{{ steps.metadata.outputs.archive }} $\{{ steps.metadata.outputs.plugin-id }} -r
           md5sum $\{{ steps.metadata.outputs.archive }} > $\{{ steps.metadata.outputs.archive-checksum }}
-          echo "::set-output name=checksum::$(cat ./$\{{ steps.metadata.outputs.archive-checksum }} | cut -d' ' -f1)"
+          echo "checksum=$(cat ./$\{{ steps.metadata.outputs.archive-checksum }} | cut -d' ' -f1)" >> $GITHUB_OUTPUT
 
       - name: Lint plugin
         run: |