chore: Upgrades to latest create-plugin

.config/.cprc.json

@@ -1,3 +1,3 @@
 {
-  "version": "4.10.5"
+  "version": "5.3.2"
 }

.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"],

.config/Dockerfile

@@ -4,9 +4,10 @@ ARG grafana_image=grafana-enterprise
 FROM grafana/${grafana_image}:${grafana_version}
 
 ARG development=false
+ARG TARGETARCH
 
 ARG GO_VERSION=1.21.6
-ARG GO_ARCH=amd64
+ARG GO_ARCH=${TARGETARCH:-amd64}
 
 ENV DEV "${development}"
 

.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';

.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/supervisord/supervisord.conf

@@ -5,7 +5,7 @@ user=root
 [program:grafana]
 user=root
 directory=/var/lib/grafana
-command=bash -c 'while [ ! -f /root/needleinajaystack-haystack-datasource/dist/gpx_haystack* ]; do sleep 1; done; /run.sh'
+command=bash -c 'while [ ! -f /root/needleinajaystack-haystack-datasource/dist/gpx_haystack_datasource* ]; do sleep 1; done; /run.sh'
 stdout_logfile=/dev/fd/1
 stdout_logfile_maxbytes=0
 redirect_stderr=true
@@ -15,7 +15,7 @@ autostart=true
 
 [program:delve]
 user=root
-command=/bin/bash -c 'pid=""; while [ -z "$pid" ]; do pid=$(pgrep -f gpx_haystack); done; /root/go/bin/dlv attach --api-version=2 --headless --continue --accept-multiclient --listen=:2345 $pid'
+command=/bin/bash -c 'pid=""; while [ -z "$pid" ]; do pid=$(pgrep -f gpx_haystack_datasource); done; /root/go/bin/dlv attach --api-version=2 --headless --continue --accept-multiclient --listen=:2345 $pid'
 stdout_logfile=/dev/fd/1
 stdout_logfile_maxbytes=0
 redirect_stderr=true

