Website: Use docusaurus/npm2yarn plugin (#1440)

docusaurus/docs/e2e-test-a-plugin/get-started.md

@@ -13,12 +13,8 @@ keywords:
 sidebar_position: 2
 ---
 
-import ScaffoldPluginE2EStartGrafanaNPM from '@snippets/plugin-e2e-start-grafana.npm.md';
-import ScaffoldPluginE2EStartGrafanaPNPM from '@snippets/plugin-e2e-start-grafana.pnpm.md';
-import ScaffoldPluginE2EStartGrafanaYarn from '@snippets/plugin-e2e-start-grafana.yarn.md';
-import ScaffoldPluginE2ERunTestsNPM from '@snippets/plugin-e2e-run-tests.npm.md';
-import ScaffoldPluginE2ERunTestsPNPM from '@snippets/plugin-e2e-run-tests.pnpm.md';
-import ScaffoldPluginE2ERunTestsYarn from '@snippets/plugin-e2e-run-tests.yarn.md';
+import ScaffoldPluginE2EStartGrafanaNPM from '@shared/plugin-e2e-start-grafana.md';
+import ScaffoldPluginE2ERunTestsNPM from '@shared/plugin-e2e-run-tests.md';
 
 The [create-plugin](https://www.npmjs.com/package/@grafana/create-plugin?activeTab=readme) tool automatically scaffolds the basic setup for `@grafana/plugin-e2e` to help you easily get started with end-to-end testing in your plugin. This guide walks you through the basic usage of running Playwright tests with `@grafana/plugin-e2e`.
 
@@ -38,15 +34,7 @@ You need to have the following:
 
 Start up the latest version of Grafana on your local machine like this:
 
-<CodeSnippets
-snippets={[
-{ component: ScaffoldPluginE2EStartGrafanaNPM, label: 'npm' },
-{ component: ScaffoldPluginE2EStartGrafanaYarn, label: 'yarn' },
-{ component: ScaffoldPluginE2EStartGrafanaPNPM, label: 'pnpm' }
-]}
-groupId="package-manager"
-queryString="current-package-manager"
-/>
+<ScaffoldPluginE2EStartGrafanaNPM />
 
 If you want to start a specific version of Grafana, you can do that by specifying the `GRAFANA_VERSION` environment variable. For example:
 
@@ -58,15 +46,7 @@ GRAFANA_VERSION=10.4.1 npm run server
 
 Open a new terminal and run the test script from within your local plugin development directory.
 
-<CodeSnippets
-snippets={[
-{ component: ScaffoldPluginE2ERunTestsNPM, label: 'npm' },
-{ component: ScaffoldPluginE2ERunTestsYarn, label: 'yarn' },
-{ component: ScaffoldPluginE2ERunTestsPNPM, label: 'pnpm' }
-]}
-groupId="package-manager"
-queryString="current-package-manager"
-/>
+<ScaffoldPluginE2ERunTestsNPM />
 
 ### Step 3: Run tests in CI
 

docusaurus/docs/e2e-test-a-plugin/migrate-from-grafana-e2e.md

@@ -13,11 +13,7 @@ keywords:
 sidebar_position: 90
 ---
 
-import Tabs from '@theme/Tabs';
-import TabItem from '@theme/TabItem';
-import ScaffoldPluginE2InstallNPM from '@snippets/plugin-e2e-install.npm.md';
-import ScaffoldPluginE2EInstallPNPM from '@snippets/plugin-e2e-install.pnpm.md';
-import ScaffoldPluginE2EInstallYarn from '@snippets/plugin-e2e-install.yarn.md';
+import ScaffoldPluginE2InstallNPM from '@shared/plugin-e2e-install.md';
 
 :::danger
 With the release of Grafana 11.0.0 the [`@grafana/e2e`](https://www.npmjs.com/package/@grafana/e2e) package has been deprecated and support has been dropped. We recommend all plugin authors to migrate their end-to-end tests to use Playwright and `@grafana/plugin-e2e` instead of Cypress and `@grafana/e2e`.
@@ -42,15 +38,7 @@ The `@grafana/plugin-e2e` tool extends Playwright APIs, so you need to have `@pl
 
 Open the terminal and run the following command in your plugin's project directory:
 
-<CodeSnippets
-snippets={[
-{ component: ScaffoldPluginE2InstallNPM, label: 'npm' },
-{ component: ScaffoldPluginE2EInstallYarn, label: 'yarn' },
-{ component: ScaffoldPluginE2EInstallPNPM, label: 'pnpm' }
-]}
-groupId="package-manager"
-queryString="current-package-manager"
-/>
+<ScaffoldPluginE2InstallNPM />
 
 ### Step 3: Configure Playwright
 

docusaurus/docs/get-started/get-started.mdx

@@ -11,18 +11,10 @@ keywords:
 slug: /
 ---
 
-import ScaffoldNPM from '@snippets/createplugin-scaffold.npm.md';
-import ScaffoldPNPM from '@snippets/createplugin-scaffold.pnpm.md';
-import ScaffoldYarn from '@snippets/createplugin-scaffold.yarn.md';
-import InstallNPM from '@snippets/createplugin-install.npm.md';
-import InstallPNPM from '@snippets/createplugin-install.pnpm.md';
-import InstallYarn from '@snippets/createplugin-install.yarn.md';
-import BuildFEDevNPM from '@snippets/createplugin-build-fe-dev.npm.md';
-import BuildFEDevPNPM from '@snippets/createplugin-build-fe-dev.pnpm.md';
-import BuildFEDevYarn from '@snippets/createplugin-build-fe-dev.yarn.md';
-import BuildFEProdNPM from '@snippets/createplugin-build-fe-prod.npm.md';
-import BuildFEProdPNPM from '@snippets/createplugin-build-fe-prod.pnpm.md';
-import BuildFEProdYarn from '@snippets/createplugin-build-fe-prod.yarn.md';
+import ScaffoldNPM from '@shared/createplugin-scaffold.md';
+import InstallNPM from '@shared/createplugin-install.md';
+import BuildFEDevNPM from '@shared/createplugin-build-fe-dev.md';
+import BuildFEProdNPM from '@shared/createplugin-build-fe-prod.md';
 
 # Get started
 
@@ -36,15 +28,7 @@ Welcome to the world of Grafana plugin creation, where you can enhance Grafana's
 
 Scaffold a new plugin with a single command! Run the following and answer the prompts:
 
-<CodeSnippets
-  snippets={[
-    { component: ScaffoldNPM, label: 'npm' },
-    { component: ScaffoldPNPM, label: 'pnpm' },
-    { component: ScaffoldYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<ScaffoldNPM />
 
 ## Why create a Grafana plugin?
 
@@ -119,15 +103,7 @@ The Yarn commands on this website are compatible with Yarn Berry (>=2.0.0). If y
 
 Run the following command and answer the prompts:
 
-<CodeSnippets
-  snippets={[
-    { component: ScaffoldNPM, label: 'npm' },
-    { component: ScaffoldPNPM, label: 'pnpm' },
-    { component: ScaffoldYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<ScaffoldNPM />
 
 For help with the prompts, refer to the [CLI commands](../reference/cli-commands.mdx).
 
@@ -206,41 +182,17 @@ Note: We strongly recommend creating a new Git repository by running git init in
 
 ### Install dependencies
 
-<CodeSnippets
-  snippets={[
-    { component: InstallNPM, label: 'npm' },
-    { component: InstallPNPM, label: 'pnpm' },
-    { component: InstallYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<InstallNPM />
 
 ### Build the frontend
 
 To build the plugin in watch mode for development, continually monitoring for changes, run:
 
-<CodeSnippets
-  snippets={[
-    { component: BuildFEDevNPM, label: 'npm' },
-    { component: BuildFEDevPNPM, label: 'pnpm' },
-    { component: BuildFEDevYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<BuildFEDevNPM />
 
 To build for production, run:
 
-<CodeSnippets
-  snippets={[
-    { component: BuildFEProdNPM, label: 'npm' },
-    { component: BuildFEProdPNPM, label: 'pnpm' },
-    { component: BuildFEProdYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<BuildFEProdNPM />
 
 ### Build the backend
 

docusaurus/docs/get-started/set-up-development-environment.mdx

@@ -15,9 +15,7 @@ description: Set up your development environment with Docker for Grafana plugin
 sidebar_position: 20
 ---
 
-import DockerNPM from '@snippets/docker-grafana-version.npm.md';
-import DockerPNPM from '@snippets/docker-grafana-version.pnpm.md';
-import DockerYarn from '@snippets/docker-grafana-version.yarn.md';
+import DockerNPM from '@shared/docker-grafana-version.md';
 
 This guide walks you through setting up your development environment for Grafana plugin development. Including:
 
@@ -57,15 +55,7 @@ To start your plugin development project, run the following commands in the orde
 
 To test a plugin across different versions of Grafana, set an environment variable. Use `GRAFANA_VERSION` to set the Grafana version:
 
-<CodeSnippets
-  snippets={[
-    { component: DockerNPM, label: 'npm' },
-    { component: DockerPNPM, label: 'pnpm' },
-    { component: DockerYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<DockerNPM />
 
 ### Configure the Grafana image
 

docusaurus/docs/how-to-guides/app-plugins/work-with-nested-plugins.md

@@ -12,10 +12,6 @@ keywords:
   - nested
 ---
 
-import ScaffoldNPM from '@snippets/createplugin-scaffold.npm.md';
-import ScaffoldPNPM from '@snippets/createplugin-scaffold.pnpm.md';
-import ScaffoldYarn from '@snippets/createplugin-scaffold.yarn.md';
-
 Grafana app plugins can nest data sources, both frontend and backend, together with panel plugins so that you can provide a complete user experience.
 
 ## Before you begin

docusaurus/docs/migration-guides/migrate-from-toolkit.mdx

@@ -12,9 +12,7 @@ keywords:
   - migrating
 ---
 
-import MigrateNPM from '@snippets/createplugin-migrate.npm.md';
-import MigratePNPM from '@snippets/createplugin-migrate.pnpm.md';
-import MigrateYarn from '@snippets/createplugin-migrate.yarn.md';
+import MigrateNPM from '@shared/createplugin-migrate.md';
 
 The `@grafana/toolkit` tool is now [deprecated](https://grafana.com/docs/grafana/next/breaking-changes/breaking-changes-v10-0/#grafanatoolkit-cli-commands-have-been-removed-and-migrated-to-the-create-plugin-package). If you are still using `@grafana/toolkit` to scaffold and develop plugins, follow this guide to make the jump to our newest plugin tools.
 
@@ -36,15 +34,7 @@ Our plugin tools use ReactJS. We [do not support](https://grafana.com/docs/grafa
 
 1. In the root directory of the existing plugin (where the `package.json` file is), run the following command.
 
-<CodeSnippets
-  snippets={[
-    { component: MigrateNPM, label: 'npm' },
-    { component: MigratePNPM, label: 'pnpm' },
-    { component: MigrateYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<MigrateNPM />
 
 1. Follow the prompts that appear. Refer to the list below for details about each potential prompt.
 

docusaurus/docs/publish-a-plugin/package-a-plugin.md

@@ -13,25 +13,15 @@ keywords:
   - packages
 ---
 
-import BuildNPM from '@snippets/createplugin-build-ci.npm.md';
-import BuildPNPM from '@snippets/createplugin-build-ci.pnpm.md';
-import BuildYarn from '@snippets/createplugin-build-ci.yarn.md';
+import BuildNPM from '@shared/createplugin-build-ci.md';
 
 # Package a plugin
 
 Package a plugin to organize the plugin code and make it ready for use in your organization. Follow these steps to package the plugin in a ZIP file.
 
 1. Build the plugin
 
-   <CodeSnippets
-   snippets={[
-   { component: BuildNPM, label: 'npm' },
-   { component: BuildPNPM, label: 'pnpm' },
-   { component: BuildYarn, label: 'yarn' },
-   ]}
-   groupId="package-manager"
-   queryString="current-package-manager"
-   />
+   <BuildNPM />
 
 1. Optional: If your data source plugin has a backend plugin, build it as well.
 

docusaurus/docs/reference/cli-commands.mdx

@@ -12,33 +12,19 @@ keywords:
 sidebar_position: 40
 ---
 
-import ScaffoldNPM from '@snippets/createplugin-scaffold.npm.md';
-import ScaffoldPNPM from '@snippets/createplugin-scaffold.pnpm.md';
-import ScaffoldYarn from '@snippets/createplugin-scaffold.yarn.md';
-import UpdateNPM from '@snippets/createplugin-update.npm.md';
-import UpdatePNPM from '@snippets/createplugin-update.pnpm.md';
-import UpdateYarn from '@snippets/createplugin-update.yarn.md';
-import UpdateForceNPM from '@snippets/createplugin-update-force.npm.md';
-import UpdateForcePNPM from '@snippets/createplugin-update-force.pnpm.md';
-import UpdateForceYarn from '@snippets/createplugin-update-force.yarn.md';
+import ScaffoldNPM from '@shared/createplugin-scaffold.md';
+import UpdateNPM from '@shared/createplugin-update.md';
+import UpdateForceNPM from '@shared/createplugin-update-force.md';
 
 # CLI commands
 
 Below you can find the available commands in `@grafana/create-plugin`.
 
-## create-plugin 
+## create-plugin
 
 Use the `create-plugin` command to scaffold your plugin.
 
-<CodeSnippets
-  snippets={[
-    { component: ScaffoldNPM, label: 'npm' },
-    { component: ScaffoldPNPM, label: 'pnpm' },
-    { component: ScaffoldYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<ScaffoldNPM />
 
 
 When running the `create-plugin` command, the following prompts appear:
@@ -81,7 +67,7 @@ Enter the name of your organization. This must be your [Grafana Cloud](https://g
 
 ### Bypass prompts
 
-You can bypass all the preceding prompts by using `create-plugin` CLI arguments. 
+You can bypass all the preceding prompts by using `create-plugin` CLI arguments.
 To scaffold a plugin with the CLI arguments, pass them to the `create-plugin` command like so:
 
 ```
@@ -108,15 +94,7 @@ Refer to the following table for the full list of prompt bypass options:
 
 To update an existing plugin to use the latest version of the `create-plugin` tool, run the following command from your plugin's root directory:
 
-<CodeSnippets
-  snippets={[
-    { component: UpdateNPM, label: 'npm' },
-    { component: UpdatePNPM, label: 'pnpm' },
-    { component: UpdateYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<UpdateNPM />
 
 This command updates the following:
 * **`/.config`** - configuration files for building a plugin
@@ -127,13 +105,5 @@ This command updates the following:
 
 By default, the `update` command will stop if there are any uncommitted changes in the repository. If you want to force the update, you can use the `--force` flag:
 
-<CodeSnippets
-  snippets={[
-    { component: UpdateForceNPM, label: 'npm' },
-    { component: UpdateForcePNPM, label: 'pnpm' },
-    { component: UpdateForceYarn, label: 'yarn' },
-  ]}
-  groupId="package-manager"
-  queryString="current-package-manager"
-/>
+<UpdateForceNPM />
 

docusaurus/docs/shared/_migrate-to-react-router-v6.mdx

@@ -1,6 +1,4 @@
-import UpdateNPM from '@snippets/createplugin-update.npm.md';
-import UpdatePNPM from '@snippets/createplugin-update.pnpm.md';
-import UpdateYarn from '@snippets/createplugin-update.yarn.md';
+import UpdateNPM from '@shared/createplugin-update.md';
 
 ## Update to React Router v6
 
@@ -28,15 +26,7 @@ Enable using `react-router@v6` by setting the following feature flag in `<projec
 
 Now update the build configuration using the create-plugin tool:
 
-<CodeSnippets
-snippets={[
-{ component: UpdateNPM, label: 'npm' },
-{ component: UpdatePNPM, label: 'pnpm' },
-{ component: UpdateYarn, label: 'yarn' },
-]}
-groupId="package-manager"
-queryString="current-package-manager"
-/>
+<UpdateNPM />
 
 After updating the build configuration, it is likely that you will need to make additional updates to your plugin. To do so, follow the steps below:
 
@@ -72,4 +62,4 @@ return (
 
 #### 4. Follow the original `react-router` migration guide for more in-depth changes
 
-Visit the [official react-router v5 to v6 migration guide](https://reactrouter.com/en/main/upgrading/v5) for more information.
+Visit the [official react-router v5 to v6 migration guide](https://reactrouter.com/en/main/upgrading/v5) for more information.

docusaurus/docs/snippets/createplugin-build-ci.npm.md → docusaurus/docs/shared/createplugin-build-ci.md

@@ -1,4 +1,4 @@
-```shell
+```shell npm2yarn
 npm ci
 npm run build
 ```

docusaurus/docs/shared/createplugin-build-fe-dev.md

@@ -0,0 +1,3 @@
+```shell npm2yarn
+npm run dev
+```