@grafana/scenes 4.6.1--canary.648.8661084256.0 → 4.7.0--canary.692.8683393495.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,7 +1,6 @@
1
1
  import React, { useEffect } from 'react';
2
2
  import { Menu } from '@grafana/ui';
3
3
  import { SceneObjectBase } from '../../core/SceneObjectBase.js';
4
- import { selectors } from '@grafana/e2e-selectors';
5
4
 
6
5
  class VizPanelMenu extends SceneObjectBase {
7
6
  addItem(item) {
@@ -35,8 +34,7 @@ function VizPanelMenuRenderer({ model }) {
35
34
  childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
36
35
  url: item.href,
37
36
  onClick: item.onClick,
38
- shortcut: item.shortcut,
39
- testId: selectors.components.Panels.Panel.menuItems(item.text)
37
+ shortcut: item.shortcut
40
38
  })
41
39
  );
42
40
  };
@@ -1 +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;;;;"}
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';\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;;;;"}
@@ -5,7 +5,6 @@ import { SceneObjectBase } from '../../../core/SceneObjectBase.js';
5
5
  import { SceneGridLayout } from './SceneGridLayout.js';
6
6
  import { GRID_COLUMN_COUNT } from './constants.js';
7
7
  import { sceneGraph } from '../../../core/sceneGraph/index.js';
8
- import { selectors } from '@grafana/e2e-selectors';
9
8
 
10
9
  var __defProp = Object.defineProperty;
11
10
  var __defProps = Object.defineProperties;
