@grafana/plugin-ui 0.13.0 → 0.13.1

package/dist/cjs/index.d.cts

@@ -726,14 +726,7 @@ interface SpaceProps {
     h?: number;
     layout?: 'block' | 'inline';
 }
-declare const Space: {
-    (props: SpaceProps): React.JSX.Element;
-    defaultProps: {
-        v: number;
-        h: number;
-        layout: string;
-    };
-};
+declare const Space: ({ v, h, layout }: SpaceProps) => React.JSX.Element;
 
 interface SearchFilterOptions {
     searchFilter?: string;

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

@@ -1,34 +1,25 @@
 import React from 'react';
-import { css, cx } from '@emotion/css';
+import { cx, css } from '@emotion/css';
 import '@grafana/data';
-import { stylesFactory, useTheme2 } from '@grafana/ui';
+import { useStyles2 } from '@grafana/ui';
 
-const Space = (props) => {
-  const theme = useTheme2();
-  const styles = getStyles(theme, props);
+const Space = ({ v = 0, h = 0, layout = "block" }) => {
+  const styles = useStyles2(getStyles, v, h, layout);
   return /* @__PURE__ */ React.createElement("span", { className: cx(styles.wrapper) });
 };
-Space.defaultProps = {
-  v: 0,
-  h: 0,
-  layout: "block"
-};
-const getStyles = stylesFactory((theme, props) => {
-  var _a, _b;
-  return {
-    wrapper: css([
-      {
-        paddingRight: theme.spacing((_a = props.h) != null ? _a : 0),
-        paddingBottom: theme.spacing((_b = props.v) != null ? _b : 0)
-      },
-      props.layout === "inline" && {
-        display: "inline-block"
-      },
-      props.layout === "block" && {
-        display: "block"
-      }
-    ])
-  };
+const getStyles = (theme, v, h, layout) => ({
+  wrapper: css([
+    {
+      paddingRight: theme.spacing(h != null ? h : 0),
+      paddingBottom: theme.spacing(v != null ? v : 0)
+    },
+    layout === "inline" && {
+      display: "inline-block"
+    },
+    layout === "block" && {
+      display: "block"
+    }
+  ])
 });
 
 export { Space };

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

@@ -1 +1 @@
-{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useTheme2, stylesFactory } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = (props: SpaceProps) => {\n  const theme = useTheme2();\n  const styles = getStyles(theme, props);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nSpace.defaultProps = {\n  v: 0,\n  h: 0,\n  layout: 'block',\n};\n\nconst getStyles = stylesFactory((theme: GrafanaTheme2, props: SpaceProps) => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(props.h ?? 0),\n      paddingBottom: theme.spacing(props.v ?? 0),\n    },\n    props.layout === 'inline' && {\n      display: 'inline-block',\n    },\n    props.layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n}));\n"],"names":[],"mappings":";;;;;AAWa,MAAA,KAAA,GAAQ,CAAC,KAAsB,KAAA;AAC1C,EAAA,MAAM,QAAQ,SAAU,EAAA;AACxB,EAAM,MAAA,MAAA,GAAS,SAAU,CAAA,KAAA,EAAO,KAAK,CAAA;AAErC,EAAA,2CAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,KAAA,CAAM,YAAe,GAAA;AAAA,EACnB,CAAG,EAAA,CAAA;AAAA,EACH,CAAG,EAAA,CAAA;AAAA,EACH,MAAQ,EAAA;AACV,CAAA;AAEA,MAAM,SAAY,GAAA,aAAA,CAAc,CAAC,KAAA,EAAsB,KAAmB,KAAA;AAxB1E,EAAA,IAAA,EAAA,EAAA,EAAA;AAwB8E,EAAA,OAAA;AAAA,IAC5E,SAAS,GAAI,CAAA;AAAA,MACX;AAAA,QACE,cAAc,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC,CAAA;AAAA,QACxC,eAAe,KAAM,CAAA,OAAA,CAAA,CAAQ,EAAM,GAAA,KAAA,CAAA,CAAA,KAAN,YAAW,CAAC;AAAA,OAC3C;AAAA,MACA,KAAA,CAAM,WAAW,QAAY,IAAA;AAAA,QAC3B,OAAS,EAAA;AAAA,OACX;AAAA,MACA,KAAA,CAAM,WAAW,OAAW,IAAA;AAAA,QAC1B,OAAS,EAAA;AAAA;AACX,KACD;AAAA,GACH;AAAA,CAAE,CAAA;;;;"}
+{"version":3,"file":"Space.js","sources":["../../../../src/components/QueryEditor/Space.tsx"],"sourcesContent":["import React from 'react';\nimport { css, cx } from '@emotion/css';\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nexport interface SpaceProps {\n  v?: number;\n  h?: number;\n  layout?: 'block' | 'inline';\n}\n\nexport const Space = ({ v = 0, h = 0, layout = 'block' }: SpaceProps) => {\n  const styles = useStyles2(getStyles, v, h, layout);\n\n  return <span className={cx(styles.wrapper)} />;\n};\n\nconst getStyles = (theme: GrafanaTheme2, v: number, h: number, layout: 'block' | 'inline') => ({\n  wrapper: css([\n    {\n      paddingRight: theme.spacing(h ?? 0),\n      paddingBottom: theme.spacing(v ?? 0),\n    },\n    layout === 'inline' && {\n      display: 'inline-block',\n    },\n    layout === 'block' && {\n      display: 'block',\n    },\n  ]),\n});\n"],"names":[],"mappings":";;;;;AAWa,MAAA,KAAA,GAAQ,CAAC,EAAE,CAAA,GAAI,GAAG,CAAI,GAAA,CAAA,EAAG,MAAS,GAAA,OAAA,EAA0B,KAAA;AACvE,EAAA,MAAM,MAAS,GAAA,UAAA,CAAW,SAAW,EAAA,CAAA,EAAG,GAAG,MAAM,CAAA;AAEjD,EAAA,2CAAQ,MAAK,EAAA,EAAA,SAAA,EAAW,EAAG,CAAA,MAAA,CAAO,OAAO,CAAG,EAAA,CAAA;AAC9C;AAEA,MAAM,SAAY,GAAA,CAAC,KAAsB,EAAA,CAAA,EAAW,GAAW,MAAgC,MAAA;AAAA,EAC7F,SAAS,GAAI,CAAA;AAAA,IACX;AAAA,MACE,YAAc,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,IAAA,IAAA,GAAA,CAAA,GAAK,CAAC,CAAA;AAAA,MAClC,aAAe,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,IAAA,IAAA,GAAA,CAAA,GAAK,CAAC;AAAA,KACrC;AAAA,IACA,WAAW,QAAY,IAAA;AAAA,MACrB,OAAS,EAAA;AAAA,KACX;AAAA,IACA,WAAW,OAAW,IAAA;AAAA,MACpB,OAAS,EAAA;AAAA;AACX,GACD;AACH,CAAA,CAAA;;;;"}

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

@@ -10,7 +10,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';

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

@@ -1 +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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"}
+{"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/OperationList.js

@@ -9,7 +9,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
 import 'sql-formatter-plus';

package/dist/esm/components/VisualQueryBuilder/components/OperationList.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationList.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationList.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { DragDropContext, Droppable, type DropResult } from '@hello-pangea/dnd';\nimport { useMountedState, usePrevious } from 'react-use';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { Button, Cascader, type CascaderOption, useStyles2 } from '@grafana/ui';\n\nimport { OperationEditor } from './OperationEditor';\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\nexport interface Props<T extends VisualQuery> {\n  query: T;\n  datasource: DataSourceApi;\n  onChange: (query: T) => void;\n  onRunQuery: () => void;\n  queryModeller: VisualQueryModeller;\n  explainMode?: boolean;\n  highlightedOp?: QueryBuilderOperation;\n  timeRange?: TimeRange;\n  isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationList<T extends VisualQuery>({\n  query,\n  datasource,\n  queryModeller,\n  onChange,\n  onRunQuery,\n  highlightedOp,\n  timeRange,\n  isConflictingOperation,\n}: Props<T>) {\n  const styles = useStyles2(getStyles);\n  const { operations } = query;\n\n  const opsToHighlight = useOperationsHighlight(operations);\n\n  const [cascaderOpen, setCascaderOpen] = useState(false);\n\n  const onOperationChange = (index: number, update: QueryBuilderOperation) => {\n    const updatedList = [...operations];\n    updatedList.splice(index, 1, update);\n    onChange({ ...query, operations: updatedList });\n  };\n\n  const onRemove = (index: number) => {\n    const updatedList = [...operations.slice(0, index), ...operations.slice(index + 1)];\n    onChange({ ...query, operations: updatedList });\n  };\n\n  const onToggle = (index: number) => {\n    onOperationChange(index, { ...operations[index], disabled: !operations[index].disabled });\n  };\n\n  const addOptions: CascaderOption[] = queryModeller.getCategories().map((category) => {\n    return {\n      value: category,\n      label: category,\n      items: queryModeller.getOperationsForCategory(category).map((operation) => ({\n        value: operation.id,\n        label: operation.name,\n        isLeaf: true,\n      })),\n    };\n  });\n\n  const onAddOperation = (value: string) => {\n    const operationDef = queryModeller.getOperationDefinition(value);\n    if (!operationDef) {\n      return;\n    }\n    onChange(operationDef.addOperationHandler(operationDef, query, queryModeller));\n    setCascaderOpen(false);\n  };\n\n  const onDragEnd = (result: DropResult) => {\n    if (!result.destination) {\n      return;\n    }\n\n    const updatedList = [...operations];\n    const element = updatedList[result.source.index];\n    updatedList.splice(result.source.index, 1);\n    updatedList.splice(result.destination.index, 0, element);\n    onChange({ ...query, operations: updatedList });\n  };\n\n  const onCascaderBlur = () => {\n    setCascaderOpen(false);\n  };\n\n  return (\n    <EditorStack gap={1} direction=\"column\">\n      <EditorStack gap={1}>\n        {operations.length > 0 && (\n          <DragDropContext onDragEnd={onDragEnd}>\n            <Droppable droppableId=\"sortable-field-mappings\" direction=\"horizontal\">\n              {(provided) => (\n                <div className={styles.operationList} ref={provided.innerRef} {...provided.droppableProps}>\n                  {operations.map((op, index) => {\n                    return (\n                      <OperationEditor\n                        key={op.id + JSON.stringify(op.params) + index}\n                        queryModeller={queryModeller}\n                        index={index}\n                        operation={op}\n                        query={query}\n                        datasource={datasource}\n                        onChange={onOperationChange}\n                        onRemove={onRemove}\n                        onToggle={onToggle}\n                        onRunQuery={onRunQuery}\n                        flash={opsToHighlight[index]}\n                        highlight={highlightedOp === op}\n                        timeRange={timeRange}\n                        isConflictingOperation={isConflictingOperation}\n                      />\n                    );\n                  })}\n                  {provided.placeholder}\n                </div>\n              )}\n            </Droppable>\n          </DragDropContext>\n        )}\n        <div className={styles.addButton}>\n          {cascaderOpen ? (\n            <Cascader\n              options={addOptions}\n              onSelect={onAddOperation}\n              onBlur={onCascaderBlur}\n              autoFocus={true}\n              alwaysOpen={true}\n              hideActiveLevelLabel={true}\n              placeholder={'Search'}\n            />\n          ) : (\n            <Button icon={'plus'} variant={'secondary'} onClick={() => setCascaderOpen(true)} title={'Add operation'}>\n              Operations\n            </Button>\n          )}\n        </div>\n      </EditorStack>\n    </EditorStack>\n  );\n}\n\n/**\n * Returns indexes of operations that should be highlighted. We check the diff of operations added but at the same time\n * we want to highlight operations only after the initial render, so we check for mounted state and calculate the diff\n * only after.\n * @param operations\n */\nfunction useOperationsHighlight(operations: QueryBuilderOperation[]) {\n  const isMounted = useMountedState();\n  const prevOperations = usePrevious(operations);\n\n  if (!isMounted()) {\n    return operations.map(() => false);\n  }\n\n  if (!prevOperations) {\n    return operations.map(() => true);\n  }\n\n  let newOps: boolean[] = [];\n\n  if (prevOperations.length - 1 === operations.length && operations.every((op) => prevOperations.includes(op))) {\n    // In case we remove one op and does not change any ops then don't highlight anything.\n    return operations.map(() => false);\n  }\n  if (prevOperations.length + 1 === operations.length && prevOperations.every((op) => operations.includes(op))) {\n    // If we add a single op just find it and highlight just that.\n    const newOp = operations.find((op) => !prevOperations.includes(op));\n    newOps = operations.map((op) => {\n      return op === newOp;\n    });\n  } else {\n    // Default diff of all ops.\n    newOps = operations.map((op, index) => {\n      return !isSameOp(op.id, prevOperations[index]?.id);\n    });\n  }\n  return newOps;\n}\n\nfunction isSameOp(op1?: string, op2?: string) {\n  return op1 === op2 || `__${op1}_by` === op2 || op1 === `__${op2}_by`;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    heading: css({\n      label: 'heading',\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n      marginBottom: 0,\n    }),\n    operationList: css({\n      label: 'operationList',\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: theme.spacing(2),\n    }),\n    addButton: css({\n      label: 'addButton',\n      width: 126,\n      paddingBottom: theme.spacing(1),\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"OperationList.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationList.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport React, { useState } from 'react';\nimport { DragDropContext, Droppable, type DropResult } from '@hello-pangea/dnd';\nimport { useMountedState, usePrevious } from 'react-use';\n\nimport { type DataSourceApi, type GrafanaTheme2, type TimeRange } from '@grafana/data';\nimport { Button, Cascader, type CascaderOption, useStyles2 } from '@grafana/ui';\n\nimport { OperationEditor } from './OperationEditor';\nimport { type QueryBuilderOperation, type VisualQuery, type VisualQueryModeller } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\nexport interface Props<T extends VisualQuery> {\n  query: T;\n  datasource: DataSourceApi;\n  onChange: (query: T) => void;\n  onRunQuery: () => void;\n  queryModeller: VisualQueryModeller;\n  explainMode?: boolean;\n  highlightedOp?: QueryBuilderOperation;\n  timeRange?: TimeRange;\n  isConflictingOperation?: (operation: QueryBuilderOperation, otherOperations: QueryBuilderOperation[]) => boolean;\n}\n\nexport function OperationList<T extends VisualQuery>({\n  query,\n  datasource,\n  queryModeller,\n  onChange,\n  onRunQuery,\n  highlightedOp,\n  timeRange,\n  isConflictingOperation,\n}: Props<T>) {\n  const styles = useStyles2(getStyles);\n  const { operations } = query;\n\n  const opsToHighlight = useOperationsHighlight(operations);\n\n  const [cascaderOpen, setCascaderOpen] = useState(false);\n\n  const onOperationChange = (index: number, update: QueryBuilderOperation) => {\n    const updatedList = [...operations];\n    updatedList.splice(index, 1, update);\n    onChange({ ...query, operations: updatedList });\n  };\n\n  const onRemove = (index: number) => {\n    const updatedList = [...operations.slice(0, index), ...operations.slice(index + 1)];\n    onChange({ ...query, operations: updatedList });\n  };\n\n  const onToggle = (index: number) => {\n    onOperationChange(index, { ...operations[index], disabled: !operations[index].disabled });\n  };\n\n  const addOptions: CascaderOption[] = queryModeller.getCategories().map((category) => {\n    return {\n      value: category,\n      label: category,\n      items: queryModeller.getOperationsForCategory(category).map((operation) => ({\n        value: operation.id,\n        label: operation.name,\n        isLeaf: true,\n      })),\n    };\n  });\n\n  const onAddOperation = (value: string) => {\n    const operationDef = queryModeller.getOperationDefinition(value);\n    if (!operationDef) {\n      return;\n    }\n    onChange(operationDef.addOperationHandler(operationDef, query, queryModeller));\n    setCascaderOpen(false);\n  };\n\n  const onDragEnd = (result: DropResult) => {\n    if (!result.destination) {\n      return;\n    }\n\n    const updatedList = [...operations];\n    const element = updatedList[result.source.index];\n    updatedList.splice(result.source.index, 1);\n    updatedList.splice(result.destination.index, 0, element);\n    onChange({ ...query, operations: updatedList });\n  };\n\n  const onCascaderBlur = () => {\n    setCascaderOpen(false);\n  };\n\n  return (\n    <EditorStack gap={1} direction=\"column\">\n      <EditorStack gap={1}>\n        {operations.length > 0 && (\n          <DragDropContext onDragEnd={onDragEnd}>\n            <Droppable droppableId=\"sortable-field-mappings\" direction=\"horizontal\">\n              {(provided) => (\n                <div className={styles.operationList} ref={provided.innerRef} {...provided.droppableProps}>\n                  {operations.map((op, index) => {\n                    return (\n                      <OperationEditor\n                        key={op.id + JSON.stringify(op.params) + index}\n                        queryModeller={queryModeller}\n                        index={index}\n                        operation={op}\n                        query={query}\n                        datasource={datasource}\n                        onChange={onOperationChange}\n                        onRemove={onRemove}\n                        onToggle={onToggle}\n                        onRunQuery={onRunQuery}\n                        flash={opsToHighlight[index]}\n                        highlight={highlightedOp === op}\n                        timeRange={timeRange}\n                        isConflictingOperation={isConflictingOperation}\n                      />\n                    );\n                  })}\n                  {provided.placeholder}\n                </div>\n              )}\n            </Droppable>\n          </DragDropContext>\n        )}\n        <div className={styles.addButton}>\n          {cascaderOpen ? (\n            <Cascader\n              options={addOptions}\n              onSelect={onAddOperation}\n              onBlur={onCascaderBlur}\n              autoFocus={true}\n              alwaysOpen={true}\n              hideActiveLevelLabel={true}\n              placeholder={'Search'}\n            />\n          ) : (\n            <Button icon={'plus'} variant={'secondary'} onClick={() => setCascaderOpen(true)} title={'Add operation'}>\n              Operations\n            </Button>\n          )}\n        </div>\n      </EditorStack>\n    </EditorStack>\n  );\n}\n\n/**\n * Returns indexes of operations that should be highlighted. We check the diff of operations added but at the same time\n * we want to highlight operations only after the initial render, so we check for mounted state and calculate the diff\n * only after.\n * @param operations\n */\nfunction useOperationsHighlight(operations: QueryBuilderOperation[]) {\n  const isMounted = useMountedState();\n  const prevOperations = usePrevious(operations);\n\n  if (!isMounted()) {\n    return operations.map(() => false);\n  }\n\n  if (!prevOperations) {\n    return operations.map(() => true);\n  }\n\n  let newOps: boolean[] = [];\n\n  if (prevOperations.length - 1 === operations.length && operations.every((op) => prevOperations.includes(op))) {\n    // In case we remove one op and does not change any ops then don't highlight anything.\n    return operations.map(() => false);\n  }\n  if (prevOperations.length + 1 === operations.length && prevOperations.every((op) => operations.includes(op))) {\n    // If we add a single op just find it and highlight just that.\n    const newOp = operations.find((op) => !prevOperations.includes(op));\n    newOps = operations.map((op) => {\n      return op === newOp;\n    });\n  } else {\n    // Default diff of all ops.\n    newOps = operations.map((op, index) => {\n      return !isSameOp(op.id, prevOperations[index]?.id);\n    });\n  }\n  return newOps;\n}\n\nfunction isSameOp(op1?: string, op2?: string) {\n  return op1 === op2 || `__${op1}_by` === op2 || op1 === `__${op2}_by`;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    heading: css({\n      label: 'heading',\n      fontSize: 12,\n      fontWeight: theme.typography.fontWeightMedium,\n      marginBottom: 0,\n    }),\n    operationList: css({\n      label: 'operationList',\n      display: 'flex',\n      flexWrap: 'wrap',\n      gap: theme.spacing(2),\n    }),\n    addButton: css({\n      label: 'addButton',\n      width: 126,\n      paddingBottom: theme.spacing(1),\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/OperationParamEditor.js

@@ -6,7 +6,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';

package/dist/esm/components/VisualQueryBuilder/components/OperationParamEditor.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import React, { type FunctionComponent } from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n  paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n  if (paramDef.editor) {\n    return paramDef.editor;\n  }\n\n  if (paramDef.options) {\n    return SelectInputParamEditor;\n  }\n\n  switch (paramDef.type) {\n    case 'boolean':\n      return BoolInputParamEditor;\n    case 'number':\n    case 'string':\n    default:\n      return SimpleInputParamEditor;\n  }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <AutoSizeInput\n      id={getOperationParamId(props.operationId, props.index)}\n      defaultValue={props.value?.toString()}\n      minWidth={props.paramDef.minWidth}\n      placeholder={props.paramDef.placeholder}\n      title={props.paramDef.description}\n      maxWidth={(props.paramDef.minWidth || 20) * 3}\n      onCommitChange={(evt) => {\n        props.onChange(props.index, evt.currentTarget.value);\n        if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n          props.onRunQuery();\n        }\n      }}\n    />\n  );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <Checkbox\n      id={getOperationParamId(props.operationId, props.index)}\n      value={Boolean(props.value)}\n      onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n    />\n  );\n}\n\nfunction SelectInputParamEditor({\n  paramDef,\n  value,\n  index,\n  operationId,\n  onChange,\n}: QueryBuilderOperationParamEditorProps) {\n  const styles = useStyles2(getStyles);\n  let selectOptions = paramDef.options as SelectableValue[];\n\n  if (!selectOptions[0]?.label) {\n    selectOptions = paramDef.options!.map((option) => ({\n      label: option.toString(),\n      value: option,\n    }));\n  }\n\n  let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n  // If we have optional options param and don't have value, we want to render button with which we add optional options.\n  // This makes it easier to understand what needs to be selected and what is optional.\n  if (!value && paramDef.optional) {\n    return (\n      <div className={styles.optionalParam}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          title={`Add ${paramDef.name}`}\n          icon=\"plus\"\n          onClick={() => onChange(index, selectOptions[0].value)}\n        >\n          {paramDef.name}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n      <Select\n        id={getOperationParamId(operationId, index)}\n        value={valueOption}\n        options={selectOptions}\n        placeholder={paramDef.placeholder}\n        allowCustomValue={true}\n        onChange={(value) => onChange(index, value.value!)}\n        width={paramDef.minWidth || 'auto'}\n      />\n      {paramDef.optional && (\n        <Button\n          data-testid={`operations.${index}.remove-param`}\n          size=\"sm\"\n          fill=\"text\"\n          icon=\"times\"\n          variant=\"secondary\"\n          title={`Remove ${paramDef.name}`}\n          onClick={() => onChange(index, '')}\n        />\n      )}\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    optionalParam: css({\n      marginTop: theme.spacing(1),\n    }),\n  };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n  return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["value"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAUO,SAAS,wBACd,QAC0D,EAAA;AAC1D,EAAA,IAAI,SAAS,MAAQ,EAAA;AACnB,IAAA,OAAO,QAAS,CAAA,MAAA;AAAA;AAGlB,EAAA,IAAI,SAAS,OAAS,EAAA;AACpB,IAAO,OAAA,sBAAA;AAAA;AAGT,EAAA,QAAQ,SAAS,IAAM;AAAA,IACrB,KAAK,SAAA;AACH,MAAO,OAAA,oBAAA;AAAA,IACT,KAAK,QAAA;AAAA,IACL,KAAK,QAAA;AAAA,IACL;AACE,MAAO,OAAA,sBAAA;AAAA;AAEb;AAEA,SAAS,uBAAuB,KAA8C,EAAA;AA/B9E,EAAA,IAAA,EAAA;AAgCE,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,mBAAA,CAAoB,KAAM,CAAA,WAAA,EAAa,MAAM,KAAK,CAAA;AAAA,MACtD,YAAA,EAAA,CAAc,EAAM,GAAA,KAAA,CAAA,KAAA,KAAN,IAAa,GAAA,SAAA,GAAA,EAAA,CAAA,QAAA,EAAA;AAAA,MAC3B,QAAA,EAAU,MAAM,QAAS,CAAA,QAAA;AAAA,MACzB,WAAA,EAAa,MAAM,QAAS,CAAA,WAAA;AAAA,MAC5B,KAAA,EAAO,MAAM,QAAS,CAAA,WAAA;AAAA,MACtB,QAAW,EAAA,CAAA,KAAA,CAAM,QAAS,CAAA,QAAA,IAAY,EAAM,IAAA,CAAA;AAAA,MAC5C,cAAA,EAAgB,CAAC,GAAQ,KAAA;AACvB,QAAA,KAAA,CAAM,QAAS,CAAA,KAAA,CAAM,KAAO,EAAA,GAAA,CAAI,cAAc,KAAK,CAAA;AACnD,QAAA,IAAI,KAAM,CAAA,QAAA,CAAS,eAAmB,IAAA,GAAA,CAAI,SAAS,SAAW,EAAA;AAC5D,UAAA,KAAA,CAAM,UAAW,EAAA;AAAA;AACnB;AACF;AAAA,GACF;AAEJ;AAEA,SAAS,qBAAqB,KAA8C,EAAA;AAC1E,EACE,uBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,EAAI,EAAA,mBAAA,CAAoB,KAAM,CAAA,WAAA,EAAa,MAAM,KAAK,CAAA;AAAA,MACtD,KAAA,EAAO,OAAQ,CAAA,KAAA,CAAM,KAAK,CAAA;AAAA,MAC1B,QAAA,EAAU,CAAC,GAAQ,KAAA,KAAA,CAAM,SAAS,KAAM,CAAA,KAAA,EAAO,GAAI,CAAA,aAAA,CAAc,OAAO;AAAA;AAAA,GAC1E;AAEJ;AAEA,SAAS,sBAAuB,CAAA;AAAA,EAC9B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAA0C,EAAA;AAlE1C,EAAA,IAAA,EAAA,EAAA,EAAA;AAmEE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AACnC,EAAA,IAAI,gBAAgB,QAAS,CAAA,OAAA;AAE7B,EAAA,IAAI,EAAC,CAAA,EAAA,GAAA,aAAA,CAAc,CAAC,CAAA,KAAf,sBAAkB,KAAO,CAAA,EAAA;AAC5B,IAAA,aAAA,GAAgB,QAAS,CAAA,OAAA,CAAS,GAAI,CAAA,CAAC,MAAY,MAAA;AAAA,MACjD,KAAA,EAAO,OAAO,QAAS,EAAA;AAAA,MACvB,KAAO,EAAA;AAAA,KACP,CAAA,CAAA;AAAA;AAGJ,EAAI,IAAA,WAAA,GAAA,CAAc,EAAc,GAAA,aAAA,CAAA,IAAA,CAAK,CAAC,CAAA,KAAM,CAAE,CAAA,KAAA,KAAU,KAAK,CAAA,KAA3C,IAAgD,GAAA,EAAA,GAAA,QAAA,CAAS,KAAe,CAAA;AAI1F,EAAI,IAAA,CAAC,KAAS,IAAA,QAAA,CAAS,QAAU,EAAA;AAC/B,IAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAI,SAAW,EAAA,MAAA,CAAO,aACrB,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,MAAC,MAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,IAAA;AAAA,QACL,OAAQ,EAAA,WAAA;AAAA,QACR,KAAA,EAAO,CAAO,IAAA,EAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,QAC3B,IAAK,EAAA,MAAA;AAAA,QACL,SAAS,MAAM,QAAA,CAAS,OAAO,aAAc,CAAA,CAAC,EAAE,KAAK;AAAA,OAAA;AAAA,MAEpD,QAAS,CAAA;AAAA,KAEd,CAAA;AAAA;AAIJ,EAAA,2CACG,WAAY,EAAA,EAAA,GAAA,EAAK,KAAK,SAAU,EAAA,KAAA,EAAM,YAAW,QAChD,EAAA,kBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,EAAA,EAAI,mBAAoB,CAAA,WAAA,EAAa,KAAK,CAAA;AAAA,MAC1C,KAAO,EAAA,WAAA;AAAA,MACP,OAAS,EAAA,aAAA;AAAA,MACT,aAAa,QAAS,CAAA,WAAA;AAAA,MACtB,gBAAkB,EAAA,IAAA;AAAA,MAClB,UAAU,CAACA,MAAAA,KAAU,QAAS,CAAA,KAAA,EAAOA,OAAM,KAAM,CAAA;AAAA,MACjD,KAAA,EAAO,SAAS,QAAY,IAAA;AAAA;AAAA,GAC9B,EACC,SAAS,QACR,oBAAA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACC,aAAA,EAAa,cAAc,KAAK,CAAA,aAAA,CAAA;AAAA,MAChC,IAAK,EAAA,IAAA;AAAA,MACL,IAAK,EAAA,MAAA;AAAA,MACL,IAAK,EAAA,OAAA;AAAA,MACL,OAAQ,EAAA,WAAA;AAAA,MACR,KAAA,EAAO,CAAU,OAAA,EAAA,QAAA,CAAS,IAAI,CAAA,CAAA;AAAA,MAC9B,OAAS,EAAA,MAAM,QAAS,CAAA,KAAA,EAAO,EAAE;AAAA;AAAA,GAGvC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,eAAe,GAAI,CAAA;AAAA,MACjB,SAAA,EAAW,KAAM,CAAA,OAAA,CAAQ,CAAC;AAAA,KAC3B;AAAA,GACH;AACF,CAAA;AAEgB,SAAA,mBAAA,CAAoB,aAAqB,UAAoB,EAAA;AAC3E,EAAO,OAAA,CAAA,WAAA,EAAc,WAAW,CAAA,OAAA,EAAU,UAAU,CAAA,CAAA;AACtD;;;;"}
+{"version":3,"file":"OperationParamEditor.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationParamEditor.tsx"],"sourcesContent":["import React, { type FunctionComponent } from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2, type SelectableValue, toOption } from '@grafana/data';\nimport { AutoSizeInput, Button, Checkbox, Select, useStyles2 } from '@grafana/ui';\n\nimport { type QueryBuilderOperationParamDef, type QueryBuilderOperationParamEditorProps } from '../types';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function getOperationParamEditor(\n  paramDef: QueryBuilderOperationParamDef\n): FunctionComponent<QueryBuilderOperationParamEditorProps> {\n  if (paramDef.editor) {\n    return paramDef.editor;\n  }\n\n  if (paramDef.options) {\n    return SelectInputParamEditor;\n  }\n\n  switch (paramDef.type) {\n    case 'boolean':\n      return BoolInputParamEditor;\n    case 'number':\n    case 'string':\n    default:\n      return SimpleInputParamEditor;\n  }\n}\n\nfunction SimpleInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <AutoSizeInput\n      id={getOperationParamId(props.operationId, props.index)}\n      defaultValue={props.value?.toString()}\n      minWidth={props.paramDef.minWidth}\n      placeholder={props.paramDef.placeholder}\n      title={props.paramDef.description}\n      maxWidth={(props.paramDef.minWidth || 20) * 3}\n      onCommitChange={(evt) => {\n        props.onChange(props.index, evt.currentTarget.value);\n        if (props.paramDef.runQueryOnEnter && evt.type === 'keydown') {\n          props.onRunQuery();\n        }\n      }}\n    />\n  );\n}\n\nfunction BoolInputParamEditor(props: QueryBuilderOperationParamEditorProps) {\n  return (\n    <Checkbox\n      id={getOperationParamId(props.operationId, props.index)}\n      value={Boolean(props.value)}\n      onChange={(evt) => props.onChange(props.index, evt.currentTarget.checked)}\n    />\n  );\n}\n\nfunction SelectInputParamEditor({\n  paramDef,\n  value,\n  index,\n  operationId,\n  onChange,\n}: QueryBuilderOperationParamEditorProps) {\n  const styles = useStyles2(getStyles);\n  let selectOptions = paramDef.options as SelectableValue[];\n\n  if (!selectOptions[0]?.label) {\n    selectOptions = paramDef.options!.map((option) => ({\n      label: option.toString(),\n      value: option,\n    }));\n  }\n\n  let valueOption = selectOptions.find((x) => x.value === value) ?? toOption(value as string);\n\n  // If we have optional options param and don't have value, we want to render button with which we add optional options.\n  // This makes it easier to understand what needs to be selected and what is optional.\n  if (!value && paramDef.optional) {\n    return (\n      <div className={styles.optionalParam}>\n        <Button\n          size=\"sm\"\n          variant=\"secondary\"\n          title={`Add ${paramDef.name}`}\n          icon=\"plus\"\n          onClick={() => onChange(index, selectOptions[0].value)}\n        >\n          {paramDef.name}\n        </Button>\n      </div>\n    );\n  }\n\n  return (\n    <EditorStack gap={0.5} direction=\"row\" alignItems=\"center\">\n      <Select\n        id={getOperationParamId(operationId, index)}\n        value={valueOption}\n        options={selectOptions}\n        placeholder={paramDef.placeholder}\n        allowCustomValue={true}\n        onChange={(value) => onChange(index, value.value!)}\n        width={paramDef.minWidth || 'auto'}\n      />\n      {paramDef.optional && (\n        <Button\n          data-testid={`operations.${index}.remove-param`}\n          size=\"sm\"\n          fill=\"text\"\n          icon=\"times\"\n          variant=\"secondary\"\n          title={`Remove ${paramDef.name}`}\n          onClick={() => onChange(index, '')}\n        />\n      )}\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    optionalParam: css({\n      marginTop: theme.spacing(1),\n    }),\n  };\n};\n\nexport function getOperationParamId(operationId: string, paramIndex: number) {\n  return `operations.${operationId}.param.${paramIndex}`;\n}\n"],"names":["value"],"mappings":"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"}

package/dist/esm/components/VisualQueryBuilder/components/OperationsEditorRow.js

@@ -6,7 +6,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';

package/dist/esm/components/VisualQueryBuilder/components/OperationsEditorRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"OperationsEditorRow.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationsEditorRow.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function OperationsEditorRow({ children }: React.PropsWithChildren<{}>) {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={1}>{children}</EditorStack>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1, 1, 0, 1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAQgB,SAAA,mBAAA,CAAoB,EAAE,QAAA,EAAyC,EAAA;AAC7E,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,sCACpB,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,EAAA,QAAS,CACjC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA;AAAA,KAClC;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"OperationsEditorRow.js","sources":["../../../../../src/components/VisualQueryBuilder/components/OperationsEditorRow.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\nexport function OperationsEditorRow({ children }: React.PropsWithChildren<{}>) {\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.root}>\n      <EditorStack gap={1}>{children}</EditorStack>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    root: css({\n      padding: theme.spacing(1, 1, 0, 1),\n      backgroundColor: theme.colors.background.secondary,\n      borderRadius: theme.shape.radius.default,\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAQgB,SAAA,mBAAA,CAAoB,EAAE,QAAA,EAAyC,EAAA;AAC7E,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAI,EAAA,EAAA,SAAA,EAAW,MAAO,CAAA,IAAA,EAAA,sCACpB,WAAY,EAAA,EAAA,GAAA,EAAK,CAAI,EAAA,EAAA,QAAS,CACjC,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,MAAM,GAAI,CAAA;AAAA,MACR,SAAS,KAAM,CAAA,OAAA,CAAQ,CAAG,EAAA,CAAA,EAAG,GAAG,CAAC,CAAA;AAAA,MACjC,eAAA,EAAiB,KAAM,CAAA,MAAA,CAAO,UAAW,CAAA,SAAA;AAAA,MACzC,YAAA,EAAc,KAAM,CAAA,KAAA,CAAM,MAAO,CAAA;AAAA,KAClC;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js

@@ -6,7 +6,6 @@ import { useStyles2, Switch } from '@grafana/ui';
 import '../../QueryEditor/types.js';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import 'react-use';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';

package/dist/esm/components/VisualQueryBuilder/components/QueryHeaderSwitch.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,sCACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,UAAY,EAAA,EAAA,EAAI,WAAY,CAAA,OAAA,EAAS,CACnD,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}
+{"version":3,"file":"QueryHeaderSwitch.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryHeaderSwitch.tsx"],"sourcesContent":["import { css } from '@emotion/css';\nimport { uniqueId } from 'lodash';\nimport React, { type HTMLProps, useRef } from 'react';\n\nimport { type GrafanaTheme2 } from '@grafana/data';\nimport { Switch, useStyles2 } from '@grafana/ui';\n\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props extends Omit<HTMLProps<HTMLInputElement>, 'value' | 'ref'> {\n  value?: boolean;\n  label: string;\n}\n\nexport function QueryHeaderSwitch({ label, ...inputProps }: Props) {\n  const dashedLabel = label.replace(' ', '-');\n  const switchIdRef = useRef(uniqueId(`switch-${dashedLabel}`));\n  const styles = useStyles2(getStyles);\n\n  return (\n    <EditorStack gap={1}>\n      <label htmlFor={switchIdRef.current} className={styles.switchLabel}>\n        {label}\n      </label>\n      <Switch {...inputProps} id={switchIdRef.current} />\n    </EditorStack>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    switchLabel: css({\n      color: theme.colors.text.secondary,\n      cursor: 'pointer',\n      fontSize: theme.typography.bodySmall.fontSize,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,SAAS,iBAAkB,CAAA,EAAE,KAAO,EAAA,GAAG,YAAqB,EAAA;AACjE,EAAA,MAAM,WAAc,GAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,EAAK,GAAG,CAAA;AAC1C,EAAA,MAAM,cAAc,MAAO,CAAA,QAAA,CAAS,CAAU,OAAA,EAAA,WAAW,EAAE,CAAC,CAAA;AAC5D,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA;AAEnC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,eAAY,GAAK,EAAA,CAAA,EAAA,sCACf,OAAM,EAAA,EAAA,OAAA,EAAS,YAAY,OAAS,EAAA,SAAA,EAAW,OAAO,WACpD,EAAA,EAAA,KACH,mBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAQ,GAAG,UAAY,EAAA,EAAA,EAAI,WAAY,CAAA,OAAA,EAAS,CACnD,CAAA;AAEJ;AAEA,MAAM,SAAA,GAAY,CAAC,KAAyB,KAAA;AAC1C,EAAO,OAAA;AAAA,IACL,aAAa,GAAI,CAAA;AAAA,MACf,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,MAAQ,EAAA,SAAA;AAAA,MACR,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA;AAAA;AAC3B,KACD;AAAA,GACH;AACF,CAAA;;;;"}

package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js

@@ -8,7 +8,6 @@ import '../../QueryEditor/types.js';
 import 'lodash';
 import '../../QueryEditor/EditorList.js';
 import { EditorStack } from '../../QueryEditor/EditorStack.js';
-import '../../QueryEditor/Space.js';
 import '../../QueryEditor/QueryHeader.js';
 import 'react-virtualized-auto-sizer';
 import 'sql-formatter-plus';

package/dist/esm/components/VisualQueryBuilder/components/QueryOptionGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      <div className={styles.queryStatsWrap}>\n        {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n        {queryStats && config.featureToggles.lokiQuerySplitting && (\n          <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n            <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n          </Tooltip>\n        )}\n\n        {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n      </div>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    queryStatsWrap: css({\n      display: 'flex',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      label: 'query-stats-wrap',\n      padding: theme.spacing(1),\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"QueryOptionGroup.js","sources":["../../../../../src/components/VisualQueryBuilder/components/QueryOptionGroup.tsx"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/css';\nimport { useToggle } from 'react-use';\n\nimport { getValueFormat, type GrafanaTheme2 } from '@grafana/data';\nimport { config } from '@grafana/runtime';\nimport { Collapse, Icon, Tooltip, useStyles2 } from '@grafana/ui';\n\nimport { type QueryStats } from '../types';\nimport { EditorStack } from '../../QueryEditor';\n\ninterface Props {\n  title: string;\n  collapsedInfo: string[];\n  queryStats?: QueryStats | null;\n}\n\nexport function QueryOptionGroup({ title, children, collapsedInfo, queryStats }: React.PropsWithChildren<Props>) {\n  const [isOpen, toggleOpen] = useToggle(false);\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      <Collapse\n        className={styles.collapse}\n        collapsible\n        isOpen={isOpen}\n        onToggle={toggleOpen}\n        label={\n          <EditorStack gap={0}>\n            <h6 className={styles.title}>{title}</h6>\n            {!isOpen && (\n              <div className={styles.description}>\n                {collapsedInfo.map((x, i) => (\n                  <span key={i}>{x}</span>\n                ))}\n              </div>\n            )}\n          </EditorStack>\n        }\n      >\n        <div className={styles.body}>{children}</div>\n      </Collapse>\n      <div className={styles.queryStatsWrap}>\n        {/**TODO: This is Loki logic that should eventually be moved to Loki */}\n        {queryStats && config.featureToggles.lokiQuerySplitting && (\n          <Tooltip content=\"Note: the query will be split into multiple parts and executed in sequence. Query limits will only apply each individual part.\">\n            <Icon tabIndex={0} name=\"info-circle\" className={styles.tooltip} size=\"sm\" />\n          </Tooltip>\n        )}\n\n        {queryStats && <p className={styles.stats}>{generateQueryStats(queryStats)}</p>}\n      </div>\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => {\n  return {\n    collapse: css({\n      backgroundColor: 'unset',\n      border: 'unset',\n      marginBottom: 0,\n\n      ['> button']: {\n        padding: theme.spacing(0, 1),\n      },\n    }),\n    wrapper: css({\n      width: '100%',\n      display: 'flex',\n      justifyContent: 'space-between',\n      alignItems: 'baseline',\n    }),\n    title: css({\n      flexGrow: 1,\n      overflow: 'hidden',\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n      margin: 0,\n    }),\n    description: css({\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n      fontWeight: theme.typography.bodySmall.fontWeight,\n      paddingLeft: theme.spacing(2),\n      gap: theme.spacing(2),\n      display: 'flex',\n    }),\n    body: css({\n      display: 'flex',\n      gap: theme.spacing(2),\n      flexWrap: 'wrap',\n    }),\n    queryStatsWrap: css({\n      display: 'flex',\n      alignItems: 'center',\n      alignSelf: 'flex-start',\n      label: 'query-stats-wrap',\n      padding: theme.spacing(1),\n    }),\n    stats: css({\n      margin: '0px',\n      color: theme.colors.text.secondary,\n      fontSize: theme.typography.bodySmall.fontSize,\n    }),\n    tooltip: css({\n      marginRight: theme.spacing(0.25),\n    }),\n  };\n};\n\nconst generateQueryStats = (queryStats: QueryStats) => {\n  if (queryStats.message) {\n    return queryStats.message;\n  }\n\n  return `This query will process approximately ${convertUnits(queryStats)}.`;\n};\n\nconst convertUnits = (queryStats: QueryStats): string => {\n  const { text, suffix } = getValueFormat('bytes')(queryStats.bytes, 1);\n  return text + suffix;\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/index.d.ts

@@ -726,14 +726,7 @@ interface SpaceProps {
     h?: number;
     layout?: 'block' | 'inline';
 }
-declare const Space: {
-    (props: SpaceProps): React.JSX.Element;
-    defaultProps: {
-        v: number;
-        h: number;
-        layout: string;
-    };
-};
+declare const Space: ({ v, h, layout }: SpaceProps) => React.JSX.Element;
 
 interface SearchFilterOptions {
     searchFilter?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grafana/plugin-ui",
-  "version": "0.13.0",
+  "version": "0.13.1",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/grafana/plugin-ui.git"
@@ -98,7 +98,7 @@
     "@types/chance": "^1.1.0",
     "@types/lodash": "^4.14.194",
     "@types/memoize-one": "^5.1.2",
-    "@types/react": "18.3.18",
+    "@types/react": "18.3.28",
     "@types/react-calendar": "^3.1.2",
     "@types/testing-library__jest-dom": "^5.9.5",
     "@typescript-eslint/eslint-plugin": "^6.18.0",
@@ -120,8 +120,8 @@
     "mockdate": "^3.0.2",
     "prettier": "^3.3.3",
     "publint": "^0.3.12",
-    "react": "18.2.0",
-    "react-dom": "18.2.0",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "react-select-event": "^5.5.1",
     "rollup": "^4.32.1",
     "rollup-plugin-dts": "^6.1.1",