@grafana/plugin-ui 0.14.0-dev.1 → 0.14.0

package/dist/esm/components/QueryEditor/RunQueryButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAA,GAAY,yBAAA;AAAA,EACZ,YAAA,GAAe,KAAA;AAAA,EACf,YAAA,GAAe,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAA,GAAW,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAAA,KAA2B;AACzB,EAAA,IAAI,IAAA,GAA6B,eAAe,sBAAA,GAAyB,MAAA;AACzE,EAAA,IAAI,YAAA,EAAc;AAChB,IAAA,IAAA,GAAO,eAAA;AAAA,EACT;AAEA,EAAA,MAAM,SAAA,mBACJ,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,SAAA;AAAA,MACZ,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAQ,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAA,IAAY,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAA,EAAa;AAAA,KAAA;AAAA,IACd;AAAA,GAED;AAGF,EAAA,OAAO,YAAA,mBACL,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAM,OAAA;AAAA,MACN,SAAA,EAAU,KAAA;AAAA,MACV,SACE,mBAAA,IAAA,IAAA,GAAA,mBAAA,mBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAE,oEACgD,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,IAAG,GAAE,wCAExD;AAAA,KAAA;AAAA,IAIH;AAAA,GACH,GAEA,SAAA;AAEJ;;;;"}
+{"version":3,"file":"RunQueryButton.js","sources":["../../../../src/components/QueryEditor/RunQueryButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Button, type IconName, type PopoverContent, Tooltip } from '@grafana/ui';\n\ntype RunQueryButtonProps = {\n  ariaLabel?: string;\n  queryInvalid?: boolean;\n  invalidQueryTooltip?: PopoverContent;\n  disabled?: boolean;\n  queryRunning?: boolean;\n  onClick: () => void;\n  dataTestId?: string;\n};\n\nexport const RunQueryButton = ({\n  ariaLabel = 'Query editor Run button',\n  queryRunning = false,\n  queryInvalid = false,\n  invalidQueryTooltip,\n  disabled = false,\n  onClick,\n  dataTestId,\n}: RunQueryButtonProps) => {\n  let icon: IconName | undefined = queryInvalid ? 'exclamation-triangle' : undefined;\n  if (queryRunning) {\n    icon = 'fa fa-spinner';\n  }\n\n  const RunButton = (\n    <Button\n      aria-label={ariaLabel}\n      size=\"sm\"\n      variant=\"secondary\"\n      icon={icon}\n      disabled={disabled || queryRunning}\n      onClick={onClick}\n      data-testid={dataTestId}\n    >\n      Run query\n    </Button>\n  );\n\n  return queryInvalid ? (\n    <Tooltip\n      theme=\"error\"\n      placement=\"top\"\n      content={\n        invalidQueryTooltip ?? (\n          <>\n            Your query is invalid. Check below for details. <br />\n            However, you can still run this query.\n          </>\n        )\n      }\n    >\n      {RunButton}\n    </Tooltip>\n  ) : (\n    RunButton\n  );\n};\n"],"names":[],"mappings":";;;AAaO,MAAM,iBAAiB,CAAC;AAAA,EAC7B,SAAY,GAAA,yBAAA;AAAA,EACZ,YAAe,GAAA,KAAA;AAAA,EACf,YAAe,GAAA,KAAA;AAAA,EACf,mBAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,OAAA;AAAA,EACA;AACF,CAA2B,KAAA;AACzB,EAAI,IAAA,IAAA,GAA6B,eAAe,sBAAyB,GAAA,SAAA;AACzE,EAAA,IAAI,YAAc,EAAA;AAChB,IAAO,IAAA,GAAA,eAAA;AAAA;AAGT,EAAA,MAAM,SACJ,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,YAAY,EAAA,SAAA;AAAA,MACZ,IAAK,EAAA,IAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,IAAA;AAAA,MACA,UAAU,QAAY,IAAA,YAAA;AAAA,MACtB,OAAA;AAAA,MACA,aAAa,EAAA;AAAA,KAAA;AAAA,IACd;AAAA,GAED;AAGF,EAAA,OAAO,YACL,mBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,OAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,OAAA;AAAA,MACN,SAAU,EAAA,KAAA;AAAA,MACV,SACE,mBACE,IAAA,IAAA,GAAA,mBAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAE,oEACiD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA,IAAG,GAAE,wCAExD;AAAA,KAAA;AAAA,IAIH;AAAA,GAGH,GAAA,SAAA;AAEJ;;;;"}

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = ({ v = 0, h = 0, layout = 'block' }: SpaceProps) => {\n  const styles = useStyles2(getStyles, v, h, layout);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nconst getStyles = (theme: GrafanaTheme2, v: number, h: number, layout: 'block' | 'inline') => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(h ?? 0),\n      paddingBottom: theme.spacing(v ?? 0),\n    },\n    layout === 'inline' && {\n      display: 'inline-block',\n    },\n    layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n});\n"],"names":["getStyles"],"mappings":";;;;;AAWO,MAAM,KAAA,GAAQ,CAAC,EAAE,CAAA,GAAI,GAAG,CAAA,GAAI,CAAA,EAAG,MAAA,GAAS,OAAA,EAAQ,KAAkB;AACvE,EAAA,MAAM,MAAA,GAAS,UAAA,CAAWA,WAAA,EAAW,CAAA,EAAG,GAAG,MAAM,CAAA;AAEjD,EAAA,2CAAQ,MAAA,EAAA,EAAK,SAAA,EAAW,EAAA,CAAG,MAAA,CAAO,OAAO,CAAA,EAAG,CAAA;AAC9C;AAEA,MAAMA,WAAA,GAAY,CAAC,KAAA,EAAsB,CAAA,EAAW,GAAW,MAAA,MAAgC;AAAA,EAC7F,SAAS,GAAA,CAAI;AAAA,IACX;AAAA,MACE,YAAA,EAAc,KAAA,CAAM,OAAA,CAAQ,CAAA,IAAA,IAAA,GAAA,CAAA,GAAK,CAAC,CAAA;AAAA,MAClC,aAAA,EAAe,KAAA,CAAM,OAAA,CAAQ,CAAA,IAAA,IAAA,GAAA,CAAA,GAAK,CAAC;AAAA,KACrC;AAAA,IACA,WAAW,QAAA,IAAY;AAAA,MACrB,OAAA,EAAS;AAAA,KACX;AAAA,IACA,WAAW,OAAA,IAAW;AAAA,MACpB,OAAA,EAAS;AAAA;AACX,GACD;AACH,CAAA,CAAA;;;;"}
+{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = ({ v = 0, h = 0, layout = 'block' }: SpaceProps) => {\n  const styles = useStyles2(getStyles, v, h, layout);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nconst getStyles = (theme: GrafanaTheme2, v: number, h: number, layout: 'block' | 'inline') => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(h ?? 0),\n      paddingBottom: theme.spacing(v ?? 0),\n    },\n    layout === 'inline' && {\n      display: 'inline-block',\n    },\n    layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n});\n"],"names":[],"mappings":";;;;;AAWa,MAAA,KAAA,GAAQ,CAAC,EAAE,CAAA,GAAI,GAAG,CAAI,GAAA,CAAA,EAAG,MAAS,GAAA,OAAA,EAA0B,KAAA;AACvE,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,SAAW,EAAA,CAAA,EAAG,GAAG,MAAM,CAAA;AAEjD,EAAA,2CAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,MAAM,SAAY,GAAA,CAAC,KAAsB,EAAA,CAAA,EAAW,GAAW,MAAgC,MAAA;AAAA,EAC7F,SAAS,GAAI,CAAA;AAAA,IACX;AAAA,MACE,YAAc,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,IAAA,IAAA,GAAA,CAAA,GAAK,CAAC,CAAA;AAAA,MAClC,aAAe,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,IAAA,IAAA,GAAA,CAAA,GAAK,CAAC;AAAA,KACrC;AAAA,IACA,WAAW,QAAY,IAAA;AAAA,MACrB,OAAS,EAAA;AAAA,KACX;AAAA,IACA,WAAW,OAAW,IAAA;AAAA,MACpB,OAAS,EAAA;AAAA;AACX,GACD;AACH,CAAA,CAAA;;;;"}

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

@@ -3,7 +3,6 @@ import { useAsync } from 'react-use';
 import { toOption } from '@grafana/data';
 import { Select } from '@grafana/ui';
 import './types.js';
