@grafana/plugin-ui 0.17.0 → 0.17.1

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/inputs/fieldUtils.js

@@ -0,0 +1,138 @@
+import { parseDependsOn, formKey, evaluateDependsOn, getWatchedValue } from '../config.js';
+import { evaluateCelExpression } from '../cel.js';
+import { SECURE_FIELD_CONFIGURED } from '../datasource.js';
+
+function evaluateEffectCondition(when, fieldValue) {
+  var _a, _b;
+  const m = when.match(/^value\s*(==|!=)\s*(?:'([^']*)'|"([^"]*)"|(.+))$/);
+  if (!m) {
+    return false;
+  }
+  const op = m[1];
+  let target = (_b = (_a = m[2]) != null ? _a : m[3]) != null ? _b : m[4];
+  if (target === "true") {
+    target = true;
+  } else if (target === "false") {
+    target = false;
+  } else if (typeof target === "string" && /^-?\d+(\.\d+)?$/.test(target)) {
+    target = Number(target);
+  }
+  const eq = String(fieldValue) === String(target);
+  return op === "==" ? eq : !eq;
+}
+function isFieldRequired(field, watchedValues, fieldById, celContext) {
+  if (field.required) {
+    return true;
+  }
+  if (field.requiredWhen) {
+    if (celContext) {
+      return evaluateCelExpression(field.requiredWhen, celContext);
+    }
+    const parsed = parseDependsOn(field.requiredWhen);
+    if (parsed) {
+      const depField = fieldById.get(parsed.field);
+      const depKey = depField ? formKey(depField) : parsed.field;
+      return evaluateDependsOn(parsed, getWatchedValue(watchedValues, depKey));
+    }
+  }
+  return false;
+}
+function buildValidationRules(field, required) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const rules = {};
+  const label = (_a = field.label) != null ? _a : field.key;
+  if (required) {
+    if (field.target === "secureJsonData") {
+      rules.validate = (value) => {
+        if (value === SECURE_FIELD_CONFIGURED) {
+          return true;
+        }
+        if (!value || value === "") {
+          return `${label} is required`;
+        }
+        return true;
+      };
+    } else {
+      rules.required = `${label} is required`;
+    }
+  }
+  if (field.valueType === "array" && ((_b = field.item) == null ? void 0 : _b.valueType) === "object" && ((_c = field.item.fields) == null ? void 0 : _c.length)) {
+    const requiredItemFields = field.item.fields.filter((f) => f.required);
+    if (requiredItemFields.length > 0) {
+      const existingValidate = rules.validate;
+      rules.validate = (value) => {
+        var _a2;
+        if (existingValidate) {
+          const r = existingValidate(value);
+          if (r !== true) {
+            return r;
+          }
+        }
+        if (!Array.isArray(value)) {
+          return true;
+        }
+        const itemErrors = {};
+        for (let i = 0; i < value.length; i++) {
+          const item = value[i];
+          const missing = [];
+          for (const rf of requiredItemFields) {
+            const v = item[rf.key];
+            if (v === void 0 || v === null || v === "") {
+              missing.push((_a2 = rf.label) != null ? _a2 : rf.key);
+            }
+          }
+          if (missing.length > 0) {
+            itemErrors[i] = `${missing.join(", ")} required`;
+          }
+        }
+        if (Object.keys(itemErrors).length === 0) {
+          return true;
+        }
+        return `__ITEM_ERRORS__${JSON.stringify(itemErrors)}`;
+      };
+    }
+  }
+  if (field.validations) {
+    for (const v of field.validations) {
+      switch (v.type) {
+        case "pattern":
+          rules.pattern = {
+            value: new RegExp(v.pattern),
+            message: (_d = v.message) != null ? _d : `Invalid ${label}`
+          };
+          break;
+        case "range":
+          if (v.min !== void 0) {
+            rules.min = { value: v.min, message: (_e = v.message) != null ? _e : `Minimum value is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.max = { value: v.max, message: (_f = v.message) != null ? _f : `Maximum value is ${v.max}` };
+          }
+          break;
+        case "length":
+          if (v.min !== void 0) {
+            rules.minLength = { value: v.min, message: (_g = v.message) != null ? _g : `Minimum length is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.maxLength = { value: v.max, message: (_h = v.message) != null ? _h : `Maximum length is ${v.max}` };
+          }
+          break;
+      }
+    }
+  }
+  return rules;
+}
+const ITEM_ERRORS_PREFIX = "__ITEM_ERRORS__";
+function parseItemErrors(errorMessage) {
+  if (!errorMessage || !errorMessage.startsWith(ITEM_ERRORS_PREFIX)) {
+    return null;
+  }
+  try {
+    return JSON.parse(errorMessage.slice(ITEM_ERRORS_PREFIX.length));
+  } catch (e) {
+    return null;
+  }
+}
+
+export { buildValidationRules, evaluateEffectCondition, isFieldRequired, parseItemErrors };
+//# sourceMappingURL=fieldUtils.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/inputs/fieldUtils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fieldUtils.js","sources":["../../../../../../src/components/ConfigEditor/DatasourceConfigWizard/inputs/fieldUtils.ts"],"sourcesContent":["import { parseDependsOn, evaluateDependsOn, formKey, getWatchedValue } from '../config';\nimport { evaluateCelExpression } from '../cel';\nimport { SECURE_FIELD_CONFIGURED } from '../datasource';\nimport type { ConfigField } from '../../../../schema/schema';\n\n/**\n * Evaluate an effect's `when` condition against a field value.\n * Supports: \"value == 'literal'\", \"value == true\", \"value != 'literal'\"\n * The keyword `value` refers to the current value of the source field.\n */\nexport function evaluateEffectCondition(when: string, fieldValue: unknown): boolean {\n  const m = when.match(/^value\\s*(==|!=)\\s*(?:'([^']*)'|\"([^\"]*)\"|(.+))$/);\n  if (!m) {\n    return false;\n  }\n  const op = m[1];\n  let target: unknown = m[2] ?? m[3] ?? m[4];\n  if (target === 'true') {\n    target = true;\n  } else if (target === 'false') {\n    target = false;\n  } else if (typeof target === 'string' && /^-?\\d+(\\.\\d+)?$/.test(target)) {\n    target = Number(target);\n  }\n\n  const eq = String(fieldValue) === String(target);\n  return op === '==' ? eq : !eq;\n}\n\n/**\n * Evaluate whether a field is currently required, considering both the static\n * `required` flag and the conditional `requiredWhen` expression.\n */\nexport function isFieldRequired(\n  field: ConfigField,\n  watchedValues: Record<string, unknown>,\n  fieldById: Map<string, ConfigField>,\n  celContext?: Record<string, unknown>\n): boolean {\n  if (field.required) {\n    return true;\n  }\n  if (field.requiredWhen) {\n    // Use CEL evaluation if context is available (supports compound expressions)\n    if (celContext) {\n      return evaluateCelExpression(field.requiredWhen, celContext);\n    }\n    // Fallback to simple parser for backward compatibility\n    const parsed = parseDependsOn(field.requiredWhen);\n    if (parsed) {\n      const depField = fieldById.get(parsed.field);\n      const depKey = depField ? formKey(depField) : parsed.field;\n      return evaluateDependsOn(parsed, getWatchedValue(watchedValues, depKey));\n    }\n  }\n  return false;\n}\n\nexport function buildValidationRules(field: ConfigField, required: boolean) {\n  const rules: Record<string, unknown> = {};\n  const label = field.label ?? field.key;\n\n  if (required) {\n    if (field.target === 'secureJsonData') {\n      rules.validate = (value: unknown) => {\n        if (value === SECURE_FIELD_CONFIGURED) {\n          return true;\n        }\n        if (!value || value === '') {\n          return `${label} is required`;\n        }\n        return true;\n      };\n    } else {\n      rules.required = `${label} is required`;\n    }\n  }\n\n  // Validate required item fields inside object arrays.\n  // Returns a JSON-encoded map of {itemIndex: \"message\"} so ObjectArrayEditor\n  // can render errors inline per item. react-hook-form treats any non-true\n  // string as an error message.\n  if (field.valueType === 'array' && field.item?.valueType === 'object' && field.item.fields?.length) {\n    const requiredItemFields = field.item.fields.filter((f) => f.required);\n    if (requiredItemFields.length > 0) {\n      const existingValidate = rules.validate as ((v: unknown) => true | string) | undefined;\n      rules.validate = (value: unknown) => {\n        if (existingValidate) {\n          const r = existingValidate(value);\n          if (r !== true) {\n            return r;\n          }\n        }\n        if (!Array.isArray(value)) {\n          return true;\n        }\n        const itemErrors: Record<number, string> = {};\n        for (let i = 0; i < value.length; i++) {\n          const item = value[i] as Record<string, unknown>;\n          const missing: string[] = [];\n          for (const rf of requiredItemFields) {\n            const v = item[rf.key];\n            if (v === undefined || v === null || v === '') {\n              missing.push(rf.label ?? rf.key);\n            }\n          }\n          if (missing.length > 0) {\n            itemErrors[i] = `${missing.join(', ')} required`;\n          }\n        }\n        if (Object.keys(itemErrors).length === 0) {\n          return true;\n        }\n        // Encode as JSON so ObjectArrayEditor can parse and show per-item\n        return `__ITEM_ERRORS__${JSON.stringify(itemErrors)}`;\n      };\n    }\n  }\n\n  if (field.validations) {\n    for (const v of field.validations) {\n      switch (v.type) {\n        case 'pattern':\n          rules.pattern = {\n            value: new RegExp(v.pattern),\n            message: v.message ?? `Invalid ${label}`,\n          };\n          break;\n        case 'range':\n          if (v.min !== undefined) {\n            rules.min = { value: v.min, message: v.message ?? `Minimum value is ${v.min}` };\n          }\n          if (v.max !== undefined) {\n            rules.max = { value: v.max, message: v.message ?? `Maximum value is ${v.max}` };\n          }\n          break;\n        case 'length':\n          if (v.min !== undefined) {\n            rules.minLength = { value: v.min, message: v.message ?? `Minimum length is ${v.min}` };\n          }\n          if (v.max !== undefined) {\n            rules.maxLength = { value: v.max, message: v.message ?? `Maximum length is ${v.max}` };\n          }\n          break;\n      }\n    }\n  }\n\n  return rules;\n}\nconst ITEM_ERRORS_PREFIX = '__ITEM_ERRORS__';\n\n/**\n * Parse a per-item error message encoded by buildValidationRules.\n * Returns a map of item index → error message, or null if not an item error.\n */\nexport function parseItemErrors(errorMessage: string | undefined): Record<number, string> | null {\n  if (!errorMessage || !errorMessage.startsWith(ITEM_ERRORS_PREFIX)) {\n    return null;\n  }\n  try {\n    return JSON.parse(errorMessage.slice(ITEM_ERRORS_PREFIX.length));\n  } catch {\n    return null;\n  }\n}\n"],"names":["_a"],"mappings":";;;;AAUO,SAAS,uBAAA,CAAwB,MAAc,UAAA,EAA8B;AAVpF,EAAA,IAAA,EAAA,EAAA,EAAA;AAWE,EAAA,MAAM,CAAA,GAAI,IAAA,CAAK,KAAA,CAAM,kDAAkD,CAAA;AACvE,EAAA,IAAI,CAAC,CAAA,EAAG;AACN,IAAA,OAAO,KAAA;AAAA,EACT;AACA,EAAA,MAAM,EAAA,GAAK,EAAE,CAAC,CAAA;AACd,EAAA,IAAI,MAAA,GAAA,CAAkB,EAAA,GAAA,CAAA,EAAA,GAAA,CAAA,CAAE,CAAC,CAAA,KAAH,IAAA,GAAA,EAAA,GAAQ,EAAE,CAAC,CAAA,KAAX,IAAA,GAAA,EAAA,GAAgB,CAAA,CAAE,CAAC,CAAA;AACzC,EAAA,IAAI,WAAW,MAAA,EAAQ;AACrB,IAAA,MAAA,GAAS,IAAA;AAAA,EACX,CAAA,MAAA,IAAW,WAAW,OAAA,EAAS;AAC7B,IAAA,MAAA,GAAS,KAAA;AAAA,EACX,WAAW,OAAO,MAAA,KAAW,YAAY,iBAAA,CAAkB,IAAA,CAAK,MAAM,CAAA,EAAG;AACvE,IAAA,MAAA,GAAS,OAAO,MAAM,CAAA;AAAA,EACxB;AAEA,EAAA,MAAM,EAAA,GAAK,MAAA,CAAO,UAAU,CAAA,KAAM,OAAO,MAAM,CAAA;AAC/C,EAAA,OAAO,EAAA,KAAO,IAAA,GAAO,EAAA,GAAK,CAAC,EAAA;AAC7B;AAMO,SAAS,eAAA,CACd,KAAA,EACA,aAAA,EACA,SAAA,EACA,UAAA,EACS;AACT,EAAA,IAAI,MAAM,QAAA,EAAU;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI,MAAM,YAAA,EAAc;AAEtB,IAAA,IAAI,UAAA,EAAY;AACd,MAAA,OAAO,qBAAA,CAAsB,KAAA,CAAM,YAAA,EAAc,UAAU,CAAA;AAAA,IAC7D;AAEA,IAAA,MAAM,MAAA,GAAS,cAAA,CAAe,KAAA,CAAM,YAAY,CAAA;AAChD,IAAA,IAAI,MAAA,EAAQ;AACV,MAAA,MAAM,QAAA,GAAW,SAAA,CAAU,GAAA,CAAI,MAAA,CAAO,KAAK,CAAA;AAC3C,MAAA,MAAM,MAAA,GAAS,QAAA,GAAW,OAAA,CAAQ,QAAQ,IAAI,MAAA,CAAO,KAAA;AACrD,MAAA,OAAO,iBAAA,CAAkB,MAAA,EAAQ,eAAA,CAAgB,aAAA,EAAe,MAAM,CAAC,CAAA;AAAA,IACzE;AAAA,EACF;AACA,EAAA,OAAO,KAAA;AACT;AAEO,SAAS,oBAAA,CAAqB,OAAoB,QAAA,EAAmB;AA1D5E,EAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA,EAAA;AA2DE,EAAA,MAAM,QAAiC,EAAC;AACxC,EAAA,MAAM,KAAA,GAAA,CAAQ,EAAA,GAAA,KAAA,CAAM,KAAA,KAAN,IAAA,GAAA,EAAA,GAAe,KAAA,CAAM,GAAA;AAEnC,EAAA,IAAI,QAAA,EAAU;AACZ,IAAA,IAAI,KAAA,CAAM,WAAW,gBAAA,EAAkB;AACrC,MAAA,KAAA,CAAM,QAAA,GAAW,CAAC,KAAA,KAAmB;AACnC,QAAA,IAAI,UAAU,uBAAA,EAAyB;AACrC,UAAA,OAAO,IAAA;AAAA,QACT;AACA,QAAA,IAAI,CAAC,KAAA,IAAS,KAAA,KAAU,EAAA,EAAI;AAC1B,UAAA,OAAO,GAAG,KAAK,CAAA,YAAA,CAAA;AAAA,QACjB;AACA,QAAA,OAAO,IAAA;AAAA,MACT,CAAA;AAAA,IACF,CAAA,MAAO;AACL,MAAA,KAAA,CAAM,QAAA,GAAW,GAAG,KAAK,CAAA,YAAA,CAAA;AAAA,IAC3B;AAAA,EACF;AAMA,EAAA,IAAI,KAAA,CAAM,SAAA,KAAc,OAAA,IAAA,CAAA,CAAW,EAAA,GAAA,KAAA,CAAM,IAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAY,SAAA,MAAc,QAAA,KAAA,CAAY,EAAA,GAAA,KAAA,CAAM,IAAA,CAAK,MAAA,KAAX,IAAA,GAAA,MAAA,GAAA,EAAA,CAAmB,MAAA,CAAA,EAAQ;AAClG,IAAA,MAAM,kBAAA,GAAqB,MAAM,IAAA,CAAK,MAAA,CAAO,OAAO,CAAC,CAAA,KAAM,EAAE,QAAQ,CAAA;AACrE,IAAA,IAAI,kBAAA,CAAmB,SAAS,CAAA,EAAG;AACjC,MAAA,MAAM,mBAAmB,KAAA,CAAM,QAAA;AAC/B,MAAA,KAAA,CAAM,QAAA,GAAW,CAAC,KAAA,KAAmB;AAtF3C,QAAA,IAAAA,GAAAA;AAuFQ,QAAA,IAAI,gBAAA,EAAkB;AACpB,UAAA,MAAM,CAAA,GAAI,iBAAiB,KAAK,CAAA;AAChC,UAAA,IAAI,MAAM,IAAA,EAAM;AACd,YAAA,OAAO,CAAA;AAAA,UACT;AAAA,QACF;AACA,QAAA,IAAI,CAAC,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AACzB,UAAA,OAAO,IAAA;AAAA,QACT;AACA,QAAA,MAAM,aAAqC,EAAC;AAC5C,QAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,GAAI,KAAA,CAAM,QAAQ,CAAA,EAAA,EAAK;AACrC,UAAA,MAAM,IAAA,GAAO,MAAM,CAAC,CAAA;AACpB,UAAA,MAAM,UAAoB,EAAC;AAC3B,UAAA,KAAA,MAAW,MAAM,kBAAA,EAAoB;AACnC,YAAA,MAAM,CAAA,GAAI,IAAA,CAAK,EAAA,CAAG,GAAG,CAAA;AACrB,YAAA,IAAI,CAAA,KAAM,MAAA,IAAa,CAAA,KAAM,IAAA,IAAQ,MAAM,EAAA,EAAI;AAC7C,cAAA,OAAA,CAAQ,MAAKA,GAAAA,GAAA,EAAA,CAAG,UAAH,IAAA,GAAAA,GAAAA,GAAY,GAAG,GAAG,CAAA;AAAA,YACjC;AAAA,UACF;AACA,UAAA,IAAI,OAAA,CAAQ,SAAS,CAAA,EAAG;AACtB,YAAA,UAAA,CAAW,CAAC,CAAA,GAAI,CAAA,EAAG,OAAA,CAAQ,IAAA,CAAK,IAAI,CAAC,CAAA,SAAA,CAAA;AAAA,UACvC;AAAA,QACF;AACA,QAAA,IAAI,MAAA,CAAO,IAAA,CAAK,UAAU,CAAA,CAAE,WAAW,CAAA,EAAG;AACxC,UAAA,OAAO,IAAA;AAAA,QACT;AAEA,QAAA,OAAO,CAAA,eAAA,EAAkB,IAAA,CAAK,SAAA,CAAU,UAAU,CAAC,CAAA,CAAA;AAAA,MACrD,CAAA;AAAA,IACF;AAAA,EACF;AAEA,EAAA,IAAI,MAAM,WAAA,EAAa;AACrB,IAAA,KAAA,MAAW,CAAA,IAAK,MAAM,WAAA,EAAa;AACjC,MAAA,QAAQ,EAAE,IAAA;AAAM,QACd,KAAK,SAAA;AACH,UAAA,KAAA,CAAM,OAAA,GAAU;AAAA,YACd,KAAA,EAAO,IAAI,MAAA,CAAO,CAAA,CAAE,OAAO,CAAA;AAAA,YAC3B,OAAA,EAAA,CAAS,EAAA,GAAA,CAAA,CAAE,OAAA,KAAF,IAAA,GAAA,EAAA,GAAa,WAAW,KAAK,CAAA;AAAA,WACxC;AACA,UAAA;AAAA,QACF,KAAK,OAAA;AACH,UAAA,IAAI,CAAA,CAAE,QAAQ,MAAA,EAAW;AACvB,YAAA,KAAA,CAAM,GAAA,GAAM,EAAE,KAAA,EAAO,CAAA,CAAE,GAAA,EAAK,OAAA,EAAA,CAAS,EAAA,GAAA,CAAA,CAAE,OAAA,KAAF,IAAA,GAAA,EAAA,GAAa,CAAA,iBAAA,EAAoB,CAAA,CAAE,GAAG,CAAA,CAAA,EAAG;AAAA,UAChF;AACA,UAAA,IAAI,CAAA,CAAE,QAAQ,MAAA,EAAW;AACvB,YAAA,KAAA,CAAM,GAAA,GAAM,EAAE,KAAA,EAAO,CAAA,CAAE,GAAA,EAAK,OAAA,EAAA,CAAS,EAAA,GAAA,CAAA,CAAE,OAAA,KAAF,IAAA,GAAA,EAAA,GAAa,CAAA,iBAAA,EAAoB,CAAA,CAAE,GAAG,CAAA,CAAA,EAAG;AAAA,UAChF;AACA,UAAA;AAAA,QACF,KAAK,QAAA;AACH,UAAA,IAAI,CAAA,CAAE,QAAQ,MAAA,EAAW;AACvB,YAAA,KAAA,CAAM,SAAA,GAAY,EAAE,KAAA,EAAO,CAAA,CAAE,GAAA,EAAK,OAAA,EAAA,CAAS,EAAA,GAAA,CAAA,CAAE,OAAA,KAAF,IAAA,GAAA,EAAA,GAAa,CAAA,kBAAA,EAAqB,CAAA,CAAE,GAAG,CAAA,CAAA,EAAG;AAAA,UACvF;AACA,UAAA,IAAI,CAAA,CAAE,QAAQ,MAAA,EAAW;AACvB,YAAA,KAAA,CAAM,SAAA,GAAY,EAAE,KAAA,EAAO,CAAA,CAAE,GAAA,EAAK,OAAA,EAAA,CAAS,EAAA,GAAA,CAAA,CAAE,OAAA,KAAF,IAAA,GAAA,EAAA,GAAa,CAAA,kBAAA,EAAqB,CAAA,CAAE,GAAG,CAAA,CAAA,EAAG;AAAA,UACvF;AACA,UAAA;AAAA;AACJ,IACF;AAAA,EACF;AAEA,EAAA,OAAO,KAAA;AACT;AACA,MAAM,kBAAA,GAAqB,iBAAA;AAMpB,SAAS,gBAAgB,YAAA,EAAiE;AAC/F,EAAA,IAAI,CAAC,YAAA,IAAgB,CAAC,YAAA,CAAa,UAAA,CAAW,kBAAkB,CAAA,EAAG;AACjE,IAAA,OAAO,IAAA;AAAA,EACT;AACA,EAAA,IAAI;AACF,IAAA,OAAO,KAAK,KAAA,CAAM,YAAA,CAAa,KAAA,CAAM,kBAAA,CAAmB,MAAM,CAAC,CAAA;AAAA,EACjE,CAAA,CAAA,OAAQ,CAAA,EAAA;AACN,IAAA,OAAO,IAAA;AAAA,EACT;AACF;;;;"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/layoutParts.js

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Alert, LinkButton, Button } from '@grafana/ui';
+import { formKey } from './config.js';
+import { SchemaField } from './SchemaField.js';
+import { AuthorizationHeaderField } from './inputs/AuthorizationHeaderField.js';
+
+function GroupFields({
+  group,
+  form,
+  dsUid,
+  showAuthHeaders
+}) {
+  const {
+    control,
+    errors,
+    watchedValues,
+    fieldById,
+    celContext,
+    setValue,
+    isFieldVisible,
+    isFieldDisabled,
+    httpHeadersField,
+    submitting,
+    readOnly
+  } = form;
+  const allDisabled = submitting || readOnly;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, group.fields.filter(isFieldVisible).map((field) => /* @__PURE__ */ React.createElement(
+    SchemaField,
+    {
+      key: formKey(field),
+      field,
+      control,
+      errors,
+      disabled: allDisabled || isFieldDisabled(field),
+      dsUid,
+      watchedValues,
+      fieldById,
+      celContext,
+      setValue
+    }
+  )), showAuthHeaders && httpHeadersField && /* @__PURE__ */ React.createElement(
+    AuthorizationHeaderField,
+    {
+      headersFieldKey: formKey(httpHeadersField),
+      control,
+      disabled: allDisabled
+    }
+  ));
+}
+function FormFooter({
+  form,
+  schema,
+  dsUid,
+  dsName,
+  onRetest,
+  healthError,
+  renderActions,
+  saveDisabled,
+  className
+}) {
+  const { readOnly, submitting, submitError } = form;
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, submitError && /* @__PURE__ */ React.createElement(Alert, { severity: "error", title: "Error" }, submitError), /* @__PURE__ */ React.createElement("div", { className }, readOnly ? /* @__PURE__ */ React.createElement(Button, { variant: "primary", size: "sm", icon: "sync", onClick: onRetest, type: "button" }, "Test") : /* @__PURE__ */ React.createElement(Button, { variant: "primary", size: "sm", disabled: saveDisabled, type: "submit" }, submitting ? "Saving\u2026" : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError }))));
+}
+function FetchErrorState({
+  error,
+  dsUid,
+  buttonClassName
+}) {
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Alert, { severity: "error", title: "Failed to load configuration" }, error), /* @__PURE__ */ React.createElement("div", { className: buttonClassName }, /* @__PURE__ */ React.createElement(
+    LinkButton,
+    {
+      variant: "secondary",
+      size: "sm",
+      icon: "external-link-alt",
+      href: `/connections/datasources/edit/${dsUid}`
+    },
+    "Open datasource settings"
+  )));
+}
+
+export { FetchErrorState, FormFooter, GroupFields };
+//# sourceMappingURL=layoutParts.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/layoutParts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layoutParts.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/layoutParts.tsx"],"sourcesContent":["import React, { type ReactNode } from 'react';\nimport { Alert, Button, LinkButton } from '@grafana/ui';\nimport type { DatasourceConfigSchema } from '../../../schema/schema';\nimport { formKey, type ResolvedGroup } from './config';\nimport type { useDatasourceConfigForm } from './hooks/useDatasourceConfigForm';\nimport { SchemaField } from './SchemaField';\nimport { AuthorizationHeaderField } from './inputs/AuthorizationHeaderField';\n\ntype ConfigForm = ReturnType<typeof useDatasourceConfigForm>;\n\ntype RenderActions = (props: { dsUid: string; dsName: string; dsType: string; healthError?: string }) => ReactNode;\n\n/**\n * Renders the visible fields of a single group plus the optional Authorization\n * header editor. Shared by both the tab and wizard layouts so the field-render\n * contract lives in exactly one place.\n *\n * `showAuthHeaders` is passed in (rather than derived here) because the two\n * layouts intentionally use different predicates for when to show it.\n */\nexport function GroupFields({\n  group,\n  form,\n  dsUid,\n  showAuthHeaders,\n}: {\n  group: ResolvedGroup;\n  form: ConfigForm;\n  dsUid: string;\n  showAuthHeaders: boolean;\n}) {\n  const {\n    control,\n    errors,\n    watchedValues,\n    fieldById,\n    celContext,\n    setValue,\n    isFieldVisible,\n    isFieldDisabled,\n    httpHeadersField,\n    submitting,\n    readOnly,\n  } = form;\n  const allDisabled = submitting || readOnly;\n\n  return (\n    <>\n      {group.fields.filter(isFieldVisible).map((field) => (\n        <SchemaField\n          key={formKey(field)}\n          field={field}\n          control={control}\n          errors={errors}\n          disabled={allDisabled || isFieldDisabled(field)}\n          dsUid={dsUid}\n          watchedValues={watchedValues}\n          fieldById={fieldById}\n          celContext={celContext}\n          setValue={setValue}\n        />\n      ))}\n\n      {showAuthHeaders && httpHeadersField && (\n        <AuthorizationHeaderField\n          headersFieldKey={formKey(httpHeadersField)}\n          control={control}\n          disabled={allDisabled}\n        />\n      )}\n    </>\n  );\n}\n\n/**\n * Submit-error alert plus the Save/Test action row. `saveDisabled` and\n * `className` differ per layout (the wizard also gates on step validity and\n * uses its own button container).\n */\nexport function FormFooter({\n  form,\n  schema,\n  dsUid,\n  dsName,\n  onRetest,\n  healthError,\n  renderActions,\n  saveDisabled,\n  className,\n}: {\n  form: ConfigForm;\n  schema: DatasourceConfigSchema;\n  dsUid: string;\n  dsName: string;\n  onRetest?: () => void;\n  healthError?: string;\n  renderActions?: RenderActions;\n  saveDisabled: boolean;\n  className: string;\n}) {\n  const { readOnly, submitting, submitError } = form;\n\n  return (\n    <>\n      {submitError && (\n        <Alert severity=\"error\" title=\"Error\">\n          {submitError}\n        </Alert>\n      )}\n\n      <div className={className}>\n        {readOnly ? (\n          <Button variant=\"primary\" size=\"sm\" icon=\"sync\" onClick={onRetest} type=\"button\">\n            Test\n          </Button>\n        ) : (\n          <Button variant=\"primary\" size=\"sm\" disabled={saveDisabled} type=\"submit\">\n            {submitting ? 'Saving…' : 'Save & Test'}\n          </Button>\n        )}\n        {healthError && renderActions?.({ dsUid, dsName, dsType: schema.pluginType, healthError })}\n      </div>\n    </>\n  );\n}\n\n/**\n * \"Failed to load configuration\" state with a link to the native datasource\n * settings page. The outer container class differs per layout, so callers wrap\n * this; `buttonClassName` styles the link row.\n */\nexport function FetchErrorState({\n  error,\n  dsUid,\n  buttonClassName,\n}: {\n  error: string;\n  dsUid: string;\n  buttonClassName: string;\n}) {\n  return (\n    <>\n      <Alert severity=\"error\" title=\"Failed to load configuration\">\n        {error}\n      </Alert>\n      <div className={buttonClassName}>\n        <LinkButton\n          variant=\"secondary\"\n          size=\"sm\"\n          icon=\"external-link-alt\"\n          href={`/connections/datasources/edit/${dsUid}`}\n        >\n          Open datasource settings\n        </LinkButton>\n      </div>\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/resolvePluginName.js

