@grafana/plugin-ui 0.13.1 → 0.14.1-dsconfig.032cfc4

package/dist/cjs/index.cjs

@@ -11,22 +11,25 @@ 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 useDatasourceSchema = require('./useDatasourceSchema-CxPGD2-b.js');
+var reactHookForm = require('react-hook-form');
+require('@marcbachmann/cel-js');
 var dnd = require('@hello-pangea/dnd');
 var reactPopperTooltip = require('react-popper-tooltip');
 var Prism = require('prismjs');
+require('js-yaml');
 
 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);
 
 const QueryEditorRow = (props) => {
@@ -76,7 +79,7 @@ function Segment(props) {
   );
 }
 
-const getStyles$r = (theme) => {
+const getStyles$x = (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$x(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$w() {
   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$w();
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(
     ui.Input,
     {
@@ -339,19 +342,19 @@ 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);
-        this.setState({ error: undefined });
+        this.setState({ error: void 0 });
       }
     });
   }
@@ -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$v = 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$v();
   const [showInternalLink, setShowInternalLink] = useInternalLink(value.datasourceUid);
   const handleChange = (field) => (event) => {
     onChange({
@@ -535,7 +538,7 @@ const DataLink = (props) => {
         if (showInternalLink) {
           onChange({
             ...value,
-            datasourceUid: undefined
+            datasourceUid: void 0
           });
         }
         setShowInternalLink(!showInternalLink);
@@ -568,7 +571,7 @@ function useInternalLink(datasourceUid) {
   return [showInternalLink, setShowInternalLink];
 }
 
-const getStyles$o = (theme) => ({
+const getStyles$u = (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$u(theme);
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("h3", { className: "page-heading" }, "Data links"), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.infoText }, "Add links to existing fields. Links will be shown in log row details next to the field value."), /* @__PURE__ */ React__default.default.createElement("div", { className: "gf-form-group" }, value && value.map((field, index) => {
     return /* @__PURE__ */ React__default.default.createElement(
       DataLink,
@@ -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 ? undefined : _a[0]) == null ? undefined : _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 ? undefined : _c.property.name) {
-    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
-  }
-  if (((_d = sql.orderBy) == null ? undefined : _d.property.name) && sql.orderByDirection) {
-    rawQuery += `${sql.orderByDirection} `;
-  }
-  if (sql.limit !== undefined && 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 ? undefined : _a.map((p) => `${p.name}`)})`;
-    } else {
-      rawColumn += `${(_b = c.parameters) == null ? undefined : _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 ? undefined : _a.length) || ((_b = c.parameters) == null ? undefined : _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 ? undefined : q.editorMode) || EditorMode.Builder;
-  if ((q == null ? undefined : q.editorMode) === undefined && (q == null ? undefined : q.rawSql) !== undefined) {
-    editorMode = EditorMode.Code;
-  }
-  const result = {
-    ...q,
-    refId: (q == null ? undefined : q.refId) || "A",
-    format: (q == null ? undefined : q.format) !== undefined ? q.format : QueryFormat.Table,
-    rawSql: (q == null ? undefined : q.rawSql) || "",
-    editorMode,
-    sql: (q == null ? undefined : 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) {
@@ -789,7 +703,7 @@ class LinkedToken {
   }
   is(type, value) {
     const isType = this.type === type;
-    return value !== undefined ? isType && compareTokenWithValue(type, this, value) : isType;
+    return value !== void 0 ? isType && compareTokenWithValue(type, this, value) : isType;
   }
   getPreviousNonWhiteSpaceToken() {
     let curr = this.previous;
@@ -805,7 +719,7 @@ class LinkedToken {
     let curr = this.previous;
     while (curr != null) {
       const isType = curr.type === type;
-      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+      if (value !== void 0 ? isType && compareTokenWithValue(type, curr, value) : isType) {
         return curr;
       }
       curr = curr.previous;
@@ -816,12 +730,12 @@ class LinkedToken {
     let tokens = [];
     let curr = this.previous;
     while (curr != null) {
-      if (ignoreTypes.some((t) => t === (curr == null ? undefined : curr.type))) {
+      if (ignoreTypes.some((t) => t === (curr == null ? void 0 : curr.type))) {
         curr = curr.previous;
         continue;
       }
       const isType = curr.type === type;
-      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+      if (value !== void 0 ? isType && compareTokenWithValue(type, curr, value) : isType) {
         return tokens;
       }
       if (!curr.isWhiteSpace()) {
@@ -835,12 +749,12 @@ class LinkedToken {
     let tokens = [];
     let curr = this.next;
     while (curr != null) {
-      if (ignoreTypes.some((t) => t === (curr == null ? undefined : curr.type))) {
+      if (ignoreTypes.some((t) => t === (curr == null ? void 0 : curr.type))) {
         curr = curr.next;
         continue;
       }
       const isType = curr.type === type;
-      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+      if (value !== void 0 ? isType && compareTokenWithValue(type, curr, value) : isType) {
         return tokens;
       }
       if (!curr.isWhiteSpace()) {
@@ -874,7 +788,7 @@ class LinkedToken {
     let curr = this.next;
     while (curr != null) {
       const isType = curr.type === type;
-      if (value !== undefined ? isType && compareTokenWithValue(type, curr, value) : isType) {
+      if (value !== void 0 ? isType && compareTokenWithValue(type, curr, value) : isType) {
         return curr;
       }
       curr = curr.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";
@@ -1023,9 +922,9 @@ var SQLEditorMode = /* @__PURE__ */ ((SQLEditorMode2) => {
 
 function getStatementPosition(currentToken, statementPositionResolversRegistry) {
   var _a;
-  const previousNonWhiteSpace = currentToken == null ? undefined : currentToken.getPreviousNonWhiteSpaceToken();
-  const previousKeyword = currentToken == null ? undefined : currentToken.getPreviousKeyword();
-  const previousIsSlash = (_a = currentToken == null ? undefined : currentToken.getPreviousNonWhiteSpaceToken()) == null ? undefined : _a.is(TokenType.Operator, "/");
+  const previousNonWhiteSpace = currentToken == null ? void 0 : currentToken.getPreviousNonWhiteSpaceToken();
+  const previousKeyword = currentToken == null ? void 0 : currentToken.getPreviousKeyword();
+  const previousIsSlash = (_a = currentToken == null ? void 0 : currentToken.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _a.is(TokenType.Operator, "/");
   const resolvers = statementPositionResolversRegistry.list();
   const positions = [];
   for (const resolver of resolvers) {
@@ -1053,8 +952,8 @@ const toCompletionItem = (value, range, rest = {}) => {
 
 const getStandardSuggestions = async (monaco, currentToken, suggestionKinds, positionContext, suggestionsRegistry) => {
   let suggestions = [];
-  const invalidRangeToken = (currentToken == null ? undefined : currentToken.isWhiteSpace()) || (currentToken == null ? undefined : currentToken.isParenthesis()) || (currentToken == null ? undefined : currentToken.isIdentifier()) && currentToken.value.endsWith(".");
-  const range = invalidRangeToken || !(currentToken == null ? undefined : currentToken.range) ? monaco.Range.fromPositions(positionContext.position) : currentToken == null ? undefined : currentToken.range;
+  const invalidRangeToken = (currentToken == null ? void 0 : currentToken.isWhiteSpace()) || (currentToken == null ? void 0 : currentToken.isParenthesis()) || (currentToken == null ? void 0 : currentToken.isIdentifier()) && currentToken.value.endsWith(".");
+  const range = invalidRangeToken || !(currentToken == null ? void 0 : currentToken.range) ? monaco.Range.fromPositions(positionContext.position) : currentToken == null ? void 0 : currentToken.range;
   for (const suggestion of [...new Set(suggestionKinds)]) {
     const registeredSuggestions = suggestionsRegistry.getIfExists(suggestion);
     if (registeredSuggestions) {
@@ -1235,7 +1134,7 @@ function linkedTokenBuilder(monaco, model, position, languageId = "sql") {
         offset: 0,
         type: TokenType.Whitespace,
         language: languageId,
-        _tokenBrand: undefined
+        _tokenBrand: void 0
       };
       tokens.push(token);
     }
@@ -2159,31 +2058,31 @@ var language$1 = /*#__PURE__*/Object.freeze({
 
 const getSelectToken = (currentToken) => {
   var _a;
-  return (_a = currentToken == null ? undefined : currentToken.getPreviousOfType(TokenType.Keyword, SELECT)) != null ? _a : null;
+  return (_a = currentToken == null ? void 0 : currentToken.getPreviousOfType(TokenType.Keyword, SELECT)) != null ? _a : null;
 };
 const getFromKeywordToken = (currentToken) => {
   const selectToken = getSelectToken(currentToken);
-  return selectToken == null ? undefined : selectToken.getNextOfType(TokenType.Keyword, FROM);
+  return selectToken == null ? void 0 : selectToken.getNextOfType(TokenType.Keyword, FROM);
 };
 const getTableToken = (currentToken) => {
   var _a;
   const fromToken = getFromKeywordToken(currentToken);
-  const nextNonWhiteSpace = fromToken == null ? undefined : fromToken.getNextNonWhiteSpaceToken();
-  if (nextNonWhiteSpace == null ? undefined : nextNonWhiteSpace.isVariable()) {
+  const nextNonWhiteSpace = fromToken == null ? void 0 : fromToken.getNextNonWhiteSpaceToken();
+  if (nextNonWhiteSpace == null ? void 0 : nextNonWhiteSpace.isVariable()) {
     return null;
-  } else if ((nextNonWhiteSpace == null ? undefined : nextNonWhiteSpace.isKeyword()) && ((_a = nextNonWhiteSpace.next) == null ? undefined : _a.is(TokenType.Parenthesis, "("))) {
+  } else if ((nextNonWhiteSpace == null ? void 0 : nextNonWhiteSpace.isKeyword()) && ((_a = nextNonWhiteSpace.next) == null ? void 0 : _a.is(TokenType.Parenthesis, "("))) {
     return null;
   } else {
     return nextNonWhiteSpace;
   }
 };
 const defaultTableNameParser = (token) => {
-  const parts = token == null ? undefined : token.value.split(".");
-  if ((parts == null ? undefined : parts.length) === 1) {
+  const parts = token == null ? void 0 : token.value.split(".");
+  if ((parts == null ? void 0 : parts.length) === 1) {
     return { table: parts[0] };
-  } else if ((parts == null ? undefined : parts.length) === 2) {
+  } else if ((parts == null ? void 0 : parts.length) === 2) {
     return { schema: parts[0], table: parts[1] };
-  } else if ((parts == null ? undefined : parts.length) === 3) {
+  } else if ((parts == null ? void 0 : parts.length) === 3) {
     return { catalog: parts[0], schema: parts[1], table: parts[2] };
   }
   return null;
@@ -2558,7 +2457,7 @@ function initStatementPositionResolvers() {
       id: StatementPosition.SelectKeyword,
       name: StatementPosition.SelectKeyword,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean(
-        currentToken === null || currentToken.isWhiteSpace() && currentToken.previous === null || currentToken.is(TokenType.Keyword, SELECT) || currentToken.is(TokenType.Keyword, SELECT) && currentToken.previous === null || previousIsSlash || currentToken.isIdentifier() && (previousIsSlash || (currentToken == null ? undefined : currentToken.previous) === null) || currentToken.isIdentifier() && SELECT.startsWith(currentToken.value.toLowerCase())
+        currentToken === null || currentToken.isWhiteSpace() && currentToken.previous === null || currentToken.is(TokenType.Keyword, SELECT) || currentToken.is(TokenType.Keyword, SELECT) && currentToken.previous === null || previousIsSlash || currentToken.isIdentifier() && (previousIsSlash || (currentToken == null ? void 0 : currentToken.previous) === null) || currentToken.isIdentifier() && SELECT.startsWith(currentToken.value.toLowerCase())
       )
     },
     {
@@ -2571,13 +2470,13 @@ function initStatementPositionResolvers() {
     {
       id: StatementPosition.AfterSelectKeyword,
       name: StatementPosition.AfterSelectKeyword,
-      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value.toLowerCase()) === SELECT)
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value.toLowerCase()) === SELECT)
     },
     {
       id: StatementPosition.AfterSelectArguments,
       name: StatementPosition.AfterSelectArguments,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
-        return Boolean((previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === SELECT && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value) === ",");
+        return Boolean((previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === SELECT && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value) === ",");
       }
     },
     {
@@ -2585,7 +2484,7 @@ function initStatementPositionResolvers() {
       name: StatementPosition.AfterSelectFuncFirstArgument,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         return Boolean(
-          ((previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === SELECT || (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === AS) && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (currentToken == null ? undefined : currentToken.is(TokenType.Parenthesis, "()")))
+          ((previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === SELECT || (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === AS) && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (currentToken == null ? void 0 : currentToken.is(TokenType.Parenthesis, "()")))
         );
       }
     },
@@ -2594,7 +2493,7 @@ function initStatementPositionResolvers() {
       name: StatementPosition.AfterWhereFunctionArgument,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, WHERE)) && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (currentToken == null ? undefined : currentToken.is(TokenType.Parenthesis, "()")))
+          (previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, WHERE)) && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (currentToken == null ? void 0 : currentToken.is(TokenType.Parenthesis, "()")))
         );
       }
     },
@@ -2604,7 +2503,7 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a;
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? undefined : previousKeyword.getPreviousKeyword()) == null ? undefined : _a.is(TokenType.Keyword, GROUP)) && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isIdentifier()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isDoubleQuotedString()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, ")")) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, "()")))
+          (previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? void 0 : previousKeyword.getPreviousKeyword()) == null ? void 0 : _a.is(TokenType.Keyword, GROUP)) && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isIdentifier()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isDoubleQuotedString()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, ")")) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, "()")))
         );
       }
     },
@@ -2612,7 +2511,7 @@ function initStatementPositionResolvers() {
       id: StatementPosition.SelectAlias,
       name: StatementPosition.SelectAlias,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
-        if ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value) === "," && (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === AS) {
+        if ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value) === "," && (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === AS) {
           return true;
         }
         return false;
@@ -2623,25 +2522,25 @@ function initStatementPositionResolvers() {
       name: StatementPosition.FromKeyword,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === SELECT && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value) !== "," || ((currentToken == null ? undefined : currentToken.isKeyword()) || (currentToken == null ? undefined : currentToken.isIdentifier())) && FROM.toLowerCase().startsWith(currentToken.value.toLowerCase())
+          (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === SELECT && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value) !== "," || ((currentToken == null ? void 0 : currentToken.isKeyword()) || (currentToken == null ? void 0 : currentToken.isIdentifier())) && FROM.toLowerCase().startsWith(currentToken.value.toLowerCase())
         );
       }
     },
     {
       id: StatementPosition.AfterFromKeyword,
       name: StatementPosition.AfterFromKeyword,
-      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean(!(currentToken == null ? undefined : currentToken.value.includes(".")) && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value.toLowerCase()) === FROM)
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean(!(currentToken == null ? void 0 : currentToken.value.includes(".")) && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value.toLowerCase()) === FROM)
     },
     {
       id: StatementPosition.AfterSchema,
       name: StatementPosition.AfterSchema,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
-        if ((currentToken == null ? undefined : currentToken.isWhiteSpace()) && (currentToken == null ? undefined : currentToken.next)) {
-          currentToken = currentToken == null ? undefined : currentToken.previous;
+        if ((currentToken == null ? void 0 : currentToken.isWhiteSpace()) && (currentToken == null ? void 0 : currentToken.next)) {
+          currentToken = currentToken == null ? void 0 : currentToken.previous;
           previousNonWhiteSpace = currentToken.getPreviousNonWhiteSpaceToken();
         }
         return Boolean(
-          (currentToken == null ? undefined : currentToken.isIdentifier()) && (currentToken == null ? undefined : currentToken.value.endsWith(".")) && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value.toLowerCase()) === FROM
+          (currentToken == null ? void 0 : currentToken.isIdentifier()) && (currentToken == null ? void 0 : currentToken.value.endsWith(".")) && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value.toLowerCase()) === FROM
         );
       }
     },
@@ -2649,7 +2548,7 @@ function initStatementPositionResolvers() {
       id: StatementPosition.AfterFrom,
       name: StatementPosition.AfterFrom,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean(
-        (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === FROM && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isDoubleQuotedString()) || (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === FROM && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isIdentifier()) || (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === FROM && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isVariable())
+        (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === FROM && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isDoubleQuotedString()) || (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === FROM && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isIdentifier()) || (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === FROM && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isVariable())
         //  cloudwatch specific
         // (previousKeyword?.value === SCHEMA && previousNonWhiteSpace?.is(TokenType.Parenthesis, ')'))
       )
@@ -2659,7 +2558,7 @@ function initStatementPositionResolvers() {
       name: StatementPosition.AfterTable,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === FROM && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isVariable()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value) !== "" && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.value.toLowerCase()) !== FROM)
+          (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === FROM && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isVariable()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value) !== "" && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.value.toLowerCase()) !== FROM)
         );
       }
     },