-import 'lodash';
 
 const TableSelector = ({
   db,

package/dist/esm/components/QueryEditor/TableSelector.js.map

@@ -1 +1 @@
-{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps } from './types';\nimport { type QueryWithDefaults } from './defaults';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string; // When catalog is present, this represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n}\n\nexport const TableSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  className,\n  onChange,\n  inputId,\n  enableCatalogs,\n}: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset && !catalog) {\n      return [];\n    }\n\n    // When catalogs are enabled, we need both catalog and dataset (acting as schema) to load tables\n    if (enableCatalogs && (!catalog || !dataset)) {\n      return [];\n    }\n\n    // db.tables(dataset, catalog)\n    // dataset acts as schema when catalog is present, otherwise it's the dataset\n    const tables = await db.tables(dataset, catalog);\n    return tables.map(toOption);\n  }, [dataset, catalog, enableCatalogs]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;;AAkBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,KAA0B;AACxB,EAAA,MAAM,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAA,IAAI,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AACxB,MAAA,OAAO,EAAC;AAAA,IACV;AAGA,IAAA,IAAI,cAAA,KAAmB,CAAC,OAAA,IAAW,CAAC,OAAA,CAAA,EAAU;AAC5C,MAAA,OAAO,EAAC;AAAA,IACV;AAIA,IAAA,MAAM,MAAA,GAAS,MAAM,EAAA,CAAG,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAA,OAAO,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,EAC5B,CAAA,EAAG,CAAC,OAAA,EAAS,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA,EAAW,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAA,CAAM,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAA,CAAM,OAAA;AAAA,MACjB,gBAAA,EAAkB,IAAA;AAAA,MAClB,WAAA,EAAa,KAAA,CAAM,OAAA,GAAU,gBAAA,GAAmB;AAAA;AAAA,GAClD;AAEJ;;;;"}
+{"version":3,"file":"TableSelector.js","sources":["../../../../src/components/QueryEditor/TableSelector.tsx"],"sourcesContent":["import React from 'react';\nimport { useAsync } from 'react-use';\nimport { type SelectableValue, toOption } from '@grafana/data';\nimport { Select } from '@grafana/ui';\nimport { type DB, type ResourceSelectorProps, type QueryWithDefaults } from './types';\n\ninterface TableSelectorProps extends ResourceSelectorProps {\n  db: DB;\n  dataset?: string; // When catalog is present, this represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  value: string | null;\n  query: QueryWithDefaults;\n  onChange: (v: SelectableValue) => void;\n  inputId?: string;\n  enableCatalogs?: boolean;\n}\n\nexport const TableSelector = ({\n  db,\n  dataset,\n  catalog,\n  value,\n  className,\n  onChange,\n  inputId,\n  enableCatalogs,\n}: TableSelectorProps) => {\n  const state = useAsync(async () => {\n    if (!dataset && !catalog) {\n      return [];\n    }\n\n    // When catalogs are enabled, we need both catalog and dataset (acting as schema) to load tables\n    if (enableCatalogs && (!catalog || !dataset)) {\n      return [];\n    }\n\n    // db.tables(dataset, catalog)\n    // dataset acts as schema when catalog is present, otherwise it's the dataset\n    const tables = await db.tables(dataset, catalog);\n    return tables.map(toOption);\n  }, [dataset, catalog, enableCatalogs]);\n\n  return (\n    <Select\n      inputId={inputId}\n      className={className}\n      aria-label=\"Table selector\"\n      value={value}\n      options={state.value}\n      onChange={onChange}\n      isLoading={state.loading}\n      menuShouldPortal={true}\n      placeholder={state.loading ? 'Loading tables' : 'Select table'}\n    />\n  );\n};\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,gBAAgB,CAAC;AAAA,EAC5B,EAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAA0B,KAAA;AACxB,EAAM,MAAA,KAAA,GAAQ,SAAS,YAAY;AACjC,IAAI,IAAA,CAAC,OAAW,IAAA,CAAC,OAAS,EAAA;AACxB,MAAA,OAAO,EAAC;AAAA;AAIV,IAAA,IAAI,cAAmB,KAAA,CAAC,OAAW,IAAA,CAAC,OAAU,CAAA,EAAA;AAC5C,MAAA,OAAO,EAAC;AAAA;AAKV,IAAA,MAAM,MAAS,GAAA,MAAM,EAAG,CAAA,MAAA,CAAO,SAAS,OAAO,CAAA;AAC/C,IAAO,OAAA,MAAA,CAAO,IAAI,QAAQ,CAAA;AAAA,GACzB,EAAA,CAAC,OAAS,EAAA,OAAA,EAAS,cAAc,CAAC,CAAA;AAErC,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,OAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAW,EAAA,gBAAA;AAAA,MACX,KAAA;AAAA,MACA,SAAS,KAAM,CAAA,KAAA;AAAA,MACf,QAAA;AAAA,MACA,WAAW,KAAM,CAAA,OAAA;AAAA,MACjB,gBAAkB,EAAA,IAAA;AAAA,MAClB,WAAA,EAAa,KAAM,CAAA,OAAA,GAAU,gBAAmB,GAAA;AAAA;AAAA,GAClD;AAEJ;;;;"}

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

@@ -1,18 +1,18 @@
 import { EditorMode, QueryFormat } from './types.js';
-import { setGroupByField, createFunctionField } from './utils/sql.utils.js';
+import { createFunctionField, setGroupByField } from './utils/sql.utils.js';
 
 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) {
+  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 ? 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) || "",
+    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 ? void 0 : q.sql) || {
+    sql: (q == null ? undefined : q.sql) || {
       columns: [createFunctionField()],
       groupBy: [setGroupByField()],
       limit: 50

package/dist/esm/components/QueryEditor/defaults.js.map

@@ -1 +1 @@
-{"version":3,"file":"defaults.js","sources":["../../../../src/components/QueryEditor/defaults.ts"],"sourcesContent":["import { EditorMode, QueryFormat, type SQLQuery } from './types';\nimport { createFunctionField, setGroupByField } from './utils/sql.utils';\n\nexport function applyQueryDefaults(q?: SQLQuery): SQLQuery {\n  let editorMode = q?.editorMode || EditorMode.Builder;\n\n  // Switching to code editor if the query was created before visual query builder was introduced.\n  if (q?.editorMode === undefined && q?.rawSql !== undefined) {\n    editorMode = EditorMode.Code;\n  }\n\n  const result: SQLQuery = {\n    ...q,\n    refId: q?.refId || 'A',\n    format: q?.format !== undefined ? q.format : QueryFormat.Table,\n    rawSql: q?.rawSql || '',\n    editorMode,\n    sql: q?.sql || {\n      columns: [createFunctionField()],\n      groupBy: [setGroupByField()],\n      limit: 50,\n    },\n  };\n\n  return result;\n}\n\nexport type QueryWithDefaults = ReturnType<typeof applyQueryDefaults>;\n"],"names":[],"mappings":";;;AAGO,SAAS,mBAAmB,CAAA,EAAwB;AACzD,EAAA,IAAI,UAAA,GAAA,CAAa,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,UAAA,KAAc,UAAA,CAAW,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,UAAA,MAAe,MAAA,IAAA,CAAa,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,YAAW,MAAA,EAAW;AAC1D,IAAA,UAAA,GAAa,UAAA,CAAW,IAAA;AAAA,EAC1B;AAEA,EAAA,MAAM,MAAA,GAAmB;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,uBAAG,KAAA,KAAS,GAAA;AAAA,IACnB,SAAQ,CAAA,IAAA,IAAA,GAAA,MAAA,GAAA,CAAA,CAAG,MAAA,MAAW,MAAA,GAAY,CAAA,CAAE,SAAS,WAAA,CAAY,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,uBAAG,MAAA,KAAU,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,uBAAG,GAAA,KAAO;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAA,EAAO;AAAA;AACT,GACF;AAEA,EAAA,OAAO,MAAA;AACT;;;;"}
+{"version":3,"file":"defaults.js","sources":["../../../../src/components/QueryEditor/defaults.ts"],"sourcesContent":["import { EditorMode, QueryFormat, type SQLQuery } from './types';\nimport { createFunctionField, setGroupByField } from './utils/sql.utils';\n\nexport function applyQueryDefaults(q?: SQLQuery): SQLQuery {\n  let editorMode = q?.editorMode || EditorMode.Builder;\n\n  // Switching to code editor if the query was created before visual query builder was introduced.\n  if (q?.editorMode === undefined && q?.rawSql !== undefined) {\n    editorMode = EditorMode.Code;\n  }\n\n  const result: SQLQuery = {\n    ...q,\n    refId: q?.refId || 'A',\n    format: q?.format !== undefined ? q.format : QueryFormat.Table,\n    rawSql: q?.rawSql || '',\n    editorMode,\n    sql: q?.sql || {\n      columns: [createFunctionField()],\n      groupBy: [setGroupByField()],\n      limit: 50,\n    },\n  };\n\n  return result;\n}\n"],"names":[],"mappings":";;;AAGO,SAAS,mBAAmB,CAAwB,EAAA;AACzD,EAAI,IAAA,UAAA,GAAA,CAAa,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,KAAc,UAAW,CAAA,OAAA;AAG7C,EAAA,IAAA,CAAI,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,UAAA,MAAe,SAAa,IAAA,CAAA,CAAA,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAG,YAAW,SAAW,EAAA;AAC1D,IAAA,UAAA,GAAa,UAAW,CAAA,IAAA;AAAA;AAG1B,EAAA,MAAM,MAAmB,GAAA;AAAA,IACvB,GAAG,CAAA;AAAA,IACH,KAAA,EAAA,CAAO,0BAAG,KAAS,KAAA,GAAA;AAAA,IACnB,SAAQ,CAAG,IAAA,IAAA,GAAA,SAAA,GAAA,CAAA,CAAA,MAAA,MAAW,SAAY,GAAA,CAAA,CAAE,SAAS,WAAY,CAAA,KAAA;AAAA,IACzD,MAAA,EAAA,CAAQ,0BAAG,MAAU,KAAA,EAAA;AAAA,IACrB,UAAA;AAAA,IACA,GAAA,EAAA,CAAK,0BAAG,GAAO,KAAA;AAAA,MACb,OAAA,EAAS,CAAC,mBAAA,EAAqB,CAAA;AAAA,MAC/B,OAAA,EAAS,CAAC,eAAA,EAAiB,CAAA;AAAA,MAC3B,KAAO,EAAA;AAAA;AACT,GACF;AAEA,EAAO,OAAA,MAAA;AACT;;;;"}

package/dist/esm/components/QueryEditor/expressions.js.map

@@ -1 +1 @@
-{"version":3,"file":"expressions.js","sources":["../../../../src/components/QueryEditor/expressions.ts"],"sourcesContent":["export enum QueryEditorPropertyType {\n  String = 'string',\n}\n\nexport interface QueryEditorProperty {\n  type: QueryEditorPropertyType;\n  name?: string;\n}\n\nexport type QueryEditorOperatorType = string | boolean | number;\ntype QueryEditorOperatorValueType = QueryEditorOperatorType | QueryEditorOperatorType[];\n\nexport interface QueryEditorOperator<T extends QueryEditorOperatorValueType> {\n  name?: string;\n  value?: T;\n}\n\nexport interface QueryEditorOperatorExpression {\n  type: QueryEditorExpressionType.Operator;\n  property: QueryEditorProperty;\n  operator: QueryEditorOperator<QueryEditorOperatorValueType>;\n}\n\nexport interface QueryEditorArrayExpression {\n  type: QueryEditorExpressionType.And | QueryEditorExpressionType.Or;\n  expressions: QueryEditorExpression[] | QueryEditorArrayExpression[];\n}\n\nexport interface QueryEditorPropertyExpression {\n  type: QueryEditorExpressionType.Property;\n  property: QueryEditorProperty;\n}\n\nexport enum QueryEditorExpressionType {\n  Property = 'property',\n  Operator = 'operator',\n  Or = 'or',\n  And = 'and',\n  GroupBy = 'groupBy',\n  Function = 'function',\n  FunctionParameter = 'functionParameter',\n}\n\nexport type QueryEditorExpression =\n  | QueryEditorArrayExpression\n  | QueryEditorPropertyExpression\n  | QueryEditorGroupByExpression\n  | QueryEditorFunctionExpression\n  | QueryEditorFunctionParameterExpression\n  | QueryEditorOperatorExpression;\n\nexport interface QueryEditorGroupByExpression {\n  type: QueryEditorExpressionType.GroupBy;\n  property: QueryEditorProperty;\n}\n\nexport interface QueryEditorFunctionExpression {\n  type: QueryEditorExpressionType.Function;\n  name?: string;\n  parameters?: QueryEditorFunctionParameterExpression[];\n}\n\nexport interface QueryEditorFunctionParameterExpression {\n  type: QueryEditorExpressionType.FunctionParameter;\n  name?: string;\n}\n"],"names":["QueryEditorPropertyType","QueryEditorExpressionType"],"mappings":"AAAO,IAAK,uBAAA,qBAAAA,wBAAAA,KAAL;AACL,EAAAA,yBAAA,QAAA,CAAA,GAAS,QAAA;AADC,EAAA,OAAAA,wBAAAA;AAAA,CAAA,EAAA,uBAAA,IAAA,EAAA;AAiCL,IAAK,yBAAA,qBAAAC,0BAAAA,KAAL;AACL,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,2BAAA,IAAA,CAAA,GAAK,IAAA;AACL,EAAAA,2BAAA,KAAA,CAAA,GAAM,KAAA;AACN,EAAAA,2BAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,2BAAA,UAAA,CAAA,GAAW,UAAA;AACX,EAAAA,2BAAA,mBAAA,CAAA,GAAoB,mBAAA;AAPV,EAAA,OAAAA,0BAAAA;AAAA,CAAA,EAAA,yBAAA,IAAA,EAAA;;;;"}
+{"version":3,"file":"expressions.js","sources":["../../../../src/components/QueryEditor/expressions.ts"],"sourcesContent":["export enum QueryEditorPropertyType {\n  String = 'string',\n}\n\nexport interface QueryEditorProperty {\n  type: QueryEditorPropertyType;\n  name?: string;\n}\n\nexport type QueryEditorOperatorType = string | boolean | number;\ntype QueryEditorOperatorValueType = QueryEditorOperatorType | QueryEditorOperatorType[];\n\nexport interface QueryEditorOperator<T extends QueryEditorOperatorValueType> {\n  name?: string;\n  value?: T;\n}\n\nexport interface QueryEditorOperatorExpression {\n  type: QueryEditorExpressionType.Operator;\n  property: QueryEditorProperty;\n  operator: QueryEditorOperator<QueryEditorOperatorValueType>;\n}\n\nexport interface QueryEditorArrayExpression {\n  type: QueryEditorExpressionType.And | QueryEditorExpressionType.Or;\n  expressions: QueryEditorExpression[] | QueryEditorArrayExpression[];\n}\n\nexport interface QueryEditorPropertyExpression {\n  type: QueryEditorExpressionType.Property;\n  property: QueryEditorProperty;\n}\n\nexport enum QueryEditorExpressionType {\n  Property = 'property',\n  Operator = 'operator',\n  Or = 'or',\n  And = 'and',\n  GroupBy = 'groupBy',\n  Function = 'function',\n  FunctionParameter = 'functionParameter',\n}\n\nexport type QueryEditorExpression =\n  | QueryEditorArrayExpression\n  | QueryEditorPropertyExpression\n  | QueryEditorGroupByExpression\n  | QueryEditorFunctionExpression\n  | QueryEditorFunctionParameterExpression\n  | QueryEditorOperatorExpression;\n\nexport interface QueryEditorGroupByExpression {\n  type: QueryEditorExpressionType.GroupBy;\n  property: QueryEditorProperty;\n}\n\nexport interface QueryEditorFunctionExpression {\n  type: QueryEditorExpressionType.Function;\n  name?: string;\n  parameters?: QueryEditorFunctionParameterExpression[];\n}\n\nexport interface QueryEditorFunctionParameterExpression {\n  type: QueryEditorExpressionType.FunctionParameter;\n  name?: string;\n}\n"],"names":["QueryEditorPropertyType","QueryEditorExpressionType"],"mappings":"AAAY,IAAA,uBAAA,qBAAAA,wBAAL,KAAA;AACL,EAAAA,yBAAA,QAAS,CAAA,GAAA,QAAA;AADC,EAAAA,OAAAA,wBAAAA;AAAA,CAAA,EAAA,uBAAA,IAAA,EAAA;AAiCA,IAAA,yBAAA,qBAAAC,0BAAL,KAAA;AACL,EAAAA,2BAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,2BAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,2BAAA,IAAK,CAAA,GAAA,IAAA;AACL,EAAAA,2BAAA,KAAM,CAAA,GAAA,KAAA;AACN,EAAAA,2BAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,2BAAA,UAAW,CAAA,GAAA,UAAA;AACX,EAAAA,2BAAA,mBAAoB,CAAA,GAAA,mBAAA;AAPV,EAAAA,OAAAA,0BAAAA;AAAA,CAAA,EAAA,yBAAA,IAAA,EAAA;;;;"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js

@@ -7,7 +7,15 @@ import '@grafana/data';
 import '../../SQLEditor/standardSql/language.js';
 import '../../SQLEditor/standardSql/macros.js';
 
-function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }) {
+function QueryEditorRaw({
+  children,
+  onChange,
+  query,
+  width,
+  height,
+  completionProvider,
+  language = "sql"
+}) {
   const queryRef = useRef(query);
   useEffect(() => {
     queryRef.current = query;
@@ -30,7 +38,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
   );

package/dist/esm/components/QueryEditor/query-editor-raw/QueryEditorRaw.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n};\n\nexport function QueryEditorRaw({ children, onChange, query, width, height, completionProvider }: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: formatSQL }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAgBO,SAAS,cAAA,CAAe,EAAE,QAAA,EAAU,QAAA,EAAU,OAAO,KAAA,EAAO,MAAA,EAAQ,oBAAmB,EAAU;AAEtG,EAAA,MAAM,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAA,GAAU,KAAA;AAAA,EACrB,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAA,GAAmB,WAAA;AAAA,IACvB,CAAC,QAAgB,YAAA,KAA0B;AACzC,MAAA,MAAM,QAAA,GAAW;AAAA,QACf,GAAG,QAAA,CAAS,OAAA;AAAA,QACZ,QAAA,EAAU,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,IACjC,CAAA;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAA,CAAM,MAAA;AAAA,MACb,QAAA,EAAU,gBAAA;AAAA,MACV,UAAU,EAAE,EAAA,EAAI,KAAA,EAAO,kBAAA,EAAoB,WAAW,SAAA;AAAU,KAAA;AAAA,IAE/D;AAAA,GACH;AAEJ;;;;"}
+{"version":3,"file":"QueryEditorRaw.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryEditorRaw.tsx"],"sourcesContent":["import React, { useCallback, useEffect, useRef } from 'react';\n\nimport { type SQLQuery } from '../types';\n\nimport { formatSQL } from '../utils/formatSQL';\nimport { type LanguageCompletionProvider, SQLEditor } from '../../SQLEditor';\nimport type { SqlLanguage } from 'sql-formatter';\n\ntype Props = {\n  query: SQLQuery;\n  onChange: (value: SQLQuery, processQuery: boolean) => void;\n  children?: (props: { formatQuery: () => void }) => React.ReactNode;\n  width?: number;\n  height?: number;\n  completionProvider: LanguageCompletionProvider;\n  language?: SqlLanguage;\n};\n\nexport function QueryEditorRaw({\n  children,\n  onChange,\n  query,\n  width,\n  height,\n  completionProvider,\n  language = 'sql',\n}: Props) {\n  // We need to pass query via ref to SQLEditor as onChange is executed via monacoEditor.onDidChangeModelContent callback, not onChange property\n  const queryRef = useRef<SQLQuery>(query);\n  useEffect(() => {\n    queryRef.current = query;\n  }, [query]);\n\n  const onRawQueryChange = useCallback(\n    (rawSql: string, processQuery: boolean) => {\n      const newQuery = {\n        ...queryRef.current,\n        rawQuery: true,\n        rawSql,\n      };\n      onChange(newQuery, processQuery);\n    },\n    [onChange]\n  );\n\n  return (\n    <SQLEditor\n      width={width}\n      height={height}\n      query={query.rawSql!}\n      onChange={onRawQueryChange}\n      language={{ id: 'sql', completionProvider, formatter: (q) => formatSQL(q, language) }}\n    >\n      {children}\n    </SQLEditor>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;AAkBO,SAAS,cAAe,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,kBAAA;AAAA,EACA,QAAW,GAAA;AACb,CAAU,EAAA;AAER,EAAM,MAAA,QAAA,GAAW,OAAiB,KAAK,CAAA;AACvC,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,QAAA,CAAS,OAAU,GAAA,KAAA;AAAA,GACrB,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,MAAM,gBAAmB,GAAA,WAAA;AAAA,IACvB,CAAC,QAAgB,YAA0B,KAAA;AACzC,MAAA,MAAM,QAAW,GAAA;AAAA,QACf,GAAG,QAAS,CAAA,OAAA;AAAA,QACZ,QAAU,EAAA,IAAA;AAAA,QACV;AAAA,OACF;AACA,MAAA,QAAA,CAAS,UAAU,YAAY,CAAA;AAAA,KACjC;AAAA,IACA,CAAC,QAAQ;AAAA,GACX;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,KAAA;AAAA,MACA,MAAA;AAAA,MACA,OAAO,KAAM,CAAA,MAAA;AAAA,MACb,QAAU,EAAA,gBAAA;AAAA,MACV,QAAA,EAAU,EAAE,EAAA,EAAI,KAAO,EAAA,kBAAA,EAAoB,SAAW,EAAA,CAAC,CAAM,KAAA,SAAA,CAAU,CAAG,EAAA,QAAQ,CAAE;AAAA,KAAA;AAAA,IAEnF;AAAA,GACH;AAEJ;;;;"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js

@@ -2,6 +2,7 @@ import { css } from '@emotion/css';
 import React, { useState, useMemo } from 'react';
 import { useTheme2, HorizontalGroup, IconButton, Tooltip, Icon } from '@grafana/ui';
 import { QueryValidator } from './QueryValidator.js';
+import { reportInteraction } from '@grafana/runtime';
 
 function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }) {
   const theme = useTheme2();
@@ -36,9 +37,13 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
     };
   }, [theme]);
   let style = {};
-  if (!showTools && validationResult === void 0) {
+  if (!showTools && validationResult === undefined) {
     style = { height: 0, padding: 0, visibility: "hidden" };
   }
+  const onFormatClick = () => {
+    reportInteraction("grafana_sql_query_editor_format_click");
+    onFormatCode == null ? undefined : onFormatCode();
+  };
   return /* @__PURE__ */ React.createElement("div", { className: styles.container, style }, /* @__PURE__ */ React.createElement("div", null, validatorProps.onValidate && /* @__PURE__ */ React.createElement(
     QueryValidator,
     {
@@ -48,7 +53,7 @@ function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...valida
         validatorProps.onValidate(result);
       }
     }
-  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatCode, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
+  )), showTools && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(HorizontalGroup, { spacing: "sm" }, onFormatCode && /* @__PURE__ */ React.createElement(IconButton, { onClick: onFormatClick, name: "brackets-curly", size: "xs", tooltip: "Format query" }), onExpand && /* @__PURE__ */ React.createElement(
     IconButton,
     {
       onClick: () => onExpand(!isExpanded),

package/dist/esm/components/QueryEditor/query-editor-raw/QueryToolbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatCode} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;AAeO,SAAS,YAAA,CAAa,EAAE,SAAA,EAAW,YAAA,EAAc,UAAU,UAAA,EAAY,GAAG,gBAAe,EAAsB;AACpH,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,QAAA,EAAkB;AAElE,EAAA,MAAM,MAAA,GAAS,QAAQ,MAAM;AAC3B,IAAA,OAAO;AAAA,MACL,SAAA,EAAW,GAAA;AAAA,0BAAA,EACW,KAAA,CAAM,MAAA,CAAO,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,iBAAA,EAEnC,MAAM,OAAA,CAAQ,GAAA,EAAK,GAAA,EAAK,GAAA,EAAK,GAAG,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA,mBAAA,EAI/B,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAQ,CAAA;AAAA,MAAA,CAAA;AAAA,MAElD,KAAA,EAAO,GAAA;AAAA,eAAA,EACI,KAAA,CAAM,MAAA,CAAO,KAAA,CAAM,IAAI,CAAA;AAAA,mBAAA,EACnB,KAAA,CAAM,UAAA,CAAW,SAAA,CAAU,QAAQ,CAAA;AAAA,qBAAA,EACjC,KAAA,CAAM,WAAW,mBAAmB,CAAA;AAAA,MAAA,CAAA;AAAA,MAErD,KAAA,EAAO,GAAA;AAAA,eAAA,EACI,KAAA,CAAM,MAAA,CAAO,OAAA,CAAQ,IAAI,CAAA;AAAA,MAAA,CAAA;AAAA,MAEpC,IAAA,EAAM,GAAA;AAAA,eAAA,EACK,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,SAAS,CAAA;AAAA,MAAA,CAAA;AAAA,MAEtC,IAAA,EAAM,GAAA;AAAA,eAAA,EACK,KAAA,CAAM,MAAA,CAAO,IAAA,CAAK,QAAQ,CAAA;AAAA;AAAA;AAAA,MAAA;AAAA,KAIvC;AAAA,EACF,CAAA,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,IAAI,QAAQ,EAAC;AAEb,EAAA,IAAI,CAAC,SAAA,IAAa,gBAAA,KAAqB,MAAA,EAAW;AAChD,IAAA,KAAA,GAAQ,EAAE,MAAA,EAAQ,CAAA,EAAG,OAAA,EAAS,CAAA,EAAG,YAAY,QAAA,EAAS;AAAA,EACxD;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAC,SAAI,SAAA,EAAW,MAAA,CAAO,WAAW,KAAA,EAAA,kBAChC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,IAAA,EACE,cAAA,CAAe,UAAA,oBACd,KAAA,CAAA,aAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACE,GAAG,cAAA;AAAA,MACJ,UAAA,EAAY,CAAC,MAAA,KAAoB;AAC/B,QAAA,mBAAA,CAAoB,MAAM,CAAA;AAC1B,QAAA,cAAA,CAAe,WAAY,MAAM,CAAA;AAAA,MACnC;AAAA;AAAA,GAGN,GACC,SAAA,oBACC,KAAA,CAAA,aAAA,CAAC,6BACC,KAAA,CAAA,aAAA,CAAC,eAAA,EAAA,EAAgB,SAAQ,IAAA,EAAA,EACtB,YAAA,wCACE,UAAA,EAAA,EAAW,OAAA,EAAS,cAAc,IAAA,EAAK,gBAAA,EAAiB,MAAK,IAAA,EAAK,OAAA,EAAQ,cAAA,EAAe,CAAA,EAE3F,QAAA,oBACC,KAAA,CAAA,aAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAA,EAAS,MAAM,QAAA,CAAS,CAAC,UAAU,CAAA;AAAA,MACnC,IAAA,EAAM,aAAa,UAAA,GAAa,YAAA;AAAA,MAChC,IAAA,EAAK,IAAA;AAAA,MACL,OAAA,EAAS,aAAa,iBAAA,GAAoB;AAAA;AAAA,GAC5C,kBAEF,KAAA,CAAA,aAAA,CAAC,OAAA,EAAA,EAAQ,OAAA,EAAQ,sDACf,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,EAAK,SAAA,EAAW,MAAA,CAAO,MAAM,IAAA,EAAK,UAAA,EAAW,CAChD,CACF,CACF,CAEJ,CAAA;AAEJ;;;;"}
+{"version":3,"file":"QueryToolbox.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryToolbox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useMemo, useState } from 'react';\n\nimport { HorizontalGroup, Icon, IconButton, Tooltip, useTheme2 } from '@grafana/ui';\n\nimport { QueryValidator, type QueryValidatorProps } from './QueryValidator';\nimport { reportInteraction } from '@grafana/runtime';\n\ninterface QueryToolboxProps extends Omit<QueryValidatorProps, 'onValidate'> {\n  showTools?: boolean;\n  isExpanded?: boolean;\n  onFormatCode?: () => void;\n  onExpand?: (expand: boolean) => void;\n  onValidate?: (isValid: boolean) => void;\n}\n\nexport function QueryToolbox({ showTools, onFormatCode, onExpand, isExpanded, ...validatorProps }: QueryToolboxProps) {\n  const theme = useTheme2();\n  const [validationResult, setValidationResult] = useState<boolean>();\n\n  const styles = useMemo(() => {\n    return {\n      container: css`\n        border: 1px solid ${theme.colors.border.medium};\n        border-top: none;\n        padding: ${theme.spacing(0.5, 0.5, 0.5, 0.5)};\n        display: flex;\n        flex-grow: 1;\n        justify-content: space-between;\n        font-size: ${theme.typography.bodySmall.fontSize};\n      `,\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n      hint: css`\n        color: ${theme.colors.text.disabled};\n        white-space: nowrap;\n        cursor: help;\n      `,\n    };\n  }, [theme]);\n\n  let style = {};\n\n  if (!showTools && validationResult === undefined) {\n    style = { height: 0, padding: 0, visibility: 'hidden' };\n  }\n  const onFormatClick = () => {\n    reportInteraction('grafana_sql_query_editor_format_click');\n    onFormatCode?.();\n  };\n\n  return (\n    <div className={styles.container} style={style}>\n      <div>\n        {validatorProps.onValidate && (\n          <QueryValidator\n            {...validatorProps}\n            onValidate={(result: boolean) => {\n              setValidationResult(result);\n              validatorProps.onValidate!(result);\n            }}\n          />\n        )}\n      </div>\n      {showTools && (\n        <div>\n          <HorizontalGroup spacing=\"sm\">\n            {onFormatCode && (\n              <IconButton onClick={onFormatClick} name=\"brackets-curly\" size=\"xs\" tooltip=\"Format query\" />\n            )}\n            {onExpand && (\n              <IconButton\n                onClick={() => onExpand(!isExpanded)}\n                name={isExpanded ? 'angle-up' : 'angle-down'}\n                size=\"xs\"\n                tooltip={isExpanded ? 'Collapse editor' : 'Expand editor'}\n              />\n            )}\n            <Tooltip content=\"Hit CTRL/CMD+Return to run query\">\n              <Icon className={styles.hint} name=\"keyboard\" />\n            </Tooltip>\n          </HorizontalGroup>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js

@@ -28,7 +28,7 @@ function QueryValidator({ db, query, onValidate, range }) {
   const [state, validateQuery] = useAsyncFn(
     async (q) => {
       var _a2;
-      if (((_a2 = q.rawSql) == null ? void 0 : _a2.trim()) === "") {
+      if (((_a2 = q.rawSql) == null ? undefined : _a2.trim()) === "") {
         return null;
       }
       return await db.validateQuery(q, range);
@@ -47,17 +47,17 @@ function QueryValidator({ db, query, onValidate, range }) {
     [query, validateQuery]
   );
   useEffect(() => {
-    if (validationResult == null ? void 0 : validationResult.isError) {
+    if (validationResult == null ? undefined : validationResult.isError) {
       onValidate(false);
     }
-    if (validationResult == null ? void 0 : validationResult.isValid) {
+    if (validationResult == null ? undefined : validationResult.isValid) {
       onValidate(true);
     }
   }, [validationResult, onValidate]);
   if (!state.value && !state.loading) {
     return null;
   }
-  const error = ((_a = state.value) == null ? void 0 : _a.error) ? processErrorMessage(state.value.error) : "";
+  const error = ((_a = state.value) == null ? undefined : _a.error) ? processErrorMessage(state.value.error) : "";
   return /* @__PURE__ */ React.createElement(React.Fragment, null, state.loading && /* @__PURE__ */ React.createElement("div", { className: styles.info }, /* @__PURE__ */ React.createElement(Spinner, { inline: true, size: 12 }), " Validating query..."), !state.loading && state.value && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(React.Fragment, null, state.value.isValid && state.value.statistics && /* @__PURE__ */ React.createElement("div", { className: styles.valid }, /* @__PURE__ */ React.createElement(Icon, { name: "check" }), " This query will process", " ", /* @__PURE__ */ React.createElement("strong", null, formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))), " ", "when run.")), /* @__PURE__ */ React.createElement(React.Fragment, null, state.value.isError && /* @__PURE__ */ React.createElement("div", { className: styles.error }, error))));
 }
 function processErrorMessage(error) {

package/dist/esm/components/QueryEditor/query-editor-raw/QueryValidator.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n  db: DB;\n  query: SQLQuery;\n  range?: TimeRange;\n  onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n  const [validationResult, setValidationResult] = useState<ValidationResults | null>();\n  const theme = useTheme2();\n  const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n  const styles = useMemo(() => {\n    return {\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n    };\n  }, [theme]);\n\n  const [state, validateQuery] = useAsyncFn(\n    async (q: SQLQuery) => {\n      if (q.rawSql?.trim() === '') {\n        return null;\n      }\n\n      return await db.validateQuery(q, range);\n    },\n    [db]\n  );\n\n  const [,] = useDebounce(\n    async () => {\n      const result = await validateQuery(query);\n      if (result) {\n        setValidationResult(result);\n      }\n\n      return null;\n    },\n    1000,\n    [query, validateQuery]\n  );\n\n  useEffect(() => {\n    if (validationResult?.isError) {\n      onValidate(false);\n    }\n    if (validationResult?.isValid) {\n      onValidate(true);\n    }\n  }, [validationResult, onValidate]);\n\n  if (!state.value && !state.loading) {\n    return null;\n  }\n\n  const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n  return (\n    <>\n      {state.loading && (\n        <div className={styles.info}>\n          <Spinner inline={true} size={12} /> Validating query...\n        </div>\n      )}\n      {!state.loading && state.value && (\n        <>\n          <>\n            {state.value.isValid && state.value.statistics && (\n              <div className={styles.valid}>\n                <Icon name=\"check\" /> This query will process{' '}\n                <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n                when run.\n              </div>\n            )}\n          </>\n\n          <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n        </>\n      )}\n    </>\n  );\n}\n\nfunction processErrorMessage(error: string) {\n  const splat = error.split(':');\n  if (splat.length > 2) {\n    return splat.slice(2).join(':');\n  }\n  return error;\n}\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"QueryValidator.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/QueryValidator.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState, useMemo, useEffect } from 'react';\nimport { useAsyncFn, useDebounce } from 'react-use';\nimport { formattedValueToString, getValueFormat, type TimeRange } from '@grafana/data';\nimport { Icon, Spinner, useTheme2 } from '@grafana/ui';\nimport { type DB, type SQLQuery, type ValidationResults } from '../types';\n\nexport interface QueryValidatorProps {\n  db: DB;\n  query: SQLQuery;\n  range?: TimeRange;\n  onValidate: (isValid: boolean) => void;\n}\n\nexport function QueryValidator({ db, query, onValidate, range }: QueryValidatorProps) {\n  const [validationResult, setValidationResult] = useState<ValidationResults | null>();\n  const theme = useTheme2();\n  const valueFormatter = useMemo(() => getValueFormat('bytes'), []);\n\n  const styles = useMemo(() => {\n    return {\n      error: css`\n        color: ${theme.colors.error.text};\n        font-size: ${theme.typography.bodySmall.fontSize};\n        font-family: ${theme.typography.fontFamilyMonospace};\n      `,\n      valid: css`\n        color: ${theme.colors.success.text};\n      `,\n      info: css`\n        color: ${theme.colors.text.secondary};\n      `,\n    };\n  }, [theme]);\n\n  const [state, validateQuery] = useAsyncFn(\n    async (q: SQLQuery) => {\n      if (q.rawSql?.trim() === '') {\n        return null;\n      }\n\n      return await db.validateQuery(q, range);\n    },\n    [db]\n  );\n\n  const [,] = useDebounce(\n    async () => {\n      const result = await validateQuery(query);\n      if (result) {\n        setValidationResult(result);\n      }\n\n      return null;\n    },\n    1000,\n    [query, validateQuery]\n  );\n\n  useEffect(() => {\n    if (validationResult?.isError) {\n      onValidate(false);\n    }\n    if (validationResult?.isValid) {\n      onValidate(true);\n    }\n  }, [validationResult, onValidate]);\n\n  if (!state.value && !state.loading) {\n    return null;\n  }\n\n  const error = state.value?.error ? processErrorMessage(state.value.error) : '';\n\n  return (\n    <>\n      {state.loading && (\n        <div className={styles.info}>\n          <Spinner inline={true} size={12} /> Validating query...\n        </div>\n      )}\n      {!state.loading && state.value && (\n        <>\n          <>\n            {state.value.isValid && state.value.statistics && (\n              <div className={styles.valid}>\n                <Icon name=\"check\" /> This query will process{' '}\n                <strong>{formattedValueToString(valueFormatter(state.value.statistics.TotalBytesProcessed))}</strong>{' '}\n                when run.\n              </div>\n            )}\n          </>\n\n          <>{state.value.isError && <div className={styles.error}>{error}</div>}</>\n        </>\n      )}\n    </>\n  );\n}\n\nfunction processErrorMessage(error: string) {\n  const splat = error.split(':');\n  if (splat.length > 2) {\n    return splat.slice(2).join(':');\n  }\n  return error;\n}\n"],"names":["_a"],"mappings":"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"}

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js

@@ -8,9 +8,18 @@ import { QueryEditorRaw } from './QueryEditorRaw.js';
 import { QueryToolbox } from './QueryToolbox.js';
 import '../types.js';
 
-function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
+function RawEditor({
+  db,
+  query,
+  onChange,
+  onRunQuery,
+  onValidate,
+  queryToValidate,
+  range,
+  language = "sql"
+}) {
   const theme = useTheme2();
-  const styles = useStyles2(getStyles$h);
+  const styles = useStyles2(getStyles);
   const [isExpanded, setIsExpanded] = useState(false);
   const [toolboxRef, toolboxMeasure] = useMeasure();
   const [editorRef, editorMeasure] = useMeasure();
@@ -22,7 +31,8 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
         completionProvider,
         query,
         width,
-        height: height ? height - toolboxMeasure.height : void 0,
+        language,
+        height: height ? height - toolboxMeasure.height : undefined,
         onChange
       },
       ({ formatQuery }) => {
@@ -79,7 +89,7 @@ function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidat
     renderEditor(true)
   ));
 }
-function getStyles$h(theme) {
+function getStyles(theme) {
   return {
     modal: css`
       width: 95vw;

package/dist/esm/components/QueryEditor/query-editor-raw/RawEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n  onRunQuery: () => void;\n  onChange: (q: SQLQuery, processQuery: boolean) => void;\n  onValidate: (isValid: boolean) => void;\n  queryToValidate: SQLQuery;\n}\n\nexport function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }: RawEditorProps) {\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n  const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n  const renderQueryEditor = (width?: number, height?: number) => {\n    return (\n      <QueryEditorRaw\n        completionProvider={completionProvider}\n        query={query}\n        width={width}\n        height={height ? height - toolboxMeasure.height : undefined}\n        onChange={onChange}\n      >\n        {({ formatQuery }) => {\n          return (\n            <div ref={toolboxRef}>\n              <QueryToolbox\n                db={db}\n                query={queryToValidate}\n                onValidate={onValidate}\n                onFormatCode={formatQuery}\n                showTools\n                range={range}\n                onExpand={setIsExpanded}\n                isExpanded={isExpanded}\n              />\n            </div>\n          );\n        }}\n      </QueryEditorRaw>\n    );\n  };\n\n  interface AutoSizerProps {\n    width: number;\n    height: number;\n  }\n\n  const renderEditor = (standalone = false) => {\n    return standalone ? (\n      <AutoSizer>\n        {({ width, height }: AutoSizerProps) => {\n          return renderQueryEditor(width, height);\n        }}\n      </AutoSizer>\n    ) : (\n      <div ref={editorRef}>{renderQueryEditor()}</div>\n    );\n  };\n\n  const renderPlaceholder = () => {\n    return (\n      <div\n        style={{\n          width: editorMeasure.width,\n          height: editorMeasure.height,\n          background: theme.colors.background.primary,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Editing in expanded code editor\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {isExpanded ? renderPlaceholder() : renderEditor()}\n      {isExpanded && (\n        <Modal\n          title={`Query ${query.refId}`}\n          closeOnBackdropClick={false}\n          closeOnEscape={false}\n          className={styles.modal}\n          contentClassName={styles.modalContent}\n          isOpen={isExpanded}\n          onDismiss={() => {\n            setIsExpanded(false);\n          }}\n        >\n          {renderEditor(true)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    modal: css`\n      width: 95vw;\n      height: 95vh;\n    `,\n    modalContent: css`\n      height: 100%;\n      padding-top: 0;\n    `,\n  };\n}\n"],"names":["getStyles"],"mappings":";;;;;;;;;;AAkBO,SAAS,SAAA,CAAU,EAAE,EAAA,EAAI,KAAA,EAAO,UAAU,UAAA,EAAY,UAAA,EAAY,eAAA,EAAiB,KAAA,EAAM,EAAmB;AACjH,EAAA,MAAM,QAAQ,SAAA,EAAU;AACxB,EAAA,MAAM,MAAA,GAAS,WAAWA,WAAS,CAAA;AACnC,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAI,SAAS,KAAK,CAAA;AAClD,EAAA,MAAM,CAAC,UAAA,EAAY,cAAc,CAAA,GAAI,UAAA,EAA2B;AAChE,EAAA,MAAM,CAAC,SAAA,EAAW,aAAa,CAAA,GAAI,UAAA,EAA2B;AAE9D,EAAA,MAAM,kBAAA,GAAqB,QAAQ,MAAM,EAAA,CAAG,0BAAyB,EAAG,CAAC,EAAE,CAAC,CAAA;AAE5E,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAA,KAAoB;AAC7D,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,kBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAA,GAAS,MAAA,GAAS,cAAA,CAAe,MAAA,GAAS,MAAA;AAAA,QAClD;AAAA,OAAA;AAAA,MAEC,CAAC,EAAE,WAAA,EAAY,KAAM;AACpB,QAAA,uBACE,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EAAA,kBACR,KAAA,CAAA,aAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YACC,EAAA;AAAA,YACA,KAAA,EAAO,eAAA;AAAA,YACP,UAAA;AAAA,YACA,YAAA,EAAc,WAAA;AAAA,YACd,SAAA,EAAS,IAAA;AAAA,YACT,KAAA;AAAA,YACA,QAAA,EAAU,aAAA;AAAA,YACV;AAAA;AAAA,SAEJ,CAAA;AAAA,MAEJ;AAAA,KACF;AAAA,EAEJ,CAAA;AAOA,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,GAAa,KAAA,KAAU;AAC3C,IAAA,OAAO,6BACL,KAAA,CAAA,aAAA,CAAC,SAAA,EAAA,IAAA,EACE,CAAC,EAAE,KAAA,EAAO,QAAO,KAAsB;AACtC,MAAA,OAAO,iBAAA,CAAkB,OAAO,MAAM,CAAA;AAAA,IACxC,CACF,CAAA,mBAEA,KAAA,CAAA,aAAA,CAAC,SAAI,GAAA,EAAK,SAAA,EAAA,EAAY,mBAAoB,CAAA;AAAA,EAE9C,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,uBACE,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO;AAAA,UACL,OAAO,aAAA,CAAc,KAAA;AAAA,UACrB,QAAQ,aAAA,CAAc,MAAA;AAAA,UACtB,UAAA,EAAY,KAAA,CAAM,MAAA,CAAO,UAAA,CAAW,OAAA;AAAA,UACpC,OAAA,EAAS,MAAA;AAAA,UACT,UAAA,EAAY,QAAA;AAAA,UACZ,cAAA,EAAgB;AAAA;AAClB,OAAA;AAAA,MACD;AAAA,KAED;AAAA,EAEJ,CAAA;AAEA,EAAA,iEAEK,UAAA,GAAa,iBAAA,EAAkB,GAAI,YAAA,IACnC,UAAA,oBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,KAAA,EAAO,CAAA,MAAA,EAAS,KAAA,CAAM,KAAK,CAAA,CAAA;AAAA,MAC3B,oBAAA,EAAsB,KAAA;AAAA,MACtB,aAAA,EAAe,KAAA;AAAA,MACf,WAAW,MAAA,CAAO,KAAA;AAAA,MAClB,kBAAkB,MAAA,CAAO,YAAA;AAAA,MACzB,MAAA,EAAQ,UAAA;AAAA,MACR,WAAW,MAAM;AACf,QAAA,aAAA,CAAc,KAAK,CAAA;AAAA,MACrB;AAAA,KAAA;AAAA,IAEC,aAAa,IAAI;AAAA,GAGxB,CAAA;AAEJ;AAEA,SAASA,YAAU,KAAA,EAAsB;AACvC,EAAA,OAAO;AAAA,IACL,KAAA,EAAO,GAAA;AAAA;AAAA;AAAA,IAAA,CAAA;AAAA,IAIP,YAAA,EAAc,GAAA;AAAA;AAAA;AAAA,IAAA;AAAA,GAIhB;AACF;;;;"}
+{"version":3,"file":"RawEditor.js","sources":["../../../../../src/components/QueryEditor/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\nimport { css } from '@emotion/css';\nimport { useMeasure } from 'react-use';\n// @ts-ignore\nimport AutoSizer from 'react-virtualized-auto-sizer';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\nimport { type QueryEditorProps, type SQLQuery } from '../types';\nimport type { SqlLanguage } from 'sql-formatter';\n\ninterface RawEditorProps extends Omit<QueryEditorProps, 'onChange'> {\n  onRunQuery: () => void;\n  onChange: (q: SQLQuery, processQuery: boolean) => void;\n  onValidate: (isValid: boolean) => void;\n  queryToValidate: SQLQuery;\n  language?: SqlLanguage;\n}\n\nexport function RawEditor({\n  db,\n  query,\n  onChange,\n  onRunQuery,\n  onValidate,\n  queryToValidate,\n  range,\n  language = 'sql',\n}: RawEditorProps) {\n  const theme = useTheme2();\n  const styles = useStyles2(getStyles);\n  const [isExpanded, setIsExpanded] = useState(false);\n  const [toolboxRef, toolboxMeasure] = useMeasure<HTMLDivElement>();\n  const [editorRef, editorMeasure] = useMeasure<HTMLDivElement>();\n\n  const completionProvider = useMemo(() => db.getSqlCompletionProvider(), [db]);\n\n  const renderQueryEditor = (width?: number, height?: number) => {\n    return (\n      <QueryEditorRaw\n        completionProvider={completionProvider}\n        query={query}\n        width={width}\n        language={language}\n        height={height ? height - toolboxMeasure.height : undefined}\n        onChange={onChange}\n      >\n        {({ formatQuery }) => {\n          return (\n            <div ref={toolboxRef}>\n              <QueryToolbox\n                db={db}\n                query={queryToValidate}\n                onValidate={onValidate}\n                onFormatCode={formatQuery}\n                showTools\n                range={range}\n                onExpand={setIsExpanded}\n                isExpanded={isExpanded}\n              />\n            </div>\n          );\n        }}\n      </QueryEditorRaw>\n    );\n  };\n\n  interface AutoSizerProps {\n    width: number;\n    height: number;\n  }\n\n  const renderEditor = (standalone = false) => {\n    return standalone ? (\n      <AutoSizer>\n        {({ width, height }: AutoSizerProps) => {\n          return renderQueryEditor(width, height);\n        }}\n      </AutoSizer>\n    ) : (\n      <div ref={editorRef}>{renderQueryEditor()}</div>\n    );\n  };\n\n  const renderPlaceholder = () => {\n    return (\n      <div\n        style={{\n          width: editorMeasure.width,\n          height: editorMeasure.height,\n          background: theme.colors.background.primary,\n          display: 'flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n        }}\n      >\n        Editing in expanded code editor\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {isExpanded ? renderPlaceholder() : renderEditor()}\n      {isExpanded && (\n        <Modal\n          title={`Query ${query.refId}`}\n          closeOnBackdropClick={false}\n          closeOnEscape={false}\n          className={styles.modal}\n          contentClassName={styles.modalContent}\n          isOpen={isExpanded}\n          onDismiss={() => {\n            setIsExpanded(false);\n          }}\n        >\n          {renderEditor(true)}\n        </Modal>\n      )}\n    </>\n  );\n}\n\nfunction getStyles(theme: GrafanaTheme2) {\n  return {\n    modal: css`\n      width: 95vw;\n      height: 95vh;\n    `,\n    modalContent: css`\n      height: 100%;\n      padding-top: 0;\n    `,\n  };\n}\n"],"names":[],"mappings":"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"}

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

@@ -1,6 +1,5 @@
 import '@react-awesome-query-builder/ui';
 import { toOption as toOption$1 } from '@grafana/data';
-import 'lodash';
 import '@grafana/ui';
 import 'react';
 import '../SQLEditor/standardSql/language.js';

package/dist/esm/components/QueryEditor/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from '@react-awesome-query-builder/ui';\n\nimport {\n  type DataFrame,\n  type DataSourceJsonData,\n  type MetricFindValue,\n  type SelectableValue,\n  type TimeRange,\n  toOption as toOptionFromData,\n} from '@grafana/data';\n\nimport { type DataQuery } from '@grafana/schema';\n\nimport { type QueryWithDefaults } from './defaults';\nimport {\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n} from './expressions';\nimport { type CompletionItemKind, type LanguageCompletionProvider } from '../SQLEditor';\n\nexport interface SqlQueryForInterpolation {\n  dataset?: string;\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  refId: string;\n  hide?: boolean;\n}\n\nexport interface SQLConnectionLimits {\n  maxOpenConns: number;\n  maxIdleConns: number;\n  connMaxLifetime: number;\n}\n\nexport interface SQLOptions extends SQLConnectionLimits, DataSourceJsonData {\n  tlsAuth: boolean;\n  tlsAuthWithCACert: boolean;\n  timezone: string;\n  tlsSkipVerify: boolean;\n  user: string;\n  database: string;\n  url: string;\n  timeInterval: string;\n}\n\n// Match the Enums Expected in SqlUtil and SqlDS\n// https://github.com/grafana/grafana-plugin-sdk-go/blob/main/data/sqlutil/query.go#L18-L29\nexport enum QueryFormat {\n  Timeseries,\n  Table,\n  Logs,\n  Trace,\n  OptionMulti,\n}\n\nexport enum EditorMode {\n  Builder = 'builder',\n  Code = 'code',\n}\n\nexport interface SQLQuery extends DataQuery {\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  dataset?: string; // When catalog is present, dataset represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  table?: string;\n  sql?: SQLExpression;\n  editorMode?: EditorMode;\n  rawQuery?: boolean;\n}\n\nexport interface NameValue {\n  name: string;\n  value: string;\n}\n\nexport type SQLFilters = NameValue[];\n\nexport interface SQLExpression {\n  columns?: QueryEditorFunctionExpression[];\n  whereJsonTree?: JsonTree;\n  whereString?: string;\n  filters?: SQLFilters;\n  groupBy?: QueryEditorGroupByExpression[];\n  orderBy?: QueryEditorPropertyExpression;\n  orderByDirection?: 'ASC' | 'DESC';\n  limit?: number;\n  offset?: number;\n}\n\nexport interface TableSchema {\n  name?: string;\n  schema?: TableFieldSchema[];\n}\n\nexport interface TableFieldSchema {\n  name: string;\n  description?: string;\n  type: string;\n  repeated: boolean;\n  schema: TableFieldSchema[];\n}\n\nexport interface QueryRowFilter {\n  filter: boolean;\n  group: boolean;\n  order: boolean;\n  preview: boolean;\n}\n\nexport const QUERY_FORMAT_OPTIONS = [\n  { label: 'Time series', value: QueryFormat.Timeseries },\n  { label: 'Table', value: QueryFormat.Table },\n];\n\nconst backWardToOption = (value: string) => ({ label: value, value });\n\nexport const toOption = toOptionFromData ?? backWardToOption;\n\nexport interface ResourceSelectorProps {\n  disabled?: boolean;\n  className?: string;\n  applyDefault?: boolean;\n}\n// React Awesome Query builder field types.\n// These are responsible for rendering the correct UI for the field.\nexport type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';\n\nexport interface SQLSelectableValue extends SelectableValue {\n  type?: string;\n  raqbFieldType?: RAQBFieldTypes;\n}\n\nexport interface Aggregate {\n  id: string;\n  name: string;\n  description?: string;\n}\n\nexport interface DB {\n  init?: (datasourceId?: string) => Promise<boolean>;\n  datasets: (catalog?: string) => Promise<string[]>; // When catalog is provided, returns schemas for that catalog\n  catalogs?: () => Promise<string[]>;\n  tables: (dataset?: string, catalog?: string, schema?: string) => Promise<string[]>;\n  fields: (query: SQLQuery, order?: boolean) => Promise<SQLSelectableValue[]>;\n  validateQuery: (query: SQLQuery, range?: TimeRange) => Promise<ValidationResults>;\n  dsID: () => number;\n  dispose?: (dsID?: string) => void;\n  lookup: (path?: string) => Promise<Array<{ name: string; completion: string }>>;\n  getSqlCompletionProvider: () => LanguageCompletionProvider;\n  toRawSql?: (query: SQLQuery) => string;\n  functions: () => Promise<Aggregate[]>;\n  labels?: Map<'dataset', string>;\n  disableDatasets?: boolean;\n  disableCatalogs?: boolean;\n}\n\nexport interface QueryEditorProps {\n  db: DB;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  range?: TimeRange;\n}\n\nexport interface ValidationResults {\n  query: SQLQuery;\n  rawSql?: string;\n  error: string;\n  isError: boolean;\n  isValid: boolean;\n  statistics?: {\n    TotalBytesProcessed: number;\n  } | null;\n}\n\nexport interface SqlQueryModel {\n  interpolate: () => string;\n  quoteLiteral: (v: string) => string;\n}\n\nexport interface ResponseParser {\n  transformMetricFindResponse: (frame: DataFrame) => MetricFindValue[];\n}\n\nexport interface MetaDefinition {\n  name: string;\n  completion?: string;\n  kind: CompletionItemKind;\n}\n"],"names":["QueryFormat","EditorMode","toOptionFromData"],"mappings":";;;;;;;;;;;AAAA,IAAA,EAAA;AAiDO,IAAK,WAAA,qBAAAA,YAAAA,KAAL;AACL,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAAA,CAAAA,YAAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQL,IAAK,UAAA,qBAAAC,WAAAA,KAAL;AACL,EAAAA,YAAA,SAAA,CAAA,GAAU,SAAA;AACV,EAAAA,YAAA,MAAA,CAAA,GAAO,MAAA;AAFG,EAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAwDL,MAAM,oBAAA,GAAuB;AAAA,EAClC,EAAE,KAAA,EAAO,aAAA,EAAe,KAAA,EAAO,CAAA,mBAAuB;AAAA,EACtD,EAAE,KAAA,EAAO,OAAA,EAAS,KAAA,EAAO,CAAA;AAC3B;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAA,EAAM,CAAA;AAE5D,MAAM,YAAW,EAAA,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAoB;;;;"}
+{"version":3,"file":"types.js","sources":["../../../../src/components/QueryEditor/types.ts"],"sourcesContent":["import { type JsonTree } from '@react-awesome-query-builder/ui';\n\nimport {\n  type DataFrame,\n  type DataSourceJsonData,\n  type MetricFindValue,\n  type SelectableValue,\n  type TimeRange,\n  toOption as toOptionFromData,\n} from '@grafana/data';\n\nimport { type DataQuery } from '@grafana/schema';\n\nimport {\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n} from './expressions';\nimport { type CompletionItemKind, type LanguageCompletionProvider } from '../SQLEditor';\n\nexport interface SqlQueryForInterpolation {\n  dataset?: string;\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  refId: string;\n  hide?: boolean;\n}\n\nexport interface SQLConnectionLimits {\n  maxOpenConns: number;\n  maxIdleConns: number;\n  connMaxLifetime: number;\n}\n\nexport interface SQLOptions extends SQLConnectionLimits, DataSourceJsonData {\n  tlsAuth: boolean;\n  tlsAuthWithCACert: boolean;\n  timezone: string;\n  tlsSkipVerify: boolean;\n  user: string;\n  database: string;\n  url: string;\n  timeInterval: string;\n}\n\n// Match the Enums Expected in SqlUtil and SqlDS\n// https://github.com/grafana/grafana-plugin-sdk-go/blob/main/data/sqlutil/query.go#L18-L29\nexport enum QueryFormat {\n  Timeseries,\n  Table,\n  Logs,\n  Trace,\n  OptionMulti,\n}\n\nexport enum EditorMode {\n  Builder = 'builder',\n  Code = 'code',\n}\n\nexport interface SQLQuery extends DataQuery {\n  alias?: string;\n  format?: QueryFormat;\n  rawSql?: string;\n  dataset?: string; // When catalog is present, dataset represents the schema. Otherwise, it's the dataset.\n  catalog?: string;\n  table?: string;\n  sql?: SQLExpression;\n  editorMode?: EditorMode;\n  rawQuery?: boolean;\n}\n\nexport interface NameValue {\n  name: string;\n  value: string;\n}\n\nexport type SQLFilters = NameValue[];\n\nexport interface SQLExpression {\n  columns?: QueryEditorFunctionExpression[];\n  whereJsonTree?: JsonTree;\n  whereString?: string;\n  filters?: SQLFilters;\n  groupBy?: QueryEditorGroupByExpression[];\n  orderBy?: QueryEditorPropertyExpression;\n  orderByDirection?: 'ASC' | 'DESC';\n  limit?: number;\n  offset?: number;\n}\n\nexport interface TableSchema {\n  name?: string;\n  schema?: TableFieldSchema[];\n}\n\nexport interface TableFieldSchema {\n  name: string;\n  description?: string;\n  type: string;\n  repeated: boolean;\n  schema: TableFieldSchema[];\n}\n\nexport interface QueryRowFilter {\n  filter: boolean;\n  group: boolean;\n  order: boolean;\n  preview: boolean;\n}\n\nexport const QUERY_FORMAT_OPTIONS = [\n  { label: 'Time series', value: QueryFormat.Timeseries },\n  { label: 'Table', value: QueryFormat.Table },\n];\n\nconst backWardToOption = (value: string) => ({ label: value, value });\n\nexport const toOption = toOptionFromData ?? backWardToOption;\n\nexport interface ResourceSelectorProps {\n  disabled?: boolean;\n  className?: string;\n  applyDefault?: boolean;\n}\n// React Awesome Query builder field types.\n// These are responsible for rendering the correct UI for the field.\nexport type RAQBFieldTypes = 'text' | 'number' | 'boolean' | 'datetime' | 'date' | 'time';\n\nexport interface SQLSelectableValue extends SelectableValue {\n  type?: string;\n  raqbFieldType?: RAQBFieldTypes;\n}\n\nexport interface Aggregate {\n  id: string;\n  name: string;\n  description?: string;\n}\n\nexport interface DB {\n  init?: (datasourceId?: string) => Promise<boolean>;\n  datasets: (catalog?: string) => Promise<string[]>; // When catalog is provided, returns schemas for that catalog\n  catalogs?: () => Promise<string[]>;\n  tables: (dataset?: string, catalog?: string, schema?: string) => Promise<string[]>;\n  fields: (query: SQLQuery, order?: boolean) => Promise<SQLSelectableValue[]>;\n  validateQuery: (query: SQLQuery, range?: TimeRange) => Promise<ValidationResults>;\n  dsID: () => number;\n  dispose?: (dsID?: string) => void;\n  lookup: (path?: string) => Promise<Array<{ name: string; completion: string }>>;\n  getSqlCompletionProvider: () => LanguageCompletionProvider;\n  toRawSql?: (query: SQLQuery) => string;\n  functions: () => Promise<Aggregate[]>;\n  labels?: Map<'dataset', string>;\n  disableDatasets?: boolean;\n  disableCatalogs?: boolean;\n}\n\nexport interface QueryEditorProps {\n  db: DB;\n  query: QueryWithDefaults;\n  onChange: (query: SQLQuery) => void;\n  range?: TimeRange;\n}\n\nexport interface ValidationResults {\n  query: SQLQuery;\n  rawSql?: string;\n  error: string;\n  isError: boolean;\n  isValid: boolean;\n  statistics?: {\n    TotalBytesProcessed: number;\n  } | null;\n}\n\nexport interface SqlQueryModel {\n  interpolate: () => string;\n  quoteLiteral: (v: string) => string;\n}\n\nexport interface ResponseParser {\n  transformMetricFindResponse: (frame: DataFrame) => MetricFindValue[];\n}\n\nexport interface MetaDefinition {\n  name: string;\n  completion?: string;\n  kind: CompletionItemKind;\n}\n\n/**\n * Represents a query with all default values applied.\n * This is equivalent to SQLQuery since applyQueryDefaults returns SQLQuery.\n */\nexport type QueryWithDefaults = SQLQuery;\n"],"names":["QueryFormat","EditorMode","toOptionFromData"],"mappings":";;;;;;;;;;AAAA,IAAA,EAAA;AAgDY,IAAA,WAAA,qBAAAA,YAAL,KAAA;AACL,EAAAA,YAAA,CAAA,YAAA,CAAA,YAAA,CAAA,GAAA,CAAA,CAAA,GAAA,YAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,MAAA,CAAA,GAAA,CAAA,CAAA,GAAA,MAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,OAAA,CAAA,GAAA,CAAA,CAAA,GAAA,OAAA;AACA,EAAAA,YAAA,CAAA,YAAA,CAAA,aAAA,CAAA,GAAA,CAAA,CAAA,GAAA,aAAA;AALU,EAAAA,OAAAA,YAAAA;AAAA,CAAA,EAAA,WAAA,IAAA,EAAA;AAQA,IAAA,UAAA,qBAAAC,WAAL,KAAA;AACL,EAAAA,YAAA,SAAU,CAAA,GAAA,SAAA;AACV,EAAAA,YAAA,MAAO,CAAA,GAAA,MAAA;AAFG,EAAAA,OAAAA,WAAAA;AAAA,CAAA,EAAA,UAAA,IAAA,EAAA;AAwDL,MAAM,oBAAuB,GAAA;AAAA,EAClC,EAAE,KAAA,EAAO,aAAe,EAAA,KAAA,EAAO,CAAuB,mBAAA;AAAA,EACtD,EAAE,KAAA,EAAO,OAAS,EAAA,KAAA,EAAO,CAAkB;AAC7C;AAEA,MAAM,mBAAmB,CAAC,KAAA,MAAmB,EAAE,KAAA,EAAO,OAAO,KAAM,EAAA,CAAA;AAE5D,MAAM,YAAW,EAAoB,GAAAC,UAAA,KAAA,IAAA,GAAA,EAAA,GAAA;;;;"}

package/dist/esm/components/QueryEditor/utils/formatSQL.js

@@ -1,9 +1,20 @@
-import sqlFormatter from 'sql-formatter-plus';
+import { format } from 'sql-formatter';
 
-function formatSQL(q) {
-  return sqlFormatter.format(q).replace(/(\$ \{ .* \})|(\$ __)|(\$ \w+)/g, (m) => {
-    return m.replace(/\s/g, "");
+function formatSQL(q, language = "sql") {
+  const formatted = 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, "")
+  );
 }
 
 export { formatSQL };

package/dist/esm/components/QueryEditor/utils/formatSQL.js.map

@@ -1 +1 @@
-{"version":3,"file":"formatSQL.js","sources":["../../../../../src/components/QueryEditor/utils/formatSQL.ts"],"sourcesContent":["// @ts-ignore\nimport sqlFormatter from 'sql-formatter-plus';\n\nexport function formatSQL(q: string) {\n  return sqlFormatter.format(q).replace(/(\\$ \\{ .* \\})|(\\$ __)|(\\$ \\w+)/g, (m: string) => {\n    return m.replace(/\\s/g, '');\n  });\n}\n"],"names":[],"mappings":";;AAGO,SAAS,UAAU,CAAA,EAAW;AACnC,EAAA,OAAO,aAAa,MAAA,CAAO,CAAC,EAAE,OAAA,CAAQ,iCAAA,EAAmC,CAAC,CAAA,KAAc;AACtF,IAAA,OAAO,CAAA,CAAE,OAAA,CAAQ,KAAA,EAAO,EAAE,CAAA;AAAA,EAC5B,CAAC,CAAA;AACH;;;;"}
+{"version":3,"file":"formatSQL.js","sources":["../../../../../src/components/QueryEditor/utils/formatSQL.ts"],"sourcesContent":["import { format, type SqlLanguage } from 'sql-formatter';\n\n/**\n * Format SQL while preserving Grafana template variable tokens.\n * Treats `${...}`, `$__...`, and `$var` as parameters so the\n * formatter does not split or reflow them, then normalizes any\n * whitespace inside those tokens.\n */\nexport function formatSQL(q: string, language: SqlLanguage = 'sql') {\n  const formatted = format(q, {\n    language,\n    paramTypes: {\n      custom: [\n        {\n          regex: '\\\\$\\\\s*\\\\{[^}]*\\\\}|\\\\$\\\\s*__\\\\w+(?:\\\\([^)]*\\\\))?|\\\\$\\\\s*\\\\w+',\n        },\n      ],\n    },\n  });\n  return formatted.replace(/(\\$\\s*\\{[^}]*\\})|(\\$\\s*__\\w+(?:\\([^)]*\\))?)|(\\$\\s*\\w+)/g, (m: string) =>\n    m.replace(/\\s/g, '')\n  );\n}\n"],"names":[],"mappings":";;AAQgB,SAAA,SAAA,CAAU,CAAW,EAAA,QAAA,GAAwB,KAAO,EAAA;AAClE,EAAM,MAAA,SAAA,GAAY,OAAO,CAAG,EAAA;AAAA,IAC1B,QAAA;AAAA,IACA,UAAY,EAAA;AAAA,MACV,MAAQ,EAAA;AAAA,QACN;AAAA,UACE,KAAO,EAAA;AAAA;AACT;AACF;AACF,GACD,CAAA;AACD,EAAA,OAAO,SAAU,CAAA,OAAA;AAAA,IAAQ,yDAAA;AAAA,IAA2D,CAAC,CAAA,KACnF,CAAE,CAAA,OAAA,CAAQ,OAAO,EAAE;AAAA,GACrB;AACF;;;;"}

package/dist/esm/components/QueryEditor/utils/sql.utils.js

@@ -1,5 +1,5 @@
 import { isEmpty } from 'lodash';
-import { QueryEditorPropertyType, QueryEditorExpressionType } from '../expressions.js';
+import { QueryEditorExpressionType, QueryEditorPropertyType } from '../expressions.js';
 import '../types.js';
 
 function getRawSqlFn(db) {
@@ -22,17 +22,17 @@ function toRawSql({ sql, dataset, catalog, table }, disableDatasets) {
   if (sql.whereString) {
     rawQuery += `WHERE ${sql.whereString} `;
   }
-  if ((_b = (_a = sql.groupBy) == null ? void 0 : _a[0]) == null ? void 0 : _b.property.name) {
+  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) => !isEmpty(g));
     rawQuery += `GROUP BY ${groupBy.join(", ")} `;
   }
-  if ((_c = sql.orderBy) == null ? void 0 : _c.property.name) {
+  if ((_c = sql.orderBy) == null ? undefined : _c.property.name) {
     rawQuery += `ORDER BY ${sql.orderBy.property.name} `;
   }
-  if (((_d = sql.orderBy) == null ? void 0 : _d.property.name) && sql.orderByDirection) {
+  if (((_d = sql.orderBy) == null ? undefined : _d.property.name) && sql.orderByDirection) {
     rawQuery += `${sql.orderByDirection} `;
   }
-  if (sql.limit !== void 0 && sql.limit >= 0) {
+  if (sql.limit !== undefined && sql.limit >= 0) {
     rawQuery += `LIMIT ${sql.limit} `;
   }
   return rawQuery;
@@ -42,9 +42,9 @@ function createSelectClause(sqlColumns) {
     var _a, _b;
     let rawColumn = "";
     if (c.name) {
-      rawColumn += `${c.name}(${(_a = c.parameters) == null ? void 0 : _a.map((p) => `${p.name}`)})`;
+      rawColumn += `${c.name}(${(_a = c.parameters) == null ? undefined : _a.map((p) => `${p.name}`)})`;
     } else {
-      rawColumn += `${(_b = c.parameters) == null ? void 0 : _b.map((p) => `${p.name}`)}`;
+      rawColumn += `${(_b = c.parameters) == null ? undefined : _b.map((p) => `${p.name}`)}`;
     }
     return rawColumn;
   });
@@ -56,7 +56,7 @@ function haveColumns(columns) {
   }
   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));
+    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;

package/dist/esm/components/QueryEditor/utils/sql.utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"sql.utils.js","sources":["../../../../../src/components/QueryEditor/utils/sql.utils.ts"],"sourcesContent":["import { isEmpty } from 'lodash';\n\nimport {\n  QueryEditorExpressionType,\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n  QueryEditorPropertyType,\n} from '../expressions';\nimport { type SQLQuery, type SQLExpression, type DB } from '../types';\n\nexport function getRawSqlFn(db: DB) {\n  return db.toRawSql ? db.toRawSql : (query: SQLQuery) => toRawSql(query, Boolean(db.disableDatasets));\n}\n\n/**\n * Converts a SQLQuery object into a raw SQL string.\n *\n * Table reference naming:\n * - When catalog is present: catalog.dataset.table (dataset acts as schema)\n * - When catalog is absent: dataset.table (dataset acts as dataset/schema)\n * - When both are disabled: just table\n *\n * Note: Semantically, the dataset field has dual meaning:\n *   - With catalog: dataset = schema (Unity Catalog: catalog.schema.table)\n *   - Without catalog: dataset = dataset (Legacy: dataset.table)\n */\nexport function toRawSql({ sql, dataset, catalog, table }: SQLQuery, disableDatasets: boolean): string {\n  let rawQuery = '';\n\n  if (!sql || !haveColumns(sql.columns)) {\n    return rawQuery;\n  }\n\n  rawQuery += createSelectClause(sql.columns);\n\n  // Three-part naming: catalog.dataset.table (dataset acts as schema when catalog is present)\n  if (catalog && dataset && table) {\n    rawQuery += `FROM ${catalog}.${dataset}.${table} `;\n  }\n  // Two-part naming: dataset.table (legacy style, only if catalogs not used)\n  else if (!disableDatasets && dataset && table) {\n    rawQuery += `FROM ${dataset}.${table} `;\n  }\n  // Just table name (when datasets are disabled or neither catalog nor dataset is present)\n  else if (table) {\n    rawQuery += `FROM ${table} `;\n  }\n\n  if (sql.whereString) {\n    rawQuery += `WHERE ${sql.whereString} `;\n  }\n\n  if (sql.groupBy?.[0]?.property.name) {\n    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !isEmpty(g));\n    rawQuery += `GROUP BY ${groupBy.join(', ')} `;\n  }\n\n  if (sql.orderBy?.property.name) {\n    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;\n  }\n\n  if (sql.orderBy?.property.name && sql.orderByDirection) {\n    rawQuery += `${sql.orderByDirection} `;\n  }\n\n  if (sql.limit !== undefined && sql.limit >= 0) {\n    rawQuery += `LIMIT ${sql.limit} `;\n  }\n\n  return rawQuery;\n}\n\nfunction createSelectClause(sqlColumns: NonNullable<SQLExpression['columns']>): string {\n  const columns = sqlColumns.map((c) => {\n    let rawColumn = '';\n    if (c.name) {\n      rawColumn += `${c.name}(${c.parameters?.map((p) => `${p.name}`)})`;\n    } else {\n      rawColumn += `${c.parameters?.map((p) => `${p.name}`)}`;\n    }\n    return rawColumn;\n  });\n  return `SELECT ${columns.join(', ')} `;\n}\n\nexport function haveColumns(columns: SQLExpression['columns']): columns is NonNullable<SQLExpression['columns']> {\n  if (!columns) {\n    return false;\n  }\n\n  const haveColumn = columns.some((c) => c.parameters?.length || c.parameters?.some((p) => p.name));\n  const haveFunction = columns.some((c) => c.name);\n  return haveColumn || haveFunction;\n}\n\n/**\n * Creates a GroupByExpression for a specified field\n */\nexport function setGroupByField(field?: string): QueryEditorGroupByExpression {\n  return {\n    type: QueryEditorExpressionType.GroupBy,\n    property: {\n      type: QueryEditorPropertyType.String,\n      name: field,\n    },\n  };\n}\n\n/**\n * Creates a PropertyExpression for a specified field\n */\nexport function setPropertyField(field?: string): QueryEditorPropertyExpression {\n  return {\n    type: QueryEditorExpressionType.Property,\n    property: {\n      type: QueryEditorPropertyType.String,\n      name: field,\n    },\n  };\n}\n\nexport function createFunctionField(functionName?: string): QueryEditorFunctionExpression {\n  return {\n    type: QueryEditorExpressionType.Function,\n    name: functionName,\n    parameters: [],\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"sql.utils.js","sources":["../../../../../src/components/QueryEditor/utils/sql.utils.ts"],"sourcesContent":["import { isEmpty } from 'lodash';\n\nimport {\n  QueryEditorExpressionType,\n  type QueryEditorFunctionExpression,\n  type QueryEditorGroupByExpression,\n  type QueryEditorPropertyExpression,\n  QueryEditorPropertyType,\n} from '../expressions';\nimport { type SQLQuery, type SQLExpression, type DB } from '../types';\n\nexport function getRawSqlFn(db: DB) {\n  return db.toRawSql ? db.toRawSql : (query: SQLQuery) => toRawSql(query, Boolean(db.disableDatasets));\n}\n\n/**\n * Converts a SQLQuery object into a raw SQL string.\n *\n * Table reference naming:\n * - When catalog is present: catalog.dataset.table (dataset acts as schema)\n * - When catalog is absent: dataset.table (dataset acts as dataset/schema)\n * - When both are disabled: just table\n *\n * Note: Semantically, the dataset field has dual meaning:\n *   - With catalog: dataset = schema (Unity Catalog: catalog.schema.table)\n *   - Without catalog: dataset = dataset (Legacy: dataset.table)\n */\nexport function toRawSql({ sql, dataset, catalog, table }: SQLQuery, disableDatasets: boolean): string {\n  let rawQuery = '';\n\n  if (!sql || !haveColumns(sql.columns)) {\n    return rawQuery;\n  }\n\n  rawQuery += createSelectClause(sql.columns);\n\n  // Three-part naming: catalog.dataset.table (dataset acts as schema when catalog is present)\n  if (catalog && dataset && table) {\n    rawQuery += `FROM ${catalog}.${dataset}.${table} `;\n  }\n  // Two-part naming: dataset.table (legacy style, only if catalogs not used)\n  else if (!disableDatasets && dataset && table) {\n    rawQuery += `FROM ${dataset}.${table} `;\n  }\n  // Just table name (when datasets are disabled or neither catalog nor dataset is present)\n  else if (table) {\n    rawQuery += `FROM ${table} `;\n  }\n\n  if (sql.whereString) {\n    rawQuery += `WHERE ${sql.whereString} `;\n  }\n\n  if (sql.groupBy?.[0]?.property.name) {\n    const groupBy = sql.groupBy.map((g) => g.property.name).filter((g) => !isEmpty(g));\n    rawQuery += `GROUP BY ${groupBy.join(', ')} `;\n  }\n\n  if (sql.orderBy?.property.name) {\n    rawQuery += `ORDER BY ${sql.orderBy.property.name} `;\n  }\n\n  if (sql.orderBy?.property.name && sql.orderByDirection) {\n    rawQuery += `${sql.orderByDirection} `;\n  }\n\n  if (sql.limit !== undefined && sql.limit >= 0) {\n    rawQuery += `LIMIT ${sql.limit} `;\n  }\n\n  return rawQuery;\n}\n\nfunction createSelectClause(sqlColumns: NonNullable<SQLExpression['columns']>): string {\n  const columns = sqlColumns.map((c) => {\n    let rawColumn = '';\n    if (c.name) {\n      rawColumn += `${c.name}(${c.parameters?.map((p) => `${p.name}`)})`;\n    } else {\n      rawColumn += `${c.parameters?.map((p) => `${p.name}`)}`;\n    }\n    return rawColumn;\n  });\n  return `SELECT ${columns.join(', ')} `;\n}\n\nexport function haveColumns(columns: SQLExpression['columns']): columns is NonNullable<SQLExpression['columns']> {\n  if (!columns) {\n    return false;\n  }\n\n  const haveColumn = columns.some((c) => c.parameters?.length || c.parameters?.some((p) => p.name));\n  const haveFunction = columns.some((c) => c.name);\n  return haveColumn || haveFunction;\n}\n\n/**\n * Creates a GroupByExpression for a specified field\n */\nexport function setGroupByField(field?: string): QueryEditorGroupByExpression {\n  return {\n    type: QueryEditorExpressionType.GroupBy,\n    property: {\n      type: QueryEditorPropertyType.String,\n      name: field,\n    },\n  };\n}\n\n/**\n * Creates a PropertyExpression for a specified field\n */\nexport function setPropertyField(field?: string): QueryEditorPropertyExpression {\n  return {\n    type: QueryEditorExpressionType.Property,\n    property: {\n      type: QueryEditorPropertyType.String,\n      name: field,\n    },\n  };\n}\n\nexport function createFunctionField(functionName?: string): QueryEditorFunctionExpression {\n  return {\n    type: QueryEditorExpressionType.Function,\n    name: functionName,\n    parameters: [],\n  };\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/QueryEditor/utils/useSqlChange.js.map

@@ -1 +1 @@
-{"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n  db: DB;\n  query: SQLQuery;\n  onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n  const onSqlChange = useCallback(\n    (sql: SQLExpression) => {\n      const toRawSql = getRawSqlFn(db);\n      const rawSql = toRawSql({\n        sql,\n        catalog: query.catalog,\n        dataset: query.dataset,\n        table: query.table,\n        refId: query.refId,\n      });\n      const newQuery: SQLQuery = { ...query, sql, rawSql };\n      onQueryChange(newQuery);\n    },\n    [db, onQueryChange, query]\n  );\n\n  return { onSqlChange };\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,YAAA,CAAa,EAAE,KAAA,EAAO,aAAA,EAAe,IAAG,EAAiB;AACvE,EAAA,MAAM,WAAA,GAAc,WAAA;AAAA,IAClB,CAAC,GAAA,KAAuB;AACtB,MAAA,MAAM,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,SAAS,QAAA,CAAS;AAAA,QACtB,GAAA;AAAA,QACA,SAAS,KAAA,CAAM,OAAA;AAAA,QACf,SAAS,KAAA,CAAM,OAAA;AAAA,QACf,OAAO,KAAA,CAAM,KAAA;AAAA,QACb,OAAO,KAAA,CAAM;AAAA,OACd,CAAA;AACD,MAAA,MAAM,QAAA,GAAqB,EAAE,GAAG,KAAA,EAAO,KAAK,MAAA,EAAO;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,IACxB,CAAA;AAAA,IACA,CAAC,EAAA,EAAI,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAA,EAAY;AACvB;;;;"}
+{"version":3,"file":"useSqlChange.js","sources":["../../../../../src/components/QueryEditor/utils/useSqlChange.ts"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { type DB, type SQLExpression, type SQLQuery } from '../types';\n\nimport { getRawSqlFn } from './sql.utils';\n\ninterface UseSqlChange {\n  db: DB;\n  query: SQLQuery;\n  onQueryChange: (query: SQLQuery) => void;\n}\n\nexport function useSqlChange({ query, onQueryChange, db }: UseSqlChange) {\n  const onSqlChange = useCallback(\n    (sql: SQLExpression) => {\n      const toRawSql = getRawSqlFn(db);\n      const rawSql = toRawSql({\n        sql,\n        catalog: query.catalog,\n        dataset: query.dataset,\n        table: query.table,\n        refId: query.refId,\n      });\n      const newQuery: SQLQuery = { ...query, sql, rawSql };\n      onQueryChange(newQuery);\n    },\n    [db, onQueryChange, query]\n  );\n\n  return { onSqlChange };\n}\n"],"names":[],"mappings":";;;;AAYO,SAAS,YAAa,CAAA,EAAE,KAAO,EAAA,aAAA,EAAe,IAAoB,EAAA;AACvE,EAAA,MAAM,WAAc,GAAA,WAAA;AAAA,IAClB,CAAC,GAAuB,KAAA;AACtB,MAAM,MAAA,QAAA,GAAW,YAAY,EAAE,CAAA;AAC/B,MAAA,MAAM,SAAS,QAAS,CAAA;AAAA,QACtB,GAAA;AAAA,QACA,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,SAAS,KAAM,CAAA,OAAA;AAAA,QACf,OAAO,KAAM,CAAA,KAAA;AAAA,QACb,OAAO,KAAM,CAAA;AAAA,OACd,CAAA;AACD,MAAA,MAAM,QAAqB,GAAA,EAAE,GAAG,KAAA,EAAO,KAAK,MAAO,EAAA;AACnD,MAAA,aAAA,CAAc,QAAQ,CAAA;AAAA,KACxB;AAAA,IACA,CAAC,EAAI,EAAA,aAAA,EAAe,KAAK;AAAA,GAC3B;AAEA,EAAA,OAAO,EAAE,WAAY,EAAA;AACvB;;;;"}