@grafana/sql 0.0.0 → 13.0.0-23483592685

package/dist/esm/components/query-editor-raw/RawEditor.mjs

@@ -0,0 +1,108 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { css } from '@emotion/css';
+import { useState, useMemo } from 'react';
+import { useMeasure } from 'react-use';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { Trans, t } from '@grafana/i18n';
+import { reportInteraction } from '@grafana/runtime';
+import { useTheme2, useStyles2, Modal } from '@grafana/ui';
+import { QueryEditorRaw } from './QueryEditorRaw.mjs';
+import { QueryToolbox } from './QueryToolbox.mjs';
+
+"use strict";
+function RawEditor({ db, query, onChange, onRunQuery, onValidate, queryToValidate, range }) {
+  const theme = useTheme2();
+  const styles = useStyles2(getStyles);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [toolboxRef, toolboxMeasure] = useMeasure();
+  const [editorRef, editorMeasure] = useMeasure();
+  const editorLanguageDefinition = useMemo(() => db.getEditorLanguageDefinition(), [db]);
+  const renderQueryEditor = (width, height) => {
+    return /* @__PURE__ */ jsx(
+      QueryEditorRaw,
+      {
+        editorLanguageDefinition,
+        query,
+        width,
+        height: height ? height - toolboxMeasure.height : void 0,
+        onChange,
+        children: ({ formatQuery }) => {
+          return /* @__PURE__ */ jsx("div", { ref: toolboxRef, children: /* @__PURE__ */ jsx(
+            QueryToolbox,
+            {
+              db,
+              query: queryToValidate,
+              onValidate,
+              onFormatCode: formatQuery,
+              showTools: true,
+              range,
+              onExpand: setIsExpanded,
+              isExpanded
+            }
+          ) });
+        }
+      }
+    );
+  };
+  const renderEditor = (standalone = false) => {
+    return standalone ? /* @__PURE__ */ jsx(AutoSizer, { children: ({ width, height }) => {
+      return renderQueryEditor(width, height);
+    } }) : /* @__PURE__ */ jsx("div", { ref: editorRef, children: renderQueryEditor() });
+  };
+  const renderPlaceholder = () => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          width: editorMeasure.width,
+          height: editorMeasure.height,
+          background: theme.colors.background.primary,
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-sql.components.raw-editor.render-placeholder.editing-in-expanded-code-editor", children: "Editing in expanded code editor" })
+      }
+    );
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    isExpanded ? renderPlaceholder() : renderEditor(),
+    isExpanded && /* @__PURE__ */ jsx(
+      Modal,
+      {
+        title: t("grafana-sql.components.raw-editor.title-query-num", "Query {{queryNum}}", {
+          queryNum: query.refId
+        }),
+        closeOnBackdropClick: false,
+        closeOnEscape: false,
+        className: styles.modal,
+        contentClassName: styles.modalContent,
+        isOpen: isExpanded,
+        onDismiss: () => {
+          var _a;
+          reportInteraction("grafana_sql_editor_expand", {
+            datasource: (_a = query.datasource) == null ? void 0 : _a.type,
+            expanded: false
+          });
+          setIsExpanded(false);
+        },
+        children: renderEditor(true)
+      }
+    )
+  ] });
+}
+function getStyles(theme) {
+  return {
+    modal: css({
+      width: "95vw",
+      height: "95vh"
+    }),
+    modalContent: css({
+      height: "100%",
+      paddingTop: 0
+    })
+  };
+}
+
+export { RawEditor };
+//# sourceMappingURL=RawEditor.mjs.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"RawEditor.mjs","sources":["../../../../src/components/query-editor-raw/RawEditor.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { useMemo, useState } from 'react';\nimport { useMeasure } from 'react-use';\nimport AutoSizer from 'react-virtualized-auto-sizer';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Trans, t } from '@grafana/i18n';\nimport { reportInteraction } from '@grafana/runtime';\nimport { Modal, useStyles2, useTheme2 } from '@grafana/ui';\n\nimport { SQLQuery, QueryEditorProps } from '../../types';\n\nimport { QueryEditorRaw } from './QueryEditorRaw';\nimport { QueryToolbox } from './QueryToolbox';\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 editorLanguageDefinition = useMemo(() => db.getEditorLanguageDefinition(), [db]);\n\n  const renderQueryEditor = (width?: number, height?: number) => {\n    return (\n      <QueryEditorRaw\n        editorLanguageDefinition={editorLanguageDefinition}\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  const renderEditor = (standalone = false) => {\n    return standalone ? (\n      <AutoSizer>\n        {({ width, height }) => {\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        <Trans i18nKey=\"grafana-sql.components.raw-editor.render-placeholder.editing-in-expanded-code-editor\">\n          Editing in expanded code editor\n        </Trans>\n      </div>\n    );\n  };\n\n  return (\n    <>\n      {isExpanded ? renderPlaceholder() : renderEditor()}\n      {isExpanded && (\n        <Modal\n          title={t('grafana-sql.components.raw-editor.title-query-num', 'Query {{queryNum}}', {\n            queryNum: query.refId,\n          })}\n          closeOnBackdropClick={false}\n          closeOnEscape={false}\n          className={styles.modal}\n          contentClassName={styles.modalContent}\n          isOpen={isExpanded}\n          onDismiss={() => {\n            reportInteraction('grafana_sql_editor_expand', {\n              datasource: query.datasource?.type,\n              expanded: false,\n            });\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      paddingTop: 0,\n    }),\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAsBO,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,WAAW,SAAS,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,wBAAA,GAA2B,QAAQ,MAAM,EAAA,CAAG,6BAA4B,EAAG,CAAC,EAAE,CAAC,CAAA;AAErF,EAAA,MAAM,iBAAA,GAAoB,CAAC,KAAA,EAAgB,MAAA,KAAoB;AAC7D,IAAA,uBACE,GAAA;AAAA,MAAC,cAAA;AAAA,MAAA;AAAA,QACC,wBAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,MAAA,EAAQ,MAAA,GAAS,MAAA,GAAS,cAAA,CAAe,MAAA,GAAS,KAAA,CAAA;AAAA,QAClD,QAAA;AAAA,QAEC,QAAA,EAAA,CAAC,EAAE,WAAA,EAAY,KAAM;AACpB,UAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,UAAA,EACR,QAAA,kBAAA,GAAA;AAAA,YAAC,YAAA;AAAA,YAAA;AAAA,cACC,EAAA;AAAA,cACA,KAAA,EAAO,eAAA;AAAA,cACP,UAAA;AAAA,cACA,YAAA,EAAc,WAAA;AAAA,cACd,SAAA,EAAS,IAAA;AAAA,cACT,KAAA;AAAA,cACA,QAAA,EAAU,aAAA;AAAA,cACV;AAAA;AAAA,WACF,EACF,CAAA;AAAA,QAEJ;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,YAAA,GAAe,CAAC,UAAA,GAAa,KAAA,KAAU;AAC3C,IAAA,OAAO,6BACL,GAAA,CAAC,SAAA,EAAA,EACE,WAAC,EAAE,KAAA,EAAO,QAAO,KAAM;AACtB,MAAA,OAAO,iBAAA,CAAkB,OAAO,MAAM,CAAA;AAAA,IACxC,GACF,CAAA,mBAEA,GAAA,CAAC,SAAI,GAAA,EAAK,SAAA,EAAY,6BAAkB,EAAE,CAAA;AAAA,EAE9C,CAAA;AAEA,EAAA,MAAM,oBAAoB,MAAM;AAC9B,IAAA,uBACE,GAAA;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,SAClB;AAAA,QAEA,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAM,OAAA,EAAQ,sFAAA,EAAuF,QAAA,EAAA,iCAAA,EAEtG;AAAA;AAAA,KACF;AAAA,EAEJ,CAAA;AAEA,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACG,QAAA,EAAA;AAAA,IAAA,UAAA,GAAa,iBAAA,KAAsB,YAAA,EAAa;AAAA,IAChD,UAAA,oBACC,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,KAAA,EAAO,CAAA,CAAE,mDAAA,EAAqD,oBAAA,EAAsB;AAAA,UAClF,UAAU,KAAA,CAAM;AAAA,SACjB,CAAA;AAAA,QACD,oBAAA,EAAsB,KAAA;AAAA,QACtB,aAAA,EAAe,KAAA;AAAA,QACf,WAAW,MAAA,CAAO,KAAA;AAAA,QAClB,kBAAkB,MAAA,CAAO,YAAA;AAAA,QACzB,MAAA,EAAQ,UAAA;AAAA,QACR,WAAW,MAAM;AAxG3B,UAAA,IAAA,EAAA;AAyGY,UAAA,iBAAA,CAAkB,2BAAA,EAA6B;AAAA,YAC7C,UAAA,EAAA,CAAY,EAAA,GAAA,KAAA,CAAM,UAAA,KAAN,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAkB,IAAA;AAAA,YAC9B,QAAA,EAAU;AAAA,WACX,CAAA;AACD,UAAA,aAAA,CAAc,KAAK,CAAA;AAAA,QACrB,CAAA;AAAA,QAEC,uBAAa,IAAI;AAAA;AAAA;AACpB,GAAA,EAEJ,CAAA;AAEJ;AAEA,SAAS,UAAU,KAAA,EAAsB;AACvC,EAAA,OAAO;AAAA,IACL,OAAO,GAAA,CAAI;AAAA,MACT,KAAA,EAAO,MAAA;AAAA,MACP,MAAA,EAAQ;AAAA,KACT,CAAA;AAAA,IACD,cAAc,GAAA,CAAI;AAAA,MAChB,MAAA,EAAQ,MAAA;AAAA,MACR,UAAA,EAAY;AAAA,KACb;AAAA,GACH;AACF;;;;"}

