npm - @grafana/plugin-ui - Versions diffs - 0.12.0 → 0.13.0 - Mend

@grafana/plugin-ui 0.12.0 → 0.13.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1071) hide show

package/dist/esm/components/VisualQueryBuilder/components/LabelFilters.js CHANGED Viewed

@@ -1,6 +1,5 @@
-import { jsx } from 'react/jsx-runtime';
 import { isEqual } from 'lodash';
-import { useState, useEffect } from 'react';
+import React, { useState, useEffect } from 'react';
 import '@grafana/data';
 import { EditorField } from '../../QueryEditor/EditorField.js';
 import { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup.js';
@@ -35,36 +34,36 @@ function LabelFilters({
     }
   };
   const hasLabelFilter = items.some((item) => item.label && item.value);
-  return /* @__PURE__ */ jsx(EditorFieldGroup, { children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(EditorFieldGroup, null, /* @__PURE__ */ React.createElement(
     EditorField,
     {
       label: "Label filters",
       error: MISSING_LABEL_FILTER_ERROR_MESSAGE,
-      invalid: labelFilterRequired && !hasLabelFilter,
-      children: /* @__PURE__ */ jsx(
-        EditorList,
-        {
-          items,
-          onChange: onLabelsChange,
-          renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ jsx(
-            LabelFilterItem,
-            {
-              item,
-              items,
-              defaultOp,
-              onChange: onChangeItem,
-              onDelete,
-              onGetLabelNames,
-              onGetLabelValues,
-              invalidLabel: labelFilterRequired && !item.label,
-              invalidValue: labelFilterRequired && !item.value,
-              multiValueSeparator
-            }
-          )
-        }
-      )
-    }
-  ) });
+      invalid: labelFilterRequired && !hasLabelFilter
+    },
+    /* @__PURE__ */ React.createElement(
+      EditorList,
+      {
+        items,
+        onChange: onLabelsChange,
+        renderItem: (item, onChangeItem, onDelete) => /* @__PURE__ */ React.createElement(
+          LabelFilterItem,
+          {
+            item,
+            items,
+            defaultOp,
+            onChange: onChangeItem,
+            onDelete,
+            onGetLabelNames,
+            onGetLabelValues,
+            invalidLabel: labelFilterRequired && !item.label,
+            invalidValue: labelFilterRequired && !item.value,
+            multiValueSeparator
+          }
+        )
+      }
+    )
+  ));
 }
 export { LabelFilters, MISSING_LABEL_FILTER_ERROR_MESSAGE };

