Create-Plugin: Simplify Prompts

.github/workflows/ci.yml

@@ -53,22 +53,22 @@ jobs:
       matrix:
         include:
           - workingDir: 'myorg-nobackend-app'
-            cmd: create-plugin --pluginName='no-backend' --orgName='myorg' --pluginDescription='This is a sample app.' --pluginType='app' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow
+            cmd: create-plugin --pluginName='no-backend' --orgName='myorg' --pluginType='app' --no-hasBackend
             hasBackend: false
           - workingDir: 'myorg-backend-app'
-            cmd: create-plugin --pluginName='backend' --orgName='myorg' --pluginDescription='This is a sample backend app.' --pluginType='app' --hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow
+            cmd: create-plugin --pluginName='backend' --orgName='myorg' --pluginType='app' --hasBackend
             hasBackend: true
           - workingDir: 'myorg-nobackend-panel'
-            cmd: create-plugin --pluginName='no-backend' --orgName='myorg' --pluginDescription='This is a sample panel.' --pluginType='panel' --hasGithubWorkflows --hasGithubLevitateWorkflow
+            cmd: create-plugin --pluginName='no-backend' --orgName='myorg' --pluginType='panel'
             hasBackend: false
           - workingDir: 'myorg-nobackend-datasource'
-            cmd: create-plugin --pluginName='no-backend' --orgName='myorg' --pluginDescription='This is a sample datasource.' --pluginType='datasource' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow
+            cmd: create-plugin --pluginName='no-backend' --orgName='myorg' --pluginType='datasource' --no-hasBackend
             hasBackend: false
           - workingDir: 'myorg-backend-datasource'
-            cmd: create-plugin --pluginName='backend' --orgName='myorg' --pluginDescription='This is a sample backend datasource.' --pluginType='datasource' --hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow
+            cmd: create-plugin --pluginName='backend' --orgName='myorg' --pluginType='datasource' --hasBackend
             hasBackend: true
           - workingDir: 'myorg-nobackendscenes-app'
-            cmd: create-plugin --pluginName='no-backend-scenes' --orgName='myorg' --pluginDescription='This is a sample scenes app.' --pluginType='scenesapp' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow
+            cmd: create-plugin --pluginName='no-backend-scenes' --orgName='myorg' --pluginType='scenesapp' --no-hasBackend
             hasBackend: false
     steps:
       - name: Setup .npmrc file for NPM registry

packages/create-plugin/fixtures/test-template/src/plugin.json