package/dist/esm/components/visual-query-builder/AwesomeQueryBuilder.mjs

@@ -0,0 +1,266 @@
+import { jsx } from 'react/jsx-runtime';
+import { Utils, BasicConfig } from '@react-awesome-query-builder/ui';
+import { isString } from 'lodash';
+import { toOption, dateTime } from '@grafana/data';
+import { selectors } from '@grafana/e2e-selectors';
+import { t } from '@grafana/i18n';
+import { Select, DateTimePicker, Input, Button } from '@grafana/ui';
+
+"use strict";
+const buttonLabels = {
+  add: "Add",
+  remove: "Remove"
+};
+const emptyInitTree = {
+  id: Utils.uuid(),
+  type: "group"
+};
+const TIME_FILTER = "timeFilter";
+const macros = [TIME_FILTER];
+const widgets = {
+  ...BasicConfig.widgets,
+  text: {
+    ...BasicConfig.widgets.text,
+    factory: function TextInput(props) {
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          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)
+        }
+      );
+    }
+  },
+  number: {
+    ...BasicConfig.widgets.number,
+    factory: function NumberInput(props) {
+      return /* @__PURE__ */ jsx(
+        Input,
+        {
+          value: props == null ? void 0 : props.value,
+          placeholder: props == null ? void 0 : props.placeholder,
+          type: "number",
+          onChange: (e) => props == null ? void 0 : props.setValue(Number.parseInt(e.currentTarget.value, 10))
+        }
+      );
+    }
+  },
+  datetime: {
+    ...BasicConfig.widgets.datetime,
+    factory: function DateTimeInput(props) {
+      if ((props == null ? void 0 : props.operator) === "macros" /* MACROS */) {
+        return /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: props.id,
+            "aria-label": t("grafana-sql.components.widgets.aria-label-macros-value-selector", "Macros value selector"),
+            menuShouldPortal: true,
+            options: macros.map(toOption),
+            value: props == null ? void 0 : props.value,
+            onChange: (val) => props.setValue(val.value)
+          }
+        );
+      }
+      const dateValue = dateTime(props == null ? void 0 : props.value).isValid() ? dateTime(props == null ? void 0 : props.value).utc() : void 0;
+      return /* @__PURE__ */ jsx(
+        DateTimePicker,
+        {
+          onChange: (e) => {
+            props == null ? void 0 : props.setValue(e == null ? void 0 : e.format(BasicConfig.widgets.datetime.valueFormat));
+          },
+          date: dateValue
+        }
+      );
+    },
+    // Function for formatting widget’s value in SQL WHERE query.
+    sqlFormatValue: (val, field, widget, operator, operatorDefinition, rightFieldDef) => {
+      if (operator === "macros" /* MACROS */) {
+        if (macros.includes(val)) {
+          return val;
+        }
+        return void 0;
+      }
+      if (typeof BasicConfig.widgets.datetime.sqlFormatValue === "string" || typeof BasicConfig.widgets.datetime.sqlFormatValue === "object") {
+        return void 0;
+      }
+      const func = BasicConfig.widgets.datetime.sqlFormatValue;
+      return (func == null ? void 0 : func.call(BasicConfig.ctx, val, field, widget, operator, operatorDefinition, rightFieldDef)) || "";
+    }
+  }
+};
+const settings = {
+  ...BasicConfig.settings,
+  canRegroup: false,
+  maxNesting: 1,
+  canReorder: false,
+  showNot: false,
+  addRuleLabel: buttonLabels.add,
+  deleteLabel: buttonLabels.remove,
+  // This is the component that renders conjunctions (logical operators)
+  renderConjs: function Conjunctions(conjProps) {
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: conjProps == null ? void 0 : conjProps.id,
+        "aria-label": t("grafana-sql.components.settings.aria-label-conjunction", "Conjunction"),
+        "data-testid": selectors.components.SQLQueryEditor.filterConjunction,
+        menuShouldPortal: true,
+        options: (conjProps == null ? void 0 : conjProps.conjunctionOptions) ? Object.keys(conjProps == null ? void 0 : conjProps.conjunctionOptions).map(toOption) : void 0,
+        value: conjProps == null ? void 0 : conjProps.selectedConjunction,
+        onChange: (val) => conjProps == null ? void 0 : conjProps.setConjunction(val.value)
+      }
+    );
+  },
+  // This is the component that renders fields
+  renderField: function Field2(fieldProps) {
+    var _a;
+    const fields = ((_a = fieldProps == null ? void 0 : fieldProps.config) == null ? void 0 : _a.fields) || {};
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        id: fieldProps == null ? void 0 : fieldProps.id,
+        width: 25,
+        "aria-label": t("grafana-sql.components.settings.aria-label-field", "Field"),
+        "data-testid": selectors.components.SQLQueryEditor.filterField,
+        menuShouldPortal: true,
+        options: fieldProps == null ? void 0 : fieldProps.items.map((f) => {
+          var _a2, _b;
+          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 ? void 0 : fieldProps.selectedKey,
+        onChange: (val) => {
+          fieldProps == null ? void 0 : fieldProps.setField(val.label);
+        }
+      }
+    );
+  },
+  // This is the component used for the Add/Remove buttons
+  renderButton: function RAQBButton(buttonProps) {
+    return /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        "aria-label": t("grafana-sql.components.settings.title-button-filter", "{{ buttonLabel }} filter", {
+          buttonLabel: buttonProps == null ? void 0 : buttonProps.label
+        }),
+        onClick: buttonProps == null ? void 0 : buttonProps.onClick,
+        variant: "secondary",
+        size: "md",
+        icon: (buttonProps == null ? void 0 : buttonProps.label) === buttonLabels.add ? "plus" : "times"
+      }
+    );
+  },
+  // This is the component used for the fields operator selector
+  renderOperator: function Operator2(operatorProps) {
+    return /* @__PURE__ */ jsx(
+      Select,
+      {
+        options: operatorProps == null ? void 0 : operatorProps.items.map((op) => ({ label: op.label, value: op.key })),
+        "aria-label": t("grafana-sql.components.settings.aria-label-operator", "Operator"),
+        "data-testid": selectors.components.SQLQueryEditor.filterOperator,
+        menuShouldPortal: true,
+        value: operatorProps == null ? void 0 : operatorProps.selectedKey,
+        onChange: (val) => {
+          operatorProps == null ? void 0 : operatorProps.setField(val.value || "");
+        }
+      }
+    );
+  }
+};
+var Op = /* @__PURE__ */ ((Op2) => {
+  Op2["IN"] = "select_any_in";
+  Op2["NOT_IN"] = "select_not_any_in";
+  Op2["MACROS"] = "macros";
+  return Op2;
+})(Op || {});
+const customOperators = getCustomOperators(BasicConfig);
+const textWidget = BasicConfig.types.text.widgets.text;
+const opers = [...textWidget.operators || [], "select_any_in" /* IN */, "select_not_any_in" /* NOT_IN */];
+const customTextWidget = {
+  ...textWidget,
+  operators: opers
+};
+const customTypes = {
+  ...BasicConfig.types,
+  text: {
+    ...BasicConfig.types.text,
+    widgets: {
+      ...BasicConfig.types.text.widgets,
+      text: customTextWidget
+    }
+  },
+  datetime: {
+    ...BasicConfig.types.datetime,
+    widgets: {
+      ...BasicConfig.types.datetime.widgets,
+      datetime: {
+        ...BasicConfig.types.datetime.widgets.datetime,
+        operators: ["macros" /* MACROS */, ...BasicConfig.types.datetime.widgets.datetime.operators || []]
+      }
+    }
+  }
+};
+const raqbConfig = {
+  ...BasicConfig,
+  widgets,
+  settings,
+  operators: customOperators,
+  types: customTypes
+};
+const noop = () => "";
+function getCustomOperators(config) {
+  var _a, _b, _c, _d;
+  const { ...supportedOperators } = config.operators;
+  const sqlFormatInOp = ((_a = supportedOperators["select_any_in" /* IN */].sqlFormatOp) == null ? void 0 : _a.bind(config.ctx)) || noop;
+  const formatInOp = ((_b = supportedOperators["select_any_in" /* IN */].formatOp) == null ? void 0 : _b.bind(config.ctx)) || noop;
+  const customSqlInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => {
+    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
+  };
+  const sqlFormatNotInOp = ((_c = supportedOperators["select_not_any_in" /* NOT_IN */].sqlFormatOp) == null ? void 0 : _c.bind(config.ctx)) || noop;
+  const formatNotInOp = ((_d = supportedOperators["select_not_any_in" /* NOT_IN */].formatOp) == null ? void 0 : _d.bind(config.ctx)) || noop;
+  const customSqlNotInFormatter = (field, op, value, valueSrc, valueType, opDef, operatorOptions, fieldDef) => {
+    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);
+  };
+  const customOperators2 = {
+    ...supportedOperators,
+    ["select_any_in" /* IN */]: {
+      ...supportedOperators["select_any_in" /* IN */],
+      formatOp: (field, op, value, valueSrc) => {
+        return formatInOp(field, op, splitIfString(value), valueSrc);
+      },
+      sqlFormatOp: customSqlInFormatter
+    },
+    ["select_not_any_in" /* NOT_IN */]: {
+      ...supportedOperators["select_not_any_in" /* NOT_IN */],
+      formatOp: (field, op, value, valueSrc) => {
+        return formatNotInOp(field, op, splitIfString(value), valueSrc);
+      },
+      sqlFormatOp: customSqlNotInFormatter
+    },
+    ["macros" /* MACROS */]: {
+      label: t("grafana-sql.components.get-custom-operators.custom-operators.label.macros", "Macros"),
+      sqlFormatOp: (field, _operator, value) => {
+        if (value === TIME_FILTER) {
+          return `$__timeFilter(${field})`;
+        }
+        throw new Error("Invalid macro");
+      }
+    }
+  };
+  return customOperators2;
+}
+function splitIfString(value) {
+  if (isString(value)) {
+    return value.split(",");
+  }
+  return value;
+}
+
+export { emptyInitTree, raqbConfig, settings, widgets };
+//# sourceMappingURL=AwesomeQueryBuilder.mjs.map

