@grafana/plugin-ui 0.14.0-dev.1 → 0.14.1-dsconfig.4bdebf6

package/dist/cjs/index.cjs

@@ -11,23 +11,26 @@ var e2eSelectors = require('@grafana/e2e-selectors');
 var runtime = require('@grafana/runtime');
 var reactUse = require('react-use');
 var ui$1 = require('@react-awesome-query-builder/ui');
-var lodash = require('lodash');
 var uuid = require('uuid');
+var lodash = require('lodash');
 var AutoSizer = require('react-virtualized-auto-sizer');
-var sqlFormatter = require('sql-formatter-plus');
+var sqlFormatter = require('sql-formatter');
 var rxjs = require('rxjs');
 var operators$1 = require('rxjs/operators');
+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');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var Calendar__default = /*#__PURE__*/_interopDefaultCompat(Calendar);
 var AutoSizer__default = /*#__PURE__*/_interopDefaultCompat(AutoSizer);
-var sqlFormatter__default = /*#__PURE__*/_interopDefaultCompat(sqlFormatter);
 var Prism__default = /*#__PURE__*/_interopDefaultCompat(Prism);
+var yaml__default = /*#__PURE__*/_interopDefaultCompat(yaml);
 
 const QueryEditorRow = (props) => {
   var _a, _b;
@@ -76,7 +79,7 @@ function Segment(props) {
   );
 }
 
