@grafana/plugin-ui 0.14.1-dsconfig.4bdebf6 → 0.14.1-dsconfig.9143abf

package/dist/cjs/index.cjs

@@ -17,12 +17,13 @@ var AutoSizer = require('react-virtualized-auto-sizer');
 var sqlFormatter = require('sql-formatter');
 var rxjs = require('rxjs');
 var operators$1 = require('rxjs/operators');
+var celJs = require('@marcbachmann/cel-js');
 var reactHookForm = require('react-hook-form');
 var dnd = require('@hello-pangea/dnd');
 var reactPopperTooltip = require('react-popper-tooltip');
 var Prism = require('prismjs');
-var yaml = require('js-yaml');
 var schemas = require('./schemas.cjs');
+var yaml = require('js-yaml');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
@@ -79,7 +80,7 @@ function Segment(props) {
   );
 }
 
-const getStyles$v = (theme) => {
+const getStyles$x = (theme) => {
   const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
   return {
     container: css.css`
@@ -229,7 +230,7 @@ const getBodyStyles = (theme) => {
 
 const DatePicker = React.memo((props) => {
   const theme = ui.useTheme2();
-  const styles = getStyles$v(theme);
+  const styles = getStyles$x(theme);
   const { isOpen, onClose } = props;
   if (!isOpen) {
     return null;
@@ -259,7 +260,7 @@ const Body = React.memo(({ value, onChange }) => {
 });
 Body.displayName = "Body";
 
-function getStyles$u() {
+function getStyles$w() {
   return {
     input: css.css({
       /* hides the native Calendar picker icon given when using type=date */
@@ -275,7 +276,7 @@ const formatDate = (date) => date.toISOString().split("T")[0];
 const DatePickerWithInput = (props) => {
   const { value, onChange, className, ...rest } = props;
   const [open, setOpen] = React.useState(false);
-  const styles = getStyles$u();
+  const styles = getStyles$w();
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     ui.Input,
     {
@@ -437,7 +438,7 @@ __publicField$4(DataSourcePicker, "defaultProps", {
 });
 
 const { FormField, Switch } = ui.LegacyForms;
-const getStyles$t = ui.stylesFactory(() => ({
+const getStyles$v = ui.stylesFactory(() => ({
   firstRow: css.css`
     display: flex;
   `,
@@ -454,7 +455,7 @@ const getStyles$t = ui.stylesFactory(() => ({
 }));
 const DataLink = (props) => {
   const { value, onChange, onDelete, suggestions, className } = props;
-  const styles = getStyles$t();
+  const styles = getStyles$v();
   const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
   const handleChange = (field) => (event) => {
     onChange({
@@ -571,7 +572,7 @@ function useInternalLink(datasourceUid) {
   return [showInternalLink, setShowInternalLink];
 }
 
-const getStyles$s = (theme) => ({
+const getStyles$u = (theme) => ({
   infoText: css.css`
     padding-bottom: ${theme.v1.spacing.md};
     color: ${theme.v1.colors.textWeak};
@@ -583,7 +584,7 @@ const getStyles$s = (theme) => ({
 const DataLinks = (props) => {
   const { value, onChange } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$s(theme);
+  const styles = getStyles$u(theme);
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React__default.default.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__default.default.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
     return /* @__PURE__ */ React__default.default.createElement(
       DataLink,
@@ -5479,7 +5480,7 @@ const getButtonStyles = (theme) => ({
 });
 
 const InputGroup = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$r);
+  const styles = ui.useStyles2(getStyles$t);
   const modifiedChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.props.invalid) {
       return React.cloneElement(child, { className: css.cx(child.props.className, styles.invalidChild) });
@@ -5497,7 +5498,7 @@ const borderPriority = [
   "focused"
   // highest priority
 ];
-const getStyles$r = () => ({
+const getStyles$t = () => ({
   root: css.css({
     display: "flex",
     // Style the direct children of the component
@@ -5580,10 +5581,10 @@ const EditorFieldGroup = ({ children }) => {
 };
 
 const EditorHeader = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$q);
+  const styles = ui.useStyles2(getStyles$s);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, children);
 };
-const getStyles$q = (theme) => ({
+const getStyles$s = (theme) => ({
   root: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -5596,12 +5597,12 @@ const getStyles$q = (theme) => ({
 const EditorField$1 = (props) => {
   var _a;
   const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
-  const styles = ui.useStyles2(getStyles$p, width);
+  const styles = ui.useStyles2(getStyles$r, width);
   const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info", interactive: tooltipInteractive }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.default.createElement(ui.Space, { v: 0.5 }));
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$p = (theme, width) => {
+const getStyles$r = (theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -5629,10 +5630,10 @@ const getStyles$p = (theme, width) => {
 };
 
 const EditorRow$1 = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$o);
+  const styles = ui.useStyles2(getStyles$q);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$o = (theme) => {
+const getStyles$q = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -5647,10 +5648,10 @@ const EditorRows$1 = ({ children }) => {
 };
 
 const EditorSwitch = (props) => {
-  const styles = getStyles$n();
+  const styles = getStyles$p();
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.switch }, /* @__PURE__ */ React__default.default.createElement(ui.Switch, { ...props }));
 };
-const getStyles$n = () => {
+const getStyles$p = () => {
   return {
     switch: css.css({
       display: "flex",
@@ -5708,10 +5709,10 @@ const getSelectStyles = (theme) => ({
 });
 
 const Space = ({ v = 0, h = 0, layout = "block" }) => {
-  const styles = ui.useStyles2(getStyles$m, v, h, layout);
+  const styles = ui.useStyles2(getStyles$o, v, h, layout);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.wrapper) });
 };
-const getStyles$m = (theme, v, h, layout) => ({
+const getStyles$o = (theme, v, h, layout) => ({
   wrapper: css.css([
     {
       paddingRight: theme.spacing(h != null ? h : 0),
@@ -6323,7 +6324,7 @@ function RawEditor({
   language = "sql"
 }) {
   const theme = ui.useTheme2();
-  const styles = ui.useStyles2(getStyles$l);
+  const styles = ui.useStyles2(getStyles$n);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [toolboxRef, toolboxMeasure] = reactUse.useMeasure();
   const [editorRef, editorMeasure] = reactUse.useMeasure();
@@ -6393,7 +6394,7 @@ function RawEditor({
     renderEditor(true)
   ));
 }
-function getStyles$l(theme) {
+function getStyles$n(theme) {
   return {
     modal: css.css`
       width: 95vw;
@@ -6408,7 +6409,7 @@ function getStyles$l(theme) {
 
 function Preview({ rawSql, language = "sql" }) {
   const [_, copyToClipboard] = reactUse.useCopyToClipboard();
-  const styles = ui.useStyles2(getStyles$k);
+  const styles = ui.useStyles2(getStyles$m);
   const labelElement = /* @__PURE__ */ React__default.default.createElement("div", { className: styles.labelWrapper }, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label }, "Preview"), /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" }));
   return /* @__PURE__ */ React__default.default.createElement(ui.Field, { label: labelElement, className: styles.grow }, /* @__PURE__ */ React__default.default.createElement(
     ui.CodeEditor,
@@ -6422,7 +6423,7 @@ function Preview({ rawSql, language = "sql" }) {
     }
   ));
 }
-function getStyles$k(theme) {
+function getStyles$m(theme) {
   return {
     grow: css.css({ flexGrow: 1 }),
     label: css.css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),
@@ -6541,7 +6542,7 @@ function SQLOrderByRow({ fields, query, onQueryChange, db }) {
 const asteriskValue = { label: "*", value: "*" };
 function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$j);
+  const styles = ui.useStyles2(getStyles$l);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
   const onColumnChange = React.useCallback(
     (item, index) => (column) => {
@@ -6637,7 +6638,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     }
   ));
 }
-const getStyles$j = () => {
+const getStyles$l = () => {
   return { addButton: css.css({ alignSelf: "flex-start" }) };
 };
 function getColumnValue({ parameters }) {
@@ -6983,10 +6984,10 @@ function mapFieldsToTypes(columns) {
 }
 
 const EditorRow = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$i);
+  const styles = ui.useStyles2(getStyles$k);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$i = (theme) => {
+const getStyles$k = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -7000,12 +7001,12 @@ const EditorField = (props) => {
   var _a;
   const { label, optional, tooltip, children, width, ...fieldProps } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$h(theme, width);
+  const styles = getStyles$j(theme, width);
   const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.default.createElement(Space, { v: 0.5 }));
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$h = ui.stylesFactory((theme, width) => {
+const getStyles$j = ui.stylesFactory((theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -7455,7 +7456,7 @@ const ConfigSubSection = ({ children, ...props }) => {
 function ConfigDescriptionLink(props) {
   const { description, suffix, feature } = props;
   const text = `Learn more about ${feature}`;
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$i);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: styles.container }, description, /* @__PURE__ */ React__default.default.createElement(
     "a",
     {
@@ -7467,7 +7468,7 @@ function ConfigDescriptionLink(props) {
     text
   ));
 }
-const getStyles$g = (theme) => {
+const getStyles$i = (theme) => {
   return {
     container: css.css({
       color: theme.colors.text.secondary,
@@ -8436,6 +8437,44 @@ const AdvancedHttpSettings = ({
   ));
 };
 
+const exprCache = /* @__PURE__ */ new Map();
+function getCompiled(expr) {
+  if (exprCache.has(expr)) {
+    return exprCache.get(expr);
+  }
+  try {
+    const compiled = celJs.parse(expr);
+    exprCache.set(expr, compiled);
+    return compiled;
+  } catch (e) {
+    exprCache.set(expr, null);
+    return null;
+  }
+}
+function evaluateCelExpression(expr, context, defaultValue = false) {
+  if (!expr || !expr.trim()) {
+    return defaultValue;
+  }
+  const compiled = getCompiled(expr);
+  if (!compiled) {
+    return defaultValue;
+  }
+  try {
+    const result = compiled(context);
+    return !!result;
+  } catch (e) {
+    return defaultValue;
+  }
+}
+function extractFieldRefs(expr) {
+  const matches = expr.matchAll(/([\w.]+)\s*(?:==|!=)/g);
+  const refs = /* @__PURE__ */ new Set();
+  for (const m of matches) {
+    refs.add(m[1]);
+  }
+  return [...refs];
+}
+
 function resolveGroups(schema) {
   const fieldMap = /* @__PURE__ */ new Map();
   for (const f of schema.fields) {
@@ -8459,18 +8498,18 @@ function resolveGroups(schema) {
   ];
 }
 function resolveRequiredFieldsGroup(schema) {
-  var _a;
+  var _a, _b;
   const fieldMap = /* @__PURE__ */ new Map();
   for (const f of schema.fields) {
     fieldMap.set(f.id, f);
   }
   const requiredIds = /* @__PURE__ */ new Set();
   for (const f of schema.fields) {
-    if (f.required) {
+    if (f.required || ((_a = f.tags) == null ? void 0 : _a.includes("pinned"))) {
       requiredIds.add(f.id);
     }
   }
-  const authGroup = (_a = schema.groups) == null ? void 0 : _a.find((g) => g.id === "auth");
+  const authGroup = (_b = schema.groups) == null ? void 0 : _b.find((g) => g.id === "auth");
   if (authGroup) {
     for (const ref of authGroup.fieldRefs) {
       if (fieldMap.has(ref)) {
@@ -8486,16 +8525,17 @@ function resolveRequiredFieldsGroup(schema) {
     includeIds.add(id);
     const f = fieldMap.get(id);
     if (f == null ? void 0 : f.dependsOn) {
-      const parsed = parseDependsOn(f.dependsOn);
-      if (parsed && fieldMap.has(parsed.field)) {
-        includeIds.add(parsed.field);
+      for (const ref of extractFieldRefs(f.dependsOn)) {
+        if (fieldMap.has(ref)) {
+          includeIds.add(ref);
+        }
       }
     }
   }
   for (const f of schema.fields) {
     if (f.dependsOn && !includeIds.has(f.id)) {
-      const parsed = parseDependsOn(f.dependsOn);
-      if (parsed && requiredIds.has(parsed.field)) {
+      const refs = extractFieldRefs(f.dependsOn);
+      if (refs.some((ref) => requiredIds.has(ref))) {
         includeIds.add(f.id);
       }
     }
@@ -8507,7 +8547,7 @@ function resolveRequiredFieldsGroup(schema) {
   return {
     group: {
       id: "_required",
-      title: "Required",
+      title: "General",
       fieldRefs: virtualFields.map((f) => f.id)
     },
     fields: virtualFields
@@ -8516,16 +8556,36 @@ function resolveRequiredFieldsGroup(schema) {
 function formKey(field) {
   return field.section ? `${field.section}.${field.key}` : field.key;
 }
+function getWatchedValue(watchedValues, key) {
+  if (key.includes(".")) {
+    const parts = key.split(".");
+    let current = watchedValues;
+    for (const part of parts) {
+      if (current == null || typeof current !== "object") {
+        return watchedValues[key];
+      }
+      current = current[part];
+    }
+    if (current !== void 0) {
+      return current;
+    }
+    return watchedValues[key];
+  }
+  return watchedValues[key];
+}
 function parseDependsOn(expr) {
   var _a, _b;
-  const m = expr.match(/^(.+?)\s*==\s*(?:'([^']*)'|"([^"]*)"|(.+))$/);
+  const m = expr.match(/^([\w.]+)\s*(==|!=)\s*(?:'([^']*)'|"([^"]*)"|(\S+))$/);
   if (!m) {
     return null;
   }
-  return { field: m[1].trim(), value: ((_b = (_a = m[2]) != null ? _a : m[3]) != null ? _b : m[4]).trim() };
+  return { field: m[1], value: ((_b = (_a = m[3]) != null ? _a : m[4]) != null ? _b : m[5]).trim(), negate: m[2] === "!=" };
+}
+function evaluateDependsOn(parsed, currentValue) {
+  const matches = String(currentValue != null ? currentValue : "") === parsed.value;
+  return parsed.negate ? !matches : matches;
 }
 function resolveActiveOverride(field, watchedValues, fieldById) {
-  var _a;
   if (!field.overrides || field.overrides.length === 0) {
     return void 0;
   }
@@ -8536,7 +8596,7 @@ function resolveActiveOverride(field, watchedValues, fieldById) {
     }
     const depField = fieldById.get(parsed.field);
     const depKey = depField ? formKey(depField) : parsed.field;
-    if (String((_a = watchedValues[depKey]) != null ? _a : "") === parsed.value) {
+    if (evaluateDependsOn(parsed, getWatchedValue(watchedValues, depKey))) {
       return ov;
     }
   }
@@ -8670,6 +8730,52 @@ function computeVirtualFieldValues(schema, existingValues) {
 }
 
 const SECURE_FIELD_CONFIGURED = "__CONFIGURED__";
+function resolveSecureKeyTemplate(template, item, index) {
+  return template.replace(/\{index1\}/g, String(index + 1)).replace(/\{index\}/g, String(index)).replace(/\{item\.(\w+)\}/g, (_, key) => {
+    var _a;
+    return String((_a = item[key]) != null ? _a : "");
+  });
+}
+function evaluateItemCondition(condition, item) {
+  const trimmed = condition.trim();
+  if (trimmed === "true") {
+    return true;
+  }
+  const match = trimmed.match(/^item\.(\w+)\s*==\s*(.+)$/);
+  if (!match) {
+    return false;
+  }
+  const [, key, rawValue] = match;
+  const actualValue = item[key];
+  const expected = rawValue.trim();
+  if (expected === "true") {
+    return actualValue === true;
+  }
+  if (expected === "false") {
+    return actualValue === false;
+  }
+  const unquoted = expected.replace(/^['"]|['"]$/g, "");
+  return String(actualValue) === unquoted;
+}
+function findActiveSecureOverride(itemFields, item, index) {
+  for (const field of itemFields) {
+    if (!field.overrides) {
+      continue;
+    }
+    for (const override of field.overrides) {
+      if (!override.secureKey) {
+        continue;
+      }
+      if (evaluateItemCondition(override.when, item)) {
+        return {
+          fieldKey: field.key,
+          resolvedKey: resolveSecureKeyTemplate(override.secureKey, item, index)
+        };
+      }
+    }
+  }
+  return null;
+}
 function patternToRegex(pattern) {
   const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
   return new RegExp("^" + escaped.replace("\\{index\\}", "(\\d+)") + "$");
@@ -8776,7 +8882,7 @@ function resolveRawPath(ref, ds) {
   return void 0;
 }
 async function fetchExistingValues(dsUid, fields) {
-  var _a, _b, _c, _d, _e;
+  var _a, _b, _c, _d, _e, _f;
   try {
     const ds = await runtime.getBackendSrv().get(`/api/datasources/uid/${dsUid}`, void 0, void 0, {
       showErrorAlert: false
@@ -8817,6 +8923,32 @@ async function fetchExistingValues(dsUid, fields) {
         }
       }
     }
+    for (const field of fields) {
+      if (field.valueType !== "array" || !((_f = field.item) == null ? void 0 : _f.fields)) {
+        continue;
+      }
+      const itemFields = field.item.fields;
+      const hasSecureOverride = itemFields.some((f) => {
+        var _a2;
+        return (_a2 = f.overrides) == null ? void 0 : _a2.some((o) => o.secureKey);
+      });
+      if (!hasSecureOverride) {
+        continue;
+      }
+      const fk = formKey(field);
+      const arr = values[fk];
+      if (!Array.isArray(arr)) {
+        continue;
+      }
+      values[fk] = arr.map((item, idx) => {
+        var _a2;
+        const match = findActiveSecureOverride(itemFields, item, idx);
+        if (match && ((_a2 = ds.secureJsonFields) == null ? void 0 : _a2[match.resolvedKey])) {
+          return { ...item, [match.fieldKey]: SECURE_FIELD_CONFIGURED };
+        }
+        return item;
+      });
+    }
     return { values, readOnly: !!ds.readOnly };
   } catch (err) {
     const message = err instanceof Error ? err.message : "Failed to load datasource configuration";
@@ -8824,7 +8956,7 @@ async function fetchExistingValues(dsUid, fields) {
   }
 }
 function buildDatasourceConfigPayload(data, fields, existing, isFieldVisible) {
-  var _a, _b, _c, _d;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const rootFields = {};
   const jsonData = { ...(_a = existing.jsonData) != null ? _a : {} };
   const secureJsonData = {};
@@ -8873,6 +9005,60 @@ function buildDatasourceConfigPayload(data, fields, existing, isFieldVisible) {
         break;
     }
   }
+  for (const field of fields) {
+    if (field.valueType !== "array" || !((_e = field.item) == null ? void 0 : _e.fields) || field.target !== "jsonData") {
+      continue;
+    }
+    const itemFields = field.item.fields;
+    const hasSecureOverride = itemFields.some((f) => {
+      var _a2;
+      return (_a2 = f.overrides) == null ? void 0 : _a2.some((o) => o.secureKey);
+    });
+    if (!hasSecureOverride) {
+      continue;
+    }
+    const arr = field.section ? (_f = jsonData[field.section]) == null ? void 0 : _f[field.key] : jsonData[field.key];
+    if (!Array.isArray(arr)) {
+      continue;
+    }
+    const secureKeyOverrides = [];
+    for (const f of itemFields) {
+      for (const o of (_g = f.overrides) != null ? _g : []) {
+        if (o.secureKey) {
+          secureKeyOverrides.push({ fieldKey: f.key, override: o });
+        }
+      }
+    }
+    const activeSecureKeys = /* @__PURE__ */ new Set();
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      const match = findActiveSecureOverride(itemFields, item, i);
+      if (!match) {
+        continue;
+      }
+      const resolvedKey = match.resolvedKey;
+      activeSecureKeys.add(resolvedKey);
+      const itemValue = item[match.fieldKey];
+      if (itemValue === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[resolvedKey] = true;
+      } else if (itemValue && itemValue !== "") {
+        secureJsonData[resolvedKey] = String(itemValue);
+        secureJsonFields[resolvedKey] = false;
+        item[match.fieldKey] = "";
+      }
+    }
+    const existingSecureFields = (_h = existing.secureJsonFields) != null ? _h : {};
+    for (const existingKey of Object.keys(existingSecureFields)) {
+      const couldBeFromThisField = secureKeyOverrides.some((sko) => {
+        const staticPrefix = sko.override.secureKey.split("{")[0];
+        return staticPrefix && existingKey.startsWith(staticPrefix);
+      });
+      if (couldBeFromThisField && !activeSecureKeys.has(existingKey)) {
+        secureJsonFields[existingKey] = false;
+        secureJsonData[existingKey] = "";
+      }
+    }
+  }
   return { rootFields, jsonData, secureJsonData, secureJsonFields };
 }
 async function submitDatasourceConfig(dsUid, data, fields, isFieldVisible) {
@@ -8910,23 +9096,25 @@ function evaluateEffectCondition(when, fieldValue) {
   const eq = String(fieldValue) === String(target);
   return op === "==" ? eq : !eq;
 }
-function isFieldRequired(field, watchedValues, fieldById) {
-  var _a;
+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 String((_a = watchedValues[depKey]) != null ? _a : "") === parsed.value;
+      return evaluateDependsOn(parsed, getWatchedValue(watchedValues, depKey));
     }
   }
   return false;
 }
 function buildValidationRules(field, required) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const rules = {};
   const label = (_a = field.label) != null ? _a : field.key;
   if (required) {
@@ -8944,29 +9132,65 @@ function buildValidationRules(field, required) {
       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: (_b = v.message) != null ? _b : `Invalid ${label}`
+            message: (_d = v.message) != null ? _d : `Invalid ${label}`
           };
           break;
         case "range":
           if (v.min !== void 0) {
-            rules.min = { value: v.min, message: (_c = v.message) != null ? _c : `Minimum value is ${v.min}` };
+            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: (_d = v.message) != null ? _d : `Maximum value is ${v.max}` };
+            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: (_e = v.message) != null ? _e : `Minimum length is ${v.min}` };
+            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: (_f = v.message) != null ? _f : `Maximum length is ${v.max}` };
+            rules.maxLength = { value: v.max, message: (_h = v.message) != null ? _h : `Maximum length is ${v.max}` };
           }
           break;
       }
@@ -8974,16 +9198,24 @@ function buildValidationRules(field, required) {
   }
   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;
+  }
+}
 
-function PdcFieldNote({
-  enabled,
-  description,
-  configUrl
-}) {
-  const styles = ui.useStyles2(getStyles$f);
+const PdcFieldNote = (props) => {
+  const { enabled, description, configUrl } = props;
+  const styles = ui.useStyles2(getStyles$h);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "shield", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Private data source connect: ", /* @__PURE__ */ React__default.default.createElement("strong", null, enabled ? "Enabled" : "Disabled")), description && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }))), /* @__PURE__ */ React__default.default.createElement(ui.LinkButton, { variant: "secondary", size: "sm", icon: "external-link-alt", href: configUrl }, "Configure in settings"));
-}
-const getStyles$f = (theme) => ({
+};
+const getStyles$h = (theme) => ({
   wrapper: css.css({
     display: "flex",
     alignItems: "center",
@@ -9003,18 +9235,14 @@ const getStyles$f = (theme) => ({
   })
 });
 
-function SecureFieldInput({
-  formField,
-  placeholder,
-  disabled,
-  label
-}) {
+function SecureFieldInput(props) {
   var _a;
+  const { formField, placeholder, disabled } = props;
   const isConfigured = formField.value === SECURE_FIELD_CONFIGURED;
   const [revealed, setRevealed] = React.useState(false);
   const styles = ui.useStyles2(getSecureFieldStyles);
   if (isConfigured) {
-    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.configuredRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), label, " configured"), !disabled && /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", fill: "text", size: "sm", onClick: () => formField.onChange(""), type: "button" }, "Reset"));
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.configuredRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), "Configured"), !disabled && /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", fill: "text", size: "sm", onClick: () => formField.onChange(""), type: "button" }, "Reset"));
   }
   return /* @__PURE__ */ React__default.default.createElement(
     ui.Input,
@@ -9043,7 +9271,8 @@ const getSecureFieldStyles = (theme) => ({
   configuredRow: css.css({
     display: "flex",
     alignItems: "center",
-    gap: theme.spacing(1)
+    gap: theme.spacing(1),
+    whiteSpace: "nowrap"
   }),
   configuredBadge: css.css({
     display: "inline-flex",
@@ -9053,97 +9282,164 @@ const getSecureFieldStyles = (theme) => ({
     borderRadius: theme.shape.radius.pill,
     backgroundColor: theme.colors.success.transparent,
     color: theme.colors.success.text,
-    fontSize: theme.typography.bodySmall.fontSize
+    fontSize: theme.typography.bodySmall.fontSize,
+    whiteSpace: "nowrap"
   })
 });
 
-function StringArrayInput({
-  value,
-  onChange,
-  placeholder,
-  disabled
-}) {
-  const [draft, setDraft] = React.useState("");
-  const styles = ui.useStyles2(getStyles$e);
-  const addTag = () => {
-    const trimmed = draft.trim();
-    if (trimmed && !value.includes(trimmed)) {
-      onChange([...value, trimmed]);
-    }
-    setDraft("");
-  };
-  const removeTag = (tag) => {
-    onChange(value.filter((v) => v !== tag));
-  };
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, value.length > 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.tags }, value.map((tag) => /* @__PURE__ */ React__default.default.createElement("span", { key: tag, className: styles.tag }, tag, !disabled && /* @__PURE__ */ React__default.default.createElement(
-    "button",
-    {
-      type: "button",
-      className: styles.tagRemove,
-      onClick: () => removeTag(tag),
-      "aria-label": `Remove ${tag}`
-    },
-    /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "times", size: "xs" })
-  )))), /* @__PURE__ */ React__default.default.createElement(
-    ui.Input,
-    {
-      value: draft,
-      onChange: (e) => setDraft(e.currentTarget.value),
-      onKeyDown: (e) => {
-        if (e.key === "Enter") {
-          e.preventDefault();
-          addTag();
-        }
-      },
-      onBlur: addTag,
-      placeholder,
-      disabled
-    }
-  ));
-}
-const getStyles$e = (theme) => ({
-  container: css.css({
-    display: "flex",
-    flexDirection: "column",
-    gap: theme.spacing(0.5)
-  }),
-  tags: css.css({
-    display: "flex",
-    flexWrap: "wrap",
-    gap: theme.spacing(0.5)
-  }),
-  tag: css.css({
+const ComplexFieldNote = (props) => {
+  const { count, label } = props;
+  const styles = ui.useStyles2(getStyles$g);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, count > 0 ? `${count} ${label.toLowerCase()} configured.` : `No ${label.toLowerCase()} configured.`, " Configure in Grafana UI."));
+};
+const getStyles$g = (theme) => ({
+  note: css.css({
     display: "inline-flex",
     alignItems: "center",
-    gap: theme.spacing(0.25),
-    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
-    borderRadius: theme.shape.radius.pill,
-    backgroundColor: theme.colors.background.secondary,
-    border: `1px solid ${theme.colors.border.weak}`,
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.5)} ${theme.spacing(0.75)}`,
     fontSize: theme.typography.bodySmall.fontSize,
-    color: theme.colors.text.primary
-  }),
-  tagRemove: css.css({
-    display: "inline-flex",
-    alignItems: "center",
-    padding: 0,
-    border: "none",
-    backgroundColor: "transparent",
-    cursor: "pointer",
     color: theme.colors.text.secondary,
-    "&:hover": { color: theme.colors.text.primary }
+    backgroundColor: theme.colors.background.secondary,
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
   })
 });
 
-function IndexedPairRow({
-  item,
-  index,
-  disabled,
-  onUpdate,
-  onRemove,
-  hideControls
-}) {
-  const styles = ui.useStyles2(getStyles$d);
+function FileUploadField(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { field, formField, disabled, setValue } = props;
+  const [mode, setModeLocal] = React.useState("upload");
+  const [error, setError] = React.useState(null);
+  const theme = ui.useTheme2();
+  const mapping = (_a = field.ui) == null ? void 0 : _a.fileMapping;
+  const accept = (_c = (_b = field.ui) == null ? void 0 : _b.accept) != null ? _c : [".json"];
+  const setMode = React.useCallback(
+    (next) => {
+      setModeLocal(next);
+      formField.onChange(next);
+    },
+    [formField]
+  );
+  const processJson = React.useCallback(
+    (text) => {
+      const fileMapping = mapping != null ? mapping : {};
+      try {
+        const parsed = JSON.parse(text);
+        if (typeof parsed !== "object" || parsed === null) {
+          setError("Invalid JSON object");
+          return;
+        }
+        const requiredKeys = Object.keys(fileMapping);
+        const missingKeys = requiredKeys.filter((k) => parsed[k] === void 0);
+        if (missingKeys.length > 0) {
+          setError(`Missing keys: ${missingKeys.join(", ")}`);
+          return;
+        }
+        for (const [jsonKey, targetFieldId] of Object.entries(fileMapping)) {
+          if (parsed[jsonKey] !== void 0) {
+            const parts = targetFieldId.split(".");
+            const fk = parts.length === 2 ? parts[1] : targetFieldId;
+            setValue(fk, parsed[jsonKey]);
+          }
+        }
+        setError(null);
+        setModeLocal("manual");
+        formField.onChange("manual");
+      } catch (e) {
+        setError("Invalid JSON");
+      }
+    },
+    [mapping, setValue, formField]
+  );
+  const styles = getStyles$f(theme);
+  if (mode === "manual") {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("paste"), disabled }, "Paste JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("upload"), disabled }, "Upload JWT Token"));
+  }
+  if (mode === "paste") {
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(
+      ui.TextArea,
+      {
+        placeholder: (_e = (_d = field.ui) == null ? void 0 : _d.placeholder) != null ? _e : "Paste Google JWT token here",
+        rows: (_g = (_f = field.ui) == null ? void 0 : _f.rows) != null ? _g : 10,
+        onBlur: (e) => {
+          const val = e.currentTarget.value;
+          if (val.trim()) {
+            processJson(val);
+          }
+        },
+        disabled
+      }
+    ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("upload"), disabled }, "Upload JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("manual"), disabled }, "Fill In JWT Token manually")), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.error }, error));
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(
+    ui.FileDropzone,
+    {
+      options: { multiple: false, accept: accept.join(",") },
+      readAs: "readAsText",
+      onLoad: (result) => {
+        if (typeof result === "string") {
+          processJson(result);
+        }
+      }
+    }
+  ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("paste"), disabled }, "Paste JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("manual"), disabled }, "Fill In JWT Token manually")), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.error }, error));
+}
+function getStyles$f(theme) {
+  return {
+    buttonRow: css.css({
+      marginTop: theme.spacing(1),
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing(0.5)
+    }),
+    separator: css.css({
+      padding: `0 ${theme.spacing(0.5)}`,
+      color: theme.colors.text.secondary
+    }),
+    error: css.css({
+      color: theme.colors.error.text,
+      fontSize: theme.typography.bodySmall.fontSize,
+      marginTop: theme.spacing(0.5),
+      display: "block"
+    })
+  };
+}
+
+const IndexedPairEditor = (props) => {
+  const { value, onChange, maxItems = 10, disabled, hideControls, itemLabel = "header" } = props;
+  const styles = ui.useStyles2(getStyles$e);
+  const items = Array.isArray(value) ? value : [];
+  const addItem = () => {
+    if (items.length >= maxItems) {
+      return;
+    }
+    onChange([...items, { index: 0, name: "", value: "" }]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, key, val) => {
+    const updated = items.map((item, i) => i === index ? { ...item, [key]: val } : item);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
+    IndexedPairRow,
+    {
+      key: item.index || `new-${i}`,
+      item,
+      index: i,
+      disabled,
+      onUpdate: updateItem,
+      onRemove: removeItem,
+      hideControls,
+      itemLabel
+    }
+  )), !hideControls && items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add ", itemLabel)), !hideControls && items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " ", itemLabel, "s reached"));
+};
+const IndexedPairRow = (props) => {
+  const { item, index, disabled, onUpdate, onRemove, hideControls, itemLabel = "header" } = props;
+  const styles = ui.useStyles2(getStyles$e);
   const secureStyles = ui.useStyles2(getSecureFieldStyles);
   const isConfigured = item.value === SECURE_FIELD_CONFIGURED;
   const [editing, setEditing] = React.useState(false);
@@ -9152,9 +9448,14 @@ function IndexedPairRow({
     ui.Input,
     {
       value: item.name,
-      placeholder: "Header name",
+      placeholder: "key",
       disabled: disabled || hideControls,
-      onChange: (e) => onUpdate(index, "name", e.currentTarget.value)
+      onChange: (e) => onUpdate(index, "name", e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      }
     }
   )), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, isConfigured && !editing ? /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React__default.default.createElement("span", { className: secureStyles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), "Configured"), !disabled && /* @__PURE__ */ React__default.default.createElement(
     ui.Button,
@@ -9173,10 +9474,15 @@ function IndexedPairRow({
     ui.Input,
     {
       value: item.value === SECURE_FIELD_CONFIGURED ? "" : item.value,
-      placeholder: "Header value",
+      placeholder: `${itemLabel} value`,
       disabled,
       type: revealed ? "text" : "password",
       onChange: (e) => onUpdate(index, "value", e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      },
       suffix: /* @__PURE__ */ React__default.default.createElement(
         ui.Button,
         {
@@ -9190,34 +9496,56 @@ function IndexedPairRow({
         }
       )
     }
-  )), !hideControls && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Remove header" }, /* @__PURE__ */ React__default.default.createElement(
+  )), !hideControls && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `Remove ${itemLabel}` }, /* @__PURE__ */ React__default.default.createElement(
     ui.Button,
     {
       variant: "secondary",
       fill: "text",
       size: "sm",
       icon: "trash-alt",
-      "aria-label": "Remove header",
+      "aria-label": `Remove ${itemLabel}`,
       disabled,
       onClick: () => onRemove(index),
       type: "button"
     }
   )));
-}
-function IndexedPairEditor({
-  value,
-  onChange,
-  maxItems = 10,
-  disabled,
-  hideControls
-}) {
+};
+const getStyles$e = (theme) => ({
+  inputCell: css.css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
+  }),
+  limitNote: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary
+  })
+});
+
+function ObjectArrayEditor(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { field, value, onChange, disabled, errorMessage } = props;
   const styles = ui.useStyles2(getStyles$d);
+  const itemFields = (_b = (_a = field.item) == null ? void 0 : _a.fields) != null ? _b : [];
+  const layoutRows = computeLayoutRows(itemFields);
   const items = Array.isArray(value) ? value : [];
+  const maxItems = (_e = (_d = (_c = field.validations) == null ? void 0 : _c.find((v) => v.type === "itemCount")) == null ? void 0 : _d.max) != null ? _e : 20;
+  const label = (_f = field.label) != null ? _f : field.key;
+  const itemErrors = parseItemErrors(errorMessage);
   const addItem = () => {
+    var _a2, _b2;
     if (items.length >= maxItems) {
       return;
     }
-    onChange([...items, { index: 0, name: "", value: "" }]);
+    const empty = {};
+    for (const f of itemFields) {
+      if (f.valueType === "boolean") {
+        empty[f.key] = (_a2 = f.defaultValue) != null ? _a2 : false;
+      } else {
+        empty[f.key] = (_b2 = f.defaultValue) != null ? _b2 : "";
+      }
+    }
+    onChange([...items, empty]);
   };
   const removeItem = (index) => {
     onChange(items.filter((_, i) => i !== index));
@@ -9226,78 +9554,241 @@ function IndexedPairEditor({
     const updated = items.map((item, i) => i === index ? { ...item, [key]: val } : item);
     onChange(updated);
   };
-  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
-    IndexedPairRow,
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 1 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
+    ObjectArrayItemRow,
     {
-      key: item.index || `new-${i}`,
+      key: i,
       item,
       index: i,
-      disabled,
+      itemFields,
+      layoutRows,
+      disabled: !!disabled,
       onUpdate: updateItem,
       onRemove: removeItem,
-      hideControls
+      showLabels: true,
+      error: itemErrors == null ? void 0 : itemErrors[i]
+    }
+  )), items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add ", label.toLowerCase())), items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " items reached"));
+}
+function computeLayoutRows(fields) {
+  var _a;
+  const hasExplicitRow = fields.some((f) => {
+    var _a2;
+    return ((_a2 = f.ui) == null ? void 0 : _a2.row) !== void 0;
+  });
+  if (!hasExplicitRow) {
+    if (fields.length <= 3) {
+      return [fields];
+    }
+    return fields.map((f) => [f]);
+  }
+  const rowMap = /* @__PURE__ */ new Map();
+  const noRow = [];
+  for (const f of fields) {
+    if (((_a = f.ui) == null ? void 0 : _a.row) !== void 0) {
+      const existing = rowMap.get(f.ui.row);
+      if (existing) {
+        existing.push(f);
+      } else {
+        rowMap.set(f.ui.row, [f]);
+      }
+    } else {
+      noRow.push(f);
     }
-  )), !hideControls && items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add header")), !hideControls && items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " headers reached"));
+  }
+  const sortedKeys = [...rowMap.keys()].sort((a, b) => a - b);
+  const rows = sortedKeys.map((k) => rowMap.get(k));
+  for (const f of noRow) {
+    rows.push([f]);
+  }
+  return rows;
+}
+function makeItemFormField(item, index, fieldKey, onUpdate) {
+  return {
+    name: `item-${index}-${fieldKey}`,
+    value: item[fieldKey],
+    onChange: (eventOrValue) => {
+      if (eventOrValue != null && typeof eventOrValue === "object" && "target" in eventOrValue) {
+        onUpdate(index, fieldKey, eventOrValue.target.value);
+      } else {
+        onUpdate(index, fieldKey, eventOrValue);
+      }
+    },
+    onBlur: () => {
+    }
+  };
+}
+function effectiveItemField(field, isSecure) {
+  if (!isSecure) {
+    return field;
+  }
+  return { ...field, semanticType: "password" };
+}
+function ObjectArrayItemRow({
+  item,
+  index,
+  itemFields,
+  layoutRows,
+  disabled,
+  onUpdate,
+  onRemove,
+  showLabels,
+  error
+}) {
+  const styles = ui.useStyles2(getStyles$d);
+  const secureOverride = findActiveSecureOverride(itemFields, item, index);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.itemRow }, layoutRows.map((row, rowIdx) => /* @__PURE__ */ React__default.default.createElement(ui.Stack, { key: rowIdx, direction: "row", gap: 1, alignItems: "flex-end", wrap: "wrap" }, row.map((field) => {
+    var _a;
+    const isSecureTarget = (secureOverride == null ? void 0 : secureOverride.fieldKey) === field.key;
+    const eff = effectiveItemField(field, !!isSecureTarget);
+    const formField = makeItemFormField(item, index, field.key, onUpdate);
+    if (isSecureTarget && item[field.key] === SECURE_FIELD_CONFIGURED) {
+      formField.value = SECURE_FIELD_CONFIGURED;
+    }
+    return /* @__PURE__ */ React__default.default.createElement("div", { key: field.key, className: field.valueType === "boolean" ? styles.boolCell : styles.inputCell }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.cellLabel }, (_a = field.label) != null ? _a : field.key, field.required && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.required }, " *")), renderFieldInput(eff, formField, disabled));
+  }), rowIdx === 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.removeCellWithLabel }, /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Remove" }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": "Remove item",
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  ))))), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.itemError }, error));
 }
 const getStyles$d = (theme) => ({
+  itemRow: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  }),
   inputCell: css.css({
-    flex: "1 1 0",
-    minWidth: 0,
+    flex: "1 1 120px",
+    minWidth: 120,
     overflow: "hidden"
   }),
+  boolCell: css.css({
+    flex: "0 0 auto",
+    minWidth: 0
+  }),
+  cellLabel: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0.25)
+  }),
+  required: css.css({
+    color: theme.colors.error.text
+  }),
+  removeCellWithLabel: css.css({
+    flex: "0 0 auto",
+    display: "flex",
+    alignItems: "flex-end",
+    paddingBottom: theme.spacing(0.25)
+  }),
+  itemError: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.error.text
+  }),
   limitNote: css.css({
     fontSize: theme.typography.bodySmall.fontSize,
     color: theme.colors.text.secondary
   })
 });
 