package/dist/esm/components/visual-query-builder/AwesomeQueryBuilder.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AwesomeQueryBuilder.mjs","sources":["../../../../src/components/visual-query-builder/AwesomeQueryBuilder.tsx"],"sourcesContent":["import {\n  BaseOperator,\n  BasicConfig,\n  Config,\n  Field,\n  ImmutableList,\n  JsonTree,\n  Operator,\n  OperatorOptionsI,\n  Settings,\n  Utils,\n  ValueSource,\n  WidgetProps,\n  Widgets,\n} from '@react-awesome-query-builder/ui';\nimport { isString } from 'lodash';\n\nimport { dateTime, toOption } from '@grafana/data';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { t } from '@grafana/i18n';\nimport { Button, DateTimePicker, Input, Select } from '@grafana/ui';\n\nconst buttonLabels = {\n  add: 'Add',\n  remove: 'Remove',\n};\n\nexport const emptyInitTree: JsonTree = {\n  id: Utils.uuid(),\n  type: 'group',\n};\n\nconst TIME_FILTER = 'timeFilter';\nconst macros = [TIME_FILTER];\n\n// Widgets are the components rendered for each field type see the docs for more info\n// https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONFIG.adoc#configwidgets\nexport const widgets: Widgets = {\n  ...BasicConfig.widgets,\n  text: {\n    ...BasicConfig.widgets.text,\n    factory: function TextInput(props: WidgetProps) {\n      return (\n        <Input\n          value={props?.value || ''}\n          placeholder={props?.placeholder}\n          onChange={(e) => props?.setValue(e.currentTarget.value)}\n        />\n      );\n    },\n  },\n  number: {\n    ...BasicConfig.widgets.number,\n    factory: function NumberInput(props: WidgetProps) {\n      return (\n        <Input\n          value={props?.value}\n          placeholder={props?.placeholder}\n          type=\"number\"\n          onChange={(e) => props?.setValue(Number.parseInt(e.currentTarget.value, 10))}\n        />\n      );\n    },\n  },\n  datetime: {\n    ...BasicConfig.widgets.datetime,\n    factory: function DateTimeInput(props: WidgetProps) {\n      if (props?.operator === Op.MACROS) {\n        return (\n          <Select\n            id={props.id}\n            aria-label={t('grafana-sql.components.widgets.aria-label-macros-value-selector', 'Macros value selector')}\n            menuShouldPortal\n            options={macros.map(toOption)}\n            value={props?.value}\n            onChange={(val) => props.setValue(val.value)}\n          />\n        );\n      }\n      const dateValue = dateTime(props?.value).isValid() ? dateTime(props?.value).utc() : undefined;\n      return (\n        <DateTimePicker\n          onChange={(e) => {\n            props?.setValue(e?.format(BasicConfig.widgets.datetime.valueFormat));\n          }}\n          date={dateValue}\n        />\n      );\n    },\n    // Function for formatting widget’s value in SQL WHERE query.\n    sqlFormatValue: (val, field, widget, operator, operatorDefinition, rightFieldDef) => {\n      if (operator === Op.MACROS) {\n        if (macros.includes(val)) {\n          return val;\n        }\n        return undefined;\n      }\n\n      // This is just satisfying the type checker, this should never happen\n      if (\n        typeof BasicConfig.widgets.datetime.sqlFormatValue === 'string' ||\n        typeof BasicConfig.widgets.datetime.sqlFormatValue === 'object'\n      ) {\n        return undefined;\n      }\n      const func = BasicConfig.widgets.datetime.sqlFormatValue;\n      // We need to pass the ctx to this function this way so *this* is correct\n      return func?.call(BasicConfig.ctx, val, field, widget, operator, operatorDefinition, rightFieldDef) || '';\n    },\n  },\n};\n\n// Settings are the configuration options for the query builder see the docs for more info\n// https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONFIG.adoc#configsettings\nexport const settings: Settings = {\n  ...BasicConfig.settings,\n  canRegroup: false,\n  maxNesting: 1,\n  canReorder: false,\n  showNot: false,\n  addRuleLabel: buttonLabels.add,\n  deleteLabel: buttonLabels.remove,\n  // This is the component that renders conjunctions (logical operators)\n  renderConjs: function Conjunctions(conjProps) {\n    return (\n      <Select\n        id={conjProps?.id}\n        aria-label={t('grafana-sql.components.settings.aria-label-conjunction', 'Conjunction')}\n        data-testid={selectors.components.SQLQueryEditor.filterConjunction}\n        menuShouldPortal\n        options={conjProps?.conjunctionOptions ? Object.keys(conjProps?.conjunctionOptions).map(toOption) : undefined}\n        value={conjProps?.selectedConjunction}\n        onChange={(val) => conjProps?.setConjunction(val.value!)}\n      />\n    );\n  },\n  // This is the component that renders fields\n  renderField: function Field(fieldProps) {\n    const fields = fieldProps?.config?.fields || {};\n    return (\n      <Select\n        id={fieldProps?.id}\n        width={25}\n        aria-label={t('grafana-sql.components.settings.aria-label-field', 'Field')}\n        data-testid={selectors.components.SQLQueryEditor.filterField}\n        menuShouldPortal\n        options={fieldProps?.items.map((f) => {\n          // @ts-ignore\n          const icon = fields[f.key].mainWidgetProps?.customProps?.icon;\n          return {\n            label: f.label,\n            value: f.key,\n            icon,\n          };\n        })}\n        value={fieldProps?.selectedKey}\n        onChange={(val) => {\n          fieldProps?.setField(val.label!);\n        }}\n      />\n    );\n  },\n  // This is the component used for the Add/Remove buttons\n  renderButton: function RAQBButton(buttonProps) {\n    return (\n      <Button\n        type=\"button\"\n        aria-label={t('grafana-sql.components.settings.title-button-filter', '{{ buttonLabel }} filter', {\n          buttonLabel: buttonProps?.label,\n        })}\n        onClick={buttonProps?.onClick}\n        variant=\"secondary\"\n        size=\"md\"\n        icon={buttonProps?.label === buttonLabels.add ? 'plus' : 'times'}\n      />\n    );\n  },\n  // This is the component used for the fields operator selector\n  renderOperator: function Operator(operatorProps) {\n    return (\n      <Select\n        options={operatorProps?.items.map((op) => ({ label: op.label, value: op.key }))}\n        aria-label={t('grafana-sql.components.settings.aria-label-operator', 'Operator')}\n        data-testid={selectors.components.SQLQueryEditor.filterOperator}\n        menuShouldPortal\n        value={operatorProps?.selectedKey}\n        onChange={(val) => {\n          operatorProps?.setField(val.value || '');\n        }}\n      />\n    );\n  },\n};\n\n// add IN / NOT IN operators to text to support multi-value variables\nconst enum Op {\n  IN = 'select_any_in',\n  NOT_IN = 'select_not_any_in',\n  MACROS = 'macros',\n}\nconst customOperators = getCustomOperators(BasicConfig);\nconst textWidget = BasicConfig.types.text.widgets.text;\nconst opers = [...(textWidget.operators || []), Op.IN, Op.NOT_IN];\nconst customTextWidget = {\n  ...textWidget,\n  operators: opers,\n};\n\nconst customTypes = {\n  ...BasicConfig.types,\n  text: {\n    ...BasicConfig.types.text,\n    widgets: {\n      ...BasicConfig.types.text.widgets,\n      text: customTextWidget,\n    },\n  },\n  datetime: {\n    ...BasicConfig.types.datetime,\n    widgets: {\n      ...BasicConfig.types.datetime.widgets,\n      datetime: {\n        ...BasicConfig.types.datetime.widgets.datetime,\n        operators: [Op.MACROS, ...(BasicConfig.types.datetime.widgets.datetime.operators || [])],\n      },\n    },\n  },\n};\n\n// This is the configuration for the query builder that doesn't include the fields but all the other configuration for the UI\n// Fields should be added dynamically based on returned data\n// See the doc for more info https://github.com/ukrbublik/react-awesome-query-builder/blob/master/CONFIG.adoc\nexport const raqbConfig: Config = {\n  ...BasicConfig,\n  widgets,\n  settings,\n  operators: customOperators,\n  types: customTypes,\n};\n\nexport type { Config };\n\nconst noop = () => '';\n\nfunction getCustomOperators(config: BasicConfig) {\n  const { ...supportedOperators } = config.operators;\n\n  // IN operator expects array, override IN formatter for multi-value variables\n  const sqlFormatInOp = supportedOperators[Op.IN].sqlFormatOp?.bind(config.ctx) || noop;\n  const formatInOp = supportedOperators[Op.IN].formatOp?.bind(config.ctx) || noop;\n  const customSqlInFormatter = (\n    field: string,\n    op: string,\n    value: string | string[] | ImmutableList<string>,\n    valueSrc: ValueSource | undefined,\n    valueType: string | undefined,\n    opDef: Operator | undefined,\n    operatorOptions: OperatorOptionsI | undefined,\n    fieldDef: Field | undefined\n  ) => {\n    return sqlFormatInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);\n  };\n\n  // NOT IN operator expects array, override NOT IN formatter for multi-value variables\n  const sqlFormatNotInOp = supportedOperators[Op.NOT_IN].sqlFormatOp?.bind(config.ctx) || noop;\n  const formatNotInOp = supportedOperators[Op.NOT_IN].formatOp?.bind(config.ctx) || noop;\n  const customSqlNotInFormatter = (\n    field: string,\n    op: string,\n    value: string | string[] | ImmutableList<string>,\n    valueSrc: ValueSource | undefined,\n    valueType: string | undefined,\n    opDef: Operator | undefined,\n    operatorOptions: OperatorOptionsI | undefined,\n    fieldDef: Field | undefined\n  ) => {\n    return sqlFormatNotInOp(field, op, splitIfString(value), valueSrc, valueType, opDef, operatorOptions, fieldDef);\n  };\n\n  const customOperators: Record<string, BaseOperator> = {\n    ...supportedOperators,\n    [Op.IN]: {\n      ...supportedOperators[Op.IN],\n      formatOp: (\n        field: string,\n        op: string,\n        value: string | string[] | ImmutableList<string>,\n        valueSrc?: ValueSource\n      ) => {\n        return formatInOp(field, op, splitIfString(value), valueSrc);\n      },\n      sqlFormatOp: customSqlInFormatter,\n    },\n    [Op.NOT_IN]: {\n      ...supportedOperators[Op.NOT_IN],\n      formatOp: (\n        field: string,\n        op: string,\n        value: string | string[] | ImmutableList<string>,\n        valueSrc?: ValueSource\n      ) => {\n        return formatNotInOp(field, op, splitIfString(value), valueSrc);\n      },\n      sqlFormatOp: customSqlNotInFormatter,\n    },\n    [Op.MACROS]: {\n      label: t('grafana-sql.components.get-custom-operators.custom-operators.label.macros', 'Macros'),\n      sqlFormatOp: (field: string, _operator: string, value: string | string[] | ImmutableList<string>) => {\n        if (value === TIME_FILTER) {\n          return `$__timeFilter(${field})`;\n        }\n        throw new Error('Invalid macro');\n      },\n    },\n  };\n\n  return customOperators;\n}\n\n// value: string | List<string> but AQB uses a different version of Immutable\nfunction splitIfString(value: string | string[] | ImmutableList<string>) {\n  if (isString(value)) {\n    return value.split(',');\n  }\n  return value;\n}\n"],"names":["Field","_a","Operator","Op","customOperators"],"mappings":"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"}