@@ -0,0 +1,30 @@
+import { getDataSourceSrv } from '@grafana/runtime';
+
+let pluginNameCache = null;
+function buildPluginNameCache() {
+  var _a;
+  if (pluginNameCache) {
+    return pluginNameCache;
+  }
+  const map = /* @__PURE__ */ new Map();
+  try {
+    const list = getDataSourceSrv().getList();
+    for (const ds of list) {
+      if (((_a = ds.meta) == null ? void 0 : _a.name) && ds.type && !map.has(ds.type)) {
+        map.set(ds.type, ds.meta.name);
+      }
+    }
+  } catch (ex) {
+    console.error(ex);
+  }
+  pluginNameCache = map;
+  return map;
+}
+function resolvePluginName(pluginType) {
+  var _a;
+  const cache = buildPluginNameCache();
+  return (_a = cache.get(pluginType)) != null ? _a : pluginType;
+}
+
+export { resolvePluginName };
+//# sourceMappingURL=resolvePluginName.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/resolvePluginName.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"resolvePluginName.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/resolvePluginName.ts"],"sourcesContent":["import { getDataSourceSrv } from '@grafana/runtime';\n\nlet pluginNameCache: Map<string, string> | null = null;\n\nfunction buildPluginNameCache(): Map<string, string> {\n  if (pluginNameCache) {\n    return pluginNameCache;\n  }\n  const map = new Map<string, string>();\n  try {\n    const list = getDataSourceSrv().getList();\n    for (const ds of list) {\n      if (ds.meta?.name && ds.type && !map.has(ds.type)) {\n        map.set(ds.type, ds.meta.name);\n      }\n    }\n  } catch (ex) {\n    console.error(ex);\n  }\n  pluginNameCache = map;\n  return map;\n}\n\nexport function resolvePluginName(pluginType: string): string {\n  const cache = buildPluginNameCache();\n  return cache.get(pluginType) ?? pluginType;\n}\n"],"names":[],"mappings":";;AAEA,IAAI,eAAA,GAA8C,IAAA;AAElD,SAAS,oBAAA,GAA4C;AAJrD,EAAA,IAAA,EAAA;AAKE,EAAA,IAAI,eAAA,EAAiB;AACnB,IAAA,OAAO,eAAA;AAAA,EACT;AACA,EAAA,MAAM,GAAA,uBAAU,GAAA,EAAoB;AACpC,EAAA,IAAI;AACF,IAAA,MAAM,IAAA,GAAO,gBAAA,EAAiB,CAAE,OAAA,EAAQ;AACxC,IAAA,KAAA,MAAW,MAAM,IAAA,EAAM;AACrB,MAAA,IAAA,CAAA,CAAI,EAAA,GAAA,EAAA,CAAG,IAAA,KAAH,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAS,IAAA,KAAQ,EAAA,CAAG,IAAA,IAAQ,CAAC,GAAA,CAAI,GAAA,CAAI,EAAA,CAAG,IAAI,CAAA,EAAG;AACjD,QAAA,GAAA,CAAI,GAAA,CAAI,EAAA,CAAG,IAAA,EAAM,EAAA,CAAG,KAAK,IAAI,CAAA;AAAA,MAC/B;AAAA,IACF;AAAA,EACF,SAAS,EAAA,EAAI;AACX,IAAA,OAAA,CAAQ,MAAM,EAAE,CAAA;AAAA,EAClB;AACA,EAAA,eAAA,GAAkB,GAAA;AAClB,EAAA,OAAO,GAAA;AACT;AAEO,SAAS,kBAAkB,UAAA,EAA4B;AAvB9D,EAAA,IAAA,EAAA;AAwBE,EAAA,MAAM,QAAQ,oBAAA,EAAqB;AACnC,EAAA,OAAA,CAAO,EAAA,GAAA,KAAA,CAAM,GAAA,CAAI,UAAU,CAAA,KAApB,IAAA,GAAA,EAAA,GAAyB,UAAA;AAClC;;;;"}

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/styles.js