package/dist/esm/components/VisualQueryBuilder/components/LabelFilters.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"LabelFilters.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport { useEffect, useState } from 'react';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { type QueryBuilderLabelFilter } from '../types';\n\nimport { EditorField } from '../../QueryEditor/EditorField';\nimport { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup';\nimport { EditorList } from '../../QueryEditor/EditorList';\nimport { LabelFilterItem } from './LabelFilterItem';\n\nexport const MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)';\n\nexport interface Props {\n labelsFilters: QueryBuilderLabelFilter[];\n onChange: (labelFilters: QueryBuilderLabelFilter[]) => void;\n onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n /** If set to true, component will show error message until at least 1 filter is selected */\n labelFilterRequired?: boolean;\n multiValueSeparator?: string;\n}\n\nexport function LabelFilters({\n labelsFilters,\n onChange,\n onGetLabelNames,\n onGetLabelValues,\n labelFilterRequired,\n multiValueSeparator,\n}: Props) {\n const defaultOp = '=';\n const [items, setItems] = useState<Array<Partial<QueryBuilderLabelFilter>>>([{ op: defaultOp }]);\n\n useEffect(() => {\n if (labelsFilters.length > 0) {\n setItems(labelsFilters);\n } else {\n setItems([{ op: defaultOp }]);\n }\n }, [labelsFilters]);\n\n const onLabelsChange = (newItems: Array<Partial<QueryBuilderLabelFilter>>) => {\n setItems(newItems);\n\n // Extract full label filters with both label & value\n const newLabels = newItems.filter(\n (item): item is QueryBuilderLabelFilter => item.label !== undefined && item.value !== undefined\n );\n if (!isEqual(newLabels, labelsFilters)) {\n onChange(newLabels);\n }\n };\n\n const hasLabelFilter = items.some((item) => item.label && item.value);\n\n return (\n <EditorFieldGroup>\n <EditorField\n label=\"Label filters\"\n error={MISSING_LABEL_FILTER_ERROR_MESSAGE}\n invalid={labelFilterRequired && !hasLabelFilter}\n >\n <EditorList\n items={items}\n onChange={onLabelsChange}\n renderItem={(item: Partial<QueryBuilderLabelFilter>, onChangeItem, onDelete) => (\n <LabelFilterItem\n item={item}\n items={items}\n defaultOp={defaultOp}\n onChange={onChangeItem}\n onDelete={onDelete}\n onGetLabelNames={onGetLabelNames}\n onGetLabelValues={onGetLabelValues}\n invalidLabel={labelFilterRequired && !item.label}\n invalidValue={labelFilterRequired && !item.value}\n multiValueSeparator={multiValueSeparator}\n />\n )}\n />\n </EditorField>\n </EditorFieldGroup>\n );\n}\n"],"names":[],"mappings":"~~;;;;;;;;;~~AAYO,MAAM,kCAAqC,GAAA;AAY3C,SAAS,YAAa,CAAA;AAAA,EAC3B,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAU,EAAA;AACR,EAAA,MAAM,SAAY,GAAA,GAAA;AAClB,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAkD,CAAC,EAAE,EAAA,EAAI,SAAU,EAAC,CAAC,CAAA;AAE/F,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,MAAA,QAAA,CAAS,aAAa,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,QAAA,CAAS,CAAC,EAAE,EAAI,EAAA,SAAA,EAAW,CAAC,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAM,MAAA,cAAA,GAAiB,CAAC,QAAsD,KAAA;AAC5E,IAAA,QAAA,CAAS,QAAQ,CAAA;AAGjB,IAAA,MAAM,YAAY,QAAS,CAAA,MAAA;AAAA,MACzB,CAAC,IAA0C,KAAA,IAAA,CAAK,KAAU,KAAA,SAAA,IAAa,KAAK,KAAU,KAAA;AAAA,KACxF;AACA,IAAA,IAAI,CAAC,OAAA,CAAQ,SAAW,EAAA,aAAa,CAAG,EAAA;AACtC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,MAAM,IAAK,CAAA,CAAC,SAAS,IAAK,CAAA,KAAA,IAAS,KAAK,KAAK,CAAA;AAEpE,EAAA,~~2BACG~~,gBACC,EAAA,~~EAAA~~,~~QAAA,~~kBAAA,~~GAAA~~;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,eAAA;AAAA,MACN,KAAO,EAAA,kCAAA;AAAA,MACP,OAAA,EAAS,uBAAuB,CAAC,~~cAAA~~;AAAA,~~MAEjC~~,~~QAAA~~,~~kBAAA~~,~~GAAA~~;AAAA,~~QAAC~~,UAAA;AAAA,~~QAAA~~;AAAA,~~UACC~~,KAAA;AAAA,~~UACA~~,QAAU,EAAA,cAAA;AAAA,~~UACV~~,UAAY,EAAA,CAAC,IAAwC,EAAA,YAAA,EAAc,QACjE,qBAAA,~~GAAA~~;AAAA,~~YAAC~~,eAAA;AAAA,~~YAAA~~;AAAA,~~cACC~~,IAAA;AAAA,~~cACA~~,KAAA;AAAA,~~cACA~~,SAAA;AAAA,~~cACA~~,QAAU,EAAA,YAAA;AAAA,~~cACV~~,QAAA;AAAA,~~cACA~~,eAAA;AAAA,~~cACA~~,gBAAA;AAAA,~~cACA~~,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,~~cAC3C~~,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,~~cAC3C~~;AAAA;AAAA;AACF;AAAA;AAEJ~~;AAAA~~,GAEJ,~~EAAA,~~CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"LabelFilters.js","sources":["../../../../../src/components/VisualQueryBuilder/components/LabelFilters.tsx"],"sourcesContent":["import { isEqual } from 'lodash';\nimport React, { useEffect, useState } from 'react';\n\nimport { type SelectableValue } from '@grafana/data';\n\nimport { type QueryBuilderLabelFilter } from '../types';\n\nimport { EditorField } from '../../QueryEditor/EditorField';\nimport { EditorFieldGroup } from '../../QueryEditor/EditorFieldGroup';\nimport { EditorList } from '../../QueryEditor/EditorList';\nimport { LabelFilterItem } from './LabelFilterItem';\n\nexport const MISSING_LABEL_FILTER_ERROR_MESSAGE = 'Select at least 1 label filter (label and value)';\n\nexport interface Props {\n labelsFilters: QueryBuilderLabelFilter[];\n onChange: (labelFilters: QueryBuilderLabelFilter[]) => void;\n onGetLabelNames: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n onGetLabelValues: (forLabel: Partial<QueryBuilderLabelFilter>) => Promise<SelectableValue[]>;\n /** If set to true, component will show error message until at least 1 filter is selected */\n labelFilterRequired?: boolean;\n multiValueSeparator?: string;\n}\n\nexport function LabelFilters({\n labelsFilters,\n onChange,\n onGetLabelNames,\n onGetLabelValues,\n labelFilterRequired,\n multiValueSeparator,\n}: Props) {\n const defaultOp = '=';\n const [items, setItems] = useState<Array<Partial<QueryBuilderLabelFilter>>>([{ op: defaultOp }]);\n\n useEffect(() => {\n if (labelsFilters.length > 0) {\n setItems(labelsFilters);\n } else {\n setItems([{ op: defaultOp }]);\n }\n }, [labelsFilters]);\n\n const onLabelsChange = (newItems: Array<Partial<QueryBuilderLabelFilter>>) => {\n setItems(newItems);\n\n // Extract full label filters with both label & value\n const newLabels = newItems.filter(\n (item): item is QueryBuilderLabelFilter => item.label !== undefined && item.value !== undefined\n );\n if (!isEqual(newLabels, labelsFilters)) {\n onChange(newLabels);\n }\n };\n\n const hasLabelFilter = items.some((item) => item.label && item.value);\n\n return (\n <EditorFieldGroup>\n <EditorField\n label=\"Label filters\"\n error={MISSING_LABEL_FILTER_ERROR_MESSAGE}\n invalid={labelFilterRequired && !hasLabelFilter}\n >\n <EditorList\n items={items}\n onChange={onLabelsChange}\n renderItem={(item: Partial<QueryBuilderLabelFilter>, onChangeItem, onDelete) => (\n <LabelFilterItem\n item={item}\n items={items}\n defaultOp={defaultOp}\n onChange={onChangeItem}\n onDelete={onDelete}\n onGetLabelNames={onGetLabelNames}\n onGetLabelValues={onGetLabelValues}\n invalidLabel={labelFilterRequired && !item.label}\n invalidValue={labelFilterRequired && !item.value}\n multiValueSeparator={multiValueSeparator}\n />\n )}\n />\n </EditorField>\n </EditorFieldGroup>\n );\n}\n"],"names":[],"mappings":";;;;;;;;AAYO,MAAM,kCAAqC,GAAA;AAY3C,SAAS,YAAa,CAAA;AAAA,EAC3B,aAAA;AAAA,EACA,QAAA;AAAA,EACA,eAAA;AAAA,EACA,gBAAA;AAAA,EACA,mBAAA;AAAA,EACA;AACF,CAAU,EAAA;AACR,EAAA,MAAM,SAAY,GAAA,GAAA;AAClB,EAAM,MAAA,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAAkD,CAAC,EAAE,EAAA,EAAI,SAAU,EAAC,CAAC,CAAA;AAE/F,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,aAAA,CAAc,SAAS,CAAG,EAAA;AAC5B,MAAA,QAAA,CAAS,aAAa,CAAA;AAAA,KACjB,MAAA;AACL,MAAA,QAAA,CAAS,CAAC,EAAE,EAAI,EAAA,SAAA,EAAW,CAAC,CAAA;AAAA;AAC9B,GACF,EAAG,CAAC,aAAa,CAAC,CAAA;AAElB,EAAM,MAAA,cAAA,GAAiB,CAAC,QAAsD,KAAA;AAC5E,IAAA,QAAA,CAAS,QAAQ,CAAA;AAGjB,IAAA,MAAM,YAAY,QAAS,CAAA,MAAA;AAAA,MACzB,CAAC,IAA0C,KAAA,IAAA,CAAK,KAAU,KAAA,SAAA,IAAa,KAAK,KAAU,KAAA;AAAA,KACxF;AACA,IAAA,IAAI,CAAC,OAAA,CAAQ,SAAW,EAAA,aAAa,CAAG,EAAA;AACtC,MAAA,QAAA,CAAS,SAAS,CAAA;AAAA;AACpB,GACF;AAEA,EAAM,MAAA,cAAA,GAAiB,MAAM,IAAK,CAAA,CAAC,SAAS,IAAK,CAAA,KAAA,IAAS,KAAK,KAAK,CAAA;AAEpE,EAAA,2CACG,gBACC,EAAA,IAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAM,EAAA,eAAA;AAAA,MACN,KAAO,EAAA,kCAAA;AAAA,MACP,OAAA,EAAS,uBAAuB,CAAC;AAAA,KAAA;AAAA,oBAEjC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,KAAA;AAAA,QACA,QAAU,EAAA,cAAA;AAAA,QACV,UAAY,EAAA,CAAC,IAAwC,EAAA,YAAA,EAAc,QACjE,qBAAA,KAAA,CAAA,aAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,KAAA;AAAA,YACA,SAAA;AAAA,YACA,QAAU,EAAA,YAAA;AAAA,YACV,QAAA;AAAA,YACA,eAAA;AAAA,YACA,gBAAA;AAAA,YACA,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,YAC3C,YAAA,EAAc,mBAAuB,IAAA,CAAC,IAAK,CAAA,KAAA;AAAA,YAC3C;AAAA;AAAA;AACF;AAAA;AAEJ,GAEJ,CAAA;AAEJ;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/OperationEditor.js CHANGED Viewed

@@ -1,9 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { cx, css } from '@emotion/css';
 import { Draggable } from '@hello-pangea/dnd';
 import '@grafana/data';
 import { useTheme2, InlineField } from '@grafana/ui';
-import 'react';
 import { OperationEditorBody } from './OperationEditorBody.js';
 function OperationEditor({
@@ -26,11 +25,7 @@ function OperationEditor({
   const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;
   const styles = getStyles(theme);
   if (!def) {
-    return /* @__PURE__ */ jsxs("span", { children: [
-      "Operation ",
-      operation.id,
-      " not found"
-    ] });
+    return /* @__PURE__ */ React.createElement("span", null, "Operation ", operation.id, " not found");
   }
   const isInvalid = (isDragging) => {
     if (isDragging) {
@@ -38,34 +33,34 @@ function OperationEditor({
     }
     return isConflicting ? true : undefined;
   };
-  return /* @__PURE__ */ jsx(Draggable, { draggableId: `operation-${index}`, index, children: (provided, snapshot) => /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement(Draggable, { draggableId: `operation-${index}`, index }, (provided, snapshot) => /* @__PURE__ */ React.createElement(
     InlineField,
     {
       error: "You have conflicting label filters",
       invalid: isInvalid(snapshot.isDragging),
-      className: cx(styles.error, styles.cardWrapper),
-      children: /* @__PURE__ */ jsx(
-        OperationEditorBody,
-        {
-          provided,
-          flash,
-          highlight,
-          isConflicting,
-          index,
-          operation,
-          definition: def,
-          onChange,
-          onRemove,
-          onToggle,
-          queryModeller,
-          query,
-          timeRange,
-          onRunQuery,
-          datasource
-        }
-      )
-    }
-  ) });
+      className: cx(styles.error, styles.cardWrapper)
+    },
+    /* @__PURE__ */ React.createElement(
+      OperationEditorBody,
+      {
+        provided,
+        flash,
+        highlight,
+        isConflicting,
+        index,
+        operation,
+        definition: def,
+        onChange,
+        onRemove,
+        onToggle,
+        queryModeller,
+        query,
+        timeRange,
+        onRunQuery,
+        datasource
+      }
+    )
+  ));
 }
 const getStyles = (theme, isConflicting) => {
   return {

package/dist/esm/components/VisualQueryBuilder/components/OperationEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport { Draggable } from '@hello-pangea/dnd';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { InlineField, useTheme2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { OperationEditorBody } from './OperationEditorBody';\n\ninterface Props<T extends VisualQuery> {\n operation: QueryBuilderOperation;\n index: number;\n query: T;\n datasource: DataSourceApi;\n queryModeller: VisualQueryModeller;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationEditor<T extends VisualQuery>({\n operation,\n index,\n onRemove,\n onToggle,\n onChange,\n onRunQuery,\n queryModeller,\n query,\n datasource,\n flash,\n highlight,\n timeRange,\n isConflictingOperation,\n}: Props<T>) {\n const def = queryModeller.getOperationDefinition(operation.id);\n\n const theme = useTheme2();\n const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;\n const styles = getStyles(theme, isConflicting);\n\n if (!def) {\n return <span>Operation {operation.id} not found</span>;\n }\n\n const isInvalid = (isDragging: boolean) => {\n if (isDragging) {\n return undefined;\n }\n\n return isConflicting ? true : undefined;\n };\n\n return (\n <Draggable draggableId={`operation-${index}`} index={index}>\n {(provided, snapshot) => (\n <InlineField\n error={'You have conflicting label filters'}\n invalid={isInvalid(snapshot.isDragging)}\n className={cx(styles.error, styles.cardWrapper)}\n >\n <OperationEditorBody\n provided={provided}\n flash={flash}\n highlight={highlight}\n isConflicting={isConflicting}\n index={index}\n operation={operation}\n definition={def}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n query={query}\n timeRange={timeRange}\n onRunQuery={onRunQuery}\n datasource={datasource}\n />\n </InlineField>\n )}\n </Draggable>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n };\n};\n"],"names":[],"mappings":"~~;;;;;;;;AAyBO~~,SAAS,eAAuC,CAAA;AAAA,EACrD,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAa,EAAA;AACX,EAAA,MAAM,GAAM,GAAA,aAAA,CAAc,sBAAuB,CAAA,SAAA,CAAU,EAAE,CAAA;AAE7D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,gBAAgB,sBAAyB,GAAA,sBAAA,CAAuB,SAAW,EAAA,KAAA,CAAM,UAAU,CAAI,GAAA,KAAA;AACrG,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAoB,CAAA;AAE7C,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAA,~~4BAAQ~~,~~MAAK~~,~~EAAA~~,~~EAAA~~,~~QAAA~~,~~EAAA;AAAA,~~MAAA,~~YAAA;AAAA~~,~~MAAW~~,~~SAAU~~,~~CAAA~~,EAAA~~;AAAA~~,~~MAAG;AAAA~~,~~KAAU~~,~~EAAA~~,CAAA;AAAA;AAGjD,EAAM,MAAA,SAAA,GAAY,CAAC,UAAwB,KAAA;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAO,OAAA,SAAA;AAAA;AAGT,IAAA,OAAO,gBAAgB,IAAO,GAAA,SAAA;AAAA,GAChC;AAEA,EACE,uBAAA,~~GAAA~~,CAAC,aAAU,WAAa,EAAA,CAAA,UAAA,EAAa,KAAK,CAAI,CAAA,EAAA,KAAA,EAC3C,~~QAAC~~,~~EAAA,CAAA,~~QAAA,EAAU,QACV,qBAAA,~~GAAA~~;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,oCAAA;AAAA,MACP,OAAA,EAAS,SAAU,CAAA,QAAA,CAAS,UAAU,CAAA;AAAA,MACtC,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,OAAO,WAAW,~~CAAA~~;AAAA,~~MAE9C~~,~~QAAA~~,~~kBAAA~~,~~GAAA~~;AAAA,~~QAAC~~,mBAAA;AAAA,~~QAAA~~;AAAA,~~UACC~~,QAAA;AAAA,~~UACA~~,KAAA;AAAA,~~UACA~~,SAAA;AAAA,~~UACA~~,aAAA;AAAA,~~UACA~~,KAAA;AAAA,~~UACA~~,SAAA;AAAA,~~UACA~~,UAAY,EAAA,GAAA;AAAA,~~UACZ~~,QAAA;AAAA,~~UACA~~,QAAA;AAAA,~~UACA~~,QAAA;AAAA,~~UACA~~,aAAA;AAAA,~~UACA~~,KAAA;AAAA,~~UACA~~,SAAA;AAAA,~~UACA~~,UAAA;AAAA,~~UACA~~;AAAA;AAAA;AACF~~;AAAA~~,GAGN,~~EAAA,~~CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,aAA2B,KAAA;AAClE,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"OperationEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditor.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { Draggable } from '@hello-pangea/dnd';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { InlineField, useTheme2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { OperationEditorBody } from './OperationEditorBody';\n\ninterface Props<T extends VisualQuery> {\n operation: QueryBuilderOperation;\n index: number;\n query: T;\n datasource: DataSourceApi;\n queryModeller: VisualQueryModeller;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationEditor<T extends VisualQuery>({\n operation,\n index,\n onRemove,\n onToggle,\n onChange,\n onRunQuery,\n queryModeller,\n query,\n datasource,\n flash,\n highlight,\n timeRange,\n isConflictingOperation,\n}: Props<T>) {\n const def = queryModeller.getOperationDefinition(operation.id);\n\n const theme = useTheme2();\n const isConflicting = isConflictingOperation ? isConflictingOperation(operation, query.operations) : false;\n const styles = getStyles(theme, isConflicting);\n\n if (!def) {\n return <span>Operation {operation.id} not found</span>;\n }\n\n const isInvalid = (isDragging: boolean) => {\n if (isDragging) {\n return undefined;\n }\n\n return isConflicting ? true : undefined;\n };\n\n return (\n <Draggable draggableId={`operation-${index}`} index={index}>\n {(provided, snapshot) => (\n <InlineField\n error={'You have conflicting label filters'}\n invalid={isInvalid(snapshot.isDragging)}\n className={cx(styles.error, styles.cardWrapper)}\n >\n <OperationEditorBody\n provided={provided}\n flash={flash}\n highlight={highlight}\n isConflicting={isConflicting}\n index={index}\n operation={operation}\n definition={def}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n query={query}\n timeRange={timeRange}\n onRunQuery={onRunQuery}\n datasource={datasource}\n />\n </InlineField>\n )}\n </Draggable>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n };\n};\n"],"names":[],"mappings":";;;;;;;AA0BO,SAAS,eAAuC,CAAA;AAAA,EACrD,SAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,KAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAa,EAAA;AACX,EAAA,MAAM,GAAM,GAAA,aAAA,CAAc,sBAAuB,CAAA,SAAA,CAAU,EAAE,CAAA;AAE7D,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAA,MAAM,gBAAgB,sBAAyB,GAAA,sBAAA,CAAuB,SAAW,EAAA,KAAA,CAAM,UAAU,CAAI,GAAA,KAAA;AACrG,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAoB,CAAA;AAE7C,EAAA,IAAI,CAAC,GAAK,EAAA;AACR,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAK,YAAW,EAAA,SAAA,CAAU,IAAG,YAAU,CAAA;AAAA;AAGjD,EAAM,MAAA,SAAA,GAAY,CAAC,UAAwB,KAAA;AACzC,IAAA,IAAI,UAAY,EAAA;AACd,MAAO,OAAA,SAAA;AAAA;AAGT,IAAA,OAAO,gBAAgB,IAAO,GAAA,SAAA;AAAA,GAChC;AAEA,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,aAAU,WAAa,EAAA,CAAA,UAAA,EAAa,KAAK,CAAI,CAAA,EAAA,KAAA,EAAA,EAC3C,CAAC,QAAA,EAAU,QACV,qBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,WAAA;AAAA,IAAA;AAAA,MACC,KAAO,EAAA,oCAAA;AAAA,MACP,OAAA,EAAS,SAAU,CAAA,QAAA,CAAS,UAAU,CAAA;AAAA,MACtC,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,KAAA,EAAO,OAAO,WAAW;AAAA,KAAA;AAAA,oBAE9C,KAAA,CAAA,aAAA;AAAA,MAAC,mBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAY,EAAA,GAAA;AAAA,QACZ,QAAA;AAAA,QACA,QAAA;AAAA,QACA,QAAA;AAAA,QACA,aAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,UAAA;AAAA,QACA;AAAA;AAAA;AACF,GAGN,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,aAA2B,KAAA;AAClE,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC9B;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/OperationEditorBody.js CHANGED Viewed

@@ -1,5 +1,4 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useRef, useState, useEffect } from 'react';
+import React, { useRef, useState, useEffect } from 'react';
 import '@hello-pangea/dnd';
 import { useTheme2, Tooltip, Icon, Button } from '@grafana/ui';
 import { cx, css } from '@emotion/css';
@@ -70,7 +69,7 @@ function OperationEditorBody({
       restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);
     }
   }
-  return /* @__PURE__ */ jsxs(
+  return /* @__PURE__ */ React.createElement(
     "div",
     {
       className: cx(styles.card, {
@@ -80,68 +79,54 @@ function OperationEditorBody({
       }),
       ref: provided.innerRef,
       ...provided.draggableProps,
-      "data-testid": `operations.${index}.wrapper`,
-      children: [
-        /* @__PURE__ */ jsx(
-          OperationHeader,
-          {
-            operation,
-            dragHandleProps: provided.dragHandleProps,
-            definition,
-            index,
-            onChange,
-            onRemove,
-            onToggle,
-            queryModeller
-          }
-        ),
-        /* @__PURE__ */ jsx("div", { className: styles.body, children: operation.params.map((param, paramIndex) => {
-          const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
-          const Editor = getOperationParamEditor(paramDef);
-          return /* @__PURE__ */ jsxs("div", { className: styles.paramRow, children: [
-            !paramDef.hideName && /* @__PURE__ */ jsxs("div", { className: styles.paramName, children: [
-              /* @__PURE__ */ jsx("label", { htmlFor: getOperationParamId(id, paramIndex), children: paramDef.name }),
-              paramDef.description && /* @__PURE__ */ jsx(Tooltip, { placement: "top", content: paramDef.description, theme: "info", children: /* @__PURE__ */ jsx(Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }) })
-            ] }),
-            /* @__PURE__ */ jsx("div", { className: styles.paramValue, children: /* @__PURE__ */ jsxs(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false, children: [
-              /* @__PURE__ */ jsx(
-                Editor,
-                {
-                  index: paramIndex,
-                  paramDef,
-                  value: operation.params[paramIndex],
-                  operation,
-                  operationId: id,
-                  onChange: onParamValueChanged,
-                  onRunQuery,
-                  query,
-                  datasource,
-                  timeRange,
-                  queryModeller
-                }
-              ),
-              paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ jsx(
-                Button,
-                {
-                  "data-testid": `operations.${index}.remove-rest-param`,
-                  size: "sm",
-                  fill: "text",
-                  icon: "times",
-                  variant: "secondary",
-                  title: `Remove ${paramDef.name}`,
-                  onClick: () => onRemoveRestParam(paramIndex)
-                }
-              )
-            ] }) })
-          ] }, `${paramIndex}-1`);
-        }) }),
-        restParam,
-        index < query.operations.length - 1 && /* @__PURE__ */ jsxs("div", { className: styles.arrow, children: [
-          /* @__PURE__ */ jsx("div", { className: styles.arrowLine }),
-          /* @__PURE__ */ jsx("div", { className: styles.arrowArrow })
-        ] })
-      ]
-    }
+      "data-testid": `operations.${index}.wrapper`
+    },
+    /* @__PURE__ */ React.createElement(
+      OperationHeader,
+      {
+        operation,
+        dragHandleProps: provided.dragHandleProps,
+        definition,
+        index,
+        onChange,
+        onRemove,
+        onToggle,
+        queryModeller
+      }
+    ),
+    /* @__PURE__ */ React.createElement("div", { className: styles.body }, operation.params.map((param, paramIndex) => {
+      const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];
+      const Editor = getOperationParamEditor(paramDef);
+      return /* @__PURE__ */ React.createElement("div", { className: styles.paramRow, key: `${paramIndex}-1` }, !paramDef.hideName && /* @__PURE__ */ React.createElement("div", { className: styles.paramName }, /* @__PURE__ */ React.createElement("label", { htmlFor: getOperationParamId(id, paramIndex) }, paramDef.name), paramDef.description && /* @__PURE__ */ React.createElement(Tooltip, { placement: "top", content: paramDef.description, theme: "info" }, /* @__PURE__ */ React.createElement(Icon, { name: "info-circle", size: "sm", className: styles.infoIcon }))), /* @__PURE__ */ React.createElement("div", { className: styles.paramValue }, /* @__PURE__ */ React.createElement(EditorStack, { gap: 0.5, direction: "row", alignItems: "center", wrap: false }, /* @__PURE__ */ React.createElement(
+        Editor,
+        {
+          index: paramIndex,
+          paramDef,
+          value: operation.params[paramIndex],
+          operation,
+          operationId: id,
+          onChange: onParamValueChanged,
+          onRunQuery,
+          query,
+          datasource,
+          timeRange,
+          queryModeller
+        }
+      ), paramDef.restParam && (operation.params.length > definition.params.length || paramDef.optional) && /* @__PURE__ */ React.createElement(
+        Button,
+        {
+          "data-testid": `operations.${index}.remove-rest-param`,
+          size: "sm",
+          fill: "text",
+          icon: "times",
+          variant: "secondary",
+          title: `Remove ${paramDef.name}`,
+          onClick: () => onRemoveRestParam(paramIndex)
+        }
+      ))));
+    })),
+    restParam,
+    index < query.operations.length - 1 && /* @__PURE__ */ React.createElement("div", { className: styles.arrow }, /* @__PURE__ */ React.createElement("div", { className: styles.arrowLine }), /* @__PURE__ */ React.createElement("div", { className: styles.arrowArrow }))
   );
 }
 const getStyles = (theme, isConflicting) => {
@@ -252,7 +237,7 @@ function callParamChangedThenOnChange(def, operation, operationIndex, paramIndex
   }
 }
 function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, paramIndex, styles) {
-  return /* @__PURE__ */ jsx("div", { className: styles.restParam, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ React.createElement("div", { className: styles.restParam, key: `${paramIndex}-2` }, /* @__PURE__ */ React.createElement(
     Button,
     {
       size: "sm",
@@ -260,10 +245,10 @@ function renderAddRestParamButton(paramDef, onAddRestParam, operationIndex, para
       title: `Add ${paramDef.name}`.trimEnd(),
       variant: "secondary",
       onClick: onAddRestParam,
-      "data-testid": `operations.${operationIndex}.add-rest-param`,
-      children: paramDef.name
-    }
-  ) }, `${paramIndex}-2`);
+      "data-testid": `operations.${operationIndex}.add-rest-param`
+    },
+    paramDef.name
+  ));
 }
 export { OperationEditorBody };

package/dist/esm/components/VisualQueryBuilder/components/OperationEditorBody.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationEditorBody.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditorBody.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\nimport { Button, Icon, Tooltip, useTheme2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { OperationHeader } from './OperationHeader';\nimport {\n type QueryBuilderOperation,\n type QueryBuilderOperationDefinition,\n type QueryBuilderOperationParamDef,\n type QueryBuilderOperationParamValue,\n type VisualQuery,\n type VisualQueryModeller,\n} from '../types';\nimport { getOperationParamEditor, getOperationParamId } from './OperationParamEditor';\nimport { v4 } from 'uuid';\nimport { EditorStack } from '../../QueryEditor';\n\ntype Props = {\n provided: DraggableProvided;\n isConflicting: boolean;\n index: number;\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n queryModeller: VisualQueryModeller;\n query: VisualQuery;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n datasource: DataSourceApi;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n};\n\nexport function OperationEditorBody({\n provided,\n flash,\n isConflicting,\n highlight,\n index,\n queryModeller,\n onChange,\n onRemove,\n onToggle,\n operation,\n definition,\n query,\n timeRange,\n onRunQuery,\n datasource,\n}: Props) {\n const theme = useTheme2();\n const styles = getStyles(theme, isConflicting);\n const shouldFlash = useFlash(flash);\n const { current: id } = useRef(v4());\n\n const onParamValueChanged = (paramIdx: number, value: QueryBuilderOperationParamValue) => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params] };\n update.params[paramIdx] = value;\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n const onAddRestParam = () => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params, ''] };\n callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);\n };\n\n const onRemoveRestParam = (paramIdx: number) => {\n const update: QueryBuilderOperation = {\n ...operation,\n params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)],\n };\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n // Handle adding button for rest params\n let restParam: React.ReactNode \| undefined;\n if (definition.params.length > 0) {\n const lastParamDef = definition.params[definition.params.length - 1];\n if (lastParamDef.restParam) {\n restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);\n }\n }\n\n return (\n <div\n className={cx(styles.card, {\n [styles.cardHighlight]: shouldFlash \|\| highlight,\n [styles.cardError]: isConflicting,\n [styles.disabled]: operation.disabled,\n })}\n ref={provided.innerRef}\n {...provided.draggableProps}\n data-testid={`operations.${index}.wrapper`}\n >\n <OperationHeader\n operation={operation}\n dragHandleProps={provided.dragHandleProps}\n definition={definition}\n index={index}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n />\n <div className={styles.body}>\n {operation.params.map((param, paramIndex) => {\n const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];\n const Editor = getOperationParamEditor(paramDef);\n\n return (\n <div className={styles.paramRow} key={`${paramIndex}-1`}>\n {!paramDef.hideName && (\n <div className={styles.paramName}>\n <label htmlFor={getOperationParamId(id, paramIndex)}>{paramDef.name}</label>\n {paramDef.description && (\n <Tooltip placement=\"top\" content={paramDef.description} theme=\"info\">\n <Icon name=\"info-circle\" size=\"sm\" className={styles.infoIcon} />\n </Tooltip>\n )}\n </div>\n )}\n <div className={styles.paramValue}>\n <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\" wrap={false}>\n <Editor\n index={paramIndex}\n paramDef={paramDef}\n value={operation.params[paramIndex]}\n operation={operation}\n operationId={id}\n onChange={onParamValueChanged}\n onRunQuery={onRunQuery}\n query={query}\n datasource={datasource}\n timeRange={timeRange}\n queryModeller={queryModeller}\n />\n {paramDef.restParam && (operation.params.length > definition.params.length \|\| paramDef.optional) && (\n <Button\n data-testid={`operations.${index}.remove-rest-param`}\n size=\"sm\"\n fill=\"text\"\n icon=\"times\"\n variant=\"secondary\"\n title={`Remove ${paramDef.name}`}\n onClick={() => onRemoveRestParam(paramIndex)}\n />\n )}\n </EditorStack>\n </div>\n </div>\n );\n })}\n </div>\n {restParam}\n {index < query.operations.length - 1 && (\n <div className={styles.arrow}>\n <div className={styles.arrowLine} />\n <div className={styles.arrowArrow} />\n </div>\n )}\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n card: css({\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.medium}`,\n cursor: 'grab',\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n transition: 'all 0.5s ease-in 0s',\n height: isConflicting ? 'auto' : '100%',\n }),\n disabled: css({\n opacity: 0.5,\n transition: 'none',\n }),\n cardError: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,\n border: `1px solid ${theme.colors.warning.main}`,\n }),\n cardHighlight: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.primary.border}`,\n border: `1px solid ${theme.colors.primary.border}`,\n }),\n infoIcon: css({\n marginLeft: theme.spacing(0.5),\n color: theme.colors.text.secondary,\n ':hover': {\n color: theme.colors.text.primary,\n },\n }),\n body: css({\n margin: theme.spacing(1, 1, 0.5, 1),\n display: 'table',\n }),\n paramRow: css({\n label: 'paramRow',\n display: 'table-row',\n verticalAlign: 'middle',\n }),\n paramName: css({\n display: 'table-cell',\n padding: theme.spacing(0, 1, 0, 0),\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n verticalAlign: 'middle',\n height: '32px',\n }),\n paramValue: css({\n label: 'paramValue',\n display: 'table-cell',\n verticalAlign: 'middle',\n }),\n restParam: css({\n padding: theme.spacing(0, 1, 1, 1),\n }),\n arrow: css({\n position: 'absolute',\n top: '0',\n right: '-18px',\n display: 'flex',\n }),\n arrowLine: css({\n height: '2px',\n width: '8px',\n backgroundColor: theme.colors.border.strong,\n position: 'relative',\n top: '14px',\n }),\n arrowArrow: css({\n width: 0,\n height: 0,\n borderTop: `5px solid transparent`,\n borderBottom: `5px solid transparent`,\n borderLeft: `7px solid ${theme.colors.border.strong}`,\n position: 'relative',\n top: '10px',\n }),\n };\n};\n\n/*\n When flash is switched on makes sure it is switched of right away, so we just flash the highlight and then fade\n * out.\n * @param flash\n */\nfunction useFlash(flash?: boolean) {\n const [keepFlash, setKeepFlash] = useState(true);\n useEffect(() => {\n let t: ReturnType<typeof setTimeout>;\n if (flash) {\n t = setTimeout(() => {\n setKeepFlash(false);\n }, 1000);\n } else {\n setKeepFlash(true);\n }\n\n return () => clearTimeout(t);\n }, [flash]);\n\n return keepFlash && flash;\n}\n\nfunction callParamChangedThenOnChange(\n def: QueryBuilderOperationDefinition,\n operation: QueryBuilderOperation,\n operationIndex: number,\n paramIndex: number,\n onChange: (index: number, update: QueryBuilderOperation) => void\n) {\n if (def.paramChangedHandler) {\n onChange(operationIndex, def.paramChangedHandler(paramIndex, operation, def));\n } else {\n onChange(operationIndex, operation);\n }\n}\n\nfunction renderAddRestParamButton(\n paramDef: QueryBuilderOperationParamDef,\n onAddRestParam: () => void,\n operationIndex: number,\n paramIndex: number,\n styles: OperationEditorStyles\n) {\n return (\n <div className={styles.restParam} key={`${paramIndex}-2`}>\n <Button\n size=\"sm\"\n icon=\"plus\"\n title={`Add ${paramDef.name}`.trimEnd()}\n variant=\"secondary\"\n onClick={onAddRestParam}\n data-testid={`operations.${operationIndex}.add-rest-param`}\n >\n {paramDef.name}\n </Button>\n </div>\n );\n}\n\ntype OperationEditorStyles = ReturnType<typeof getStyles>;\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,SAAS,mBAAoB,CAAA;AAAA,EAClC,QAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,SAAA;AAAA,EACA,KAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA,KAAA;AAAA,EACA,SAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAU,EAAA;AACR,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,aAAa,CAAA;AAC7C,EAAM,MAAA,WAAA,GAAc,SAAS,KAAK,CAAA;AAClC,EAAA,MAAM,EAAE,OAAS,EAAA,EAAA,EAAO,GAAA,MAAA,CAAO,IAAI,CAAA;AAEnC,EAAM,MAAA,mBAAA,GAAsB,CAAC,QAAA,EAAkB,KAA2C,KAAA;AACxF,IAAM,MAAA,MAAA,GAAgC,EAAE,GAAG,SAAA,EAAW,QAAQ,CAAC,GAAG,SAAU,CAAA,MAAM,CAAE,EAAA;AACpF,IAAO,MAAA,CAAA,MAAA,CAAO,QAAQ,CAAI,GAAA,KAAA;AAC1B,IAAA,4BAAA,CAA6B,UAAY,EAAA,MAAA,EAAQ,KAAO,EAAA,QAAA,EAAU,QAAQ,CAAA;AAAA,GAC5E;AAEA,EAAA,MAAM,iBAAiB,MAAM;AAC3B,IAAM,MAAA,MAAA,GAAgC,EAAE,GAAG,SAAW,EAAA,MAAA,EAAQ,CAAC,GAAG,SAAA,CAAU,MAAQ,EAAA,EAAE,CAAE,EAAA;AACxF,IAAA,4BAAA,CAA6B,YAAY,MAAQ,EAAA,KAAA,EAAO,SAAU,CAAA,MAAA,CAAO,QAAQ,QAAQ,CAAA;AAAA,GAC3F;AAEA,EAAM,MAAA,iBAAA,GAAoB,CAAC,QAAqB,KAAA;AAC9C,IAAA,MAAM,MAAgC,GAAA;AAAA,MACpC,GAAG,SAAA;AAAA,MACH,MAAQ,EAAA,CAAC,GAAG,SAAA,CAAU,OAAO,KAAM,CAAA,CAAA,EAAG,QAAQ,CAAA,EAAG,GAAG,SAAU,CAAA,MAAA,CAAO,KAAM,CAAA,QAAA,GAAW,CAAC,CAAC;AAAA,KAC1F;AACA,IAAA,4BAAA,CAA6B,UAAY,EAAA,MAAA,EAAQ,KAAO,EAAA,QAAA,EAAU,QAAQ,CAAA;AAAA,GAC5E;AAGA,EAAI,IAAA,SAAA;AACJ,EAAI,IAAA,UAAA,CAAW,MAAO,CAAA,MAAA,GAAS,CAAG,EAAA;AAChC,IAAA,MAAM,eAAe,UAAW,CAAA,MAAA,CAAO,UAAW,CAAA,MAAA,CAAO,SAAS,CAAC,CAAA;AACnE,IAAA,IAAI,aAAa,SAAW,EAAA;AAC1B,MAAA,SAAA,GAAY,yBAAyB,YAAc,EAAA,cAAA,EAAgB,OAAO,SAAU,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA;AAAA;AAC3G;AAGF,EACE,uBAAA,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,IAAM,EAAA;AAAA,QACzB,CAAC,MAAA,CAAO,aAAa,GAAG,WAAe,IAAA,SAAA;AAAA,QACvC,CAAC,MAAO,CAAA,SAAS,GAAG,aAAA;AAAA,QACpB,CAAC,MAAA,CAAO,QAAQ,GAAG,SAAU,CAAA;AAAA,OAC9B,CAAA;AAAA,MACD,KAAK,QAAS,CAAA,QAAA;AAAA,MACb,GAAG,QAAS,CAAA,cAAA;AAAA,MACb,aAAA,EAAa,cAAc,KAAK,CAAA,QAAA,CAAA;AAAA,MAEhC,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,eAAA;AAAA,UAAA;AAAA,YACC,SAAA;AAAA,YACA,iBAAiB,QAAS,CAAA,eAAA;AAAA,YAC1B,UAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA;AAAA;AAAA,SACF;AAAA,wBACA,GAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EACpB,oBAAU,MAAO,CAAA,GAAA,CAAI,CAAC,KAAA,EAAO,UAAe,KAAA;AAC3C,UAAM,MAAA,QAAA,GAAW,UAAW,CAAA,MAAA,CAAO,IAAK,CAAA,GAAA,CAAI,WAAW,MAAO,CAAA,MAAA,GAAS,CAAG,EAAA,UAAU,CAAC,CAAA;AACrF,UAAM,MAAA,MAAA,GAAS,wBAAwB,QAAQ,CAAA;AAE/C,UAAA,uBACG,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,QACpB,EAAA,QAAA,EAAA;AAAA,YAAA,CAAC,SAAS,QACT,oBAAA,IAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,SACrB,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,WAAM,OAAS,EAAA,mBAAA,CAAoB,IAAI,UAAU,CAAA,EAAI,mBAAS,IAAK,EAAA,CAAA;AAAA,cACnE,QAAA,CAAS,+BACP,GAAA,CAAA,OAAA,EAAA,EAAQ,WAAU,KAAM,EAAA,OAAA,EAAS,SAAS,WAAa,EAAA,KAAA,EAAM,QAC5D,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,MAAK,aAAc,EAAA,IAAA,EAAK,MAAK,SAAW,EAAA,MAAA,CAAO,UAAU,CACjE,EAAA;AAAA,aAEJ,EAAA,CAAA;AAAA,4BAED,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,YACrB,QAAC,kBAAA,IAAA,CAAA,WAAA,EAAA,EAAY,GAAK,EAAA,GAAA,EAAK,SAAU,EAAA,KAAA,EAAM,UAAW,EAAA,QAAA,EAAS,MAAM,KAC/D,EAAA,QAAA,EAAA;AAAA,8BAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,KAAO,EAAA,UAAA;AAAA,kBACP,QAAA;AAAA,kBACA,KAAA,EAAO,SAAU,CAAA,MAAA,CAAO,UAAU,CAAA;AAAA,kBAClC,SAAA;AAAA,kBACA,WAAa,EAAA,EAAA;AAAA,kBACb,QAAU,EAAA,mBAAA;AAAA,kBACV,UAAA;AAAA,kBACA,KAAA;AAAA,kBACA,UAAA;AAAA,kBACA,SAAA;AAAA,kBACA;AAAA;AAAA,eACF;AAAA,cACC,QAAA,CAAS,cAAc,SAAU,CAAA,MAAA,CAAO,SAAS,UAAW,CAAA,MAAA,CAAO,MAAU,IAAA,QAAA,CAAS,QACrF,CAAA,oBAAA,GAAA;AAAA,gBAAC,MAAA;AAAA,gBAAA;AAAA,kBACC,aAAA,EAAa,cAAc,KAAK,CAAA,kBAAA,CAAA;AAAA,kBAChC,IAAK,EAAA,IAAA;AAAA,kBACL,IAAK,EAAA,MAAA;AAAA,kBACL,IAAK,EAAA,OAAA;AAAA,kBACL,OAAQ,EAAA,WAAA;AAAA,kBACR,KAAA,EAAO,CAAU,OAAA,EAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,kBAC9B,OAAA,EAAS,MAAM,iBAAA,CAAkB,UAAU;AAAA;AAAA;AAC7C,aAAA,EAEJ,CACF,EAAA;AAAA,WAtCoC,EAAA,EAAA,CAAA,EAAG,UAAU,CAuCnD,EAAA,CAAA,CAAA;AAAA,SAEH,CACH,EAAA,CAAA;AAAA,QACC,SAAA;AAAA,QACA,KAAA,GAAQ,MAAM,UAAW,CAAA,MAAA,GAAS,qBAChC,IAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,KACrB,EAAA,QAAA,EAAA;AAAA,0BAAC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SAAW,EAAA,CAAA;AAAA,0BACjC,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,UAAY,EAAA;AAAA,SACrC,EAAA;AAAA;AAAA;AAAA,GAEJ;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAA,EAAsB,aAA2B,KAAA;AAClE,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC9B,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,OAAA;AAAA,MACpC,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,MAC/C,MAAQ,EAAA,MAAA;AAAA,MACR,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,QAAU,EAAA,UAAA;AAAA,MACV,UAAY,EAAA,qBAAA;AAAA,MACZ,MAAA,EAAQ,gBAAgB,MAAS,GAAA;AAAA,KAClC,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,OAAS,EAAA,GAAA;AAAA,MACT,UAAY,EAAA;AAAA,KACb,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,SAAW,EAAA,CAAA,gBAAA,EAAmB,KAAM,CAAA,MAAA,CAAO,QAAQ,IAAI,CAAA,CAAA;AAAA,MACvD,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,IAAI,CAAA;AAAA,KAC/C,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,SAAW,EAAA,CAAA,gBAAA,EAAmB,KAAM,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA,CAAA;AAAA,MACzD,MAAQ,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,MAAM,CAAA;AAAA,KACjD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAC7B,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,QAAU,EAAA;AAAA,QACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,QAAQ,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,KAAK,CAAC,CAAA;AAAA,MAClC,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,KAAO,EAAA,UAAA;AAAA,MACP,OAAS,EAAA,WAAA;AAAA,MACT,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,OAAS,EAAA,YAAA;AAAA,MACT,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,aAAe,EAAA,QAAA;AAAA,MACf,MAAQ,EAAA;AAAA,KACT,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,KAAO,EAAA,YAAA;AAAA,MACP,OAAS,EAAA,YAAA;AAAA,MACT,aAAe,EAAA;AAAA,KAChB,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC;AAAA,KAClC,CAAA;AAAA,IACD,OAAO,GAAI,CAAA;AAAA,MACT,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA,GAAA;AAAA,MACL,KAAO,EAAA,OAAA;AAAA,MACP,OAAS,EAAA;AAAA,KACV,CAAA;AAAA,IACD,WAAW,GAAI,CAAA;AAAA,MACb,MAAQ,EAAA,KAAA;AAAA,MACR,KAAO,EAAA,KAAA;AAAA,MACP,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,MAAA;AAAA,MACrC,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA;AAAA,KACN,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,KAAO,EAAA,CAAA;AAAA,MACP,MAAQ,EAAA,CAAA;AAAA,MACR,SAAW,EAAA,CAAA,qBAAA,CAAA;AAAA,MACX,YAAc,EAAA,CAAA,qBAAA,CAAA;AAAA,MACd,UAAY,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,OAAO,MAAM,CAAA,CAAA;AAAA,MACnD,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA;AAAA,KACN;AAAA,GACH;AACF,CAAA;AAOA,SAAS,SAAS,KAAiB,EAAA;AACjC,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,CAAA,GAAI,SAAS,IAAI,CAAA;AAC/C,EAAA,SAAA,CAAU,MAAM;AACd,IAAI,IAAA,CAAA;AACJ,IAAA,IAAI,KAAO,EAAA;AACT,MAAA,CAAA,GAAI,WAAW,MAAM;AACnB,QAAA,YAAA,CAAa,KAAK,CAAA;AAAA,SACjB,GAAI,CAAA;AAAA,KACF,MAAA;AACL,MAAA,YAAA,CAAa,IAAI,CAAA;AAAA;AAGnB,IAAO,OAAA,MAAM,aAAa,CAAC,CAAA;AAAA,GAC7B,EAAG,CAAC,KAAK,CAAC,CAAA;AAEV,EAAA,OAAO,SAAa,IAAA,KAAA;AACtB;AAEA,SAAS,4BACP,CAAA,GAAA,EACA,SACA,EAAA,cAAA,EACA,YACA,QACA,EAAA;AACA,EAAA,IAAI,IAAI,mBAAqB,EAAA;AAC3B,IAAA,QAAA,CAAS,gBAAgB,GAAI,CAAA,mBAAA,CAAoB,UAAY,EAAA,SAAA,EAAW,GAAG,CAAC,CAAA;AAAA,GACvE,MAAA;AACL,IAAA,QAAA,CAAS,gBAAgB,SAAS,CAAA;AAAA;AAEtC;AAEA,SAAS,wBACP,CAAA,QAAA,EACA,cACA,EAAA,cAAA,EACA,YACA,MACA,EAAA;AACA,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,SACrB,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,IAAK,EAAA,IAAA;AAAA,MACL,IAAK,EAAA,MAAA;AAAA,MACL,KAAO,EAAA,CAAA,IAAA,EAAO,QAAS,CAAA,IAAI,GAAG,OAAQ,EAAA;AAAA,MACtC,OAAQ,EAAA,WAAA;AAAA,MACR,OAAS,EAAA,cAAA;AAAA,MACT,aAAA,EAAa,cAAc,cAAc,CAAA,eAAA,CAAA;AAAA,MAExC,QAAS,EAAA,QAAA,CAAA;AAAA;AAAA,GACZ,EAAA,EAVqC,CAAG,EAAA,UAAU,CAWpD,EAAA,CAAA,CAAA;AAEJ;;;;"}
1	+ {"version":3,"file":"OperationEditorBody.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationEditorBody.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { type DraggableProvided } from '@hello-pangea/dnd';\nimport { Button, Icon, Tooltip, useTheme2 } from '@grafana/ui';\nimport { css, cx } from '@emotion/css';\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { OperationHeader } from './OperationHeader';\nimport {\n type QueryBuilderOperation,\n type QueryBuilderOperationDefinition,\n type QueryBuilderOperationParamDef,\n type QueryBuilderOperationParamValue,\n type VisualQuery,\n type VisualQueryModeller,\n} from '../types';\nimport { getOperationParamEditor, getOperationParamId } from './OperationParamEditor';\nimport { v4 } from 'uuid';\nimport { EditorStack } from '../../QueryEditor';\n\ntype Props = {\n provided: DraggableProvided;\n isConflicting: boolean;\n index: number;\n operation: QueryBuilderOperation;\n definition: QueryBuilderOperationDefinition;\n queryModeller: VisualQueryModeller;\n query: VisualQuery;\n onChange: (index: number, update: QueryBuilderOperation) => void;\n onRemove: (index: number) => void;\n onToggle: (index: number) => void;\n onRunQuery: () => void;\n datasource: DataSourceApi;\n flash?: boolean;\n highlight?: boolean;\n timeRange?: TimeRange;\n};\n\nexport function OperationEditorBody({\n provided,\n flash,\n isConflicting,\n highlight,\n index,\n queryModeller,\n onChange,\n onRemove,\n onToggle,\n operation,\n definition,\n query,\n timeRange,\n onRunQuery,\n datasource,\n}: Props) {\n const theme = useTheme2();\n const styles = getStyles(theme, isConflicting);\n const shouldFlash = useFlash(flash);\n const { current: id } = useRef(v4());\n\n const onParamValueChanged = (paramIdx: number, value: QueryBuilderOperationParamValue) => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params] };\n update.params[paramIdx] = value;\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n const onAddRestParam = () => {\n const update: QueryBuilderOperation = { ...operation, params: [...operation.params, ''] };\n callParamChangedThenOnChange(definition, update, index, operation.params.length, onChange);\n };\n\n const onRemoveRestParam = (paramIdx: number) => {\n const update: QueryBuilderOperation = {\n ...operation,\n params: [...operation.params.slice(0, paramIdx), ...operation.params.slice(paramIdx + 1)],\n };\n callParamChangedThenOnChange(definition, update, index, paramIdx, onChange);\n };\n\n // Handle adding button for rest params\n let restParam: React.ReactNode \| undefined;\n if (definition.params.length > 0) {\n const lastParamDef = definition.params[definition.params.length - 1];\n if (lastParamDef.restParam) {\n restParam = renderAddRestParamButton(lastParamDef, onAddRestParam, index, operation.params.length, styles);\n }\n }\n\n return (\n <div\n className={cx(styles.card, {\n [styles.cardHighlight]: shouldFlash \|\| highlight,\n [styles.cardError]: isConflicting,\n [styles.disabled]: operation.disabled,\n })}\n ref={provided.innerRef}\n {...provided.draggableProps}\n data-testid={`operations.${index}.wrapper`}\n >\n <OperationHeader\n operation={operation}\n dragHandleProps={provided.dragHandleProps}\n definition={definition}\n index={index}\n onChange={onChange}\n onRemove={onRemove}\n onToggle={onToggle}\n queryModeller={queryModeller}\n />\n <div className={styles.body}>\n {operation.params.map((param, paramIndex) => {\n const paramDef = definition.params[Math.min(definition.params.length - 1, paramIndex)];\n const Editor = getOperationParamEditor(paramDef);\n\n return (\n <div className={styles.paramRow} key={`${paramIndex}-1`}>\n {!paramDef.hideName && (\n <div className={styles.paramName}>\n <label htmlFor={getOperationParamId(id, paramIndex)}>{paramDef.name}</label>\n {paramDef.description && (\n <Tooltip placement=\"top\" content={paramDef.description} theme=\"info\">\n <Icon name=\"info-circle\" size=\"sm\" className={styles.infoIcon} />\n </Tooltip>\n )}\n </div>\n )}\n <div className={styles.paramValue}>\n <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\" wrap={false}>\n <Editor\n index={paramIndex}\n paramDef={paramDef}\n value={operation.params[paramIndex]}\n operation={operation}\n operationId={id}\n onChange={onParamValueChanged}\n onRunQuery={onRunQuery}\n query={query}\n datasource={datasource}\n timeRange={timeRange}\n queryModeller={queryModeller}\n />\n {paramDef.restParam && (operation.params.length > definition.params.length \|\| paramDef.optional) && (\n <Button\n data-testid={`operations.${index}.remove-rest-param`}\n size=\"sm\"\n fill=\"text\"\n icon=\"times\"\n variant=\"secondary\"\n title={`Remove ${paramDef.name}`}\n onClick={() => onRemoveRestParam(paramIndex)}\n />\n )}\n </EditorStack>\n </div>\n </div>\n );\n })}\n </div>\n {restParam}\n {index < query.operations.length - 1 && (\n <div className={styles.arrow}>\n <div className={styles.arrowLine} />\n <div className={styles.arrowArrow} />\n </div>\n )}\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2, isConflicting: boolean) => {\n return {\n cardWrapper: css({\n alignItems: 'stretch',\n }),\n error: css({\n marginBottom: theme.spacing(1),\n }),\n card: css({\n background: theme.colors.background.primary,\n border: `1px solid ${theme.colors.border.medium}`,\n cursor: 'grab',\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n transition: 'all 0.5s ease-in 0s',\n height: isConflicting ? 'auto' : '100%',\n }),\n disabled: css({\n opacity: 0.5,\n transition: 'none',\n }),\n cardError: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.warning.main}`,\n border: `1px solid ${theme.colors.warning.main}`,\n }),\n cardHighlight: css({\n boxShadow: `0px 0px 4px 0px ${theme.colors.primary.border}`,\n border: `1px solid ${theme.colors.primary.border}`,\n }),\n infoIcon: css({\n marginLeft: theme.spacing(0.5),\n color: theme.colors.text.secondary,\n ':hover': {\n color: theme.colors.text.primary,\n },\n }),\n body: css({\n margin: theme.spacing(1, 1, 0.5, 1),\n display: 'table',\n }),\n paramRow: css({\n label: 'paramRow',\n display: 'table-row',\n verticalAlign: 'middle',\n }),\n paramName: css({\n display: 'table-cell',\n padding: theme.spacing(0, 1, 0, 0),\n fontSize: theme.typography.bodySmall.fontSize,\n fontWeight: theme.typography.fontWeightMedium,\n verticalAlign: 'middle',\n height: '32px',\n }),\n paramValue: css({\n label: 'paramValue',\n display: 'table-cell',\n verticalAlign: 'middle',\n }),\n restParam: css({\n padding: theme.spacing(0, 1, 1, 1),\n }),\n arrow: css({\n position: 'absolute',\n top: '0',\n right: '-18px',\n display: 'flex',\n }),\n arrowLine: css({\n height: '2px',\n width: '8px',\n backgroundColor: theme.colors.border.strong,\n position: 'relative',\n top: '14px',\n }),\n arrowArrow: css({\n width: 0,\n height: 0,\n borderTop: `5px solid transparent`,\n borderBottom: `5px solid transparent`,\n borderLeft: `7px solid ${theme.colors.border.strong}`,\n position: 'relative',\n top: '10px',\n }),\n };\n};\n\n/*\n When flash is switched on makes sure it is switched of right away, so we just flash the highlight and then fade\n * out.\n * @param flash\n */\nfunction useFlash(flash?: boolean) {\n const [keepFlash, setKeepFlash] = useState(true);\n useEffect(() => {\n let t: ReturnType<typeof setTimeout>;\n if (flash) {\n t = setTimeout(() => {\n setKeepFlash(false);\n }, 1000);\n } else {\n setKeepFlash(true);\n }\n\n return () => clearTimeout(t);\n }, [flash]);\n\n return keepFlash && flash;\n}\n\nfunction callParamChangedThenOnChange(\n def: QueryBuilderOperationDefinition,\n operation: QueryBuilderOperation,\n operationIndex: number,\n paramIndex: number,\n onChange: (index: number, update: QueryBuilderOperation) => void\n) {\n if (def.paramChangedHandler) {\n onChange(operationIndex, def.paramChangedHandler(paramIndex, operation, def));\n } else {\n onChange(operationIndex, operation);\n }\n}\n\nfunction renderAddRestParamButton(\n paramDef: QueryBuilderOperationParamDef,\n onAddRestParam: () => void,\n operationIndex: number,\n paramIndex: number,\n styles: OperationEditorStyles\n) {\n return (\n <div className={styles.restParam} key={`${paramIndex}-2`}>\n <Button\n size=\"sm\"\n icon=\"plus\"\n title={`Add ${paramDef.name}`.trimEnd()}\n variant=\"secondary\"\n onClick={onAddRestParam}\n data-testid={`operations.${operationIndex}.add-rest-param`}\n >\n {paramDef.name}\n </Button>\n </div>\n );\n}\n\ntype OperationEditorStyles = ReturnType<typeof getStyles>;\n"],"names":[],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/OperationExplainedBox.js CHANGED Viewed