package/dist/esm/components/visual-query-builder/GroupByRow.mjs

@@ -0,0 +1,65 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useCallback } from 'react';
+import { toOption } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { EditorList, InputGroup, AccessoryButton } from '@grafana/plugin-ui';
+import { Select } from '@grafana/ui';
+import { setGroupByField } from '../../utils/sql.utils.mjs';
+
+"use strict";
+function GroupByRow({ sql, columns, onSqlChange }) {
+  const onGroupByChange = useCallback(
+    (item) => {
+      const cleaned = item.map((v) => {
+        var _a;
+        return setGroupByField((_a = v.property) == null ? void 0 : _a.name);
+      });
+      const newSql = { ...sql, groupBy: cleaned };
+      onSqlChange(newSql);
+    },
+    [onSqlChange, sql]
+  );
+  return /* @__PURE__ */ jsx(
+    EditorList,
+    {
+      items: sql.groupBy,
+      onChange: onGroupByChange,
+      renderItem: makeRenderColumn({
+        options: columns
+      })
+    }
+  );
+}
+function makeRenderColumn({ options }) {
+  const renderColumn = function(item, onChangeItem, onDeleteItem) {
+    var _a;
+    return /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          value: ((_a = item.property) == null ? void 0 : _a.name) ? toOption(item.property.name) : null,
+          "aria-label": t("grafana-sql.components.make-render-column.render-column.aria-label-group-by", "Group by"),
+          options,
+          menuShouldPortal: true,
+          onChange: ({ value }) => value && onChangeItem(setGroupByField(value))
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        AccessoryButton,
+        {
+          "aria-label": t(
+            "grafana-sql.components.make-render-column.render-column.title-remove-group-by-column",
+            "Remove group by column"
+          ),
+          icon: "times",
+          variant: "secondary",
+          onClick: onDeleteItem
+        }
+      )
+    ] });
+  };
+  return renderColumn;
+}
+
+export { GroupByRow };
+//# sourceMappingURL=GroupByRow.mjs.map

