@grafana/create-plugin 4.8.0 → 4.9.1-canary.837.e9165e7.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v4.9.0 (Thu Apr 25 2024)
+
+#### 🚀 Enhancement
+
+- Create plugin: update scaffolded tests when creating an app plugin [#892](https://github.com/grafana/plugin-tools/pull/892) ([@mckn](https://github.com/mckn))
+
+#### Authors: 1
+
+- Marcus Andersson ([@mckn](https://github.com/mckn))
+
+---
+
 # v4.8.0 (Wed Apr 24 2024)
 
 #### 🚀 Enhancement

package/dist/commands/generate.command.js

@@ -2,23 +2,19 @@ import { glob } from 'glob';
 import chalk from 'chalk';
 import { mkdir, readdir, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { DEFAULT_FEATURE_FLAGS, EXTRA_TEMPLATE_VARIABLES, IS_DEV, PLUGIN_TYPES, TEMPLATE_PATHS } from '../constants.js';
-import { getConfig } from '../utils/utils.config.js';
+import { EXTRA_TEMPLATE_VARIABLES, IS_DEV, TEMPLATE_PATHS } from '../constants.js';
 import { printError } from '../utils/utils.console.js';
 import { directoryExists, getExportFileName, isFile } from '../utils/utils.files.js';
-import { normalizeId } from '../utils/utils.handlebars.js';
-import { getPackageManagerFromUserAgent, getPackageManagerInstallCmd } from '../utils/utils.packageManager.js';
 import { getExportPath } from '../utils/utils.path.js';
-import { renderTemplateFromFile } from '../utils/utils.templates.js';
-import { getVersion } from '../utils/utils.version.js';
+import { renderTemplateFromFile, getTemplateData } from '../utils/utils.templates.js';
 import { prettifyFiles } from '../utils/utils.prettifyFiles.js';
 import { printGenerateSuccessMessage } from './generate/print-success-message.js';
 import { promptUser } from './generate/prompt-user.js';
 import { updateGoSdkAndModules } from './generate/update-go-sdk-and-packages.js';
 export const generate = async (argv) => {
     const answers = await promptUser(argv);
-    const templateData = getTemplateData(answers);
-    const exportPath = getExportPath(answers.pluginName, answers.orgName, answers.pluginType);
+    const templateData = getTemplateData({ ...answers });
+    const exportPath = getExportPath(templateData.pluginName, templateData.orgName, templateData.pluginType);
     const exportPathExists = await directoryExists(exportPath);
     const exportPathIsPopulated = exportPathExists ? (await readdir(exportPath)).length > 0 : false;
     if (exportPathIsPopulated && !IS_DEV) {
@@ -33,39 +29,12 @@ export const generate = async (argv) => {
     failures.forEach((failure) => {
         printError(`${failure.error}`);
     });
-    if (answers.hasBackend) {
+    if (templateData.hasBackend) {
         await execPostScaffoldFunction(updateGoSdkAndModules, exportPath);
     }
     await execPostScaffoldFunction(prettifyFiles, { targetPath: exportPath });
-    printGenerateSuccessMessage(answers);
+    printGenerateSuccessMessage(templateData);
 };
-function getTemplateData(answers) {
-    const { pluginName, orgName, pluginType } = answers;
-    const { features } = getConfig();
-    const currentVersion = getVersion();
-    const pluginId = normalizeId(pluginName, orgName, pluginType);
-    const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
-    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,
-        packageManagerName,
-        packageManagerInstallCmd,
-        packageManagerVersion,
-        isAppType,
-        isNPM: packageManagerName === 'npm',
-        version: currentVersion,
-        bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
-        useReactRouterV6,
-        reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
-        usePlaywright,
-        e2eTestCmd: 'playwright test',
-    };
-    return templateData;
-}
 function getTemplateActions({ exportPath, templateData }) {
     const commonActions = getActionsForTemplateFolder({
         folderPath: TEMPLATE_PATHS.common,

package/dist/commands/migrate.command.js

@@ -8,7 +8,8 @@ export const migrate = async () => {
     try {
         printMessage(TEXT.migrationCommandWarning);
         if (await confirmPrompt(TEXT.overrideFilesPrompt + '\n' + displayArrayAsList(MIGRATION_CONFIG.filesToOverride))) {
-            compileTemplateFiles(MIGRATION_CONFIG.filesToOverride.map(getExportTemplateName), getTemplateData());
+            const templateData = getTemplateData();
+            compileTemplateFiles(MIGRATION_CONFIG.filesToOverride.map(getExportTemplateName), templateData);
             printSuccessMessage(TEXT.overrideFilesSuccess);
         }
         else {

package/dist/commands/provisioning.command.js

@@ -12,8 +12,9 @@ export const provisioning = async () => {
         if (await confirmPrompt(TEXT.addProvisioning)) {
             if (!fs.existsSync(provisioningFolder)) {
                 const provisioningSpecificFiles = glob.sync(`${TEMPLATE_PATHS[type]}/provisioning/**`, { dot: true });
+                const templateData = getTemplateData();
                 provisioningSpecificFiles.forEach((file) => {
-                    compileProvisioningTemplateFile(type, file, getTemplateData());
+                    compileProvisioningTemplateFile(type, file, templateData);
                 });
                 printSuccessMessage(TEXT.addProvisioningSuccess);
             }

package/dist/utils/utils.handlebars.js

@@ -1,7 +1,7 @@
 import Handlebars from 'handlebars';
 import { camelCase, snakeCase, dotCase, pathCase, sentenceCase, constantCase, kebabCase, pascalCase, } from 'change-case';
 import { titleCase } from 'title-case';
-import { PARTIALS_DIR } from '../constants.js';
+import { PARTIALS_DIR, PLUGIN_TYPES } from '../constants.js';
 import { readFileSync, readdirSync } from 'node:fs';
 import { basename, join } from 'node:path';
 export const ifEq = (a, b, options) => {
@@ -12,7 +12,8 @@ export const normalizeId = (pluginName, orgName, type) => {
     const nameRegex = new RegExp('[^0-9a-zA-Z]', 'g');
     const newPluginName = pluginName.replace(re, '').replace(nameRegex, '');
     const newOrgName = orgName.replace(nameRegex, '');
-    return newOrgName.toLowerCase() + '-' + newPluginName.toLowerCase() + `-${type}`;
+    const newType = type === PLUGIN_TYPES.scenes ? PLUGIN_TYPES.app : type;
+    return newOrgName.toLowerCase() + '-' + newPluginName.toLowerCase() + `-${newType}`;
 };
 export const kebabToPascalKebab = (str) => {
     if (typeof str !== 'string') {
@@ -43,7 +44,6 @@ function registerHandlebarsHelpers() {
         properCase: pascalCase,
         pascalCase: pascalCase,
         if_eq: ifEq,
-        normalize_id: normalizeId,
     };
     Object.keys(helpers).forEach((helperName) => Handlebars.registerHelper(helperName, helpers[helperName]));
 }

package/dist/utils/utils.templates.js

@@ -4,10 +4,10 @@ import fs from 'node:fs';
 import { mkdirp } from 'mkdirp';
 import createDebug from 'debug';
 import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
-import { renderHandlebarsTemplate } from './utils.handlebars.js';
+import { normalizeId, renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
 import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES, DEFAULT_FEATURE_FLAGS, } from '../constants.js';
-import { getPackageManagerInstallCmd, getPackageManagerWithFallback } from './utils.packageManager.js';
+import { getPackageManagerInstallCmd, getPackageManagerWithFallback, getPackageManagerFromUserAgent, } from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
 import { getConfig } from './utils.config.js';
@@ -54,37 +54,71 @@ export function compileProvisioningTemplateFile(pluginType, templateFile, data)
 export function renderTemplateFromFile(templateFile, data) {
     return renderHandlebarsTemplate(fs.readFileSync(templateFile).toString(), data);
 }
-export function getTemplateData() {
-    const pluginJson = getPluginJson();
+export function getTemplateData(cliArgs) {
     const { features } = getConfig();
     const currentVersion = getVersion();
-    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
+    const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
+    const shouldUseReactRouterV6 = (pluginType) => features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app;
+    const getReactRouterVersion = (pluginType) => (shouldUseReactRouterV6(pluginType) ? '6.22.0' : '5.2.0');
+    const isAppType = (pluginType) => pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
+    const isNPM = (packageManagerName) => packageManagerName === 'npm';
+    const getE2eTestCmd = (packageManagerName) => usePlaywright
         ? 'playwright test'
         : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run`;
-    const templateData = {
-        ...EXTRA_TEMPLATE_VARIABLES,
-        pluginId: pluginJson.id,
-        pluginName: pluginJson.name,
-        pluginDescription: pluginJson.info?.description,
-        hasBackend: Boolean(pluginJson.backend),
-        orgName: pluginJson.info?.author?.name,
-        pluginType: pluginJson.type,
-        isAppType: pluginJson.type === PLUGIN_TYPES.app || pluginJson.type === PLUGIN_TYPES.scenes,
-        isNPM: packageManagerName === 'npm',
-        packageManagerName,
-        packageManagerVersion,
-        packageManagerInstallCmd,
-        version: currentVersion,
-        bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
-        useReactRouterV6: useReactRouterV6,
-        reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
-        usePlaywright,
-        e2eTestCmd,
-    };
+    let templateData;
+    if (cliArgs) {
+        const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
+        templateData = {
+            ...EXTRA_TEMPLATE_VARIABLES,
+            pluginId: normalizeId(cliArgs.pluginName, cliArgs.orgName, cliArgs.pluginType),
+            pluginName: cliArgs.pluginName,
+            pluginDescription: cliArgs.pluginDescription,
+            hasBackend: cliArgs.hasBackend,
+            orgName: cliArgs.orgName,
+            pluginType: cliArgs.pluginType,
+            packageManagerName,
+            packageManagerVersion,
+            packageManagerInstallCmd: getPackageManagerInstallCmd(packageManagerName),
+            isAppType: isAppType(cliArgs.pluginType),
+            isNPM: isNPM(packageManagerName),
+            version: currentVersion,
+            bundleGrafanaUI,
+            useReactRouterV6: shouldUseReactRouterV6(cliArgs.pluginType),
+            reactRouterVersion: getReactRouterVersion(cliArgs.pluginType),
+            usePlaywright,
+            e2eTestCmd: getE2eTestCmd(packageManagerName),
+            hasGithubWorkflows: cliArgs.hasGithubWorkflows,
+            hasGithubLevitateWorkflow: cliArgs.hasGithubLevitateWorkflow,
+        };
+    }
+    else {
+        const pluginJson = getPluginJson();
+        const { packageManagerName, packageManagerVersion } = getPackageManagerWithFallback();
+        const githubFolder = path.join(process.cwd(), '.github', 'workflows');
+        templateData = {
+            ...EXTRA_TEMPLATE_VARIABLES,
+            pluginId: pluginJson.id,
+            pluginName: pluginJson.name,
+            pluginDescription: pluginJson.info.description,
+            hasBackend: pluginJson.backend,
+            orgName: pluginJson.info.author.name,
+            pluginType: pluginJson.type,
+            packageManagerName: packageManagerName,
+            packageManagerVersion: packageManagerVersion,
+            packageManagerInstallCmd: getPackageManagerInstallCmd(packageManagerName),
+            isAppType: isAppType(pluginJson.type),
+            isNPM: isNPM(packageManagerName),
+            version: currentVersion,
+            bundleGrafanaUI,
+            useReactRouterV6: shouldUseReactRouterV6(pluginJson.type),
+            reactRouterVersion: getReactRouterVersion(pluginJson.type),
+            usePlaywright,
+            e2eTestCmd: getE2eTestCmd(packageManagerName),
+            hasGithubWorkflows: isFile(path.join(githubFolder, 'ci.yml')),
+            hasGithubLevitateWorkflow: isFile(path.join(githubFolder, 'is-compatible.yml')),
+        };
+    }
     debug('\nTemplate data:\n' + JSON.stringify(templateData, null, 2));
     return templateData;
 }

package/fixtures/test-template/src/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
   "type": "app",
   "name": "{{ titleCase pluginName }}",
-  "id": "{{ normalize_id pluginName orgName 'app' }}",
+  "id": "{{ pluginId }}",
   "backend": true,
   "executable": "gpx_{{ snakeCase pluginName }}",
   "info": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "4.8.0",
+  "version": "4.9.1-canary.837.e9165e7.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -87,5 +87,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "96389ff99fec497ed6b2ab509709d578ecaf13f0"
+  "gitHead": "e9165e7f7cf278f7cc11fa6a1fbdc6f3343dc5dd"
 }

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

@@ -1,9 +1,9 @@
 import { displayAsMarkdown } from '../../utils/utils.console.js';
 import { normalizeId } from '../../utils/utils.handlebars.js';
 import { getPackageManagerFromUserAgent } from '../../utils/utils.packageManager.js';
-import { CliArgs } from '../types.js';
+import { TemplateData } from '../../types.js';
 
-export function printGenerateSuccessMessage(answers: CliArgs) {
+export function printGenerateSuccessMessage(answers: TemplateData) {
   const directory = normalizeId(answers.pluginName, answers.orgName, answers.pluginType);
   const { packageManagerName } = getPackageManagerFromUserAgent();
   const commands = [

package/src/commands/generate/prompt-user.ts

@@ -1,10 +1,10 @@
 import minimist from 'minimist';
 import Enquirer from 'enquirer';
 import { PLUGIN_TYPES } from '../../constants.js';
-import { CliArgs } from '../types.js';
+import { GenerateCliArgs } from '../../types.js';
 
 export async function promptUser(argv: minimist.ParsedArgs) {
-  let answers: Partial<CliArgs> = {};
+  let answers: Partial<GenerateCliArgs> = {};
   const enquirer = new Enquirer();
 
   for (const prompt of prompts) {
@@ -22,17 +22,17 @@ export async function promptUser(argv: minimist.ParsedArgs) {
     }
   }
 
-  return answers as CliArgs;
+  return answers as GenerateCliArgs;
 }
 
 type Prompt = {
-  name: keyof CliArgs;
+  name: keyof GenerateCliArgs;
   type: string | (() => string);
   message: string | (() => string) | (() => Promise<string>);
   validate?: (value: string) => boolean | string | Promise<boolean | string>;
   initial?: any;
   choices?: Array<string | Choice>;
-  shouldPrompt?: (answers: Partial<CliArgs>) => boolean;
+  shouldPrompt?: (answers: Partial<GenerateCliArgs>) => boolean;
 };
 
 type Choice = {

package/src/commands/generate.command.ts

@@ -3,25 +3,21 @@ import minimist from 'minimist';
 import chalk from 'chalk';
 import { mkdir, readdir, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { DEFAULT_FEATURE_FLAGS, EXTRA_TEMPLATE_VARIABLES, IS_DEV, PLUGIN_TYPES, TEMPLATE_PATHS } from '../constants.js';
-import { getConfig } from '../utils/utils.config.js';
+import { EXTRA_TEMPLATE_VARIABLES, IS_DEV, TEMPLATE_PATHS } from '../constants.js';
 import { printError } from '../utils/utils.console.js';
 import { directoryExists, getExportFileName, isFile } from '../utils/utils.files.js';
-import { normalizeId } from '../utils/utils.handlebars.js';
-import { getPackageManagerFromUserAgent, getPackageManagerInstallCmd } from '../utils/utils.packageManager.js';
 import { getExportPath } from '../utils/utils.path.js';
-import { renderTemplateFromFile } from '../utils/utils.templates.js';
-import { getVersion } from '../utils/utils.version.js';
+import { renderTemplateFromFile, getTemplateData } from '../utils/utils.templates.js';
 import { prettifyFiles } from '../utils/utils.prettifyFiles.js';
 import { printGenerateSuccessMessage } from './generate/print-success-message.js';
 import { promptUser } from './generate/prompt-user.js';
 import { updateGoSdkAndModules } from './generate/update-go-sdk-and-packages.js';
-import { CliArgs, TemplateData } from '../types.js';
+import { TemplateData } from '../types.js';
 
 export const generate = async (argv: minimist.ParsedArgs) => {
   const answers = await promptUser(argv);
-  const templateData = getTemplateData(answers);
-  const exportPath = getExportPath(answers.pluginName, answers.orgName, answers.pluginType);
+  const templateData = getTemplateData({ ...answers });
+  const exportPath = getExportPath(templateData.pluginName, templateData.orgName, templateData.pluginType);
   const exportPathExists = await directoryExists(exportPath);
   const exportPathIsPopulated = exportPathExists ? (await readdir(exportPath)).length > 0 : false;
 
@@ -42,46 +38,14 @@ export const generate = async (argv: minimist.ParsedArgs) => {
     printError(`${failure.error}`);
   });
 
-  if (answers.hasBackend) {
+  if (templateData.hasBackend) {
     await execPostScaffoldFunction(updateGoSdkAndModules, exportPath);
   }
   await execPostScaffoldFunction(prettifyFiles, { targetPath: exportPath });
 
-  printGenerateSuccessMessage(answers);
+  printGenerateSuccessMessage(templateData);
 };
 
-function getTemplateData(answers: CliArgs) {
-  const { pluginName, orgName, pluginType } = answers;
-  const { features } = getConfig();
-  const currentVersion = getVersion();
-  const pluginId = normalizeId(pluginName, orgName, pluginType);
-  // Support the users package manager of choice.
-  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 templateData: TemplateData = {
-    ...answers,
-    pluginId,
-    packageManagerName,
-    packageManagerInstallCmd,
-    packageManagerVersion,
-    isAppType,
-    isNPM: packageManagerName === 'npm',
-    version: currentVersion,
-    bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
-    useReactRouterV6,
-    reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
-    usePlaywright,
-    e2eTestCmd: 'playwright test',
-  };
-
-  return templateData;
-}
-
 type TemplateAction = {
   templateFile: string;
   path: string;

package/src/commands/migrate.command.ts

@@ -28,7 +28,8 @@ export const migrate = async () => {
     // 1. Add / update configuration files
     // --------------------------
     if (await confirmPrompt(TEXT.overrideFilesPrompt + '\n' + displayArrayAsList(MIGRATION_CONFIG.filesToOverride))) {
-      compileTemplateFiles(MIGRATION_CONFIG.filesToOverride.map(getExportTemplateName), getTemplateData());
+      const templateData = getTemplateData();
+      compileTemplateFiles(MIGRATION_CONFIG.filesToOverride.map(getExportTemplateName), templateData);
       printSuccessMessage(TEXT.overrideFilesSuccess);
     } else {
       printMessage(TEXT.overrideFilesAborted);

package/src/commands/provisioning.command.ts

@@ -13,9 +13,9 @@ export const provisioning = async () => {
     if (await confirmPrompt(TEXT.addProvisioning)) {
       if (!fs.existsSync(provisioningFolder)) {
         const provisioningSpecificFiles = glob.sync(`${TEMPLATE_PATHS[type]}/provisioning/**`, { dot: true });
-
+        const templateData = getTemplateData();
         provisioningSpecificFiles.forEach((file) => {
-          compileProvisioningTemplateFile(type, file, getTemplateData());
+          compileProvisioningTemplateFile(type, file, templateData);
         });
         printSuccessMessage(TEXT.addProvisioningSuccess);
       } else {

package/src/types.ts

@@ -1,6 +1,8 @@
 import { PLUGIN_TYPES } from './constants.js';
 
-export type CliArgs = {
+// The arguments that are passed to the CLI when generating a new plugin.
+// (Either via user prompts or CLI arguments)
+export type GenerateCliArgs = {
   pluginName: string;
   pluginDescription: string;
   orgName: string;
@@ -12,6 +14,11 @@ export type CliArgs = {
 
 export type TemplateData = {
   pluginId: string;
+  pluginName: string;
+  pluginDescription: string;
+  hasBackend: boolean;
+  orgName: string;
+  pluginType: PLUGIN_TYPES;
   packageManagerName: string;
   packageManagerInstallCmd: string;
   packageManagerVersion: string;
@@ -23,4 +30,6 @@ export type TemplateData = {
   reactRouterVersion: string;
   usePlaywright: boolean;
   e2eTestCmd: string;
+  hasGithubWorkflows: boolean;
+  hasGithubLevitateWorkflow: boolean;
 };

package/src/utils/utils.handlebars.ts

@@ -25,7 +25,9 @@ export const normalizeId = (pluginName: string, orgName: string, type: PLUGIN_TY
 
   const newPluginName = pluginName.replace(re, '').replace(nameRegex, '');
   const newOrgName = orgName.replace(nameRegex, '');
-  return newOrgName.toLowerCase() + '-' + newPluginName.toLowerCase() + `-${type}`;
+  const newType = type === PLUGIN_TYPES.scenes ? PLUGIN_TYPES.app : type;
+
+  return newOrgName.toLowerCase() + '-' + newPluginName.toLowerCase() + `-${newType}`;
 };
 
 export const kebabToPascalKebab = (str: string) => {
@@ -60,7 +62,6 @@ function registerHandlebarsHelpers() {
     properCase: pascalCase,
     pascalCase: pascalCase,
     if_eq: ifEq,
-    normalize_id: normalizeId,
   };
 
   Object.keys(helpers).forEach((helperName) =>

package/src/utils/utils.templates.ts

@@ -4,7 +4,7 @@ import fs from 'node:fs';
 import { mkdirp } from 'mkdirp';
 import createDebug from 'debug';
 import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
-import { renderHandlebarsTemplate } from './utils.handlebars.js';
+import { normalizeId, renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
 import {
   TEMPLATE_PATHS,
@@ -13,8 +13,12 @@ import {
   PLUGIN_TYPES,
   DEFAULT_FEATURE_FLAGS,
 } from '../constants.js';
-import { TemplateData } from '../types.js';
-import { getPackageManagerInstallCmd, getPackageManagerWithFallback } from './utils.packageManager.js';
+import { GenerateCliArgs, TemplateData } from '../types.js';
+import {
+  getPackageManagerInstallCmd,
+  getPackageManagerWithFallback,
+  getPackageManagerFromUserAgent,
+} from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
 import { getConfig } from './utils.config.js';
@@ -88,38 +92,79 @@ export function renderTemplateFromFile(templateFile: string, data?: any) {
   return renderHandlebarsTemplate(fs.readFileSync(templateFile).toString(), data);
 }
 
-export function getTemplateData(): TemplateData {
-  const pluginJson = getPluginJson();
+export function getTemplateData(cliArgs?: GenerateCliArgs): TemplateData {
   const { features } = getConfig();
   const currentVersion = getVersion();
-  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,
-    pluginName: pluginJson.name,
-    pluginDescription: pluginJson.info?.description,
-    hasBackend: Boolean(pluginJson.backend),
-    orgName: pluginJson.info?.author?.name,
-    pluginType: pluginJson.type,
-    isAppType: pluginJson.type === PLUGIN_TYPES.app || pluginJson.type === PLUGIN_TYPES.scenes,
-    isNPM: packageManagerName === 'npm',
-    packageManagerName,
-    packageManagerVersion,
-    packageManagerInstallCmd,
-    version: currentVersion,
-    bundleGrafanaUI: features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI,
-    useReactRouterV6: useReactRouterV6,
-    reactRouterVersion: useReactRouterV6 ? '6.22.0' : '5.2.0',
-    usePlaywright,
-    e2eTestCmd,
-  };
+  const bundleGrafanaUI = features.bundleGrafanaUI ?? DEFAULT_FEATURE_FLAGS.bundleGrafanaUI;
+  const shouldUseReactRouterV6 = (pluginType: string) =>
+    features.useReactRouterV6 === true && pluginType === PLUGIN_TYPES.app;
+  const getReactRouterVersion = (pluginType: string) => (shouldUseReactRouterV6(pluginType) ? '6.22.0' : '5.2.0');
+  const isAppType = (pluginType: string) => pluginType === PLUGIN_TYPES.app || pluginType === PLUGIN_TYPES.scenes;
+  const isNPM = (packageManagerName: string) => packageManagerName === 'npm';
+  const getE2eTestCmd = (packageManagerName: string) =>
+    usePlaywright
+      ? 'playwright test'
+      : `${packageManagerName} exec cypress install && ${packageManagerName} exec grafana-e2e run`;
+
+  let templateData: TemplateData;
+
+  // `cliArgs` is only passed in when scaffolding a new plugin via the CLI (generate command)
+  if (cliArgs) {
+    const { packageManagerName, packageManagerVersion } = getPackageManagerFromUserAgent();
+
+    templateData = {
+      ...EXTRA_TEMPLATE_VARIABLES,
+      pluginId: normalizeId(cliArgs.pluginName, cliArgs.orgName, cliArgs.pluginType),
+      pluginName: cliArgs.pluginName,
+      pluginDescription: cliArgs.pluginDescription,
+      hasBackend: cliArgs.hasBackend,
+      orgName: cliArgs.orgName,
+      pluginType: cliArgs.pluginType,
+      packageManagerName,
+      packageManagerVersion,
+      packageManagerInstallCmd: getPackageManagerInstallCmd(packageManagerName),
+      isAppType: isAppType(cliArgs.pluginType),
+      isNPM: isNPM(packageManagerName),
+      version: currentVersion,
+      bundleGrafanaUI,
+      useReactRouterV6: shouldUseReactRouterV6(cliArgs.pluginType),
+      reactRouterVersion: getReactRouterVersion(cliArgs.pluginType),
+      usePlaywright,
+      e2eTestCmd: getE2eTestCmd(packageManagerName),
+      hasGithubWorkflows: cliArgs.hasGithubWorkflows,
+      hasGithubLevitateWorkflow: cliArgs.hasGithubLevitateWorkflow,
+    };
+    // Updating or migrating a plugin
+    // (plugin.json and package.json files are only present if it's an existing plugin)
+  } else {
+    const pluginJson = getPluginJson();
+    const { packageManagerName, packageManagerVersion } = getPackageManagerWithFallback();
+    const githubFolder = path.join(process.cwd(), '.github', 'workflows');
+
+    templateData = {
+      ...EXTRA_TEMPLATE_VARIABLES,
+      pluginId: pluginJson.id,
+      pluginName: pluginJson.name,
+      pluginDescription: pluginJson.info.description,
+      hasBackend: pluginJson.backend,
+      orgName: pluginJson.info.author.name,
+      pluginType: pluginJson.type,
+      packageManagerName: packageManagerName,
+      packageManagerVersion: packageManagerVersion,
+      packageManagerInstallCmd: getPackageManagerInstallCmd(packageManagerName),
+      isAppType: isAppType(pluginJson.type),
+      isNPM: isNPM(packageManagerName),
+      version: currentVersion,
+      bundleGrafanaUI,
+      useReactRouterV6: shouldUseReactRouterV6(pluginJson.type),
+      reactRouterVersion: getReactRouterVersion(pluginJson.type),
+      usePlaywright,
+      e2eTestCmd: getE2eTestCmd(packageManagerName),
+      hasGithubWorkflows: isFile(path.join(githubFolder, 'ci.yml')),
+      hasGithubLevitateWorkflow: isFile(path.join(githubFolder, 'is-compatible.yml')),
+    };
+  }
 
   debug('\nTemplate data:\n' + JSON.stringify(templateData, null, 2));
 

package/templates/app/provisioning/plugins/apps.yaml

@@ -1,7 +1,7 @@
 apiVersion: 1
 
 apps:
-  - type: '{{ normalize_id pluginName orgName 'app' }}'
+  - type: '{{ pluginId }}'
     org_id: 1
     org_name: '{{ orgName }}'
     disabled: false

package/templates/app/src/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
   "type": "app",
   "name": "{{ titleCase pluginName }}",
-  "id": "{{ normalize_id pluginName orgName 'app' }}",{{#if hasBackend}}
+  "id": "{{ pluginId }}",{{#if hasBackend}}
   "backend": true,
   "executable": "gpx_{{ snakeCase pluginName }}",{{/if}}
   "info": {

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

@@ -1,7 +1,7 @@
 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 });
+  const saveButton = page.getByRole('button', { name: /Save API settings/i });
 
   // reset the configured secret
   await page.getByRole('button', { name: /reset/i }).click();
@@ -14,6 +14,6 @@ test('should be possible to save app configuration', async ({ appConfigPage, pag
   // listen for the server response on the saved form
   const saveResponse = appConfigPage.waitForSettingsResponse();
 
-  await saveForm.click();
+  await saveButton.click();
   await expect(saveResponse).toBeOK();
 });

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

@@ -1,26 +1,25 @@
-import pluginJson from '../src/plugin.json';
-import { test, expect } from '@grafana/plugin-e2e';
+import { test, expect } from './fixtures';
 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}`);
+  test('page one should render successfully', async ({ gotoPage, page }) => {
+    await gotoPage(`/${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}`);
+  test('page two should render successfully', async ({ gotoPage, page }) => {
+    await gotoPage(`/${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`);
+  test('page three should support an id parameter', async ({ gotoPage, page }) => {
+    await gotoPage(`/${ROUTES.Three}/123456`);
     await expect(page.getByText('ID: 123456')).toBeVisible();
   });
 
-  test('page three should render sucessfully', async ({ page }) => {
+  test('page three should render sucessfully', async ({ gotoPage, page }) => {
     // wait for page to successfully render
-    await page.goto(`/a/${pluginJson.id}/${ROUTES.One}`);
+    await gotoPage(`/${ROUTES.One}`);
     await expect(page.getByText('This is page one.')).toBeVisible();
 
     // navigating to page four with full width layout without sidebar menu

package/templates/app/tests/fixtures.ts

@@ -1,19 +1,26 @@
-import { AppConfigPage, test as base } from '@grafana/plugin-e2e';
+import { AppConfigPage, AppPage, test as base } from '@grafana/plugin-e2e';
 import pluginJson from '../src/plugin.json';
 
-type AppTestFixture = { appConfigPage: AppConfigPage };
+type AppTestFixture = {
+  appConfigPage: AppConfigPage;
+  gotoPage: (path?: string) => Promise<AppPage>;
+};
 
 export const test = base.extend<AppTestFixture>({
-  appConfigPage: async ({ page, selectors, grafanaVersion, request }, use, testInfo) => {
-    const configPage = new AppConfigPage(
-      { page, selectors, grafanaVersion, request, testInfo },
-      {
+  appConfigPage: async ({ gotoAppConfigPage }, use) => {
+    const configPage = await gotoAppConfigPage({
+      pluginId: pluginJson.id,
+    });
+    await use(configPage);
+  },
+  gotoPage: async ({ gotoAppPage }, use) => {
+    await use((path) =>
+      gotoAppPage({
+        path,
         pluginId: pluginJson.id,
-      }
+      })
     );
-    await configPage.goto();
-    await use(configPage);
   },
 });
 
-export { expect } from '@grafana/plugin-e2e';
+export { expect } from '@grafana/plugin-e2e';

package/templates/backend/pkg/main.go

@@ -17,8 +17,8 @@ func main() {
 	// from Grafana to create different instances of SampleDatasource (per datasource
 	// ID). When datasource configuration changed Dispose method will be called and
 	// new datasource instance created using NewSampleDatasource factory.
-	if err := datasource.Manage("{{ normalize_id pluginName orgName pluginType }}", plugin.NewDatasource, datasource.ManageOpts{}); err != nil {
+	if err := datasource.Manage("{{ pluginId }}", plugin.NewDatasource, datasource.ManageOpts{}); err != nil {
 		log.DefaultLogger.Error(err.Error())
 		os.Exit(1)
 	}
-}
+}

package/templates/backend-app/pkg/main.go

@@ -16,7 +16,7 @@ func main() {
 	// argument. This factory will be automatically called on incoming request
 	// from Grafana to create different instances of `App` (per plugin
 	// ID).
-	if err := app.Manage("{{ normalize_id pluginName orgName pluginType }}", plugin.NewApp, app.ManageOpts{}); err != nil {
+	if err := app.Manage("{{ pluginId }}", plugin.NewApp, app.ManageOpts{}); err != nil {
 		log.DefaultLogger.Error(err.Error())
 		os.Exit(1)
 	}

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

@@ -2,7 +2,7 @@ apiVersion: 1
 
 datasources:
   - name: '{{ pluginName }}'
-    type: '{{ normalize_id pluginName orgName 'datasource' }}'
+    type: '{{ pluginId }}'
     access: proxy
     isDefault: false
     orgId: 1

package/templates/datasource/src/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
   "type": "datasource",
   "name": "{{ titleCase pluginName }}",
-  "id": "{{ normalize_id pluginName orgName 'datasource' }}",
+  "id": "{{ pluginId }}",
   "metrics": true,{{#if hasBackend}}
   "backend": true,
   "executable": "gpx_{{ snakeCase pluginName }}",{{/if}}

package/templates/panel/src/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
   "type": "panel",
   "name": "{{ titleCase pluginName }}",
-  "id": "{{ normalize_id pluginName orgName 'panel' }}",
+  "id": "{{ pluginId }}",
   "info": {
     "keywords": ["panel"],
     "description": "{{ sentenceCase pluginDescription }}",

package/templates/scenes-app/provisioning/plugins/app.yaml

@@ -1,7 +1,7 @@
 apiVersion: 1
 
 apps:
-  - type: '{{ normalize_id pluginName orgName 'app' }}'
+  - type: '{{ pluginId }}'
     org_id: 1
     org_name: '{{ orgName }}'
     disabled: false

package/templates/scenes-app/src/plugin.json

@@ -2,7 +2,7 @@
   "$schema": "https://raw.githubusercontent.com/grafana/grafana/main/docs/sources/developers/plugins/plugin.schema.json",
   "type": "app",
   "name": "{{ titleCase pluginName }}",
-  "id": "{{ normalize_id pluginName orgName 'app' }}",{{#if hasBackend}}
+  "id": "{{ pluginId }}",{{#if hasBackend}}
   "backend": true,
   "executable": "gpx_{{ snakeCase pluginName }}",{{/if}}
   "info": {

package/dist/commands/types.js

@@ -1 +0,0 @@
-export {};

package/src/commands/types.ts

@@ -1,24 +0,0 @@
-import { PLUGIN_TYPES } from '../constants.js';
-
-export type CliArgs = {
-  pluginName: string;
-  pluginDescription: string;
-  orgName: string;
-  pluginType: PLUGIN_TYPES;
-  hasBackend: boolean;
-  hasGithubWorkflows: boolean;
-  hasGithubLevitateWorkflow: boolean;
-};
-
-export type TemplateData = {
-  pluginId: string;
-  packageManagerName: string;
-  packageManagerInstallCmd: string;
-  packageManagerVersion: string;
-  isAppType: boolean;
-  isNPM: boolean;
-  version: string;
-  bundleGrafanaUI: boolean;
-  useReactRouterV6: boolean;
-  reactRouterVersion: string;
-};