.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/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,35 @@
  * ⚠️⚠️⚠️ 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 { 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 { 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 +48,8 @@ const config = async (env): Promise<Configuration> => {
     entry: await getEntries(),
 
     externals: [
+      // Required for dynamic publicPath resolution
+      { 'amd-module': 'module' },
       'lodash',
       'jquery',
       'moment',
@@ -72,18 +87,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,25 +140,32 @@ 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]'),
+            },
+          },
+        }),
+      ],
+    },
+
     output: {
       clean: {
         keep: new RegExp(`(.*?_(amd64|arm(64)?)(.exe)?|go_plugin_build_manifest)`),
@@ -141,7 +180,13 @@ const config = async (env): Promise<Configuration> => {
     },
 
     plugins: [
-      new GrafanaPluginMetaExtractor(),
+      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

.cprc.json

@@ -0,0 +1,6 @@
+{
+  "features": {
+    "bundleGrafanaUI": false,
+    "useReactRouterV6": false
+  }
+}

package.json

@@ -7,10 +7,10 @@
     "dev": "webpack -w -c ./.config/webpack/webpack.config.ts --env development",
     "e2e": "yarn exec cypress install && yarn exec grafana-e2e run",
     "e2e:update": "yarn exec cypress install && yarn exec grafana-e2e run --update-screenshots",
-    "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx src/**/*.{ts,tsx}",
+    "lint": "eslint --cache --ignore-path ./.gitignore --ext .js,.jsx,.ts,.tsx .",
     "lint:fix": "yarn run lint --fix",
     "prepare": "husky install",
-    "server": "docker-compose up --build",
+    "server": "docker compose up --build",
     "sign": "npx --yes @grafana/sign-plugin@latest",
     "test": "jest --watch --onlyChanged",
     "test:ci": "jest --passWithNoTests --maxWorkers 4",
@@ -29,7 +29,7 @@
     "@grafana/e2e-selectors": "10.3.5",
     "@grafana/eslint-config": "^7.0.0",
     "@grafana/plugin-meta-extractor": "^0.0.2",
-    "@grafana/tsconfig": "^1.2.0-rc1",
+    "@grafana/tsconfig": "^2.0.0",
     "@swc/core": "^1.3.90",
     "@swc/helpers": "^0.5.0",
     "@swc/jest": "^0.2.26",
@@ -70,18 +70,20 @@
     "typescript": "4.8.4",
     "webpack": "^5.86.0",
     "webpack-cli": "^5.1.4",
-    "webpack-livereload-plugin": "^3.0.2"
+    "webpack-livereload-plugin": "^3.0.2",
+    "imports-loader": "^5.0.0",
+    "webpack-virtual-modules": "^0.6.2"
   },
   "engines": {
     "node": ">=16"
   },
   "dependencies": {
     "@emotion/css": "11.10.6",
-    "@grafana/data": "10.3.3",
-    "@grafana/runtime": "10.3.3",
-    "@grafana/schema": "10.3.3",
+    "@grafana/data": "^11.1.4",
+    "@grafana/runtime": "^11.1.4",
+    "@grafana/schema": "^10.4.0",
     "@grafana/sign-plugin": "^1.0.1",
-    "@grafana/ui": "10.3.3",
+    "@grafana/ui": "^11.1.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "tslib": "2.5.3"

src/components/QueryEditor.tsx

@@ -1,8 +1,9 @@
 import React, {  } from 'react';
-import { Button, Form, VerticalGroup } from '@grafana/ui';
+import { useForm } from "react-hook-form";
+import { Button, Stack } from '@grafana/ui';
 import { QueryEditorProps } from '@grafana/data';
 import { DataSource } from '../datasource';
-import { HaystackDataSourceOptions, HaystackQuery } from '../types';
+import { DEFAULT_QUERY, HaystackDataSourceOptions, HaystackQuery } from '../types';
 import { HaystackQueryTypeSelector } from './HaystackQueryTypeSelector';
 import { HaystackQueryInput } from './HaystackQueryInput';
 
@@ -29,27 +30,27 @@ export function QueryEditor({ datasource, query, onChange, onRunQuery }: Props)
     onRunQuery();
   }
 
+  const { register, handleSubmit } = useForm({
+    defaultValues: DEFAULT_QUERY
+  });
+
   return (
     <div className="gf-form">
-      <Form onSubmit={onSubmit}>
-        {({ register, errors }) => {
-          return (
-            <VerticalGroup>
-              <HaystackQueryTypeSelector
-                datasource={datasource}
-                type={query.type}
-                refId={query.refId}
-                onChange={onTypeChange}
-              />
-              <HaystackQueryInput
-                query={query}
-                onChange={onQueryChange}
-              />
-              <Button type="submit" >Run</Button>
-            </VerticalGroup>
-          );
-        }}
-      </Form>
+      <form onSubmit={onSubmit}>
+        <Stack direction="column">
+          <HaystackQueryTypeSelector
+            datasource={datasource}
+            type={query.type}
+            refId={query.refId}
+            onChange={onTypeChange}
+          />
+          <HaystackQueryInput
+            query={query}
+            onChange={onQueryChange}
+          />
+          <Button type="submit" >Run</Button>
+        </Stack>
+      </form>
     </div>
   );
 }

src/datasource.ts

@@ -45,7 +45,7 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
 
     let ops: string[] = [];
 
-    let defField = frame?.fields?.find((field: Field<any, [string]>) => {
+    let defField = frame?.fields?.find((field: Field<[string]>) => {
       return field.name === 'def';
     });
     if (defField != null) {
@@ -58,7 +58,7 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
       });
     } else {
       // Include back-support for old `ops` format, which uses "name", not "defs". Used by nhaystack
-      let nameField = frame?.fields?.find((field: Field<any, [string]>) => {
+      let nameField = frame?.fields?.find((field: Field<[string]>) => {
         return field.name === 'name';
       });
       if (nameField != null) {
@@ -79,7 +79,7 @@ export class DataSource extends DataSourceWithBackend<HaystackQuery, HaystackDat
     return availableQueryTypes;
   }
 
-  applyTemplateVariables(query: HaystackQuery, scopedVars: ScopedVars): Record<string, any> {
+  applyTemplateVariables(query: HaystackQuery, scopedVars: ScopedVars): HaystackQuery {
     return {
       ...query,
       eval: getTemplateSrv().replace(query.eval, scopedVars, 'csv'),