package/dist/esm/components/visual-query-builder/GroupByRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupByRow.mjs","sources":["../../../../src/components/visual-query-builder/GroupByRow.tsx"],"sourcesContent":["import { useCallback } from 'react';\n\nimport { SelectableValue, toOption } from '@grafana/data';\nimport { t } from '@grafana/i18n';\nimport { AccessoryButton, EditorList, InputGroup } from '@grafana/plugin-ui';\nimport { Select } from '@grafana/ui';\n\nimport { QueryEditorGroupByExpression } from '../../expressions';\nimport { SQLExpression } from '../../types';\nimport { setGroupByField } from '../../utils/sql.utils';\n\ninterface GroupByRowProps {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n}\n\nexport function GroupByRow({ sql, columns, onSqlChange }: GroupByRowProps) {\n  const onGroupByChange = useCallback(\n    (item: Array<Partial<QueryEditorGroupByExpression>>) => {\n      // As new (empty object) items come in, we need to make sure they have the correct type\n      const cleaned = item.map((v) => setGroupByField(v.property?.name));\n      const newSql = { ...sql, groupBy: cleaned };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  return (\n    <EditorList\n      items={sql.groupBy!}\n      onChange={onGroupByChange}\n      renderItem={makeRenderColumn({\n        options: columns,\n      })}\n    />\n  );\n}\n\nfunction makeRenderColumn({ options }: { options?: Array<SelectableValue<string>> }) {\n  const renderColumn = function (\n    item: Partial<QueryEditorGroupByExpression>,\n    onChangeItem: (item: QueryEditorGroupByExpression) => void,\n    onDeleteItem: () => void\n  ) {\n    return (\n      <InputGroup>\n        <Select\n          value={item.property?.name ? toOption(item.property.name) : null}\n          aria-label={t('grafana-sql.components.make-render-column.render-column.aria-label-group-by', 'Group by')}\n          options={options}\n          menuShouldPortal\n          onChange={({ value }) => value && onChangeItem(setGroupByField(value))}\n        />\n        <AccessoryButton\n          aria-label={t(\n            'grafana-sql.components.make-render-column.render-column.title-remove-group-by-column',\n            'Remove group by column'\n          )}\n          icon=\"times\"\n          variant=\"secondary\"\n          onClick={onDeleteItem}\n        />\n      </InputGroup>\n    );\n  };\n  return renderColumn;\n}\n"],"names":[],"mappings":";;;;;;;;;AAiBO,SAAS,UAAA,CAAW,EAAE,GAAA,EAAK,OAAA,EAAS,aAAY,EAAoB;AACzE,EAAA,MAAM,eAAA,GAAkB,WAAA;AAAA,IACtB,CAAC,IAAA,KAAuD;AAEtD,MAAA,MAAM,OAAA,GAAU,IAAA,CAAK,GAAA,CAAI,CAAC,CAAA,KAAG;AArBnC,QAAA,IAAA,EAAA;AAqBsC,QAAA,OAAA,eAAA,CAAA,CAAgB,EAAA,GAAA,CAAA,CAAE,QAAA,KAAF,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAY,IAAI,CAAA;AAAA,MAAA,CAAC,CAAA;AACjE,MAAA,MAAM,MAAA,GAAS,EAAE,GAAG,GAAA,EAAK,SAAS,OAAA,EAAQ;AAC1C,MAAA,WAAA,CAAY,MAAM,CAAA;AAAA,IACpB,CAAA;AAAA,IACA,CAAC,aAAa,GAAG;AAAA,GACnB;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,OAAO,GAAA,CAAI,OAAA;AAAA,MACX,QAAA,EAAU,eAAA;AAAA,MACV,YAAY,gBAAA,CAAiB;AAAA,QAC3B,OAAA,EAAS;AAAA,OACV;AAAA;AAAA,GACH;AAEJ;AAEA,SAAS,gBAAA,CAAiB,EAAE,OAAA,EAAQ,EAAiD;AACnF,EAAA,MAAM,YAAA,GAAe,SACnB,IAAA,EACA,YAAA,EACA,YAAA,EACA;AA5CJ,IAAA,IAAA,EAAA;AA6CI,IAAA,4BACG,UAAA,EAAA,EACC,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,MAAA;AAAA,QAAA;AAAA,UACC,KAAA,EAAA,CAAA,CAAO,UAAK,QAAA,KAAL,IAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAe,QAAO,QAAA,CAAS,IAAA,CAAK,QAAA,CAAS,IAAI,CAAA,GAAI,IAAA;AAAA,UAC5D,YAAA,EAAY,CAAA,CAAE,6EAAA,EAA+E,UAAU,CAAA;AAAA,UACvG,OAAA;AAAA,UACA,gBAAA,EAAgB,IAAA;AAAA,UAChB,QAAA,EAAU,CAAC,EAAE,KAAA,OAAY,KAAA,IAAS,YAAA,CAAa,eAAA,CAAgB,KAAK,CAAC;AAAA;AAAA,OACvE;AAAA,sBACA,GAAA;AAAA,QAAC,eAAA;AAAA,QAAA;AAAA,UACC,YAAA,EAAY,CAAA;AAAA,YACV,sFAAA;AAAA,YACA;AAAA,WACF;AAAA,UACA,IAAA,EAAK,OAAA;AAAA,UACL,OAAA,EAAQ,WAAA;AAAA,UACR,OAAA,EAAS;AAAA;AAAA;AACX,KAAA,EACF,CAAA;AAAA,EAEJ,CAAA;AACA,EAAA,OAAO,YAAA;AACT;;;;"}

package/dist/esm/components/visual-query-builder/OrderByRow.mjs

@@ -0,0 +1,78 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { uniqueId } from 'lodash';
+import { useCallback } from 'react';
+import { toOption } from '@grafana/data';
+import { t } from '@grafana/i18n';
+import { EditorField, InputGroup } from '@grafana/plugin-ui';
+import { Select, Space, RadioButtonGroup, Input } from '@grafana/ui';
+import { setPropertyField } from '../../utils/sql.utils.mjs';
+
+"use strict";
+const sortOrderOptions = [
+  { description: "Sort by ascending", value: "ASC", icon: "sort-amount-up" },
+  { description: "Sort by descending", value: "DESC", icon: "sort-amount-down" }
+];
+function OrderByRow({ sql, onSqlChange, columns, showOffset }) {
+  var _a, _b;
+  const onSortOrderChange = useCallback(
+    (item) => {
+      const newSql = { ...sql, orderByDirection: item };
+      onSqlChange(newSql);
+    },
+    [onSqlChange, sql]
+  );
+  const onLimitChange = useCallback(
+    (event) => {
+      const newSql = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };
+      onSqlChange(newSql);
+    },
+    [onSqlChange, sql]
+  );
+  const onOffsetChange = useCallback(
+    (event) => {
+      const newSql = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };
+      onSqlChange(newSql);
+    },
+    [onSqlChange, sql]
+  );
+  const onOrderByChange = useCallback(
+    (item) => {
+      const newSql = { ...sql, orderBy: setPropertyField(item == null ? void 0 : item.value) };
+      if (item === null) {
+        newSql.orderByDirection = void 0;
+      }
+      onSqlChange(newSql);
+    },
+    [onSqlChange, sql]
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(EditorField, { label: t("grafana-sql.components.order-by-row.label-order-by", "Order by"), width: 25, children: /* @__PURE__ */ jsxs(InputGroup, { children: [
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          "aria-label": t("grafana-sql.components.order-by-row.aria-label-order-by", "Order by"),
+          options: columns,
+          value: ((_a = sql.orderBy) == null ? void 0 : _a.property.name) ? toOption(sql.orderBy.property.name) : null,
+          isClearable: true,
+          menuShouldPortal: true,
+          onChange: onOrderByChange
+        }
+      ),
+      /* @__PURE__ */ jsx(Space, { h: 1.5 }),
+      /* @__PURE__ */ jsx(
+        RadioButtonGroup,
+        {
+          options: sortOrderOptions,
+          disabled: !((_b = sql == null ? void 0 : sql.orderBy) == null ? void 0 : _b.property.name),
+          value: sql.orderByDirection,
+          onChange: onSortOrderChange
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsx(EditorField, { label: t("grafana-sql.components.order-by-row.label-limit", "Limit"), optional: true, width: 25, children: /* @__PURE__ */ jsx(Input, { type: "number", min: 0, id: uniqueId("limit-"), value: sql.limit || "", onChange: onLimitChange }) }),
+    showOffset && /* @__PURE__ */ jsx(EditorField, { label: t("grafana-sql.components.order-by-row.label-offset", "Offset"), optional: true, width: 25, children: /* @__PURE__ */ jsx(Input, { type: "number", id: uniqueId("offset-"), value: sql.offset || "", onChange: onOffsetChange }) })
+  ] });
+}
+
+export { OrderByRow };
+//# sourceMappingURL=OrderByRow.mjs.map

package/dist/esm/components/visual-query-builder/OrderByRow.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"OrderByRow.mjs","sources":["../../../../src/components/visual-query-builder/OrderByRow.tsx"],"sourcesContent":["import { uniqueId } from 'lodash';\nimport { useCallback } from 'react';\nimport * as React from 'react';\n\nimport { SelectableValue, toOption } from '@grafana/data';\nimport { t } from '@grafana/i18n';\nimport { EditorField, InputGroup } from '@grafana/plugin-ui';\nimport { Input, RadioButtonGroup, Select, Space } from '@grafana/ui';\n\nimport { SQLExpression } from '../../types';\nimport { setPropertyField } from '../../utils/sql.utils';\n\ntype OrderByRowProps = {\n  sql: SQLExpression;\n  onSqlChange: (sql: SQLExpression) => void;\n  columns?: Array<SelectableValue<string>>;\n  showOffset?: boolean;\n};\n\nconst sortOrderOptions = [\n  { description: 'Sort by ascending', value: 'ASC', icon: 'sort-amount-up' } as const,\n  { description: 'Sort by descending', value: 'DESC', icon: 'sort-amount-down' } as const,\n];\n\nexport function OrderByRow({ sql, onSqlChange, columns, showOffset }: OrderByRowProps) {\n  const onSortOrderChange = useCallback(\n    (item: 'ASC' | 'DESC') => {\n      const newSql: SQLExpression = { ...sql, orderByDirection: item };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onLimitChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const newSql: SQLExpression = { ...sql, limit: Number.parseInt(event.currentTarget.value, 10) };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onOffsetChange = useCallback(\n    (event: React.FormEvent<HTMLInputElement>) => {\n      const newSql: SQLExpression = { ...sql, offset: Number.parseInt(event.currentTarget.value, 10) };\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  const onOrderByChange = useCallback(\n    (item: SelectableValue<string>) => {\n      const newSql: SQLExpression = { ...sql, orderBy: setPropertyField(item?.value) };\n      if (item === null) {\n        newSql.orderByDirection = undefined;\n      }\n      onSqlChange(newSql);\n    },\n    [onSqlChange, sql]\n  );\n\n  return (\n    <>\n      <EditorField label={t('grafana-sql.components.order-by-row.label-order-by', 'Order by')} width={25}>\n        <InputGroup>\n          <Select\n            aria-label={t('grafana-sql.components.order-by-row.aria-label-order-by', 'Order by')}\n            options={columns}\n            value={sql.orderBy?.property.name ? toOption(sql.orderBy.property.name) : null}\n            isClearable\n            menuShouldPortal\n            onChange={onOrderByChange}\n          />\n\n          <Space h={1.5} />\n\n          <RadioButtonGroup\n            options={sortOrderOptions}\n            disabled={!sql?.orderBy?.property.name}\n            value={sql.orderByDirection}\n            onChange={onSortOrderChange}\n          />\n        </InputGroup>\n      </EditorField>\n      <EditorField label={t('grafana-sql.components.order-by-row.label-limit', 'Limit')} optional width={25}>\n        <Input type=\"number\" min={0} id={uniqueId('limit-')} value={sql.limit || ''} onChange={onLimitChange} />\n      </EditorField>\n      {showOffset && (\n        <EditorField label={t('grafana-sql.components.order-by-row.label-offset', 'Offset')} optional width={25}>\n          <Input type=\"number\" id={uniqueId('offset-')} value={sql.offset || ''} onChange={onOffsetChange} />\n        </EditorField>\n      )}\n    </>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/components/visual-query-builder/Preview.mjs

@@ -0,0 +1,51 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { css } from '@emotion/css';
+import { useCopyToClipboard } from 'react-use';
+import { Trans, t } from '@grafana/i18n';
+import { reportInteraction } from '@grafana/runtime';
+import { useStyles2, IconButton, Field, CodeEditor } from '@grafana/ui';
+import { formatSQL } from '../../utils/formatSQL.mjs';
+
+"use strict";
+function Preview({ rawSql, datasourceType }) {
+  const [_, copyToClipboard] = useCopyToClipboard();
+  const styles = useStyles2(getStyles);
+  const copyPreview = (rawSql2) => {
+    copyToClipboard(rawSql2);
+    reportInteraction("grafana_sql_preview_copied", {
+      datasource: datasourceType
+    });
+  };
+  const labelElement = /* @__PURE__ */ jsxs("div", { className: styles.labelWrapper, children: [
+    /* @__PURE__ */ jsx("span", { className: styles.label, children: /* @__PURE__ */ jsx(Trans, { i18nKey: "grafana-sql.components.preview.label-element.preview", children: "Preview" }) }),
+    /* @__PURE__ */ jsx(
+      IconButton,
+      {
+        tooltip: t("grafana-sql.components.preview.label-element.tooltip-copy-to-clipboard", "Copy to clipboard"),
+        onClick: () => copyPreview(rawSql),
+        name: "copy"
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsx(Field, { label: labelElement, className: styles.grow, children: /* @__PURE__ */ jsx(
+    CodeEditor,
+    {
+      language: "sql",
+      height: 80,
+      value: formatSQL(rawSql),
+      monacoOptions: { scrollbar: { vertical: "hidden" }, scrollBeyondLastLine: false },
+      readOnly: true,
+      showMiniMap: false
+    }
+  ) });
+}
+function getStyles(theme) {
+  return {
+    grow: css({ flexGrow: 1 }),
+    label: css({ fontSize: 12, fontWeight: theme.typography.fontWeightMedium }),
+    labelWrapper: css({ display: "flex", justifyContent: "space-between", paddingBottom: theme.spacing(0.5) })
+  };
+}
+
+export { Preview };
+//# sourceMappingURL=Preview.mjs.map