@@ -79,8 +78,7 @@ function SceneGridRowRenderer({ model }) {
79
78
  }, /* @__PURE__ */ React.createElement("button", {
80
79
  onClick: model.onCollapseToggle,
81
80
  className: styles.rowTitleButton,
82
- "aria-label": isCollapsed ? "Expand row" : "Collapse row",
83
- "data-testid": selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
81
+ "aria-label": isCollapsed ? "Expand row" : "Collapse row"
84
82
  }, isCollapsible && /* @__PURE__ */ React.createElement(Icon, {
85
83
  name: isCollapsed ? "angle-right" : "angle-down"
86
84
  }), /* @__PURE__ */ React.createElement("span", {
@@ -1 +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":"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"}
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';\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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"}
@@ -1,4 +1,4 @@
1
- import React, { useEffect } from 'react';
1
+ import React, { useState, useEffect } from 'react';
2
2
 
3
3
  var __defProp = Object.defineProperty;
4
4
  var __defProps = Object.defineProperties;
@@ -35,12 +35,13 @@ function SceneComponentWrapperWithoutMemo(_a) {
35
35
  var _b = _a, { model } = _b, otherProps = __objRest(_b, ["model"]);
36
36
  var _a2;
37
37
  const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
38
- const [activated, setActivated] = React.useState(false);
38
+ const [_, setValue] = useState(0);
39
39
  useEffect(() => {
40
- setActivated(true);
41
- return model.activate();
40
+ const unsub = model.activate();
41
+ setValue((prevState) => prevState + 1);
42
+ return unsub;
42
43
  }, [model]);
43
- if (!activated) {
44
+ if (!model.isActive) {
44
45
  return null;
45
46
  }
46
47
  return /* @__PURE__ */ React.createElement(Component, __spreadProps(__spreadValues({}, otherProps), {
@@ -1 +1 @@
1
- {"version":3,"file":"SceneComponentWrapper.js","sources":["../../../src/core/SceneComponentWrapper.tsx"],"sourcesContent":["import React, { useEffect } from 'react';\n\nimport { SceneComponentProps, SceneObject } from './types';\n\nfunction SceneComponentWrapperWithoutMemo<T extends SceneObject>({ model, ...otherProps }: SceneComponentProps<T>) {\n const Component = (model as any).constructor['Component'] ?? EmptyRenderer;\n const [activated, setActivated] = React.useState(false);\n\n useEffect(() => {\n setActivated(true);\n return model.activate();\n }, [model]);\n\n // By not rendering the component until the model is actiavted we make sure that parent models get activated before child models\n // Otherwise child models would be activated before parents as that is the order of React mount effects.\n // This also enables static logic to happen inside activate that can change state before the first render.\n if (!activated) {\n return null;\n }\n\n return <Component {...otherProps} model={model} />;\n}\n\nexport const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);\n\nfunction EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null {\n return null;\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAAS,iCAAwD,EAAkD,EAAA;AAAlD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAJnE,KAAA,EAAA,GAIiE,EAAY,EAAA,UAAA,GAAA,SAAA,CAAZ,IAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAJnE,EAAAA,IAAAA,GAAAA,CAAAA;AAKE,EAAA,MAAM,aAAaA,GAAA,GAAA,KAAA,CAAc,WAAY,CAAA,WAAA,CAAA,KAA1B,OAAAA,GAA0C,GAAA,aAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,KAAA,CAAM,SAAS,KAAK,CAAA,CAAA;AAEtD,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,YAAA,CAAa,IAAI,CAAA,CAAA;AACjB,IAAA,OAAO,MAAM,QAAS,EAAA,CAAA;AAAA,GACxB,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAKV,EAAA,IAAI,CAAC,SAAW,EAAA;AACd,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4CAAc,UAAd,CAAA,EAAA;AAAA,IAA0B,KAAA;AAAA,GAAc,CAAA,CAAA,CAAA;AAClD,CAAA;AAEa,MAAA,qBAAA,GAAwB,KAAM,CAAA,IAAA,CAAK,gCAAgC,EAAA;AAEhF,SAAS,cAAiB,CAAsD,EAAA;AAC9E,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
1
+ {"version":3,"file":"SceneComponentWrapper.js","sources":["../../../src/core/SceneComponentWrapper.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\n\nimport { SceneComponentProps, SceneObject } from './types';\n\nfunction SceneComponentWrapperWithoutMemo<T extends SceneObject>({ model, ...otherProps }: SceneComponentProps<T>) {\n const Component = (model as any).constructor['Component'] ?? EmptyRenderer;\n const [_, setValue] = useState(0);\n\n useEffect(() => {\n const unsub = model.activate();\n setValue((prevState) => prevState + 1);\n return unsub;\n }, [model]);\n\n // By not rendering the component until the model is actiavted we make sure that parent models get activated before child models\n // Otherwise child models would be activated before parents as that is the order of React mount effects.\n // This also enables static logic to happen inside activate that can change state before the first render.\n if (!model.isActive) {\n return null;\n }\n\n return <Component {...otherProps} model={model} />;\n}\n\nexport const SceneComponentWrapper = React.memo(SceneComponentWrapperWithoutMemo);\n\nfunction EmptyRenderer<T>(_: SceneComponentProps<T>): React.ReactElement | null {\n return null;\n}\n"],"names":["_a"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAIA,SAAS,iCAAwD,EAAkD,EAAA;AAAlD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAJnE,KAAA,EAAA,GAIiE,EAAY,EAAA,UAAA,GAAA,SAAA,CAAZ,IAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAJnE,EAAAA,IAAAA,GAAAA,CAAAA;AAKE,EAAA,MAAM,aAAaA,GAAA,GAAA,KAAA,CAAc,WAAY,CAAA,WAAA,CAAA,KAA1B,OAAAA,GAA0C,GAAA,aAAA,CAAA;AAC7D,EAAA,MAAM,CAAC,CAAA,EAAG,QAAQ,CAAA,GAAI,SAAS,CAAC,CAAA,CAAA;AAEhC,EAAA,SAAA,CAAU,MAAM;AACd,IAAM,MAAA,KAAA,GAAQ,MAAM,QAAS,EAAA,CAAA;AAC7B,IAAS,QAAA,CAAA,CAAC,SAAc,KAAA,SAAA,GAAY,CAAC,CAAA,CAAA;AACrC,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,KAAK,CAAC,CAAA,CAAA;AAKV,EAAI,IAAA,CAAC,MAAM,QAAU,EAAA;AACnB,IAAO,OAAA,IAAA,CAAA;AAAA,GACT;AAEA,EAAO,uBAAA,KAAA,CAAA,aAAA,CAAC,4CAAc,UAAd,CAAA,EAAA;AAAA,IAA0B,KAAA;AAAA,GAAc,CAAA,CAAA,CAAA;AAClD,CAAA;AAEa,MAAA,qBAAA,GAAwB,KAAM,CAAA,IAAA,CAAK,gCAAgC,EAAA;AAEhF,SAAS,cAAiB,CAAsD,EAAA;AAC9E,EAAO,OAAA,IAAA,CAAA;AACT;;;;"}
@@ -1,7 +1,6 @@
1
1
  import { isArray } from 'lodash';
2
2
  import React, { useMemo, useState, useEffect } from 'react';
3
3
  import { Select, MultiSelect } from '@grafana/ui';
4
- import { selectors } from '@grafana/e2e-selectors';
5
4
 
6
5
  function VariableValueSelect({ model }) {
7
6
  const { value, key } = model.useState();
@@ -20,7 +19,6 @@ function VariableValueSelect({ model }) {
20
19
  tabSelectsValue: false,
21
20
  onInputChange,
22
21
  options: model.getOptionsForSelect(),
23
- "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
24
22
  onChange: (newValue) => {
25
23
  model.changeValueTo(newValue.value, newValue.label);
26
24
  }
@@ -57,7 +55,6 @@ function VariableValueSelectMulti({ model }) {
57
55
  onBlur: () => {
58
56
  model.changeValueTo(uncommittedValue);
59
57
  },
60
- "data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
61
58
  onChange: (newValue, action) => {
62
59
  if (action.action === "clear" && noValueOnClear) {
63
60
  model.changeValueTo([]);
@@ -1 +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":"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"}
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';\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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"}
@@ -4,7 +4,6 @@ import { SceneObjectBase, useSceneObjectState } from '../../core/SceneObjectBase
4
4
  import { sceneGraph } from '../../core/sceneGraph/index.js';
5
5
  import { ControlsLabel } from '../../utils/ControlsLabel.js';
6
6
  import { css } from '@emotion/css';
7
- import { selectors } from '@grafana/e2e-selectors';
8
7
 
9
8
  class VariableValueSelectors extends SceneObjectBase {
10
9
  }
@@ -24,8 +23,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
24
23
  }
25
24
  if (layout === "vertical") {
26
25
  return /* @__PURE__ */ React.createElement("div", {
27
- className: verticalContainer,
28
- "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
26
+ className: verticalContainer
29
27
  }, /* @__PURE__ */ React.createElement(VariableLabel, {
30
28
  variable,
31
29
  layout
@@ -34,8 +32,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
34
32
  }));
35
33
  }
36
34
  return /* @__PURE__ */ React.createElement("div", {
37
- className: containerStyle,
38
- "data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
35
+ className: containerStyle
39
36
  }, /* @__PURE__ */ React.createElement(VariableLabel, {
40
37
  variable
41
38
  }), /* @__PURE__ */ React.createElement(variable.Component, {
@@ -1 +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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"}
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';\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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"}
package/dist/index.js CHANGED
@@ -161,12 +161,13 @@ function SceneComponentWrapperWithoutMemo(_a) {
161
161
  var _b = _a, { model } = _b, otherProps = __objRest$3(_b, ["model"]);
162
162
  var _a2;
163
163
  const Component = (_a2 = model.constructor["Component"]) != null ? _a2 : EmptyRenderer;
164
- const [activated, setActivated] = React__default["default"].useState(false);
164
+ const [_, setValue] = React.useState(0);
165
165
  React.useEffect(() => {
166
- setActivated(true);
167
- return model.activate();
166
+ const unsub = model.activate();
167
+ setValue((prevState) => prevState + 1);
168
+ return unsub;
168
169
  }, [model]);
169
- if (!activated) {
170
+ if (!model.isActive) {
170
171
  return null;
171
172
  }
172
173
  return /* @__PURE__ */ React__default["default"].createElement(Component, __spreadProps$r(__spreadValues$I({}, otherProps), {
@@ -2856,7 +2857,6 @@ function VariableValueSelect({ model }) {
2856
2857
  tabSelectsValue: false,
2857
2858
  onInputChange,
2858
2859
  options: model.getOptionsForSelect(),
2859
- "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
2860
2860
  onChange: (newValue) => {
2861
2861
  model.changeValueTo(newValue.value, newValue.label);
2862
2862
  }
@@ -2893,7 +2893,6 @@ function VariableValueSelectMulti({ model }) {
2893
2893
  onBlur: () => {
2894
2894
  model.changeValueTo(uncommittedValue);
2895
2895
  },
2896
- "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
2897
2896
  onChange: (newValue, action) => {
2898
2897
  if (action.action === "clear" && noValueOnClear) {
2899
2898
  model.changeValueTo([]);
@@ -5992,8 +5991,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
5992
5991
  }
5993
5992
  if (layout === "vertical") {
5994
5993
  return /* @__PURE__ */ React__default["default"].createElement("div", {
5995
- className: verticalContainer,
5996
- "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
5994
+ className: verticalContainer
5997
5995
  }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
5998
5996
  variable,
5999
5997
  layout
@@ -6002,8 +6000,7 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
6002
6000
  }));
6003
6001
  }
6004
6002
  return /* @__PURE__ */ React__default["default"].createElement("div", {
6005
- className: containerStyle,
6006
- "data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
6003
+ className: containerStyle
6007
6004
  }, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
6008
6005
  variable
6009
6006
  }), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
@@ -7503,8 +7500,7 @@ function VizPanelMenuRenderer({ model }) {
7503
7500
  childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
7504
7501
  url: item.href,
7505
7502
  onClick: item.onClick,
7506
- shortcut: item.shortcut,
7507
- testId: e2eSelectors.selectors.components.Panels.Panel.menuItems(item.text)
7503
+ shortcut: item.shortcut
7508
7504
  })
7509
7505
  );
7510
7506
  };
@@ -8130,8 +8126,7 @@ function SceneGridRowRenderer({ model }) {
8130
8126
  }, /* @__PURE__ */ React__default["default"].createElement("button", {
8131
8127
  onClick: model.onCollapseToggle,
8132
8128
  className: styles.rowTitleButton,
8133
- "aria-label": isCollapsed ? "Expand row" : "Collapse row",
8134
- "data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
8129
+ "aria-label": isCollapsed ? "Expand row" : "Collapse row"
8135
8130
  }, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
8136
8131
  name: isCollapsed ? "angle-right" : "angle-down"
8137
8132
  }), /* @__PURE__ */ React__default["default"].createElement("span", {