@grafana/scenes 4.11.2--canary.648.8738574184.0 → 4.11.3--canary.690.8783271240.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# v4.11.2 (Mon Apr 22 2024)
+
+#### 🐛 Bug Fix
+
+- GroupBy: Fetch options when opening menu [#687](https://github.com/grafana/scenes/pull/687) ([@ashharrison90](https://github.com/ashharrison90) [@dprokop](https://github.com/dprokop))
+
+#### Authors: 2
+
+- Ashley Harrison ([@ashharrison90](https://github.com/ashharrison90))
+- Dominik Prokop ([@dprokop](https://github.com/dprokop))
+
+---
+
 # v4.11.1 (Wed Apr 17 2024)
 
 #### 🐛 Bug Fix

package/dist/esm/components/VizPanel/VizPanelMenu.js

@@ -1,7 +1,6 @@
 import React, { useEffect } from 'react';
 import { Menu } from '@grafana/ui';
 import { SceneObjectBase } from '../../core/SceneObjectBase.js';
-import { selectors } from '@grafana/e2e-selectors';
 
 class VizPanelMenu extends SceneObjectBase {
   addItem(item) {
@@ -35,8 +34,7 @@ function VizPanelMenuRenderer({ model }) {
         childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
         url: item.href,
         onClick: item.onClick,
-        shortcut: item.shortcut,
-        testId: selectors.components.Panels.Panel.menuItems(item.text)
+        shortcut: item.shortcut
       })
     );
   };

package/dist/esm/components/VizPanel/VizPanelMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"VizPanelMenu.js","sources":["../../../../src/components/VizPanel/VizPanelMenu.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { PanelMenuItem } from '@grafana/data';\nimport { Menu } from '@grafana/ui';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { selectors } from '@grafana/e2e-selectors';\n\ninterface VizPanelMenuState extends SceneObjectState {\n  items?: PanelMenuItem[];\n}\n\nexport class VizPanelMenu extends SceneObjectBase<VizPanelMenuState> {\n  static Component = VizPanelMenuRenderer;\n\n  // Allows adding menu items dynamically\n  public addItem(item: PanelMenuItem) {\n    this.setState({\n      items: this.state.items ? [...this.state.items, item] : [item],\n    });\n  }\n\n  // Allows replacing all menu items\n  public setItems(items: PanelMenuItem[]) {\n    this.setState({\n      items,\n    });\n  }\n}\n\nfunction VizPanelMenuRenderer({ model }: SceneComponentProps<VizPanelMenu>) {\n  const { items = [] } = model.useState();\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.focus();\n    }\n  }, []);\n\n  const renderItems = (items: PanelMenuItem[]) => {\n    return items.map((item) =>\n      item.type === 'divider' ? (\n        <Menu.Divider key={item.text} />\n      ) : (\n        <Menu.Item\n          key={item.text}\n          label={item.text}\n          icon={item.iconClassName}\n          childItems={item.subMenu ? renderItems(item.subMenu) : undefined}\n          url={item.href}\n          onClick={item.onClick}\n          shortcut={item.shortcut}\n          testId={selectors.components.Panels.Panel.menuItems(item.text)}\n        />\n      )\n    );\n  };\n\n  return <Menu ref={ref}>{renderItems(items)}</Menu>;\n}\n"],"names":["items"],"mappings":";;;;;AAWO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAI5D,QAAQ,IAAqB,EAAA;AAClC,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,GAAQ,CAAC,GAAG,IAAK,CAAA,KAAA,CAAM,KAAO,EAAA,IAAI,CAAI,GAAA,CAAC,IAAI,CAAA;AAAA,KAC9D,CAAA,CAAA;AAAA,GACH;AAAA,EAGO,SAAS,KAAwB,EAAA;AACtC,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AACF,CAAA;AAhBa,YAAA,CACJ,SAAY,GAAA,oBAAA,CAAA;AAiBrB,SAAS,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AAC1E,EAAA,MAAM,EAAE,KAAQ,GAAA,EAAG,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AACtC,EAAM,MAAA,GAAA,GAAM,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAA,GAAA,CAAI,QAAQ,KAAM,EAAA,CAAA;AAAA,KACpB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAACA,MAA2B,KAAA;AAC9C,IAAA,OAAOA,MAAM,CAAA,GAAA;AAAA,MAAI,CAAC,IAChB,KAAA,IAAA,CAAK,SAAS,SACZ,mBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,OAAL,EAAA;AAAA,QAAa,KAAK,IAAK,CAAA,IAAA;AAAA,OAAM,CAAA,mBAE7B,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,IAAL,EAAA;AAAA,QACC,KAAK,IAAK,CAAA,IAAA;AAAA,QACV,OAAO,IAAK,CAAA,IAAA;AAAA,QACZ,MAAM,IAAK,CAAA,aAAA;AAAA,QACX,YAAY,IAAK,CAAA,OAAA,GAAU,WAAY,CAAA,IAAA,CAAK,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,QACvD,KAAK,IAAK,CAAA,IAAA;AAAA,QACV,SAAS,IAAK,CAAA,OAAA;AAAA,QACd,UAAU,IAAK,CAAA,QAAA;AAAA,QACf,QAAQ,SAAU,CAAA,UAAA,CAAW,OAAO,KAAM,CAAA,SAAA,CAAU,KAAK,IAAI,CAAA;AAAA,OAC/D,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA;AAAA,GAAW,EAAA,WAAA,CAAY,KAAK,CAAE,CAAA,CAAA;AAC7C;;;;"}
+{"version":3,"file":"VizPanelMenu.js","sources":["../../../../src/components/VizPanel/VizPanelMenu.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\nimport { PanelMenuItem } from '@grafana/data';\nimport { Menu } from '@grafana/ui';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObjectState } from '../../core/types';\n\ninterface VizPanelMenuState extends SceneObjectState {\n  items?: PanelMenuItem[];\n}\n\nexport class VizPanelMenu extends SceneObjectBase<VizPanelMenuState> {\n  static Component = VizPanelMenuRenderer;\n\n  // Allows adding menu items dynamically\n  public addItem(item: PanelMenuItem) {\n    this.setState({\n      items: this.state.items ? [...this.state.items, item] : [item],\n    });\n  }\n\n  // Allows replacing all menu items\n  public setItems(items: PanelMenuItem[]) {\n    this.setState({\n      items,\n    });\n  }\n}\n\nfunction VizPanelMenuRenderer({ model }: SceneComponentProps<VizPanelMenu>) {\n  const { items = [] } = model.useState();\n  const ref = React.useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    if (ref.current) {\n      ref.current.focus();\n    }\n  }, []);\n\n  const renderItems = (items: PanelMenuItem[]) => {\n    return items.map((item) =>\n      item.type === 'divider' ? (\n        <Menu.Divider key={item.text} />\n      ) : (\n        <Menu.Item\n          key={item.text}\n          label={item.text}\n          icon={item.iconClassName}\n          childItems={item.subMenu ? renderItems(item.subMenu) : undefined}\n          url={item.href}\n          onClick={item.onClick}\n          shortcut={item.shortcut}\n        />\n      )\n    );\n  };\n\n  return <Menu ref={ref}>{renderItems(items)}</Menu>;\n}\n"],"names":["items"],"mappings":";;;;AAUO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAI5D,QAAQ,IAAqB,EAAA;AAClC,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,KAAO,EAAA,IAAA,CAAK,KAAM,CAAA,KAAA,GAAQ,CAAC,GAAG,IAAK,CAAA,KAAA,CAAM,KAAO,EAAA,IAAI,CAAI,GAAA,CAAC,IAAI,CAAA;AAAA,KAC9D,CAAA,CAAA;AAAA,GACH;AAAA,EAGO,SAAS,KAAwB,EAAA;AACtC,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,KAAA;AAAA,KACD,CAAA,CAAA;AAAA,GACH;AACF,CAAA;AAhBa,YAAA,CACJ,SAAY,GAAA,oBAAA,CAAA;AAiBrB,SAAS,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AAC1E,EAAA,MAAM,EAAE,KAAQ,GAAA,EAAG,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AACtC,EAAM,MAAA,GAAA,GAAM,KAAM,CAAA,MAAA,CAAuB,IAAI,CAAA,CAAA;AAE7C,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAI,OAAS,EAAA;AACf,MAAA,GAAA,CAAI,QAAQ,KAAM,EAAA,CAAA;AAAA,KACpB;AAAA,GACF,EAAG,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,WAAA,GAAc,CAACA,MAA2B,KAAA;AAC9C,IAAA,OAAOA,MAAM,CAAA,GAAA;AAAA,MAAI,CAAC,IAChB,KAAA,IAAA,CAAK,SAAS,SACZ,mBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,OAAL,EAAA;AAAA,QAAa,KAAK,IAAK,CAAA,IAAA;AAAA,OAAM,CAAA,mBAE7B,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,IAAL,EAAA;AAAA,QACC,KAAK,IAAK,CAAA,IAAA;AAAA,QACV,OAAO,IAAK,CAAA,IAAA;AAAA,QACZ,MAAM,IAAK,CAAA,aAAA;AAAA,QACX,YAAY,IAAK,CAAA,OAAA,GAAU,WAAY,CAAA,IAAA,CAAK,OAAO,CAAI,GAAA,KAAA,CAAA;AAAA,QACvD,KAAK,IAAK,CAAA,IAAA;AAAA,QACV,SAAS,IAAK,CAAA,OAAA;AAAA,QACd,UAAU,IAAK,CAAA,QAAA;AAAA,OACjB,CAAA;AAAA,KAEJ,CAAA;AAAA,GACF,CAAA;AAEA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,GAAA;AAAA,GAAW,EAAA,WAAA,CAAY,KAAK,CAAE,CAAA,CAAA;AAC7C;;;;"}

package/dist/esm/components/layout/grid/SceneGridRow.js

@@ -5,7 +5,6 @@ import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
 import { SceneGridLayout } from './SceneGridLayout.js';
 import { GRID_COLUMN_COUNT } from './constants.js';
 import { sceneGraph } from '../../../core/sceneGraph/index.js';
-import { selectors } from '@grafana/e2e-selectors';
 
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -79,8 +78,7 @@ function SceneGridRowRenderer({ model }) {
   }, /* @__PURE__ */ React.createElement("button", {
     onClick: model.onCollapseToggle,
     className: styles.rowTitleButton,
-    "aria-label": isCollapsed ? "Expand row" : "Collapse row",
-    "data-testid": selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
+    "aria-label": isCollapsed ? "Expand row" : "Collapse row"
   }, isCollapsible && /* @__PURE__ */ React.createElement(Icon, {
     name: isCollapsed ? "angle-right" : "angle-down"
   }), /* @__PURE__ */ React.createElement("span", {

package/dist/esm/components/layout/grid/SceneGridRow.js.map

@@ -1 +1 @@
-{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  actions?: SceneObject;\n  children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, actions, children } = model.useState();\n  const layout = model.getGridLayout();\n  const layoutDragClass = layout.getDragClass();\n  const isDraggable = layout.isDraggable();\n\n  const count = children ? children.length : 0;\n  const panels = count === 1 ? 'panel' : 'panels';\n\n  return (\n    <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n      <div className={styles.rowTitleAndActionsGroup}>\n        <button\n          onClick={model.onCollapseToggle}\n          className={styles.rowTitleButton}\n          aria-label={isCollapsed ? 'Expand row' : 'Collapse row'}\n          data-testid={selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, undefined, 'text'))}\n        >\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle} role=\"heading\">\n            {sceneGraph.interpolate(model, title, undefined, 'text')}\n          </span>\n        </button>\n        <span className={cx(styles.panelCount, isCollapsed && styles.panelCountCollapsed)}>\n          ({count} {panels})\n        </span>\n        {actions && (\n          <div className={styles.rowActions}>\n            <actions.Component model={actions} />\n          </div>\n        )}\n      </div>\n      {isDraggable && isCollapsed && (\n        <div className={cx(styles.dragHandle, layoutDragClass)}>\n          <Icon name=\"draggabledots\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: theme.spacing(1),\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      gap: theme.spacing(1),\n    }),\n    rowCollapsed: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    collapsedInfo: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      flexGrow: 1,\n    }),\n    rowTitleAndActionsGroup: css({\n      display: 'flex',\n\n      '&:hover, &:focus-within': {\n        '& > div': {\n          opacity: 1,\n        },\n      },\n    }),\n    rowActions: css({\n      display: 'flex',\n      opacity: 0,\n      transition: '200ms opacity ease-in 200ms',\n\n      '&:hover, &:focus-within': {\n        opacity: 1,\n      },\n    }),\n    dragHandle: css({\n      display: 'flex',\n      padding: theme.spacing(0, 1),\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      cursor: 'move',\n      color: theme.colors.text.secondary,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n    panelCount: css({\n      paddingLeft: theme.spacing(2),\n      color: theme.colors.text.secondary,\n      fontStyle: 'italic',\n      fontSize: theme.typography.size.sm,\n      fontWeight: 'normal',\n      display: 'none',\n      lineHeight: '30px',\n    }),\n    panelCountCollapsed: css({\n      display: 'inline-block',\n    }),\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAuBO,MAAM,qBAAqB,eAAmC,CAAA;AAAA,EAG5D,YAAY,KAAmC,EAAA;AACpD,IAAM,KAAA,CAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACJ,QAAA,EAAU,KAAM,CAAA,QAAA,IAAY,EAAC;AAAA,MAC7B,aAAA,EAAe,MAAM,aAAiB,IAAA,IAAA;AAAA,MACtC,KAAA,EAAO,MAAM,KAAS,IAAA,EAAA;AAAA,KAAA,EACnB,KAJC,CAAA,EAAA;AAAA,MAKJ,CAAG,EAAA,CAAA;AAAA,MACH,MAAQ,EAAA,CAAA;AAAA,MACR,KAAO,EAAA,iBAAA;AAAA,KACR,CAAA,CAAA,CAAA;AAaH,IAAA,IAAA,CAAO,mBAAmB,MAAM;AAC9B,MAAI,IAAA,CAAC,IAAK,CAAA,KAAA,CAAM,aAAe,EAAA;AAC7B,QAAA,OAAA;AAAA,OACF;AAEA,MAAK,IAAA,CAAA,aAAA,EAAgB,CAAA,SAAA,CAAU,IAAI,CAAA,CAAA;AAAA,KACrC,CAAA;AAAA,GAlBA;AAAA,EAEO,aAAiC,GAAA;AACtC,IAAA,MAAM,SAAS,IAAK,CAAA,MAAA,CAAA;AAEpB,IAAA,IAAI,CAAC,MAAA,IAAU,EAAE,MAAA,YAAkB,eAAkB,CAAA,EAAA;AACnD,MAAM,MAAA,IAAI,MAAM,iDAAiD,CAAA,CAAA;AAAA,KACnE;AAEA,IAAO,OAAA,MAAA,CAAA;AAAA,GACT;AAAA,EAUO,WAAc,GAAA;AACnB,IAAA,OAAO,EAAE,IAAM,EAAA,IAAA,CAAK,KAAM,CAAA,WAAA,GAAc,MAAM,GAAI,EAAA,CAAA;AAAA,GACpD;AAAA,EAEO,cAAc,MAA8B,EAAA;AACjD,IAAI,IAAA,MAAA,CAAO,QAAQ,IAAM,EAAA;AACvB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAI,MAAO,CAAA,IAAA,KAAS,IAAK,CAAA,WAAA,GAAc,IAAM,EAAA;AAC3C,MAAA,IAAA,CAAK,gBAAiB,EAAA,CAAA;AAAA,KACxB;AAAA,GACF;AACF,CAAA;AA9Ca,YAAA,CACG,SAAY,GAAA,oBAAA,CAAA;AA+CZ,SAAA,oBAAA,CAAqB,EAAE,KAAA,EAA4C,EAAA;AACjF,EAAM,MAAA,MAAA,GAAS,WAAW,qBAAqB,CAAA,CAAA;AAC/C,EAAM,MAAA,EAAE,eAAe,WAAa,EAAA,KAAA,EAAO,SAAS,QAAS,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAChF,EAAM,MAAA,MAAA,GAAS,MAAM,aAAc,EAAA,CAAA;AACnC,EAAM,MAAA,eAAA,GAAkB,OAAO,YAAa,EAAA,CAAA;AAC5C,EAAM,MAAA,WAAA,GAAc,OAAO,WAAY,EAAA,CAAA;AAEvC,EAAM,MAAA,KAAA,GAAQ,QAAW,GAAA,QAAA,CAAS,MAAS,GAAA,CAAA,CAAA;AAC3C,EAAM,MAAA,MAAA,GAAS,KAAU,KAAA,CAAA,GAAI,OAAU,GAAA,QAAA,CAAA;AAEvC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,EAAG,CAAA,MAAA,CAAO,GAAK,EAAA,WAAA,IAAe,OAAO,YAAY,CAAA;AAAA,GAAA,kBAC9D,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,uBAAA;AAAA,GAAA,kBACpB,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IACC,SAAS,KAAM,CAAA,gBAAA;AAAA,IACf,WAAW,MAAO,CAAA,cAAA;AAAA,IAClB,YAAA,EAAY,cAAc,YAAe,GAAA,cAAA;AAAA,IACzC,aAAA,EAAa,SAAU,CAAA,UAAA,CAAW,YAAa,CAAA,KAAA,CAAM,UAAW,CAAA,WAAA,CAAY,KAAO,EAAA,KAAA,EAAO,KAAW,CAAA,EAAA,MAAM,CAAC,CAAA;AAAA,GAAA,EAE3G,iCAAkB,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAA,EAAM,cAAc,aAAgB,GAAA,YAAA;AAAA,GAAc,mBACzE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,QAAA;AAAA,IAAU,IAAK,EAAA,SAAA;AAAA,GACpC,EAAA,UAAA,CAAW,YAAY,KAAO,EAAA,KAAA,EAAO,QAAW,MAAM,CACzD,CACF,CAAA,kBACC,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAAK,WAAW,EAAG,CAAA,MAAA,CAAO,UAAY,EAAA,WAAA,IAAe,OAAO,mBAAmB,CAAA;AAAA,GAAA,EAAG,KAC/E,KAAM,EAAA,GAAA,EAAE,QAAO,GACnB,CAAA,EACC,2BACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,UAAA;AAAA,GACrB,kBAAA,KAAA,CAAA,aAAA,CAAC,QAAQ,SAAR,EAAA;AAAA,IAAkB,KAAO,EAAA,OAAA;AAAA,GAAS,CACrC,CAEJ,CACC,EAAA,WAAA,IAAe,+BACb,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,SAAW,EAAA,EAAA,CAAG,MAAO,CAAA,UAAA,EAAY,eAAe,CAAA;AAAA,GAAA,kBAClD,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAK,IAAK,EAAA,eAAA;AAAA,GAAgB,CAC7B,CAEJ,CAAA,CAAA;AAEJ,CAAA;AAEa,MAAA,qBAAA,GAAwB,CAAC,KAAyB,KAAA;AAC7D,EAAO,OAAA;AAAA,IACL,KAAK,GAAI,CAAA;AAAA,MACP,KAAO,EAAA,MAAA;AAAA,MACP,MAAQ,EAAA,MAAA;AAAA,MACR,OAAS,EAAA,MAAA;AAAA,MACT,cAAgB,EAAA,eAAA;AAAA,MAChB,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KACrB,CAAA;AAAA,IACD,gBAAgB,GAAI,CAAA;AAAA,MAClB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,MAAQ,EAAA,SAAA;AAAA,MACR,UAAY,EAAA,aAAA;AAAA,MACZ,MAAQ,EAAA,MAAA;AAAA,MACR,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,KACrB,CAAA;AAAA,IACD,cAAc,GAAI,CAAA;AAAA,MAChB,YAAc,EAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,MAAO,CAAA,IAAA,CAAA,CAAA;AAAA,KAChD,CAAA;AAAA,IACD,UAAU,GAAI,CAAA;AAAA,MACZ,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,EAAG,CAAA,QAAA;AAAA,MAC9B,UAAA,EAAY,MAAM,UAAW,CAAA,gBAAA;AAAA,KAC9B,CAAA;AAAA,IACD,eAAe,GAAI,CAAA;AAAA,MACjB,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,SAAU,CAAA,QAAA;AAAA,MACrC,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,QAAA;AAAA,MACZ,QAAU,EAAA,CAAA;AAAA,KACX,CAAA;AAAA,IACD,yBAAyB,GAAI,CAAA;AAAA,MAC3B,OAAS,EAAA,MAAA;AAAA,MAET,yBAA2B,EAAA;AAAA,QACzB,SAAW,EAAA;AAAA,UACT,OAAS,EAAA,CAAA;AAAA,SACX;AAAA,OACF;AAAA,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,OAAS,EAAA,MAAA;AAAA,MACT,OAAS,EAAA,CAAA;AAAA,MACT,UAAY,EAAA,6BAAA;AAAA,MAEZ,yBAA2B,EAAA;AAAA,QACzB,OAAS,EAAA,CAAA;AAAA,OACX;AAAA,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,OAAS,EAAA,MAAA;AAAA,MACT,OAAS,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,EAAG,CAAC,CAAA;AAAA,MAC3B,UAAY,EAAA,QAAA;AAAA,MACZ,cAAgB,EAAA,UAAA;AAAA,MAChB,MAAQ,EAAA,MAAA;AAAA,MACR,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,SAAW,EAAA;AAAA,QACT,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,OAAA;AAAA,OAC3B;AAAA,KACD,CAAA;AAAA,IACD,YAAY,GAAI,CAAA;AAAA,MACd,WAAA,EAAa,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MAC5B,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,MACzB,SAAW,EAAA,QAAA;AAAA,MACX,QAAA,EAAU,KAAM,CAAA,UAAA,CAAW,IAAK,CAAA,EAAA;AAAA,MAChC,UAAY,EAAA,QAAA;AAAA,MACZ,OAAS,EAAA,MAAA;AAAA,MACT,UAAY,EAAA,MAAA;AAAA,KACb,CAAA;AAAA,IACD,qBAAqB,GAAI,CAAA;AAAA,MACvB,OAAS,EAAA,cAAA;AAAA,KACV,CAAA;AAAA,GACH,CAAA;AACF;;;;"}
+{"version":3,"file":"SceneGridRow.js","sources":["../../../../../src/components/layout/grid/SceneGridRow.tsx"],"sourcesContent":["import { css, cx } from '@emotion/css';\nimport React from 'react';\n\nimport { GrafanaTheme2 } from '@grafana/data';\nimport { Icon, useStyles2 } from '@grafana/ui';\n\nimport { SceneObjectBase } from '../../../core/SceneObjectBase';\nimport { SceneComponentProps, SceneObject, SceneObjectUrlValues } from '../../../core/types';\n\nimport { SceneGridLayout } from './SceneGridLayout';\nimport { GRID_COLUMN_COUNT } from './constants';\nimport { SceneGridItemLike, SceneGridItemStateLike } from './types';\nimport { sceneGraph } from '../../../core/sceneGraph';\n\nexport interface SceneGridRowState extends SceneGridItemStateLike {\n  title: string;\n  isCollapsible?: boolean;\n  isCollapsed?: boolean;\n  actions?: SceneObject;\n  children: SceneGridItemLike[];\n}\n\nexport class SceneGridRow extends SceneObjectBase<SceneGridRowState> {\n  public static Component = SceneGridRowRenderer;\n\n  public constructor(state: Partial<SceneGridRowState>) {\n    super({\n      children: state.children || [],\n      isCollapsible: state.isCollapsible || true,\n      title: state.title || '',\n      ...state,\n      x: 0,\n      height: 1,\n      width: GRID_COLUMN_COUNT,\n    });\n  }\n\n  public getGridLayout(): SceneGridLayout {\n    const layout = this.parent;\n\n    if (!layout || !(layout instanceof SceneGridLayout)) {\n      throw new Error('SceneGridRow must be a child of SceneGridLayout');\n    }\n\n    return layout;\n  }\n\n  public onCollapseToggle = () => {\n    if (!this.state.isCollapsible) {\n      return;\n    }\n\n    this.getGridLayout().toggleRow(this);\n  };\n\n  public getUrlState() {\n    return { rowc: this.state.isCollapsed ? '1' : '0' };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues) {\n    if (values.rowc == null) {\n      return;\n    }\n\n    if (values.rowc !== this.getUrlState().rowc) {\n      this.onCollapseToggle();\n    }\n  }\n}\n\nexport function SceneGridRowRenderer({ model }: SceneComponentProps<SceneGridRow>) {\n  const styles = useStyles2(getSceneGridRowStyles);\n  const { isCollapsible, isCollapsed, title, actions, children } = model.useState();\n  const layout = model.getGridLayout();\n  const layoutDragClass = layout.getDragClass();\n  const isDraggable = layout.isDraggable();\n\n  const count = children ? children.length : 0;\n  const panels = count === 1 ? 'panel' : 'panels';\n\n  return (\n    <div className={cx(styles.row, isCollapsed && styles.rowCollapsed)}>\n      <div className={styles.rowTitleAndActionsGroup}>\n        <button\n          onClick={model.onCollapseToggle}\n          className={styles.rowTitleButton}\n          aria-label={isCollapsed ? 'Expand row' : 'Collapse row'}\n        >\n          {isCollapsible && <Icon name={isCollapsed ? 'angle-right' : 'angle-down'} />}\n          <span className={styles.rowTitle} role=\"heading\">\n            {sceneGraph.interpolate(model, title, undefined, 'text')}\n          </span>\n        </button>\n        <span className={cx(styles.panelCount, isCollapsed && styles.panelCountCollapsed)}>\n          ({count} {panels})\n        </span>\n        {actions && \n          <div className={styles.rowActions}>\n            <actions.Component model={actions} />\n          </div>\n        }\n      </div>\n      {isDraggable && isCollapsed && (\n        <div className={cx(styles.dragHandle, layoutDragClass)}>\n          <Icon name=\"draggabledots\" />\n        </div>\n      )}\n    </div>\n  );\n}\n\nexport const getSceneGridRowStyles = (theme: GrafanaTheme2) => {\n  return {\n    row: css({\n      width: '100%',\n      height: '30px',\n      display: 'flex',\n      justifyContent: 'space-between',\n      gap: theme.spacing(1),\n    }),\n    rowTitleButton: css({\n      display: 'flex',\n      alignItems: 'center',\n      cursor: 'pointer',\n      background: 'transparent',\n      border: 'none',\n      gap: theme.spacing(1),\n    }),\n    rowCollapsed: css({\n      borderBottom: `1px solid ${theme.colors.border.weak}`,\n    }),\n    rowTitle: css({\n      fontSize: theme.typography.h5.fontSize,\n      fontWeight: theme.typography.fontWeightMedium,\n    }),\n    collapsedInfo: css({\n      fontSize: theme.typography.bodySmall.fontSize,\n      color: theme.colors.text.secondary,\n      display: 'flex',\n      alignItems: 'center',\n      flexGrow: 1,\n    }),\n    rowTitleAndActionsGroup: css({\n      display: 'flex',\n\n      '&:hover, &:focus-within': {\n        '& > div': {\n          opacity: 1,\n        }\n      },\n    }),\n    rowActions: css({\n      display: 'flex',\n      opacity: 0,\n      transition: '200ms opacity ease-in 200ms',\n\n      '&:hover, &:focus-within': {\n        opacity: 1,\n      },\n    }),\n    dragHandle: css({\n      display: 'flex',\n      padding: theme.spacing(0, 1),\n      alignItems: 'center',\n      justifyContent: 'flex-end',\n      cursor: 'move',\n      color: theme.colors.text.secondary,\n      '&:hover': {\n        color: theme.colors.text.primary,\n      },\n    }),\n    panelCount: css({\n      paddingLeft: theme.spacing(2),\n      color: theme.colors.text.secondary,\n      fontStyle: 'italic',\n      fontSize: theme.typography.size.sm,\n      fontWeight: 'normal',\n      display: 'none',\n      lineHeight: '30px',\n    }),\n    panelCountCollapsed: css({\n      display: 'inline-block',\n    }),\n  };\n};\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/adhoc/AdHocFilterRenderer.js

@@ -1,6 +1,4 @@
-import React, { useState, useMemo } from 'react';
-import { toSelectableValue } from './AdHocFiltersVariable.js';
-import { toOption } from '@grafana/data';
+import React, { useState } from 'react';
 import { useStyles2, Select, Field, Button } from '@grafana/ui';
 import { css } from '@emotion/css';
 import { ControlsLabel } from '../../utils/ControlsLabel.js';
@@ -24,24 +22,18 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+function keyLabelToOption(key, label) {
+  return key !== "" ? {
+    value: key,
+    label: label || key
+  } : null;
+}
 function AdHocFilterRenderer({ filter, model }) {
   var _a, _b;
   const styles = useStyles2(getStyles);
   const [state, setState] = useState({});
-  const keyValue = useMemo(() => {
-    if (filter.key !== "") {
-      if (model.state.defaultKeys) {
-        const matchingDefaultKey = model.state.defaultKeys.find((option) => option.value === filter.key);
-        if (matchingDefaultKey) {
-          return toSelectableValue(matchingDefaultKey);
-        }
-      } else {
-        return toOption(filter.key);
-      }
-    }
-    return null;
-  }, [filter.key, model.state.defaultKeys]);
-  const valueValue = filter.value !== "" ? toOption(filter.value) : null;
+  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);
+  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);
   const valueSelect = /* @__PURE__ */ React.createElement(Select, {
     allowCustomValue: true,
     formatCreateLabel: (inputValue) => `Use custom value: ${inputValue}`,
@@ -51,7 +43,7 @@ function AdHocFilterRenderer({ filter, model }) {
     value: valueValue,
     placeholder: "Select value",
     options: state.values,
-    onChange: (v) => model._updateFilter(filter, "value", v.value),
+    onChange: (v) => model._updateFilter(filter, "value", v),
     isOpen: state.isValuesOpen,
     isLoading: state.isValuesLoading,
     autoFocus: filter.key !== "" && filter.value === "",
@@ -73,7 +65,7 @@ function AdHocFilterRenderer({ filter, model }) {
     value: keyValue,
     placeholder: "Select label",
     options: state.keys,
-    onChange: (v) => model._updateFilter(filter, "key", v.value),
+    onChange: (v) => model._updateFilter(filter, "key", v),
     autoFocus: filter.key === "",
     isOpen: state.isKeysOpen,
     isLoading: state.isKeysLoading,
@@ -120,7 +112,7 @@ function AdHocFilterRenderer({ filter, model }) {
     disabled: model.state.readOnly,
     options: model._getOperators(),
     width: "auto",
-    onChange: (v) => model._updateFilter(filter, "operator", v.value)
+    onChange: (v) => model._updateFilter(filter, "operator", v)
   }), valueSelect, /* @__PURE__ */ React.createElement(Button, {
     variant: "secondary",
     "aria-label": "Remove filter",

package/dist/esm/variables/adhoc/AdHocFilterRenderer.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useMemo, useState } from 'react';\n\nimport { AdHocFiltersVariable, toSelectableValue } from './AdHocFiltersVariable';\nimport { AdHocVariableFilter, GrafanaTheme2, SelectableValue, toOption } from '@grafana/data';\nimport { Button, Field, Select, useStyles2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\n\ninterface Props {\n  filter: AdHocVariableFilter;\n  model: AdHocFiltersVariable;\n}\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n\n  const [state, setState] = useState<{\n    keys?: SelectableValue[];\n    values?: SelectableValue[];\n    isKeysLoading?: boolean;\n    isValuesLoading?: boolean;\n    isKeysOpen?: boolean;\n    isValuesOpen?: boolean;\n  }>({});\n\n  const keyValue = useMemo(() => {\n    if (filter.key !== '') {\n      if (model.state.defaultKeys) {\n        const matchingDefaultKey = model.state.defaultKeys.find(option => option.value === filter.key);\n        if (matchingDefaultKey) {\n          return toSelectableValue(matchingDefaultKey);\n        }\n      } else {\n        return toOption(filter.key);\n      }\n    }\n    return null;\n  }, [filter.key, model.state.defaultKeys])\n  const valueValue = filter.value !== '' ? toOption(filter.value) : null;\n\n  const valueSelect = (\n    <Select\n      allowCustomValue\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={valueValue}\n      placeholder={'Select value'}\n      options={state.values}\n      onChange={(v) => model._updateFilter(filter, 'value', v.value)}\n      isOpen={state.isValuesOpen}\n      isLoading={state.isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setState({ ...state, isValuesLoading: true });\n        const values = await model._getValuesFor(filter);\n        setState({ ...state, isValuesLoading: false, isValuesOpen: true, values });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isValuesOpen: false });\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${state.isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={state.keys}\n      onChange={(v) => model._updateFilter(filter, 'key', v.value)}\n      autoFocus={filter.key === ''}\n      isOpen={state.isKeysOpen}\n      isLoading={state.isKeysLoading}\n      onOpenMenu={async () => {\n        setState({ ...state, isKeysLoading: true });\n        const keys = await model._getKeys(filter.key);\n        setState({ ...state, isKeysLoading: false, isKeysOpen: true, keys });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isKeysOpen: false });\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {valueSelect}\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v.value)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAaO,SAAS,mBAAoB,CAAA,EAAE,MAAQ,EAAA,KAAA,EAAgB,EAAA;AAb9D,EAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AAcE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAMnC,EAAA,MAAM,CAAC,KAAO,EAAA,QAAQ,CAAI,GAAA,QAAA,CAOvB,EAAE,CAAA,CAAA;AAEL,EAAM,MAAA,QAAA,GAAW,QAAQ,MAAM;AAC7B,IAAI,IAAA,MAAA,CAAO,QAAQ,EAAI,EAAA;AACrB,MAAI,IAAA,KAAA,CAAM,MAAM,WAAa,EAAA;AAC3B,QAAM,MAAA,kBAAA,GAAqB,MAAM,KAAM,CAAA,WAAA,CAAY,KAAK,CAAU,MAAA,KAAA,MAAA,CAAO,KAAU,KAAA,MAAA,CAAO,GAAG,CAAA,CAAA;AAC7F,QAAA,IAAI,kBAAoB,EAAA;AACtB,UAAA,OAAO,kBAAkB,kBAAkB,CAAA,CAAA;AAAA,SAC7C;AAAA,OACK,MAAA;AACL,QAAO,OAAA,QAAA,CAAS,OAAO,GAAG,CAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AACA,IAAO,OAAA,IAAA,CAAA;AAAA,KACN,CAAC,MAAA,CAAO,KAAK,KAAM,CAAA,KAAA,CAAM,WAAW,CAAC,CAAA,CAAA;AACxC,EAAA,MAAM,aAAa,MAAO,CAAA,KAAA,KAAU,KAAK,QAAS,CAAA,MAAA,CAAO,KAAK,CAAI,GAAA,IAAA,CAAA;AAElE,EAAA,MAAM,8BACH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,gBAAgB,EAAA,IAAA;AAAA,IAChB,iBAAA,EAAmB,CAAC,UAAA,KAAe,CAAqB,kBAAA,EAAA,UAAA,CAAA,CAAA;AAAA,IACxD,QAAA,EAAU,MAAM,KAAM,CAAA,QAAA;AAAA,IACtB,SAAW,EAAA,KAAA,CAAM,UAAa,GAAA,MAAA,CAAO,aAAgB,GAAA,KAAA,CAAA;AAAA,IACrD,KAAM,EAAA,MAAA;AAAA,IACN,KAAO,EAAA,UAAA;AAAA,IACP,WAAa,EAAA,cAAA;AAAA,IACb,SAAS,KAAM,CAAA,MAAA;AAAA,IACf,QAAA,EAAU,CAAC,CAAM,KAAA,KAAA,CAAM,cAAc,MAAQ,EAAA,OAAA,EAAS,EAAE,KAAK,CAAA;AAAA,IAC7D,QAAQ,KAAM,CAAA,YAAA;AAAA,IACd,WAAW,KAAM,CAAA,eAAA;AAAA,IACjB,SAAW,EAAA,MAAA,CAAO,GAAQ,KAAA,EAAA,IAAM,OAAO,KAAU,KAAA,EAAA;AAAA,IACjD,eAAiB,EAAA,IAAA;AAAA,IACjB,YAAY,YAAY;AACtB,MAAA,QAAA,CAAS,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,eAAA,EAAiB,MAAM,CAAA,CAAA,CAAA;AAC5C,MAAA,MAAM,MAAS,GAAA,MAAM,KAAM,CAAA,aAAA,CAAc,MAAM,CAAA,CAAA;AAC/C,MAAS,QAAA,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,QAAL,EAAY,eAAA,EAAiB,OAAO,YAAc,EAAA,IAAA,EAAM,QAAQ,CAAA,CAAA,CAAA;AAAA,KAC3E;AAAA,IACA,aAAa,MAAM;AACjB,MAAA,QAAA,CAAS,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,YAAA,EAAc,OAAO,CAAA,CAAA,CAAA;AAAA,KAC5C;AAAA,GACF,CAAA,CAAA;AAGF,EAAA,MAAM,4BACH,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IAGC,GAAK,EAAA,CAAA,EAAG,KAAM,CAAA,eAAA,GAAkB,SAAY,GAAA,QAAA,CAAA,CAAA;AAAA,IAC5C,QAAA,EAAU,MAAM,KAAM,CAAA,QAAA;AAAA,IACtB,SAAW,EAAA,KAAA,CAAM,UAAa,GAAA,MAAA,CAAO,aAAgB,GAAA,KAAA,CAAA;AAAA,IACrD,KAAM,EAAA,MAAA;AAAA,IACN,KAAO,EAAA,QAAA;AAAA,IACP,WAAa,EAAA,cAAA;AAAA,IACb,SAAS,KAAM,CAAA,IAAA;AAAA,IACf,QAAA,EAAU,CAAC,CAAM,KAAA,KAAA,CAAM,cAAc,MAAQ,EAAA,KAAA,EAAO,EAAE,KAAK,CAAA;AAAA,IAC3D,SAAA,EAAW,OAAO,GAAQ,KAAA,EAAA;AAAA,IAC1B,QAAQ,KAAM,CAAA,UAAA;AAAA,IACd,WAAW,KAAM,CAAA,aAAA;AAAA,IACjB,YAAY,YAAY;AACtB,MAAA,QAAA,CAAS,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,aAAA,EAAe,MAAM,CAAA,CAAA,CAAA;AAC1C,MAAA,MAAM,IAAO,GAAA,MAAM,KAAM,CAAA,QAAA,CAAS,OAAO,GAAG,CAAA,CAAA;AAC5C,MAAS,QAAA,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,QAAL,EAAY,aAAA,EAAe,OAAO,UAAY,EAAA,IAAA,EAAM,MAAM,CAAA,CAAA,CAAA;AAAA,KACrE;AAAA,IACA,aAAa,MAAM;AACjB,MAAA,QAAA,CAAS,aAAK,CAAA,cAAA,CAAA,EAAA,EAAA,KAAA,CAAA,EAAL,EAAY,UAAA,EAAY,OAAO,CAAA,CAAA,CAAA;AAAA,KAC1C;AAAA,IACA,QAAQ,MAAM;AACZ,MAAI,IAAA,MAAA,CAAO,QAAQ,EAAI,EAAA;AACrB,QAAA,KAAA,CAAM,cAAc,MAAM,CAAA,CAAA;AAAA,OAC5B;AAAA,KACF;AAAA,IACA,eAAiB,EAAA,IAAA;AAAA,GACnB,CAAA,CAAA;AAGF,EAAI,IAAA,KAAA,CAAM,KAAM,CAAA,MAAA,KAAW,UAAY,EAAA;AACrC,IAAA,IAAI,OAAO,GAAK,EAAA;AACd,MAAA,MAAM,wBACH,KAAA,CAAA,aAAA,CAAA,aAAA,EAAA;AAAA,QAAc,MAAO,EAAA,UAAA;AAAA,QAAW,KAAA,EAAA,CAAO,EAAO,GAAA,MAAA,CAAA,GAAA,KAAP,IAAc,GAAA,EAAA,GAAA,EAAA;AAAA,QAAI,QAAU,EAAA,MAAM,KAAM,CAAA,aAAA,CAAc,MAAM,CAAA;AAAA,OAAG,CAAA,CAAA;AAGzG,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,QAAM,KAAA;AAAA,QAAc,aAAA,EAAa,eAAe,MAAO,CAAA,GAAA,CAAA,CAAA;AAAA,QAAO,WAAW,MAAO,CAAA,KAAA;AAAA,OAAA,EAC9E,WACH,CAAA,CAAA;AAAA,KAEG,MAAA;AACL,MAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,QAAM,KAAO,EAAA,cAAA;AAAA,QAAgB,aAAA,EAAa,eAAe,MAAO,CAAA,GAAA,CAAA,CAAA;AAAA,QAAO,WAAW,MAAO,CAAA,KAAA;AAAA,OAAA,EACvF,SACH,CAAA,CAAA;AAAA,KAEJ;AAAA,GACF;AAEA,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,OAAA;AAAA,IAAS,aAAA,EAAa,eAAe,MAAO,CAAA,GAAA,CAAA,CAAA;AAAA,GAAA,EAChE,2BACA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAO,MAAO,CAAA,QAAA;AAAA,IACd,QAAA,EAAU,MAAM,KAAM,CAAA,QAAA;AAAA,IACtB,OAAA,EAAS,MAAM,aAAc,EAAA;AAAA,IAC7B,KAAM,EAAA,MAAA;AAAA,IACN,QAAA,EAAU,CAAC,CAAM,KAAA,KAAA,CAAM,cAAc,MAAQ,EAAA,UAAA,EAAY,EAAE,KAAK,CAAA;AAAA,GAClE,CAAA,EACC,6BACA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,OAAQ,EAAA,WAAA;AAAA,IACR,YAAW,EAAA,eAAA;AAAA,IACX,KAAM,EAAA,eAAA;AAAA,IACN,WAAW,MAAO,CAAA,YAAA;AAAA,IAClB,IAAK,EAAA,OAAA;AAAA,IACL,aAAa,EAAA,CAAA,mBAAA,EAAA,CAAsB,EAAO,GAAA,MAAA,CAAA,GAAA,KAAP,IAAc,GAAA,EAAA,GAAA,EAAA,CAAA,CAAA;AAAA,IACjD,OAAS,EAAA,MAAM,KAAM,CAAA,aAAA,CAAc,MAAM,CAAA;AAAA,GAC3C,CACF,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,OAAO,GAAI,CAAA;AAAA,IACT,YAAc,EAAA,CAAA;AAAA,GACf,CAAA;AAAA,EACD,SAAS,GAAI,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,KAAO,EAAA;AAAA,MACL,qBAAuB,EAAA;AAAA,QAErB,UAAY,EAAA,CAAA,CAAA;AAAA,OACd;AAAA,MAEA,eAAiB,EAAA;AAAA,QACf,oBAAsB,EAAA,CAAA;AAAA,QACtB,uBAAyB,EAAA,CAAA;AAAA,OAC3B;AAAA,MAEA,cAAgB,EAAA;AAAA,QACd,mBAAqB,EAAA,CAAA;AAAA,QACrB,sBAAwB,EAAA,CAAA;AAAA,OAC1B;AAAA,MAEA,sCAAwC,EAAA;AAAA,QACtC,YAAc,EAAA,CAAA;AAAA,OAChB;AAAA,MAGA,QAAU,EAAA,UAAA;AAAA,MACV,MAAQ,EAAA,CAAA;AAAA,MAIR,SAAW,EAAA;AAAA,QACT,MAAQ,EAAA,CAAA;AAAA,OACV;AAAA,MAEA,gBAAkB,EAAA;AAAA,QAChB,MAAQ,EAAA,CAAA;AAAA,OACV;AAAA,KACF;AAAA,GACD,CAAA;AAAA,EACD,eAAe,GAAI,CAAA;AAAA,IACjB,QAAA,EAAU,KAAM,CAAA,OAAA,CAAQ,EAAE,CAAA;AAAA,GAC3B,CAAA;AAAA,EACD,cAAc,GAAI,CAAA;AAAA,IAChB,WAAa,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,GAAI,CAAC,CAAA;AAAA,IAChC,YAAc,EAAA,KAAA,CAAM,OAAQ,CAAA,CAAA,GAAI,CAAC,CAAA;AAAA,IACjC,UAAY,EAAA,MAAA;AAAA,IAEZ,QAAU,EAAA,UAAA;AAAA,IACV,IAAM,EAAA,KAAA;AAAA,GACP,CAAA;AACH,CAAA,CAAA;;;;"}
+{"version":3,"file":"AdHocFilterRenderer.js","sources":["../../../../src/variables/adhoc/AdHocFilterRenderer.tsx"],"sourcesContent":["import React, { useState } from 'react';\n\nimport { AdHocFiltersVariable, AdHocFilterWithLabels } from './AdHocFiltersVariable';\nimport { GrafanaTheme2, SelectableValue } from '@grafana/data';\nimport { Button, Field, Select, useStyles2 } from '@grafana/ui';\nimport { css } from '@emotion/css';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\n\ninterface Props {\n  filter: AdHocFilterWithLabels;\n  model: AdHocFiltersVariable;\n}\n\nfunction keyLabelToOption(key: string, label?: string): SelectableValue | null {\n  return key !== ''\n    ? {\n        value: key,\n        label: label || key,\n      }\n    : null;\n}\n\nexport function AdHocFilterRenderer({ filter, model }: Props) {\n  const styles = useStyles2(getStyles);\n\n  // there's a bug in react-select where the menu doesn't recalculate its position when the options are loaded asynchronously\n  // see https://github.com/grafana/grafana/issues/63558\n  // instead, we explicitly control the menu visibility and prevent showing it until the options have fully loaded\n\n  const [state, setState] = useState<{\n    keys?: SelectableValue[];\n    values?: SelectableValue[];\n    isKeysLoading?: boolean;\n    isValuesLoading?: boolean;\n    isKeysOpen?: boolean;\n    isValuesOpen?: boolean;\n  }>({});\n\n  const keyValue = keyLabelToOption(filter.key, filter.keyLabel);\n  const valueValue = keyLabelToOption(filter.value, filter.valueLabel);\n\n  const valueSelect = (\n    <Select\n      allowCustomValue\n      formatCreateLabel={(inputValue) => `Use custom value: ${inputValue}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={valueValue}\n      placeholder={'Select value'}\n      options={state.values}\n      onChange={(v) => model._updateFilter(filter, 'value', v)}\n      isOpen={state.isValuesOpen}\n      isLoading={state.isValuesLoading}\n      autoFocus={filter.key !== '' && filter.value === ''}\n      openMenuOnFocus={true}\n      onOpenMenu={async () => {\n        setState({ ...state, isValuesLoading: true });\n        const values = await model._getValuesFor(filter);\n        setState({ ...state, isValuesLoading: false, isValuesOpen: true, values });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isValuesOpen: false });\n      }}\n    />\n  );\n\n  const keySelect = (\n    <Select\n      // By changing the key, we reset the Select component,\n      // to ensure that the loaded values are shown after they are loaded\n      key={`${state.isValuesLoading ? 'loading' : 'loaded'}`}\n      disabled={model.state.readOnly}\n      className={state.isKeysOpen ? styles.widthWhenOpen : undefined}\n      width=\"auto\"\n      value={keyValue}\n      placeholder={'Select label'}\n      options={state.keys}\n      onChange={(v) => model._updateFilter(filter, 'key', v)}\n      autoFocus={filter.key === ''}\n      isOpen={state.isKeysOpen}\n      isLoading={state.isKeysLoading}\n      onOpenMenu={async () => {\n        setState({ ...state, isKeysLoading: true });\n        const keys = await model._getKeys(filter.key);\n        setState({ ...state, isKeysLoading: false, isKeysOpen: true, keys });\n      }}\n      onCloseMenu={() => {\n        setState({ ...state, isKeysOpen: false });\n      }}\n      onBlur={() => {\n        if (filter.key === '') {\n          model._removeFilter(filter);\n        }\n      }}\n      openMenuOnFocus={true}\n    />\n  );\n\n  if (model.state.layout === 'vertical') {\n    if (filter.key) {\n      const label = (\n        <ControlsLabel layout=\"vertical\" label={filter.key ?? ''} onRemove={() => model._removeFilter(filter)} />\n      );\n\n      return (\n        <Field label={label} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {valueSelect}\n        </Field>\n      );\n    } else {\n      return (\n        <Field label={'Select label'} data-testid={`AdHocFilter-${filter.key}`} className={styles.field}>\n          {keySelect}\n        </Field>\n      );\n    }\n  }\n\n  return (\n    <div className={styles.wrapper} data-testid={`AdHocFilter-${filter.key}`}>\n      {keySelect}\n      <Select\n        value={filter.operator}\n        disabled={model.state.readOnly}\n        options={model._getOperators()}\n        width=\"auto\"\n        onChange={(v) => model._updateFilter(filter, 'operator', v)}\n      />\n      {valueSelect}\n      <Button\n        variant=\"secondary\"\n        aria-label=\"Remove filter\"\n        title=\"Remove filter\"\n        className={styles.removeButton}\n        icon=\"times\"\n        data-testid={`AdHocFilter-remove-${filter.key ?? ''}`}\n        onClick={() => model._removeFilter(filter)}\n      />\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  field: css({\n    marginBottom: 0,\n  }),\n  wrapper: css({\n    display: 'flex',\n    '> *': {\n      '&:not(:first-child)': {\n        // Negative margin hides the double-border on adjacent selects\n        marginLeft: -1,\n      },\n\n      '&:first-child': {\n        borderTopRightRadius: 0,\n        borderBottomRightRadius: 0,\n      },\n\n      '&:last-child': {\n        borderTopLeftRadius: 0,\n        borderBottomLeftRadius: 0,\n      },\n\n      '&:not(:first-child):not(:last-child)': {\n        borderRadius: 0,\n      },\n\n      // Fix focus state zIndex issues\n      position: 'relative',\n      zIndex: 0,\n\n      // Adjacent borders are overlapping, so raise children up when hovering etc\n      // so all that child's borders are visible.\n      '&:hover': {\n        zIndex: 1,\n      },\n\n      '&:focus-within': {\n        zIndex: 2,\n      },\n    },\n  }),\n  widthWhenOpen: css({\n    minWidth: theme.spacing(16),\n  }),\n  removeButton: css({\n    paddingLeft: theme.spacing(3 / 2),\n    paddingRight: theme.spacing(3 / 2),\n    borderLeft: 'none',\n    // To not have button background and last select border intersect\n    position: 'relative',\n    left: '1px',\n  }),\n});\n"],"names":[],"mappings":"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"}

package/dist/esm/variables/adhoc/AdHocFiltersVariable.js

@@ -62,22 +62,23 @@ class AdHocFiltersVariable extends SceneObjectBase {
   getValue() {
     return this.state.filterExpression;
   }
-  _updateFilter(filter, prop, value) {
+  _updateFilter(filter, prop, { value, label }) {
     if (value == null) {
       return;
     }
     const { filters, _wip } = this.state;
+    const propLabelKey = `${prop}Label`;
     if (filter === _wip) {
       if (prop === "value") {
-        this.setState({ filters: [...filters, __spreadProps(__spreadValues({}, _wip), { [prop]: value })], _wip: void 0 });
+        this.setState({ filters: [...filters, __spreadProps(__spreadValues({}, _wip), { [prop]: value, [propLabelKey]: label })], _wip: void 0 });
       } else {
-        this.setState({ _wip: __spreadProps(__spreadValues({}, filter), { [prop]: value }) });
+        this.setState({ _wip: __spreadProps(__spreadValues({}, filter), { [prop]: value, [propLabelKey]: label }) });
       }
       return;
     }
     const updatedFilters = this.state.filters.map((f) => {
       if (f === filter) {
-        return __spreadProps(__spreadValues({}, f), { [prop]: value });
+        return __spreadProps(__spreadValues({}, f), { [prop]: value, [propLabelKey]: label });
       }
       return f;
     });
@@ -136,7 +137,9 @@ class AdHocFiltersVariable extends SceneObjectBase {
     return values.map(toSelectableValue);
   }
   _addWip() {
-    this.setState({ _wip: { key: "", value: "", operator: "=", condition: "" } });
+    this.setState({
+      _wip: { key: "", keyLabel: "", value: "", valueLabel: "", operator: "=", condition: "" }
+    });
   }
   _getOperators() {
     return ["=", "!=", "<", ">", "=~", "!~"].map((value) => ({

package/dist/esm/variables/adhoc/AdHocFiltersVariable.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFiltersVariable.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { AdHocVariableFilter, GrafanaTheme2, MetricFindValue, SelectableValue } from '@grafana/data';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneVariable, SceneVariableState, SceneVariableValueChangedEvent, VariableValue } from '../types';\nimport { ControlsLayout, SceneComponentProps } from '../../core/types';\nimport { DataSourceRef } from '@grafana/schema';\nimport { getQueriesForVariables, renderPrometheusLabelFilters } from '../utils';\nimport { patchGetAdhocFilters } from './patchGetAdhocFilters';\nimport { useStyles2 } from '@grafana/ui';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { AdHocFilterBuilder } from './AdHocFilterBuilder';\nimport { AdHocFilterRenderer } from './AdHocFilterRenderer';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { AdHocFiltersVariableUrlSyncHandler } from './AdHocFiltersVariableUrlSyncHandler';\nimport { css } from '@emotion/css';\n\nexport interface AdHocFiltersVariableState extends SceneVariableState {\n  /** Optional text to display on the 'add filter' button */\n  addFilterButtonText?: string;\n  /** The visible filters */\n  filters: AdHocVariableFilter[];\n  /** Base filters to always apply when looking up keys*/\n  baseFilters?: AdHocVariableFilter[];\n  /** Datasource to use for getTagKeys and getTagValues and also controls which scene queries the filters should apply to */\n  datasource: DataSourceRef | null;\n  /** Controls if the filters can be changed */\n  readOnly?: boolean;\n  /**\n   * @experimental\n   * Controls the layout and design of the label.\n   * Vertical layout does not yet support operator selector.\n   */\n  layout?: ControlsLayout;\n  /**\n   * Defaults to automatic which means filters will automatically be applied to all queries with the same data source as this AdHocFilterSet.\n   * In manual mode you either have to use the filters programmatically or as a variable inside query expressions.\n   */\n  applyMode: 'auto' | 'manual';\n  /**\n   * Filter out the keys that do not match the regex.\n   */\n  tagKeyRegexFilter?: RegExp;\n  /**\n   * Extension hook for customizing the key lookup.\n   * Return replace: true if you want to override the default lookup\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagKeysProvider?: getTagKeysProvider;\n  /**\n   * Extension hook for customizing the value lookup.\n   * Return replace: true if you want to override the default lookup.\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagValuesProvider?: getTagValuesProvider;\n\n  /**\n   * Optionally provide an array of static keys that override getTagKeys\n   */\n  defaultKeys?: MetricFindValue[];\n\n  /**\n   * This is the expression that the filters resulted in. Defaults to\n   * Prometheus / Loki compatible label filter expression\n   */\n  filterExpression?: string;\n\n  /**\n   * The default builder creates a Prometheus/Loki compatible filter expression,\n   * this can be overridden to create a different expression based on the current filters.\n   */\n  expressionBuilder?: AdHocVariableExpressionBuilderFn;\n\n  /**\n   * @internal state of the new filter being added\n   */\n  _wip?: AdHocVariableFilter;\n}\n\nexport type AdHocVariableExpressionBuilderFn = (filters: AdHocVariableFilter[]) => string;\n\nexport type getTagKeysProvider = (\n  variable: AdHocFiltersVariable,\n  currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport type getTagValuesProvider = (\n  variable: AdHocFiltersVariable,\n  filter: AdHocVariableFilter\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport type AdHocFiltersVariableCreateHelperArgs = AdHocFiltersVariableState;\n\nexport class AdHocFiltersVariable\n  extends SceneObjectBase<AdHocFiltersVariableState>\n  implements SceneVariable<AdHocFiltersVariableState>\n{\n  static Component = AdHocFiltersVariableRenderer;\n\n  private _scopedVars = { __sceneObject: { value: this } };\n  private _dataSourceSrv = getDataSourceSrv();\n\n  protected _urlSync = new AdHocFiltersVariableUrlSyncHandler(this);\n\n  public constructor(state: Partial<AdHocFiltersVariableState>) {\n    super({\n      type: 'adhoc',\n      name: state.name ?? 'Filters',\n      filters: [],\n      datasource: null,\n      applyMode: 'auto',\n      filterExpression: state.filterExpression ?? renderExpression(state.expressionBuilder, state.filters),\n      ...state,\n    });\n\n    if (this.state.applyMode === 'auto') {\n      patchGetAdhocFilters(this);\n    }\n  }\n\n  public setState(update: Partial<AdHocFiltersVariableState>): void {\n    let filterExpressionChanged = false;\n\n    if (update.filters && update.filters !== this.state.filters && !update.filterExpression) {\n      update.filterExpression = renderExpression(this.state.expressionBuilder, update.filters);\n      filterExpressionChanged = update.filterExpression !== this.state.filterExpression;\n    }\n\n    super.setState(update);\n\n    if (filterExpressionChanged) {\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n  }\n\n  public getValue(): VariableValue | undefined {\n    return this.state.filterExpression;\n  }\n\n  public _updateFilter(filter: AdHocVariableFilter, prop: keyof AdHocVariableFilter, value: string | undefined | null) {\n    if (value == null) {\n      return;\n    }\n\n    const { filters, _wip } = this.state;\n\n    if (filter === _wip) {\n      // If we set value we are done with this \"work in progress\" filter and we can add it\n      if (prop === 'value') {\n        this.setState({ filters: [...filters, { ..._wip, [prop]: value }], _wip: undefined });\n      } else {\n        this.setState({ _wip: { ...filter, [prop]: value } });\n      }\n      return;\n    }\n\n    const updatedFilters = this.state.filters.map((f) => {\n      if (f === filter) {\n        return { ...f, [prop]: value };\n      }\n      return f;\n    });\n\n    this.setState({ filters: updatedFilters });\n  }\n\n  public _removeFilter(filter: AdHocVariableFilter) {\n    if (filter === this.state._wip) {\n      this.setState({ _wip: undefined });\n      return;\n    }\n\n    this.setState({ filters: this.state.filters.filter((f) => f !== filter) });\n  }\n\n  /**\n   * Get possible keys given current filters. Do not call from plugins directly\n   */\n  public async _getKeys(currentKey: string | null): Promise<Array<SelectableValue<string>>> {\n    const override = await this.state.getTagKeysProvider?.(this, currentKey);\n\n    if (override && override.replace) {\n      return override.values.map(toSelectableValue);\n    }\n\n    if (this.state.defaultKeys) {\n      return this.state.defaultKeys.map(toSelectableValue);\n    }\n\n    const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);\n    if (!ds || !ds.getTagKeys) {\n      return [];\n    }\n\n    const otherFilters = this.state.filters.filter((f) => f.key !== currentKey).concat(this.state.baseFilters ?? []);\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    const queries = getQueriesForVariables(this);\n    // @ts-expect-error TODO: remove this once 10.4.0 is released\n    let keys = await ds.getTagKeys({ filters: otherFilters, queries, timeRange });\n\n    if (override) {\n      keys = keys.concat(override.values);\n    }\n\n    const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n    if (tagKeyRegexFilter) {\n      keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n    }\n\n    return keys.map(toSelectableValue);\n  }\n\n  /**\n   * Get possible key values for a specific key given current filters. Do not call from plugins directly\n   */\n  public async _getValuesFor(filter: AdHocVariableFilter): Promise<Array<SelectableValue<string>>> {\n    const override = await this.state.getTagValuesProvider?.(this, filter);\n\n    if (override && override.replace) {\n      return override.values.map(toSelectableValue);\n    }\n\n    const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);\n\n    if (!ds || !ds.getTagValues) {\n      return [];\n    }\n\n    // Filter out the current filter key from the list of all filters\n    const otherFilters = this.state.filters.filter((f) => f.key !== filter.key).concat(this.state.baseFilters ?? []);\n\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    const queries = getQueriesForVariables(this);\n    // @ts-expect-error TODO: remove this once 11.1.x is released\n    let values = await ds.getTagValues({ key: filter.key, filters: otherFilters, timeRange, queries });\n\n    if (override) {\n      values = values.concat(override.values);\n    }\n\n    return values.map(toSelectableValue);\n  }\n\n  public _addWip() {\n    this.setState({ _wip: { key: '', value: '', operator: '=', condition: '' } });\n  }\n\n  public _getOperators() {\n    return ['=', '!=', '<', '>', '=~', '!~'].map<SelectableValue<string>>((value) => ({\n      label: value,\n      value,\n    }));\n  }\n}\n\nfunction renderExpression(\n  builder: AdHocVariableExpressionBuilderFn | undefined,\n  filters: AdHocVariableFilter[] | undefined\n) {\n  return (builder ?? renderPrometheusLabelFilters)(filters ?? []);\n}\n\nexport function AdHocFiltersVariableRenderer({ model }: SceneComponentProps<AdHocFiltersVariable>) {\n  const { filters, readOnly, addFilterButtonText } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      {filters.map((filter, index) => (\n        <React.Fragment key={index}>\n          <AdHocFilterRenderer filter={filter} model={model} />\n        </React.Fragment>\n      ))}\n\n      {!readOnly && <AdHocFilterBuilder model={model} key=\"'builder\" addFilterButtonText={addFilterButtonText} />}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'flex-end',\n  }),\n  filterIcon: css({\n    color: theme.colors.text.secondary,\n    paddingRight: theme.spacing(0.5),\n  }),\n});\n\nexport function toSelectableValue({ text, value }: MetricFindValue): SelectableValue<string> {\n  return {\n    label: text,\n    value: String(value ?? text),\n  };\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdHocFiltersVariable.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariable.tsx"],"sourcesContent":["import React from 'react';\nimport { AdHocVariableFilter, GrafanaTheme2, MetricFindValue, SelectableValue } from '@grafana/data';\nimport { SceneObjectBase } from '../../core/SceneObjectBase';\nimport { SceneVariable, SceneVariableState, SceneVariableValueChangedEvent, VariableValue } from '../types';\nimport { ControlsLayout, SceneComponentProps } from '../../core/types';\nimport { DataSourceRef } from '@grafana/schema';\nimport { getQueriesForVariables, renderPrometheusLabelFilters } from '../utils';\nimport { patchGetAdhocFilters } from './patchGetAdhocFilters';\nimport { useStyles2 } from '@grafana/ui';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { AdHocFilterBuilder } from './AdHocFilterBuilder';\nimport { AdHocFilterRenderer } from './AdHocFilterRenderer';\nimport { getDataSourceSrv } from '@grafana/runtime';\nimport { AdHocFiltersVariableUrlSyncHandler } from './AdHocFiltersVariableUrlSyncHandler';\nimport { css } from '@emotion/css';\n\nexport interface AdHocFilterWithLabels extends AdHocVariableFilter {\n  keyLabel?: string;\n  valueLabel?: string;\n}\n\nexport interface AdHocFiltersVariableState extends SceneVariableState {\n  /** Optional text to display on the 'add filter' button */\n  addFilterButtonText?: string;\n  /** The visible filters */\n  filters: AdHocFilterWithLabels[];\n  /** Base filters to always apply when looking up keys*/\n  baseFilters?: AdHocFilterWithLabels[];\n  /** Datasource to use for getTagKeys and getTagValues and also controls which scene queries the filters should apply to */\n  datasource: DataSourceRef | null;\n  /** Controls if the filters can be changed */\n  readOnly?: boolean;\n  /**\n   * @experimental\n   * Controls the layout and design of the label.\n   * Vertical layout does not yet support operator selector.\n   */\n  layout?: ControlsLayout;\n  /**\n   * Defaults to automatic which means filters will automatically be applied to all queries with the same data source as this AdHocFilterSet.\n   * In manual mode you either have to use the filters programmatically or as a variable inside query expressions.\n   */\n  applyMode: 'auto' | 'manual';\n  /**\n   * Filter out the keys that do not match the regex.\n   */\n  tagKeyRegexFilter?: RegExp;\n  /**\n   * Extension hook for customizing the key lookup.\n   * Return replace: true if you want to override the default lookup\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagKeysProvider?: getTagKeysProvider;\n  /**\n   * Extension hook for customizing the value lookup.\n   * Return replace: true if you want to override the default lookup.\n   * Return replace: false if you want to combine the results with the default lookup\n   */\n  getTagValuesProvider?: getTagValuesProvider;\n\n  /**\n   * Optionally provide an array of static keys that override getTagKeys\n   */\n  defaultKeys?: MetricFindValue[];\n\n  /**\n   * This is the expression that the filters resulted in. Defaults to\n   * Prometheus / Loki compatible label filter expression\n   */\n  filterExpression?: string;\n\n  /**\n   * The default builder creates a Prometheus/Loki compatible filter expression,\n   * this can be overridden to create a different expression based on the current filters.\n   */\n  expressionBuilder?: AdHocVariableExpressionBuilderFn;\n\n  /**\n   * @internal state of the new filter being added\n   */\n  _wip?: AdHocFilterWithLabels;\n}\n\nexport type AdHocVariableExpressionBuilderFn = (filters: AdHocFilterWithLabels[]) => string;\n\nexport type getTagKeysProvider = (\n  variable: AdHocFiltersVariable,\n  currentKey: string | null\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport type getTagValuesProvider = (\n  variable: AdHocFiltersVariable,\n  filter: AdHocFilterWithLabels\n) => Promise<{ replace?: boolean; values: MetricFindValue[] }>;\n\nexport type AdHocFiltersVariableCreateHelperArgs = AdHocFiltersVariableState;\n\nexport class AdHocFiltersVariable\n  extends SceneObjectBase<AdHocFiltersVariableState>\n  implements SceneVariable<AdHocFiltersVariableState>\n{\n  static Component = AdHocFiltersVariableRenderer;\n\n  private _scopedVars = { __sceneObject: { value: this } };\n  private _dataSourceSrv = getDataSourceSrv();\n\n  protected _urlSync = new AdHocFiltersVariableUrlSyncHandler(this);\n\n  public constructor(state: Partial<AdHocFiltersVariableState>) {\n    super({\n      type: 'adhoc',\n      name: state.name ?? 'Filters',\n      filters: [],\n      datasource: null,\n      applyMode: 'auto',\n      filterExpression: state.filterExpression ?? renderExpression(state.expressionBuilder, state.filters),\n      ...state,\n    });\n\n    if (this.state.applyMode === 'auto') {\n      patchGetAdhocFilters(this);\n    }\n  }\n\n  public setState(update: Partial<AdHocFiltersVariableState>): void {\n    let filterExpressionChanged = false;\n\n    if (update.filters && update.filters !== this.state.filters && !update.filterExpression) {\n      update.filterExpression = renderExpression(this.state.expressionBuilder, update.filters);\n      filterExpressionChanged = update.filterExpression !== this.state.filterExpression;\n    }\n\n    super.setState(update);\n\n    if (filterExpressionChanged) {\n      this.publishEvent(new SceneVariableValueChangedEvent(this), true);\n    }\n  }\n\n  public getValue(): VariableValue | undefined {\n    return this.state.filterExpression;\n  }\n\n  public _updateFilter(\n    filter: AdHocFilterWithLabels,\n    prop: keyof AdHocFilterWithLabels,\n    { value, label }: SelectableValue<string | undefined | null>\n  ) {\n    if (value == null) {\n      return;\n    }\n\n    const { filters, _wip } = this.state;\n\n    const propLabelKey = `${prop}Label`;\n\n    if (filter === _wip) {\n      // If we set value we are done with this \"work in progress\" filter and we can add it\n      if (prop === 'value') {\n        this.setState({ filters: [...filters, { ..._wip, [prop]: value, [propLabelKey]: label }], _wip: undefined });\n      } else {\n        this.setState({ _wip: { ...filter, [prop]: value, [propLabelKey]: label } });\n      }\n      return;\n    }\n\n    const updatedFilters = this.state.filters.map((f) => {\n      if (f === filter) {\n        return { ...f, [prop]: value, [propLabelKey]: label };\n      }\n      return f;\n    });\n\n    this.setState({ filters: updatedFilters });\n  }\n\n  public _removeFilter(filter: AdHocFilterWithLabels) {\n    if (filter === this.state._wip) {\n      this.setState({ _wip: undefined });\n      return;\n    }\n\n    this.setState({ filters: this.state.filters.filter((f) => f !== filter) });\n  }\n\n  /**\n   * Get possible keys given current filters. Do not call from plugins directly\n   */\n  public async _getKeys(currentKey: string | null): Promise<Array<SelectableValue<string>>> {\n    const override = await this.state.getTagKeysProvider?.(this, currentKey);\n\n    if (override && override.replace) {\n      return override.values.map(toSelectableValue);\n    }\n\n    if (this.state.defaultKeys) {\n      return this.state.defaultKeys.map(toSelectableValue);\n    }\n\n    const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);\n    if (!ds || !ds.getTagKeys) {\n      return [];\n    }\n\n    const otherFilters = this.state.filters.filter((f) => f.key !== currentKey).concat(this.state.baseFilters ?? []);\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    const queries = getQueriesForVariables(this);\n    // @ts-expect-error TODO: remove this once 10.4.0 is released\n    let keys = await ds.getTagKeys({ filters: otherFilters, queries, timeRange });\n\n    if (override) {\n      keys = keys.concat(override.values);\n    }\n\n    const tagKeyRegexFilter = this.state.tagKeyRegexFilter;\n    if (tagKeyRegexFilter) {\n      keys = keys.filter((f) => f.text.match(tagKeyRegexFilter));\n    }\n\n    return keys.map(toSelectableValue);\n  }\n\n  /**\n   * Get possible key values for a specific key given current filters. Do not call from plugins directly\n   */\n  public async _getValuesFor(filter: AdHocFilterWithLabels): Promise<Array<SelectableValue<string>>> {\n    const override = await this.state.getTagValuesProvider?.(this, filter);\n\n    if (override && override.replace) {\n      return override.values.map(toSelectableValue);\n    }\n\n    const ds = await this._dataSourceSrv.get(this.state.datasource, this._scopedVars);\n\n    if (!ds || !ds.getTagValues) {\n      return [];\n    }\n\n    // Filter out the current filter key from the list of all filters\n    const otherFilters = this.state.filters.filter((f) => f.key !== filter.key).concat(this.state.baseFilters ?? []);\n\n    const timeRange = sceneGraph.getTimeRange(this).state.value;\n    const queries = getQueriesForVariables(this);\n    // @ts-expect-error TODO: remove this once 11.1.x is released\n    let values = await ds.getTagValues({ key: filter.key, filters: otherFilters, timeRange, queries });\n\n    if (override) {\n      values = values.concat(override.values);\n    }\n\n    return values.map(toSelectableValue);\n  }\n\n  public _addWip() {\n    this.setState({\n      _wip: { key: '', keyLabel: '', value: '', valueLabel: '', operator: '=', condition: '' },\n    });\n  }\n\n  public _getOperators() {\n    return ['=', '!=', '<', '>', '=~', '!~'].map<SelectableValue<string>>((value) => ({\n      label: value,\n      value,\n    }));\n  }\n}\n\nfunction renderExpression(\n  builder: AdHocVariableExpressionBuilderFn | undefined,\n  filters: AdHocFilterWithLabels[] | undefined\n) {\n  return (builder ?? renderPrometheusLabelFilters)(filters ?? []);\n}\n\nexport function AdHocFiltersVariableRenderer({ model }: SceneComponentProps<AdHocFiltersVariable>) {\n  const { filters, readOnly, addFilterButtonText } = model.useState();\n  const styles = useStyles2(getStyles);\n\n  return (\n    <div className={styles.wrapper}>\n      {filters.map((filter, index) => (\n        <React.Fragment key={index}>\n          <AdHocFilterRenderer filter={filter} model={model} />\n        </React.Fragment>\n      ))}\n\n      {!readOnly && <AdHocFilterBuilder model={model} key=\"'builder\" addFilterButtonText={addFilterButtonText} />}\n    </div>\n  );\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n  wrapper: css({\n    display: 'flex',\n    gap: theme.spacing(2),\n    alignItems: 'flex-end',\n  }),\n  filterIcon: css({\n    color: theme.colors.text.secondary,\n    paddingRight: theme.spacing(0.5),\n  }),\n});\n\nexport function toSelectableValue({ text, value }: MetricFindValue): SelectableValue<string> {\n  return {\n    label: text,\n    value: String(value ?? text),\n  };\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiGO,MAAM,6BACH,eAEV,CAAA;AAAA,EAQS,YAAY,KAA2C,EAAA;AA5GhE,IAAA,IAAA,EAAA,EAAA,EAAA,CAAA;AA6GI,IAAM,KAAA,CAAA,cAAA,CAAA;AAAA,MACJ,IAAM,EAAA,OAAA;AAAA,MACN,IAAA,EAAA,CAAM,EAAM,GAAA,KAAA,CAAA,IAAA,KAAN,IAAc,GAAA,EAAA,GAAA,SAAA;AAAA,MACpB,SAAS,EAAC;AAAA,MACV,UAAY,EAAA,IAAA;AAAA,MACZ,SAAW,EAAA,MAAA;AAAA,MACX,gBAAA,EAAA,CAAkB,WAAM,gBAAN,KAAA,IAAA,GAAA,EAAA,GAA0B,iBAAiB,KAAM,CAAA,iBAAA,EAAmB,MAAM,OAAO,CAAA;AAAA,KAAA,EAChG,KACJ,CAAA,CAAA,CAAA;AAdH,IAAA,IAAA,CAAQ,cAAc,EAAE,aAAA,EAAe,EAAE,KAAA,EAAO,MAAO,EAAA,CAAA;AACvD,IAAA,IAAA,CAAQ,iBAAiB,gBAAiB,EAAA,CAAA;AAE1C,IAAU,IAAA,CAAA,QAAA,GAAW,IAAI,kCAAA,CAAmC,IAAI,CAAA,CAAA;AAa9D,IAAI,IAAA,IAAA,CAAK,KAAM,CAAA,SAAA,KAAc,MAAQ,EAAA;AACnC,MAAA,oBAAA,CAAqB,IAAI,CAAA,CAAA;AAAA,KAC3B;AAAA,GACF;AAAA,EAEO,SAAS,MAAkD,EAAA;AAChE,IAAA,IAAI,uBAA0B,GAAA,KAAA,CAAA;AAE9B,IAAI,IAAA,MAAA,CAAO,WAAW,MAAO,CAAA,OAAA,KAAY,KAAK,KAAM,CAAA,OAAA,IAAW,CAAC,MAAA,CAAO,gBAAkB,EAAA;AACvF,MAAA,MAAA,CAAO,mBAAmB,gBAAiB,CAAA,IAAA,CAAK,KAAM,CAAA,iBAAA,EAAmB,OAAO,OAAO,CAAA,CAAA;AACvF,MAA0B,uBAAA,GAAA,MAAA,CAAO,gBAAqB,KAAA,IAAA,CAAK,KAAM,CAAA,gBAAA,CAAA;AAAA,KACnE;AAEA,IAAA,KAAA,CAAM,SAAS,MAAM,CAAA,CAAA;AAErB,IAAA,IAAI,uBAAyB,EAAA;AAC3B,MAAA,IAAA,CAAK,YAAa,CAAA,IAAI,8BAA+B,CAAA,IAAI,GAAG,IAAI,CAAA,CAAA;AAAA,KAClE;AAAA,GACF;AAAA,EAEO,QAAsC,GAAA;AAC3C,IAAA,OAAO,KAAK,KAAM,CAAA,gBAAA,CAAA;AAAA,GACpB;AAAA,EAEO,cACL,MACA,EAAA,IAAA,EACA,EAAE,KAAA,EAAO,OACT,EAAA;AACA,IAAA,IAAI,SAAS,IAAM,EAAA;AACjB,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,EAAE,OAAA,EAAS,IAAK,EAAA,GAAI,IAAK,CAAA,KAAA,CAAA;AAE/B,IAAA,MAAM,eAAe,CAAG,EAAA,IAAA,CAAA,KAAA,CAAA,CAAA;AAExB,IAAA,IAAI,WAAW,IAAM,EAAA;AAEnB,MAAA,IAAI,SAAS,OAAS,EAAA;AACpB,QAAA,IAAA,CAAK,SAAS,EAAE,OAAA,EAAS,CAAC,GAAG,OAAA,EAAS,iCAAK,IAAL,CAAA,EAAA,EAAW,CAAC,IAAO,GAAA,KAAA,EAAO,CAAC,YAAe,GAAA,KAAA,GAAO,CAAG,EAAA,IAAA,EAAM,QAAW,CAAA,CAAA;AAAA,OACtG,MAAA;AACL,QAAA,IAAA,CAAK,QAAS,CAAA,EAAE,IAAM,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,MAAL,CAAA,EAAA,EAAa,CAAC,IAAA,GAAO,KAAO,EAAA,CAAC,YAAe,GAAA,KAAA,KAAS,CAAA,CAAA;AAAA,OAC7E;AACA,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,MAAM,iBAAiB,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,GAAA,CAAI,CAAC,CAAM,KAAA;AACnD,MAAA,IAAI,MAAM,MAAQ,EAAA;AAChB,QAAO,OAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAK,IAAL,EAAQ,CAAC,OAAO,KAAO,EAAA,CAAC,eAAe,KAAM,EAAA,CAAA,CAAA;AAAA,OACtD;AACA,MAAO,OAAA,CAAA,CAAA;AAAA,KACR,CAAA,CAAA;AAED,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,cAAA,EAAgB,CAAA,CAAA;AAAA,GAC3C;AAAA,EAEO,cAAc,MAA+B,EAAA;AAClD,IAAI,IAAA,MAAA,KAAW,IAAK,CAAA,KAAA,CAAM,IAAM,EAAA;AAC9B,MAAA,IAAA,CAAK,QAAS,CAAA,EAAE,IAAM,EAAA,KAAA,CAAA,EAAW,CAAA,CAAA;AACjC,MAAA,OAAA;AAAA,KACF;AAEA,IAAA,IAAA,CAAK,QAAS,CAAA,EAAE,OAAS,EAAA,IAAA,CAAK,KAAM,CAAA,OAAA,CAAQ,MAAO,CAAA,CAAC,CAAM,KAAA,CAAA,KAAM,MAAM,CAAA,EAAG,CAAA,CAAA;AAAA,GAC3E;AAAA,EAKA,MAAa,SAAS,UAAoE,EAAA;AA5L5F,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AA6LI,IAAA,MAAM,WAAW,OAAM,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAK,KAAM,EAAA,kBAAA,KAAX,4BAAgC,IAAM,EAAA,UAAA,CAAA,CAAA,CAAA;AAE7D,IAAI,IAAA,QAAA,IAAY,SAAS,OAAS,EAAA;AAChC,MAAO,OAAA,QAAA,CAAS,MAAO,CAAA,GAAA,CAAI,iBAAiB,CAAA,CAAA;AAAA,KAC9C;AAEA,IAAI,IAAA,IAAA,CAAK,MAAM,WAAa,EAAA;AAC1B,MAAA,OAAO,IAAK,CAAA,KAAA,CAAM,WAAY,CAAA,GAAA,CAAI,iBAAiB,CAAA,CAAA;AAAA,KACrD;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,IAAK,CAAA,cAAA,CAAe,IAAI,IAAK,CAAA,KAAA,CAAM,UAAY,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAChF,IAAA,IAAI,CAAC,EAAA,IAAM,CAAC,EAAA,CAAG,UAAY,EAAA;AACzB,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAEA,IAAA,MAAM,eAAe,IAAK,CAAA,KAAA,CAAM,OAAQ,CAAA,MAAA,CAAO,CAAC,CAAM,KAAA,CAAA,CAAE,GAAQ,KAAA,UAAU,EAAE,MAAO,CAAA,CAAA,EAAA,GAAA,IAAA,CAAK,MAAM,WAAX,KAAA,IAAA,GAAA,EAAA,GAA0B,EAAE,CAAA,CAAA;AAC/G,IAAA,MAAM,SAAY,GAAA,UAAA,CAAW,YAAa,CAAA,IAAI,EAAE,KAAM,CAAA,KAAA,CAAA;AACtD,IAAM,MAAA,OAAA,GAAU,uBAAuB,IAAI,CAAA,CAAA;AAE3C,IAAI,IAAA,IAAA,GAAO,MAAM,EAAG,CAAA,UAAA,CAAW,EAAE,OAAS,EAAA,YAAA,EAAc,OAAS,EAAA,SAAA,EAAW,CAAA,CAAA;AAE5E,IAAA,IAAI,QAAU,EAAA;AACZ,MAAO,IAAA,GAAA,IAAA,CAAK,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA,CAAA;AAAA,KACpC;AAEA,IAAM,MAAA,iBAAA,GAAoB,KAAK,KAAM,CAAA,iBAAA,CAAA;AACrC,IAAA,IAAI,iBAAmB,EAAA;AACrB,MAAO,IAAA,GAAA,IAAA,CAAK,OAAO,CAAC,CAAA,KAAM,EAAE,IAAK,CAAA,KAAA,CAAM,iBAAiB,CAAC,CAAA,CAAA;AAAA,KAC3D;AAEA,IAAO,OAAA,IAAA,CAAK,IAAI,iBAAiB,CAAA,CAAA;AAAA,GACnC;AAAA,EAKA,MAAa,cAAc,MAAwE,EAAA;AAjOrG,IAAA,IAAA,EAAA,EAAA,EAAA,EAAA,EAAA,CAAA;AAkOI,IAAA,MAAM,WAAW,OAAM,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAK,KAAM,EAAA,oBAAA,KAAX,4BAAkC,IAAM,EAAA,MAAA,CAAA,CAAA,CAAA;AAE/D,IAAI,IAAA,QAAA,IAAY,SAAS,OAAS,EAAA;AAChC,MAAO,OAAA,QAAA,CAAS,MAAO,CAAA,GAAA,CAAI,iBAAiB,CAAA,CAAA;AAAA,KAC9C;AAEA,IAAM,MAAA,EAAA,GAAK,MAAM,IAAK,CAAA,cAAA,CAAe,IAAI,IAAK,CAAA,KAAA,CAAM,UAAY,EAAA,IAAA,CAAK,WAAW,CAAA,CAAA;AAEhF,IAAA,IAAI,CAAC,EAAA,IAAM,CAAC,EAAA,CAAG,YAAc,EAAA;AAC3B,MAAA,OAAO,EAAC,CAAA;AAAA,KACV;AAGA,IAAA,MAAM,eAAe,IAAK,CAAA,KAAA,CAAM,QAAQ,MAAO,CAAA,CAAC,MAAM,CAAE,CAAA,GAAA,KAAQ,MAAO,CAAA,GAAG,EAAE,MAAO,CAAA,CAAA,EAAA,GAAA,IAAA,CAAK,MAAM,WAAX,KAAA,IAAA,GAAA,EAAA,GAA0B,EAAE,CAAA,CAAA;AAE/G,IAAA,MAAM,SAAY,GAAA,UAAA,CAAW,YAAa,CAAA,IAAI,EAAE,KAAM,CAAA,KAAA,CAAA;AACtD,IAAM,MAAA,OAAA,GAAU,uBAAuB,IAAI,CAAA,CAAA;AAE3C,IAAA,IAAI,MAAS,GAAA,MAAM,EAAG,CAAA,YAAA,CAAa,EAAE,GAAA,EAAK,MAAO,CAAA,GAAA,EAAK,OAAS,EAAA,YAAA,EAAc,SAAW,EAAA,OAAA,EAAS,CAAA,CAAA;AAEjG,IAAA,IAAI,QAAU,EAAA;AACZ,MAAS,MAAA,GAAA,MAAA,CAAO,MAAO,CAAA,QAAA,CAAS,MAAM,CAAA,CAAA;AAAA,KACxC;AAEA,IAAO,OAAA,MAAA,CAAO,IAAI,iBAAiB,CAAA,CAAA;AAAA,GACrC;AAAA,EAEO,OAAU,GAAA;AACf,IAAA,IAAA,CAAK,QAAS,CAAA;AAAA,MACZ,IAAM,EAAA,EAAE,GAAK,EAAA,EAAA,EAAI,QAAU,EAAA,EAAA,EAAI,KAAO,EAAA,EAAA,EAAI,UAAY,EAAA,EAAA,EAAI,QAAU,EAAA,GAAA,EAAK,WAAW,EAAG,EAAA;AAAA,KACxF,CAAA,CAAA;AAAA,GACH;AAAA,EAEO,aAAgB,GAAA;AACrB,IAAO,OAAA,CAAC,GAAK,EAAA,IAAA,EAAM,GAAK,EAAA,GAAA,EAAK,MAAM,IAAI,CAAA,CAAE,GAA6B,CAAA,CAAC,KAAW,MAAA;AAAA,MAChF,KAAO,EAAA,KAAA;AAAA,MACP,KAAA;AAAA,KACA,CAAA,CAAA,CAAA;AAAA,GACJ;AACF,CAAA;AAxKa,oBAAA,CAIJ,SAAY,GAAA,4BAAA,CAAA;AAsKrB,SAAS,gBAAA,CACP,SACA,OACA,EAAA;AACA,EAAA,OAAA,CAAQ,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,4BAAA,EAA8B,OAAW,IAAA,IAAA,GAAA,OAAA,GAAA,EAAE,CAAA,CAAA;AAChE,CAAA;AAEgB,SAAA,4BAAA,CAA6B,EAAE,KAAA,EAAoD,EAAA;AACjG,EAAA,MAAM,EAAE,OAAS,EAAA,QAAA,EAAU,mBAAoB,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAClE,EAAM,MAAA,MAAA,GAAS,WAAW,SAAS,CAAA,CAAA;AAEnC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAI,WAAW,MAAO,CAAA,OAAA;AAAA,GAAA,EACpB,QAAQ,GAAI,CAAA,CAAC,QAAQ,KACpB,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,QAAN,EAAA;AAAA,IAAe,GAAK,EAAA,KAAA;AAAA,GAAA,kBAClB,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAA,IAAoB,MAAA;AAAA,IAAgB,KAAA;AAAA,GAAc,CACrD,CACD,CAEA,EAAA,CAAC,4BAAa,KAAA,CAAA,aAAA,CAAA,kBAAA,EAAA;AAAA,IAAmB,KAAA;AAAA,IAAc,GAAI,EAAA,UAAA;AAAA,IAAW,mBAAA;AAAA,GAA0C,CAC3G,CAAA,CAAA;AAEJ,CAAA;AAEA,MAAM,SAAA,GAAY,CAAC,KAA0B,MAAA;AAAA,EAC3C,SAAS,GAAI,CAAA;AAAA,IACX,OAAS,EAAA,MAAA;AAAA,IACT,GAAA,EAAK,KAAM,CAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,IACpB,UAAY,EAAA,UAAA;AAAA,GACb,CAAA;AAAA,EACD,YAAY,GAAI,CAAA;AAAA,IACd,KAAA,EAAO,KAAM,CAAA,MAAA,CAAO,IAAK,CAAA,SAAA;AAAA,IACzB,YAAA,EAAc,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAA,GAChC,CAAA;AACH,CAAA,CAAA,CAAA;AAEO,SAAS,iBAAkB,CAAA,EAAE,IAAM,EAAA,KAAA,EAAmD,EAAA;AAC3F,EAAO,OAAA;AAAA,IACL,KAAO,EAAA,IAAA;AAAA,IACP,KAAA,EAAO,MAAO,CAAA,KAAA,IAAA,IAAA,GAAA,KAAA,GAAS,IAAI,CAAA;AAAA,GAC7B,CAAA;AACF;;;;"}

package/dist/esm/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.js

@@ -13,7 +13,7 @@ class AdHocFiltersVariableUrlSyncHandler {
     if (filters.length === 0) {
       return { [this.getKey()]: [""] };
     }
-    const value = filters.map((filter) => toArray(filter).map(escapeDelimiter).join("|"));
+    const value = filters.map((filter) => toArray(filter).map(escapePipeDelimiters).join("|"));
     return { [this.getKey()]: value };
   }
   updateFromUrl(values) {
@@ -33,30 +33,54 @@ function deserializeUrlToFilters(value) {
   const filter = toFilter(value);
   return filter === null ? [] : [filter];
 }
-function escapeDelimiter(value) {
+function escapePipeDelimiters(value) {
   if (value === null || value === void 0) {
     return "";
   }
-  return /\|/g[Symbol.replace](value, "__gfp__");
+  return value = /\|/g[Symbol.replace](value, "__gfp__");
 }
-function unescapeDelimiter(value) {
+function escapeCommaDelimiters(value) {
   if (value === null || value === void 0) {
     return "";
   }
-  return /__gfp__/g[Symbol.replace](value, "|");
+  return /,/g[Symbol.replace](value, "__gfc__");
+}
+function unescapeDelimiters(value) {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  value = /__gfp__/g[Symbol.replace](value, "|");
+  value = /__gfc__/g[Symbol.replace](value, ",");
+  return value;
 }
 function toArray(filter) {
-  return [filter.key, filter.operator, filter.value];
+  return [
+    toCommaDelimitedString(filter.key, filter.keyLabel),
+    filter.operator,
+    toCommaDelimitedString(filter.value, filter.valueLabel)
+  ];
+}
+function toCommaDelimitedString(key, label) {
+  if (!label || key === label) {
+    return escapeCommaDelimiters(key);
+  }
+  return [key, label].map(escapeCommaDelimiters).join(",");
 }
-function toFilter(value) {
-  if (typeof value !== "string" || value.length === 0) {
+function toFilter(urlValue) {
+  if (typeof urlValue !== "string" || urlValue.length === 0) {
     return null;
   }
-  const parts = value.split("|").map(unescapeDelimiter);
+  const [key, keyLabel, operator, _operatorLabel, value, valueLabel] = urlValue.split("|").reduce((acc, v) => {
+    const [key2, label] = v.split(",");
+    acc.push(key2, label != null ? label : key2);
+    return acc;
+  }, []).map(unescapeDelimiters);
   return {
-    key: parts[0],
-    operator: parts[1],
-    value: parts[2],
+    key,
+    keyLabel,
+    operator,
+    value,
+    valueLabel,
     condition: ""
   };
 }

package/dist/esm/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.js.map

@@ -1 +1 @@
-{"version":3,"file":"AdHocFiltersVariableUrlSyncHandler.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.ts"],"sourcesContent":["import { AdHocVariableFilter } from '@grafana/data';\nimport { SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues } from '../../core/types';\nimport { AdHocFiltersVariable } from './AdHocFiltersVariable';\n\nexport class AdHocFiltersVariableUrlSyncHandler implements SceneObjectUrlSyncHandler {\n  public constructor(private _variable: AdHocFiltersVariable) {}\n\n  private getKey(): string {\n    return `var-${this._variable.state.name}`;\n  }\n\n  public getKeys(): string[] {\n    return [this.getKey()];\n  }\n\n  public getUrlState(): SceneObjectUrlValues {\n    const filters = this._variable.state.filters;\n\n    if (filters.length === 0) {\n      return { [this.getKey()]: [''] };\n    }\n\n    const value = filters.map((filter) => toArray(filter).map(escapeDelimiter).join('|'));\n    return { [this.getKey()]: value };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues): void {\n    const urlValue = values[this.getKey()];\n\n    if (urlValue == null) {\n      return;\n    }\n\n    const filters = deserializeUrlToFilters(urlValue);\n    this._variable.setState({ filters });\n  }\n}\n\nfunction deserializeUrlToFilters(value: SceneObjectUrlValue): AdHocVariableFilter[] {\n  if (Array.isArray(value)) {\n    const values = value;\n    return values.map(toFilter).filter(isFilter);\n  }\n\n  const filter = toFilter(value);\n  return filter === null ? [] : [filter];\n}\n\nfunction escapeDelimiter(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  return /\\|/g[Symbol.replace](value, '__gfp__');\n}\n\nfunction unescapeDelimiter(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  return /__gfp__/g[Symbol.replace](value, '|');\n}\n\nfunction toArray(filter: AdHocVariableFilter): string[] {\n  return [filter.key, filter.operator, filter.value];\n}\n\nfunction toFilter(value: string | number | boolean | undefined | null): AdHocVariableFilter | null {\n  if (typeof value !== 'string' || value.length === 0) {\n    return null;\n  }\n\n  const parts = value.split('|').map(unescapeDelimiter);\n\n  return {\n    key: parts[0],\n    operator: parts[1],\n    value: parts[2],\n    condition: '',\n  };\n}\n\nfunction isFilter(filter: AdHocVariableFilter | null): filter is AdHocVariableFilter {\n  return filter !== null && typeof filter.key === 'string' && typeof filter.value === 'string';\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"AdHocFiltersVariableUrlSyncHandler.js","sources":["../../../../src/variables/adhoc/AdHocFiltersVariableUrlSyncHandler.ts"],"sourcesContent":["import { SceneObjectUrlSyncHandler, SceneObjectUrlValue, SceneObjectUrlValues } from '../../core/types';\nimport { AdHocFiltersVariable, AdHocFilterWithLabels } from './AdHocFiltersVariable';\n\nexport class AdHocFiltersVariableUrlSyncHandler implements SceneObjectUrlSyncHandler {\n  public constructor(private _variable: AdHocFiltersVariable) {}\n\n  private getKey(): string {\n    return `var-${this._variable.state.name}`;\n  }\n\n  public getKeys(): string[] {\n    return [this.getKey()];\n  }\n\n  public getUrlState(): SceneObjectUrlValues {\n    const filters = this._variable.state.filters;\n\n    if (filters.length === 0) {\n      return { [this.getKey()]: [''] };\n    }\n\n    const value = filters.map((filter) => toArray(filter).map(escapePipeDelimiters).join('|'));\n    return { [this.getKey()]: value };\n  }\n\n  public updateFromUrl(values: SceneObjectUrlValues): void {\n    const urlValue = values[this.getKey()];\n\n    if (urlValue == null) {\n      return;\n    }\n\n    const filters = deserializeUrlToFilters(urlValue);\n    this._variable.setState({ filters });\n  }\n}\n\nfunction deserializeUrlToFilters(value: SceneObjectUrlValue): AdHocFilterWithLabels[] {\n  if (Array.isArray(value)) {\n    const values = value;\n    return values.map(toFilter).filter(isFilter);\n  }\n\n  const filter = toFilter(value);\n  return filter === null ? [] : [filter];\n}\n\nfunction escapePipeDelimiters(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Replace the pipe due to using it as a filter separator\n  return (value = /\\|/g[Symbol.replace](value, '__gfp__'));\n}\n\nfunction escapeCommaDelimiters(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  // Replace the comma due to using it as a value/label separator\n  return /,/g[Symbol.replace](value, '__gfc__');\n}\n\nfunction unescapeDelimiters(value: string | undefined): string {\n  if (value === null || value === undefined) {\n    return '';\n  }\n\n  value = /__gfp__/g[Symbol.replace](value, '|');\n  value = /__gfc__/g[Symbol.replace](value, ',');\n\n  return value;\n}\n\nfunction toArray(filter: AdHocFilterWithLabels): string[] {\n  return [\n    toCommaDelimitedString(filter.key, filter.keyLabel),\n    filter.operator,\n    toCommaDelimitedString(filter.value, filter.valueLabel),\n  ];\n}\n\nfunction toCommaDelimitedString(key: string, label?: string): string {\n  // Omit for identical key/label or when label is not set at all\n  if (!label || key === label) {\n    return escapeCommaDelimiters(key);\n  }\n\n  return [key, label].map(escapeCommaDelimiters).join(',');\n}\n\nfunction toFilter(urlValue: string | number | boolean | undefined | null): AdHocFilterWithLabels | null {\n  if (typeof urlValue !== 'string' || urlValue.length === 0) {\n    return null;\n  }\n\n  const [key, keyLabel, operator, _operatorLabel, value, valueLabel] = urlValue\n    .split('|')\n    .reduce<string[]>((acc, v) => {\n      const [key, label] = v.split(',');\n\n      acc.push(key, label ?? key);\n\n      return acc;\n    }, [])\n    .map(unescapeDelimiters);\n\n  return {\n    key,\n    keyLabel,\n    operator,\n    value,\n    valueLabel,\n    condition: '',\n  };\n}\n\nfunction isFilter(filter: AdHocFilterWithLabels | null): filter is AdHocFilterWithLabels {\n  return filter !== null && typeof filter.key === 'string' && typeof filter.value === 'string';\n}\n"],"names":["key"],"mappings":"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"}

package/dist/esm/variables/components/VariableValueSelect.js

@@ -1,7 +1,6 @@
 import { isArray } from 'lodash';
 import React, { useMemo, useState, useEffect } from 'react';
 import { Select, MultiSelect } from '@grafana/ui';
-import { selectors } from '@grafana/e2e-selectors';
 
 function VariableValueSelect({ model }) {
   const { value, key } = model.useState();
@@ -20,7 +19,6 @@ function VariableValueSelect({ model }) {
     tabSelectsValue: false,
     onInputChange,
     options: model.getOptionsForSelect(),
-    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
     onChange: (newValue) => {
       model.changeValueTo(newValue.value, newValue.label);
     }
@@ -57,7 +55,6 @@ function VariableValueSelectMulti({ model }) {
     onBlur: () => {
       model.changeValueTo(uncommittedValue);
     },
-    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
     onChange: (newValue, action) => {
       if (action.action === "clear" && noValueOnClear) {
         model.changeValueTo([]);

package/dist/esm/variables/components/VariableValueSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key } = model.useState();\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      placeholder=\"Select value\"\n      width=\"auto\"\n      value={value}\n      allowCustomValue\n      virtualized\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      options={model.getOptionsForSelect()}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`)}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!);\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n  const options = model.getOptionsForSelect();\n\n  // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n  const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={model.getOptionsForSelect()}\n      closeMenuOnSelect={false}\n      isClearable={true}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      data-testid={selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`)}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([]);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n    />\n  );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n  if (model.state.isMulti) {\n    return <VariableValueSelectMulti model={model} />;\n  } else {\n    return <VariableValueSelect model={model} />;\n  }\n}\n"],"names":["value"],"mappings":";;;;;AAUgB,SAAA,mBAAA,CAAoB,EAAE,KAAA,EAAkD,EAAA;AACtF,EAAA,MAAM,EAAE,KAAA,EAAO,GAAI,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AAEtC,EAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,cACxB,GAAA,CAACA,QAAe,IAA0B,KAAA;AACxC,IAAI,IAAA,IAAA,CAAK,WAAW,cAAgB,EAAA;AAClC,MAAA,KAAA,CAAM,eAAgBA,MAAK,CAAA,CAAA;AAAA,KAC7B;AAAA,GAEF,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA;AAAA,IACC,EAAI,EAAA,GAAA;AAAA,IACJ,WAAY,EAAA,cAAA;AAAA,IACZ,KAAM,EAAA,MAAA;AAAA,IACN,KAAA;AAAA,IACA,gBAAgB,EAAA,IAAA;AAAA,IAChB,WAAW,EAAA,IAAA;AAAA,IACX,eAAiB,EAAA,KAAA;AAAA,IACjB,aAAA;AAAA,IACA,OAAA,EAAS,MAAM,mBAAoB,EAAA;AAAA,IACnC,eAAa,SAAU,CAAA,KAAA,CAAM,UAAU,OAAQ,CAAA,sCAAA,CAAuC,GAAG,KAAO,CAAA,CAAA,CAAA;AAAA,IAChG,QAAA,EAAU,CAAC,QAAa,KAAA;AACtB,MAAA,KAAA,CAAM,aAAc,CAAA,QAAA,CAAS,KAAQ,EAAA,QAAA,CAAS,KAAM,CAAA,CAAA;AAAA,KACtD;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;AAEgB,SAAA,wBAAA,CAAyB,EAAE,KAAA,EAAkD,EAAA;AAC3F,EAAA,MAAM,EAAE,KAAO,EAAA,GAAA,EAAK,kBAAkB,cAAe,EAAA,GAAI,MAAM,QAAS,EAAA,CAAA;AACxE,EAAA,MAAM,UAAa,GAAA,OAAA,CAAQ,MAAO,OAAA,CAAQ,KAAK,CAAA,GAAI,KAAQ,GAAA,CAAC,KAAK,CAAA,EAAI,CAAC,KAAK,CAAC,CAAA,CAAA;AAC5E,EAAM,MAAA,OAAA,GAAU,MAAM,mBAAoB,EAAA,CAAA;AAG1C,EAAA,MAAM,CAAC,gBAAA,EAAkB,mBAAmB,CAAA,GAAI,SAAS,UAAU,CAAA,CAAA;AAGnE,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,mBAAA,CAAoB,UAAU,CAAA,CAAA;AAAA,GAChC,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAA,MAAM,aAAgB,GAAA,KAAA,CAAM,cACxB,GAAA,CAACA,QAAe,IAA0B,KAAA;AACxC,IAAI,IAAA,IAAA,CAAK,WAAW,cAAgB,EAAA;AAClC,MAAA,KAAA,CAAM,eAAgBA,MAAK,CAAA,CAAA;AAAA,KAC7B;AAAA,GAEF,GAAA,KAAA,CAAA,CAAA;AAEJ,EAAA,MAAM,WAAc,GAAA,OAAA,CAAQ,MAAS,GAAA,CAAA,GAAI,cAAiB,GAAA,EAAA,CAAA;AAE1D,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,WAAA,EAAA;AAAA,IACC,EAAI,EAAA,GAAA;AAAA,IACJ,WAAA;AAAA,IACA,KAAM,EAAA,MAAA;AAAA,IACN,KAAO,EAAA,gBAAA;AAAA,IACP,gBAAkB,EAAA,IAAA;AAAA,IAClB,kBAAkB,gBAAoB,IAAA,IAAA,GAAA,gBAAA,GAAA,CAAA;AAAA,IACtC,eAAiB,EAAA,KAAA;AAAA,IACjB,WAAW,EAAA,IAAA;AAAA,IACX,gBAAgB,EAAA,IAAA;AAAA,IAChB,OAAA,EAAS,MAAM,mBAAoB,EAAA;AAAA,IACnC,iBAAmB,EAAA,KAAA;AAAA,IACnB,WAAa,EAAA,IAAA;AAAA,IACb,aAAA;AAAA,IACA,QAAQ,MAAM;AACZ,MAAA,KAAA,CAAM,cAAc,gBAAgB,CAAA,CAAA;AAAA,KACtC;AAAA,IACA,eAAa,SAAU,CAAA,KAAA,CAAM,UAAU,OAAQ,CAAA,sCAAA,CAAuC,GAAG,gBAAkB,CAAA,CAAA,CAAA;AAAA,IAC3G,QAAA,EAAU,CAAC,QAAA,EAAU,MAAW,KAAA;AAC9B,MAAI,IAAA,MAAA,CAAO,MAAW,KAAA,OAAA,IAAW,cAAgB,EAAA;AAC/C,QAAM,KAAA,CAAA,aAAA,CAAc,EAAE,CAAA,CAAA;AAAA,OACxB;AACA,MAAA,mBAAA,CAAoB,SAAS,GAAI,CAAA,CAAC,CAAM,KAAA,CAAA,CAAE,KAAM,CAAC,CAAA,CAAA;AAAA,KACnD;AAAA,GACF,CAAA,CAAA;AAEJ,CAAA;AAEO,SAAS,wBAAwB,KAA2B,EAAA;AACjE,EAAI,IAAA,KAAA,CAAM,MAAM,OAAS,EAAA;AACvB,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAA;AAAA,MAAyB,KAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC1C,MAAA;AACL,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,mBAAA,EAAA;AAAA,MAAoB,KAAA;AAAA,KAAc,CAAA,CAAA;AAAA,GAC5C;AACF;;;;"}
+{"version":3,"file":"VariableValueSelect.js","sources":["../../../../src/variables/components/VariableValueSelect.tsx"],"sourcesContent":["import { isArray } from 'lodash';\nimport React, { useEffect, useMemo, useState } from 'react';\n\nimport { InputActionMeta, MultiSelect, Select } from '@grafana/ui';\n\nimport { SceneComponentProps } from '../../core/types';\nimport { MultiValueVariable } from '../variants/MultiValueVariable';\nimport { VariableValue, VariableValueSingle } from '../types';\n\nexport function VariableValueSelect({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key } = model.useState();\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  return (\n    <Select<VariableValue>\n      id={key}\n      placeholder=\"Select value\"\n      width=\"auto\"\n      value={value}\n      allowCustomValue\n      virtualized\n      tabSelectsValue={false}\n      onInputChange={onInputChange}\n      options={model.getOptionsForSelect()}\n      onChange={(newValue) => {\n        model.changeValueTo(newValue.value!, newValue.label!);\n      }}\n    />\n  );\n}\n\nexport function VariableValueSelectMulti({ model }: SceneComponentProps<MultiValueVariable>) {\n  const { value, key, maxVisibleValues, noValueOnClear } = model.useState();\n  const arrayValue = useMemo(() => (isArray(value) ? value : [value]), [value]);\n  const options = model.getOptionsForSelect();\n\n  // To not trigger queries on every selection we store this state locally here and only update the variable onBlur\n  const [uncommittedValue, setUncommittedValue] = useState(arrayValue);\n\n  // Detect value changes outside\n  useEffect(() => {\n    setUncommittedValue(arrayValue);\n  }, [arrayValue]);\n\n  const onInputChange = model.onSearchChange\n    ? (value: string, meta: InputActionMeta) => {\n        if (meta.action === 'input-change') {\n          model.onSearchChange!(value);\n        }\n      }\n    : undefined;\n\n  const placeholder = options.length > 0 ? 'Select value' : '';\n\n  return (\n    <MultiSelect<VariableValueSingle>\n      id={key}\n      placeholder={placeholder}\n      width=\"auto\"\n      value={uncommittedValue}\n      noMultiValueWrap={true}\n      maxVisibleValues={maxVisibleValues ?? 5}\n      tabSelectsValue={false}\n      virtualized\n      allowCustomValue\n      options={model.getOptionsForSelect()}\n      closeMenuOnSelect={false}\n      isClearable={true}\n      onInputChange={onInputChange}\n      onBlur={() => {\n        model.changeValueTo(uncommittedValue);\n      }}\n      onChange={(newValue, action) => {\n        if (action.action === 'clear' && noValueOnClear) {\n          model.changeValueTo([]);\n        }\n        setUncommittedValue(newValue.map((x) => x.value!));\n      }}\n    />\n  );\n}\n\nexport function renderSelectForVariable(model: MultiValueVariable) {\n  if (model.state.isMulti) {\n    return <VariableValueSelectMulti model={model} />;\n  } else {\n    return <VariableValueSelect model={model} />;\n  }\n}\n"],"names":["value"],"mappings":"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"}

package/dist/esm/variables/components/VariableValueSelectors.js

@@ -4,7 +4,6 @@ import { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase
 import { sceneGraph } from '../../core/sceneGraph/index.js';
 import { ControlsLabel } from '../../utils/ControlsLabel.js';
 import { css } from '@emotion/css';
-import { selectors } from '@grafana/e2e-selectors';
 
 class VariableValueSelectors extends SceneObjectBase {
 }
@@ -24,8 +23,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
   }
   if (layout === "vertical") {
     return /* @__PURE__ */ React.createElement("div", {
-      className: verticalContainer,
-      "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
+      className: verticalContainer
     }, /* @__PURE__ */ React.createElement(VariableLabel, {
       variable,
       layout
@@ -34,8 +32,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
     }));
   }
   return /* @__PURE__ */ React.createElement("div", {
-    className: containerStyle,
-    "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
+    className: containerStyle
   }, /* @__PURE__ */ React.createElement(VariableLabel, {
     variable
   }), /* @__PURE__ */ React.createElement(variable.Component, {

package/dist/esm/variables/components/VariableValueSelectors.js.map

@@ -1 +1 @@
-{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\nimport { selectors } from '@grafana/e2e-selectors';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n  layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n      ))}\n    </>\n  );\n}\n\ninterface VariableSelectProps {\n  layout?: ControlsLayout;\n  variable: SceneVariable;\n  /** To override hide from VariableValueSelectByName  */\n  showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n  const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n  if (state.hide === VariableHide.hideVariable && !showAlways) {\n    return null;\n  }\n\n  if (layout === 'vertical') {\n    return (\n      <div className={verticalContainer} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n        <VariableLabel variable={variable} layout={layout} />\n        <variable.Component model={variable} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerStyle} data-testid={selectors.pages.Dashboard.SubMenu.submenuItem}>\n      <VariableLabel variable={variable} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n  const { state } = variable;\n\n  if (variable.state.hide === VariableHide.hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label ?? state.name;\n\n  return (\n    <ControlsLabel\n      htmlFor={elementId}\n      isLoading={state.loading}\n      onCancel={() => variable.onCancel?.()}\n      label={labelOrName}\n      error={state.error}\n      layout={layout}\n      description={state.description ?? undefined}\n    />\n  );\n}\n\nconst containerStyle = css({ display: 'flex' });\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}
+{"version":3,"file":"VariableValueSelectors.js","sources":["../../../../src/variables/components/VariableValueSelectors.tsx"],"sourcesContent":["import React from 'react';\n\nimport { VariableHide } from '@grafana/data';\n\nimport { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase';\nimport { sceneGraph } from '../../core/sceneGraph';\nimport { ControlsLayout, SceneComponentProps, SceneObjectState } from '../../core/types';\nimport { SceneVariable, SceneVariableState } from '../types';\nimport { ControlsLabel } from '../../utils/ControlsLabel';\nimport { css } from '@emotion/css';\n\nexport interface VariableValueSelectorsState extends SceneObjectState {\n  layout?: ControlsLayout;\n}\n\nexport class VariableValueSelectors extends SceneObjectBase<VariableValueSelectorsState> {\n  public static Component = VariableValueSelectorsRenderer;\n}\n\nfunction VariableValueSelectorsRenderer({ model }: SceneComponentProps<VariableValueSelectors>) {\n  const variables = sceneGraph.getVariables(model)!.useState();\n\n  return (\n    <>\n      {variables.variables.map((variable) => (\n        <VariableValueSelectWrapper key={variable.state.key} variable={variable} layout={model.state.layout} />\n      ))}\n    </>\n  );\n}\n\ninterface VariableSelectProps {\n  layout?: ControlsLayout;\n  variable: SceneVariable;\n  /** To override hide from VariableValueSelectByName  */\n  showAlways?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways }: VariableSelectProps) {\n  const state = useSceneObjectState<SceneVariableState>(variable, { shouldActivateOrKeepAlive: true });\n\n  if (state.hide === VariableHide.hideVariable && !showAlways) {\n    return null;\n  }\n\n  if (layout === 'vertical') {\n    return (\n      <div className={verticalContainer}>\n        <VariableLabel variable={variable} layout={layout} />\n        <variable.Component model={variable} />\n      </div>\n    );\n  }\n\n  return (\n    <div className={containerStyle}>\n      <VariableLabel variable={variable} />\n      <variable.Component model={variable} />\n    </div>\n  );\n}\n\nfunction VariableLabel({ variable, layout }: VariableSelectProps) {\n  const { state } = variable;\n\n  if (variable.state.hide === VariableHide.hideLabel) {\n    return null;\n  }\n\n  const elementId = `var-${state.key}`;\n  const labelOrName = state.label ?? state.name;\n\n  return (\n    <ControlsLabel\n      htmlFor={elementId}\n      isLoading={state.loading}\n      onCancel={() => variable.onCancel?.()}\n      label={labelOrName}\n      error={state.error}\n      layout={layout}\n      description={state.description ?? undefined}\n    />\n  );\n}\n\nconst containerStyle = css({ display: 'flex' });\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}