@grafana/scenes 4.12.0--canary.702.8784713837.0 → 4.12.1--canary.648.8797444172.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.
- package/CHANGELOG.md +12 -0
- package/dist/esm/components/VizPanel/VizPanelMenu.js +3 -1
- package/dist/esm/components/VizPanel/VizPanelMenu.js.map +1 -1
- package/dist/esm/components/layout/grid/SceneGridRow.js +3 -1
- package/dist/esm/components/layout/grid/SceneGridRow.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelect.js +3 -0
- package/dist/esm/variables/components/VariableValueSelect.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelectors.js +5 -2
- package/dist/esm/variables/components/VariableValueSelectors.js.map +1 -1
- package/dist/index.js +10 -4
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v4.12.0 (Tue Apr 23 2024)
|
|
2
|
+
|
|
3
|
+
#### 🚀 Enhancement
|
|
4
|
+
|
|
5
|
+
- VizPanel: Fixes issue updating instanceState [#702](https://github.com/grafana/scenes/pull/702) ([@torkelo](https://github.com/torkelo))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Torkel Ödegaard ([@torkelo](https://github.com/torkelo))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v4.11.3 (Mon Apr 22 2024)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -1,6 +1,7 @@
|
|
|
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';
|
|
4
5
|
|
|
5
6
|
class VizPanelMenu extends SceneObjectBase {
|
|
6
7
|
addItem(item) {
|
|
@@ -34,7 +35,8 @@ function VizPanelMenuRenderer({ model }) {
|
|
|
34
35
|
childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
|
|
35
36
|
url: item.href,
|
|
36
37
|
onClick: item.onClick,
|
|
37
|
-
shortcut: item.shortcut
|
|
38
|
+
shortcut: item.shortcut,
|
|
39
|
+
testId: selectors.components.Panels.Panel.menuItems(item.text)
|
|
38
40
|
})
|
|
39
41
|
);
|
|
40
42
|
};
|
|
@@ -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';\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":"
|
|
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;;;;"}
|
|
@@ -5,6 +5,7 @@ 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';
|
|
8
9
|
|
|
9
10
|
var __defProp = Object.defineProperty;
|
|
10
11
|
var __defProps = Object.defineProperties;
|
|
@@ -78,7 +79,8 @@ function SceneGridRowRenderer({ model }) {
|
|
|
78
79
|
}, /* @__PURE__ */ React.createElement("button", {
|
|
79
80
|
onClick: model.onCollapseToggle,
|
|
80
81
|
className: styles.rowTitleButton,
|
|
81
|
-
"aria-label": isCollapsed ? "Expand row" : "Collapse row"
|
|
82
|
+
"aria-label": isCollapsed ? "Expand row" : "Collapse row",
|
|
83
|
+
"data-testid": selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
|
|
82
84
|
}, isCollapsible && /* @__PURE__ */ React.createElement(Icon, {
|
|
83
85
|
name: isCollapsed ? "angle-right" : "angle-down"
|
|
84
86
|
}), /* @__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';\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
|
+
{"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,6 +1,7 @@
|
|
|
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';
|
|
4
5
|
|
|
5
6
|
function VariableValueSelect({ model }) {
|
|
6
7
|
const { value, key } = model.useState();
|
|
@@ -19,6 +20,7 @@ function VariableValueSelect({ model }) {
|
|
|
19
20
|
tabSelectsValue: false,
|
|
20
21
|
onInputChange,
|
|
21
22
|
options: model.getOptionsForSelect(),
|
|
23
|
+
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
|
|
22
24
|
onChange: (newValue) => {
|
|
23
25
|
model.changeValueTo(newValue.value, newValue.label);
|
|
24
26
|
}
|
|
@@ -55,6 +57,7 @@ function VariableValueSelectMulti({ model }) {
|
|
|
55
57
|
onBlur: () => {
|
|
56
58
|
model.changeValueTo(uncommittedValue);
|
|
57
59
|
},
|
|
60
|
+
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
|
|
58
61
|
onChange: (newValue, action) => {
|
|
59
62
|
if (action.action === "clear" && noValueOnClear) {
|
|
60
63
|
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';\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":"
|
|
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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"}
|
|
@@ -4,6 +4,7 @@ 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';
|
|
7
8
|
|
|
8
9
|
class VariableValueSelectors extends SceneObjectBase {
|
|
9
10
|
}
|
|
@@ -23,7 +24,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
23
24
|
}
|
|
24
25
|
if (layout === "vertical") {
|
|
25
26
|
return /* @__PURE__ */ React.createElement("div", {
|
|
26
|
-
className: verticalContainer
|
|
27
|
+
className: verticalContainer,
|
|
28
|
+
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
|
|
27
29
|
}, /* @__PURE__ */ React.createElement(VariableLabel, {
|
|
28
30
|
variable,
|
|
29
31
|
layout
|
|
@@ -32,7 +34,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
32
34
|
}));
|
|
33
35
|
}
|
|
34
36
|
return /* @__PURE__ */ React.createElement("div", {
|
|
35
|
-
className: containerStyle
|
|
37
|
+
className: containerStyle,
|
|
38
|
+
"data-testid": selectors.pages.Dashboard.SubMenu.submenuItem
|
|
36
39
|
}, /* @__PURE__ */ React.createElement(VariableLabel, {
|
|
37
40
|
variable
|
|
38
41
|
}), /* @__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';\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":"
|
|
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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"}
|
package/dist/index.js
CHANGED
|
@@ -6012,7 +6012,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
6012
6012
|
}
|
|
6013
6013
|
if (layout === "vertical") {
|
|
6014
6014
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
6015
|
-
className: verticalContainer
|
|
6015
|
+
className: verticalContainer,
|
|
6016
|
+
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
|
|
6016
6017
|
}, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
|
|
6017
6018
|
variable,
|
|
6018
6019
|
layout
|
|
@@ -6021,7 +6022,8 @@ function VariableValueSelectWrapper({ variable, layout, showAlways }) {
|
|
|
6021
6022
|
}));
|
|
6022
6023
|
}
|
|
6023
6024
|
return /* @__PURE__ */ React__default["default"].createElement("div", {
|
|
6024
|
-
className: containerStyle
|
|
6025
|
+
className: containerStyle,
|
|
6026
|
+
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItem
|
|
6025
6027
|
}, /* @__PURE__ */ React__default["default"].createElement(VariableLabel, {
|
|
6026
6028
|
variable
|
|
6027
6029
|
}), /* @__PURE__ */ React__default["default"].createElement(variable.Component, {
|
|
@@ -6356,6 +6358,7 @@ function VariableValueSelect({ model }) {
|
|
|
6356
6358
|
tabSelectsValue: false,
|
|
6357
6359
|
onInputChange,
|
|
6358
6360
|
options: model.getOptionsForSelect(),
|
|
6361
|
+
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${value}`),
|
|
6359
6362
|
onChange: (newValue) => {
|
|
6360
6363
|
model.changeValueTo(newValue.value, newValue.label);
|
|
6361
6364
|
}
|
|
@@ -6392,6 +6395,7 @@ function VariableValueSelectMulti({ model }) {
|
|
|
6392
6395
|
onBlur: () => {
|
|
6393
6396
|
model.changeValueTo(uncommittedValue);
|
|
6394
6397
|
},
|
|
6398
|
+
"data-testid": e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemValueDropDownValueLinkTexts(`${uncommittedValue}`),
|
|
6395
6399
|
onChange: (newValue, action) => {
|
|
6396
6400
|
if (action.action === "clear" && noValueOnClear) {
|
|
6397
6401
|
model.changeValueTo([]);
|
|
@@ -7599,7 +7603,8 @@ function VizPanelMenuRenderer({ model }) {
|
|
|
7599
7603
|
childItems: item.subMenu ? renderItems(item.subMenu) : void 0,
|
|
7600
7604
|
url: item.href,
|
|
7601
7605
|
onClick: item.onClick,
|
|
7602
|
-
shortcut: item.shortcut
|
|
7606
|
+
shortcut: item.shortcut,
|
|
7607
|
+
testId: e2eSelectors.selectors.components.Panels.Panel.menuItems(item.text)
|
|
7603
7608
|
})
|
|
7604
7609
|
);
|
|
7605
7610
|
};
|
|
@@ -8225,7 +8230,8 @@ function SceneGridRowRenderer({ model }) {
|
|
|
8225
8230
|
}, /* @__PURE__ */ React__default["default"].createElement("button", {
|
|
8226
8231
|
onClick: model.onCollapseToggle,
|
|
8227
8232
|
className: styles.rowTitleButton,
|
|
8228
|
-
"aria-label": isCollapsed ? "Expand row" : "Collapse row"
|
|
8233
|
+
"aria-label": isCollapsed ? "Expand row" : "Collapse row",
|
|
8234
|
+
"data-testid": e2eSelectors.selectors.components.DashboardRow.title(sceneGraph.interpolate(model, title, void 0, "text"))
|
|
8229
8235
|
}, isCollapsible && /* @__PURE__ */ React__default["default"].createElement(ui.Icon, {
|
|
8230
8236
|
name: isCollapsed ? "angle-right" : "angle-down"
|
|
8231
8237
|
}), /* @__PURE__ */ React__default["default"].createElement("span", {
|