React 19 compatibility for Grafana 13

Externalize react/jsx-runtime and react/jsx-dev-runtime so the plugin
works with React 19 in Grafana 13.

Closes #169

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: Platane

.config/bundler/externals.ts

@@ -0,0 +1,50 @@
+/*
+ * ⚠️⚠️⚠️ THIS FILE WAS SCAFFOLDED BY `@grafana/create-plugin`. DO NOT EDIT THIS FILE DIRECTLY. ⚠️⚠️⚠️
+ *
+ */
+
+import type { Configuration, ExternalItemFunctionData } from 'webpack';
+
+type ExternalsType = Configuration['externals'];
+
+export const externals: ExternalsType = [
+  // Required for dynamic publicPath resolution
+  { 'amd-module': 'module' },
+  'lodash',
+  'jquery',
+  'moment',
+  'slate',
+  'emotion',
+  '@emotion/react',
+  '@emotion/css',
+  'prismjs',
+  'slate-plain-serializer',
+  '@grafana/slate-react',
+  'react',
+  'react/jsx-runtime',
+  'react/jsx-dev-runtime',
+  'react-dom',
+  'react-redux',
+  'redux',
+  'rxjs',
+  'i18next',
+  'react-router',
+  'd3',
+  'angular',
+  /^@grafana\/ui/i,
+  /^@grafana\/runtime/i,
+  /^@grafana\/data/i,
+
+  // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
+  ({ request }: ExternalItemFunctionData, callback: (error?: Error, result?: string) => void) => {
+    const prefix = 'grafana/';
+    const hasPrefix = (request: string) => request.indexOf(prefix) === 0;
+    const stripPrefix = (request: string) => request.slice(prefix.length);
+
+    if (request && hasPrefix(request)) {
+      return callback(undefined, stripPrefix(request));
+    }
+
+    callback();
+  },
+];

.config/webpack/webpack.config.ts

@@ -16,6 +16,8 @@ import { Configuration } from 'webpack';
 import { getPackageJson, getPluginJson, hasReadme, getEntries, isWSL } from './utils';
 import { SOURCE_DIR, DIST_DIR } from './constants';
 
+import { externals } from '../bundler/externals.ts';
+
 const pluginJson = getPluginJson();
 
 const config = async (env): Promise<Configuration> => {
@@ -33,43 +35,7 @@ const config = async (env): Promise<Configuration> => {
 
     entry: await getEntries(),
 
-    externals: [
-      'lodash',
-      'jquery',
-      'moment',
-      'slate',
-      'emotion',
-      '@emotion/react',
-      '@emotion/css',
-      'prismjs',
-      'slate-plain-serializer',
-      '@grafana/slate-react',
-      'react',
-      'react-dom',
-      'react-redux',
-      'redux',
-      'rxjs',
-      'react-router',
-      'react-router-dom',
-      'd3',
-      'angular',
-      '@grafana/ui',
-      '@grafana/runtime',
-      '@grafana/data',
-
-      // Mark legacy SDK imports as external if their name starts with the "grafana/" prefix
-      ({ request }, callback) => {
-        const prefix = 'grafana/';
-        const hasPrefix = (request) => request.indexOf(prefix) === 0;
-        const stripPrefix = (request) => request.substr(prefix.length);
-
-        if (hasPrefix(request)) {
-          return callback(undefined, stripPrefix(request));
-        }
-
-        callback();
-      },
-    ],
+    externals,
 
     mode: env.production ? 'production' : 'development',
 

QA_CHECKLIST.md

@@ -0,0 +1,56 @@
+# QA Checklist — Quickwit Grafana Datasource Plugin
+
+## Plugin-owned UI areas
+
+### Config Editor (`/connections/datasources/edit/<uid>`)
+
+- [ ] **Index settings section**
+  - [ ] Index ID field accepts input and saves
+  - [ ] Message field name field accepts input and saves
+  - [ ] Log level field accepts input and saves
+- [ ] **Editor settings section**
+  - [ ] Default logs limit field accepts input and saves
+- [ ] **Data links section**
+  - [ ] Can add a data link
+  - [ ] Can remove a data link
+- [ ] **Save & test** validates connection to Quickwit and reports success/failure
+
+### Query Editor — Explore view (`/explore`)
+
+- [ ] **Query type tabs**
+  - [ ] Metrics tab loads metric aggregation options
+  - [ ] Logs tab loads log query options
+  - [ ] Raw Data tab loads raw query options
+- [ ] **Lucene Query input**
+  - [ ] Can type a query
+  - [ ] Autocomplete works (Ctrl+Space)
+  - [ ] Shift+Enter runs the query
+- [ ] **Logs config row**
+  - [ ] Tail count is configurable
+  - [ ] Sort direction is configurable
+- [ ] **Results**
+  - [ ] Logs volume histogram renders with data
+  - [ ] Log rows render in the Logs panel
+  - [ ] Table view toggle works
+  - [ ] "Scan for older logs" button works
+
+### Query Editor — Dashboard panels
+
+- [ ] **Metrics query type**
+  - [ ] Date histogram aggregation works
+  - [ ] Terms aggregation works
+  - [ ] Metric aggregations (avg, sum, count, etc.) work
+- [ ] **Logs query type** renders logs in panel
+- [ ] **Ad-hoc filters** can be added and filter results dynamically
+
+## Not owned by the plugin (Grafana built-in)
+
+These are rendered by Grafana itself and do not need plugin-level QA:
+
+- Sidebar navigation
+- Time picker
+- Log row rendering / expansion
+- Chart rendering (histogram, time series)
+- Search bar, breadcrumbs, header
+- Auth section in config (Basic auth, TLS, OAuth)
+- HTTP section in config (URL, Allowed cookies, Timeout)

docker-compose.yaml

@@ -16,7 +16,8 @@ services:
     build:
       context: ./.config
       args:
-        grafana_version: 12.1.0
+        grafana_version: ${GRAFANA_VERSION:-12.1.0}
+        grafana_image: ${GRAFANA_IMAGE:-grafana-oss}
     ports:
       - 3000:3000/tcp
     volumes:

src/components/QueryEditor/ElasticsearchQueryContext.tsx

@@ -50,7 +50,7 @@ export const ElasticsearchProvider = withStore(({
   app,
   datasource,
   range,
-}: PropsWithChildren<Props>): JSX.Element => {
+}: PropsWithChildren<Props>): React.JSX.Element => {
 
   const storeDispatch = useDispatch();
   useEffect(()=>{