-function ComplexFieldNote({ count, label }) {
+const StringArrayInput = (props) => {
+  const { value, onChange, placeholder, disabled, itemLabel = "item" } = props;
   const styles = ui.useStyles2(getStyles$c);
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, count > 0 ? `${count} ${label.toLowerCase()} configured.` : `No ${label.toLowerCase()} configured.`, " Configure in Grafana UI."));
-}
+  const items = Array.isArray(value) ? value : [];
+  const lastInputRef = React.useRef(null);
+  const shouldFocusLastRef = React.useRef(false);
+  React.useEffect(() => {
+    if (shouldFocusLastRef.current && lastInputRef.current) {
+      lastInputRef.current.focus();
+      shouldFocusLastRef.current = false;
+    }
+  }, [items.length]);
+  const addItem = () => {
+    shouldFocusLastRef.current = true;
+    onChange([...items, ""]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, val) => {
+    onChange(items.map((item, i) => i === index ? val : item));
+  };
+  const isItemValid = (index, val) => {
+    const trimmed = val.trim();
+    if (trimmed === "") {
+      return false;
+    }
+    return !items.some((item, i) => i !== index && item.trim() === trimmed);
+  };
+  const handleEnter = (index, currentValue) => {
+    if (!isItemValid(index, currentValue)) {
+      return;
+    }
+    if (index === items.length - 1) {
+      shouldFocusLastRef.current = true;
+      onChange([...items, ""]);
+    }
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1, key: i }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      ref: i === items.length - 1 ? lastInputRef : void 0,
+      value: item,
+      placeholder: placeholder != null ? placeholder : itemLabel,
+      disabled,
+      onChange: (e) => updateItem(i, e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleEnter(i, e.currentTarget.value);
+        }
+      }
+    }
+  )), !disabled && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `Remove ${itemLabel}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": `Remove ${itemLabel}`,
+      onClick: () => removeItem(i),
+      type: "button"
+    }
+  )))), !disabled && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", onClick: addItem, type: "button" }, "Add")));
+};
 const getStyles$c = (theme) => ({
-  note: css.css({
-    display: "inline-flex",
-    alignItems: "center",
-    gap: theme.spacing(0.5),
-    padding: `${theme.spacing(0.5)} ${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}`
+  inputCell: css.css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
   })
 });
 
-function renderFieldInput(field, formField, disabled) {
-  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+function renderFieldInput(field, formField, disabled, errorMessage, setValue) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
   const value = formField.value;
   const placeholder = (_a = field.ui) == null ? void 0 : _a.placeholder;
   const label = (_b = field.label) != null ? _b : field.key;
+  if (((_c = field.ui) == null ? void 0 : _c.component) === "fileUpload" && field.ui.fileMapping && setValue) {
+    return /* @__PURE__ */ React__default.default.createElement(FileUploadField, { field, formField, disabled, setValue });
+  }
   if (field.target === "secureJsonData" || field.semanticType === "password" || field.semanticType === "token") {
     return /* @__PURE__ */ React__default.default.createElement(SecureFieldInput, { formField, placeholder: placeholder != null ? placeholder : label, disabled, label });
   }
-  if (field.valueType === "boolean") {
-    return /* @__PURE__ */ React__default.default.createElement(ui.Switch, { value: !!value, onChange: (e) => formField.onChange(e.currentTarget.checked), disabled });
-  }
-  if (field.valueType === "number") {
-    return /* @__PURE__ */ React__default.default.createElement(
-      ui.Input,
-      {
-        ...formField,
-        value: value !== void 0 && value !== null ? Number(value) : "",
-        type: "number",
-        placeholder,
-        disabled,
-        onChange: (e) => {
-          const n = e.currentTarget.valueAsNumber;
-          formField.onChange(Number.isNaN(n) ? void 0 : n);
-        }
-      }
-    );
-  }
-  if (((_c = field.ui) == null ? void 0 : _c.component) === "radio") {
-    const options = ((_e = (_d = field.ui) == null ? void 0 : _d.options) != null ? _e : []).map((opt) => ({
+  if (((_d = field.ui) == null ? void 0 : _d.component) === "radio") {
+    const options = ((_f = (_e = field.ui) == null ? void 0 : _e.options) != null ? _f : []).map((opt) => ({
       label: opt.label,
       value: String(opt.value),
       description: opt.description
@@ -9307,13 +9798,20 @@ function renderFieldInput(field, formField, disabled) {
       {
         options,
         value: String(value != null ? value : ""),
-        onChange: (v) => formField.onChange(v),
+        onChange: (v) => {
+          if (field.valueType === "number") {
+            const n = Number(v);
+            formField.onChange(Number.isNaN(n) ? v : n);
+          } else {
+            formField.onChange(v);
+          }
+        },
         disabled
       }
     ));
   }
-  if (((_f = field.ui) == null ? void 0 : _f.component) === "select") {
-    const options = ((_h = (_g = field.ui) == null ? void 0 : _g.options) != null ? _h : []).map((opt) => ({
+  if (((_g = field.ui) == null ? void 0 : _g.component) === "select") {
+    const options = ((_i = (_h = field.ui) == null ? void 0 : _h.options) != null ? _i : []).map((opt) => ({
       label: opt.label,
       value: String(opt.value),
       description: opt.description
@@ -9328,10 +9826,29 @@ function renderFieldInput(field, formField, disabled) {
       }
     );
   }
+  if (field.valueType === "boolean") {
+    return /* @__PURE__ */ React__default.default.createElement(ui.Switch, { value: !!value, onChange: (e) => formField.onChange(e.currentTarget.checked), disabled });
+  }
+  if (field.valueType === "number") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.Input,
+      {
+        ...formField,
+        value: value !== void 0 && value !== null ? Number(value) : "",
+        type: "number",
+        placeholder,
+        disabled,
+        onChange: (e) => {
+          const n = e.currentTarget.valueAsNumber;
+          formField.onChange(Number.isNaN(n) ? void 0 : n);
+        }
+      }
+    );
+  }
   if (field.semanticType === "url") {
     return /* @__PURE__ */ React__default.default.createElement(ui.Input, { ...formField, value: String(value != null ? value : ""), type: "url", placeholder, disabled });
   }
-  if (((_i = field.ui) == null ? void 0 : _i.component) === "textarea") {
+  if (((_j = field.ui) == null ? void 0 : _j.component) === "textarea") {
     return /* @__PURE__ */ React__default.default.createElement(
       ui.TextArea,
       {
@@ -9339,27 +9856,50 @@ function renderFieldInput(field, formField, disabled) {
         value: String(value != null ? value : ""),
         placeholder,
         disabled,
-        rows: (_k = (_j = field.ui) == null ? void 0 : _j.rows) != null ? _k : 3
+        rows: (_l = (_k = field.ui) == null ? void 0 : _k.rows) != null ? _l : 3
       }
     );
   }
-  if (field.valueType === "array" && ((_l = field.item) == null ? void 0 : _l.valueType) === "string") {
+  if (((_m = field.storage) == null ? void 0 : _m.type) === "indexedPair") {
+    const items = Array.isArray(value) ? value : [];
+    const maxItems = (_p = (_o = (_n = field.validations) == null ? void 0 : _n.find((v) => v.type === "itemCount")) == null ? void 0 : _o.max) != null ? _p : 10;
+    const itemLabel = (_r = (_q = field.label) == null ? void 0 : _q.toLowerCase().replace(/s$/, "")) != null ? _r : "header";
+    return /* @__PURE__ */ React__default.default.createElement(
+      IndexedPairEditor,
+      {
+        value: items,
+        onChange: formField.onChange,
+        maxItems,
+        disabled,
+        itemLabel
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_s = field.item) == null ? void 0 : _s.valueType) === "string") {
     return /* @__PURE__ */ React__default.default.createElement(
       StringArrayInput,
       {
         value: Array.isArray(value) ? value : [],
         onChange: formField.onChange,
-        placeholder: placeholder != null ? placeholder : `Add ${label.toLowerCase()}\u2026`,
-        disabled
+        placeholder,
+        disabled,
+        itemLabel: label.toLowerCase().replace(/s$/, "")
       }
     );
   }
-  if (((_m = field.storage) == null ? void 0 : _m.type) === "indexedPair") {
-    const items = Array.isArray(value) ? value : [];
-    const maxItems = (_p = (_o = (_n = field.validations) == null ? void 0 : _n.find((v) => v.type === "itemCount")) == null ? void 0 : _o.max) != null ? _p : 10;
-    return /* @__PURE__ */ React__default.default.createElement(IndexedPairEditor, { value: items, onChange: formField.onChange, maxItems, disabled });
+  if (field.valueType === "array" && ((_t = field.item) == null ? void 0 : _t.valueType) === "object" && ((_u = field.item.fields) == null ? void 0 : _u.length)) {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ObjectArrayEditor,
+      {
+        field,
+        value,
+        onChange: formField.onChange,
+        disabled,
+        errorMessage
+      }
+    );
   }
-  if (field.valueType === "object" || field.valueType === "map" || field.valueType === "array" && (((_q = field.item) == null ? void 0 : _q.valueType) === "object" || ((_r = field.item) == null ? void 0 : _r.valueType) === "map")) {
+  if (field.valueType === "object" || field.valueType === "map" || field.valueType === "array" && (((_v = field.item) == null ? void 0 : _v.valueType) === "object" || ((_w = field.item) == null ? void 0 : _w.valueType) === "map")) {
     const count = Array.isArray(value) ? value.length : 0;
     return /* @__PURE__ */ React__default.default.createElement(ComplexFieldNote, { count, label });
   }
@@ -9417,8 +9957,8 @@ const getWizardStyles = (theme) => ({
     color: theme.colors.text.primary
   }),
   stepCount: css.css({
-    fontSize: "11px",
-    fontWeight: "normal",
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
     color: theme.colors.text.secondary
   }),
   navActions: css.css({
@@ -9481,12 +10021,22 @@ const getWizardStyles = (theme) => ({
     minWidth: 0
   }),
   fieldError: css.css({
-    fontSize: "11px",
+    fontSize: theme.typography.bodySmall.fontSize,
     color: theme.colors.error.text
   })
 });
 
-function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, fieldById }) {
+function SchemaField({
+  field,
+  control,
+  errors,
+  disabled,
+  dsUid,
+  watchedValues,
+  fieldById,
+  celContext,
+  setValue
+}) {
   const styles = ui.useStyles2(getWizardStyles);
   const activeOverride = resolveActiveOverride(field, watchedValues, fieldById);
   const fk = formKey(field);
@@ -9507,7 +10057,7 @@ function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, f
       }
     );
   }
-  const required = isFieldRequired(field, watchedValues, fieldById);
+  const required = isFieldRequired(field, watchedValues, fieldById, celContext);
   const validationRules = buildValidationRules(field, required);
   return /* @__PURE__ */ React__default.default.createElement(
     reactHookForm.Controller,
@@ -9522,6 +10072,7 @@ function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, f
         const description = (_c = activeOverride == null ? void 0 : activeOverride.description) != null ? _c : field.description;
         const effectiveField = activeOverride ? {
           ...field,
+          description,
           ui: {
             ...field.ui,
             placeholder: (_e = activeOverride.placeholder) != null ? _e : (_d = field.ui) == null ? void 0 : _d.placeholder
@@ -9529,18 +10080,14 @@ function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, f
         } : field;
         const isReadOnly = !!(activeOverride == null ? void 0 : activeOverride.readOnly);
         const isBool = field.valueType === "boolean";
-        return /* @__PURE__ */ React__default.default.createElement("div", { className: isBool ? styles.fieldRowCenter : styles.fieldRow }, /* @__PURE__ */ React__default.default.createElement("div", { className: isBool ? styles.fieldLabelRowCompact : styles.fieldLabelRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldLabel }, label, required && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldRequired }, "*")), description && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs", className: styles.fieldInfoIcon }))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldInputCol }, renderFieldInput(effectiveField, formField, disabled || isReadOnly), errorMessage && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldError }, errorMessage)));
+        return /* @__PURE__ */ React__default.default.createElement("div", { className: isBool ? styles.fieldRowCenter : styles.fieldRow }, /* @__PURE__ */ React__default.default.createElement("div", { className: isBool ? styles.fieldLabelRowCompact : styles.fieldLabelRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldLabel }, label, required && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldRequired }, "*")), description && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs", className: styles.fieldInfoIcon }))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldInputCol }, renderFieldInput(effectiveField, formField, disabled || isReadOnly, errorMessage, setValue), errorMessage && !parseItemErrors(errorMessage) && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldError }, errorMessage)));
       }
     }
   );
 }
 
-function AuthorizationHeaderField({
-  headersFieldKey,
-  control,
-  disabled,
-  watchedValues
-}) {
+const AuthorizationHeaderField = (props) => {
+  const { headersFieldKey, control, disabled, watchedValues } = props;
   const styles = ui.useStyles2(getWizardStyles);
   const items = React.useMemo(
     () => Array.isArray(watchedValues[headersFieldKey]) ? watchedValues[headersFieldKey] : [],
@@ -9578,7 +10125,7 @@ function AuthorizationHeaderField({
       }
     }
   );
-}
+};
 
 const getTabStyles = (theme) => ({
   root: css.css({
@@ -9628,7 +10175,7 @@ const getTabStyles = (theme) => ({
     width: 12,
     flexShrink: 0,
     alignSelf: "flex-start",
-    paddingTop: 4
+    paddingTop: theme.spacing(0.5)
   }),
   navDot: css.css({
     width: 10,
@@ -9674,7 +10221,7 @@ const getTabStyles = (theme) => ({
   }),
   navLabel: css.css({
     fontSize: theme.typography.body.fontSize,
-    color: "rgba(204, 204, 220, 0.65)",
+    color: theme.colors.text.secondary,
     lineHeight: 1.4
   }),
   navLabelActive: css.css({
@@ -9756,8 +10303,8 @@ const getTabStyles = (theme) => ({
     textAlign: "left"
   }),
   sectionBadge: css.css({
-    fontSize: "11px",
-    fontWeight: "normal",
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
     color: theme.colors.text.disabled,
     border: `1px solid ${theme.colors.border.weak}`,
     borderRadius: theme.shape.radius.pill,
@@ -9875,15 +10422,18 @@ function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderA
     handleSubmit,
     errors,
     watchedValues,
+    celContext,
     initializing,
     fetchError,
     submitting,
     submitError,
     readOnly,
     isFieldVisible,
+    isFieldDisabled,
     isGroupValid,
     groupHasData,
-    onSubmit
+    onSubmit,
+    setValue
   } = form;
   const displayGroups = React.useMemo(() => resolvedGroups.filter((g) => g.group.id !== "_required"), [resolvedGroups]);
   const [expandedSections, setExpandedSections] = React.useState(() => {
@@ -10011,10 +10561,12 @@ function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderA
             field,
             control,
             errors,
-            disabled: allDisabled,
+            disabled: allDisabled || isFieldDisabled(field),
             dsUid,
             watchedValues,
-            fieldById
+            fieldById,
+            celContext,
+            setValue
           }
         )), showHeaders && /* @__PURE__ */ React__default.default.createElement(
           AuthorizationHeaderField,
@@ -10128,7 +10680,7 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
       return;
     }
     for (const { sourceKey, effects } of fieldsWithEffects) {
-      const currentVal = watchedValues[sourceKey];
+      const currentVal = getWatchedValue(watchedValues, sourceKey);
       const prevVal = prevEffectValuesRef.current[sourceKey];
       if (currentVal === prevVal) {
         continue;
@@ -10159,6 +10711,7 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
         return {
           depKey: depField ? formKey(depField) : parsed.field,
           depValue: parsed.value,
+          negate: parsed.negate,
           defaultValue: ov.defaultValue
         };
       }).filter(Boolean);
@@ -10176,42 +10729,70 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
     }
     for (const { targetKey, fieldDefault, overrides } of fieldsWithOverrideDefaults) {
       for (const ov of overrides) {
-        const currentDepVal = String((_a = watchedValues[ov.depKey]) != null ? _a : "");
+        const currentDepVal = String((_a = getWatchedValue(watchedValues, ov.depKey)) != null ? _a : "");
         const trackKey = `${targetKey}::${ov.depKey}`;
         const prevDepVal = prevOverrideDepRef.current[trackKey];
         if (currentDepVal === prevDepVal) {
           continue;
         }
         prevOverrideDepRef.current[trackKey] = currentDepVal;
-        if (currentDepVal === ov.depValue) {
+        const active = evaluateDependsOn({ value: ov.depValue, negate: ov.negate }, currentDepVal);
+        const wasActive = prevDepVal !== void 0 && evaluateDependsOn({ value: ov.depValue, negate: ov.negate }, prevDepVal);
+        if (active) {
           setValue(targetKey, ov.defaultValue);
-        } else if (prevDepVal === ov.depValue && fieldDefault !== void 0) {
+        } else if (wasActive && fieldDefault !== void 0) {
           setValue(targetKey, fieldDefault);
         }
       }
     }
   }, [watchedValues, fieldsWithOverrideDefaults, initializing, setValue]);
+  const celContext = React.useMemo(() => {
+    const ctx = {};
+    for (const f of fieldById.values()) {
+      const fk = formKey(f);
+      const val = getWatchedValue(watchedValues, fk);
+      if (val !== void 0) {
+        const parts = f.id.split(".");
+        let current = ctx;
+        for (let i = 0; i < parts.length - 1; i++) {
+          if (!(parts[i] in current) || typeof current[parts[i]] !== "object" || current[parts[i]] === null) {
+            current[parts[i]] = {};
+          }
+          current = current[parts[i]];
+        }
+        current[parts[parts.length - 1]] = val;
+      }
+    }
+    return ctx;
+  }, [watchedValues, fieldById]);
   const isFieldVisible = React.useCallback(
     (field) => {
-      var _a, _b;
-      if (field.kind === "virtual" && !field.ui) {
-        return false;
-      }
-      if ((_a = field.tags) == null ? void 0 : _a.some((t) => t.startsWith("managed-by:"))) {
-        return false;
-      }
-      if (!field.dependsOn) {
-        return true;
-      }
-      const parsed = parseDependsOn(field.dependsOn);
-      if (!parsed) {
-        return true;
+      function check(f, visited) {
+        var _a;
+        if (f.kind === "virtual" && !f.ui) {
+          return false;
+        }
+        if ((_a = f.tags) == null ? void 0 : _a.some((t) => t.startsWith("managed-by:"))) {
+          return false;
+        }
+        if (!f.dependsOn) {
+          return true;
+        }
+        const refs = extractFieldRefs(f.dependsOn);
+        for (const ref of refs) {
+          const depField = fieldById.get(ref);
+          if (depField && !visited.has(depField.id)) {
+            visited.add(f.id);
+            if (!check(depField, visited)) {
+              return false;
+            }
+          }
+        }
+        return evaluateCelExpression(f.dependsOn, celContext);
       }
-      const depField = fieldById.get(parsed.field);
-      const depKey = depField ? formKey(depField) : parsed.field;
-      return String((_b = watchedValues[depKey]) != null ? _b : "") === parsed.value;
+      return check(field, /* @__PURE__ */ new Set());
     },
-    [watchedValues, fieldById]
+    [celContext, fieldById]
   );
   const onSubmit = React.useCallback(
     async (data) => {
@@ -10251,8 +10832,8 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
         if (errors[formKey(field)]) {
           return false;
         }
-        if (isFieldRequired(field, watchedValues, fieldById)) {
-          const val = watchedValues[formKey(field)];
+        if (isFieldRequired(field, watchedValues, fieldById, celContext)) {
+          const val = getWatchedValue(watchedValues, formKey(field));
           if (val === SECURE_FIELD_CONFIGURED) {
             continue;
           }
@@ -10263,12 +10844,21 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
       }
       return true;
     },
-    [errors, watchedValues, fieldById, isFieldVisible]
+    [errors, watchedValues, fieldById, celContext, isFieldVisible]
+  );
+  const isFieldDisabled = React.useCallback(
+    (field) => {
+      if (!field.disabledWhen) {
+        return false;
+      }
+      return evaluateCelExpression(field.disabledWhen, celContext);
+    },
+    [celContext]
   );
   const groupHasData = React.useCallback(
     (group) => {
       for (const field of group.fields) {
-        const val = watchedValues[formKey(field)];
+        const val = getWatchedValue(watchedValues, formKey(field));
         if (val === void 0 || val === null || val === "" || val === false) {
           continue;
         }
@@ -10292,6 +10882,7 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
     trigger,
     errors,
     watchedValues,
+    celContext,
     // State
     initializing,
     fetchError,
@@ -10300,9 +10891,11 @@ function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
     readOnly,
     // Callbacks
     isFieldVisible,
+    isFieldDisabled,
     isGroupValid,
     groupHasData,
-    onSubmit
+    onSubmit,
+    setValue
   };
 }
 
@@ -10349,13 +10942,16 @@ function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, rend
     trigger,
     errors,
     watchedValues,
+    celContext,
     initializing,
     fetchError,
     submitting,
     submitError,
     readOnly,
     isFieldVisible,
-    onSubmit
+    isFieldDisabled,
+    onSubmit,
+    setValue
   } = form;
   const arrowSteps = React.useMemo(() => {
     const requiredGroup = resolvedGroups.find((g) => g.group.id === "_required");
@@ -10401,8 +10997,8 @@ function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, rend
       if (errors[formKey(field)]) {
         return false;
       }
-      if (isFieldRequired(field, watchedValues, fieldById)) {
-        const val = watchedValues[formKey(field)];
+      if (isFieldRequired(field, watchedValues, fieldById, celContext)) {
+        const val = getWatchedValue(watchedValues, formKey(field));
         if (val === SECURE_FIELD_CONFIGURED) {
           continue;
         }
@@ -10412,7 +11008,7 @@ function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, rend
       }
     }
     return true;
-  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById]);
+  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById, celContext]);
   const goNext = React.useCallback(async () => {
     if (!currentResolved) {
       return;
@@ -10506,10 +11102,12 @@ function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, rend
       field,
       control,
       errors,
-      disabled: allDisabled,
+      disabled: allDisabled || isFieldDisabled(field),
       dsUid,
       watchedValues,
-      fieldById
+      fieldById,
+      celContext,
+      setValue
     }
   )), (currentResolved.group.id === "_required" || currentResolved.group.id === "auth") && httpHeadersField && /* @__PURE__ */ React__default.default.createElement(
     AuthorizationHeaderField,
@@ -12176,6 +12774,21 @@ function generateTroubleshootingFields(schema) {
   return result;
 }
 
+const ROOT_CONFIG_FIELDS = [
+  "name",
+  "type",
+  "id",
+  "uid",
+  "access",
+  "url",
+  "basicAuth",
+  "basicAuthUser",
+  "user",
+  "isDefault",
+  "database",
+  "withCredentials"
+];
+
 function yamlIndent(depth) {
   return "  ".repeat(depth);
 }
@@ -12528,6 +13141,81 @@ function datasourceToProvisioningYaml(ds, schema) {
   lines.push("    #   mySecret: xxxxxx");
   return lines.join("\n");
 }
+function getYamlRenderOptions(ds) {
+  var _a, _b, _c;
+  return {
+    jsonDataKeys: Object.keys((_a = ds.jsonData) != null ? _a : {}).sort(),
+    secureKeys: [
+      .../* @__PURE__ */ new Set([
+        ...Object.keys((_b = ds.secureJsonData) != null ? _b : {}),
+        ...Object.keys((_c = ds.secureJsonFields) != null ? _c : {})
+      ])
+    ].sort()
+  };
+}
+const configToYaml = (ds, options = {}) => {
+  var _a, _b, _c;
+  const { jsonDataKeys, secureKeys } = {
+    ...getYamlRenderOptions(ds),
+    ...options
+  };
+  const root = {};
+  for (const key of ROOT_CONFIG_FIELDS) {
+    root[key] = (_a = ds[key]) != null ? _a : "";
+  }
+  const jsonData = (_b = ds.jsonData) != null ? _b : {};
+  if (jsonDataKeys.length > 0) {
+    const jsonDataYaml = {};
+    for (const key of jsonDataKeys) {
+      jsonDataYaml[key] = (_c = jsonData[key]) != null ? _c : "";
+    }
+    root.jsonData = jsonDataYaml;
+  }
+  if (secureKeys.length > 0) {
+    const secureJsonData = {};
+    for (const key of secureKeys) {
+      secureJsonData[key] = "********";
+    }
+    root.secureJsonData = secureJsonData;
+  }
+  return yaml__default.default.dump(root, { lineWidth: -1, sortKeys: false, noRefs: true }).trimEnd();
+};
+const formatYamlDiff = (existing, body) => {
+  var _a, _b, _c, _d, _e, _f;
+  const updated = { ...existing, ...body };
+  const existingJD = (_a = existing.jsonData) != null ? _a : {};
+  const updatedJD = (_b = updated.jsonData) != null ? _b : {};
+  const jsonDataKeys = [.../* @__PURE__ */ new Set([...Object.keys(existingJD), ...Object.keys(updatedJD)])].sort();
+  const secureKeys = [
+    .../* @__PURE__ */ new Set([
+      ...Object.keys((_c = existing.secureJsonData) != null ? _c : {}),
+      ...Object.keys((_d = existing.secureJsonFields) != null ? _d : {}),
+      ...Object.keys((_e = updated.secureJsonData) != null ? _e : {}),
+      ...Object.keys((_f = updated.secureJsonFields) != null ? _f : {})
+    ])
+  ].sort();
+  const currentYaml = configToYaml(existing, { jsonDataKeys, secureKeys });
+  const updatedYaml = configToYaml(updated, { jsonDataKeys, secureKeys });
+  const oldLines = currentYaml.split("\n");
+  const newLines = updatedYaml.split("\n");
+  const maxLen = Math.max(oldLines.length, newLines.length);
+  const diffLines = [];
+  for (let i = 0; i < maxLen; i++) {
+    const oldLine = oldLines[i];
+    const newLine = newLines[i];
+    if (oldLine === newLine) {
+      diffLines.push(` ${oldLine}`);
+      continue;
+    }
+    if (oldLine !== void 0) {
+      diffLines.push(`-${oldLine}`);
+    }
+    if (newLine !== void 0) {
+      diffLines.push(`+${newLine}`);
+    }
+  }
+  return "```diff\n" + diffLines.join("\n") + "\n```";
+};
 
 exports.getConfigSchema = schemas.getConfigSchema;
 exports.AccessoryButton = AccessoryButton;
@@ -12602,17 +13290,22 @@ exports.TableSelector = TableSelector;
 exports.TokenType = TokenType;
 exports.buildDatasourceConfigPayload = buildDatasourceConfigPayload;
 exports.computeVirtualFieldValues = computeVirtualFieldValues;
+exports.configToYaml = configToYaml;
 exports.convertLegacyAuthProps = convertLegacyAuthProps;
 exports.datasourceToProvisioningYaml = datasourceToProvisioningYaml;
 exports.evaluateComputedRead = evaluateComputedRead;
+exports.evaluateDependsOn = evaluateDependsOn;
 exports.expandIndexedPair = expandIndexedPair;
 exports.fetchExistingValues = fetchExistingValues;
+exports.findActiveSecureOverride = findActiveSecureOverride;
 exports.flattenIndexedPair = flattenIndexedPair;
 exports.formKey = formKey;
 exports.formatDate = formatDate;
+exports.formatYamlDiff = formatYamlDiff;
 exports.generateLLMHint = generateLLMHint;
 exports.generateTroubleshootingFields = generateTroubleshootingFields;
 exports.getStandardSQLCompletionProvider = getStandardSQLCompletionProvider;
+exports.getWatchedValue = getWatchedValue;
 exports.grafanaStandardSQLLanguage = language;
 exports.grafanaStandardSQLLanguageConf = conf;
 exports.parseDependsOn = parseDependsOn;
@@ -12620,6 +13313,7 @@ exports.resolveActiveOverride = resolveActiveOverride;
 exports.resolveGroups = resolveGroups;
 exports.resolvePluginName = resolvePluginName;
 exports.resolveRequiredFieldsGroup = resolveRequiredFieldsGroup;
+exports.resolveSecureKeyTemplate = resolveSecureKeyTemplate;
 exports.submitDatasourceConfig = submitDatasourceConfig;
 exports.toOption = toOption;
 exports.toProvisioningYaml = toProvisioningYaml;