@@ -6,7 +6,7 @@
   "backend": true,
   "executable": "gpx_{{ snakeCase pluginName }}",
   "info": {
-    "description": "{{ sentenceCase pluginDescription }}",
+    "description": "",
     "author": {
       "name": "{{ sentenceCase orgName }}"
     },

packages/create-plugin/package.json

@@ -28,12 +28,12 @@
     "dev-scenes-app": "nodemon --exec 'npm run generate-scenes-app'",
     "dev-panel": "nodemon --exec 'npm run generate-panel'",
     "dev-datasource": "nodemon --exec 'npm run generate-datasource'",
-    "generate-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample app' --orgName='sample-org' --pluginDescription='This is a sample app.' --pluginType='app' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
-    "generate-scenes-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample scenesapp' --orgName='sample-org' --pluginDescription='This is a sample scenes app.' --pluginType='scenesapp' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
-    "generate-app-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample app' --orgName='sample-org' --pluginDescription='This is a sample backend app.' --pluginType='app' --hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
-    "generate-panel": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample panel' --orgName='sample-org' --pluginDescription='This is a sample panel.' --pluginType='panel' --hasGithubWorkflows --hasGithubLevitateWorkflow",
-    "generate-datasource": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample datasource' --orgName='sample-org' --pluginDescription='This is a sample datasource.' --pluginType='datasource' --no-hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
-    "generate-datasource-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample datasource' --orgName='sample-org' --pluginDescription='This is a sample datasource.' --pluginType='datasource' --hasBackend --hasGithubWorkflows --hasGithubLevitateWorkflow",
+    "generate-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample app' --orgName='sample-org' --pluginType='app' --no-hasBackend",
+    "generate-scenes-app": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample scenesapp' --orgName='sample-org' --pluginType='scenesapp' --no-hasBackend",
+    "generate-app-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample app' --orgName='sample-org' --pluginType='app' --hasBackend",
+    "generate-panel": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample panel' --orgName='sample-org' --pluginType='panel'",
+    "generate-datasource": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample datasource' --orgName='sample-org' --pluginType='datasource' --no-hasBackend",
+    "generate-datasource-backend": "tsc && npm run clean-generated && CREATE_PLUGIN_DEV=true node ./dist/bin/run.js --pluginName='Sample datasource' --orgName='sample-org' --pluginType='datasource' --hasBackend",
     "lint": "eslint --cache --ext .js,.jsx,.ts,.tsx ./src",
     "lint:fix": "npm run lint -- --fix",
     "test": "vitest",

packages/create-plugin/src/commands/generate.command.ts

@@ -3,7 +3,7 @@ import minimist from 'minimist';
 import chalk from 'chalk';
 import { mkdir, readdir, writeFile } from 'node:fs/promises';
 import path from 'node:path';
-import { EXTRA_TEMPLATE_VARIABLES, IS_DEV, TEMPLATE_PATHS } from '../constants.js';
+import { EXTRA_TEMPLATE_VARIABLES, IS_DEV, PLUGIN_TYPES, TEMPLATE_PATHS } from '../constants.js';
 import { printError } from '../utils/utils.console.js';
 import { directoryExists, getExportFileName, isFile } from '../utils/utils.files.js';
 import { getExportPath } from '../utils/utils.path.js';
@@ -28,21 +28,31 @@ export const generate = async (argv: minimist.ParsedArgs) => {
   }
 
   const actions = getTemplateActions({ templateData, exportPath });
-  const { changes, failures } = await generateFiles({ actions });
-
+  const failures = await generateFiles({ actions });
+  const changes = [
+    `Scaffolded ${templateData.pluginId} ${templateData.pluginType} plugin ${
+      templateData.hasBackend ? '(with Go backend)' : ''
+    }`,
+    'Added basic e2e test with Playwright',
+    `${provisioningMsg[templateData.pluginType]}`,
+    'Configured Development environment (Docker)',
+    'Added default GitHub actions for CI, releases and Grafana compatibility',
+  ];
+  console.log('');
   changes.forEach((change) => {
-    console.log(`${chalk.green('✔︎ ++')} ${change.path}`);
+    console.log(`${chalk.green('✔︎')} ${change}`);
   });
 
   failures.forEach((failure) => {
+    console.log({ failure });
     printError(`${failure.error}`);
   });
 
   if (templateData.hasBackend) {
     await execPostScaffoldFunction(updateGoSdkAndModules, exportPath);
   }
   await execPostScaffoldFunction(prettifyFiles, { targetPath: exportPath });
-
+  console.log('\n');
   printGenerateSuccessMessage(templateData);
 };
 