@@ -1,20 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import React from 'react';
 import { css } from '@emotion/css';
 import { renderMarkdown } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 function OperationExplainedBox({ title, stepNumber, markdown, children }) {
   const styles = useStyles2(getStyles);
-  return /* @__PURE__ */ jsxs("div", { className: styles.box, children: [
-    stepNumber !== undefined && /* @__PURE__ */ jsx("div", { className: styles.stepNumber, children: stepNumber }),
-    /* @__PURE__ */ jsxs("div", { className: styles.boxInner, children: [
-      title && /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsx("span", { children: title }) }),
-      /* @__PURE__ */ jsxs("div", { className: styles.body, children: [
-        markdown && /* @__PURE__ */ jsx("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(markdown) } }),
-        children
-      ] })
-    ] })
-  ] });
+  return /* @__PURE__ */ React.createElement("div", { className: styles.box }, stepNumber !== undefined && /* @__PURE__ */ React.createElement("div", { className: styles.stepNumber }, stepNumber), /* @__PURE__ */ React.createElement("div", { className: styles.boxInner }, title && /* @__PURE__ */ React.createElement("div", { className: styles.header }, /* @__PURE__ */ React.createElement("span", null, title)), /* @__PURE__ */ React.createElement("div", { className: styles.body }, markdown && /* @__PURE__ */ React.createElement("div", { dangerouslySetInnerHTML: { __html: renderMarkdown(markdown) } }), children)));
 }
 const getStyles = (theme) => {
   return {

package/dist/esm/components/VisualQueryBuilder/components/OperationExplainedBox.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"OperationExplainedBox.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"sourcesContent":["import { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface Props {\n title?: React.ReactNode;\n markdown?: string;\n stepNumber?: number;\n}\n\nexport function OperationExplainedBox({ title, stepNumber, markdown, children }: React.PropsWithChildren<Props>) {\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.box}>\n {stepNumber !== undefined && <div className={styles.stepNumber}>{stepNumber}</div>}\n <div className={styles.boxInner}>\n {title && (\n <div className={styles.header}>\n <span>{title}</span>\n </div>\n )}\n <div className={styles.body}>\n {markdown && <div dangerouslySetInnerHTML={{ __html: renderMarkdown(markdown) }}></div>}\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n box: css({\n background: theme.colors.background.secondary,\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n }),\n boxInner: css({\n marginLeft: theme.spacing(4),\n }),\n stepNumber: css({\n fontWeight: theme.typography.fontWeightMedium,\n background: theme.colors.secondary.main,\n width: '20px',\n height: '20px',\n borderRadius: theme.shape.radius.circle,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: '10px',\n left: '11px',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n header: css({\n paddingBottom: theme.spacing(0.5),\n display: 'flex',\n alignItems: 'center',\n fontFamily: theme.typography.fontFamilyMonospace,\n }),\n body: css({\n color: theme.colors.text.secondary,\n 'p:last-child': {\n margin: 0,\n },\n a: {\n color: theme.colors.text.link,\n textDecoration: 'underline',\n },\n }),\n };\n};\n"],"names":[],"mappings":";;;;;~~AAWO~~,SAAS,sBAAsB,EAAE,KAAA,EAAO,UAAY,EAAA,QAAA,EAAU,UAA4C,EAAA;AAC/G,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,~~EAAA~~,~~uBACG~~,~~IAAA~~,CAAA,~~KAAA~~,~~EAAA~~,~~EAAI~~,SAAW,EAAA,MAAA,CAAO,~~GACpB~~,~~EAAA~~,~~QAAA~~,~~EAAA;AAAA~~,~~IAAA~~,~~UAAA~~,~~KAAe~~,~~6BAAc~~,~~GAAA,~~CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,~~YAAa~~,~~QAAW~~,~~EAAA~~,~~UAAA~~,EAAA,~~CAAA;AAAA~~,~~oBAC3E~~,~~IAAA~~,~~CAAA~~,~~KAAA~~,EAAA,~~EAAI,SAAW,~~EAAA,~~MAAA~~,~~CAAO~~,~~QACpB~~,~~EAAA~~,~~QAAA~~,~~EAAA;AAAA~~,~~MACC,~~KAAA,~~oBAAA~~,~~GAAA~~,~~CAAC,SAAI,~~SAAW,EAAA,MAAA,CAAO,~~QACrB~~,~~QAAC~~,~~kBAAA~~,~~GAAA~~,CAAA,MAAA,EAAA,EAAM,~~iBAAM~~,CACf,~~EAAA,~~CAAA~~;AAAA~~,~~sBAED~~,~~IAAA~~,~~CAAA~~,~~KAAA,~~EAAA,~~EAAI~~,~~SAAW~~,~~EAAA~~,~~MAAA~~,~~CAAO~~,~~IACpB,~~EAAA,~~QAAA~~,~~EAAA;AAAA,~~QAAY,~~QAAA,~~oBAAA,~~GAAA~~,CAAC,SAAI,uBAAyB,EAAA,EAAE,QAAQ,cAAe,CAAA,QAAQ,GAAK,EAAA,CAAA~~;AAAA~~,~~QAChF;AAAA~~,~~OACH~~,~~EAAA;AAAA~~,~~KACF~~,~~EAAA;AAAA,GACF,EAAA,~~CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACpC,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC5B,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,SAAU,CAAA,IAAA;AAAA,MACnC,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,MAAA;AAAA,MACjC,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,QAAA;AAAA,MAChB,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA,MAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,MACN,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA;AAAA,KACtC,CAAA;AAAA,IACD,QAAQ,GAAI,CAAA;AAAA,MACV,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAChC,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,cAAgB,EAAA;AAAA,QACd,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,CAAG,EAAA;AAAA,QACD,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,IAAA;AAAA,QACzB,cAAgB,EAAA;AAAA;AAClB,KACD;AAAA,GACH;AACF,CAAA;;;;"}
1	+ {"version":3,"file":"OperationExplainedBox.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationExplainedBox.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, renderMarkdown } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface Props {\n title?: React.ReactNode;\n markdown?: string;\n stepNumber?: number;\n}\n\nexport function OperationExplainedBox({ title, stepNumber, markdown, children }: React.PropsWithChildren<Props>) {\n const styles = useStyles2(getStyles);\n\n return (\n <div className={styles.box}>\n {stepNumber !== undefined && <div className={styles.stepNumber}>{stepNumber}</div>}\n <div className={styles.boxInner}>\n {title && (\n <div className={styles.header}>\n <span>{title}</span>\n </div>\n )}\n <div className={styles.body}>\n {markdown && <div dangerouslySetInnerHTML={{ __html: renderMarkdown(markdown) }}></div>}\n {children}\n </div>\n </div>\n </div>\n );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n return {\n box: css({\n background: theme.colors.background.secondary,\n padding: theme.spacing(1),\n borderRadius: theme.shape.radius.default,\n position: 'relative',\n }),\n boxInner: css({\n marginLeft: theme.spacing(4),\n }),\n stepNumber: css({\n fontWeight: theme.typography.fontWeightMedium,\n background: theme.colors.secondary.main,\n width: '20px',\n height: '20px',\n borderRadius: theme.shape.radius.circle,\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n position: 'absolute',\n top: '10px',\n left: '11px',\n fontSize: theme.typography.bodySmall.fontSize,\n }),\n header: css({\n paddingBottom: theme.spacing(0.5),\n display: 'flex',\n alignItems: 'center',\n fontFamily: theme.typography.fontFamilyMonospace,\n }),\n body: css({\n color: theme.colors.text.secondary,\n 'p:last-child': {\n margin: 0,\n },\n a: {\n color: theme.colors.text.link,\n textDecoration: 'underline',\n },\n }),\n };\n};\n"],"names":[],"mappings":";;;;;AAYO,SAAS,sBAAsB,EAAE,KAAA,EAAO,UAAY,EAAA,QAAA,EAAU,UAA4C,EAAA;AAC/G,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,SAAW,EAAA,MAAA,CAAO,OACpB,UAAe,KAAA,SAAA,oBAAc,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,cAAa,UAAW,CAAA,sCAC3E,KAAI,EAAA,EAAA,SAAA,EAAW,OAAO,QACpB,EAAA,EAAA,KAAA,oBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,0BACpB,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,KAAM,CACf,CAAA,sCAED,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,EACpB,QAAY,oBAAA,KAAA,CAAA,aAAA,CAAC,SAAI,uBAAyB,EAAA,EAAE,QAAQ,cAAe,CAAA,QAAQ,GAAK,EAAA,CAAA,EAChF,QACH,CACF,CACF,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACpC,OAAA,EAAS,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACxB,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,OAAA;AAAA,MACjC,QAAU,EAAA;AAAA,KACX,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,UAAA,EAAY,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC5B,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,MAC7B,UAAA,EAAY,KAAM,CAAA,MAAA,CAAO,SAAU,CAAA,IAAA;AAAA,MACnC,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA,MAAA;AAAA,MACjC,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,QAAA;AAAA,MAChB,QAAU,EAAA,UAAA;AAAA,MACV,GAAK,EAAA,MAAA;AAAA,MACL,IAAM,EAAA,MAAA;AAAA,MACN,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA;AAAA,KACtC,CAAA;AAAA,IACD,QAAQ,GAAI,CAAA;AAAA,MACV,aAAA,EAAe,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,MAChC,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,UAAA,EAAY,MAAM,UAAW,CAAA;AAAA,KAC9B,CAAA;AAAA,IACD,MAAM,GAAI,CAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,cAAgB,EAAA;AAAA,QACd,MAAQ,EAAA;AAAA,OACV;AAAA,MACA,CAAG,EAAA;AAAA,QACD,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,IAAA;AAAA,QACzB,cAAgB,EAAA;AAAA;AAClB,KACD;AAAA,GACH;AACF,CAAA;;;;"}