@@ -2667,7 +2566,7 @@ function initStatementPositionResolvers() {
       id: StatementPosition.WhereKeyword,
       name: StatementPosition.WhereKeyword,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean(
-        (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === WHERE && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isKeyword()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Operator, AND)))
+        (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === WHERE && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isKeyword()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Operator, AND)))
       )
     },
     {
@@ -2676,14 +2575,14 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a;
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === WHERE && !((_a = previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? undefined : _a.isOperator()) && !(currentToken == null ? undefined : currentToken.is(TokenType.Delimiter, ".")) && !(currentToken == null ? undefined : currentToken.isParenthesis()) && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isIdentifier()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isDoubleQuotedString()))
+          (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === WHERE && !((_a = previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _a.isOperator()) && !(currentToken == null ? void 0 : currentToken.is(TokenType.Delimiter, ".")) && !(currentToken == null ? void 0 : currentToken.isParenthesis()) && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isIdentifier()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isDoubleQuotedString()))
         );
       }
     },
     {
       id: StatementPosition.WhereValue,
       name: StatementPosition.WhereValue,
-      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean((previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === WHERE && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isOperator()))
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean((previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === WHERE && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isOperator()))
     },
     {
       id: StatementPosition.AfterWhereValue,
@@ -2691,7 +2590,7 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a, _b, _c;
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.value.toLowerCase()) === WHERE && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Operator, "and")) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Operator, "or")) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isString()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isNumber()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, ")")) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, "()")) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.isTemplateVariable()) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.IdentifierQuote)) && ((_a = previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? undefined : _a.is(TokenType.Identifier)) && ((_c = (_b = previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? undefined : _b.getPreviousNonWhiteSpaceToken()) == null ? undefined : _c.is(TokenType.IdentifierQuote)))
+          (previousKeyword == null ? void 0 : previousKeyword.value.toLowerCase()) === WHERE && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Operator, "and")) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Operator, "or")) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isString()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isNumber()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, ")")) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, "()")) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.isTemplateVariable()) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.IdentifierQuote)) && ((_a = previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _a.is(TokenType.Identifier)) && ((_c = (_b = previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _b.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _c.is(TokenType.IdentifierQuote)))
         );
       }
     },
@@ -2701,7 +2600,7 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a;
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? undefined : previousKeyword.getPreviousKeyword()) == null ? undefined : _a.is(TokenType.Keyword, GROUP)) && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Keyword, BY)) || (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Delimiter, ",")))
+          (previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? void 0 : previousKeyword.getPreviousKeyword()) == null ? void 0 : _a.is(TokenType.Keyword, GROUP)) && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Keyword, BY)) || (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Delimiter, ",")))
         );
       }
     },
@@ -2711,7 +2610,7 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a;
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? undefined : previousKeyword.getPreviousKeyword()) == null ? undefined : _a.is(TokenType.Keyword, GROUP)) && ((previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (currentToken == null ? undefined : currentToken.is(TokenType.Parenthesis, "()")))
+          (previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? void 0 : previousKeyword.getPreviousKeyword()) == null ? void 0 : _a.is(TokenType.Keyword, GROUP)) && ((previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis, "(")) || (currentToken == null ? void 0 : currentToken.is(TokenType.Parenthesis, "()")))
         );
       }
     },
@@ -2721,7 +2620,7 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a;
         return Boolean(
-          (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Keyword, BY)) && ((_a = previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.getPreviousKeyword()) == null ? undefined : _a.is(TokenType.Keyword, ORDER))
+          (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Keyword, BY)) && ((_a = previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.getPreviousKeyword()) == null ? void 0 : _a.is(TokenType.Keyword, ORDER))
         );
       }
     },
