Bump supported grafana version to 10.4.8 and release 2.0.0 (#406)

Co-authored-by: Sriram <[email protected]>

Author: ivanahuckova

.config/.cprc.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.10.3"
+  "version": "5.12.4"
 }

.config/.eslintrc

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-eslint-config
+ * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-eslint-config
  */
 {
   "extends": ["@grafana/eslint-config"],
@@ -20,6 +20,12 @@
       "parserOptions": {
         "project": "./tsconfig.json"
       }
+    },
+    {
+      "files": ["./tests/**/*"],
+      "rules": {
+        "react-hooks/rules-of-hooks": "off",
+      },
     }
   ]
 }

.config/Dockerfile

@@ -3,17 +3,19 @@ ARG grafana_image=grafana-enterprise
 
 FROM grafana/${grafana_image}:${grafana_version}
 
-ARG development=true
+ARG anonymous_auth_enabled=true
+ARG development=false
+ARG TARGETARCH
 
 ARG GO_VERSION=1.21.6
-ARG GO_ARCH=amd64
+ARG GO_ARCH=${TARGETARCH:-amd64}
 
 ENV DEV "${development}"
 
 # Make it as simple as possible to access the grafana instance for development purposes
 # Do NOT enable these settings in a public facing / production grafana instance
 ENV GF_AUTH_ANONYMOUS_ORG_ROLE "Admin"
-ENV GF_AUTH_ANONYMOUS_ENABLED "true"
+ENV GF_AUTH_ANONYMOUS_ENABLED "${anonymous_auth_enabled}"
 ENV GF_AUTH_BASIC_ENABLED "false"
 # Set development mode so plugins can be loaded without the need to sign
 ENV GF_DEFAULT_APP_MODE "development"
@@ -29,14 +31,14 @@ USER root
 # Installing supervisor and inotify-tools
 RUN if [ "${development}" = "true" ]; then \
     if grep -i -q alpine /etc/issue; then \
-        apk add supervisor inotify-tools git; \
+    apk add supervisor inotify-tools git; \
     elif grep -i -q ubuntu /etc/issue; then \
-      DEBIAN_FRONTEND=noninteractive && \
-      apt-get update && \
-      apt-get install -y supervisor inotify-tools git && \
-      rm -rf /var/lib/apt/lists/*; \
+    DEBIAN_FRONTEND=noninteractive && \
+    apt-get update && \
+    apt-get install -y supervisor inotify-tools git && \
+    rm -rf /var/lib/apt/lists/*; \
     else \
-      echo 'ERROR: Unsupported base image' && /bin/false; \
+    echo 'ERROR: Unsupported base image' && /bin/false; \
     fi \
     fi
 

.config/README.md

@@ -159,6 +159,6 @@ services:
         grafana_image: ${GRAFANA_IMAGE:-grafana}
 ```
 
-In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker-compose commands, which might be convenient in some scenarios.
+In this example, we assign the environment variable `GRAFANA_IMAGE` to the build arg `grafana_image` with a default value of `grafana`. This will allow you to set the value while running the docker compose commands, which might be convenient in some scenarios.
 
 ---

.config/jest-setup.js

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config
+ * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
  */
 
 import '@testing-library/jest-dom';