@@ -0,0 +1,128 @@
+import { css } from '@emotion/css';
+
+const overlayStyle = (theme) => ({
+  position: "absolute",
+  inset: 0,
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  gap: theme.spacing(1),
+  background: theme.colors.background.secondary,
+  borderRadius: theme.shape.radius.default,
+  zIndex: 1,
+  fontSize: theme.typography.bodySmall.fontSize,
+  color: theme.colors.text.primary,
+  opacity: 0.95
+});
+const readOnlyBannerStyle = (theme) => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: theme.spacing(0.5),
+  padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+  fontSize: theme.typography.bodySmall.fontSize,
+  color: theme.colors.text.secondary,
+  backgroundColor: theme.colors.background.secondary,
+  borderRadius: theme.shape.radius.default,
+  border: `1px solid ${theme.colors.border.weak}`
+});
+const getWizardStyles = (theme) => ({
+  container: css({
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(1),
+    padding: theme.spacing(1.5),
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`,
+    overflow: "hidden"
+  }),
+  overlay: css(overlayStyle(theme)),
+  readOnlyBanner: css(readOnlyBannerStyle(theme)),
+  navBar: css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  navTitle: css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    fontSize: theme.typography.body.fontSize,
+    fontWeight: theme.typography.fontWeightBold,
+    color: theme.colors.text.primary
+  }),
+  stepCount: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: theme.colors.text.secondary
+  }),
+  navActions: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.25)
+  }),
+  form: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.75)
+  }),
+  buttons: css({
+    display: "flex",
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.25)
+  })
+});
+const getFieldStyles = (theme) => ({
+  fieldRow: css({
+    display: "grid",
+    gridTemplateColumns: "minmax(80px, 1fr) minmax(0, 2fr)",
+    gap: theme.spacing(0.75),
+    alignItems: "start"
+  }),
+  fieldRowCenter: css({
+    display: "grid",
+    gridTemplateColumns: "minmax(80px, 1fr) minmax(0, 2fr)",
+    gap: theme.spacing(0.75),
+    alignItems: "center",
+    padding: `${theme.spacing(0.5)} 0`
+  }),
+  fieldLabelRow: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    paddingTop: theme.spacing(0.5)
+  }),
+  fieldLabelRowCompact: css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  }),
+  fieldLabel: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary
+  }),
+  fieldRequired: css({
+    color: theme.colors.error.text,
+    marginLeft: 2
+  }),
+  fieldInfoIcon: css({
+    color: theme.colors.text.disabled,
+    cursor: "help",
+    flexShrink: 0
+  }),
+  fieldInputCol: css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.25),
+    minWidth: 0
+  }),
+  fieldError: css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.error.text
+  })
+});
+
+export { getFieldStyles, getWizardStyles };
+//# sourceMappingURL=styles.js.map

package/dist/esm/components/ConfigEditor/DatasourceConfigWizard/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../src/components/ConfigEditor/DatasourceConfigWizard/styles.ts"],"sourcesContent":["import { css } from '@emotion/css';\nimport type { GrafanaTheme2 } from '@grafana/data';\n\n/** Centered saving/loading overlay. Identical in tab and wizard layouts. */\nconst overlayStyle = (theme: GrafanaTheme2) =>\n  ({\n    position: 'absolute',\n    inset: 0,\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    gap: theme.spacing(1),\n    background: theme.colors.background.secondary,\n    borderRadius: theme.shape.radius.default,\n    zIndex: 1,\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.primary,\n    opacity: 0.95,\n  }) as const;\n\n/** \"Read-only — managed externally\" banner. Tab layout adds a marginBottom. */\nconst readOnlyBannerStyle = (theme: GrafanaTheme2) =>\n  ({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.text.secondary,\n    backgroundColor: theme.colors.background.secondary,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n  }) as const;\n\nexport const getWizardStyles = (theme: GrafanaTheme2) => ({\n  container: css({\n    position: 'relative',\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(1),\n    padding: theme.spacing(1.5),\n    backgroundColor: theme.colors.background.secondary,\n    borderRadius: theme.shape.radius.default,\n    border: `1px solid ${theme.colors.border.weak}`,\n    overflow: 'hidden',\n  }),\n  overlay: css(overlayStyle(theme)),\n  readOnlyBanner: css(readOnlyBannerStyle(theme)),\n  navBar: css({\n    display: 'flex',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n  }),\n  navTitle: css({\n    display: 'inline-flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    fontSize: theme.typography.body.fontSize,\n    fontWeight: theme.typography.fontWeightBold,\n    color: theme.colors.text.primary,\n  }),\n  stepCount: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    fontWeight: theme.typography.fontWeightRegular,\n    color: theme.colors.text.secondary,\n  }),\n  navActions: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.25),\n  }),\n  form: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(0.75),\n  }),\n  buttons: css({\n    display: 'flex',\n    gap: theme.spacing(1),\n    paddingTop: theme.spacing(0.25),\n  }),\n});\n\n// Field-level styles shared by SchemaField and AuthorizationHeaderField, which\n// render in both the tab and wizard layouts (hence not tied to either one).\nexport const getFieldStyles = (theme: GrafanaTheme2) => ({\n  fieldRow: css({\n    display: 'grid',\n    gridTemplateColumns: 'minmax(80px, 1fr) minmax(0, 2fr)',\n    gap: theme.spacing(0.75),\n    alignItems: 'start',\n  }),\n  fieldRowCenter: css({\n    display: 'grid',\n    gridTemplateColumns: 'minmax(80px, 1fr) minmax(0, 2fr)',\n    gap: theme.spacing(0.75),\n    alignItems: 'center',\n    padding: `${theme.spacing(0.5)} 0`,\n  }),\n  fieldLabelRow: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n    paddingTop: theme.spacing(0.5),\n  }),\n  fieldLabelRowCompact: css({\n    display: 'flex',\n    alignItems: 'center',\n    gap: theme.spacing(0.5),\n  }),\n  fieldLabel: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    fontWeight: theme.typography.fontWeightMedium,\n    color: theme.colors.text.primary,\n  }),\n  fieldRequired: css({\n    color: theme.colors.error.text,\n    marginLeft: 2,\n  }),\n  fieldInfoIcon: css({\n    color: theme.colors.text.disabled,\n    cursor: 'help',\n    flexShrink: 0,\n  }),\n  fieldInputCol: css({\n    display: 'flex',\n    flexDirection: 'column',\n    gap: theme.spacing(0.25),\n    minWidth: 0,\n  }),\n  fieldError: css({\n    fontSize: theme.typography.bodySmall.fontSize,\n    color: theme.colors.error.text,\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/components/DataLinks/DataLink.js

@@ -6,7 +6,7 @@ import { usePrevious } from 'react-use';
 import { DataSourcePicker } from '../DataSourcePicker/DataSourcePicker.js';
 
 const { FormField, Switch } = LegacyForms;
-const getStyles$p = stylesFactory(() => ({
+const getStyles$u = stylesFactory(() => ({
   firstRow: css`
     display: flex;
   `,
@@ -23,7 +23,7 @@ const getStyles$p = stylesFactory(() => ({
 }));
 const DataLink = (props) => {
   const { value, onChange, onDelete, suggestions, className } = props;
-  const styles = getStyles$p();
+  const styles = getStyles$u();
   const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
   const handleChange = (field) => (event) => {
     onChange({

package/dist/esm/components/DataLinks/DataLinks.js

@@ -4,7 +4,7 @@ import { useTheme2, Button } from '@grafana/ui';
 import { VariableOrigin, DataLinkBuiltInVars } from '@grafana/data';
 import { DataLink } from './DataLink.js';
 
-const getStyles$o = (theme) => ({
+const getStyles$t = (theme) => ({
   infoText: css`
     padding-bottom: ${theme.v1.spacing.md};
     color: ${theme.v1.colors.textWeak};
@@ -16,7 +16,7 @@ const getStyles$o = (theme) => ({
 const DataLinks = (props) => {
   const { value, onChange } = props;
   const theme = useTheme2();
-  const styles = getStyles$o(theme);
+  const styles = getStyles$t(theme);
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."), /* @__PURE__ */ React.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
     return /* @__PURE__ */ React.createElement(
       DataLink,

package/dist/esm/components/DataSourcePicker/DataSourcePicker.js

@@ -5,15 +5,15 @@ import { selectors } from '@grafana/e2e-selectors';
 import { isUnsignedPluginSignature, PluginSignatureBadge } from '../Plugins/PluginSignatureBadge.js';
 import { getDataSourceSrv } from '@grafana/runtime';
 
-var __defProp$5 = Object.defineProperty;
-var __defNormalProp$5 = (obj, key, value) => key in obj ? __defProp$5(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$5 = (obj, key, value) => __defNormalProp$5(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$6 = Object.defineProperty;
+var __defNormalProp$6 = (obj, key, value) => key in obj ? __defProp$6(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$6 = (obj, key, value) => __defNormalProp$6(obj, typeof key !== "symbol" ? key + "" : key, value);
 class DataSourcePicker extends PureComponent {
   constructor(props) {
     super(props);
-    __publicField$5(this, "dataSourceSrv", getDataSourceSrv());
-    __publicField$5(this, "state", {});
-    __publicField$5(this, "onChange", (item) => {
+    __publicField$6(this, "dataSourceSrv", getDataSourceSrv());
+    __publicField$6(this, "state", {});
+    __publicField$6(this, "onChange", (item) => {
       const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value);
       if (dsSettings) {
         this.props.onChange(dsSettings);
@@ -93,7 +93,7 @@ class DataSourcePicker extends PureComponent {
     ));
   }
 }
-__publicField$5(DataSourcePicker, "defaultProps", {
+__publicField$6(DataSourcePicker, "defaultProps", {
   autoFocus: false,
   openMenuOnFocus: false,
   placeholder: "Select datasource"

package/dist/esm/components/DatePicker/styles.js

@@ -1,7 +1,7 @@
 import '@grafana/data';
 import { css } from '@emotion/css';
 
-const getStyles$r = (theme) => {
+const getStyles$w = (theme) => {
   const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
   return {
     container: css`
@@ -149,5 +149,5 @@ const getBodyStyles = (theme) => {
   };
 };
 
-export { getBodyStyles, getStyles$r as getStyles };
+export { getBodyStyles, getStyles$w as getStyles };
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/DatePickerWithInput/styles.js

@@ -1,6 +1,6 @@
 import { css } from '@emotion/css';
 
-function getStyles$q() {
+function getStyles$v() {
   return {
     input: css({
       /* hides the native Calendar picker icon given when using type=date */
@@ -12,5 +12,5 @@ function getStyles$q() {
   };
 }
 
-export { getStyles$q as getStyles };
+export { getStyles$v as getStyles };
 //# sourceMappingURL=styles.js.map

package/dist/esm/components/QueryEditor/EditorField.js

@@ -6,12 +6,12 @@ import { useStyles2, ReactUtils, Tooltip, Icon, Space, Field } from '@grafana/ui
 const EditorField$1 = (props) => {
   var _a;
   const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
-  const styles = useStyles2(getStyles$l, width);
+  const styles = useStyles2(getStyles$q, width);
   const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", content: tooltip, theme: "info", interactive: tooltipInteractive }, /* @__PURE__ */ React.createElement(Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React.createElement(Space, { v: 0.5 }));
   return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$l = (theme, width) => {
+const getStyles$q = (theme, width) => {
   return {
     root: css({
       minWidth: theme.spacing(width != null ? width : 0)

package/dist/esm/components/QueryEditor/EditorHeader.js

@@ -4,10 +4,10 @@ import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 const EditorHeader = ({ children }) => {
-  const styles = useStyles2(getStyles$m);
+  const styles = useStyles2(getStyles$r);
   return /* @__PURE__ */ React.createElement("div", { className: styles.root }, children);
 };
-const getStyles$m = (theme) => ({
+const getStyles$r = (theme) => ({
   root: css({
     display: "flex",
     flexWrap: "wrap",

package/dist/esm/components/QueryEditor/EditorRow.js

@@ -5,10 +5,10 @@ import { useStyles2 } from '@grafana/ui';
 import { EditorStack } from './EditorStack.js';
 
 const EditorRow$1 = ({ children }) => {
-  const styles = useStyles2(getStyles$k);
+  const styles = useStyles2(getStyles$p);
   return /* @__PURE__ */ React.createElement("div", { className: styles.root }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$k = (theme) => {
+const getStyles$p = (theme) => {
   return {
     root: css({
       padding: theme.spacing(1),

package/dist/esm/components/QueryEditor/EditorSwitch.js

@@ -3,10 +3,10 @@ import { css } from '@emotion/css';
 import { Switch } from '@grafana/ui';
 
 const EditorSwitch = (props) => {
-  const styles = getStyles$j();
+  const styles = getStyles$o();
   return /* @__PURE__ */ React.createElement("div", { className: styles.switch }, /* @__PURE__ */ React.createElement(Switch, { ...props }));
 };
-const getStyles$j = () => {
+const getStyles$o = () => {
   return {
     switch: css({
       display: "flex",

package/dist/esm/components/QueryEditor/InputGroup.js

@@ -3,7 +3,7 @@ import { cx, css } from '@emotion/css';
 import { useStyles2 } from '@grafana/ui';
 
 const InputGroup = ({ children }) => {
-  const styles = useStyles2(getStyles$n);
+  const styles = useStyles2(getStyles$s);
   const modifiedChildren = Children.map(children, (child) => {
     if (isValidElement(child) && child.props.invalid) {
       return cloneElement(child, { className: cx(child.props.className, styles.invalidChild) });
@@ -21,7 +21,7 @@ const borderPriority = [
   "focused"
   // highest priority
 ];
-const getStyles$n = () => ({
+const getStyles$s = () => ({
   root: css({
     display: "flex",
     // Style the direct children of the component

package/dist/esm/components/QueryEditor/Space.js

@@ -4,10 +4,10 @@ import '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
 const Space = ({ v = 0, h = 0, layout = "block" }) => {
-  const styles = useStyles2(getStyles$i, v, h, layout);
+  const styles = useStyles2(getStyles$n, v, h, layout);
   return /* @__PURE__ */ React.createElement("span", { className: cx(styles.wrapper) });
 };
-const getStyles$i = (theme, v, h, layout) => ({
+const getStyles$n = (theme, v, h, layout) => ({
   wrapper: css([
     {
       paddingRight: theme.spacing(h != null ? h : 0),