-const getStyles$r = (theme) => {
+const getStyles$v = (theme) => {
   const containerBorder = theme.isDark ? theme.v1.palette.dark9 : theme.v1.palette.gray5;
   return {
     container: css.css`
@@ -226,7 +229,7 @@ const getBodyStyles = (theme) => {
 
 const DatePicker = React.memo((props) => {
   const theme = ui.useTheme2();
-  const styles = getStyles$r(theme);
+  const styles = getStyles$v(theme);
   const { isOpen, onClose } = props;
   if (!isOpen) {
     return null;
@@ -256,7 +259,7 @@ const Body = React.memo(({ value, onChange }) => {
 });
 Body.displayName = "Body";
 
-function getStyles$q() {
+function getStyles$u() {
   return {
     input: css.css({
       /* hides the native Calendar picker icon given when using type=date */
@@ -272,7 +275,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$q();
+  const styles = getStyles$u();
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     ui.Input,
     {
@@ -339,15 +342,15 @@ function getSignatureDisplayModel(signature) {
 }
 PluginSignatureBadge.displayName = "PluginSignatureBadge";
 
-var __defProp$3 = Object.defineProperty;
-var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$4 = Object.defineProperty;
+var __defNormalProp$4 = (obj, key, value) => key in obj ? __defProp$4(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$4 = (obj, key, value) => __defNormalProp$4(obj, typeof key !== "symbol" ? key + "" : key, value);
 class DataSourcePicker extends React.PureComponent {
   constructor(props) {
     super(props);
-    __publicField$3(this, "dataSourceSrv", runtime.getDataSourceSrv());
-    __publicField$3(this, "state", {});
-    __publicField$3(this, "onChange", (item) => {
+    __publicField$4(this, "dataSourceSrv", runtime.getDataSourceSrv());
+    __publicField$4(this, "state", {});
+    __publicField$4(this, "onChange", (item) => {
       const dsSettings = this.dataSourceSrv.getInstanceSettings(item.value);
       if (dsSettings) {
         this.props.onChange(dsSettings);
@@ -427,14 +430,14 @@ class DataSourcePicker extends React.PureComponent {
     ));
   }
 }
-__publicField$3(DataSourcePicker, "defaultProps", {
+__publicField$4(DataSourcePicker, "defaultProps", {
   autoFocus: false,
   openMenuOnFocus: false,
   placeholder: "Select datasource"
 });
 
 const { FormField, Switch } = ui.LegacyForms;
-const getStyles$p = ui.stylesFactory(() => ({
+const getStyles$t = ui.stylesFactory(() => ({
   firstRow: css.css`
     display: flex;
   `,
@@ -451,7 +454,7 @@ const getStyles$p = ui.stylesFactory(() => ({
 }));
 const DataLink = (props) => {
   const { value, onChange, onDelete, suggestions, className } = props;
-  const styles = getStyles$p();
+  const styles = getStyles$t();
   const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
   const handleChange = (field) => (event) => {
     onChange({
@@ -568,7 +571,7 @@ function useInternalLink(datasourceUid) {
   return [showInternalLink, setShowInternalLink];
 }
 
-const getStyles$o = (theme) => ({
+const getStyles$s = (theme) => ({
   infoText: css.css`
     padding-bottom: ${theme.v1.spacing.md};
     color: ${theme.v1.colors.textWeak};
@@ -580,7 +583,7 @@ const getStyles$o = (theme) => ({
 const DataLinks = (props) => {
   const { value, onChange } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$o(theme);
+  const styles = getStyles$s(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,
@@ -641,110 +644,21 @@ var QueryEditorExpressionType = /* @__PURE__ */ ((QueryEditorExpressionType2) =>
   return QueryEditorExpressionType2;
 })(QueryEditorExpressionType || {});
 
-function getRawSqlFn(db) {
-  return db.toRawSql ? db.toRawSql : (query) => toRawSql(query, Boolean(db.disableDatasets));
-}
-function toRawSql({ sql, dataset, catalog, table }, disableDatasets) {
-  var _a, _b, _c, _d;
-  let rawQuery = "";
-  if (!sql || !haveColumns(sql.columns)) {
-    return rawQuery;
-  }
-  rawQuery += createSelectClause(sql.columns);
-  if (catalog && dataset && table) {
-    rawQuery += `FROM ${catalog}.${dataset}.${table} `;
-  } else if (!disableDatasets && dataset && table) {
-    rawQuery += `FROM ${dataset}.${table} `;
-  } else if (table) {
-    rawQuery += `FROM ${table} `;
-  }
-  if (sql.whereString) {
-    rawQuery += `WHERE ${sql.whereString} `;
-  }
-  if ((_b = (_a = sql.groupBy) == null ? void 0 : _a[0]) == null ? void 0 : _b.property.name) {
-    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !lodash.isEmpty(g));
-    rawQuery += `GROUP BY ${groupBy.join(", ")} `;
-  }
-  if ((_c = sql.orderBy) == null ? void 0 : _c.property.name) {
-    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
-  }
-  if (((_d = sql.orderBy) == null ? void 0 : _d.property.name) && sql.orderByDirection) {
-    rawQuery += `${sql.orderByDirection} `;
-  }
-  if (sql.limit !== void 0 && sql.limit >= 0) {
-    rawQuery += `LIMIT ${sql.limit} `;
-  }
-  return rawQuery;
-}
-function createSelectClause(sqlColumns) {
-  const columns = sqlColumns.map((c) => {
-    var _a, _b;
-    let rawColumn = "";
-    if (c.name) {
-      rawColumn += `${c.name}(${(_a = c.parameters) == null ? void 0 : _a.map((p) => `${p.name}`)})`;
-    } else {
-      rawColumn += `${(_b = c.parameters) == null ? void 0 : _b.map((p) => `${p.name}`)}`;
-    }
-    return rawColumn;
-  });
-  return `SELECT ${columns.join(", ")} `;
-}
-function haveColumns(columns) {
-  if (!columns) {
-    return false;
-  }
-  const haveColumn = columns.some((c) => {
-    var _a, _b;
-    return ((_a = c.parameters) == null ? void 0 : _a.length) || ((_b = c.parameters) == null ? void 0 : _b.some((p) => p.name));
-  });
-  const haveFunction = columns.some((c) => c.name);
-  return haveColumn || haveFunction;
-}
-function setGroupByField(field) {
-  return {
-    type: QueryEditorExpressionType.GroupBy,
-    property: {
-      type: QueryEditorPropertyType.String,
-      name: field
-    }
-  };
-}
-function setPropertyField(field) {
-  return {
-    type: QueryEditorExpressionType.Property,
-    property: {
-      type: QueryEditorPropertyType.String,
-      name: field
-    }
-  };
-}
-function createFunctionField(functionName) {
-  return {
-    type: QueryEditorExpressionType.Function,
-    name: functionName,
-    parameters: []
-  };
-}
-
-function applyQueryDefaults(q) {
-  let editorMode = (q == null ? void 0 : q.editorMode) || EditorMode.Builder;
-  if ((q == null ? void 0 : q.editorMode) === void 0 && (q == null ? void 0 : q.rawSql) !== void 0) {
-    editorMode = EditorMode.Code;
-  }
-  const result = {
-    ...q,
-    refId: (q == null ? void 0 : q.refId) || "A",
-    format: (q == null ? void 0 : q.format) !== void 0 ? q.format : QueryFormat.Table,
-    rawSql: (q == null ? void 0 : q.rawSql) || "",
-    editorMode,
-    sql: (q == null ? void 0 : q.sql) || {
-      columns: [createFunctionField()],
-      groupBy: [setGroupByField()],
-      limit: 50
-    }
-  };
-  return result;
-}
+var TokenType = /* @__PURE__ */ ((TokenType2) => {
+  TokenType2["Parenthesis"] = "delimiter.parenthesis.sql";
+  TokenType2["Whitespace"] = "white.sql";
+  TokenType2["Keyword"] = "keyword.sql";
+  TokenType2["Delimiter"] = "delimiter.sql";
+  TokenType2["Operator"] = "operator.sql";
+  TokenType2["Identifier"] = "identifier.sql";
+  TokenType2["IdentifierQuote"] = "identifier.quote.sql";
+  TokenType2["Type"] = "type.sql";
+  TokenType2["Function"] = "predefined.sql";
+  TokenType2["Number"] = "number.sql";
+  TokenType2["String"] = "string.sql";
+  TokenType2["Variable"] = "variable.sql";
+  return TokenType2;
+})(TokenType || {});
 
 class LinkedToken {
   constructor(type, value, range, previous, next) {
@@ -899,21 +813,6 @@ var MacroType = /* @__PURE__ */ ((MacroType2) => {
   MacroType2[MacroType2["Table"] = 4] = "Table";
   return MacroType2;
 })(MacroType || {});
-var TokenType = /* @__PURE__ */ ((TokenType2) => {
-  TokenType2["Parenthesis"] = "delimiter.parenthesis.sql";
-  TokenType2["Whitespace"] = "white.sql";
-  TokenType2["Keyword"] = "keyword.sql";
-  TokenType2["Delimiter"] = "delimiter.sql";
-  TokenType2["Operator"] = "operator.sql";
-  TokenType2["Identifier"] = "identifier.sql";
-  TokenType2["IdentifierQuote"] = "identifier.quote.sql";
-  TokenType2["Type"] = "type.sql";
-  TokenType2["Function"] = "predefined.sql";
-  TokenType2["Number"] = "number.sql";
-  TokenType2["String"] = "string.sql";
-  TokenType2["Variable"] = "variable.sql";
-  return TokenType2;
-})(TokenType || {});
 var StatementPosition = /* @__PURE__ */ ((StatementPosition2) => {
   StatementPosition2["Unknown"] = "unknown";
   StatementPosition2["SelectKeyword"] = "selectKeyword";
@@ -5456,6 +5355,91 @@ const QUERY_FORMAT_OPTIONS = [
 const backWardToOption = (value) => ({ label: value, value });
 const toOption = (_a = data.toOption) != null ? _a : backWardToOption;
 
+function getRawSqlFn(db) {
+  return db.toRawSql ? db.toRawSql : (query) => toRawSql(query, Boolean(db.disableDatasets));
+}
+function toRawSql({ sql, dataset, catalog, table }, disableDatasets) {
+  var _a, _b, _c, _d;
+  let rawQuery = "";
+  if (!sql || !haveColumns(sql.columns)) {
+    return rawQuery;
+  }
+  rawQuery += createSelectClause(sql.columns);
+  if (catalog && dataset && table) {
+    rawQuery += `FROM ${catalog}.${dataset}.${table} `;
+  } else if (!disableDatasets && dataset && table) {
+    rawQuery += `FROM ${dataset}.${table} `;
+  } else if (table) {
+    rawQuery += `FROM ${table} `;
+  }
+  if (sql.whereString) {
+    rawQuery += `WHERE ${sql.whereString} `;
+  }
+  if ((_b = (_a = sql.groupBy) == null ? void 0 : _a[0]) == null ? void 0 : _b.property.name) {
+    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !lodash.isEmpty(g));
+    rawQuery += `GROUP BY ${groupBy.join(", ")} `;
+  }
+  if ((_c = sql.orderBy) == null ? void 0 : _c.property.name) {
+    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
+  }
+  if (((_d = sql.orderBy) == null ? void 0 : _d.property.name) && sql.orderByDirection) {
+    rawQuery += `${sql.orderByDirection} `;
+  }
+  if (sql.limit !== void 0 && sql.limit >= 0) {
+    rawQuery += `LIMIT ${sql.limit} `;
+  }
+  return rawQuery;
+}
+function createSelectClause(sqlColumns) {
+  const columns = sqlColumns.map((c) => {
+    var _a, _b;
+    let rawColumn = "";
+    if (c.name) {
+      rawColumn += `${c.name}(${(_a = c.parameters) == null ? void 0 : _a.map((p) => `${p.name}`)})`;
+    } else {
+      rawColumn += `${(_b = c.parameters) == null ? void 0 : _b.map((p) => `${p.name}`)}`;
+    }
+    return rawColumn;
+  });
+  return `SELECT ${columns.join(", ")} `;
+}
+function haveColumns(columns) {
+  if (!columns) {
+    return false;
+  }
+  const haveColumn = columns.some((c) => {
+    var _a, _b;
+    return ((_a = c.parameters) == null ? void 0 : _a.length) || ((_b = c.parameters) == null ? void 0 : _b.some((p) => p.name));
+  });
+  const haveFunction = columns.some((c) => c.name);
+  return haveColumn || haveFunction;
+}
+function setGroupByField(field) {
+  return {
+    type: QueryEditorExpressionType.GroupBy,
+    property: {
+      type: QueryEditorPropertyType.String,
+      name: field
+    }
+  };
+}
+function setPropertyField(field) {
+  return {
+    type: QueryEditorExpressionType.Property,
+    property: {
+      type: QueryEditorPropertyType.String,
+      name: field
+    }
+  };
+}
+function createFunctionField(functionName) {
+  return {
+    type: QueryEditorExpressionType.Function,
+    name: functionName,
+    parameters: []
+  };
+}
+
 const EditorStack = ({ children, wrap: wrapItems = true, ...props }) => {
   var _a, _b;
   return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { wrap: wrapItems ? "wrap" : void 0, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props }, children);
@@ -5495,7 +5479,7 @@ const getButtonStyles = (theme) => ({
 });
 
 const InputGroup = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$n);
+  const styles = ui.useStyles2(getStyles$r);
   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) });
@@ -5513,7 +5497,7 @@ const borderPriority = [
   "focused"
   // highest priority
 ];
-const getStyles$n = () => ({
+const getStyles$r = () => ({
   root: css.css({
     display: "flex",
     // Style the direct children of the component
@@ -5596,10 +5580,10 @@ const EditorFieldGroup = ({ children }) => {
 };
 
 const EditorHeader = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$m);
+  const styles = ui.useStyles2(getStyles$q);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, children);
 };
-const getStyles$m = (theme) => ({
+const getStyles$q = (theme) => ({
   root: css.css({
     display: "flex",
     flexWrap: "wrap",
@@ -5612,12 +5596,12 @@ const getStyles$m = (theme) => ({
 const EditorField$1 = (props) => {
   var _a;
   const { label, optional, tooltip, tooltipInteractive, children, width, ...fieldProps } = props;
-  const styles = ui.useStyles2(getStyles$l, width);
+  const styles = ui.useStyles2(getStyles$p, 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$l = (theme, width) => {
+const getStyles$p = (theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -5645,10 +5629,10 @@ const getStyles$l = (theme, width) => {
 };
 
 const EditorRow$1 = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$k);
+  const styles = ui.useStyles2(getStyles$o);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$k = (theme) => {
+const getStyles$o = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -5663,10 +5647,10 @@ const EditorRows$1 = ({ children }) => {
 };
 
 const EditorSwitch = (props) => {
-  const styles = getStyles$j();
+  const styles = getStyles$n();
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.switch }, /* @__PURE__ */ React__default.default.createElement(ui.Switch, { ...props }));
 };
-const getStyles$j = () => {
+const getStyles$n = () => {
   return {
     switch: css.css({
       display: "flex",
@@ -5688,7 +5672,7 @@ function InlineSelect({ label: labelProp, ...props }) {
     ValueContainer,
     SingleValue: ValueContainer
   };
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React__default.default.createElement(ui.Select, { openMenuOnFocus: true, inputId: id, ...props, components }));
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, labelProp && /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: id }, labelProp, ":", "\xA0"), /* @__PURE__ */ React__default.default.createElement(ui.Select, { inputId: id, ...props, components }));
 }
 const SelectContainer = (props) => {
   const { children } = props;
@@ -5724,10 +5708,10 @@ const getSelectStyles = (theme) => ({
 });
 
 const Space = ({ v = 0, h = 0, layout = "block" }) => {
-  const styles = ui.useStyles2(getStyles$i, v, h, layout);
+  const styles = ui.useStyles2(getStyles$m, v, h, layout);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.wrapper) });
 };
-const getStyles$i = (theme, v, h, layout) => ({
+const getStyles$m = (theme, v, h, layout) => ({
   wrapper: css.css([
     {
       paddingRight: theme.spacing(h != null ? h : 0),
@@ -5742,6 +5726,26 @@ const getStyles$i = (theme, v, h, layout) => ({
   ])
 });
 
+function applyQueryDefaults(q) {
+  let editorMode = (q == null ? void 0 : q.editorMode) || EditorMode.Builder;
+  if ((q == null ? void 0 : q.editorMode) === void 0 && (q == null ? void 0 : q.rawSql) !== void 0) {
+    editorMode = EditorMode.Code;
+  }
+  const result = {
+    ...q,
+    refId: (q == null ? void 0 : q.refId) || "A",
+    format: (q == null ? void 0 : q.format) !== void 0 ? q.format : QueryFormat.Table,
+    rawSql: (q == null ? void 0 : q.rawSql) || "",
+    editorMode,
+    sql: (q == null ? void 0 : q.sql) || {
+      columns: [createFunctionField()],
+      groupBy: [setGroupByField()],
+      limit: 50
+    }
+  };
+  return result;
+}
+
 function ConfirmModal({ isOpen, onCancel, onDiscard, onCopy }) {
   const buttonRef = React.useRef(null);
   React.useEffect(() => {
@@ -6131,13 +6135,32 @@ function QueryHeader({
   )))));
 }
 
-function formatSQL(q) {
-  return sqlFormatter__default.default.format(q).replace(/(\$ \{ .* \})|(\$ __)|(\$ \w+)/g, (m) => {
-    return m.replace(/\s/g, "");
+function formatSQL(q, language = "sql") {
+  const formatted = sqlFormatter.format(q, {
+    language,
+    paramTypes: {
+      custom: [
+        {
+          regex: "\\$\\s*\\{[^}]*\\}|\\$\\s*__\\w+(?:\\([^)]*\\))?|\\$\\s*\\w+"
+        }
+      ]
+    }
   });
+  return formatted.replace(
+    /(\$\s*\{[^}]*\})|(\$\s*__\w+(?:\([^)]*\))?)|(\$\s*\w+)/g,
+    (m) => m.replace(/\s/g, "")
+  );
 }
 
-function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }) {
+function QueryEditorRaw({
+  children,
+  onChange,
+  query,
+  width,
+  height,
+  completionProvider,
+  language = "sql"
+}) {
   const queryRef = React.useRef(query);
   React.useEffect(() => {
     queryRef.current = query;
@@ -6160,7 +6183,7 @@ function QueryEditorRaw({ children, onChange, query, width, height, completionPr
       height,
       query: query.rawSql,
       onChange: onRawQueryChange,
-      language: { id: "sql", completionProvider, formatter: formatSQL }
+      language: { id: "sql", completionProvider, formatter: (q) => formatSQL(q, language) }
     },
     children
   );
@@ -6265,6 +6288,10 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   if (!showTools && validationResult === void 0) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
+  const onFormatClick = () => {
+    runtime.reportInteraction("grafana_sql_query_editor_format_click");
+    onFormatCode == null ? void 0 : onFormatCode();
+  };
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React__default.default.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React__default.default.createElement(
     QueryValidator,
     {
@@ -6274,7 +6301,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
         validatorProps.onValidate(result);
       }
     }
-  )), showTools && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React__default.default.createElement(
+  )), showTools && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { onClick: onFormatClick, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React__default.default.createElement(
     ui.IconButton,
     {
       onClick: () => onExpand(!isExpanded),
@@ -6285,9 +6312,18 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
   ), /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Hit CTRL/CMD+Return to run query" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { className: styles.hint, name: "keyboard" })))));
 }
 
-function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
+function RawEditor({
+  db,
+  query,
+  onChange,
+  onRunQuery,
+  onValidate,
+  queryToValidate,
+  range,
+  language = "sql"
+}) {
   const theme = ui.useTheme2();
-  const styles = ui.useStyles2(getStyles$h);
+  const styles = ui.useStyles2(getStyles$l);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [toolboxRef, toolboxMeasure] = reactUse.useMeasure();
   const [editorRef, editorMeasure] = reactUse.useMeasure();
@@ -6299,6 +6335,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         completionProvider,
         query,
         width,
+        language,
         height: height ? height - toolboxMeasure.height : void 0,
         onChange
       },
@@ -6356,7 +6393,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
     renderEditor(true)
   ));
 }
-function getStyles$h(theme) {
+function getStyles$l(theme) {
   return {
     modal: css.css`
       width: 95vw;
@@ -6369,23 +6406,23 @@ function getStyles$h(theme) {
   };
 }
 
-function Preview({ rawSql }) {
+function Preview({ rawSql, language = "sql" }) {
   const [_, copyToClipboard] = reactUse.useCopyToClipboard();
-  const styles = ui.useStyles2(getStyles$g);
+  const styles = ui.useStyles2(getStyles$k);
   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,
     {
       language: "sql",
       height: 80,
-      value: formatSQL(rawSql),
+      value: formatSQL(rawSql, language),
       monacoOptions: { scrollbar: { vertical: "hidden" }, scrollBeyondLastLine: false },
       readOnly: true,
       showMiniMap: false
     }
   ));
 }
-function getStyles$g(theme) {
+function getStyles$k(theme) {
   return {
     grow: css.css({ flexGrow: 1 }),
     label: css.css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),
@@ -6504,7 +6541,7 @@ function SQLOrderByRow({ fields, query, onQueryChange, db }) {
 const asteriskValue = { label: "*", value: "*" };
 function SelectRow({ sql, columns, onSqlChange, functions }) {
   var _a;
-  const styles = ui.useStyles2(getStyles$f);
+  const styles = ui.useStyles2(getStyles$j);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
   const onColumnChange = React.useCallback(
     (item, index) => (column) => {
@@ -6600,7 +6637,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     }
   ));
 }
-const getStyles$f = () => {
+const getStyles$j = () => {
   return { addButton: css.css({ alignSelf: "flex-start" }) };
 };
 function getColumnValue({ parameters }) {
@@ -6946,10 +6983,10 @@ function mapFieldsToTypes(columns) {
 }
 
 const EditorRow = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$i);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$e = (theme) => {
+const getStyles$i = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -6963,12 +7000,12 @@ const EditorField = (props) => {
   var _a;
   const { label, optional, tooltip, children, width, ...fieldProps } = props;
   const theme = ui.useTheme2();
-  const styles = getStyles$d(theme, width);
+  const styles = getStyles$h(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$d = ui.stylesFactory((theme, width) => {
+const getStyles$h = ui.stylesFactory((theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -6999,12 +7036,20 @@ const EditorRows = ({ children }) => {
   return /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 0.5, direction: "column" }, children);
 };
 
-const VisualEditor = ({ query, db, queryRowFilter, onChange, onValidate, range }) => {
+const VisualEditor = ({
+  query,
+  db,
+  queryRowFilter,
+  onChange,
+  onValidate,
+  language = "sql",
+  range
+}) => {
   const state = reactUse.useAsync(async () => {
     const fields = await db.fields(query);
     return fields;
   }, [db, query.dataset, query.table]);
-  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(EditorRows, null, /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React__default.default.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React__default.default.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(Preview, { rawSql: query.rawSql }))), /* @__PURE__ */ React__default.default.createElement(QueryToolbox, { db, query, onValidate, range }));
+  return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(EditorRows, null, /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLSelectRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.filter && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Filter by column value", optional: true }, /* @__PURE__ */ React__default.default.createElement(SQLWhereRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.group && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(EditorField, { label: "Group by column" }, /* @__PURE__ */ React__default.default.createElement(SQLGroupByRow, { fields: state.value || [], query, onQueryChange: onChange, db }))), queryRowFilter.order && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(SQLOrderByRow, { fields: state.value || [], query, onQueryChange: onChange, db })), queryRowFilter.preview && query.rawSql && /* @__PURE__ */ React__default.default.createElement(EditorRow, null, /* @__PURE__ */ React__default.default.createElement(Preview, { rawSql: query.rawSql, language }))), /* @__PURE__ */ React__default.default.createElement(QueryToolbox, { db, query, onValidate, range }));
 };
 
 const MACRO_NAMES = [
@@ -7023,20 +7068,20 @@ const MACRO_NAMES = [
   "$__unixEpochGroupAlias"
 ];
 
-var __defProp$2 = Object.defineProperty;
-var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, typeof key !== "symbol" ? key + "" : key, value);
+var __defProp$3 = Object.defineProperty;
+var __defNormalProp$3 = (obj, key, value) => key in obj ? __defProp$3(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$3 = (obj, key, value) => __defNormalProp$3(obj, typeof key !== "symbol" ? key + "" : key, value);
 class SqlDatasource extends runtime.DataSourceWithBackend {
   constructor(instanceSettings, templateSrv = runtime.getTemplateSrv()) {
     super(instanceSettings);
     this.templateSrv = templateSrv;
-    __publicField$2(this, "id");
-    __publicField$2(this, "name");
-    __publicField$2(this, "interval");
-    __publicField$2(this, "db");
-    __publicField$2(this, "dataset");
-    __publicField$2(this, "annotations", {});
-    __publicField$2(this, "interpolateVariable", (value, variable) => {
+    __publicField$3(this, "id");
+    __publicField$3(this, "name");
+    __publicField$3(this, "interval");
+    __publicField$3(this, "db");
+    __publicField$3(this, "dataset");
+    __publicField$3(this, "annotations", {});
+    __publicField$3(this, "interpolateVariable", (value, variable) => {
       if (typeof value === "string") {
         if (variable.multi || variable.includeAll) {
           const result = this.getQueryModel().quoteLiteral(value);
@@ -7186,7 +7231,7 @@ const getSearchFilterScopedVar = (args) => {
   };
 };
 
-function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
+function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range, language = "sql" }) {
   var _a, _b, _c, _d, _e, _f, _g;
   const [isQueryRunnable, setIsQueryRunnable] = React.useState(true);
   const db = datasource.getDB();
@@ -7262,6 +7307,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
     {
       db,
       query: queryWithDefaults,
+      language,
       onChange: (q) => onQueryChange(q, false),
       queryRowFilter,
       onValidate: setIsQueryRunnable,
@@ -7271,6 +7317,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
     RawEditor,
     {
       db,
+      language,
       query: queryWithDefaults,
       queryToValidate,
       onChange: onQueryChange,
@@ -7408,7 +7455,7 @@ const ConfigSubSection = ({ children, ...props }) => {
 function ConfigDescriptionLink(props) {
   const { description, suffix, feature } = props;
   const text = `Learn more about ${feature}`;
-  const styles = ui.useStyles2(getStyles$c);
+  const styles = ui.useStyles2(getStyles$g);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: styles.container }, description, /* @__PURE__ */ React__default.default.createElement(
     "a",
     {
@@ -7420,7 +7467,7 @@ function ConfigDescriptionLink(props) {
     text
   ));
 }
-const getStyles$c = (theme) => {
+const getStyles$g = (theme) => {
   return {
     container: css.css({
       color: theme.colors.text.secondary,
@@ -8389,225 +8436,2460 @@ const AdvancedHttpSettings = ({
   ));
 };
 
-var __defProp$1 = Object.defineProperty;
-var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
-const getCustomHeaderRowStyles = ui.stylesFactory(() => {
-  return {
-    layout: css.css`
-      display: flex;
-      align-items: center;
-      margin-bottom: 4px;
-      > * {
-        margin-left: 4px;
-        margin-bottom: 0;
-        height: 100%;
-        &:first-child,
-        &:last-child {
-          margin-left: 0;
-        }
-      }
-    `
-  };
-});
-const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
-  const styles = getCustomHeaderRowStyles();
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.layout }, /* @__PURE__ */ React__default.default.createElement(
-    ui.LegacyForms.FormField,
+function resolveGroups(schema) {
+  const fieldMap = /* @__PURE__ */ new Map();
+  for (const f of schema.fields) {
+    fieldMap.set(f.id, f);
+  }
+  if (schema.groups && schema.groups.length > 0) {
+    return schema.groups.slice().sort((a, b) => {
+      var _a, _b;
+      return ((_a = a.order) != null ? _a : 0) - ((_b = b.order) != null ? _b : 0);
+    }).map((g) => ({
+      group: g,
+      fields: g.fieldRefs.map((ref) => fieldMap.get(ref)).filter((f) => f != null)
+    }));
+  }
+  const allFields = schema.fields.filter((f) => f.kind !== "virtual" && !f.isItemField);
+  return [
     {
-      label: "Header",
-      name: "name",
-      placeholder: "X-Custom-Header",
-      labelWidth: 5,
-      value: header.name || "",
-      onChange: (e) => onChange({ ...header, name: e.target.value }),
-      onBlur
+      group: { id: "default", title: "Configuration", fieldRefs: allFields.map((f) => f.id) },
+      fields: allFields
     }
-  ), /* @__PURE__ */ React__default.default.createElement(
-    ui.LegacyForms.SecretFormField,
-    {
-      label: "Value",
-      "aria-label": "Value",
-      name: "value",
-      isConfigured: header.configured,
-      value: header.value,
-      labelWidth: 5,
-      inputWidth: header.configured ? 11 : 12,
-      placeholder: "Header Value",
-      onReset: () => onReset(header.id),
-      onChange: (e) => onChange({ ...header, value: e.target.value }),
-      onBlur
+  ];
+}
+function resolveRequiredFieldsGroup(schema) {
+  var _a;
+  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) {
+      requiredIds.add(f.id);
     }
-  ), /* @__PURE__ */ React__default.default.createElement(
-    ui.Button,
-    {
-      type: "button",
-      "aria-label": "Remove header",
-      variant: "secondary",
-      size: "xs",
-      onClick: (_e) => onRemove(header.id)
-    },
-    /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "trash-alt" })
-  ));
-};
-CustomHeaderRow.displayName = "CustomHeaderRow";
-class CustomHeadersSettings extends React.PureComponent {
-  constructor(props) {
-    super(props);
-    __publicField$1(this, "state", {
-      headers: []
-    });
-    __publicField$1(this, "updateSettings", () => {
-      const { headers } = this.state;
-      const newJsonData = Object.fromEntries(
-        Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith("httpHeaderName"))
-      );
-      const newSecureJsonData = Object.fromEntries(
-        Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(
-          ([key, val]) => !key.startsWith("httpHeaderValue")
-        )
-      );
-      for (const [index, header] of headers.entries()) {
-        newJsonData[`httpHeaderName${index + 1}`] = header.name;
-        if (!header.configured) {
-          newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;
-        }
+  }
+  const authGroup = (_a = schema.groups) == null ? void 0 : _a.find((g) => g.id === "auth");
+  if (authGroup) {
+    for (const ref of authGroup.fieldRefs) {
+      if (fieldMap.has(ref)) {
+        requiredIds.add(ref);
       }
-      this.props.onChange({
-        ...this.props.dataSourceConfig,
-        jsonData: newJsonData,
-        secureJsonData: newSecureJsonData
-      });
-    });
-    __publicField$1(this, "onHeaderAdd", () => {
-      this.setState((prevState) => {
-        return {
-          headers: [...prevState.headers, { id: lodash.uniqueId(), name: "", value: "", configured: false }]
-        };
-      });
-    });
-    __publicField$1(this, "onHeaderChange", (headerIndex, value) => {
-      this.setState(({ headers }) => {
-        return {
-          headers: headers.map((item, index) => {
-            if (headerIndex !== index) {
-              return item;
-            }
-            return { ...value };
-          })
-        };
-      });
-    });
-    __publicField$1(this, "onHeaderReset", (headerId) => {
-      this.setState(({ headers }) => {
-        return {
-          headers: headers.map((h, i) => {
-            if (h.id !== headerId) {
-              return h;
-            }
-            return {
-              ...h,
-              value: "",
-              configured: false
-            };
-          })
-        };
-      });
-    });
-    __publicField$1(this, "onHeaderRemove", (headerId) => {
-      this.setState(
-        ({ headers }) => ({
-          headers: headers.filter((h) => h.id !== headerId)
-        }),
-        this.updateSettings
-      );
-    });
-    const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;
-    this.state = {
-      headers: Object.keys(jsonData).sort().filter((key) => key.startsWith("httpHeaderName")).map((key, index) => {
-        return {
-          id: lodash.uniqueId(),
-          name: jsonData[key],
-          value: secureJsonData !== void 0 ? secureJsonData[key] : "",
-          configured: secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`] || false
-        };
-      })
-    };
+    }
   }
-  render() {
-    const { headers } = this.state;
-    return /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form-group" }, /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.default.createElement("h6", null, "Custom HTTP Headers")), /* @__PURE__ */ React__default.default.createElement("div", null, headers.map((header, i) => /* @__PURE__ */ React__default.default.createElement(
-      CustomHeaderRow,
-      {
-        key: header.id,
-        header,
-        onChange: (h) => {
-          this.onHeaderChange(i, h);
-        },
-        onBlur: this.updateSettings,
-        onRemove: this.onHeaderRemove,
-        onReset: this.onHeaderReset
+  if (requiredIds.size === 0) {
+    return null;
+  }
+  const includeIds = /* @__PURE__ */ new Set();
+  for (const id of requiredIds) {
+    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);
       }
-    ))), /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.default.createElement(
-      ui.Button,
-      {
-        variant: "secondary",
-        icon: "plus",
-        type: "button",
-        onClick: (e) => {
-          this.onHeaderAdd();
-        }
-      },
-      "Add header"
-    )));
+    }
   }
-}
-
-var QueryEditorMode = /* @__PURE__ */ ((QueryEditorMode2) => {
-  QueryEditorMode2["Code"] = "code";
-  QueryEditorMode2["Builder"] = "builder";
-  return QueryEditorMode2;
-})(QueryEditorMode || {});
-const BINARY_OPERATIONS_KEY = "Binary operations";
-
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-class QueryModellerBase {
-  constructor(operationDefinitions, innerQueryPlaceholder) {
-    __publicField(this, "operationsRegistry");
-    __publicField(this, "categories", []);
-    __publicField(this, "innerQueryPlaceholder");
-    this.operationsRegistry = new data.Registry(() => operationDefinitions);
-    this.innerQueryPlaceholder = innerQueryPlaceholder || "<query>";
+  for (const f of schema.fields) {
+    if (f.dependsOn && !includeIds.has(f.id)) {
+      const parsed = parseDependsOn(f.dependsOn);
+      if (parsed && requiredIds.has(parsed.field)) {
+        includeIds.add(f.id);
+      }
+    }
   }
-  setOperationCategories(categories) {
-    this.categories = categories;
+  const virtualFields = schema.fields.filter((f) => includeIds.has(f.id));
+  if (virtualFields.length === 0) {
+    return null;
   }
-  getOperationsForCategory(category) {
-    return this.operationsRegistry.list().filter((op) => op.category === category && !op.hideFromList);
+  return {
+    group: {
+      id: "_required",
+      title: "Required",
+      fieldRefs: virtualFields.map((f) => f.id)
+    },
+    fields: virtualFields
+  };
+}
+function formKey(field) {
+  return field.section ? `${field.section}.${field.key}` : field.key;
+}
+function parseDependsOn(expr) {
+  var _a, _b;
+  const m = expr.match(/^(.+?)\s*==\s*(?:'([^']*)'|"([^"]*)"|(.+))$/);
+  if (!m) {
+    return null;
   }
-  getAlternativeOperations(key) {
-    return this.operationsRegistry.list().filter((op) => op.alternativesKey && op.alternativesKey === key);
+  return { field: m[1].trim(), value: ((_b = (_a = m[2]) != null ? _a : m[3]) != null ? _b : m[4]).trim() };
+}
+function resolveActiveOverride(field, watchedValues, fieldById) {
+  var _a;
+  if (!field.overrides || field.overrides.length === 0) {
+    return void 0;
   }
-  getCategories() {
-    return this.categories;
+  for (const ov of field.overrides) {
+    const parsed = parseDependsOn(ov.when);
+    if (!parsed) {
+      continue;
+    }
+    const depField = fieldById.get(parsed.field);
+    const depKey = depField ? formKey(depField) : parsed.field;
+    if (String((_a = watchedValues[depKey]) != null ? _a : "") === parsed.value) {
+      return ov;
+    }
   }
-  getOperationDefinition(id) {
-    return this.operationsRegistry.getIfExists(id);
+  return void 0;
+}
+function resolveFieldValue(ref, values, fields) {
+  if (ref in values) {
+    return values[ref];
   }
-  hasBinaryOp(query) {
-    return query.operations.find((op) => {
-      const def = this.getOperationDefinition(op.id);
-      return (def == null ? void 0 : def.category) === BINARY_OPERATIONS_KEY;
-    }) !== void 0;
+  const field = fields.find((f) => f.id === ref);
+  if (field) {
+    const fk = formKey(field);
+    if (fk in values) {
+      return values[fk];
+    }
   }
+  return void 0;
 }
-
-const CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = "You have conflicting label filters";
-function LabelFilterItem({
-  item,
-  items,
+function evaluateComputedRead(expr, values, fields) {
+  function evalExpr(s) {
+    var _a;
+    s = s.trim();
+    if (s.startsWith("(") && findMatchingParen(s, 0) === s.length - 1) {
+      s = s.slice(1, -1).trim();
+    }
+    const qIdx = findTopLevel(s, "?");
+    if (qIdx !== -1) {
+      const condition = s.slice(0, qIdx).trim();
+      const rest = s.slice(qIdx + 1);
+      const cIdx = findTopLevel(rest, ":");
+      if (cIdx !== -1) {
+        const trueExpr = rest.slice(0, cIdx).trim();
+        const falseExpr = rest.slice(cIdx + 1).trim();
+        return evalCondition(condition) ? evalExpr(trueExpr) : evalExpr(falseExpr);
+      }
+    }
+    const strMatch = (_a = s.match(/^'([^']*)'$/)) != null ? _a : s.match(/^"([^"]*)"$/);
+    if (strMatch) {
+      return strMatch[1];
+    }
+    if (s === "true") {
+      return true;
+    }
+    if (s === "false") {
+      return false;
+    }
+    if (/^-?\d+(\.\d+)?$/.test(s)) {
+      return Number(s);
+    }
+    return resolveFieldValue(s, values, fields);
+  }
+  function evalCondition(cond) {
+    const eqMatch = cond.match(/^(.+?)\s*(==|!=)\s*(.+)$/);
+    if (eqMatch) {
+      const left = evalExpr(eqMatch[1]);
+      const right = evalExpr(eqMatch[3]);
+      const eq = String(left) === String(right);
+      return eqMatch[2] === "==" ? eq : !eq;
+    }
+    return !!evalExpr(cond);
+  }
+  function findMatchingParen(s, start) {
+    let depth = 0;
+    for (let i = start; i < s.length; i++) {
+      if (s[i] === "(") {
+        depth++;
+      } else if (s[i] === ")") {
+        depth--;
+        if (depth === 0) {
+          return i;
+        }
+      }
+    }
+    return -1;
+  }
+  function findTopLevel(s, char) {
+    let depth = 0;
+    let inStr = null;
+    for (let i = 0; i < s.length; i++) {
+      const c = s[i];
+      if (inStr) {
+        if (c === inStr) {
+          inStr = null;
+        }
+        continue;
+      }
+      if (c === "'" || c === '"') {
+        inStr = c;
+        continue;
+      }
+      if (c === "(") {
+        depth++;
+        continue;
+      }
+      if (c === ")") {
+        depth--;
+        continue;
+      }
+      if (depth === 0 && c === char) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  try {
+    return evalExpr(expr);
+  } catch (e) {
+    return void 0;
+  }
+}
+function computeVirtualFieldValues(schema, existingValues) {
+  var _a;
+  const virtualValues = {};
+  for (const field of schema.fields) {
+    if (field.kind !== "virtual") {
+      continue;
+    }
+    const fk = formKey(field);
+    if (((_a = field.storage) == null ? void 0 : _a.type) === "computed" && field.storage.read) {
+      const val = evaluateComputedRead(field.storage.read, existingValues, schema.fields);
+      if (val !== void 0) {
+        virtualValues[fk] = val;
+      } else if (field.defaultValue !== void 0) {
+        virtualValues[fk] = field.defaultValue;
+      }
+    } else if (field.defaultValue !== void 0) {
+      virtualValues[fk] = field.defaultValue;
+    }
+  }
+  return virtualValues;
+}
+
+const SECURE_FIELD_CONFIGURED = "__CONFIGURED__";
+function patternToRegex(pattern) {
+  const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp("^" + escaped.replace("\\{index\\}", "(\\d+)") + "$");
+}
+function findIndicesForPattern(record, pattern) {
+  const re = patternToRegex(pattern);
+  const indices = [];
+  for (const key of Object.keys(record)) {
+    const m = key.match(re);
+    if (m) {
+      const n = Number(m[1]);
+      if (!Number.isNaN(n)) {
+        indices.push(n);
+      }
+    }
+  }
+  return indices.sort((a, b) => a - b);
+}
+function expandIndexedPair(field, ds) {
+  var _a, _b, _c;
+  const storage = field.storage;
+  if ((storage == null ? void 0 : storage.type) !== "indexedPair" || !storage.key || !storage.value) {
+    return [];
+  }
+  const source = storage.key.target === "jsonData" ? (_a = ds.jsonData) != null ? _a : {} : ds;
+  const indices = findIndicesForPattern(source, storage.key.pattern);
+  const items = [];
+  for (const i of indices) {
+    const nameKey = storage.key.pattern.replace("{index}", String(i));
+    const valueKey = storage.value.pattern.replace("{index}", String(i));
+    const nameVal = source[nameKey];
+    if (nameVal === void 0 || nameVal === null) {
+      continue;
+    }
+    const hasValue = storage.value.target === "secureJsonData" ? !!((_b = ds.secureJsonFields) == null ? void 0 : _b[valueKey]) : !!((_c = ds.jsonData) == null ? void 0 : _c[valueKey]);
+    items.push({
+      index: i,
+      name: String(nameVal),
+      value: hasValue ? SECURE_FIELD_CONFIGURED : ""
+    });
+  }
+  return items;
+}
+function flattenIndexedPair(field, items, jsonData, secureJsonData, secureJsonFields) {
+  var _a;
+  const storage = field.storage;
+  if ((storage == null ? void 0 : storage.type) !== "indexedPair" || !storage.key || !storage.value) {
+    return;
+  }
+  const existingIndices = new Set(
+    storage.key.target === "jsonData" ? findIndicesForPattern(jsonData, storage.key.pattern) : []
+  );
+  const usedIndices = /* @__PURE__ */ new Set();
+  const startIdx = (_a = storage.startIndex) != null ? _a : 1;
+  let nextIndex = existingIndices.size > 0 ? Math.max(...existingIndices) + 1 : startIdx;
+  for (const item of items) {
+    let idx = item.index;
+    if (idx === 0) {
+      idx = nextIndex++;
+    }
+    usedIndices.add(idx);
+    const nameKey = storage.key.pattern.replace("{index}", String(idx));
+    const valueKey = storage.value.pattern.replace("{index}", String(idx));
+    if (storage.key.target === "jsonData") {
+      jsonData[nameKey] = item.name;
+    }
+    if (storage.value.target === "secureJsonData") {
+      if (item.value === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[valueKey] = true;
+      } else if (item.value) {
+        secureJsonData[valueKey] = item.value;
+        secureJsonFields[valueKey] = false;
+      }
+    } else if (storage.value.target === "jsonData") {
+      jsonData[valueKey] = item.value;
+    }
+  }
+  for (const idx of existingIndices) {
+    if (usedIndices.has(idx)) {
+      continue;
+    }
+    const nameKey = storage.key.pattern.replace("{index}", String(idx));
+    const valueKey = storage.value.pattern.replace("{index}", String(idx));
+    if (storage.key.target === "jsonData") {
+      delete jsonData[nameKey];
+    }
+    if (storage.value.target === "secureJsonData") {
+      delete secureJsonFields[valueKey];
+      delete secureJsonData[valueKey];
+    } else if (storage.value.target === "jsonData") {
+      delete jsonData[valueKey];
+    }
+  }
+}
+function resolveRawPath(ref, ds) {
+  var _a;
+  const trimmed = ref.trim();
+  if (trimmed.startsWith("jsonData.")) {
+    return (_a = ds.jsonData) == null ? void 0 : _a[trimmed.slice(9)];
+  }
+  if (trimmed.startsWith("root.")) {
+    return ds[trimmed.slice(5)];
+  }
+  return void 0;
+}
+async function fetchExistingValues(dsUid, fields) {
+  var _a, _b, _c, _d, _e;
+  try {
+    const ds = await runtime.getBackendSrv().get(`/api/datasources/uid/${dsUid}`, void 0, void 0, {
+      showErrorAlert: false
+    });
+    const values = {};
+    for (const field of fields) {
+      if (((_a = field.storage) == null ? void 0 : _a.type) === "indexedPair") {
+        values[field.key] = expandIndexedPair(field, ds);
+        continue;
+      }
+      const fk = formKey(field);
+      switch (field.target) {
+        case "root":
+          if (ds[field.key] !== void 0) {
+            values[fk] = ds[field.key];
+          }
+          break;
+        case "jsonData":
+          if (field.section) {
+            const sectionObj = (_b = ds.jsonData) == null ? void 0 : _b[field.section];
+            if ((sectionObj == null ? void 0 : sectionObj[field.key]) !== void 0) {
+              values[fk] = sectionObj[field.key];
+            }
+          } else if (((_c = ds.jsonData) == null ? void 0 : _c[field.key]) !== void 0) {
+            values[fk] = ds.jsonData[field.key];
+          }
+          break;
+        case "secureJsonData":
+          if ((_d = ds.secureJsonFields) == null ? void 0 : _d[field.key]) {
+            values[fk] = SECURE_FIELD_CONFIGURED;
+          }
+          break;
+      }
+      if (values[fk] === void 0 && ((_e = field.storage) == null ? void 0 : _e.type) === "computed" && field.storage.read) {
+        const fallback = resolveRawPath(field.storage.read, ds);
+        if (fallback !== void 0) {
+          values[fk] = fallback;
+        }
+      }
+    }
+    return { values, readOnly: !!ds.readOnly };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to load datasource configuration";
+    return { values: {}, readOnly: false, error: message };
+  }
+}
+function buildDatasourceConfigPayload(data, fields, existing, isFieldVisible) {
+  var _a, _b, _c, _d;
+  const rootFields = {};
+  const jsonData = { ...(_a = existing.jsonData) != null ? _a : {} };
+  const secureJsonData = {};
+  const secureJsonFields = { ...(_b = existing.secureJsonFields) != null ? _b : {} };
+  for (const field of fields) {
+    if (((_c = field.storage) == null ? void 0 : _c.type) === "indexedPair") {
+      const items = Array.isArray(data[field.key]) ? data[field.key] : [];
+      flattenIndexedPair(field, items, jsonData, secureJsonData, secureJsonFields);
+      continue;
+    }
+    const isManagedByEffect = (_d = field.tags) == null ? void 0 : _d.some((t) => t.startsWith("managed-by:"));
+    if (!isManagedByEffect && !isFieldVisible(field)) {
+      continue;
+    }
+    const fk = formKey(field);
+    const value = data[fk];
+    if (field.target === "secureJsonData") {
+      if (value === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[field.key] = true;
+        continue;
+      }
+      if (value && value !== "") {
+        secureJsonData[field.key] = String(value);
+        secureJsonFields[field.key] = false;
+      } else {
+        secureJsonFields[field.key] = false;
+      }
+      continue;
+    }
+    if (value === void 0 || value === "") {
+      continue;
+    }
+    switch (field.target) {
+      case "root":
+        rootFields[field.key] = value;
+        break;
+      case "jsonData":
+        if (field.section) {
+          if (!jsonData[field.section] || typeof jsonData[field.section] !== "object") {
+            jsonData[field.section] = {};
+          }
+          jsonData[field.section][field.key] = value;
+        } else {
+          jsonData[field.key] = value;
+        }
+        break;
+    }
+  }
+  return { rootFields, jsonData, secureJsonData, secureJsonFields };
+}
+async function submitDatasourceConfig(dsUid, data, fields, isFieldVisible) {
+  const existing = await runtime.getBackendSrv().get(`/api/datasources/uid/${dsUid}`);
+  const { rootFields, jsonData, secureJsonData, secureJsonFields } = buildDatasourceConfigPayload(
+    data,
+    fields,
+    existing,
+    isFieldVisible
+  );
+  await runtime.getBackendSrv().put(`/api/datasources/uid/${dsUid}`, {
+    ...existing,
+    ...rootFields,
+    jsonData,
+    secureJsonData,
+    secureJsonFields
+  });
+}
+
+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) {
+  var _a;
+  if (field.required) {
+    return true;
+  }
+  if (field.requiredWhen) {
+    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 false;
+}
+function buildValidationRules(field, required) {
+  var _a, _b, _c, _d, _e, _f;
+  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.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}`
+          };
+          break;
+        case "range":
+          if (v.min !== void 0) {
+            rules.min = { value: v.min, message: (_c = v.message) != null ? _c : `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}` };
+          }
+          break;
+        case "length":
+          if (v.min !== void 0) {
+            rules.minLength = { value: v.min, message: (_e = v.message) != null ? _e : `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}` };
+          }
+          break;
+      }
+    }
+  }
+  return rules;
+}
+
+function PdcFieldNote({
+  enabled,
+  description,
+  configUrl
+}) {
+  const styles = ui.useStyles2(getStyles$f);
+  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) => ({
+  wrapper: css.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    gap: theme.spacing(1),
+    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}`
+  }),
+  note: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  })
+});
+
+function SecureFieldInput({
+  formField,
+  placeholder,
+  disabled,
+  label
+}) {
+  var _a;
+  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(
+    ui.Input,
+    {
+      ...formField,
+      value: String((_a = formField.value) != null ? _a : ""),
+      type: revealed ? "text" : "password",
+      placeholder,
+      disabled,
+      suffix: /* @__PURE__ */ React__default.default.createElement(
+        ui.Button,
+        {
+          variant: "secondary",
+          fill: "text",
+          size: "sm",
+          icon: revealed ? "eye-slash" : "eye",
+          "aria-label": revealed ? "Hide" : "Reveal",
+          onClick: () => setRevealed((r) => !r),
+          type: "button"
+        }
+      )
+    }
+  );
+}
+const getSecureFieldStyles = (theme) => ({
+  configuredRow: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1)
+  }),
+  configuredBadge: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    padding: `${theme.spacing(0.25)} ${theme.spacing(0.75)}`,
+    borderRadius: theme.shape.radius.pill,
+    backgroundColor: theme.colors.success.transparent,
+    color: theme.colors.success.text,
+    fontSize: theme.typography.bodySmall.fontSize
+  })
+});
+
+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({
+    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}`,
+    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 }
+  })
+});
+
+function IndexedPairRow({
+  item,
+  index,
+  disabled,
+  onUpdate,
+  onRemove,
+  hideControls
+}) {
+  const styles = ui.useStyles2(getStyles$d);
+  const secureStyles = ui.useStyles2(getSecureFieldStyles);
+  const isConfigured = item.value === SECURE_FIELD_CONFIGURED;
+  const [editing, setEditing] = React.useState(false);
+  const [revealed, setRevealed] = React.useState(false);
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1 }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      value: item.name,
+      placeholder: "Header name",
+      disabled: disabled || hideControls,
+      onChange: (e) => onUpdate(index, "name", e.currentTarget.value)
+    }
+  )), /* @__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,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      onClick: () => {
+        setEditing(true);
+        onUpdate(index, "value", "");
+      },
+      type: "button"
+    },
+    "Reset"
+  )) : /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      value: item.value === SECURE_FIELD_CONFIGURED ? "" : item.value,
+      placeholder: "Header value",
+      disabled,
+      type: revealed ? "text" : "password",
+      onChange: (e) => onUpdate(index, "value", e.currentTarget.value),
+      suffix: /* @__PURE__ */ React__default.default.createElement(
+        ui.Button,
+        {
+          variant: "secondary",
+          fill: "text",
+          size: "sm",
+          icon: revealed ? "eye-slash" : "eye",
+          "aria-label": revealed ? "Hide" : "Reveal",
+          onClick: () => setRevealed((r) => !r),
+          type: "button"
+        }
+      )
+    }
+  )), !hideControls && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Remove header" }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": "Remove header",
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  )));
+}
+function IndexedPairEditor({
+  value,
+  onChange,
+  maxItems = 10,
+  disabled,
+  hideControls
+}) {
+  const styles = ui.useStyles2(getStyles$d);
+  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
+    }
+  )), !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 getStyles$d = (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 ComplexFieldNote({ count, label }) {
+  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 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}`
+  })
+});
+
+function renderFieldInput(field, formField, disabled) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r;
+  const value = formField.value;
+  const placeholder = (_a = field.ui) == null ? void 0 : _a.placeholder;
+  const label = (_b = field.label) != null ? _b : field.key;
+  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) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    return /* @__PURE__ */ React__default.default.createElement("div", { style: { display: "flex" } }, /* @__PURE__ */ React__default.default.createElement(
+      ui.RadioButtonGroup,
+      {
+        options,
+        value: String(value != null ? value : ""),
+        onChange: (v) => 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) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.Select,
+      {
+        options,
+        value: options.find((o) => o.value === String(value != null ? value : "")),
+        onChange: (v) => formField.onChange(v == null ? void 0 : v.value),
+        disabled
+      }
+    );
+  }
+  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") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.TextArea,
+      {
+        ...formField,
+        value: String(value != null ? value : ""),
+        placeholder,
+        disabled,
+        rows: (_k = (_j = field.ui) == null ? void 0 : _j.rows) != null ? _k : 3
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_l = field.item) == null ? void 0 : _l.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
+      }
+    );
+  }
+  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 === "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")) {
+    const count = Array.isArray(value) ? value.length : 0;
+    return /* @__PURE__ */ React__default.default.createElement(ComplexFieldNote, { count, label });
+  }
+  return /* @__PURE__ */ React__default.default.createElement(ui.Input, { ...formField, value: String(value != null ? value : ""), placeholder, disabled });
+}
+
+const getWizardStyles = (theme) => ({
+  container: css.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.css({
+    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
+  }),
+  readOnlyBanner: css.css({
+    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}`
+  }),
+  navBar: css.css({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between"
+  }),
+  navTitle: css.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.css({
+    fontSize: "11px",
+    fontWeight: "normal",
+    color: theme.colors.text.secondary
+  }),
+  navActions: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.25)
+  }),
+  form: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.75)
+  }),
+  buttons: css.css({
+    display: "flex",
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.25)
+  }),
+  fieldRow: css.css({
+    display: "grid",
+    gridTemplateColumns: "minmax(80px, 1fr) minmax(0, 2fr)",
+    gap: theme.spacing(0.75),
+    alignItems: "start"
+  }),
+  fieldRowCenter: css.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.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5),
+    paddingTop: theme.spacing(0.5)
+  }),
+  fieldLabelRowCompact: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(0.5)
+  }),
+  fieldLabel: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary
+  }),
+  fieldRequired: css.css({
+    color: theme.colors.error.text,
+    marginLeft: 2
+  }),
+  fieldInfoIcon: css.css({
+    color: theme.colors.text.disabled,
+    cursor: "help",
+    flexShrink: 0
+  }),
+  fieldInputCol: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.25),
+    minWidth: 0
+  }),
+  fieldError: css.css({
+    fontSize: "11px",
+    color: theme.colors.error.text
+  })
+});
+
+function SchemaField({ field, control, errors, disabled, dsUid, watchedValues, fieldById }) {
+  const styles = ui.useStyles2(getWizardStyles);
+  const activeOverride = resolveActiveOverride(field, watchedValues, fieldById);
+  const fk = formKey(field);
+  if (field.key === "pdcInjected" && field.target === "jsonData") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      reactHookForm.Controller,
+      {
+        name: fk,
+        control,
+        render: ({ field: formField }) => /* @__PURE__ */ React__default.default.createElement(
+          PdcFieldNote,
+          {
+            enabled: !!formField.value,
+            description: field.description,
+            configUrl: `/connections/datasources/edit/${dsUid}`
+          }
+        )
+      }
+    );
+  }
+  const required = isFieldRequired(field, watchedValues, fieldById);
+  const validationRules = buildValidationRules(field, required);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactHookForm.Controller,
+    {
+      name: fk,
+      control,
+      rules: validationRules,
+      render: ({ field: formField }) => {
+        var _a, _b, _c, _d, _e;
+        const errorMessage = (_a = errors[fk]) == null ? void 0 : _a.message;
+        const label = (_b = field.label) != null ? _b : field.key;
+        const description = (_c = activeOverride == null ? void 0 : activeOverride.description) != null ? _c : field.description;
+        const effectiveField = activeOverride ? {
+          ...field,
+          ui: {
+            ...field.ui,
+            placeholder: (_e = activeOverride.placeholder) != null ? _e : (_d = field.ui) == null ? void 0 : _d.placeholder
+          }
+        } : 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)));
+      }
+    }
+  );
+}
+
+function AuthorizationHeaderField({
+  headersFieldKey,
+  control,
+  disabled,
+  watchedValues
+}) {
+  const styles = ui.useStyles2(getWizardStyles);
+  const items = React.useMemo(
+    () => Array.isArray(watchedValues[headersFieldKey]) ? watchedValues[headersFieldKey] : [],
+    [watchedValues, headersFieldKey]
+  );
+  const authEntries = React.useMemo(() => {
+    const entries = [];
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].name.toLowerCase() === "authorization") {
+        entries.push({ item: items[i], originalIdx: i });
+      }
+    }
+    return entries;
+  }, [items]);
+  if (authEntries.length === 0) {
+    return null;
+  }
+  const authItems = authEntries.map((e) => e.item);
+  return /* @__PURE__ */ React__default.default.createElement(
+    reactHookForm.Controller,
+    {
+      name: headersFieldKey,
+      control,
+      render: ({ field: formField }) => {
+        const handleChange = (updatedAuthItems) => {
+          const updated = [...items];
+          for (let i = 0; i < authEntries.length; i++) {
+            if (i < updatedAuthItems.length) {
+              updated[authEntries[i].originalIdx] = updatedAuthItems[i];
+            }
+          }
+          formField.onChange(updated);
+        };
+        return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldRow }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldLabelRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldLabel }, "Custom HTTP Headers"), /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Authorization HTTP header(s) sent with every request." }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs", className: styles.fieldInfoIcon }))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.fieldInputCol }, /* @__PURE__ */ React__default.default.createElement(IndexedPairEditor, { value: authItems, onChange: handleChange, disabled, hideControls: true })));
+      }
+    }
+  );
+}
+
+const getTabStyles = (theme) => ({
+  root: css.css({
+    display: "flex",
+    gap: theme.spacing(3),
+    position: "relative",
+    background: theme.colors.background.canvas,
+    padding: theme.spacing(2)
+  }),
+  // Sidebar
+  sidebar: css.css({
+    width: 250,
+    flexShrink: 0,
+    position: "sticky",
+    top: theme.spacing(2),
+    alignSelf: "flex-start",
+    [theme.breakpoints.down("sm")]: { display: "none" }
+  }),
+  sidebarTitle: css.css({
+    fontSize: theme.typography.body.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary,
+    padding: `${theme.spacing(1)} 0`,
+    marginBottom: theme.spacing(1)
+  }),
+  navList: css.css({
+    listStyle: "none",
+    margin: 0,
+    padding: 0,
+    position: "relative"
+  }),
+  navItem: css.css({
+    display: "flex",
+    alignItems: "flex-start",
+    gap: theme.spacing(1.5),
+    padding: `${theme.spacing(1)} 0`,
+    cursor: "pointer",
+    position: "relative"
+  }),
+  navItemActive: css.css({}),
+  // Dot container: positions the dot and the connector line
+  navDotWrap: css.css({
+    position: "relative",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: 12,
+    flexShrink: 0,
+    alignSelf: "flex-start",
+    paddingTop: 4
+  }),
+  navDot: css.css({
+    width: 10,
+    height: 10,
+    borderRadius: "50%",
+    border: `2px solid ${theme.colors.text.disabled}`,
+    background: theme.colors.background.canvas,
+    position: "relative",
+    zIndex: 1
+  }),
+  navDotOptional: css.css({
+    borderStyle: "dashed"
+  }),
+  navDotActive: css.css({
+    background: theme.colors.primary.main,
+    borderColor: theme.colors.primary.main,
+    borderStyle: "solid"
+  }),
+  navDotValidated: css.css({
+    background: theme.colors.success.main,
+    borderColor: theme.colors.success.main,
+    borderStyle: "solid"
+  }),
+  navDotError: css.css({
+    background: theme.colors.error.main,
+    borderColor: theme.colors.error.main,
+    borderStyle: "solid"
+  }),
+  // Connector line running from dot center downward to next item
+  navConnector: css.css({
+    position: "absolute",
+    left: 5,
+    top: 16,
+    bottom: -16,
+    width: 2,
+    background: theme.colors.border.medium,
+    zIndex: 0
+  }),
+  navConnectorDashed: css.css({
+    background: "none",
+    borderLeft: `2px dashed ${theme.colors.border.weak}`,
+    width: 0
+  }),
+  navLabel: css.css({
+    fontSize: theme.typography.body.fontSize,
+    color: "rgba(204, 204, 220, 0.65)",
+    lineHeight: 1.4
+  }),
+  navLabelActive: css.css({
+    fontWeight: theme.typography.fontWeightMedium,
+    color: theme.colors.text.primary
+  }),
+  // Main content
+  main: css.css({
+    flex: 1,
+    minWidth: 0,
+    width: 0,
+    // forces flex child to respect flex-grow and fill remaining space
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2)
+  }),
+  form: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(2)
+  }),
+  requiredNotice: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0.5)
+  }),
+  // Section wrapper — card container around CollapsableSection
+  section: css.css({
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.default,
+    background: theme.colors.background.secondary,
+    overflow: "hidden"
+  }),
+  // Override Collapse component styling
+  collapseHeader: css.css({
+    borderRadius: theme.shape.radius.default,
+    background: "none",
+    border: "none",
+    marginBottom: 0,
+    // Collapse header button: make label fill remaining space
+    "& > button": {
+      padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+      width: "100%",
+      justifyContent: "flex-start"
+    },
+    "& > button > div": {
+      flex: 1,
+      fontSize: theme.typography.h4.fontSize,
+      fontWeight: theme.typography.fontWeightMedium,
+      textAlign: "left"
+    }
+  }),
+  sectionLabel: css.css({
+    display: "flex",
+    alignItems: "center",
+    flex: 1
+  }),
+  sectionLabelText: css.css({
+    flex: 1
+  }),
+  sectionHeader: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: `${theme.spacing(1.5)} ${theme.spacing(2)}`,
+    cursor: "pointer",
+    userSelect: "none"
+  }),
+  sectionChevron: css.css({
+    transition: "transform 0.2s ease"
+  }),
+  sectionChevronOpen: css.css({
+    transform: "rotate(90deg)"
+  }),
+  sectionTitle: css.css({
+    fontSize: theme.typography.h4.fontSize,
+    fontWeight: theme.typography.fontWeightMedium,
+    flex: 1,
+    textAlign: "left"
+  }),
+  sectionBadge: css.css({
+    fontSize: "11px",
+    fontWeight: "normal",
+    color: theme.colors.text.disabled,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.pill,
+    padding: `1px ${theme.spacing(0.75)}`,
+    whiteSpace: "nowrap"
+  }),
+  sectionDescription: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(1.5)
+  }),
+  sectionBody: css.css({
+    padding: `0 ${theme.spacing(2)} ${theme.spacing(2)}`,
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.75)
+  }),
+  // Form bottom
+  formButtons: css.css({
+    display: "flex",
+    gap: theme.spacing(1),
+    paddingTop: theme.spacing(0.5)
+  }),
+  // Loading / error states
+  loadingContainer: css.css({
+    display: "flex",
+    alignItems: "center",
+    gap: theme.spacing(1),
+    padding: theme.spacing(3),
+    color: theme.colors.text.secondary
+  }),
+  overlay: css.css({
+    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
+  }),
+  readOnlyBanner: css.css({
+    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}`,
+    marginBottom: theme.spacing(1)
+  })
+});
+
+function SidebarNav({ groups, activeIndex, sectionStates, onSelect }) {
+  const styles = ui.useStyles2(getTabStyles);
+  const visibleGroups = groups.filter((g) => g.group.id !== "_required");
+  return /* @__PURE__ */ React__default.default.createElement("nav", { className: styles.sidebar }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sidebarTitle }, "Connect data source"), /* @__PURE__ */ React__default.default.createElement("ul", { className: styles.navList }, visibleGroups.map((g, vi) => {
+    var _a, _b;
+    const origIndex = groups.indexOf(g);
+    const state = (_a = sectionStates[origIndex]) != null ? _a : "draft";
+    const isActive = origIndex === activeIndex;
+    const isOptional = g.group.optional === true;
+    const isLast = vi === visibleGroups.length - 1;
+    const nextIsOptional = !isLast && ((_b = visibleGroups[vi + 1]) == null ? void 0 : _b.group.optional) === true;
+    return /* @__PURE__ */ React__default.default.createElement("li", { key: g.group.id }, /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        className: css.cx(styles.navItem, isActive && styles.navItemActive),
+        onClick: () => onSelect(origIndex),
+        role: "button",
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            onSelect(origIndex);
+          }
+        }
+      },
+      /* @__PURE__ */ React__default.default.createElement("div", { className: styles.navDotWrap }, /* @__PURE__ */ React__default.default.createElement(
+        "span",
+        {
+          className: css.cx(
+            styles.navDot,
+            isOptional && styles.navDotOptional,
+            isActive && styles.navDotActive,
+            state === "validated" && !isActive && styles.navDotValidated,
+            state === "error" && !isActive && styles.navDotError
+          )
+        }
+      ), !isLast && /* @__PURE__ */ React__default.default.createElement(
+        "div",
+        {
+          className: css.cx(styles.navConnector, (isOptional || nextIsOptional) && styles.navConnectorDashed)
+        }
+      )),
+      /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.navLabel, isActive && styles.navLabelActive) }, g.group.title)
+    ));
+  })));
+}
+
+function TabLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  const styles = ui.useStyles2(getTabStyles);
+  const sectionRefs = React.useRef(/* @__PURE__ */ new Map());
+  const {
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    control,
+    handleSubmit,
+    errors,
+    watchedValues,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    isGroupValid,
+    groupHasData,
+    onSubmit
+  } = form;
+  const displayGroups = React.useMemo(() => resolvedGroups.filter((g) => g.group.id !== "_required"), [resolvedGroups]);
+  const [expandedSections, setExpandedSections] = React.useState(() => {
+    const expanded = /* @__PURE__ */ new Set();
+    for (let i = 0; i < displayGroups.length; i++) {
+      if (!displayGroups[i].group.optional) {
+        expanded.add(i);
+      }
+    }
+    return expanded;
+  });
+  const hasExpandedForData = React.useRef(false);
+  React.useMemo(() => {
+    if (initializing || hasExpandedForData.current) {
+      return;
+    }
+    hasExpandedForData.current = true;
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      for (let i = 0; i < displayGroups.length; i++) {
+        if (groupHasData(displayGroups[i])) {
+          next.add(i);
+        }
+      }
+      return next;
+    });
+  }, [initializing, displayGroups, groupHasData]);
+  const [activeSection, setActiveSection] = React.useState(0);
+  const toggleSection = React.useCallback((index) => {
+    setExpandedSections((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  }, []);
+  const scrollToSection = React.useCallback(
+    (index) => {
+      setActiveSection(index);
+      if (!expandedSections.has(index)) {
+        setExpandedSections((prev) => new Set(prev).add(index));
+      }
+      const el = sectionRefs.current.get(index);
+      if (el) {
+        el.scrollIntoView({ behavior: "smooth", block: "start" });
+      }
+    },
+    [expandedSections]
+  );
+  const sectionStates = React.useMemo(() => {
+    return displayGroups.map((g, i) => {
+      if (i === activeSection) {
+        return "active";
+      }
+      if (!isGroupValid(g)) {
+        return "error";
+      }
+      if (groupHasData(g)) {
+        return "validated";
+      }
+      return "draft";
+    });
+  }, [displayGroups, activeSection, isGroupValid, groupHasData]);
+  if (initializing) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.loadingContainer }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm", inline: true }), " Loading configuration\u2026");
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Failed to load configuration" }, fetchError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.formButtons }, /* @__PURE__ */ React__default.default.createElement(
+      ui.LinkButton,
+      {
+        variant: "secondary",
+        size: "sm",
+        icon: "external-link-alt",
+        href: `/connections/datasources/edit/${dsUid}`
+      },
+      "Open datasource settings"
+    )));
+  }
+  const allDisabled = submitting || readOnly;
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, submitting && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.overlay }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Saving & testing\u2026")), /* @__PURE__ */ React__default.default.createElement(
+    SidebarNav,
+    {
+      groups: displayGroups,
+      activeIndex: activeSection,
+      sectionStates,
+      onSelect: scrollToSection
+    }
+  ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.main }, readOnly && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.readOnlyBanner }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Read-only \u2014 managed externally")), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.requiredNotice }, "Fields marked with * are required"), /* @__PURE__ */ React__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: styles.form }, displayGroups.map((g, i) => {
+    const visibleFields = g.fields.filter(isFieldVisible);
+    if (visibleFields.length === 0 && !httpHeadersField) {
+      return null;
+    }
+    const showHeaders = httpHeadersField && (g.group.id === "auth" || g.group.id === "url-and-auth" || g.group.id === "_required" || g.group.fieldRefs.includes("httpHeaders"));
+    const sectionLabel = /* @__PURE__ */ React__default.default.createElement("span", { className: styles.sectionLabel }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.sectionLabelText }, g.group.title), g.group.optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.sectionBadge }, "Optional"));
+    return /* @__PURE__ */ React__default.default.createElement(
+      "div",
+      {
+        key: g.group.id,
+        ref: (el) => {
+          if (el) {
+            sectionRefs.current.set(i, el);
+          }
+        },
+        className: styles.section
+      },
+      /* @__PURE__ */ React__default.default.createElement(
+        ui.Collapse,
+        {
+          label: sectionLabel,
+          isOpen: expandedSections.has(i),
+          collapsible: true,
+          onToggle: () => {
+            toggleSection(i);
+            setActiveSection(i);
+          },
+          className: styles.collapseHeader
+        },
+        /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionBody }, g.group.description && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.sectionDescription }, g.group.description), visibleFields.map((field) => /* @__PURE__ */ React__default.default.createElement(
+          SchemaField,
+          {
+            key: formKey(field),
+            field,
+            control,
+            errors,
+            disabled: allDisabled,
+            dsUid,
+            watchedValues,
+            fieldById
+          }
+        )), showHeaders && /* @__PURE__ */ React__default.default.createElement(
+          AuthorizationHeaderField,
+          {
+            headersFieldKey: formKey(httpHeadersField),
+            control,
+            disabled: allDisabled,
+            watchedValues
+          }
+        ))
+      )
+    );
+  }), submitError && /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Error" }, submitError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.formButtons }, readOnly ? /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", icon: "sync", onClick: onRetest, type: "button" }, "Test") : /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", disabled: submitting, type: "submit" }, submitting ? "Saving\u2026" : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError }))))));
+}
+
+function useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving }) {
+  const [submitting, setSubmitting] = React.useState(false);
+  const [submitError, setSubmitError] = React.useState(null);
+  const [initializing, setInitializing] = React.useState(true);
+  const [fetchError, setFetchError] = React.useState(null);
+  const [detectedReadOnly, setDetectedReadOnly] = React.useState(false);
+  const readOnly = detectedReadOnly;
+  const resolvedGroups = React.useMemo(() => {
+    const groups = resolveGroups(schema);
+    const requiredGroup = resolveRequiredFieldsGroup(schema);
+    if (!requiredGroup) {
+      return groups;
+    }
+    return [requiredGroup, ...groups];
+  }, [schema]);
+  const fieldById = React.useMemo(() => {
+    const m = /* @__PURE__ */ new Map();
+    for (const f of schema.fields) {
+      m.set(f.id, f);
+    }
+    return m;
+  }, [schema.fields]);
+  const httpHeadersField = React.useMemo(
+    () => {
+      var _a;
+      return (_a = schema.fields.find((f) => {
+        var _a2;
+        return f.key === "httpHeaders" && ((_a2 = f.storage) == null ? void 0 : _a2.type) === "indexedPair";
+      })) != null ? _a : null;
+    },
+    [schema.fields]
+  );
+  const allStorageFields = React.useMemo(
+    () => schema.fields.filter((f) => f.kind !== "virtual" && !f.isItemField && f.target),
+    [schema.fields]
+  );
+  const {
+    control,
+    handleSubmit,
+    watch,
+    reset,
+    trigger,
+    setValue,
+    formState: { errors }
+  } = reactHookForm.useForm({ mode: "onChange" });
+  const fieldsWithEffects = React.useMemo(() => {
+    const result = [];
+    for (const field of schema.fields) {
+      if (!field.effects || field.effects.length === 0) {
+        continue;
+      }
+      const mapped = field.effects.map((eff) => ({
+        when: eff.when,
+        targets: Object.entries(eff.set).map(([targetId, val]) => {
+          const targetField = fieldById.get(targetId);
+          return { key: targetField ? formKey(targetField) : targetId, value: val };
+        })
+      }));
+      result.push({ sourceKey: formKey(field), effects: mapped });
+    }
+    return result;
+  }, [schema.fields, fieldById]);
+  React.useEffect(() => {
+    let cancelled = false;
+    fetchExistingValues(dsUid, allStorageFields).then((result) => {
+      if (cancelled) {
+        return;
+      }
+      if (result.error) {
+        setFetchError(result.error);
+        setInitializing(false);
+        return;
+      }
+      if (result.readOnly) {
+        setDetectedReadOnly(true);
+      }
+      const defaults = {};
+      for (const field of allStorageFields) {
+        if (field.defaultValue !== void 0) {
+          defaults[formKey(field)] = field.defaultValue;
+        }
+      }
+      const merged = { ...defaults, ...result.values };
+      const virtualValues = computeVirtualFieldValues(schema, merged);
+      reset({ ...merged, ...virtualValues });
+      setInitializing(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [dsUid, allStorageFields, schema, reset]);
+  const watchedValues = watch();
+  const prevEffectValuesRef = React.useRef({});
+  React.useEffect(() => {
+    if (initializing) {
+      return;
+    }
+    for (const { sourceKey, effects } of fieldsWithEffects) {
+      const currentVal = watchedValues[sourceKey];
+      const prevVal = prevEffectValuesRef.current[sourceKey];
+      if (currentVal === prevVal) {
+        continue;
+      }
+      prevEffectValuesRef.current[sourceKey] = currentVal;
+      for (const eff of effects) {
+        if (evaluateEffectCondition(eff.when, currentVal)) {
+          for (const { key, value } of eff.targets) {
+            setValue(key, value);
+          }
+          break;
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithEffects, initializing, setValue]);
+  const fieldsWithOverrideDefaults = React.useMemo(() => {
+    const result = [];
+    for (const field of schema.fields) {
+      if (!field.overrides || field.overrides.length === 0) {
+        continue;
+      }
+      const ovs = field.overrides.filter((ov) => ov.defaultValue !== void 0).map((ov) => {
+        const parsed = parseDependsOn(ov.when);
+        if (!parsed) {
+          return null;
+        }
+        const depField = fieldById.get(parsed.field);
+        return {
+          depKey: depField ? formKey(depField) : parsed.field,
+          depValue: parsed.value,
+          defaultValue: ov.defaultValue
+        };
+      }).filter(Boolean);
+      if (ovs.length > 0) {
+        result.push({ targetKey: formKey(field), fieldDefault: field.defaultValue, overrides: ovs });
+      }
+    }
+    return result;
+  }, [schema.fields, fieldById]);
+  const prevOverrideDepRef = React.useRef({});
+  React.useEffect(() => {
+    var _a;
+    if (initializing) {
+      return;
+    }
+    for (const { targetKey, fieldDefault, overrides } of fieldsWithOverrideDefaults) {
+      for (const ov of overrides) {
+        const currentDepVal = String((_a = 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) {
+          setValue(targetKey, ov.defaultValue);
+        } else if (prevDepVal === ov.depValue && fieldDefault !== void 0) {
+          setValue(targetKey, fieldDefault);
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithOverrideDefaults, initializing, setValue]);
+  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;
+      }
+      const depField = fieldById.get(parsed.field);
+      const depKey = depField ? formKey(depField) : parsed.field;
+      return String((_b = watchedValues[depKey]) != null ? _b : "") === parsed.value;
+    },
+    [watchedValues, fieldById]
+  );
+  const onSubmit = React.useCallback(
+    async (data) => {
+      setSubmitting(true);
+      setSubmitError(null);
+      onSaving == null ? void 0 : onSaving(true);
+      const minDelay = new Promise((r) => setTimeout(r, 2e3));
+      try {
+        await submitDatasourceConfig(dsUid, data, allStorageFields, isFieldVisible);
+        const [refreshed] = await Promise.all([fetchExistingValues(dsUid, allStorageFields), minDelay]);
+        const defaults = {};
+        for (const field of allStorageFields) {
+          if (field.defaultValue !== void 0) {
+            defaults[formKey(field)] = field.defaultValue;
+          }
+        }
+        const merged = { ...defaults, ...refreshed.values };
+        const virtualValues = computeVirtualFieldValues(schema, merged);
+        reset({ ...merged, ...virtualValues });
+        onSuccess("UPDATED", "Configuration saved.");
+      } catch (err) {
+        await minDelay;
+        setSubmitError(err instanceof Error ? err.message : "Failed to update datasource");
+      } finally {
+        setSubmitting(false);
+        onSaving == null ? void 0 : onSaving(false);
+      }
+    },
+    [dsUid, allStorageFields, isFieldVisible, schema, reset, onSuccess, onSaving]
+  );
+  const isGroupValid = React.useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        if (!isFieldVisible(field)) {
+          continue;
+        }
+        if (errors[formKey(field)]) {
+          return false;
+        }
+        if (isFieldRequired(field, watchedValues, fieldById)) {
+          const val = watchedValues[formKey(field)];
+          if (val === SECURE_FIELD_CONFIGURED) {
+            continue;
+          }
+          if (val === void 0 || val === null || val === "") {
+            return false;
+          }
+        }
+      }
+      return true;
+    },
+    [errors, watchedValues, fieldById, isFieldVisible]
+  );
+  const groupHasData = React.useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        const val = watchedValues[formKey(field)];
+        if (val === void 0 || val === null || val === "" || val === false) {
+          continue;
+        }
+        if (val === field.defaultValue) {
+          continue;
+        }
+        return true;
+      }
+      return false;
+    },
+    [watchedValues]
+  );
+  return {
+    // Schema
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    // Form
+    control,
+    handleSubmit,
+    trigger,
+    errors,
+    watchedValues,
+    // State
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    // Callbacks
+    isFieldVisible,
+    isGroupValid,
+    groupHasData,
+    onSubmit
+  };
+}
+
+function DatasourceConfigWizard(props) {
+  const { schema, dsUid, dsName, onSuccess, onSaving, onRetest, healthError, renderActions, mode = "tab" } = props;
+  const form = useDatasourceConfigForm({ schema, dsUid, onSuccess, onSaving });
+  if (mode === "tab") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      TabLayout,
+      {
+        form,
+        schema,
+        dsUid,
+        dsName,
+        onRetest,
+        healthError,
+        renderActions
+      }
+    );
+  }
+  return /* @__PURE__ */ React__default.default.createElement(
+    WizardLayout,
+    {
+      form,
+      schema,
+      dsUid,
+      dsName,
+      onRetest,
+      healthError,
+      renderActions
+    }
+  );
+}
+function WizardLayout({ form, schema, dsUid, dsName, onRetest, healthError, renderActions }) {
+  var _a, _b, _c;
+  const styles = ui.useStyles2(getWizardStyles);
+  const [currentStep, setCurrentStep] = React.useState(0);
+  const {
+    resolvedGroups,
+    fieldById,
+    httpHeadersField,
+    control,
+    handleSubmit,
+    trigger,
+    errors,
+    watchedValues,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    onSubmit
+  } = form;
+  const arrowSteps = React.useMemo(() => {
+    const requiredGroup = resolvedGroups.find((g) => g.group.id === "_required");
+    if (!requiredGroup) {
+      return new Set(resolvedGroups.map((_, i) => i));
+    }
+    const requiredFieldIds = new Set(requiredGroup.fields.map((f) => f.id));
+    const steps = /* @__PURE__ */ new Set();
+    for (let i = 0; i < resolvedGroups.length; i++) {
+      const g = resolvedGroups[i];
+      if (g.group.id === "_required" || g.fields.some((f) => !requiredFieldIds.has(f.id))) {
+        steps.add(i);
+      }
+    }
+    return steps;
+  }, [resolvedGroups]);
+  const currentResolved = resolvedGroups[currentStep];
+  const isFirstStep = React.useMemo(() => {
+    for (let i = 0; i < currentStep; i++) {
+      if (arrowSteps.has(i)) {
+        return false;
+      }
+    }
+    return true;
+  }, [currentStep, arrowSteps]);
+  const isLastStep = React.useMemo(() => {
+    for (let i = currentStep + 1; i < resolvedGroups.length; i++) {
+      if (arrowSteps.has(i)) {
+        return false;
+      }
+    }
+    return true;
+  }, [currentStep, arrowSteps, resolvedGroups.length]);
+  const visibleFieldsForStep = React.useMemo(
+    () => currentResolved ? currentResolved.fields.filter(isFieldVisible) : [],
+    [currentResolved, isFieldVisible]
+  );
+  const currentGroupValid = React.useMemo(() => {
+    if (!currentResolved) {
+      return true;
+    }
+    for (const field of visibleFieldsForStep) {
+      if (errors[formKey(field)]) {
+        return false;
+      }
+      if (isFieldRequired(field, watchedValues, fieldById)) {
+        const val = watchedValues[formKey(field)];
+        if (val === SECURE_FIELD_CONFIGURED) {
+          continue;
+        }
+        if (val === void 0 || val === null || val === "") {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById]);
+  const goNext = React.useCallback(async () => {
+    if (!currentResolved) {
+      return;
+    }
+    if (!readOnly) {
+      const visibleKeys = visibleFieldsForStep.map((f) => formKey(f));
+      const valid = await trigger(visibleKeys);
+      if (!valid) {
+        return;
+      }
+    }
+    setCurrentStep((s) => {
+      for (let i = s + 1; i < resolvedGroups.length; i++) {
+        if (arrowSteps.has(i)) {
+          return i;
+        }
+      }
+      return s;
+    });
+  }, [currentResolved, visibleFieldsForStep, trigger, resolvedGroups.length, arrowSteps, readOnly]);
+  const goPrev = React.useCallback(() => {
+    setCurrentStep((s) => {
+      for (let i = s - 1; i >= 0; i--) {
+        if (arrowSteps.has(i)) {
+          return i;
+        }
+      }
+      return s;
+    });
+  }, [arrowSteps]);
+  if (initializing) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm", inline: true }), " Loading configuration...");
+  }
+  if (fetchError) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Failed to load configuration" }, fetchError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttons }, /* @__PURE__ */ React__default.default.createElement(
+      ui.LinkButton,
+      {
+        variant: "secondary",
+        size: "sm",
+        icon: "external-link-alt",
+        href: `/connections/datasources/edit/${dsUid}`
+      },
+      "Open datasource settings"
+    )));
+  }
+  const allDisabled = submitting || readOnly;
+  if (resolvedGroups.length === 0) {
+    return null;
+  }
+  const currentGroup = currentResolved == null ? void 0 : currentResolved.group;
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, submitting && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.overlay }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { size: "sm" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Saving & testing\u2026")), readOnly && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.readOnlyBanner }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Read-only \u2014 managed externally")), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.navBar }, currentGroup && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: (_a = currentGroup.description) != null ? _a : currentGroup.title }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.navTitle }, currentGroup.title, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.stepCount }, currentStep + 1, "/", resolvedGroups.length))), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.navActions }, /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: isFirstStep ? "First step" : `Previous: ${(_b = resolvedGroups[currentStep - 1]) == null ? void 0 : _b.group.title}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "angle-left",
+      "aria-label": "Previous",
+      onClick: goPrev,
+      disabled: isFirstStep || submitting,
+      type: "button"
+    }
+  )), /* @__PURE__ */ React__default.default.createElement(
+    ui.Select,
+    {
+      options: resolvedGroups.map((g, i) => ({ label: g.group.title, value: i })),
+      value: currentStep,
+      onChange: (v) => {
+        if (v) {
+          setCurrentStep(v.value);
+        }
+      },
+      disabled: submitting,
+      width: 18
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: isLastStep ? "Last step" : `Next: ${(_c = resolvedGroups[currentStep + 1]) == null ? void 0 : _c.group.title}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: isLastStep || !readOnly && !currentGroupValid ? "secondary" : "primary",
+      size: "sm",
+      icon: "angle-right",
+      "aria-label": "Next",
+      onClick: goNext,
+      disabled: isLastStep || submitting,
+      type: "button"
+    }
+  )))), currentResolved && /* @__PURE__ */ React__default.default.createElement("form", { onSubmit: handleSubmit(onSubmit), className: styles.form }, visibleFieldsForStep.map((field) => /* @__PURE__ */ React__default.default.createElement(
+    SchemaField,
+    {
+      key: formKey(field),
+      field,
+      control,
+      errors,
+      disabled: allDisabled,
+      dsUid,
+      watchedValues,
+      fieldById
+    }
+  )), (currentResolved.group.id === "_required" || currentResolved.group.id === "auth") && httpHeadersField && /* @__PURE__ */ React__default.default.createElement(
+    AuthorizationHeaderField,
+    {
+      headersFieldKey: formKey(httpHeadersField),
+      control,
+      disabled: allDisabled,
+      watchedValues
+    }
+  ), submitError && /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "error", title: "Error" }, submitError), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttons }, readOnly ? /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", icon: "sync", onClick: onRetest, type: "button" }, "Test") : /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "primary", size: "sm", disabled: submitting || !currentGroupValid, type: "submit" }, submitting ? "Saving..." : "Save & Test"), healthError && (renderActions == null ? void 0 : renderActions({ dsUid, dsName, dsType: schema.pluginType, healthError })))));
+}
+
+var __defProp$2 = Object.defineProperty;
+var __defNormalProp$2 = (obj, key, value) => key in obj ? __defProp$2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$2 = (obj, key, value) => __defNormalProp$2(obj, key + "" , value);
+class DatasourceErrorBoundary extends React.Component {
+  constructor() {
+    super(...arguments);
+    __publicField$2(this, "state", { error: null });
+  }
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+  componentDidCatch(error, info) {
+    console.error("[DatasourceConfigWizard] Caught error:", error, info.componentStack);
+  }
+  render() {
+    if (this.state.error) {
+      return /* @__PURE__ */ React__default.default.createElement(ui.Alert, { severity: "warning", title: "Configuration wizard unavailable" }, "Could not load the configuration wizard", this.props.dsName ? ` for ${this.props.dsName}` : "", ". Use the Settings link to configure this datasource manually.");
+    }
+    return this.props.children;
+  }
+}
+
+const MAX_CONCURRENCY = 5;
+function useHealthChecks() {
+  const [healthMap, setHealthMap] = React.useState({});
+  const queueRef = React.useRef([]);
+  const activeRef = React.useRef(0);
+  const mountedRef = React.useRef(true);
+  const everQueuedRef = React.useRef(/* @__PURE__ */ new Set());
+  const checkOne = React.useCallback(async (uid) => {
+    if (!mountedRef.current) {
+      return;
+    }
+    setHealthMap((prev) => ({ ...prev, [uid]: { state: "checking" } }));
+    try {
+      const result = await runtime.getBackendSrv().get(
+        `/api/datasources/uid/${uid}/health`,
+        void 0,
+        void 0,
+        { showErrorAlert: false }
+      );
+      if (!mountedRef.current) {
+        return;
+      }
+      setHealthMap((prev) => {
+        var _a;
+        return {
+          ...prev,
+          [uid]: { state: "done", status: (_a = result.status) != null ? _a : "OK", message: result.message }
+        };
+      });
+    } catch (error) {
+      if (!mountedRef.current) {
+        return;
+      }
+      let status = "ERROR";
+      let message = "";
+      if (error && typeof error === "object" && "data" in error) {
+        const data = error.data;
+        if (data == null ? void 0 : data.status) {
+          status = data.status;
+        }
+        if (data == null ? void 0 : data.message) {
+          message = data.message;
+        }
+      }
+      if (!message) {
+        message = error instanceof Error ? error.message : String(error);
+      }
+      setHealthMap((prev) => ({
+        ...prev,
+        [uid]: { state: "done", status, message }
+      }));
+    }
+  }, []);
+  const processQueue = React.useCallback(() => {
+    while (activeRef.current < MAX_CONCURRENCY && queueRef.current.length > 0) {
+      const uid = queueRef.current.shift();
+      activeRef.current++;
+      checkOne(uid).finally(() => {
+        activeRef.current--;
+        processQueue();
+      });
+    }
+  }, [checkOne]);
+  const checkUids = React.useCallback(
+    (uids) => {
+      const toCheck = [];
+      for (const uid of uids) {
+        if (everQueuedRef.current.has(uid)) {
+          continue;
+        }
+        everQueuedRef.current.add(uid);
+        toCheck.push(uid);
+      }
+      if (toCheck.length === 0) {
+        return;
+      }
+      setHealthMap((prev) => {
+        const next = { ...prev };
+        for (const uid of toCheck) {
+          next[uid] = { state: "pending" };
+        }
+        return next;
+      });
+      queueRef.current.push(...toCheck);
+      processQueue();
+    },
+    [processQueue]
+  );
+  const retry = React.useCallback(
+    (uid) => {
+      everQueuedRef.current.delete(uid);
+      everQueuedRef.current.add(uid);
+      setHealthMap((prev) => ({ ...prev, [uid]: { state: "pending" } }));
+      queueRef.current.push(uid);
+      processQueue();
+    },
+    [processQueue]
+  );
+  return { healthMap, checkUids, retry };
+}
+
+let pluginNameCache = null;
+function buildPluginNameCache() {
+  var _a;
+  if (pluginNameCache) {
+    return pluginNameCache;
+  }
+  const map = /* @__PURE__ */ new Map();
+  try {
+    const list = runtime.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;
+}
+
+var __defProp$1 = Object.defineProperty;
+var __defNormalProp$1 = (obj, key, value) => key in obj ? __defProp$1(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField$1 = (obj, key, value) => __defNormalProp$1(obj, typeof key !== "symbol" ? key + "" : key, value);
+const getCustomHeaderRowStyles = ui.stylesFactory(() => {
+  return {
+    layout: css.css`
+      display: flex;
+      align-items: center;
+      margin-bottom: 4px;
+      > * {
+        margin-left: 4px;
+        margin-bottom: 0;
+        height: 100%;
+        &:first-child,
+        &:last-child {
+          margin-left: 0;
+        }
+      }
+    `
+  };
+});
+const CustomHeaderRow = ({ header, onBlur, onChange, onRemove, onReset }) => {
+  const styles = getCustomHeaderRowStyles();
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.layout }, /* @__PURE__ */ React__default.default.createElement(
+    ui.LegacyForms.FormField,
+    {
+      label: "Header",
+      name: "name",
+      placeholder: "X-Custom-Header",
+      labelWidth: 5,
+      value: header.name || "",
+      onChange: (e) => onChange({ ...header, name: e.target.value }),
+      onBlur
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(
+    ui.LegacyForms.SecretFormField,
+    {
+      label: "Value",
+      "aria-label": "Value",
+      name: "value",
+      isConfigured: header.configured,
+      value: header.value,
+      labelWidth: 5,
+      inputWidth: header.configured ? 11 : 12,
+      placeholder: "Header Value",
+      onReset: () => onReset(header.id),
+      onChange: (e) => onChange({ ...header, value: e.target.value }),
+      onBlur
+    }
+  ), /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      type: "button",
+      "aria-label": "Remove header",
+      variant: "secondary",
+      size: "xs",
+      onClick: (_e) => onRemove(header.id)
+    },
+    /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "trash-alt" })
+  ));
+};
+CustomHeaderRow.displayName = "CustomHeaderRow";
+class CustomHeadersSettings extends React.PureComponent {
+  constructor(props) {
+    super(props);
+    __publicField$1(this, "state", {
+      headers: []
+    });
+    __publicField$1(this, "updateSettings", () => {
+      const { headers } = this.state;
+      const newJsonData = Object.fromEntries(
+        Object.entries(this.props.dataSourceConfig.jsonData).filter(([key, val]) => !key.startsWith("httpHeaderName"))
+      );
+      const newSecureJsonData = Object.fromEntries(
+        Object.entries(this.props.dataSourceConfig.secureJsonData || {}).filter(
+          ([key, val]) => !key.startsWith("httpHeaderValue")
+        )
+      );
+      for (const [index, header] of headers.entries()) {
+        newJsonData[`httpHeaderName${index + 1}`] = header.name;
+        if (!header.configured) {
+          newSecureJsonData[`httpHeaderValue${index + 1}`] = header.value;
+        }
+      }
+      this.props.onChange({
+        ...this.props.dataSourceConfig,
+        jsonData: newJsonData,
+        secureJsonData: newSecureJsonData
+      });
+    });
+    __publicField$1(this, "onHeaderAdd", () => {
+      this.setState((prevState) => {
+        return {
+          headers: [...prevState.headers, { id: lodash.uniqueId(), name: "", value: "", configured: false }]
+        };
+      });
+    });
+    __publicField$1(this, "onHeaderChange", (headerIndex, value) => {
+      this.setState(({ headers }) => {
+        return {
+          headers: headers.map((item, index) => {
+            if (headerIndex !== index) {
+              return item;
+            }
+            return { ...value };
+          })
+        };
+      });
+    });
+    __publicField$1(this, "onHeaderReset", (headerId) => {
+      this.setState(({ headers }) => {
+        return {
+          headers: headers.map((h, i) => {
+            if (h.id !== headerId) {
+              return h;
+            }
+            return {
+              ...h,
+              value: "",
+              configured: false
+            };
+          })
+        };
+      });
+    });
+    __publicField$1(this, "onHeaderRemove", (headerId) => {
+      this.setState(
+        ({ headers }) => ({
+          headers: headers.filter((h) => h.id !== headerId)
+        }),
+        this.updateSettings
+      );
+    });
+    const { jsonData, secureJsonData, secureJsonFields } = this.props.dataSourceConfig;
+    this.state = {
+      headers: Object.keys(jsonData).sort().filter((key) => key.startsWith("httpHeaderName")).map((key, index) => {
+        return {
+          id: lodash.uniqueId(),
+          name: jsonData[key],
+          value: secureJsonData !== void 0 ? secureJsonData[key] : "",
+          configured: secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`] || false
+        };
+      })
+    };
+  }
+  render() {
+    const { headers } = this.state;
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form-group" }, /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.default.createElement("h6", null, "Custom HTTP Headers")), /* @__PURE__ */ React__default.default.createElement("div", null, headers.map((header, i) => /* @__PURE__ */ React__default.default.createElement(
+      CustomHeaderRow,
+      {
+        key: header.id,
+        header,
+        onChange: (h) => {
+          this.onHeaderChange(i, h);
+        },
+        onBlur: this.updateSettings,
+        onRemove: this.onHeaderRemove,
+        onReset: this.onHeaderReset
+      }
+    ))), /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form" }, /* @__PURE__ */ React__default.default.createElement(
+      ui.Button,
+      {
+        variant: "secondary",
+        icon: "plus",
+        type: "button",
+        onClick: (e) => {
+          this.onHeaderAdd();
+        }
+      },
+      "Add header"
+    )));
+  }
+}
+
+var QueryEditorMode = /* @__PURE__ */ ((QueryEditorMode2) => {
+  QueryEditorMode2["Code"] = "code";
+  QueryEditorMode2["Builder"] = "builder";
+  return QueryEditorMode2;
+})(QueryEditorMode || {});
+const BINARY_OPERATIONS_KEY = "Binary operations";
+
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+class QueryModellerBase {
+  constructor(operationDefinitions, innerQueryPlaceholder) {
+    __publicField(this, "operationsRegistry");
+    __publicField(this, "categories", []);
+    __publicField(this, "innerQueryPlaceholder");
+    this.operationsRegistry = new data.Registry(() => operationDefinitions);
+    this.innerQueryPlaceholder = innerQueryPlaceholder || "<query>";
+  }
+  setOperationCategories(categories) {
+    this.categories = categories;
+  }
+  getOperationsForCategory(category) {
+    return this.operationsRegistry.list().filter((op) => op.category === category && !op.hideFromList);
+  }
+  getAlternativeOperations(key) {
+    return this.operationsRegistry.list().filter((op) => op.alternativesKey && op.alternativesKey === key);
+  }
+  getCategories() {
+    return this.categories;
+  }
+  getOperationDefinition(id) {
+    return this.operationsRegistry.getIfExists(id);
+  }
+  hasBinaryOp(query) {
+    return query.operations.find((op) => {
+      const def = this.getOperationDefinition(op.id);
+      return (def == null ? void 0 : def.category) === BINARY_OPERATIONS_KEY;
+    }) !== void 0;
+  }
+}
+
+const CONFLICTING_LABEL_FILTER_ERROR_MESSAGE = "You have conflicting label filters";
+function LabelFilterItem({
+  item,
+  items,
   defaultOp,
   onChange,
   onDelete,
@@ -9842,6 +12124,412 @@ const convertUnits = (queryStats) => {
   return text + suffix;
 };
 
+function generateLLMHint(schema) {
+  var _a, _b, _c, _d;
+  const hints = [];
+  for (const field of schema.fields) {
+    if (((_a = field.ui) == null ? void 0 : _a.component) !== "select" || field.target !== "jsonData" || field.kind === "virtual") {
+      continue;
+    }
+    const options = (_c = (_b = field.ui) == null ? void 0 : _b.options) != null ? _c : [];
+    const values = options.map((opt) => {
+      const isDefault = field.defaultValue != null && String(opt.value) === String(field.defaultValue);
+      return isDefault ? `"${opt.value}" (default)` : `"${opt.value}"`;
+    }).join(", ");
+    if (values) {
+      hints.push(`- ${(_d = field.label) != null ? _d : field.key}: jsonData.${field.key} \u2014 values: ${values}`);
+    }
+  }
+  return hints.join("\n");
+}
+function generateTroubleshootingFields(schema) {
+  var _a, _b, _c;
+  const result = [];
+  for (const field of schema.fields) {
+    if (field.kind === "virtual" || field.isItemField) {
+      continue;
+    }
+    const entry = {
+      label: (_a = field.label) != null ? _a : field.key,
+      key: field.target === "root" ? field.key : `${field.target}.${field.key}`,
+      target: (_b = field.target) != null ? _b : "jsonData",
+      type: field.valueType,
+      required: !!field.required
+    };
+    if (field.description) {
+      entry.description = field.description;
+    }
+    if (field.defaultValue != null) {
+      entry.defaultValue = field.defaultValue;
+    }
+    if (((_c = field.ui) == null ? void 0 : _c.options) && field.ui.options.length > 0) {
+      entry.options = field.ui.options.map((o) => String(o.value));
+    }
+    if (field.section) {
+      entry.section = field.section;
+    }
+    if (field.dependsOn) {
+      entry.dependsOn = field.dependsOn;
+    }
+    result.push(entry);
+  }
+  return result;
+}
+
+function yamlIndent(depth) {
+  return "  ".repeat(depth);
+}
+function yamlString(value) {
+  if (value === null || value === void 0) {
+    return '""';
+  }
+  const s = String(value);
+  if (s === "") {
+    return '""';
+  }
+  return yaml__default.default.dump(s, { lineWidth: -1 }).trimEnd();
+}
+function yamlValue(value, depth) {
+  if (value === null || value === void 0) {
+    return '""';
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  if (typeof value === "number") {
+    return String(value);
+  }
+  if (typeof value === "string") {
+    return yamlString(value);
+  }
+  if (Array.isArray(value)) {
+    if (value.length === 0) {
+      return "[]";
+    }
+    const lines = value.map((item) => {
+      if (typeof item === "object" && item !== null && !Array.isArray(item)) {
+        const entries = Object.entries(item);
+        if (entries.length === 0) {
+          return `${yamlIndent(depth)}- {}`;
+        }
+        const [firstKey, firstVal] = entries[0];
+        const firstLine = `${yamlIndent(depth)}- ${yamlString(firstKey)}: ${yamlValue(firstVal, depth + 2)}`;
+        const rest = entries.slice(1).map(([k, v]) => `${yamlIndent(depth + 1)}${yamlString(k)}: ${yamlValue(v, depth + 2)}`);
+        return [firstLine, ...rest].join("\n");
+      }
+      return `${yamlIndent(depth)}- ${yamlValue(item, depth + 1)}`;
+    });
+    return "\n" + lines.join("\n");
+  }
+  if (typeof value === "object") {
+    const entries = Object.entries(value);
+    if (entries.length === 0) {
+      return "{}";
+    }
+    const lines = entries.map(([k, v]) => `${yamlIndent(depth)}${yamlString(k)}: ${yamlValue(v, depth + 1)}`);
+    return "\n" + lines.join("\n");
+  }
+  return yamlString(value);
+}
+function isCertField(field) {
+  var _a;
+  const k = field.key.toLowerCase();
+  return field.target === "secureJsonData" && (k.includes("cert") || k.includes("key") || ((_a = field.ui) == null ? void 0 : _a.component) === "textarea");
+}
+function isExcludedFromProvisioning(field) {
+  var _a, _b;
+  if (field.kind === "virtual") {
+    return true;
+  }
+  if (field.isItemField) {
+    return true;
+  }
+  if (((_a = field.tags) == null ? void 0 : _a.some((t) => t.startsWith("managed-by:"))) && field.target !== "root") {
+    return true;
+  }
+  if (((_b = field.storage) == null ? void 0 : _b.type) === "indexedPair") {
+    return true;
+  }
+  return false;
+}
+function secretPlaceholder(field) {
+  if (isCertField(field)) {
+    return "|\n      xxxxxx";
+  }
+  return "xxxxxx";
+}
+function templateValue(field) {
+  var _a;
+  if (field.defaultValue !== void 0) {
+    return field.defaultValue;
+  }
+  if (((_a = field.ui) == null ? void 0 : _a.options) && field.ui.options.length > 0) {
+    return field.ui.options[0].value;
+  }
+  switch (field.valueType) {
+    case "string":
+      return "";
+    case "number":
+      return 0;
+    case "boolean":
+      return false;
+    case "array":
+      return [];
+    case "object":
+    case "map":
+      return {};
+    default:
+      return "";
+  }
+}
+function fieldComment(field, indent) {
+  var _a, _b, _c;
+  const parts = [];
+  const label = (_a = field.label) != null ? _a : field.key;
+  let line = label;
+  if (field.required) {
+    line += " (REQUIRED)";
+  }
+  if (field.description) {
+    line += ` \u2014 ${field.description}`;
+  }
+  parts.push(`${indent}# ${line}`);
+  const options = (_b = field.ui) == null ? void 0 : _b.options;
+  if (options && options.length > 0) {
+    const vals = options.map((o) => String(o.value)).join(", ");
+    parts.push(`${indent}# Allowed values: ${vals}`);
+  }
+  const allowedValuesRule = (_c = field.validations) == null ? void 0 : _c.find(
+    (v) => v.type === "allowedValues"
+  );
+  if (allowedValuesRule && !options) {
+    const vals = allowedValuesRule.values.map((v) => String(v)).join(", ");
+    parts.push(`${indent}# Allowed values: ${vals}`);
+  }
+  if (field.dependsOn) {
+    parts.push(`${indent}# Only when: ${field.dependsOn}`);
+  }
+  return parts.join("\n");
+}
+function toProvisioningYaml(schema, values, options) {
+  var _a, _b, _c, _d, _e, _f;
+  const isTemplate = !values;
+  const showComments = (_a = options == null ? void 0 : options.comments) != null ? _a : isTemplate;
+  const indent2 = "    ";
+  const indent3 = "      ";
+  const groups = resolveGroups(schema);
+  const rootFields = [];
+  const jsonDataFieldsByGroup = [];
+  const secureJsonDataFieldsByGroup = [];
+  const virtualFieldsWithOptions = [];
+  for (const { group, fields } of groups) {
+    const jd = [];
+    const sd = [];
+    for (const field of fields) {
+      if (field.kind === "virtual" && ((_b = field.ui) == null ? void 0 : _b.options) && field.ui.options.length > 0) {
+        virtualFieldsWithOptions.push(field);
+        continue;
+      }
+      if (isExcludedFromProvisioning(field)) {
+        continue;
+      }
+      switch (field.target) {
+        case "root":
+          rootFields.push(field);
+          break;
+        case "jsonData":
+          jd.push(field);
+          break;
+        case "secureJsonData":
+          sd.push(field);
+          break;
+      }
+    }
+    if (jd.length > 0) {
+      jsonDataFieldsByGroup.push({ group, fields: jd });
+    }
+    if (sd.length > 0) {
+      secureJsonDataFieldsByGroup.push({ group, fields: sd });
+    }
+  }
+  const allSecureJsonDataFields = secureJsonDataFieldsByGroup.flatMap((g) => g.fields);
+  const groupedFieldIds = new Set(groups.flatMap(({ group }) => group.fieldRefs));
+  for (const field of schema.fields) {
+    if (field.target === "root" && !groupedFieldIds.has(field.id) && !isExcludedFromProvisioning(field)) {
+      rootFields.push(field);
+    }
+  }
+  const lines = [];
+  lines.push("apiVersion: 1");
+  lines.push("");
+  lines.push("datasources:");
+  lines.push(`${indent2.slice(2)}- name: ${yamlString((_d = (_c = options == null ? void 0 : options.name) != null ? _c : values == null ? void 0 : values.name) != null ? _d : `my-${schema.pluginType}`)}`);
+  lines.push(`${indent2}type: ${schema.pluginType}`);
+  if (!isTemplate && (values == null ? void 0 : values.uid)) {
+    lines.push(`${indent2}uid: ${yamlString(values.uid)}`);
+  }
+  const ALREADY_EMITTED_ROOT = /* @__PURE__ */ new Set(["name", "type", "uid"]);
+  for (const field of rootFields) {
+    if (ALREADY_EMITTED_ROOT.has(field.key)) {
+      continue;
+    }
+    const val = values ? values[field.key] : templateValue(field);
+    if (val === void 0 || val === null) {
+      continue;
+    }
+    if (!isTemplate && val === false) {
+      continue;
+    }
+    if (showComments) {
+      lines.push(fieldComment(field, indent2));
+    }
+    lines.push(`${indent2}${field.key}: ${yamlValue(val, 3)}`);
+  }
+  if (showComments) {
+    for (const vf of virtualFieldsWithOptions) {
+      const label = (_e = vf.label) != null ? _e : vf.key;
+      const opts = vf.ui.options.map((o) => `${String(o.value)} (${o.label})`).join(", ");
+      lines.push(`${indent2}# ${label}: ${opts}`);
+      if (vf.description) {
+        lines.push(`${indent2}#   ${vf.description}`);
+      }
+    }
+  }
+  const emittedJsonDataKeys = /* @__PURE__ */ new Set();
+  const emittedSecureJsonDataKeys = /* @__PURE__ */ new Set();
+  const jsonDataValues = values == null ? void 0 : values.jsonData;
+  const hasJsonDataFromSchema = jsonDataFieldsByGroup.length > 0;
+  const hasJsonDataFromValues = !isTemplate && jsonDataValues && Object.keys(jsonDataValues).length > 0;
+  if (hasJsonDataFromSchema || hasJsonDataFromValues) {
+    lines.push(`${indent2}jsonData:`);
+    for (const { group, fields: groupFields } of jsonDataFieldsByGroup) {
+      if (showComments && jsonDataFieldsByGroup.length > 1) {
+        lines.push(`${indent3}# --- ${group.title} ---`);
+      }
+      for (const field of groupFields) {
+        const val = values ? getNestedValue(values, "jsonData", field) : templateValue(field);
+        if (val === void 0 || val === null) {
+          continue;
+        }
+        if (!isTemplate && field.defaultValue !== void 0 && val === field.defaultValue) {
+          continue;
+        }
+        emittedJsonDataKeys.add(field.key);
+        if (showComments) {
+          lines.push(fieldComment(field, indent3));
+        }
+        const rendered = yamlValue(val, 4);
+        if (rendered.startsWith("\n")) {
+          lines.push(`${indent3}${field.key}:${rendered}`);
+        } else {
+          lines.push(`${indent3}${field.key}: ${rendered}`);
+        }
+      }
+    }
+    if (!isTemplate && jsonDataValues) {
+      for (const [key, val] of Object.entries(jsonDataValues)) {
+        if (emittedJsonDataKeys.has(key)) {
+          continue;
+        }
+        if (val === void 0 || val === null) {
+          continue;
+        }
+        const rendered = yamlValue(val, 4);
+        if (rendered.startsWith("\n")) {
+          lines.push(`${indent3}${key}:${rendered}`);
+        } else {
+          lines.push(`${indent3}${key}: ${rendered}`);
+        }
+      }
+    }
+  }
+  const secureJsonFields = (_f = values == null ? void 0 : values.secureJsonFields) != null ? _f : {};
+  const inferredSecureKeys = !isTemplate ? inferSecureJsonDataKeys(jsonDataValues) : [];
+  const activeSecureFields = isTemplate ? allSecureJsonDataFields : allSecureJsonDataFields.filter((f) => secureJsonFields[f.key] === true);
+  if (activeSecureFields.length > 0 || inferredSecureKeys.length > 0) {
+    lines.push(`${indent2}secureJsonData:`);
+    for (const field of activeSecureFields) {
+      emittedSecureJsonDataKeys.add(field.key);
+      if (showComments) {
+        lines.push(fieldComment(field, indent3));
+      }
+      lines.push(`${indent3}${field.key}: ${secretPlaceholder(field)}`);
+    }
+    for (const key of inferredSecureKeys) {
+      if (emittedSecureJsonDataKeys.has(key)) {
+        continue;
+      }
+      lines.push(`${indent3}${key}: xxxxxx`);
+    }
+  }
+  return lines.join("\n");
+}
+function inferSecureJsonDataKeys(jsonData) {
+  if (!jsonData) {
+    return [];
+  }
+  const keys = [];
+  for (const key of Object.keys(jsonData)) {
+    const match = key.match(/^httpHeaderName(\d+)$/);
+    if (match) {
+      keys.push(`httpHeaderValue${match[1]}`);
+    }
+  }
+  return keys;
+}
+function getNestedValue(values, target, field) {
+  const nested = values[target];
+  if (nested && typeof nested === "object") {
+    return nested[field.key];
+  }
+  return void 0;
+}
+function datasourceToProvisioningYaml(ds, schema) {
+  if (schema) {
+    return toProvisioningYaml(schema, ds, { comments: false });
+  }
+  const lines = [];
+  lines.push("apiVersion: 1");
+  lines.push("");
+  lines.push("datasources:");
+  lines.push(`  - name: ${yamlString(ds.name)}`);
+  if (ds.uid) {
+    lines.push(`    uid: ${yamlString(ds.uid)}`);
+  }
+  lines.push(`    type: ${yamlString(ds.type)}`);
+  if (ds.url) {
+    lines.push(`    url: ${yamlString(ds.url)}`);
+  }
+  if (ds.database) {
+    lines.push(`    database: ${yamlString(ds.database)}`);
+  }
+  if (ds.isDefault) {
+    lines.push("    isDefault: true");
+  }
+  if (ds.basicAuth) {
+    lines.push("    basicAuth: true");
+    if (ds.basicAuthUser) {
+      lines.push(`    basicAuthUser: ${yamlString(ds.basicAuthUser)}`);
+    }
+  }
+  const jsonData = ds.jsonData;
+  if (jsonData && Object.keys(jsonData).length > 0) {
+    lines.push("    jsonData:");
+    for (const [key, val] of Object.entries(jsonData)) {
+      const rendered = yamlValue(val, 4);
+      if (rendered.startsWith("\n")) {
+        lines.push(`      ${key}:${rendered}`);
+      } else {
+        lines.push(`      ${key}: ${rendered}`);
+      }
+    }
+  }
+  lines.push("    # secureJsonData: (secrets are not exported \u2014 add manually)");
+  lines.push("    #   mySecret: xxxxxx");
+  return lines.join("\n");
+}
+
+exports.getConfigSchema = schemas.getConfigSchema;
 exports.AccessoryButton = AccessoryButton;
 exports.AdvancedHttpSettings = AdvancedHttpSettings;
 exports.Auth = Auth;
@@ -9861,6 +12549,8 @@ exports.DataLinks = DataLinks;
 exports.DataSourceDescription = DataSourceDescription;
 exports.DataSourcePicker = DataSourcePicker;
 exports.DatasetSelector = DatasetSelector;
+exports.DatasourceConfigWizard = DatasourceConfigWizard;
+exports.DatasourceErrorBoundary = DatasourceErrorBoundary;
 exports.DatePicker = DatePicker;
 exports.DatePickerWithInput = DatePickerWithInput;
 exports.DebounceInput = DebounceInput;
@@ -9896,6 +12586,7 @@ exports.QueryModellerBase = QueryModellerBase;
 exports.QueryOptionGroup = QueryOptionGroup;
 exports.RawQuery = RawQuery;
 exports.RunQueryButton = RunQueryButton;
+exports.SECURE_FIELD_CONFIGURED = SECURE_FIELD_CONFIGURED;
 exports.SQLEditor = SQLEditor;
 exports.SQLEditorMode = SQLEditorMode;
 exports.SQLEditorTestUtils = SQLEditorTestUtils;
@@ -9909,10 +12600,28 @@ exports.SuggestionKind = SuggestionKind;
 exports.TLSSettings = TLSSettings;
 exports.TableSelector = TableSelector;
 exports.TokenType = TokenType;
+exports.buildDatasourceConfigPayload = buildDatasourceConfigPayload;
+exports.computeVirtualFieldValues = computeVirtualFieldValues;
 exports.convertLegacyAuthProps = convertLegacyAuthProps;
+exports.datasourceToProvisioningYaml = datasourceToProvisioningYaml;
+exports.evaluateComputedRead = evaluateComputedRead;
+exports.expandIndexedPair = expandIndexedPair;
+exports.fetchExistingValues = fetchExistingValues;
+exports.flattenIndexedPair = flattenIndexedPair;
+exports.formKey = formKey;
 exports.formatDate = formatDate;
+exports.generateLLMHint = generateLLMHint;
+exports.generateTroubleshootingFields = generateTroubleshootingFields;
 exports.getStandardSQLCompletionProvider = getStandardSQLCompletionProvider;
 exports.grafanaStandardSQLLanguage = language;
 exports.grafanaStandardSQLLanguageConf = conf;
+exports.parseDependsOn = parseDependsOn;
+exports.resolveActiveOverride = resolveActiveOverride;
+exports.resolveGroups = resolveGroups;
+exports.resolvePluginName = resolvePluginName;
+exports.resolveRequiredFieldsGroup = resolveRequiredFieldsGroup;
+exports.submitDatasourceConfig = submitDatasourceConfig;
 exports.toOption = toOption;
+exports.toProvisioningYaml = toProvisioningYaml;
+exports.useHealthChecks = useHealthChecks;
 //# sourceMappingURL=index.cjs.map