@@ -13,7 +13,7 @@ Object.assign(global, { TextDecoder, TextEncoder });
 // https://jestjs.io/docs/manual-mocks#mocking-methods-which-are-not-implemented-in-jsdom
 Object.defineProperty(global, 'matchMedia', {
   writable: true,
-  value: jest.fn().mockImplementation((query) => ({
+  value: (query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -22,7 +22,7 @@ Object.defineProperty(global, 'matchMedia', {
     addEventListener: jest.fn(),
     removeEventListener: jest.fn(),
     dispatchEvent: jest.fn(),
-  })),
+  }),
 });
 
 HTMLCanvasElement.prototype.getContext = () => {};

.config/jest.config.js

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-jest-config
+ * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-jest-config
  */
 
 const path = require('path');

.config/tsconfig.json

@@ -2,7 +2,7 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-typescript-config
+ * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-typescript-config
  */
 {
   "compilerOptions": {

.config/webpack/BuildModeWebpackPlugin.ts

@@ -0,0 +1,33 @@
+import * as webpack from 'webpack';
+
+const PLUGIN_NAME = 'BuildModeWebpack';
+
+export class BuildModeWebpackPlugin {
+  apply(compiler: webpack.Compiler) {
+    compiler.hooks.compilation.tap(PLUGIN_NAME, (compilation) => {
+      compilation.hooks.processAssets.tap(
+        {
+          name: PLUGIN_NAME,
+          stage: webpack.Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
+        },
+        async () => {
+          const assets = compilation.getAssets();
+          for (const asset of assets) {
+            if (asset.name.endsWith('plugin.json')) {
+              const pluginJsonString = asset.source.source().toString();
+              const pluginJsonWithBuildMode = JSON.stringify(
+                {
+                  ...JSON.parse(pluginJsonString),
+                  buildMode: compilation.options.mode,
+                },
+                null,
+                4
+              );
+              compilation.updateAsset(asset.name, new webpack.sources.RawSource(pluginJsonWithBuildMode));
+            }
+          }
+        }
+      );
+    });
+  }
+}

.config/webpack/utils.ts

@@ -29,6 +29,11 @@ export function getPluginJson() {
   return require(path.resolve(process.cwd(), `${SOURCE_DIR}/plugin.json`));
 }
 
+export function getCPConfigVersion() {
+  const cprcJson = path.resolve(__dirname, '../', '.cprc.json');
+  return fs.existsSync(cprcJson) ? require(cprcJson).version : { version: 'unknown' };
+}
+
 export function hasReadme() {
   return fs.existsSync(path.resolve(process.cwd(), SOURCE_DIR, 'README.md'));
 }

.config/webpack/webpack.config.ts

@@ -2,22 +2,37 @@
  * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
  *
  * In order to extend the configuration follow the steps in
- * https://grafana.com/developers/plugin-tools/create-a-plugin/extend-a-plugin/extend-configurations#extend-the-webpack-config
+ * https://grafana.com/developers/plugin-tools/get-started/set-up-development-environment#extend-the-webpack-config
  */
 
 import CopyWebpackPlugin from 'copy-webpack-plugin';
 import ESLintPlugin from 'eslint-webpack-plugin';
 import ForkTsCheckerWebpackPlugin from 'fork-ts-checker-webpack-plugin';
-import LiveReloadPlugin from 'webpack-livereload-plugin';
 import path from 'path';
 import ReplaceInFileWebpackPlugin from 'replace-in-file-webpack-plugin';
-import { Configuration } from 'webpack';
-import { GrafanaPluginMetaExtractor } from '@grafana/plugin-meta-extractor';
+import TerserPlugin from 'terser-webpack-plugin';
+import { SubresourceIntegrityPlugin } from "webpack-subresource-integrity";
+import { type Configuration, BannerPlugin } from 'webpack';
+import LiveReloadPlugin from 'webpack-livereload-plugin';
+import VirtualModulesPlugin from 'webpack-virtual-modules';
 
-import { getPackageJson, getPluginJson, hasReadme, getEntries, isWSL } from './utils';
-import { SOURCE_DIR, DIST_DIR } from './constants';
+import { BuildModeWebpackPlugin } from './BuildModeWebpackPlugin';
+import { DIST_DIR, SOURCE_DIR } from './constants';
+import { getCPConfigVersion, getEntries, getPackageJson, getPluginJson, hasReadme, isWSL } from './utils';
 
 const pluginJson = getPluginJson();
+const cpVersion = getCPConfigVersion();
+
+const virtualPublicPath = new VirtualModulesPlugin({
+  'node_modules/grafana-public-path.js': `
+import amdMetaModule from 'amd-module';
+
+__webpack_public_path__ =
+  amdMetaModule && amdMetaModule.uri
+    ? amdMetaModule.uri.slice(0, amdMetaModule.uri.lastIndexOf('/') + 1)
+    : 'public/plugins/${pluginJson.id}/';
+`,
+});
 
 const config = async (env): Promise<Configuration> => {
   const baseConfig: Configuration = {
@@ -35,6 +50,8 @@ const config = async (env): Promise<Configuration> => {
     entry: await getEntries(),
 
     externals: [
+      // Required for dynamic publicPath resolution
+      { 'amd-module': 'module' },
       'lodash',
       'jquery',
       'moment',
@@ -72,18 +89,35 @@ const config = async (env): Promise<Configuration> => {
       },
     ],
 
+    // Support WebAssembly according to latest spec - makes WebAssembly module async
+    experiments: {
+      asyncWebAssembly: true,
+    },
+
     mode: env.production ? 'production' : 'development',
 
     module: {
       rules: [
+        // This must come first in the rules array otherwise it breaks sourcemaps.
+        {
+          test: /src\/(?:.*\/)?module\.tsx?$/,
+          use: [
+            {
+              loader: 'imports-loader',
+              options: {
+                imports: `side-effects grafana-public-path`,
+              },
+            },
+          ],
+        },
         {
           exclude: /(node_modules)/,
           test: /\.[tj]sx?$/,
           use: {
             loader: 'swc-loader',
             options: {
               jsc: {
-                baseUrl: path.resolve(__dirname, 'src'),
+                baseUrl: path.resolve(process.cwd(), SOURCE_DIR),
                 target: 'es2015',
                 loose: false,
                 parser: {
@@ -108,40 +142,59 @@ 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]',
           },
         },
         {
           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]',
           },
         },
       ],
     },
 
+    optimization: {
+      minimize: Boolean(env.production),
+      minimizer: [
+        new TerserPlugin({
+          terserOptions: {
+            format: {
+              comments: (_, { type, value }) => type === 'comment2' && value.trim().startsWith('[create-plugin]'),
+            },
+            compress: {
+              drop_console: ['log', 'info']
+            }
+          },
+        }),
+      ],
+    },
+
     output: {
       clean: {
         keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
       },
       filename: '[name].js',
+      chunkFilename: env.production ? '[name].js?_cache=[contenthash]' : '[name].js',
       library: {
         type: 'amd',
       },
       path: path.resolve(process.cwd(), DIST_DIR),
       publicPath: `public/plugins/${pluginJson.id}/`,
       uniqueName: pluginJson.id,
+      crossOriginLoading: 'anonymous',
     },
 
     plugins: [
-      new GrafanaPluginMetaExtractor(),
+      new BuildModeWebpackPlugin(),
+      virtualPublicPath,
+      // Insert create plugin version information into the bundle
+      new BannerPlugin({
+        banner: "/* [create-plugin] version: " + cpVersion + " */",
+        raw: true,
+        entryOnly: true,
+      }),
       new CopyWebpackPlugin({
         patterns: [
           // If src/README.md exists use it; otherwise the root README
@@ -150,14 +203,14 @@ const config = async (env): Promise<Configuration> => {
           { from: 'plugin.json', to: '.' },
           { from: '../LICENSE', to: '.' },
           { from: '../CHANGELOG.md', to: '.', force: true },
-          { from: '**/*.json', to: '.' }, // TODO<Add an error for checking the basic structure of the repo>
-          { from: '**/*.svg', to: '.', noErrorOnMissing: true }, // Optional
-          { from: '**/*.png', to: '.', noErrorOnMissing: true }, // Optional
-          { from: '**/*.html', to: '.', noErrorOnMissing: true }, // Optional
-          { from: 'img/**/*', to: '.', noErrorOnMissing: true }, // Optional
-          { from: 'libs/**/*', to: '.', noErrorOnMissing: true }, // Optional
-          { from: 'static/**/*', to: '.', noErrorOnMissing: true }, // Optional
-          { from: '**/query_help.md', to: '.', noErrorOnMissing: true }, // Optional
+          { from: '**/*.json', to: '.' },
+          { from: '**/*.svg', to: '.', noErrorOnMissing: true },
+          { from: '**/*.png', to: '.', noErrorOnMissing: true },
+          { from: '**/*.html', to: '.', noErrorOnMissing: true },
+          { from: 'img/**/*', to: '.', noErrorOnMissing: true },
+          { from: 'libs/**/*', to: '.', noErrorOnMissing: true },
+          { from: 'static/**/*', to: '.', noErrorOnMissing: true },
+          { from: '**/query_help.md', to: '.', noErrorOnMissing: true },
         ],
       }),
       // Replace certain template-variables in the README and plugin.json
@@ -181,22 +234,23 @@ const config = async (env): Promise<Configuration> => {
           ],
         },
       ]),
-      ...(env.development
-        ? [
-            new LiveReloadPlugin(),
-            new ForkTsCheckerWebpackPlugin({
-              async: Boolean(env.development),
-              issue: {
-                include: [{ file: '**/*.{ts,tsx}' }],
-              },
-              typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
-            }),
-            new ESLintPlugin({
-              extensions: ['.ts', '.tsx'],
-              lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
-            }),
-          ]
-        : []),
+      new SubresourceIntegrityPlugin({
+        hashFuncNames: ["sha256"],
+      }),
+      ...(env.development ? [
+        new LiveReloadPlugin(),
+        new ForkTsCheckerWebpackPlugin({
+          async: Boolean(env.development),
+          issue: {
+            include: [{ file: '**/*.{ts,tsx}' }],
+          },
+          typescript: { configFile: path.join(process.cwd(), 'tsconfig.json') },
+        }),
+        new ESLintPlugin({
+          extensions: ['.ts', '.tsx'],
+          lintDirtyModulesOnly: Boolean(env.development), // don't lint on start, only lint changed files
+        }),
+      ] : []),
     ],
 
     resolve: {