@@ -2731,20 +2630,20 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a, _b;
         return Boolean(
-          (previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? undefined : previousKeyword.getPreviousKeyword()) == null ? undefined : _a.is(TokenType.Keyword, ORDER)) && (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Parenthesis)) && ((_b = previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? undefined : _b.is(TokenType.Function))
+          (previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, BY)) && ((_a = previousKeyword == null ? void 0 : previousKeyword.getPreviousKeyword()) == null ? void 0 : _a.is(TokenType.Keyword, ORDER)) && (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Parenthesis)) && ((_b = previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _b.is(TokenType.Function))
         );
       }
     },
     {
       id: StatementPosition.AfterOrderByDirection,
       name: StatementPosition.AfterOrderByDirection,
-      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean((previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, DESC)) || (previousKeyword == null ? undefined : previousKeyword.is(TokenType.Keyword, ASC)))
+      resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => Boolean((previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, DESC)) || (previousKeyword == null ? void 0 : previousKeyword.is(TokenType.Keyword, ASC)))
     },
     {
       id: StatementPosition.AfterIsOperator,
       name: StatementPosition.AfterIsOperator,
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
-        return Boolean(previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Operator, "IS"));
+        return Boolean(previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Operator, "IS"));
       }
     },
     {
@@ -2753,7 +2652,7 @@ function initStatementPositionResolvers() {
       resolve: (currentToken, previousKeyword, previousNonWhiteSpace, previousIsSlash) => {
         var _a;
         return Boolean(
-          (previousNonWhiteSpace == null ? undefined : previousNonWhiteSpace.is(TokenType.Operator, "NOT")) && ((_a = previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? undefined : _a.is(TokenType.Operator, "IS"))
+          (previousNonWhiteSpace == null ? void 0 : previousNonWhiteSpace.is(TokenType.Operator, "NOT")) && ((_a = previousNonWhiteSpace.getPreviousNonWhiteSpaceToken()) == null ? void 0 : _a.is(TokenType.Operator, "IS"))
         );
       }
     }
@@ -2767,7 +2666,7 @@ let sqlEditorLog = () => {
 if (ui.attachDebugger && ui.createLogger) {
   sqlEditorLogger = ui.createLogger("SQLEditor");
   sqlEditorLog = sqlEditorLogger.logger;
-  ui.attachDebugger("sqleditor", undefined, sqlEditorLogger);
+  ui.attachDebugger("sqleditor", void 0, sqlEditorLogger);
 }
 
 const COLUMN = "column", RELATIVE_TIME_STRING = "'5m'";
@@ -2829,7 +2728,7 @@ function getStandardSQLCompletionProvider(monaco, language) {
     provider.supportedFunctions = () => language.builtinFunctions.map((f) => ({ id: f, name: f }));
   }
   const operators = [];
-  if ((_a = language == null ? undefined : language.comparisonOperators) == null ? undefined : _a.length) {
+  if ((_a = language == null ? void 0 : language.comparisonOperators) == null ? void 0 : _a.length) {
     operators.push(
       ...language.comparisonOperators.map((f) => ({
         id: f.toLocaleLowerCase(),
@@ -2839,7 +2738,7 @@ function getStandardSQLCompletionProvider(monaco, language) {
     );
   }
   language.logicalOperators = (_b = language.logicalOperators) != null ? _b : language.operators;
-  if ((_c = language == null ? undefined : language.logicalOperators) == null ? undefined : _c.length) {
+  if ((_c = language == null ? void 0 : language.logicalOperators) == null ? void 0 : _c.length) {
     operators.push(
       ...language.logicalOperators.map((f) => ({ id: f.toLocaleLowerCase(), operator: f, type: OperatorType.Logical }))
     );
@@ -2865,7 +2764,7 @@ function useLatestCallback(callback) {
   });
   const hasCallback = Boolean(callback);
   return React.useMemo(
-    () => hasCallback ? ((...args) => ref.current(...args)) : undefined,
+    () => hasCallback ? ((...args) => ref.current(...args)) : void 0,
     [hasCallback]
   );
 }
@@ -2912,7 +2811,7 @@ const SQLEditor = ({
     ui.CodeEditor,
     {
       height: height || "240px",
-      width: width ? `${width - 2}px` : undefined,
+      width: width ? `${width - 2}px` : void 0,
       language: id,
       value: query,
       onBlur: onSqlBlur,
@@ -2943,12 +2842,12 @@ const SQLEditor = ({
   ), children && children({ formatQuery }));
 };
 const resolveLanguage = (monaco, languageDefinitionProp) => {
-  if ((languageDefinitionProp == null ? undefined : languageDefinitionProp.id) !== STANDARD_SQL_LANGUAGE && !languageDefinitionProp.loader) {
-    sqlEditorLog(`Loading language '${languageDefinitionProp == null ? undefined : languageDefinitionProp.id}' from Monaco registry`, false);
+  if ((languageDefinitionProp == null ? void 0 : languageDefinitionProp.id) !== STANDARD_SQL_LANGUAGE && !languageDefinitionProp.loader) {
+    sqlEditorLog(`Loading language '${languageDefinitionProp == null ? void 0 : languageDefinitionProp.id}' from Monaco registry`, false);
     const allLangs = monaco.languages.getLanguages();
-    const custom = allLangs.find(({ id }) => id === (languageDefinitionProp == null ? undefined : languageDefinitionProp.id));
+    const custom = allLangs.find(({ id }) => id === (languageDefinitionProp == null ? void 0 : languageDefinitionProp.id));
     if (!custom) {
-      throw Error(`Unknown Monaco language ${languageDefinitionProp == null ? undefined : languageDefinitionProp.id}`);
+      throw Error(`Unknown Monaco language ${languageDefinitionProp == null ? void 0 : languageDefinitionProp.id}`);
     }
     return { completionProvider: getStandardSQLCompletionProvider, ...custom, ...languageDefinitionProp };
   }
@@ -2970,7 +2869,7 @@ const registerLanguageAndSuggestions = async (monaco, l, lid) => {
     monaco.languages.registerDocumentFormattingEditProvider(lid, {
       provideDocumentFormattingEdits: (model) => {
         var _a;
-        const formatted = (_a = l.formatter) == null ? undefined : _a.call(l, model.getValue());
+        const formatted = (_a = l.formatter) == null ? void 0 : _a.call(l, model.getValue());
         return [
           {
             range: model.getFullModelRange(),
@@ -3077,7 +2976,7 @@ function extendStandardRegistries(id, lid, customProvider) {
   }
   if (customProvider.customSuggestionKinds) {
     for (const kind of customProvider.customSuggestionKinds()) {
-      (_a = kind.applyTo) == null ? undefined : _a.forEach((applyTo) => {
+      (_a = kind.applyTo) == null ? void 0 : _a.forEach((applyTo) => {
         const exists = languageRegistries.suggestionKinds.getIfExists(applyTo);
         if (exists) {
           if (exists.kind.indexOf(kind.id) === -1) {
@@ -3087,7 +2986,7 @@ function extendStandardRegistries(id, lid, customProvider) {
       });
       if (kind.overrideDefault) {
         const stbBehavior = instanceSuggestionsRegistry.get(kind.id);
-        if (stbBehavior !== undefined) {
+        if (stbBehavior !== void 0) {
           stbBehavior.suggestions = kind.suggestionsResolver;
           continue;
         }
@@ -3129,9 +3028,9 @@ function extendStandardRegistries(id, lid, customProvider) {
       var _a2, _b, _c, _d, _e;
       const o = await s(ctx, m);
       const tableToken = getTableToken(ctx.currentToken);
-      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? undefined : _a2.parseName) != null ? _b : defaultTableNameParser;
+      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? void 0 : _a2.parseName) != null ? _b : defaultTableNameParser;
       const tableIdentifier = tableNameParser(tableToken);
-      const oo = ((_e = await ((_d = (_c = customProvider.tables) == null ? undefined : _c.resolve) == null ? undefined : _d.call(_c, tableIdentifier))) != null ? _e : []).map((x) => {
+      const oo = ((_e = await ((_d = (_c = customProvider.tables) == null ? void 0 : _c.resolve) == null ? void 0 : _d.call(_c, tableIdentifier))) != null ? _e : []).map((x) => {
         var _a3;
         return {
           label: x.name,
@@ -3154,13 +3053,13 @@ function extendStandardRegistries(id, lid, customProvider) {
       const o = await s(ctx, m);
       const tableToken = getTableToken(ctx.currentToken);
       let tableIdentifier;
-      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? undefined : _a2.parseName) != null ? _b : defaultTableNameParser;
+      const tableNameParser = (_b = (_a2 = customProvider.tables) == null ? void 0 : _a2.parseName) != null ? _b : defaultTableNameParser;
       if (tableToken && tableToken.value) {
         tableIdentifier = tableNameParser(tableToken);
       }
       let oo = [];
       if (tableIdentifier) {
-        const columns = await ((_c = customProvider.columns) == null ? undefined : _c.resolve(tableIdentifier));
+        const columns = await ((_c = customProvider.columns) == null ? void 0 : _c.resolve(tableIdentifier));
         oo = columns ? columns.map((x) => {
           var _a3;
           return {
@@ -5456,9 +5355,94 @@ 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" : undefined, direction: (_a = props.direction) != null ? _a : "row", gap: (_b = props.gap) != null ? _b : 2, ...props }, children);
+  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);
 };
 
 const EditorList = React.forwardRef(function EditorList2({ items, renderItem, onChange }, ref) {
@@ -5495,7 +5479,7 @@ const getButtonStyles = (theme) => ({
 });
 
 const InputGroup = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$n);
+  const styles = ui.useStyles2(getStyles$t);
   const modifiedChildren = React.Children.map(children, (child) => {
     if (React.isValidElement(child) && child.props.invalid) {
       return React.cloneElement(child, { className: css.cx(child.props.className, styles.invalidChild) });
@@ -5513,7 +5497,7 @@ const borderPriority = [
   "focused"
   // highest priority
 ];
-const getStyles$n = () => ({
+const getStyles$t = () => ({
   root: css.css({
     display: "flex",
     // Style the direct children of the component
@@ -5556,7 +5540,7 @@ function GroupByRow({ sql, columns, onSqlChange }) {
     (item) => {
       const cleaned = item.map((v) => {
         var _a;
-        return setGroupByField((_a = v.property) == null ? undefined : _a.name);
+        return setGroupByField((_a = v.property) == null ? void 0 : _a.name);
       });
       const newSql = { ...sql, groupBy: cleaned };
       onSqlChange(newSql);
@@ -5580,7 +5564,7 @@ function makeRenderColumn({ options }) {
     return /* @__PURE__ */ React__default.default.createElement(InputGroup, null, /* @__PURE__ */ React__default.default.createElement(
       ui.Select,
       {
-        value: ((_a = item.property) == null ? undefined : _a.name) ? data.toOption(item.property.name) : null,
+        value: ((_a = item.property) == null ? void 0 : _a.name) ? data.toOption(item.property.name) : null,
         "aria-label": "Group by",
         options,
         menuShouldPortal: true,
@@ -5596,10 +5580,10 @@ const EditorFieldGroup = ({ children }) => {
 };
 
 const EditorHeader = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$m);
+  const styles = ui.useStyles2(getStyles$s);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, children);
 };
-const getStyles$m = (theme) => ({
+const getStyles$s = (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 childInputId = (fieldProps == null ? undefined : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? undefined : _a.getChildId(children));
+  const styles = ui.useStyles2(getStyles$r, width);
+  const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info", interactive: tooltipInteractive }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { tabIndex: 0, name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.default.createElement(ui.Space, { v: 0.5 }));
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$l = (theme, width) => {
+const getStyles$r = (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$q);
   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$q = (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$p();
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.switch }, /* @__PURE__ */ React__default.default.createElement(ui.Switch, { ...props }));
 };
-const getStyles$j = () => {
+const getStyles$p = () => {
   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$o, v, h, layout);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: css.cx(styles.wrapper) });
 };
-const getStyles$i = (theme, v, h, layout) => ({
+const getStyles$o = (theme, v, h, layout) => ({
   wrapper: css.css([
     {
       paddingRight: theme.spacing(h != null ? h : 0),
@@ -5742,12 +5726,32 @@ 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(() => {
     var _a;
     if (isOpen) {
-      (_a = buttonRef.current) == null ? undefined : _a.focus();
+      (_a = buttonRef.current) == null ? void 0 : _a.focus();
     }
   }, [isOpen]);
   return /* @__PURE__ */ React__default.default.createElement(
@@ -5793,7 +5797,7 @@ const DatasetSelector = ({
         onChange(state.value[0]);
       }
     } else {
-      if (state.value && state.value.find((v) => v.value === value) === undefined) {
+      if (state.value && state.value.find((v) => v.value === value) === void 0) {
         if (state.value.length > 0) {
           onChange(state.value[0]);
         }
@@ -5844,7 +5848,7 @@ const CatalogSelector = ({ db, inputId, value, onChange }) => {
     loadCatalogs();
   }, [db, loadCatalogs]);
   const handleChange = (selectable) => {
-    onChange((selectable == null ? undefined : selectable.value) || null);
+    onChange((selectable == null ? void 0 : selectable.value) || null);
   };
   const selectedValue = catalogs.find((catalog) => catalog.value === value) || null;
   return /* @__PURE__ */ React__default.default.createElement(
@@ -5908,7 +5912,7 @@ const RunQueryButton = ({
   onClick,
   dataTestId
 }) => {
-  let icon = queryInvalid ? "exclamation-triangle" : undefined;
+  let icon = queryInvalid ? "exclamation-triangle" : void 0;
   if (queryRunning) {
     icon = "fa fa-spinner";
   }
@@ -5971,35 +5975,35 @@ function QueryHeader({
     [editorMode, onChange, query]
   );
   const onFormatChange = (e) => {
-    const next = { ...query, format: e.value !== undefined ? e.value : QueryFormat.Table };
+    const next = { ...query, format: e.value !== void 0 ? e.value : QueryFormat.Table };
     onChange(next);
   };
   const onDatasetChange = (e) => {
-    const datasetValue = e.value || undefined;
+    const datasetValue = e.value || void 0;
     if (datasetValue === query.dataset) {
       return;
     }
     const next = {
       ...query,
       dataset: datasetValue,
-      table: undefined,
-      sql: undefined,
+      table: void 0,
+      sql: void 0,
       rawSql: ""
     };
     onChange(next);
   };
   const onCatalogChange = (catalog) => {
-    const catalogValue = catalog || undefined;
+    const catalogValue = catalog || void 0;
     if (catalogValue === query.catalog) {
       return;
     }
     const next = {
       ...query,
       catalog: catalogValue,
-      dataset: undefined,
+      dataset: void 0,
       // Reset dataset (which acts as schema when catalog is present)
-      table: undefined,
-      sql: undefined,
+      table: void 0,
+      sql: void 0,
       rawSql: ""
     };
     onChange(next);
@@ -6011,7 +6015,7 @@ function QueryHeader({
     const next = {
       ...query,
       table: e.value,
-      sql: undefined,
+      sql: void 0,
       rawSql: ""
     };
     onChange(next);
@@ -6094,7 +6098,7 @@ function QueryHeader({
     {
       db,
       inputId: `sql-catalog-${htmlId}`,
-      value: query.catalog === undefined ? null : query.catalog,
+      value: query.catalog === void 0 ? null : query.catalog,
       onChange: onCatalogChange
     }
   )), effectiveEnableDatasets && /* @__PURE__ */ React__default.default.createElement(
@@ -6109,10 +6113,10 @@ function QueryHeader({
         db,
         inputId: catalogsEnabled ? `sql-schema-${htmlId}` : `sql-dataset-${htmlId}`,
         "data-testid": catalogsEnabled ? "schema-selector" : "dataset-selector",
-        dataset: catalogsEnabled ? undefined : defaultDataset,
-        value: query.dataset === undefined ? null : query.dataset,
+        dataset: catalogsEnabled ? void 0 : defaultDataset,
+        value: query.dataset === void 0 ? null : query.dataset,
         onChange: onDatasetChange,
-        catalog: catalogsEnabled ? query.catalog : undefined
+        catalog: catalogsEnabled ? query.catalog : void 0
       }
     )
   ), /* @__PURE__ */ React__default.default.createElement(EditorField$1, { label: labels.get("table") || "Table", width: 25 }, /* @__PURE__ */ React__default.default.createElement(
@@ -6120,10 +6124,10 @@ function QueryHeader({
     {
       db,
       inputId: `sql-table-${htmlId}`,
-      dataset: query.dataset || (catalogsEnabled ? undefined : defaultDataset),
-      catalog: catalogsEnabled ? query.catalog : undefined,
+      dataset: query.dataset || (catalogsEnabled ? void 0 : defaultDataset),
+      catalog: catalogsEnabled ? query.catalog : void 0,
       query,
-      value: query.table === undefined ? null : query.table,
+      value: query.table === void 0 ? null : query.table,
       onChange: onTableChange,
       enableCatalogs: catalogsEnabled,
       applyDefault: true
@@ -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
   );
@@ -6189,7 +6212,7 @@ function QueryValidator({ db, query, onValidate, range }) {
   const [state, validateQuery] = reactUse.useAsyncFn(
     async (q) => {
       var _a2;
-      if (((_a2 = q.rawSql) == null ? undefined : _a2.trim()) === "") {
+      if (((_a2 = q.rawSql) == null ? void 0 : _a2.trim()) === "") {
         return null;
       }
       return await db.validateQuery(q, range);
@@ -6208,17 +6231,17 @@ function QueryValidator({ db, query, onValidate, range }) {
     [query, validateQuery]
   );
   React.useEffect(() => {
-    if (validationResult == null ? undefined : validationResult.isError) {
+    if (validationResult == null ? void 0 : validationResult.isError) {
       onValidate(false);
     }
-    if (validationResult == null ? undefined : validationResult.isValid) {
+    if (validationResult == null ? void 0 : validationResult.isValid) {
       onValidate(true);
     }
   }, [validationResult, onValidate]);
   if (!state.value && !state.loading) {
     return null;
   }
-  const error = ((_a = state.value) == null ? undefined : _a.error) ? processErrorMessage(state.value.error) : "";
+  const error = ((_a = state.value) == null ? void 0 : _a.error) ? processErrorMessage(state.value.error) : "";
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, state.loading && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.info }, /* @__PURE__ */ React__default.default.createElement(ui.Spinner, { inline: true, size: 12 }), " Validating query..."), !state.loading && state.value && /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, state.value.isValid && state.value.statistics && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.valid }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "check" }), " This query will process", " ", /* @__PURE__ */ React__default.default.createElement("strong", null, data.formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))), " ", "when run.")), /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, state.value.isError && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.error }, error))));
 }
 function processErrorMessage(error) {
@@ -6262,9 +6285,13 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
     };
   }, [theme]);
   let style = {};
-  if (!showTools && validationResult === undefined) {
+  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$n);
   const [isExpanded, setIsExpanded] = React.useState(false);
   const [toolboxRef, toolboxMeasure] = reactUse.useMeasure();
   const [editorRef, editorMeasure] = reactUse.useMeasure();
@@ -6299,7 +6335,8 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         completionProvider,
         query,
         width,
-        height: height ? height - toolboxMeasure.height : undefined,
+        language,
+        height: height ? height - toolboxMeasure.height : void 0,
         onChange
       },
       ({ formatQuery }) => {
@@ -6356,7 +6393,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
     renderEditor(true)
   ));
 }
-function getStyles$h(theme) {
+function getStyles$n(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$m);
   const labelElement = /* @__PURE__ */ React__default.default.createElement("div", { className: styles.labelWrapper }, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label }, "Preview"), /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { tooltip: "Copy to clipboard", onClick: () => copyToClipboard(rawSql), name: "copy" }));
   return /* @__PURE__ */ React__default.default.createElement(ui.Field, { label: labelElement, className: styles.grow }, /* @__PURE__ */ React__default.default.createElement(
     ui.CodeEditor,
     {
       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$m(theme) {
   return {
     grow: css.css({ flexGrow: 1 }),
     label: css.css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),
@@ -6446,9 +6483,9 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
   );
   const onOrderByChange = React.useCallback(
     (item) => {
-      const newSql = { ...sql, orderBy: setPropertyField(item == null ? undefined : item.value) };
+      const newSql = { ...sql, orderBy: setPropertyField(item == null ? void 0 : item.value) };
       if (item === null) {
-        newSql.orderByDirection = undefined;
+        newSql.orderByDirection = void 0;
       }
       onSqlChange(newSql);
     },
@@ -6459,7 +6496,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
     {
       "aria-label": "Order by",
       options: columns,
-      value: ((_a = sql.orderBy) == null ? undefined : _a.property.name) ? data.toOption(sql.orderBy.property.name) : null,
+      value: ((_a = sql.orderBy) == null ? void 0 : _a.property.name) ? data.toOption(sql.orderBy.property.name) : null,
       isClearable: true,
       menuShouldPortal: true,
       onChange: onOrderByChange
@@ -6468,7 +6505,7 @@ function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
     ui.RadioButtonGroup,
     {
       options: sortOrderOptions,
-      disabled: !((_b = sql == null ? undefined : sql.orderBy) == null ? undefined : _b.property.name),
+      disabled: !((_b = sql == null ? void 0 : sql.orderBy) == null ? void 0 : _b.property.name),
       value: sql.orderByDirection,
       onChange: onSortOrderChange
     }
@@ -6480,9 +6517,9 @@ function SQLOrderByRow({ fields, query, onQueryChange, db }) {
   const { onSqlChange } = useSqlChange({ query, onQueryChange, db });
   let columnsWithIndices = [];
   if (fields) {
-    const options = (_b = (_a = query.sql) == null ? undefined : _a.columns) == null ? undefined : _b.map((c, i) => {
+    const options = (_b = (_a = query.sql) == null ? void 0 : _a.columns) == null ? void 0 : _b.map((c, i) => {
       var _a2, _b2;
-      const value = c.name ? `${c.name}(${(_a2 = c.parameters) == null ? undefined : _a2.map((p) => p.name)})` : (_b2 = c.parameters) == null ? undefined : _b2.map((p) => p.name);
+      const value = c.name ? `${c.name}(${(_a2 = c.parameters) == null ? void 0 : _a2.map((p) => p.name)})` : (_b2 = c.parameters) == null ? void 0 : _b2.map((p) => p.name);
       return {
         value,
         label: `${i + 1} - ${value}`
@@ -6504,13 +6541,13 @@ 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$l);
   const columnsWithAsterisk = [asteriskValue, ...columns || []];
   const onColumnChange = React.useCallback(
     (item, index) => (column) => {
       var _a2, _b;
       let modifiedItem = { ...item };
-      if (!((_a2 = item.parameters) == null ? undefined : _a2.length)) {
+      if (!((_a2 = item.parameters) == null ? void 0 : _a2.length)) {
         modifiedItem.parameters = [{ type: QueryEditorExpressionType.FunctionParameter, name: column.value }];
       } else {
         modifiedItem.parameters = item.parameters.map(
@@ -6519,7 +6556,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
       }
       const newSql = {
         ...sql,
-        columns: (_b = sql.columns) == null ? undefined : _b.map((c, i) => i === index ? modifiedItem : c)
+        columns: (_b = sql.columns) == null ? void 0 : _b.map((c, i) => i === index ? modifiedItem : c)
       };
       onSqlChange(newSql);
     },
@@ -6530,11 +6567,11 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
       var _a2;
       const newItem = {
         ...item,
-        name: aggregation == null ? undefined : aggregation.value
+        name: aggregation == null ? void 0 : aggregation.value
       };
       const newSql = {
         ...sql,
-        columns: (_a2 = sql.columns) == null ? undefined : _a2.map((c, i) => i === index ? newItem : c)
+        columns: (_a2 = sql.columns) == null ? void 0 : _a2.map((c, i) => i === index ? newItem : c)
       };
       onSqlChange(newSql);
     },
@@ -6556,7 +6593,7 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     const newSql = { ...sql, columns: [...sql.columns, createFunctionField()] };
     onSqlChange(newSql);
   }, [onSqlChange, sql]);
-  return /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2, alignItems: "end", direction: "column" }, (_a = sql.columns) == null ? undefined : _a.map((item, index) => /* @__PURE__ */ React__default.default.createElement("div", { key: index }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2, alignItems: "end" }, /* @__PURE__ */ React__default.default.createElement(EditorField$1, { label: "Column", width: 25 }, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2, alignItems: "end", direction: "column" }, (_a = sql.columns) == null ? void 0 : _a.map((item, index) => /* @__PURE__ */ React__default.default.createElement("div", { key: index }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2, alignItems: "end" }, /* @__PURE__ */ React__default.default.createElement(EditorField$1, { label: "Column", width: 25 }, /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
       value: getColumnValue(item),
@@ -6600,12 +6637,12 @@ function SelectRow({ sql, columns, onSqlChange, functions }) {
     }
   ));
 }
-const getStyles$f = () => {
+const getStyles$l = () => {
   return { addButton: css.css({ alignSelf: "flex-start" }) };
 };
 function getColumnValue({ parameters }) {
-  const column = parameters == null ? undefined : parameters.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);
-  if (column == null ? undefined : column.name) {
+  const column = parameters == null ? void 0 : parameters.find((p) => p.type === QueryEditorExpressionType.FunctionParameter);
+  if (column == null ? void 0 : column.name) {
     return data.toOption(column.name);
   }
   return null;
@@ -6626,7 +6663,6 @@ const buttonLabels = {
 };
 ({
   id: ui$1.Utils.uuid(),
-  type: "group",
   children1: [
     {
       id: ui$1.Utils.uuid(),
@@ -6664,9 +6700,9 @@ const widgets = {
       return /* @__PURE__ */ React__default.default.createElement(
         ui.Input,
         {
-          value: (props == null ? undefined : props.value) || "",
-          placeholder: props == null ? undefined : props.placeholder,
-          onChange: (e) => props == null ? undefined : props.setValue(e.currentTarget.value)
+          value: (props == null ? void 0 : props.value) || "",
+          placeholder: props == null ? void 0 : props.placeholder,
+          onChange: (e) => props == null ? void 0 : props.setValue(e.currentTarget.value)
         }
       );
     }
@@ -6677,10 +6713,10 @@ const widgets = {
       return /* @__PURE__ */ React__default.default.createElement(
         ui.Input,
         {
-          value: props == null ? undefined : props.value,
-          placeholder: props == null ? undefined : props.placeholder,
+          value: props == null ? void 0 : props.value,
+          placeholder: props == null ? void 0 : props.placeholder,
           type: "number",
-          onChange: (e) => props == null ? undefined : props.setValue(Number.parseInt(e.currentTarget.value, 10))
+          onChange: (e) => props == null ? void 0 : props.setValue(Number.parseInt(e.currentTarget.value, 10))
         }
       );
     }
@@ -6692,9 +6728,9 @@ const widgets = {
         ui.DateTimePicker,
         {
           onChange: (e) => {
-            props == null ? undefined : props.setValue(e == null ? undefined : e.format(ui$1.BasicConfig.widgets.datetime.valueFormat));
+            props == null ? void 0 : props.setValue(e == null ? void 0 : e.format(ui$1.BasicConfig.widgets.datetime.valueFormat));
           },
-          date: data.dateTime(props == null ? undefined : props.value).utc()
+          date: data.dateTime(props == null ? void 0 : props.value).utc()
         }
       );
     }
@@ -6712,37 +6748,37 @@ const settings = {
     return /* @__PURE__ */ React__default.default.createElement(
       ui.Select,
       {
-        id: conjProps == null ? undefined : conjProps.id,
+        id: conjProps == null ? void 0 : conjProps.id,
         "aria-label": "Conjunction",
         menuShouldPortal: true,
-        options: (conjProps == null ? undefined : conjProps.conjunctionOptions) ? Object.keys(conjProps == null ? undefined : conjProps.conjunctionOptions).map(data.toOption) : undefined,
-        value: conjProps == null ? undefined : conjProps.selectedConjunction,
-        onChange: (val) => conjProps == null ? undefined : conjProps.setConjunction(val.value)
+        options: (conjProps == null ? void 0 : conjProps.conjunctionOptions) ? Object.keys(conjProps == null ? void 0 : conjProps.conjunctionOptions).map(data.toOption) : void 0,
+        value: conjProps == null ? void 0 : conjProps.selectedConjunction,
+        onChange: (val) => conjProps == null ? void 0 : conjProps.setConjunction(val.value)
       }
     );
   },
   renderField: function Field(fieldProps) {
     var _a;
-    const fields = ((_a = fieldProps == null ? undefined : fieldProps.config) == null ? undefined : _a.fields) || {};
+    const fields = ((_a = fieldProps == null ? void 0 : fieldProps.config) == null ? void 0 : _a.fields) || {};
     return /* @__PURE__ */ React__default.default.createElement(
       ui.Select,
       {
-        id: fieldProps == null ? undefined : fieldProps.id,
+        id: fieldProps == null ? void 0 : fieldProps.id,
         width: 25,
         "aria-label": "Field",
         menuShouldPortal: true,
-        options: fieldProps == null ? undefined : fieldProps.items.map((f) => {
+        options: fieldProps == null ? void 0 : fieldProps.items.map((f) => {
           var _a2, _b;
-          const icon = (_b = (_a2 = fields[f.key].mainWidgetProps) == null ? undefined : _a2.customProps) == null ? undefined : _b.icon;
+          const icon = (_b = (_a2 = fields[f.key].mainWidgetProps) == null ? void 0 : _a2.customProps) == null ? void 0 : _b.icon;
           return {
             label: f.label,
             value: f.key,
             icon
           };
         }),
-        value: fieldProps == null ? undefined : fieldProps.selectedKey,
+        value: fieldProps == null ? void 0 : fieldProps.selectedKey,
         onChange: (val) => {
-          fieldProps == null ? undefined : fieldProps.setField(val.label);
+          fieldProps == null ? void 0 : fieldProps.setField(val.label);
         }
       }
     );
@@ -6752,11 +6788,11 @@ const settings = {
       ui.Button,
       {
         type: "button",
-        title: `${buttonProps == null ? undefined : buttonProps.label} filter`,
-        onClick: buttonProps == null ? undefined : buttonProps.onClick,
+        title: `${buttonProps == null ? void 0 : buttonProps.label} filter`,
+        onClick: buttonProps == null ? void 0 : buttonProps.onClick,
         variant: "secondary",
         size: "md",
-        icon: (buttonProps == null ? undefined : buttonProps.label) === buttonLabels.add ? "plus" : "times"
+        icon: (buttonProps == null ? void 0 : buttonProps.label) === buttonLabels.add ? "plus" : "times"
       }
     );
   },
@@ -6764,12 +6800,12 @@ const settings = {
     return /* @__PURE__ */ React__default.default.createElement(
       ui.Select,
       {
-        options: operatorProps == null ? undefined : operatorProps.items.map((op) => ({ label: op.label, value: op.key })),
+        options: operatorProps == null ? void 0 : operatorProps.items.map((op) => ({ label: op.label, value: op.key })),
         "aria-label": "Operator",
         menuShouldPortal: true,
-        value: operatorProps == null ? undefined : operatorProps.selectedKey,
+        value: operatorProps == null ? void 0 : operatorProps.selectedKey,
         onChange: (val) => {
-          operatorProps == null ? undefined : operatorProps.setField(val.value || "");
+          operatorProps == null ? void 0 : operatorProps.setField(val.value || "");
         }
       }
     );
@@ -6947,10 +6983,10 @@ function mapFieldsToTypes(columns) {
 }
 
 const EditorRow = ({ children }) => {
-  const styles = ui.useStyles2(getStyles$e);
+  const styles = ui.useStyles2(getStyles$k);
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(EditorStack, { gap: 2 }, children));
 };
-const getStyles$e = (theme) => {
+const getStyles$k = (theme) => {
   return {
     root: css.css({
       padding: theme.spacing(1),
@@ -6964,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 childInputId = (fieldProps == null ? undefined : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? undefined : _a.getChildId(children));
+  const styles = getStyles$j(theme, width);
+  const childInputId = (fieldProps == null ? void 0 : fieldProps.htmlFor) || ((_a = ui.ReactUtils) == null ? void 0 : _a.getChildId(children));
   const labelEl = /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, /* @__PURE__ */ React__default.default.createElement("label", { className: styles.label, htmlFor: childInputId }, label, optional && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.optional }, " - optional"), tooltip && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { placement: "top", content: tooltip, theme: "info" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "sm", className: styles.icon }))), /* @__PURE__ */ React__default.default.createElement(Space, { v: 0.5 }));
   return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.root }, /* @__PURE__ */ React__default.default.createElement(ui.Field, { className: styles.field, label: labelEl, ...fieldProps }, children));
 };
-const getStyles$d = ui.stylesFactory((theme, width) => {
+const getStyles$j = ui.stylesFactory((theme, width) => {
   return {
     root: css.css({
       minWidth: theme.spacing(width != null ? width : 0)
@@ -7000,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 = [
@@ -7024,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);
-class SqlDatasource extends runtime.DataSourceWithBackend {
+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);
@@ -7108,7 +7152,7 @@ class SqlDatasource extends runtime.DataSourceWithBackend {
     return this.getResponseParser().transformMetricFindResponse(response);
   }
   async runSql(query, options) {
-    const frame = await this.runMetaQuery({ rawSql: query, format: QueryFormat.Table, refId: options == null ? undefined : options.refId }, options);
+    const frame = await this.runMetaQuery({ rawSql: query, format: QueryFormat.Table, refId: options == null ? void 0 : options.refId }, options);
     return new data.DataFrameView(frame);
   }
   runMetaQuery(request, options) {
@@ -7120,8 +7164,8 @@ class SqlDatasource extends runtime.DataSourceWithBackend {
         url: "/api/ds/query",
         method: "POST",
         data: {
-          from: (_a = options == null ? undefined : options.range) == null ? undefined : _a.from.valueOf().toString(),
-          to: (_b = options == null ? undefined : options.range) == null ? undefined : _b.to.valueOf().toString(),
+          from: (_a = options == null ? void 0 : options.range) == null ? void 0 : _a.from.valueOf().toString(),
+          to: (_b = options == null ? void 0 : options.range) == null ? void 0 : _b.to.valueOf().toString(),
           queries
         },
         requestId: refId
@@ -7164,7 +7208,7 @@ class SqlDatasource extends runtime.DataSourceWithBackend {
   targetContainsTemplate(target) {
     let queryWithoutMacros = target.rawSql;
     MACRO_NAMES.forEach((value) => {
-      queryWithoutMacros = (queryWithoutMacros == null ? undefined : queryWithoutMacros.replace(value, "")) || "";
+      queryWithoutMacros = (queryWithoutMacros == null ? void 0 : queryWithoutMacros.replace(value, "")) || "";
     });
     return this.templateSrv.containsTemplate(queryWithoutMacros);
   }
@@ -7187,29 +7231,29 @@ 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();
   const defaultDataset = datasource.dataset;
   const { loading, error } = reactUse.useAsync(async () => {
     return () => {
-      if (datasource.getDB(datasource.id).init !== undefined) {
+      if (datasource.getDB(datasource.id).init !== void 0) {
         datasource.getDB(datasource.id).init();
       }
     };
   }, [datasource]);
   const queryWithDefaults = applyQueryDefaults(query);
   const [queryRowFilter, setQueryRowFilter] = React.useState({
-    filter: !!((_a = queryWithDefaults.sql) == null ? undefined : _a.whereString),
-    group: !!((_d = (_c = (_b = queryWithDefaults.sql) == null ? undefined : _b.groupBy) == null ? undefined : _c[0]) == null ? undefined : _d.property.name),
-    order: !!((_f = (_e = queryWithDefaults.sql) == null ? undefined : _e.orderBy) == null ? undefined : _f.property.name),
+    filter: !!((_a = queryWithDefaults.sql) == null ? void 0 : _a.whereString),
+    group: !!((_d = (_c = (_b = queryWithDefaults.sql) == null ? void 0 : _b.groupBy) == null ? void 0 : _c[0]) == null ? void 0 : _d.property.name),
+    order: !!((_f = (_e = queryWithDefaults.sql) == null ? void 0 : _e.orderBy) == null ? void 0 : _f.property.name),
     preview: true
   });
   const [queryToValidate, setQueryToValidate] = React.useState(queryWithDefaults);
   React.useEffect(() => {
     return () => {
-      if (datasource.getDB(datasource.id).dispose !== undefined) {
+      if (datasource.getDB(datasource.id).dispose !== void 0) {
         datasource.getDB(datasource.id).dispose();
       }
     };
@@ -7226,7 +7270,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
     var _a2, _b2;
     setQueryToValidate(q);
     onChange(q);
-    if (haveColumns((_a2 = q.sql) == null ? undefined : _a2.columns) && ((_b2 = q.sql) == null ? undefined : _b2.columns.some((c) => c.name)) && !queryRowFilter.group) {
+    if (haveColumns((_a2 = q.sql) == null ? void 0 : _a2.columns) && ((_b2 = q.sql) == null ? void 0 : _b2.columns.some((c) => c.name)) && !queryRowFilter.group) {
       setQueryRowFilter({ ...queryRowFilter, group: true });
     }
     if (process) {
@@ -7256,13 +7300,14 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
       queryRowFilter,
       query: queryWithDefaults,
       isQueryRunnable,
-      labels: (_g = datasource.getDB(datasource.id)) == null ? undefined : _g.labels
+      labels: (_g = datasource.getDB(datasource.id)) == null ? void 0 : _g.labels
     }
   ), /* @__PURE__ */ React__default.default.createElement(Space, { v: 0.5 }), queryWithDefaults.editorMode !== EditorMode.Code && /* @__PURE__ */ React__default.default.createElement(
     VisualEditor,
     {
       db,
       query: queryWithDefaults,
+      language,
       onChange: (q) => onQueryChange(q, false),
       queryRowFilter,
       onValidate: setIsQueryRunnable,
@@ -7272,6 +7317,7 @@ function SqlQueryEditor({ datasource, query, onChange, onRunQuery, range }) {
     RawEditor,
     {
       db,
+      language,
       query: queryWithDefaults,
       queryToValidate,
       onChange: onQueryChange,
@@ -7409,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$i);
   return /* @__PURE__ */ React__default.default.createElement("span", { className: styles.container }, description, /* @__PURE__ */ React__default.default.createElement(
     "a",
     {
@@ -7421,7 +7467,7 @@ function ConfigDescriptionLink(props) {
     text
   ));
 }
-const getStyles$c = (theme) => {
+const getStyles$i = (theme) => {
   return {
     container: css.css({
       color: theme.colors.text.secondary,
@@ -7576,7 +7622,7 @@ const AuthMethodSettings = ({
         AuthMethod.BasicAuth,
         AuthMethod.OAuthForward,
         AuthMethod.NoAuth,
-        ...(_a2 = customMethods == null ? undefined : customMethods.map((m) => m.id)) != null ? _a2 : []
+        ...(_a2 = customMethods == null ? void 0 : customMethods.map((m) => m.id)) != null ? _a2 : []
       ];
     },
     [customMethods, visibleMethodsFromProps]
@@ -7584,7 +7630,7 @@ const AuthMethodSettings = ({
   const hasSelect = visibleMethods.length > 1;
   const preparedOptions = React.useMemo(() => {
     var _a2;
-    const customOptions = (_a2 = customMethods == null ? undefined : customMethods.reduce((acc, method) => {
+    const customOptions = (_a2 = customMethods == null ? void 0 : customMethods.reduce((acc, method) => {
       acc[method.id] = {
         label: method.label,
         value: method.id,
@@ -7597,7 +7643,7 @@ const AuthMethodSettings = ({
     for (k in defaultOptions) {
       preparedDefaultOptions[k] = {
         ...defaultOptions[k],
-        ...defaultOptionsOverrides == null ? undefined : defaultOptionsOverrides[k]
+        ...defaultOptionsOverrides == null ? void 0 : defaultOptionsOverrides[k]
       };
     }
     const allOptions = {
@@ -7625,7 +7671,7 @@ const AuthMethodSettings = ({
   if (selected === AuthMethod.BasicAuth && basicAuth) {
     AuthFieldsComponent = /* @__PURE__ */ React__default.default.createElement(BasicAuth, { ...basicAuth, readOnly });
   } else if (selected.startsWith("custom-")) {
-    AuthFieldsComponent = (_b = (_a = customMethods == null ? undefined : customMethods.find((m) => m.id === selected)) == null ? undefined : _a.component) != null ? _b : null;
+    AuthFieldsComponent = (_b = (_a = customMethods == null ? void 0 : customMethods.find((m) => m.id === selected)) == null ? void 0 : _a.component) != null ? _b : null;
   }
   const title = hasSelect ? "Authentication methods" : (_c = preparedOptions[0].label) != null ? _c : "";
   const description = hasSelect ? "Choose an authentication method to access the data source" : (_d = preparedOptions[0].description) != null ? _d : "";
@@ -7710,7 +7756,7 @@ const SelfSignedCertificate = ({
       {
         label: "CA Certificate",
         labelWidth: 24,
-        tooltip: (_a = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _a : "Your self-signed certificate",
+        tooltip: (_a = tooltips == null ? void 0 : tooltips.certificateLabel) != null ? _a : "Your self-signed certificate",
         required: true,
         htmlFor: "self-signed-certificate-input",
         interactive: true,
@@ -7765,7 +7811,7 @@ const TLSClientAuth = ({
       {
         label: "ServerName",
         labelWidth: 24,
-        tooltip: (_a = tooltips == null ? undefined : tooltips.serverNameLabel) != null ? _a : "A Servername is used to verify the hostname on the returned certificate",
+        tooltip: (_a = tooltips == null ? void 0 : tooltips.serverNameLabel) != null ? _a : "A Servername is used to verify the hostname on the returned certificate",
         required: true,
         htmlFor: "client-auth-servername-input",
         interactive: true,
@@ -7789,7 +7835,7 @@ const TLSClientAuth = ({
       {
         label: "Client Certificate",
         labelWidth: 24,
-        tooltip: (_b = tooltips == null ? undefined : tooltips.certificateLabel) != null ? _b : "The client certificate can be generated from a Certificate Authority or be self-signed",
+        tooltip: (_b = tooltips == null ? void 0 : tooltips.certificateLabel) != null ? _b : "The client certificate can be generated from a Certificate Authority or be self-signed",
         required: true,
         htmlFor: "client-auth-client-certificate-input",
         interactive: true,
@@ -7816,7 +7862,7 @@ const TLSClientAuth = ({
       {
         label: "Client Key",
         labelWidth: 24,
-        tooltip: (_c = tooltips == null ? undefined : tooltips.keyLabel) != null ? _c : "The client key can be generated from a Certificate Authority or be self-signed",
+        tooltip: (_c = tooltips == null ? void 0 : tooltips.keyLabel) != null ? _c : "The client key can be generated from a Certificate Authority or be self-signed",
         required: true,
         htmlFor: "client-auth-client-key-input",
         interactive: true,
@@ -7972,7 +8018,7 @@ const CustomHeaders = ({ headers: headersFromProps, onChange, readOnly }) => {
       let changed = false;
       const newHeaders = headers2.map((header) => {
         var _a;
-        const configured = (_a = headersFromProps.find((h) => h.name === header.name)) == null ? undefined : _a.configured;
+        const configured = (_a = headersFromProps.find((h) => h.name === header.name)) == null ? void 0 : _a.configured;
         if (typeof configured !== "undefined" && header.configured !== configured) {
           changed = true;
           return { ...header, configured };
@@ -8150,7 +8196,7 @@ function getTLSProps(config, onChange) {
   return {
     selfSignedCertificate: {
       enabled: Boolean(config.jsonData.tlsAuthWithCACert),
-      certificateConfigured: !!((_a = config.secureJsonFields) == null ? undefined : _a.tlsCACert),
+      certificateConfigured: !!((_a = config.secureJsonFields) == null ? void 0 : _a.tlsCACert),
       onToggle: (enabled) => enabled ? onChange({
         ...config,
         jsonData: { ...config.jsonData, tlsAuthWithCACert: enabled }
@@ -8173,8 +8219,8 @@ function getTLSProps(config, onChange) {
     TLSClientAuth: {
       enabled: config.jsonData.tlsAuth,
       serverName: config.jsonData.serverName,
-      clientCertificateConfigured: !!((_b = config.secureJsonFields) == null ? undefined : _b.tlsClientCert),
-      clientKeyConfigured: !!((_c = config.secureJsonFields) == null ? undefined : _c.tlsClientKey),
+      clientCertificateConfigured: !!((_b = config.secureJsonFields) == null ? void 0 : _b.tlsClientCert),
+      clientKeyConfigured: !!((_c = config.secureJsonFields) == null ? void 0 : _c.tlsClientKey),
       onToggle: (enabled) => enabled ? onChange({
         ...config,
         jsonData: { ...config.jsonData, tlsAuth: enabled }
@@ -8282,7 +8328,7 @@ const ConnectionSettings = ({
   urlLabel,
   className
 }) => {
-  const isValidUrl = config.url !== undefined && /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(config.url);
+  const isValidUrl = config.url !== void 0 && /^(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?$/.test(config.url);
   const styles = {
     container: css.css({
       maxWidth: 578
@@ -8390,6 +8436,2545 @@ const AdvancedHttpSettings = ({
   ));
 };
 
+const SECURE_FIELD_CONFIGURED = "__CONFIGURED__";
+function resolveSecureKeyTemplate(template, item, index) {
+  return template.replace(/\{index1\}/g, String(index + 1)).replace(/\{index\}/g, String(index)).replace(/\{item\.(\w+)\}/g, (_, key) => {
+    var _a;
+    return String((_a = item[key]) != null ? _a : "");
+  });
+}
+function evaluateItemCondition(condition, item) {
+  const trimmed = condition.trim();
+  if (trimmed === "true") {
+    return true;
+  }
+  const match = trimmed.match(/^item\.(\w+)\s*==\s*(.+)$/);
+  if (!match) {
+    return false;
+  }
+  const [, key, rawValue] = match;
+  const actualValue = item[key];
+  const expected = rawValue.trim();
+  if (expected === "true") {
+    return actualValue === true;
+  }
+  if (expected === "false") {
+    return actualValue === false;
+  }
+  const unquoted = expected.replace(/^['"]|['"]$/g, "");
+  return String(actualValue) === unquoted;
+}
+function findActiveSecureOverride(itemFields, item, index) {
+  for (const field of itemFields) {
+    if (!field.overrides) {
+      continue;
+    }
+    for (const override of field.overrides) {
+      if (!override.secureKey) {
+        continue;
+      }
+      if (evaluateItemCondition(override.when, item)) {
+        return {
+          fieldKey: field.key,
+          resolvedKey: resolveSecureKeyTemplate(override.secureKey, item, index)
+        };
+      }
+    }
+  }
+  return null;
+}
+function patternToRegex(pattern) {
+  const escaped = pattern.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+  return new RegExp("^" + escaped.replace("\\{index\\}", "(\\d+)") + "$");
+}
+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, _f;
+  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 = useDatasourceSchema.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;
+        }
+      }
+    }
+    for (const field of fields) {
+      if (field.valueType !== "array" || !((_f = field.item) == null ? void 0 : _f.fields)) {
+        continue;
+      }
+      const itemFields = field.item.fields;
+      const hasSecureOverride = itemFields.some((f) => {
+        var _a2;
+        return (_a2 = f.overrides) == null ? void 0 : _a2.some((o) => o.secureKey);
+      });
+      if (!hasSecureOverride) {
+        continue;
+      }
+      const fk = useDatasourceSchema.formKey(field);
+      const arr = values[fk];
+      if (!Array.isArray(arr)) {
+        continue;
+      }
+      values[fk] = arr.map((item, idx) => {
+        var _a2;
+        const match = findActiveSecureOverride(itemFields, item, idx);
+        if (match && ((_a2 = ds.secureJsonFields) == null ? void 0 : _a2[match.resolvedKey])) {
+          return { ...item, [match.fieldKey]: SECURE_FIELD_CONFIGURED };
+        }
+        return item;
+      });
+    }
+    return { values, readOnly: !!ds.readOnly };
+  } catch (err) {
+    const message = err instanceof Error ? err.message : "Failed to load datasource configuration";
+    return { values: {}, readOnly: false, error: message };
+  }
+}
+function buildDatasourceConfigPayload(data, fields, existing, isFieldVisible) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  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 = useDatasourceSchema.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;
+    }
+  }
+  for (const field of fields) {
+    if (field.valueType !== "array" || !((_e = field.item) == null ? void 0 : _e.fields) || field.target !== "jsonData") {
+      continue;
+    }
+    const itemFields = field.item.fields;
+    const hasSecureOverride = itemFields.some((f) => {
+      var _a2;
+      return (_a2 = f.overrides) == null ? void 0 : _a2.some((o) => o.secureKey);
+    });
+    if (!hasSecureOverride) {
+      continue;
+    }
+    const arr = field.section ? (_f = jsonData[field.section]) == null ? void 0 : _f[field.key] : jsonData[field.key];
+    if (!Array.isArray(arr)) {
+      continue;
+    }
+    const secureKeyOverrides = [];
+    for (const f of itemFields) {
+      for (const o of (_g = f.overrides) != null ? _g : []) {
+        if (o.secureKey) {
+          secureKeyOverrides.push({ fieldKey: f.key, override: o });
+        }
+      }
+    }
+    const activeSecureKeys = /* @__PURE__ */ new Set();
+    for (let i = 0; i < arr.length; i++) {
+      const item = arr[i];
+      const match = findActiveSecureOverride(itemFields, item, i);
+      if (!match) {
+        continue;
+      }
+      const resolvedKey = match.resolvedKey;
+      activeSecureKeys.add(resolvedKey);
+      const itemValue = item[match.fieldKey];
+      if (itemValue === SECURE_FIELD_CONFIGURED) {
+        secureJsonFields[resolvedKey] = true;
+      } else if (itemValue && itemValue !== "") {
+        secureJsonData[resolvedKey] = String(itemValue);
+        secureJsonFields[resolvedKey] = false;
+        item[match.fieldKey] = "";
+      }
+    }
+    const existingSecureFields = (_h = existing.secureJsonFields) != null ? _h : {};
+    for (const existingKey of Object.keys(existingSecureFields)) {
+      const couldBeFromThisField = secureKeyOverrides.some((sko) => {
+        const staticPrefix = sko.override.secureKey.split("{")[0];
+        return staticPrefix && existingKey.startsWith(staticPrefix);
+      });
+      if (couldBeFromThisField && !activeSecureKeys.has(existingKey)) {
+        secureJsonFields[existingKey] = false;
+        secureJsonData[existingKey] = "";
+      }
+    }
+  }
+  return { rootFields, jsonData, secureJsonData, secureJsonFields };
+}
+async function submitDatasourceConfig(dsUid, data, fields, isFieldVisible) {
+  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, celContext) {
+  if (field.required) {
+    return true;
+  }
+  if (field.requiredWhen) {
+    if (celContext) {
+      return useDatasourceSchema.evaluateCelExpression(field.requiredWhen, celContext);
+    }
+    const parsed = useDatasourceSchema.parseDependsOn(field.requiredWhen);
+    if (parsed) {
+      const depField = fieldById.get(parsed.field);
+      const depKey = depField ? useDatasourceSchema.formKey(depField) : parsed.field;
+      return useDatasourceSchema.evaluateDependsOn(parsed, useDatasourceSchema.getWatchedValue(watchedValues, depKey));
+    }
+  }
+  return false;
+}
+function buildValidationRules(field, required) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const rules = {};
+  const label = (_a = field.label) != null ? _a : field.key;
+  if (required) {
+    if (field.target === "secureJsonData") {
+      rules.validate = (value) => {
+        if (value === SECURE_FIELD_CONFIGURED) {
+          return true;
+        }
+        if (!value || value === "") {
+          return `${label} is required`;
+        }
+        return true;
+      };
+    } else {
+      rules.required = `${label} is required`;
+    }
+  }
+  if (field.valueType === "array" && ((_b = field.item) == null ? void 0 : _b.valueType) === "object" && ((_c = field.item.fields) == null ? void 0 : _c.length)) {
+    const requiredItemFields = field.item.fields.filter((f) => f.required);
+    if (requiredItemFields.length > 0) {
+      const existingValidate = rules.validate;
+      rules.validate = (value) => {
+        var _a2;
+        if (existingValidate) {
+          const r = existingValidate(value);
+          if (r !== true) {
+            return r;
+          }
+        }
+        if (!Array.isArray(value)) {
+          return true;
+        }
+        const itemErrors = {};
+        for (let i = 0; i < value.length; i++) {
+          const item = value[i];
+          const missing = [];
+          for (const rf of requiredItemFields) {
+            const v = item[rf.key];
+            if (v === void 0 || v === null || v === "") {
+              missing.push((_a2 = rf.label) != null ? _a2 : rf.key);
+            }
+          }
+          if (missing.length > 0) {
+            itemErrors[i] = `${missing.join(", ")} required`;
+          }
+        }
+        if (Object.keys(itemErrors).length === 0) {
+          return true;
+        }
+        return `__ITEM_ERRORS__${JSON.stringify(itemErrors)}`;
+      };
+    }
+  }
+  if (field.validations) {
+    for (const v of field.validations) {
+      switch (v.type) {
+        case "pattern":
+          rules.pattern = {
+            value: new RegExp(v.pattern),
+            message: (_d = v.message) != null ? _d : `Invalid ${label}`
+          };
+          break;
+        case "range":
+          if (v.min !== void 0) {
+            rules.min = { value: v.min, message: (_e = v.message) != null ? _e : `Minimum value is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.max = { value: v.max, message: (_f = v.message) != null ? _f : `Maximum value is ${v.max}` };
+          }
+          break;
+        case "length":
+          if (v.min !== void 0) {
+            rules.minLength = { value: v.min, message: (_g = v.message) != null ? _g : `Minimum length is ${v.min}` };
+          }
+          if (v.max !== void 0) {
+            rules.maxLength = { value: v.max, message: (_h = v.message) != null ? _h : `Maximum length is ${v.max}` };
+          }
+          break;
+      }
+    }
+  }
+  return rules;
+}
+const ITEM_ERRORS_PREFIX = "__ITEM_ERRORS__";
+function parseItemErrors(errorMessage) {
+  if (!errorMessage || !errorMessage.startsWith(ITEM_ERRORS_PREFIX)) {
+    return null;
+  }
+  try {
+    return JSON.parse(errorMessage.slice(ITEM_ERRORS_PREFIX.length));
+  } catch (e) {
+    return null;
+  }
+}
+
+const PdcFieldNote = (props) => {
+  const { enabled, description, configUrl } = props;
+  const styles = ui.useStyles2(getStyles$h);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.wrapper }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "shield", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, "Private data source connect: ", /* @__PURE__ */ React__default.default.createElement("strong", null, enabled ? "Enabled" : "Disabled")), description && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }))), /* @__PURE__ */ React__default.default.createElement(ui.LinkButton, { variant: "secondary", size: "sm", icon: "external-link-alt", href: configUrl }, "Configure in settings"));
+};
+const getStyles$h = (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(props) {
+  var _a;
+  const { formField, placeholder, disabled } = props;
+  const isConfigured = formField.value === SECURE_FIELD_CONFIGURED;
+  const [revealed, setRevealed] = React.useState(false);
+  const styles = ui.useStyles2(getSecureFieldStyles);
+  if (isConfigured) {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.configuredRow }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), "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),
+    whiteSpace: "nowrap"
+  }),
+  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,
+    whiteSpace: "nowrap"
+  })
+});
+
+const ComplexFieldNote = (props) => {
+  const { count, label } = props;
+  const styles = ui.useStyles2(getStyles$g);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.note }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "info-circle", size: "xs" }), /* @__PURE__ */ React__default.default.createElement("span", null, count > 0 ? `${count} ${label.toLowerCase()} configured.` : `No ${label.toLowerCase()} configured.`, " Configure in Grafana UI."));
+};
+const getStyles$g = (theme) => ({
+  note: css.css({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: theme.spacing(0.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 FileUploadField(props) {
+  var _a, _b, _c, _d, _e, _f, _g;
+  const { field, formField, disabled, setValue } = props;
+  const [mode, setModeLocal] = React.useState("upload");
+  const [error, setError] = React.useState(null);
+  const theme = ui.useTheme2();
+  const mapping = (_a = field.ui) == null ? void 0 : _a.fileMapping;
+  const accept = (_c = (_b = field.ui) == null ? void 0 : _b.accept) != null ? _c : [".json"];
+  const setMode = React.useCallback(
+    (next) => {
+      setModeLocal(next);
+      formField.onChange(next);
+    },
+    [formField]
+  );
+  const processJson = React.useCallback(
+    (text) => {
+      const fileMapping = mapping != null ? mapping : {};
+      try {
+        const parsed = JSON.parse(text);
+        if (typeof parsed !== "object" || parsed === null) {
+          setError("Invalid JSON object");
+          return;
+        }
+        const requiredKeys = Object.keys(fileMapping);
+        const missingKeys = requiredKeys.filter((k) => parsed[k] === void 0);
+        if (missingKeys.length > 0) {
+          setError(`Missing keys: ${missingKeys.join(", ")}`);
+          return;
+        }
+        for (const [jsonKey, targetFieldId] of Object.entries(fileMapping)) {
+          if (parsed[jsonKey] !== void 0) {
+            const parts = targetFieldId.split(".");
+            const fk = parts.length === 2 ? parts[1] : targetFieldId;
+            setValue(fk, parsed[jsonKey]);
+          }
+        }
+        setError(null);
+        setModeLocal("manual");
+        formField.onChange("manual");
+      } catch (e) {
+        setError("Invalid JSON");
+      }
+    },
+    [mapping, setValue, formField]
+  );
+  const styles = getStyles$f(theme);
+  if (mode === "manual") {
+    return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("paste"), disabled }, "Paste JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("upload"), disabled }, "Upload JWT Token"));
+  }
+  if (mode === "paste") {
+    return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(
+      ui.TextArea,
+      {
+        placeholder: (_e = (_d = field.ui) == null ? void 0 : _d.placeholder) != null ? _e : "Paste Google JWT token here",
+        rows: (_g = (_f = field.ui) == null ? void 0 : _f.rows) != null ? _g : 10,
+        onBlur: (e) => {
+          const val = e.currentTarget.value;
+          if (val.trim()) {
+            processJson(val);
+          }
+        },
+        disabled
+      }
+    ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("upload"), disabled }, "Upload JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("manual"), disabled }, "Fill In JWT Token manually")), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.error }, error));
+  }
+  return /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(
+    ui.FileDropzone,
+    {
+      options: { multiple: false, accept: accept.join(",") },
+      readAs: "readAsText",
+      onLoad: (result) => {
+        if (typeof result === "string") {
+          processJson(result);
+        }
+      }
+    }
+  ), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.buttonRow }, /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("paste"), disabled }, "Paste JWT Token"), /* @__PURE__ */ React__default.default.createElement("span", { className: styles.separator }, "or"), /* @__PURE__ */ React__default.default.createElement(ui.Button, { type: "button", fill: "outline", size: "sm", onClick: () => setMode("manual"), disabled }, "Fill In JWT Token manually")), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.error }, error));
+}
+function getStyles$f(theme) {
+  return {
+    buttonRow: css.css({
+      marginTop: theme.spacing(1),
+      display: "flex",
+      alignItems: "center",
+      gap: theme.spacing(0.5)
+    }),
+    separator: css.css({
+      padding: `0 ${theme.spacing(0.5)}`,
+      color: theme.colors.text.secondary
+    }),
+    error: css.css({
+      color: theme.colors.error.text,
+      fontSize: theme.typography.bodySmall.fontSize,
+      marginTop: theme.spacing(0.5),
+      display: "block"
+    })
+  };
+}
+
+const IndexedPairEditor = (props) => {
+  const { value, onChange, maxItems = 10, disabled, hideControls, itemLabel = "header" } = props;
+  const styles = ui.useStyles2(getStyles$e);
+  const items = Array.isArray(value) ? value : [];
+  const addItem = () => {
+    if (items.length >= maxItems) {
+      return;
+    }
+    onChange([...items, { index: 0, name: "", value: "" }]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, key, val) => {
+    const updated = items.map((item, i) => i === index ? { ...item, [key]: val } : item);
+    onChange(updated);
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
+    IndexedPairRow,
+    {
+      key: item.index || `new-${i}`,
+      item,
+      index: i,
+      disabled,
+      onUpdate: updateItem,
+      onRemove: removeItem,
+      hideControls,
+      itemLabel
+    }
+  )), !hideControls && items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add ", itemLabel)), !hideControls && items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " ", itemLabel, "s reached"));
+};
+const IndexedPairRow = (props) => {
+  const { item, index, disabled, onUpdate, onRemove, hideControls, itemLabel = "header" } = props;
+  const styles = ui.useStyles2(getStyles$e);
+  const secureStyles = ui.useStyles2(getSecureFieldStyles);
+  const isConfigured = item.value === SECURE_FIELD_CONFIGURED;
+  const [editing, setEditing] = React.useState(false);
+  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: "key",
+      disabled: disabled || hideControls,
+      onChange: (e) => onUpdate(index, "name", e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      }
+    }
+  )), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, isConfigured && !editing ? /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1, alignItems: "center" }, /* @__PURE__ */ React__default.default.createElement("span", { className: secureStyles.configuredBadge }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: "lock", size: "xs" }), "Configured"), !disabled && /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      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: `${itemLabel} value`,
+      disabled,
+      type: revealed ? "text" : "password",
+      onChange: (e) => onUpdate(index, "value", e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+        }
+      },
+      suffix: /* @__PURE__ */ React__default.default.createElement(
+        ui.Button,
+        {
+          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 ${itemLabel}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": `Remove ${itemLabel}`,
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  )));
+};
+const getStyles$e = (theme) => ({
+  inputCell: css.css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
+  }),
+  limitNote: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary
+  })
+});
+
+function ObjectArrayEditor(props) {
+  var _a, _b, _c, _d, _e, _f;
+  const { field, value, onChange, disabled, errorMessage } = props;
+  const styles = ui.useStyles2(getStyles$d);
+  const itemFields = (_b = (_a = field.item) == null ? void 0 : _a.fields) != null ? _b : [];
+  const layoutRows = computeLayoutRows(itemFields);
+  const items = Array.isArray(value) ? value : [];
+  const maxItems = (_e = (_d = (_c = field.validations) == null ? void 0 : _c.find((v) => v.type === "itemCount")) == null ? void 0 : _d.max) != null ? _e : 20;
+  const label = (_f = field.label) != null ? _f : field.key;
+  const itemErrors = parseItemErrors(errorMessage);
+  const addItem = () => {
+    var _a2, _b2;
+    if (items.length >= maxItems) {
+      return;
+    }
+    const empty = {};
+    for (const f of itemFields) {
+      if (f.valueType === "boolean") {
+        empty[f.key] = (_a2 = f.defaultValue) != null ? _a2 : false;
+      } else {
+        empty[f.key] = (_b2 = f.defaultValue) != null ? _b2 : "";
+      }
+    }
+    onChange([...items, empty]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  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: 1 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(
+    ObjectArrayItemRow,
+    {
+      key: i,
+      item,
+      index: i,
+      itemFields,
+      layoutRows,
+      disabled: !!disabled,
+      onUpdate: updateItem,
+      onRemove: removeItem,
+      showLabels: true,
+      error: itemErrors == null ? void 0 : itemErrors[i]
+    }
+  )), items.length < maxItems && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", disabled, onClick: addItem, type: "button" }, "Add ", label.toLowerCase())), items.length >= maxItems && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.limitNote }, "Maximum ", maxItems, " items reached"));
+}
+function computeLayoutRows(fields) {
+  var _a;
+  const hasExplicitRow = fields.some((f) => {
+    var _a2;
+    return ((_a2 = f.ui) == null ? void 0 : _a2.row) !== void 0;
+  });
+  if (!hasExplicitRow) {
+    if (fields.length <= 3) {
+      return [fields];
+    }
+    return fields.map((f) => [f]);
+  }
+  const rowMap = /* @__PURE__ */ new Map();
+  const noRow = [];
+  for (const f of fields) {
+    if (((_a = f.ui) == null ? void 0 : _a.row) !== void 0) {
+      const existing = rowMap.get(f.ui.row);
+      if (existing) {
+        existing.push(f);
+      } else {
+        rowMap.set(f.ui.row, [f]);
+      }
+    } else {
+      noRow.push(f);
+    }
+  }
+  const sortedKeys = [...rowMap.keys()].sort((a, b) => a - b);
+  const rows = sortedKeys.map((k) => rowMap.get(k));
+  for (const f of noRow) {
+    rows.push([f]);
+  }
+  return rows;
+}
+function makeItemFormField(item, index, fieldKey, onUpdate) {
+  return {
+    name: `item-${index}-${fieldKey}`,
+    value: item[fieldKey],
+    onChange: (eventOrValue) => {
+      if (eventOrValue != null && typeof eventOrValue === "object" && "target" in eventOrValue) {
+        onUpdate(index, fieldKey, eventOrValue.target.value);
+      } else {
+        onUpdate(index, fieldKey, eventOrValue);
+      }
+    },
+    onBlur: () => {
+    }
+  };
+}
+function effectiveItemField(field, isSecure) {
+  if (!isSecure) {
+    return field;
+  }
+  return { ...field, semanticType: "password" };
+}
+function ObjectArrayItemRow({
+  item,
+  index,
+  itemFields,
+  layoutRows,
+  disabled,
+  onUpdate,
+  onRemove,
+  showLabels,
+  error
+}) {
+  const styles = ui.useStyles2(getStyles$d);
+  const secureOverride = findActiveSecureOverride(itemFields, item, index);
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.itemRow }, layoutRows.map((row, rowIdx) => /* @__PURE__ */ React__default.default.createElement(ui.Stack, { key: rowIdx, direction: "row", gap: 1, alignItems: "flex-end", wrap: "wrap" }, row.map((field) => {
+    var _a;
+    const isSecureTarget = (secureOverride == null ? void 0 : secureOverride.fieldKey) === field.key;
+    const eff = effectiveItemField(field, !!isSecureTarget);
+    const formField = makeItemFormField(item, index, field.key, onUpdate);
+    if (isSecureTarget && item[field.key] === SECURE_FIELD_CONFIGURED) {
+      formField.value = SECURE_FIELD_CONFIGURED;
+    }
+    return /* @__PURE__ */ React__default.default.createElement("div", { key: field.key, className: field.valueType === "boolean" ? styles.boolCell : styles.inputCell }, /* @__PURE__ */ React__default.default.createElement("span", { className: styles.cellLabel }, (_a = field.label) != null ? _a : field.key, field.required && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.required }, " *")), renderFieldInput(eff, formField, disabled));
+  }), rowIdx === 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.removeCellWithLabel }, /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: "Remove" }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": "Remove item",
+      disabled,
+      onClick: () => onRemove(index),
+      type: "button"
+    }
+  ))))), error && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.itemError }, error));
+}
+const getStyles$d = (theme) => ({
+  itemRow: css.css({
+    display: "flex",
+    flexDirection: "column",
+    gap: theme.spacing(0.5),
+    padding: theme.spacing(1),
+    borderRadius: theme.shape.radius.default,
+    border: `1px solid ${theme.colors.border.weak}`
+  }),
+  inputCell: css.css({
+    flex: "1 1 120px",
+    minWidth: 120,
+    overflow: "hidden"
+  }),
+  boolCell: css.css({
+    flex: "0 0 auto",
+    minWidth: 0
+  }),
+  cellLabel: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary,
+    marginBottom: theme.spacing(0.25)
+  }),
+  required: css.css({
+    color: theme.colors.error.text
+  }),
+  removeCellWithLabel: css.css({
+    flex: "0 0 auto",
+    display: "flex",
+    alignItems: "flex-end",
+    paddingBottom: theme.spacing(0.25)
+  }),
+  itemError: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.error.text
+  }),
+  limitNote: css.css({
+    fontSize: theme.typography.bodySmall.fontSize,
+    color: theme.colors.text.secondary
+  })
+});
+
+const StringArrayInput = (props) => {
+  const { value, onChange, placeholder, disabled, itemLabel = "item" } = props;
+  const styles = ui.useStyles2(getStyles$c);
+  const items = Array.isArray(value) ? value : [];
+  const lastInputRef = React.useRef(null);
+  const shouldFocusLastRef = React.useRef(false);
+  React.useEffect(() => {
+    if (shouldFocusLastRef.current && lastInputRef.current) {
+      lastInputRef.current.focus();
+      shouldFocusLastRef.current = false;
+    }
+  }, [items.length]);
+  const addItem = () => {
+    shouldFocusLastRef.current = true;
+    onChange([...items, ""]);
+  };
+  const removeItem = (index) => {
+    onChange(items.filter((_, i) => i !== index));
+  };
+  const updateItem = (index, val) => {
+    onChange(items.map((item, i) => i === index ? val : item));
+  };
+  const isItemValid = (index, val) => {
+    const trimmed = val.trim();
+    if (trimmed === "") {
+      return false;
+    }
+    return !items.some((item, i) => i !== index && item.trim() === trimmed);
+  };
+  const handleEnter = (index, currentValue) => {
+    if (!isItemValid(index, currentValue)) {
+      return;
+    }
+    if (index === items.length - 1) {
+      shouldFocusLastRef.current = true;
+      onChange([...items, ""]);
+    }
+  };
+  return /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "column", gap: 0.5 }, items.map((item, i) => /* @__PURE__ */ React__default.default.createElement(ui.Stack, { direction: "row", gap: 1, key: i }, /* @__PURE__ */ React__default.default.createElement("div", { className: styles.inputCell }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Input,
+    {
+      ref: i === items.length - 1 ? lastInputRef : void 0,
+      value: item,
+      placeholder: placeholder != null ? placeholder : itemLabel,
+      disabled,
+      onChange: (e) => updateItem(i, e.currentTarget.value),
+      onKeyDown: (e) => {
+        if (e.key === "Enter") {
+          e.preventDefault();
+          handleEnter(i, e.currentTarget.value);
+        }
+      }
+    }
+  )), !disabled && /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `Remove ${itemLabel}` }, /* @__PURE__ */ React__default.default.createElement(
+    ui.Button,
+    {
+      variant: "secondary",
+      fill: "text",
+      size: "sm",
+      icon: "trash-alt",
+      "aria-label": `Remove ${itemLabel}`,
+      onClick: () => removeItem(i),
+      type: "button"
+    }
+  )))), !disabled && /* @__PURE__ */ React__default.default.createElement("div", null, /* @__PURE__ */ React__default.default.createElement(ui.Button, { variant: "secondary", size: "sm", icon: "plus", onClick: addItem, type: "button" }, "Add")));
+};
+const getStyles$c = (theme) => ({
+  inputCell: css.css({
+    flex: "1 1 0",
+    minWidth: 0,
+    overflow: "hidden"
+  })
+});
+
+function renderFieldInput(field, formField, disabled, errorMessage, setValue) {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w;
+  const value = formField.value;
+  const placeholder = (_a = field.ui) == null ? void 0 : _a.placeholder;
+  const label = (_b = field.label) != null ? _b : field.key;
+  if (((_c = field.ui) == null ? void 0 : _c.component) === "fileUpload" && field.ui.fileMapping && setValue) {
+    return /* @__PURE__ */ React__default.default.createElement(FileUploadField, { field, formField, disabled, setValue });
+  }
+  if (field.target === "secureJsonData" || field.semanticType === "password" || field.semanticType === "token") {
+    return /* @__PURE__ */ React__default.default.createElement(SecureFieldInput, { formField, placeholder: placeholder != null ? placeholder : label, disabled, label });
+  }
+  if (((_d = field.ui) == null ? void 0 : _d.component) === "radio") {
+    const options = ((_f = (_e = field.ui) == null ? void 0 : _e.options) != null ? _f : []).map((opt) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    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) => {
+          if (field.valueType === "number") {
+            const n = Number(v);
+            formField.onChange(Number.isNaN(n) ? v : n);
+          } else {
+            formField.onChange(v);
+          }
+        },
+        disabled
+      }
+    ));
+  }
+  if (((_g = field.ui) == null ? void 0 : _g.component) === "select") {
+    const options = ((_i = (_h = field.ui) == null ? void 0 : _h.options) != null ? _i : []).map((opt) => ({
+      label: opt.label,
+      value: String(opt.value),
+      description: opt.description
+    }));
+    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.valueType === "boolean") {
+    return /* @__PURE__ */ React__default.default.createElement(ui.Switch, { value: !!value, onChange: (e) => formField.onChange(e.currentTarget.checked), disabled });
+  }
+  if (field.valueType === "number") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.Input,
+      {
+        ...formField,
+        value: value !== void 0 && value !== null ? Number(value) : "",
+        type: "number",
+        placeholder,
+        disabled,
+        onChange: (e) => {
+          const n = e.currentTarget.valueAsNumber;
+          formField.onChange(Number.isNaN(n) ? void 0 : n);
+        }
+      }
+    );
+  }
+  if (field.semanticType === "url") {
+    return /* @__PURE__ */ React__default.default.createElement(ui.Input, { ...formField, value: String(value != null ? value : ""), type: "url", placeholder, disabled });
+  }
+  if (((_j = field.ui) == null ? void 0 : _j.component) === "textarea") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ui.TextArea,
+      {
+        ...formField,
+        value: String(value != null ? value : ""),
+        placeholder,
+        disabled,
+        rows: (_l = (_k = field.ui) == null ? void 0 : _k.rows) != null ? _l : 3
+      }
+    );
+  }
+  if (((_m = field.storage) == null ? void 0 : _m.type) === "indexedPair") {
+    const items = Array.isArray(value) ? value : [];
+    const maxItems = (_p = (_o = (_n = field.validations) == null ? void 0 : _n.find((v) => v.type === "itemCount")) == null ? void 0 : _o.max) != null ? _p : 10;
+    const itemLabel = (_r = (_q = field.label) == null ? void 0 : _q.toLowerCase().replace(/s$/, "")) != null ? _r : "header";
+    return /* @__PURE__ */ React__default.default.createElement(
+      IndexedPairEditor,
+      {
+        value: items,
+        onChange: formField.onChange,
+        maxItems,
+        disabled,
+        itemLabel
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_s = field.item) == null ? void 0 : _s.valueType) === "string") {
+    return /* @__PURE__ */ React__default.default.createElement(
+      StringArrayInput,
+      {
+        value: Array.isArray(value) ? value : [],
+        onChange: formField.onChange,
+        placeholder,
+        disabled,
+        itemLabel: label.toLowerCase().replace(/s$/, "")
+      }
+    );
+  }
+  if (field.valueType === "array" && ((_t = field.item) == null ? void 0 : _t.valueType) === "object" && ((_u = field.item.fields) == null ? void 0 : _u.length)) {
+    return /* @__PURE__ */ React__default.default.createElement(
+      ObjectArrayEditor,
+      {
+        field,
+        value,
+        onChange: formField.onChange,
+        disabled,
+        errorMessage
+      }
+    );
+  }
+  if (field.valueType === "object" || field.valueType === "map" || field.valueType === "array" && (((_v = field.item) == null ? void 0 : _v.valueType) === "object" || ((_w = field.item) == null ? void 0 : _w.valueType) === "map")) {
+    const count = Array.isArray(value) ? value.length : 0;
+    return /* @__PURE__ */ React__default.default.createElement(ComplexFieldNote, { count, label });
+  }
+  return /* @__PURE__ */ React__default.default.createElement(ui.Input, { ...formField, value: String(value != null ? value : ""), placeholder, disabled });
+}
+
+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: theme.spacing(0.5)
+  }),
+  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: theme.colors.text.secondary,
+    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: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
+    color: theme.colors.text.disabled,
+    border: `1px solid ${theme.colors.border.weak}`,
+    borderRadius: theme.shape.radius.pill,
+    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)
+  })
+});
+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: theme.typography.bodySmall.fontSize,
+    fontWeight: theme.typography.fontWeightRegular,
+    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: theme.typography.bodySmall.fontSize,
+    color: theme.colors.error.text
+  })
+});
+
+function SchemaField({
+  field,
+  control,
+  errors,
+  disabled,
+  dsUid,
+  watchedValues,
+  fieldById,
+  celContext,
+  setValue
+}) {
+  const styles = ui.useStyles2(getWizardStyles);
+  const activeOverride = useDatasourceSchema.resolveActiveOverride(field, watchedValues, fieldById);
+  const fk = useDatasourceSchema.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, celContext);
+  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,
+          description,
+          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, setValue), errorMessage && !parseItemErrors(errorMessage) && /* @__PURE__ */ React__default.default.createElement("span", { className: styles.fieldError }, errorMessage)));
+      }
+    }
+  );
+}
+
+const AuthorizationHeaderField = (props) => {
+  const { headersFieldKey, control, disabled, watchedValues } = props;
+  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 })));
+      }
+    }
+  );
+};
+
+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,
+    celContext,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    isFieldDisabled,
+    isGroupValid,
+    groupHasData,
+    onSubmit,
+    setValue
+  } = 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: useDatasourceSchema.formKey(field),
+            field,
+            control,
+            errors,
+            disabled: allDisabled || isFieldDisabled(field),
+            dsUid,
+            watchedValues,
+            fieldById,
+            celContext,
+            setValue
+          }
+        )), showHeaders && /* @__PURE__ */ React__default.default.createElement(
+          AuthorizationHeaderField,
+          {
+            headersFieldKey: useDatasourceSchema.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 = useDatasourceSchema.resolveGroups(schema);
+    const requiredGroup = useDatasourceSchema.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 ? useDatasourceSchema.formKey(targetField) : targetId, value: val };
+        })
+      }));
+      result.push({ sourceKey: useDatasourceSchema.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[useDatasourceSchema.formKey(field)] = field.defaultValue;
+        }
+      }
+      const merged = { ...defaults, ...result.values };
+      const virtualValues = useDatasourceSchema.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 = useDatasourceSchema.getWatchedValue(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 = useDatasourceSchema.parseDependsOn(ov.when);
+        if (!parsed) {
+          return null;
+        }
+        const depField = fieldById.get(parsed.field);
+        return {
+          depKey: depField ? useDatasourceSchema.formKey(depField) : parsed.field,
+          depValue: parsed.value,
+          negate: parsed.negate,
+          defaultValue: ov.defaultValue
+        };
+      }).filter(Boolean);
+      if (ovs.length > 0) {
+        result.push({ targetKey: useDatasourceSchema.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 = useDatasourceSchema.getWatchedValue(watchedValues, ov.depKey)) != null ? _a : "");
+        const trackKey = `${targetKey}::${ov.depKey}`;
+        const prevDepVal = prevOverrideDepRef.current[trackKey];
+        if (currentDepVal === prevDepVal) {
+          continue;
+        }
+        prevOverrideDepRef.current[trackKey] = currentDepVal;
+        const active = useDatasourceSchema.evaluateDependsOn({ value: ov.depValue, negate: ov.negate }, currentDepVal);
+        const wasActive = prevDepVal !== void 0 && useDatasourceSchema.evaluateDependsOn({ value: ov.depValue, negate: ov.negate }, prevDepVal);
+        if (active) {
+          setValue(targetKey, ov.defaultValue);
+        } else if (wasActive && fieldDefault !== void 0) {
+          setValue(targetKey, fieldDefault);
+        }
+      }
+    }
+  }, [watchedValues, fieldsWithOverrideDefaults, initializing, setValue]);
+  const celContext = React.useMemo(() => {
+    const ctx = {};
+    for (const f of fieldById.values()) {
+      const fk = useDatasourceSchema.formKey(f);
+      const val = useDatasourceSchema.getWatchedValue(watchedValues, fk);
+      if (val !== void 0) {
+        const parts = f.id.split(".");
+        let current = ctx;
+        for (let i = 0; i < parts.length - 1; i++) {
+          if (!(parts[i] in current) || typeof current[parts[i]] !== "object" || current[parts[i]] === null) {
+            current[parts[i]] = {};
+          }
+          current = current[parts[i]];
+        }
+        current[parts[parts.length - 1]] = val;
+      }
+    }
+    return ctx;
+  }, [watchedValues, fieldById]);
+  const isFieldVisible = React.useCallback(
+    (field) => {
+      function check(f, visited) {
+        var _a;
+        if (f.kind === "virtual" && !f.ui) {
+          return false;
+        }
+        if ((_a = f.tags) == null ? void 0 : _a.some((t) => t.startsWith("managed-by:"))) {
+          return false;
+        }
+        if (!f.dependsOn) {
+          return true;
+        }
+        const refs = useDatasourceSchema.extractFieldRefs(f.dependsOn);
+        for (const ref of refs) {
+          const depField = fieldById.get(ref);
+          if (depField && !visited.has(depField.id)) {
+            visited.add(f.id);
+            if (!check(depField, visited)) {
+              return false;
+            }
+          }
+        }
+        return useDatasourceSchema.evaluateCelExpression(f.dependsOn, celContext);
+      }
+      return check(field, /* @__PURE__ */ new Set());
+    },
+    [celContext, 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[useDatasourceSchema.formKey(field)] = field.defaultValue;
+          }
+        }
+        const merged = { ...defaults, ...refreshed.values };
+        const virtualValues = useDatasourceSchema.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[useDatasourceSchema.formKey(field)]) {
+          return false;
+        }
+        if (isFieldRequired(field, watchedValues, fieldById, celContext)) {
+          const val = useDatasourceSchema.getWatchedValue(watchedValues, useDatasourceSchema.formKey(field));
+          if (val === SECURE_FIELD_CONFIGURED) {
+            continue;
+          }
+          if (val === void 0 || val === null || val === "") {
+            return false;
+          }
+        }
+      }
+      return true;
+    },
+    [errors, watchedValues, fieldById, celContext, isFieldVisible]
+  );
+  const isFieldDisabled = React.useCallback(
+    (field) => {
+      if (!field.disabledWhen) {
+        return false;
+      }
+      return useDatasourceSchema.evaluateCelExpression(field.disabledWhen, celContext);
+    },
+    [celContext]
+  );
+  const groupHasData = React.useCallback(
+    (group) => {
+      for (const field of group.fields) {
+        const val = useDatasourceSchema.getWatchedValue(watchedValues, useDatasourceSchema.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,
+    celContext,
+    // State
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    // Callbacks
+    isFieldVisible,
+    isFieldDisabled,
+    isGroupValid,
+    groupHasData,
+    onSubmit,
+    setValue
+  };
+}
+
+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,
+    celContext,
+    initializing,
+    fetchError,
+    submitting,
+    submitError,
+    readOnly,
+    isFieldVisible,
+    isFieldDisabled,
+    onSubmit,
+    setValue
+  } = 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[useDatasourceSchema.formKey(field)]) {
+        return false;
+      }
+      if (isFieldRequired(field, watchedValues, fieldById, celContext)) {
+        const val = useDatasourceSchema.getWatchedValue(watchedValues, useDatasourceSchema.formKey(field));
+        if (val === SECURE_FIELD_CONFIGURED) {
+          continue;
+        }
+        if (val === void 0 || val === null || val === "") {
+          return false;
+        }
+      }
+    }
+    return true;
+  }, [currentResolved, errors, visibleFieldsForStep, watchedValues, fieldById, celContext]);
+  const goNext = React.useCallback(async () => {
+    if (!currentResolved) {
+      return;
+    }
+    if (!readOnly) {
+      const visibleKeys = visibleFieldsForStep.map((f) => useDatasourceSchema.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: useDatasourceSchema.formKey(field),
+      field,
+      control,
+      errors,
+      disabled: allDisabled || isFieldDisabled(field),
+      dsUid,
+      watchedValues,
+      fieldById,
+      celContext,
+      setValue
+    }
+  )), (currentResolved.group.id === "_required" || currentResolved.group.id === "auth") && httpHeadersField && /* @__PURE__ */ React__default.default.createElement(
+    AuthorizationHeaderField,
+    {
+      headersFieldKey: useDatasourceSchema.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);
@@ -8529,7 +11114,7 @@ class CustomHeadersSettings extends React.PureComponent {
         return {
           id: lodash.uniqueId(),
           name: jsonData[key],
-          value: secureJsonData !== undefined ? secureJsonData[key] : "",
+          value: secureJsonData !== void 0 ? secureJsonData[key] : "",
           configured: secureJsonFields && secureJsonFields[`httpHeaderValue${index + 1}`] || false
         };
       })
@@ -8600,8 +11185,8 @@ class QueryModellerBase {
   hasBinaryOp(query) {
     return query.operations.find((op) => {
       const def = this.getOperationDefinition(op.id);
-      return (def == null ? undefined : def.category) === BINARY_OPERATIONS_KEY;
-    }) !== undefined;
+      return (def == null ? void 0 : def.category) === BINARY_OPERATIONS_KEY;
+    }) !== void 0;
   }
 }
 
@@ -8624,7 +11209,7 @@ function LabelFilterItem({
   const [labelValuesMenuOpen, setLabelValuesMenuOpen] = React.useState(false);
   const isMultiSelect = (operator = item.op) => {
     var _a2;
-    return (_a2 = operators.find((op) => op.label === operator)) == null ? undefined : _a2.isMultiValue;
+    return (_a2 = operators.find((op) => op.label === operator)) == null ? void 0 : _a2.isMultiValue;
   };
   const getSelectOptionsFromString = (item2) => {
     if (item2) {
@@ -8637,12 +11222,12 @@ function LabelFilterItem({
   };
   const getOptions = () => {
     const labelValues = state.labelValues ? [...state.labelValues] : [];
-    const selectedOptions = getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption);
+    const selectedOptions = getSelectOptionsFromString(item == null ? void 0 : item.value).map(data.toOption);
     return lodash.uniqBy([...selectedOptions, ...labelValues], "value");
   };
   const isConflicting = isConflictingLabelFilter(item, items);
   const { current: id } = React.useRef(uuid.v4());
-  return /* @__PURE__ */ React__default.default.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" }, /* @__PURE__ */ React__default.default.createElement(ui.InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : undefined }, /* @__PURE__ */ React__default.default.createElement(InputGroup, null, /* @__PURE__ */ React__default.default.createElement(
+  return /* @__PURE__ */ React__default.default.createElement("div", { "data-testid": "visual-query-builder-dimensions-filter-item" }, /* @__PURE__ */ React__default.default.createElement(ui.InlineField, { error: CONFLICTING_LABEL_FILTER_ERROR_MESSAGE, invalid: isConflicting ? true : void 0 }, /* @__PURE__ */ React__default.default.createElement(InputGroup, null, /* @__PURE__ */ React__default.default.createElement(
     ui.Select,
     {
       placeholder: "Select label",
@@ -8655,7 +11240,7 @@ function LabelFilterItem({
         setState({ isLoadingLabelNames: true });
         const labelNames = await onGetLabelNames(item);
         setLabelNamesMenuOpen(true);
-        setState({ labelNames, isLoadingLabelNames: undefined });
+        setState({ labelNames, isLoadingLabelNames: void 0 });
       },
       onCloseMenu: () => {
         setLabelNamesMenuOpen(false);
@@ -8687,7 +11272,7 @@ function LabelFilterItem({
           onChange({
             ...item,
             op: change.value,
-            value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? undefined : item.value)[0]
+            value: isMultiSelect(change.value) ? item.value : getSelectOptionsFromString(item == null ? void 0 : item.value)[0]
           });
         }
       },
@@ -8700,7 +11285,7 @@ function LabelFilterItem({
       "data-testid": e2eSelectors.selectors.components.QueryBuilder.valueSelect,
       inputId: `visual-query-builder-dimensions-filter-item-value-${id}`,
       width: "auto",
-      value: isMultiSelect() ? getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption) : getSelectOptionsFromString(item == null ? undefined : item.value).map(data.toOption)[0],
+      value: isMultiSelect() ? getSelectOptionsFromString(item == null ? void 0 : item.value).map(data.toOption) : getSelectOptionsFromString(item == null ? void 0 : item.value).map(data.toOption)[0],
       allowCustomValue: true,
       onOpenMenu: async () => {
         setState({ isLoadingLabelValues: true });
@@ -8708,7 +11293,7 @@ function LabelFilterItem({
         setState({
           ...state,
           labelValues,
-          isLoadingLabelValues: undefined
+          isLoadingLabelValues: void 0
         });
         setLabelValuesMenuOpen(true);
       },
@@ -8732,9 +11317,9 @@ function LabelFilterItem({
             if (change2.value) {
               return change2.value;
             } else {
-              return undefined;
+              return void 0;
             }
-          }).filter((val) => val !== undefined).join(multiValueSeparator);
+          }).filter((val) => val !== void 0).join(multiValueSeparator);
           onChange({ ...item, value: changes, op: (_b = item.op) != null ? _b : defaultOp });
         }
       },
@@ -8761,10 +11346,10 @@ function isConflictingLabelFilter(newLabel, labels) {
   );
   const conflict = candidates.some((candidate) => {
     var _a, _b;
-    if (operationIsNegative && ((_a = candidate == null ? undefined : candidate.op) == null ? undefined : _a.toString().startsWith("!")) === false) {
+    if (operationIsNegative && ((_a = candidate == null ? void 0 : candidate.op) == null ? void 0 : _a.toString().startsWith("!")) === false) {
       return true;
     }
-    if (operationIsNegative === false && ((_b = candidate == null ? undefined : candidate.op) == null ? undefined : _b.toString().startsWith("!"))) {
+    if (operationIsNegative === false && ((_b = candidate == null ? void 0 : candidate.op) == null ? void 0 : _b.toString().startsWith("!"))) {
       return true;
     }
     return false;
@@ -8793,7 +11378,7 @@ function LabelFilters({
   const onLabelsChange = (newItems) => {
     setItems(newItems);
     const newLabels = newItems.filter(
-      (item) => item.label !== undefined && item.value !== undefined
+      (item) => item.label !== void 0 && item.value !== void 0
     );
     if (!lodash.isEqual(newLabels, labelsFilters)) {
       onChange(newLabels);
@@ -8834,7 +11419,7 @@ function LabelFilters({
 
 function OperationExplainedBox({ title, stepNumber, markdown, children }) {
   const styles = ui.useStyles2(getStyles$b);
-  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.box }, stepNumber !== undefined && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.header }, /* @__PURE__ */ React__default.default.createElement("span", null, title)), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React__default.default.createElement("div", { dangerouslySetInnerHTML: { __html: data.renderMarkdown(markdown) } }), children)));
+  return /* @__PURE__ */ React__default.default.createElement("div", { className: styles.box }, stepNumber !== void 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.header }, /* @__PURE__ */ React__default.default.createElement("span", null, title)), /* @__PURE__ */ React__default.default.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React__default.default.createElement("div", { dangerouslySetInnerHTML: { __html: data.renderMarkdown(markdown) } }), children)));
 }
 const getStyles$b = (theme) => {
   return {
@@ -9077,7 +11662,7 @@ function SimpleInputParamEditor(props) {
     ui.AutoSizeInput,
     {
       id: getOperationParamId(props.operationId, props.index),
-      defaultValue: (_a = props.value) == null ? undefined : _a.toString(),
+      defaultValue: (_a = props.value) == null ? void 0 : _a.toString(),
       minWidth: props.paramDef.minWidth,
       placeholder: props.paramDef.placeholder,
       title: props.paramDef.description,
@@ -9111,7 +11696,7 @@ function SelectInputParamEditor({
   var _a, _b;
   const styles = ui.useStyles2(getStyles$8);
   let selectOptions = paramDef.options;
-  if (!((_a = selectOptions[0]) == null ? undefined : _a.label)) {
+  if (!((_a = selectOptions[0]) == null ? void 0 : _a.label)) {
     selectOptions = paramDef.options.map((option) => ({
       label: option.toString(),
       value: option
@@ -9416,9 +12001,9 @@ function OperationEditor({
   }
   const isInvalid = (isDragging) => {
     if (isDragging) {
-      return undefined;
+      return void 0;
     }
-    return isConflicting ? true : undefined;
+    return isConflicting ? true : void 0;
   };
   return /* @__PURE__ */ React__default.default.createElement(dnd.Draggable, { draggableId: `operation-${index}`, index }, (provided, snapshot) => /* @__PURE__ */ React__default.default.createElement(
     ui.InlineField,
@@ -9572,7 +12157,7 @@ function useOperationsHighlight(operations) {
   } else {
     newOps = operations.map((op, index) => {
       var _a;
-      return !isSameOp(op.id, (_a = prevOperations[index]) == null ? undefined : _a.id);
+      return !isSameOp(op.id, (_a = prevOperations[index]) == null ? void 0 : _a.id);
     });
   }
   return newOps;
@@ -9644,8 +12229,8 @@ function OperationListExplained({
       "div",
       {
         key: index,
-        onMouseEnter: () => onMouseEnter == null ? undefined : onMouseEnter(op, index),
-        onMouseLeave: () => onMouseLeave == null ? undefined : onMouseLeave(op, index)
+        onMouseEnter: () => onMouseEnter == null ? void 0 : onMouseEnter(op, index),
+        onMouseLeave: () => onMouseLeave == null ? void 0 : onMouseLeave(op, index)
       },
       /* @__PURE__ */ React__default.default.createElement(
         OperationExplainedBox,
@@ -9687,15 +12272,15 @@ const QueryBuilderHints = ({
   const hints = React.useMemo(() => {
     var _a;
     const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
-    const hints2 = (_a = datasource.getQueryHints) == null ? undefined : _a.call(datasource, dataQuery, (data == null ? undefined : data.series) || []).filter((hint) => {
+    const hints2 = (_a = datasource.getQueryHints) == null ? void 0 : _a.call(datasource, dataQuery, (data == null ? void 0 : data.series) || []).filter((hint) => {
       var _a2;
-      return (_a2 = hint.fix) == null ? undefined : _a2.action;
+      return (_a2 = hint.fix) == null ? void 0 : _a2.action;
     });
     return hints2 != null ? hints2 : [];
   }, [datasource, visualQuery, data, queryModeller, buildDataQueryFromQueryString]);
   return /* @__PURE__ */ React__default.default.createElement(React__default.default.Fragment, null, hints.length > 0 && /* @__PURE__ */ React__default.default.createElement("div", { className: styles.container }, hints.map((hint) => {
     var _a, _b, _c, _d;
-    return /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? undefined : _a.label}`, key: hint.type }, /* @__PURE__ */ React__default.default.createElement(
+    return /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: `${hint.label} ${(_a = hint.fix) == null ? void 0 : _a.label}`, key: hint.type }, /* @__PURE__ */ React__default.default.createElement(
       ui.Button,
       {
         onClick: () => {
@@ -9704,9 +12289,9 @@ const QueryBuilderHints = ({
             hint: hint.type,
             datasourceType: datasource.type
           });
-          if ((_a2 = hint == null ? undefined : hint.fix) == null ? undefined : _a2.action) {
+          if ((_a2 = hint == null ? void 0 : hint.fix) == null ? void 0 : _a2.action) {
             const dataQuery = buildDataQueryFromQueryString(queryModeller.renderQuery(visualQuery));
-            const newQuery = (_b2 = datasource.modifyQuery) == null ? undefined : _b2.call(datasource, dataQuery, hint.fix.action);
+            const newQuery = (_b2 = datasource.modifyQuery) == null ? void 0 : _b2.call(datasource, dataQuery, hint.fix.action);
             if (newQuery) {
               const newVisualQuery = buildVisualQueryFromString(
                 (_c2 = buildQueryStringFromDataQuery(newQuery)) != null ? _c2 : ""
@@ -9720,7 +12305,7 @@ const QueryBuilderHints = ({
         className: styles.hint
       },
       "hint: ",
-      ((_b = hint.fix) == null ? undefined : _b.title) || ((_d = (_c = hint.fix) == null ? undefined : _c.action) == null ? undefined : _d.type.toLowerCase().replace("_", " "))
+      ((_b = hint.fix) == null ? void 0 : _b.title) || ((_d = (_c = hint.fix) == null ? void 0 : _c.action) == null ? void 0 : _d.type.toLowerCase().replace("_", " "))
     ));
   })));
 };
@@ -9843,6 +12428,34 @@ const convertUnits = (queryStats) => {
   return text + suffix;
 };
 
+exports.ROOT_CONFIG_FIELDS = useDatasourceSchema.ROOT_CONFIG_FIELDS;
+exports.buildCelContext = useDatasourceSchema.buildCelContext;
+exports.buildCloneDatasourcePayload = useDatasourceSchema.buildCloneDatasourcePayload;
+exports.buildCreateDatasourcePayload = useDatasourceSchema.buildCreateDatasourcePayload;
+exports.buildUpdateDatasourcePayload = useDatasourceSchema.buildUpdateDatasourcePayload;
+exports.clearExpressionCache = useDatasourceSchema.clearExpressionCache;
+exports.computeVirtualFieldValues = useDatasourceSchema.computeVirtualFieldValues;
+exports.configToYaml = useDatasourceSchema.configToYaml;
+exports.datasourceToProvisioningYaml = useDatasourceSchema.datasourceToProvisioningYaml;
+exports.evaluateCelDirect = useDatasourceSchema.evaluateCelDirect;
+exports.evaluateCelExpression = useDatasourceSchema.evaluateCelExpression;
+exports.evaluateComputedRead = useDatasourceSchema.evaluateComputedRead;
+exports.evaluateDependsOn = useDatasourceSchema.evaluateDependsOn;
+exports.extractFieldRefs = useDatasourceSchema.extractFieldRefs;
+exports.fetchConfigSchema = useDatasourceSchema.fetchConfigSchema;
+exports.formKey = useDatasourceSchema.formKey;
+exports.formatYamlDiff = useDatasourceSchema.formatYamlDiff;
+exports.generateLLMHint = useDatasourceSchema.generateLLMHint;
+exports.generateTroubleshootingFields = useDatasourceSchema.generateTroubleshootingFields;
+exports.getConfigSchema = useDatasourceSchema.getConfigSchema;
+exports.getWatchedValue = useDatasourceSchema.getWatchedValue;
+exports.isValidCelExpression = useDatasourceSchema.isValidCelExpression;
+exports.parseDependsOn = useDatasourceSchema.parseDependsOn;
+exports.resolveActiveOverride = useDatasourceSchema.resolveActiveOverride;
+exports.resolveGroups = useDatasourceSchema.resolveGroups;
+exports.resolveRequiredFieldsGroup = useDatasourceSchema.resolveRequiredFieldsGroup;
+exports.toProvisioningYaml = useDatasourceSchema.toProvisioningYaml;
+exports.useDatasourceSchema = useDatasourceSchema.useDatasourceSchema;
 exports.AccessoryButton = AccessoryButton;
 exports.AdvancedHttpSettings = AdvancedHttpSettings;
 exports.Auth = Auth;
@@ -9862,6 +12475,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;
@@ -9915,5 +12530,7 @@ exports.formatDate = formatDate;
 exports.getStandardSQLCompletionProvider = getStandardSQLCompletionProvider;
 exports.grafanaStandardSQLLanguage = language;
 exports.grafanaStandardSQLLanguageConf = conf;
+exports.resolvePluginName = resolvePluginName;
 exports.toOption = toOption;
+exports.useHealthChecks = useHealthChecks;
 //# sourceMappingURL=index.cjs.map