@grafana/create-plugin 3.2.0-canary.710.bf8a22d.0 → 3.2.0

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v3.2.0 (Thu Feb 01 2024)
+
+#### 🚀 Enhancement
+
+- Create-plugin: Check for a clean working tree [#705](https://github.com/grafana/plugin-tools/pull/705) ([@leventebalogh](https://github.com/leventebalogh))
+
+#### Authors: 1
+
+- Levente Balogh ([@leventebalogh](https://github.com/leventebalogh))
+
+---
+
 # v3.1.3 (Mon Jan 29 2024)
 
 #### 🐛 Bug Fix

package/dist/bin/run.js

@@ -7,7 +7,7 @@ if (isUnsupportedPlatform()) {
     process.exit(1);
 }
 const args = process.argv.slice(2);
-const argv = minimist(args);
+const argv = minimist(args, { alias: { f: 'force' } });
 const commands = {
     migrate,
     generate,

package/dist/commands/generate.command.js

@@ -57,9 +57,6 @@ function getTemplateData(answers) {
         isNPM: packageManagerName === 'npm',
         version: currentVersion,
         bundleGrafanaUI: features.bundleGrafanaUI,
-        useReactRouterV6: features.useReactRouterV6,
-        useReactRouterTypes: !features.useReactRouterV6 && isAppType,
-        reactRouterVersion: features.useReactRouterV6 ? '6.10.0' : '5.2.0',
     };
     return templateData;
 }

package/dist/commands/update.command.js

@@ -1,10 +1,30 @@
+import chalk from 'chalk';
 import { TEXT, UDPATE_CONFIG } from '../constants.js';
 import { compileTemplateFiles, getTemplateData } from '../utils/utils.templates.js';
-import { confirmPrompt, selectPrompt, printMessage, printSuccessMessage } from '../utils/utils.console.js';
+import { confirmPrompt, selectPrompt, printMessage, printSuccessMessage, printRedBox } from '../utils/utils.console.js';
 import { updatePackageJson, hasNpmDependenciesToUpdate, getPackageJsonUpdatesAsText, updateNpmScripts, writePackageManagerInPackageJson, } from '../utils/utils.npm.js';
 import { getPackageManagerWithFallback } from '../utils/utils.packageManager.js';
-export const update = async () => {
+import { isGitDirectory, isGitDirectoryClean } from '../utils/utils.git.js';
+export const update = async (argv) => {
     try {
+        if (!(await isGitDirectory()) && !argv.force) {
+            printRedBox({
+                title: 'You are not inside a git directory',
+                content: `In order to proceed please run "git init" in the root of your project and commit your changes.\n
+(This check is necessary to make sure that the updates are easy to revert and don't mess with any changes you currently have.
+In case you want to proceed as is please use the ${chalk.bold('--force')} flag.)`,
+            });
+            process.exit(1);
+        }
+        if (!(await isGitDirectoryClean()) && !argv.force) {
+            printRedBox({
+                title: 'Please clean your repository working tree before updating.',
+                subtitle: '(Commit your changes or stash them.)',
+                content: `(This check is necessary to make sure that the updates are easy to revert and don't mess with any changes you currently have.
+In case you want to proceed as is please use the ${chalk.bold('--force')} flag.)`,
+            });
+            process.exit(1);
+        }
         printMessage(TEXT.updateCommandWarning);
         if (await confirmPrompt(TEXT.updateConfigPrompt)) {
             compileTemplateFiles(UDPATE_CONFIG.filesToOverride, getTemplateData());

package/dist/utils/utils.config.js

@@ -51,7 +51,6 @@ function readRCFileSync(path) {
 }
 function createFeatureFlags(flags) {
     return {
-        useReactRouterV6: true,
         bundleGrafanaUI: false,
         ...flags,
     };

package/dist/utils/utils.console.js

@@ -1,5 +1,6 @@
 import { marked } from 'marked';
 import chalk from 'chalk';
+import boxen from 'boxen';
 import TerminalRenderer from 'marked-terminal';
 import Enquirer from 'enquirer';
 const { prompt } = Enquirer;
@@ -40,3 +41,18 @@ export async function selectPrompt(message, choices) {
     });
     return question['selectPrompt'];
 }
+export function printRedBox({ title, subtitle, content }) {
+    printBox({ title, subtitle, content, color: 'red' });
+}
+export function printBlueBox({ title, subtitle, content }) {
+    printBox({ title, subtitle, content, color: 'blue' });
+}
+export function printGreenBox({ title, subtitle, content }) {
+    printBox({ title, subtitle, content, color: 'green' });
+}
+export function printBox({ title, subtitle, content, color = 'gray' }) {
+    console.log(boxen(chalk[color](`${chalk.bold(title)}${subtitle ? ` ${subtitle}` : ''}\n\n${content}`), {
+        padding: 1,
+        borderColor: color,
+    }));
+}

package/dist/utils/utils.git.js

@@ -0,0 +1,23 @@
+import { exec as nodeExec } from 'node:child_process';
+import { promisify } from 'node:util';
+const exec = promisify(nodeExec);
+export async function isGitDirectory() {
+    let command = 'git rev-parse --is-inside-work-tree';
+    try {
+        const response = await exec(command);
+        return response.stdout.trim() === 'true';
+    }
+    catch (error) {
+        return false;
+    }
+}
+export async function isGitDirectoryClean() {
+    try {
+        let command = 'git status --porcelain';
+        const response = await exec(command);
+        return response.stdout.trim() === '';
+    }
+    catch (error) {
+        return false;
+    }
+}

package/dist/utils/utils.templates.js

@@ -5,7 +5,7 @@ import mkdirp from 'mkdirp';
 import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
 import { renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
-import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES } from '../constants.js';
+import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES } from '../constants.js';
 import { getPackageManagerWithFallback } from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
@@ -69,8 +69,5 @@ export function getTemplateData() {
         packageManagerVersion,
         version: currentVersion,
         bundleGrafanaUI: features.bundleGrafanaUI,
-        useReactRouterV6: features.useReactRouterV6,
-        useReactRouterTypes: !features.useReactRouterV6 && pluginJson.type === PLUGIN_TYPES.app,
-        reactRouterVersion: features.useReactRouterV6 ? '6.10.0' : '5.2.0',
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/create-plugin",
-  "version": "3.2.0-canary.710.bf8a22d.0",
+  "version": "3.2.0",
   "repository": {
     "directory": "packages/create-plugin",
     "url": "https://github.com/grafana/plugin-tools"
@@ -45,6 +45,7 @@
     "@types/mkdirp": "^1.0.2",
     "@types/semver": "^7.3.9",
     "@types/which": "^2.0.2",
+    "boxen": "^7.1.1",
     "chalk": "^5.3.0",
     "change-case": "^5.4.0",
     "enquirer": "^2.4.1",
@@ -85,5 +86,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "bf8a22d5f036def42859142642737ddf1c935f4b"
+  "gitHead": "96e111bfcc9615a97c3085f16646d1bb76f5ddb4"
 }

package/src/bin/run.ts

@@ -13,7 +13,7 @@ if (isUnsupportedPlatform()) {
 }
 
 const args = process.argv.slice(2);
-const argv = minimist(args);
+const argv = minimist(args, { alias: { f: 'force' } });
 const commands: Record<string, (argv: minimist.ParsedArgs) => void> = {
   migrate,
   generate,

package/src/commands/generate.command.ts

@@ -69,9 +69,6 @@ function getTemplateData(answers: CliArgs) {
     isNPM: packageManagerName === 'npm',
     version: currentVersion,
     bundleGrafanaUI: features.bundleGrafanaUI,
-    useReactRouterV6: features.useReactRouterV6,
-    useReactRouterTypes: !features.useReactRouterV6 && isAppType, // v6 is written in typescript, so it's only needed for <v6
-    reactRouterVersion: features.useReactRouterV6 ? '6.10.0' : '5.2.0',
   };
 
   return templateData;

package/src/commands/types.ts

@@ -19,7 +19,4 @@ export type TemplateData = {
   isNPM: boolean;
   version: string;
   bundleGrafanaUI: boolean;
-  useReactRouterV6: boolean;
-  useReactRouterTypes: boolean;
-  reactRouterVersion: string;
 };

package/src/commands/update.command.ts

@@ -1,6 +1,8 @@
+import minimist from 'minimist';
+import chalk from 'chalk';
 import { TEXT, UDPATE_CONFIG } from '../constants.js';
 import { compileTemplateFiles, getTemplateData } from '../utils/utils.templates.js';
-import { confirmPrompt, selectPrompt, printMessage, printSuccessMessage } from '../utils/utils.console.js';
+import { confirmPrompt, selectPrompt, printMessage, printSuccessMessage, printRedBox } from '../utils/utils.console.js';
 import {
   updatePackageJson,
   hasNpmDependenciesToUpdate,
@@ -9,9 +11,32 @@ import {
   writePackageManagerInPackageJson,
 } from '../utils/utils.npm.js';
 import { getPackageManagerWithFallback } from '../utils/utils.packageManager.js';
+import { isGitDirectory, isGitDirectoryClean } from '../utils/utils.git.js';
 
-export const update = async () => {
+export const update = async (argv: minimist.ParsedArgs) => {
   try {
+    if (!(await isGitDirectory()) && !argv.force) {
+      printRedBox({
+        title: 'You are not inside a git directory',
+        content: `In order to proceed please run "git init" in the root of your project and commit your changes.\n
+(This check is necessary to make sure that the updates are easy to revert and don't mess with any changes you currently have.
+In case you want to proceed as is please use the ${chalk.bold('--force')} flag.)`,
+      });
+
+      process.exit(1);
+    }
+
+    if (!(await isGitDirectoryClean()) && !argv.force) {
+      printRedBox({
+        title: 'Please clean your repository working tree before updating.',
+        subtitle: '(Commit your changes or stash them.)',
+        content: `(This check is necessary to make sure that the updates are easy to revert and don't mess with any changes you currently have.
+In case you want to proceed as is please use the ${chalk.bold('--force')} flag.)`,
+      });
+
+      process.exit(1);
+    }
+
     // 0. Warning
     // ----------
     printMessage(TEXT.updateCommandWarning);

package/src/utils/utils.config.ts

@@ -4,10 +4,6 @@ import { getVersion } from './utils.version.js';
 
 type FeatureFlags = {
   bundleGrafanaUI: boolean;
-
-  // If set to true, the plugin will be scaffolded with React Router v6. Defaults to true.
-  // (Attention! We always scaffold new projects with React Router v6, so if you are changing this to `false` manually you will need to make changes to the React code as well.)
-  useReactRouterV6: boolean;
 };
 
 type CreatePluginConfig = UserConfig & {
@@ -70,7 +66,6 @@ function readRCFileSync(path: string): CreatePluginConfig | undefined {
 
 function createFeatureFlags(flags?: FeatureFlags): FeatureFlags {
   return {
-    useReactRouterV6: true,
     bundleGrafanaUI: false,
     ...flags,
   };

package/src/utils/utils.console.ts

@@ -1,5 +1,6 @@
 import { marked } from 'marked';
-import chalk from 'chalk';
+import chalk, { type ForegroundColorName } from 'chalk';
+import boxen from 'boxen';
 import TerminalRenderer from 'marked-terminal';
 import Enquirer from 'enquirer';
 
@@ -51,3 +52,31 @@ export async function selectPrompt(message: string, choices: string[]): Promise<
 
   return question['selectPrompt'];
 }
+
+type PrintBoxArgs = {
+  title: string;
+  content: string;
+  subtitle?: string;
+  color?: ForegroundColorName;
+};
+
+export function printRedBox({ title, subtitle, content }: PrintBoxArgs) {
+  printBox({ title, subtitle, content, color: 'red' });
+}
+
+export function printBlueBox({ title, subtitle, content }: PrintBoxArgs) {
+  printBox({ title, subtitle, content, color: 'blue' });
+}
+
+export function printGreenBox({ title, subtitle, content }: PrintBoxArgs) {
+  printBox({ title, subtitle, content, color: 'green' });
+}
+
+export function printBox({ title, subtitle, content, color = 'gray' }: PrintBoxArgs) {
+  console.log(
+    boxen(chalk[color](`${chalk.bold(title)}${subtitle ? ` ${subtitle}` : ''}\n\n${content}`), {
+      padding: 1,
+      borderColor: color,
+    })
+  );
+}

package/src/utils/utils.git.ts

@@ -0,0 +1,29 @@
+import { exec as nodeExec } from 'node:child_process';
+import { promisify } from 'node:util';
+
+const exec = promisify(nodeExec);
+
+export async function isGitDirectory() {
+  let command = 'git rev-parse --is-inside-work-tree';
+
+  try {
+    const response = await exec(command);
+
+    return response.stdout.trim() === 'true';
+  } catch (error) {
+    // We also return `false` if the command fails (e.g. if the user doesn't have git installed)
+    return false;
+  }
+}
+
+export async function isGitDirectoryClean() {
+  try {
+    let command = 'git status --porcelain';
+    const response = await exec(command);
+
+    return response.stdout.trim() === '';
+  } catch (error) {
+    // We also return `false` if the command fails (e.g. if the user doesn't have git installed)
+    return false;
+  }
+}

package/src/utils/utils.templates.ts

@@ -5,7 +5,7 @@ import mkdirp from 'mkdirp';
 import { filterOutCommonFiles, isFile, isFileStartingWith } from './utils.files.js';
 import { renderHandlebarsTemplate } from './utils.handlebars.js';
 import { getPluginJson } from './utils.plugin.js';
-import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES, PLUGIN_TYPES } from '../constants.js';
+import { TEMPLATE_PATHS, EXPORT_PATH_PREFIX, EXTRA_TEMPLATE_VARIABLES } from '../constants.js';
 import { getPackageManagerWithFallback } from './utils.packageManager.js';
 import { getExportFileName } from '../utils/utils.files.js';
 import { getVersion } from './utils.version.js';
@@ -97,8 +97,5 @@ export function getTemplateData() {
     packageManagerVersion,
     version: currentVersion,
     bundleGrafanaUI: features.bundleGrafanaUI,
-    useReactRouterV6: features.useReactRouterV6,
-    useReactRouterTypes: !features.useReactRouterV6 && pluginJson.type === PLUGIN_TYPES.app, // v6 is written in typescript, so it's only needed for <v6
-    reactRouterVersion: features.useReactRouterV6 ? '6.10.0' : '5.2.0',
   };
 }

package/templates/app/src/components/App/App.tsx

@@ -1,20 +1,21 @@
 import React from 'react';
-import { Route, Routes } from 'react-router-dom';
+import { Route, Switch } from 'react-router-dom';
 import { AppRootProps } from '@grafana/data';
 import { ROUTES } from '../../constants';
 import { PageFour, PageOne, PageThree, PageTwo } from '../../pages';
+import { prefixRoute } from '../../utils/utils.routing';
 
 export function App(props: AppRootProps) {
   return (
-      <Routes>
-        <Route path={ROUTES.Two} element={<PageTwo />} />
-        <Route path={`${ROUTES.Three}/:id?`} element={<PageThree />} />
+      <Switch>
+        <Route exact path={prefixRoute(ROUTES.Two)} component={PageTwo} />
+        <Route exact path={prefixRoute(`${ROUTES.Three}/:id?`)} component={PageThree} />
 
         {/* Full-width page (this page will have no side navigation) */}
-        <Route path={ROUTES.Four} element={<PageFour />} />
+        <Route exact path={prefixRoute(ROUTES.Four)} component={PageFour} />
 
         {/* Default page */}
-        <Route path="*" element={<PageOne />} />
-      </Routes>
+        <Route component={PageOne} />
+      </Switch>
   );
 }

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

@@ -49,8 +49,8 @@ const config = async (env): Promise<Configuration> => {
       'react-redux',
       'redux',
       'rxjs',
-      'react-router',{{#unless useReactRouterV6}}
-      'react-router-dom',{{/unless}}
+      'react-router',
+      'react-router-dom',
       'd3',
       'angular',{{#unless bundleGrafanaUI}}
       '@grafana/ui',{{/unless}}

package/templates/common/.cprc.json

@@ -2,7 +2,5 @@
   "features": {
     {{#if bundleGrafanaUI}}
     "bundleGrafanaUI": true{{/if}}
-    {{#if useReactRouterV6}}
-    "useReactRouterV6": true{{/if}}
   }
 }

package/templates/common/_package.json

@@ -30,8 +30,8 @@
     "@testing-library/react": "14.0.0",
     "@types/jest": "^29.5.0",
     "@types/lodash": "^4.14.194",
-    "@types/node": "^20.8.7",{{#if useReactRouterTypes}}
-    "@types/react-router-dom": "^{{ reactRouterVersion }}",{{/if}}
+    "@types/node": "^20.8.7",{{#if isAppType}}
+    "@types/react-router-dom": "^5.3.3",{{/if}}
     "@types/testing-library__jest-dom": "5.14.8",
     "copy-webpack-plugin": "^11.0.0",
     "css-loader": "^6.7.3",
@@ -67,7 +67,7 @@
     "@grafana/scenes": "^1.28.0",{{/if_eq}}
     "react": "18.2.0",
     "react-dom": "18.2.0",{{#if isAppType}}
-    "react-router-dom": "^{{ reactRouterVersion }}",
+    "react-router-dom": "5.3.3",
     "rxjs": "7.8.0",{{/if}}
     "tslib": "2.5.3"
   },

package/templates/scenes-app/src/components/Routes/Routes.tsx

@@ -1,22 +1,20 @@
 import React from 'react';
-import { Route, Routes as ReactRoutes } from 'react-router-dom';
+import { Redirect, Route, Switch } from 'react-router-dom';
 import { HomePage } from '../../pages/Home';
 import { PageWithTabs } from '../../pages/WithTabs';
 import { WithDrilldown } from '../../pages/WithDrilldown';
+import { prefixRoute } from '../../utils/utils.routing';
 import { ROUTES } from '../../constants';
 import { HelloWorldPluginPage } from '../../pages/HelloWorld';
- 
+
 export const Routes = () => {
   return (
-    // HEADS UP! We don't need a <BrowserRouter> here, as the core Grafana app already has a router.
-    <ReactRoutes>
-      {/* HEADS UP! We can use relative paths here now. */}
-      <Route path={ROUTES.WithTabs} element={<PageWithTabs />} />
-      <Route path={ROUTES.WithDrilldown} element={<WithDrilldown />} />
-      <Route path={ROUTES.Home} element={<HomePage />} />
-      <Route path={ROUTES.HelloWorld} element={<HelloWorldPluginPage />} />
-
-      <Route path="*" element={<HomePage />} />
-    </ReactRoutes>
+    <Switch>
+      <Route path={prefixRoute(`${ROUTES.WithTabs}`)} component={PageWithTabs} />
+      <Route path={prefixRoute(`${ROUTES.WithDrilldown}`)} component={WithDrilldown} />
+      <Route path={prefixRoute(`${ROUTES.Home}`)} component={HomePage} />
+      <Route path={prefixRoute(`${ROUTES.HelloWorld}`)} component={HelloWorldPluginPage} />
+      <Redirect to={prefixRoute(ROUTES.Home)} />
+    </Switch>
   );
 };