@@ -88,24 +98,14 @@ function getTemplateActions({ exportPath, templateData }: { exportPath: string;
     []
   );
 
-  // Copy over Github workflow files (if selected)
-  const ciWorkflowActions = templateData.hasGithubWorkflows
-    ? getActionsForTemplateFolder({
-        folderPath: TEMPLATE_PATHS.ciWorkflows,
-        exportPath,
-        templateData,
-      })
-    : [];
-
-  const isCompatibleWorkflowActions = templateData.hasGithubLevitateWorkflow
-    ? getActionsForTemplateFolder({
-        folderPath: TEMPLATE_PATHS.isCompatibleWorkflow,
-        exportPath,
-        templateData,
-      })
-    : [];
+  // Copy over Github workflow files
+  const ciWorkflowActions = getActionsForTemplateFolder({
+    folderPath: TEMPLATE_PATHS.ciWorkflows,
+    exportPath,
+    templateData,
+  });
 
-  return [...pluginActions, ...ciWorkflowActions, ...isCompatibleWorkflowActions];
+  return [...pluginActions, ...ciWorkflowActions];
 }
 
 function getActionsForTemplateFolder({
@@ -141,7 +141,6 @@ function getActionsForTemplateFolder({
 
 async function generateFiles({ actions }: { actions: any[] }) {
   const failures = [];
-  const changes = [];
   for (const action of actions) {
     try {
       const rootDir = path.dirname(action.path);
@@ -152,9 +151,6 @@ async function generateFiles({ actions }: { actions: any[] }) {
 
       const rendered = renderTemplateFromFile(action.templateFile, action.data);
       await writeFile(action.path, rendered);
-      changes.push({
-        path: action.path,
-      });
     } catch (error) {
       let message;
       if (error instanceof Error) {
@@ -168,7 +164,7 @@ async function generateFiles({ actions }: { actions: any[] }) {
       });
     }
   }
-  return { failures, changes };
+  return failures;
 }
 
 type AsyncFunction<T> = (...args: any[]) => Promise<T>;
@@ -180,6 +176,14 @@ async function execPostScaffoldFunction<T>(fn: AsyncFunction<T>, ...args: Parame
       console.log(`${chalk.green('✔︎')} ${resultMsg}`);
     }
   } catch (error) {
+    console.log('error', error);
     printError(`${error}`);
   }
 }
+
+const provisioningMsg = {
+  [PLUGIN_TYPES.app]: 'Provisioning provided for app',
+  [PLUGIN_TYPES.datasource]: 'Provisioning provided for data source instance',
+  [PLUGIN_TYPES.panel]: 'Provisioning provided for basic dashboard and TestData data source instance',
+  [PLUGIN_TYPES.scenes]: 'Provisioning provided for app and TestData data source instance',
+};

packages/create-plugin/src/commands/generate/print-success-message.ts

@@ -1,19 +1,21 @@
+import { machine } from 'node:os';
+import { TemplateData } from '../../types.js';
 import { displayAsMarkdown } from '../../utils/utils.console.js';
 import { normalizeId } from '../../utils/utils.handlebars.js';
 import { getPackageManagerFromUserAgent } from '../../utils/utils.packageManager.js';
-import { TemplateData } from '../../types.js';
 
 export function printGenerateSuccessMessage(answers: TemplateData) {
   const directory = normalizeId(answers.pluginName, answers.orgName, answers.pluginType);
   const { packageManagerName } = getPackageManagerFromUserAgent();
+
   const commands = [
     `- \`cd ./${directory}\``,
     `- \`${packageManagerName} install\` to install frontend dependencies.`,
     `- \`${packageManagerName} exec playwright install chromium\` to install e2e test dependencies.`,
     `- \`${packageManagerName} run dev\` to build (and watch) the plugin frontend code.`,
     ...(answers.hasBackend
       ? [
-          '- `mage -v build:backend` to build the plugin backend code. Rerun this command every time you edit your backend files.',
+          `- ${getBackendCmd()} 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.',
@@ -34,3 +36,12 @@ _Note: We strongly recommend creating a new Git repository by running \`git init
 
   console.log(displayAsMarkdown(msg));
 }
+
+function getBackendCmd() {
+  const platform = machine();
+  if (platform === 'arm64') {
+    return '`mage -v build:linuxARM64`';
+  }
+
+  return '`mage -v build:linux`';
+}

packages/create-plugin/src/commands/generate/prompt-user.ts

@@ -7,13 +7,13 @@ export async function promptUser(argv: minimist.ParsedArgs) {
   let answers: Partial<GenerateCliArgs> = {};
   const enquirer = new Enquirer();
 
-  for (const prompt of prompts) {
-    const { name, shouldPrompt } = prompt;
+  for (const p of prompts) {
+    const prompt = p(answers);
 
-    if (argv.hasOwnProperty(name)) {
-      answers = { ...answers, [name]: argv[name] };
+    if (argv.hasOwnProperty(prompt.name)) {
+      answers = { ...answers, [prompt.name]: argv[prompt.name] };
     } else {
-      if (typeof shouldPrompt === 'function' && !shouldPrompt(answers)) {
+      if (typeof prompt.shouldPrompt === 'function' && !prompt.shouldPrompt(answers)) {
         continue;
       } else {
         const result = await enquirer.prompt(prompt);
@@ -36,7 +36,7 @@ type Prompt = {
 };
 
 type Choice = {
-  name: string;
+  name?: string;
   message?: string;
   value?: unknown;
   hint?: string;
@@ -45,58 +45,64 @@ type Choice = {
   disabled?: boolean | string;
 };
 
-const prompts: Prompt[] = [
-  {
+const prompts: Array<(answers: Partial<GenerateCliArgs>) => Prompt> = [
+  () => ({
+    name: 'pluginType',
+    type: 'select',
+    choices: [
+      {
+        message: 'App (Custom pages, UI Extensions and bundling other plugins)',
+        value: PLUGIN_TYPES.app,
+      },
+      {
+        message: 'Data source (Query data from a custom source)',
+        value: PLUGIN_TYPES.datasource,
+      },
+      {
+        message: 'Panel (New visualization for data or a widget)',
+        value: PLUGIN_TYPES.panel,
+      },
+      {
+        message: 'App with Scenes (Create dynamic dashboards in app pages)',
+        value: PLUGIN_TYPES.scenes,
+      },
+    ],
+    message: 'Select a plugin type',
+  }),
+  (answers) => {
+    const isAppType = answers.pluginType === PLUGIN_TYPES.app || answers.pluginType === PLUGIN_TYPES.scenes;
+    const message = isAppType
+      ? 'Does your plugin require a backend to support server-side functionality (calling external APIs, custom backend logic, advanced authentication, etc)?'
+      : 'Does your plugin require a backend to support server-side functionality (alerting, advanced authentication, public dashboards, etc)?';
+
+    return {
+      name: 'hasBackend',
+      type: 'confirm',
+      message: message,
+      initial: false,
+      shouldPrompt: (answers) => answers.pluginType !== PLUGIN_TYPES.panel,
+    };
+  },
+  () => ({
     name: 'pluginName',
     type: 'input',
-    message: 'What is going to be the name of your plugin?',
+    message: 'Enter a name for your plugin',
     validate: (value: string) => {
       if (/.+/.test(value)) {
         return true;
       }
       return 'Plugin name is required';
     },
-  },
-  {
+  }),
+  () => ({
     name: 'orgName',
     type: 'input',
-    message: 'What is the organization name of your plugin?',
+    message: 'Enter your organization name (usually your Grafana Cloud org)',
     validate: (value: string) => {
       if (/.+/.test(value)) {
         return true;
       }
       return 'Organization name is required';
     },
-  },
-  {
-    name: 'pluginDescription',
-    type: 'input',
-    message: 'How would you describe your plugin?',
-    initial: '',
-  },
-  {
-    name: 'pluginType',
-    type: 'select',
-    choices: [PLUGIN_TYPES.app, PLUGIN_TYPES.datasource, PLUGIN_TYPES.panel, PLUGIN_TYPES.scenes],
-    message: 'What type of plugin would you like?',
-  },
-  {
-    name: 'hasBackend',
-    type: 'confirm',
-    message: 'Do you want a backend part of your plugin?',
-    initial: false,
-    shouldPrompt: (answers) => answers.pluginType !== PLUGIN_TYPES.panel,
-  },
-  {
-    name: 'hasGithubWorkflows',
-    type: 'confirm',
-    message: 'Do you want to add Github CI and Release workflows?',
-    initial: false,
-  },
-  {
-    name: 'hasGithubLevitateWorkflow',
-    type: 'confirm',
-    message: 'Do you want to add a Github workflow for automatically checking "Grafana API compatibility" on PRs?',
-    initial: false,
-  },
+  }),
 ];

packages/create-plugin/src/commands/generate/update-go-sdk-and-packages.ts

@@ -20,14 +20,15 @@ export async function updateGoSdkAndModules(exportPath: string) {
   }
 
   try {
+    const version = await getLatestSdkVersion(exportPath);
     await updateSdk(exportPath);
     await updateGoMod(exportPath);
+    return `Updated Grafana go sdk to ${version} (latest)`;
   } catch {
     throw new Error(
       'There was an error trying to update the grafana go sdk. Please run `go get github.com/grafana/grafana-plugin-sdk-go` manually in your plugin directory.'
     );
   }
-  return 'Grafana go sdk updated successfully.';
 }
 
 function updateSdk(exportPath: string): Promise<void> {
@@ -55,3 +56,17 @@ function updateGoMod(exportPath: string): Promise<void> {
     });
   });
 }
+
+function getLatestSdkVersion(exportPath: string): Promise<string> {
+  return new Promise(async (resolve, reject) => {
+    // run go list SDK_GO_MODULE@latest to get the latest version number
+    const command = `go list -m -json ${SDK_GO_MODULE}@latest`;
+    exec(command, { cwd: exportPath }, (error, stdout) => {
+      if (error) {
+        reject();
+      }
+      const version = JSON.parse(stdout).Version;
+      resolve(version);
+    });
+  });
+}

packages/create-plugin/src/constants.ts

@@ -27,15 +27,16 @@ export const TEMPLATE_PATHS: Record<string, string> = {
   common: path.join(TEMPLATES_DIR, 'common'),
   datasource: path.join(TEMPLATES_DIR, 'datasource'),
   panel: path.join(TEMPLATES_DIR, 'panel'),
-  ciWorkflows: path.join(TEMPLATES_DIR, 'github', 'ci'),
+  ciWorkflows: path.join(TEMPLATES_DIR, '.github'),
   isCompatibleWorkflow: path.join(TEMPLATES_DIR, 'github', 'is-compatible'),
 };
 
 export enum PLUGIN_TYPES {
   app = 'app',
   panel = 'panel',
   datasource = 'datasource',
-  secretsmanager = 'secretsmanager',
+  // TODO: Don't understand why this is here. Cannot create a secretsmanager or a renderer.
+  // secretsmanager = 'secretsmanager',
   scenes = 'scenesapp',
 }