@grafana/create-plugin 4.15.0-canary.984.dbba404.0 → 4.16.0

package/CHANGELOG.md

@@ -1,3 +1,39 @@
+# v4.16.0 (Mon Jul 08 2024)
+
+#### 🚀 Enhancement
+
+- Create Plugin: Allow setting feature flags via cli args [#984](https://github.com/grafana/plugin-tools/pull/984) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
+# v4.15.0 (Thu Jul 04 2024)
+
+#### 🚀 Enhancement
+
+- Create Plugin: Dynamic webpack publicPath [#966](https://github.com/grafana/plugin-tools/pull/966) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
+# v4.14.1 (Thu Jul 04 2024)
+
+#### 🐛 Bug Fix
+
+- Create Plugin: Fix backend dev env for arm64 hosts [#990](https://github.com/grafana/plugin-tools/pull/990) ([@jackw](https://github.com/jackw))
+
+#### Authors: 1
+
+- Jack Westbrook ([@jackw](https://github.com/jackw))
+
+---
+
 # v4.14.0 (Mon Jul 01 2024)
 
 #### 🚀 Enhancement

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

@@ -11,7 +11,7 @@ export function printGenerateSuccessMessage(answers) {
         `- \`${packageManagerName} run dev\` to build (and watch) the plugin frontend code.`,
         ...(answers.hasBackend
             ? [
-                '- `mage -v build:linux` to build the plugin backend code. Rerun this command every time you edit your backend files.',
+                '- `mage -v build:backend` to build the plugin backend code. Rerun this command every time you edit your backend files.',
             ]
             : []),
         '- `docker-compose up` to start a grafana development server.',

package/dist/constants.js

@@ -60,7 +60,7 @@ export const MIGRATION_CONFIG = {
     devNpmDependenciesToRemove: ['@grafana/toolkit', '@grafana/runtime', '@grafana/data', '@grafana/ui'],
 };
 export const UDPATE_CONFIG = {
-    filesToOverride: ['.config/'],
+    filesToOverride: ['.config/', '.cprc.json'],
 };
 export const TEXT = {
     overrideFilesPrompt: '**The following files will be overriden, would you like to continue?**',

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

@@ -32,19 +32,19 @@ describe('getConfig', () => {
         });
         it('should override default feature flags via cli args', async () => {
             mocks.argv = {
-                useReactRouterV6: false,
-                bundleGrafanaUI: true,
+                'feature-flags': 'bundleGrafanaUI',
             };
             const config = getConfig(tmpDir);
             expect(config).toEqual({
                 version: getVersion(),
-                features: { ...DEFAULT_FEATURE_FLAGS, ...mocks.argv },
+                features: { ...DEFAULT_FEATURE_FLAGS, bundleGrafanaUI: true },
             });
         });
     });
     describe('Command: Update', () => {
         beforeEach(() => {
             mocks.commandName = 'update';
+            mocks.argv = {};
         });
         it('should give back the correct config when there are no config files at all', async () => {
             const config = getConfig();

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

@@ -0,0 +1,52 @@
+import { partitionArr } from '../utils.helpers.js';
+describe('partitionArr', () => {
+    it('should partition an array of numbers based on a predicate', () => {
+        const arr = [1, 2, 3, 4, 5, 6];
+        const isEven = (num) => num % 2 === 0;
+        const result = partitionArr(arr, isEven);
+        expect(result).toEqual([
+            [2, 4, 6],
+            [1, 3, 5],
+        ]);
+    });
+    it('should partition an array of strings based on a predicate', () => {
+        const arr = ['apple', 'banana', 'cherry', 'date'];
+        const startsWithA = (str) => str[0] === 'a';
+        const result = partitionArr(arr, startsWithA);
+        expect(result).toEqual([['apple'], ['banana', 'cherry', 'date']]);
+    });
+    it('should return two empty arrays if the input array is empty', () => {
+        const arr = [];
+        const isEven = (num) => num % 2 === 0;
+        const result = partitionArr(arr, isEven);
+        expect(result).toEqual([[], []]);
+    });
+    it('should place all items in the first partition if all match the predicate', () => {
+        const arr = [2, 4, 6, 8];
+        const isEven = (num) => num % 2 === 0;
+        const result = partitionArr(arr, isEven);
+        expect(result).toEqual([[2, 4, 6, 8], []]);
+    });
+    it('should place all items in the second partition if none match the predicate', () => {
+        const arr = [1, 3, 5, 7];
+        const isEven = (num) => num % 2 === 0;
+        const result = partitionArr(arr, isEven);
+        expect(result).toEqual([[], [1, 3, 5, 7]]);
+    });
+    it('should work with a complex object array and predicate', () => {
+        const arr = [
+            { name: 'Alice', age: 25 },
+            { name: 'Bob', age: 30 },
+            { name: 'Charlie', age: 35 },
+        ];
+        const isUnder30 = (person) => person.age < 30;
+        const result = partitionArr(arr, isUnder30);
+        expect(result).toEqual([
+            [{ name: 'Alice', age: 25 }],
+            [
+                { name: 'Bob', age: 30 },
+                { name: 'Charlie', age: 35 },
+            ],
+        ]);
+    });
+});

package/dist/utils/utils.config.js

@@ -3,6 +3,9 @@ import path from 'node:path';
 import { getVersion } from './utils.version.js';
 import { argv, commandName } from './utils.cli.js';
 import { DEFAULT_FEATURE_FLAGS } from '../constants.js';
+import { printBox } from './utils.console.js';
+import { partitionArr } from './utils.helpers.js';
+let hasShownConfigWarnings = false;
 export function getConfig(workDir = process.cwd()) {
     const rootConfig = getRootConfig(workDir);
     const userConfig = getUserConfig(workDir);
@@ -58,16 +61,24 @@ function readRCFileSync(path) {
     }
 }
 function createFeatureFlags(flags) {
-    if (commandName === 'generate') {
-        const flags = Object.entries(DEFAULT_FEATURE_FLAGS).reduce((acc, [flag, value]) => {
-            if (argv.hasOwnProperty(flag)) {
-                return { ...acc, [flag]: argv[flag] };
-            }
-            else {
-                return { ...acc, [flag]: value };
-            }
-        }, {});
-        return flags;
+    const featureFlags = commandName === 'generate' ? DEFAULT_FEATURE_FLAGS : flags ?? {};
+    const cliArgFlags = parseFeatureFlagsFromCliArgs();
+    return { ...featureFlags, ...cliArgFlags };
+}
+function parseFeatureFlagsFromCliArgs() {
+    const flagsfromCliArgs = argv['feature-flags'] ? argv['feature-flags'].split(',') : [];
+    const availableFeatureFlags = Object.keys(DEFAULT_FEATURE_FLAGS);
+    const [knownFlags, unknownFlags] = partitionArr(flagsfromCliArgs, (item) => availableFeatureFlags.includes(item));
+    if (unknownFlags.length > 0 && !hasShownConfigWarnings) {
+        printBox({
+            title: 'Warning! Unknown feature flags detected.',
+            subtitle: ``,
+            content: `The following feature-flags are unknown: ${unknownFlags.join(', ')}.\n\nAvailable feature-flags are: ${availableFeatureFlags.join(', ')}`,
+            color: 'yellow',
+        });
+        hasShownConfigWarnings = true;
     }
-    return flags ?? {};
+    return knownFlags.reduce((acc, flag) => {
+        return { ...acc, [flag]: true };
+    }, {});
 }

package/dist/utils/utils.helpers.js

@@ -0,0 +1,3 @@
+export function partitionArr(arr, pred) {
+    return arr.reduce((acc, i) => (acc[pred(i) ? 0 : 1].push(i), acc), [[], []]);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "4.15.0-canary.984.dbba404.0",
+  "version": "4.16.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "dbba404bbb705c8daf675fa82e19a3e197728bd6"
+  "gitHead": "099f28dc3dc6d823071a07f30487cd573bd6c009"
 }

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

@@ -13,7 +13,7 @@ export function printGenerateSuccessMessage(answers: TemplateData) {
     `- \`${packageManagerName} run dev\` to build (and watch) the plugin frontend code.`,
     ...(answers.hasBackend
       ? [
-          '- `mage -v build:linux` to build the plugin backend code. Rerun this command every time you edit your backend files.',
+          '- `mage -v build:backend` to build the plugin backend code. Rerun this command every time you edit your backend files.',
         ]
       : []),
     '- `docker-compose up` to start a grafana development server.',

package/src/constants.ts

@@ -85,7 +85,7 @@ export const MIGRATION_CONFIG = {
 
 export const UDPATE_CONFIG = {
   // Files that should be overriden between configuration version updates.
-  filesToOverride: ['.config/'],
+  filesToOverride: ['.config/', '.cprc.json'],
 };
 
 // prettier-ignore

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

@@ -40,14 +40,13 @@ describe('getConfig', () => {
 
     it('should override default feature flags via cli args', async () => {
       mocks.argv = {
-        useReactRouterV6: false,
-        bundleGrafanaUI: true,
+        'feature-flags': 'bundleGrafanaUI',
       };
       const config = getConfig(tmpDir);
 
       expect(config).toEqual({
         version: getVersion(),
-        features: { ...DEFAULT_FEATURE_FLAGS, ...mocks.argv },
+        features: { ...DEFAULT_FEATURE_FLAGS, bundleGrafanaUI: true },
       });
     });
   });
@@ -55,6 +54,7 @@ describe('getConfig', () => {
   describe('Command: Update', () => {
     beforeEach(() => {
       mocks.commandName = 'update';
+      mocks.argv = {};
     });
 
     it('should give back the correct config when there are no config files at all', async () => {

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

@@ -0,0 +1,58 @@
+import { partitionArr } from '../utils.helpers.js';
+
+describe('partitionArr', () => {
+  it('should partition an array of numbers based on a predicate', () => {
+    const arr = [1, 2, 3, 4, 5, 6];
+    const isEven = (num: number) => num % 2 === 0;
+    const result = partitionArr(arr, isEven);
+    expect(result).toEqual([
+      [2, 4, 6],
+      [1, 3, 5],
+    ]);
+  });
+
+  it('should partition an array of strings based on a predicate', () => {
+    const arr = ['apple', 'banana', 'cherry', 'date'];
+    const startsWithA = (str: string) => str[0] === 'a';
+    const result = partitionArr(arr, startsWithA);
+    expect(result).toEqual([['apple'], ['banana', 'cherry', 'date']]);
+  });
+
+  it('should return two empty arrays if the input array is empty', () => {
+    const arr: number[] = [];
+    const isEven = (num: number) => num % 2 === 0;
+    const result = partitionArr(arr, isEven);
+    expect(result).toEqual([[], []]);
+  });
+
+  it('should place all items in the first partition if all match the predicate', () => {
+    const arr = [2, 4, 6, 8];
+    const isEven = (num: number) => num % 2 === 0;
+    const result = partitionArr(arr, isEven);
+    expect(result).toEqual([[2, 4, 6, 8], []]);
+  });
+
+  it('should place all items in the second partition if none match the predicate', () => {
+    const arr = [1, 3, 5, 7];
+    const isEven = (num: number) => num % 2 === 0;
+    const result = partitionArr(arr, isEven);
+    expect(result).toEqual([[], [1, 3, 5, 7]]);
+  });
+
+  it('should work with a complex object array and predicate', () => {
+    const arr = [
+      { name: 'Alice', age: 25 },
+      { name: 'Bob', age: 30 },
+      { name: 'Charlie', age: 35 },
+    ];
+    const isUnder30 = (person: { name: string; age: number }) => person.age < 30;
+    const result = partitionArr(arr, isUnder30);
+    expect(result).toEqual([
+      [{ name: 'Alice', age: 25 }],
+      [
+        { name: 'Bob', age: 30 },
+        { name: 'Charlie', age: 35 },
+      ],
+    ]);
+  });
+});

package/src/utils/utils.config.ts

@@ -3,6 +3,8 @@ import path from 'node:path';
 import { getVersion } from './utils.version.js';
 import { argv, commandName } from './utils.cli.js';
 import { DEFAULT_FEATURE_FLAGS } from '../constants.js';
+import { printBox } from './utils.console.js';
+import { partitionArr } from './utils.helpers.js';
 
 export type FeatureFlags = {
   bundleGrafanaUI?: boolean;
@@ -21,6 +23,9 @@ export type UserConfig = {
   features: FeatureFlags;
 };
 
+// TODO: Create a config manager of sorts so we don't call getConfig multiple times rendering multiple warnings.
+let hasShownConfigWarnings = false;
+
 export function getConfig(workDir = process.cwd()): CreatePluginConfig {
   const rootConfig = getRootConfig(workDir);
   const userConfig = getUserConfig(workDir);
@@ -83,19 +88,32 @@ function readRCFileSync(path: string): CreatePluginConfig | undefined {
   }
 }
 
+// This function creates feature flags based on the defaults for generate command else flags read from config.
+// In all cases it will override the flags with the featureFlag cli arg values.
 function createFeatureFlags(flags?: FeatureFlags): FeatureFlags {
-  // For new scaffolds override any defaults with args passed in the CLI.
-  if (commandName === 'generate') {
-    const flags = Object.entries(DEFAULT_FEATURE_FLAGS).reduce((acc, [flag, value]) => {
-      if (argv.hasOwnProperty(flag)) {
-        return { ...acc, [flag]: argv[flag] };
-      } else {
-        return { ...acc, [flag]: value };
-      }
-    }, {} as FeatureFlags);
-
-    return flags;
+  const featureFlags = commandName === 'generate' ? DEFAULT_FEATURE_FLAGS : flags ?? {};
+  const cliArgFlags = parseFeatureFlagsFromCliArgs();
+  return { ...featureFlags, ...cliArgFlags };
+}
+
+function parseFeatureFlagsFromCliArgs() {
+  const flagsfromCliArgs: string[] = argv['feature-flags'] ? argv['feature-flags'].split(',') : [];
+  const availableFeatureFlags = Object.keys(DEFAULT_FEATURE_FLAGS);
+  const [knownFlags, unknownFlags] = partitionArr(flagsfromCliArgs, (item) => availableFeatureFlags.includes(item));
+
+  if (unknownFlags.length > 0 && !hasShownConfigWarnings) {
+    printBox({
+      title: 'Warning! Unknown feature flags detected.',
+      subtitle: ``,
+      content: `The following feature-flags are unknown: ${unknownFlags.join(
+        ', '
+      )}.\n\nAvailable feature-flags are: ${availableFeatureFlags.join(', ')}`,
+      color: 'yellow',
+    });
+    hasShownConfigWarnings = true;
   }
 
-  return flags ?? {};
+  return knownFlags.reduce((acc, flag) => {
+    return { ...acc, [flag]: true };
+  }, {} as FeatureFlags);
 }

package/src/utils/utils.helpers.ts

@@ -0,0 +1,3 @@
+export function partitionArr<T>(arr: T[], pred: (item: T) => boolean): [T[], T[]] {
+  return arr.reduce<[T[], T[]]>((acc, i) => (acc[pred(i) ? 0 : 1].push(i), acc), [[], []]);
+}

package/templates/common/.config/Dockerfile

@@ -4,10 +4,11 @@ ARG grafana_image=grafana-enterprise
 FROM grafana/${grafana_image}:${grafana_version}
 
 ARG development=false
+ARG TARGETARCH
 
 {{#if hasBackend}}
 ARG GO_VERSION=1.21.6
-ARG GO_ARCH=amd64
+ARG GO_ARCH=${TARGETARCH:-amd64}
 {{/if}}
 
 ENV DEV "${development}"

package/templates/common/.config/webpack/publicPath.ts

@@ -0,0 +1,17 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ * This file dynamically sets the public path at runtime based on the location of the plugin's AMD module.
+ * It relies on the magic `module` which is defined by the AMD loader.
+ * https://github.com/requirejs/requirejs/wiki/Differences-between-the-simplified-CommonJS-wrapper-and-standard-AMD-define#module
+ *
+ * We fallback to the plugin root so that older versions of Grafana will continue to load the plugin correctly.
+ */
+
+// @ts-nocheck
+import amdMetaModule from 'amd-module';
+
+__webpack_public_path__ =
+  amdMetaModule && amdMetaModule.uri
+    ? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)
+    : 'public/plugins/{{ pluginId }}/';

package/templates/common/.config/webpack/webpack.config.ts

@@ -36,6 +36,8 @@ const config = async (env): Promise<Configuration> => {
     entry: await getEntries(),
 
     externals: [
+      // Required for dynamic publicPath resolution
+      { 'amd-module': 'module' },
       'lodash',
       'jquery',
       'moment',
@@ -104,6 +106,17 @@ const config = async (env): Promise<Configuration> => {
             },
           },
         },
+        {
+          test: /src\/(?:.*\/)?module\.tsx?$/,
+          use: [
+            {
+              loader: 'imports-loader',
+              options: {
+                imports: `side-effects ${path.join(__dirname, 'publicPath.ts')}`,
+              },
+            },
+          ],
+        },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader'],
@@ -116,9 +129,6 @@ const config = async (env): Promise<Configuration> => {
           test: /\.(png|jpe?g|gif|svg)$/,
           type: 'asset/resource',
           generator: {
-            // Keep publicPath relative for host.com/grafana/ deployments
-            publicPath: `public/plugins/${pluginJson.id}/img/`,
-            outputPath: 'img/',
             filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
@@ -126,10 +136,7 @@ const config = async (env): Promise<Configuration> => {
           test: /\.(woff|woff2|eot|ttf|otf)(\?v=\d+\.\d+\.\d+)?$/,
           type: 'asset/resource',
           generator: {
-            // Keep publicPath relative for host.com/grafana/ deployments
-            publicPath: `public/plugins/${pluginJson.id}/fonts/`,
-            outputPath: 'fonts/',
-            filename: Boolean(env.production) ? '[hash][ext]' : '[name][ext]',
+            filename: Boolean(env.production) ? '[hash][ext]' : '[file]',
           },
         },
       ],

package/templates/common/.cprc.json

@@ -1,8 +1,6 @@
 {
   "features": {
-    {{#if bundleGrafanaUI}}
-    "bundleGrafanaUI": true{{/if}}
-    {{#if useReactRouterV6}}
-    "useReactRouterV6": true{{/if}}
+    "bundleGrafanaUI": {{ bundleGrafanaUI }},
+    "useReactRouterV6": {{ useReactRouterV6 }}
   }
 }

package/templates/common/_package.json

@@ -43,6 +43,7 @@
     "fork-ts-checker-webpack-plugin": "^8.0.0",
     "glob": "^10.2.7",
     "identity-obj-proxy": "3.0.0",
+    "imports-loader": "^5.0.0",
     "jest": "^29.5.0",
     "jest-environment-jsdom": "^29.5.0",
     "prettier": "^2.8.7",

package/templates/common/docker-compose.yaml

@@ -3,7 +3,6 @@ services:
     user: root
     container_name: '{{ pluginId }}'
 
-    platform: 'linux/amd64'
     build:
       context: ./.config
       args: