@grafana/scenes 6.7.0--canary.1086.14257790935.0 → 6.7.0--canary.1091.14350229100.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/utils/ControlsLabel.js +12 -59
- package/dist/esm/utils/ControlsLabel.js.map +1 -1
- package/dist/esm/variables/components/VariableValueSelectors.js +1 -6
- package/dist/esm/variables/components/VariableValueSelectors.js.map +1 -1
- package/dist/esm/variables/groupby/GroupByVariableUrlSyncHandler.js +9 -0
- package/dist/esm/variables/groupby/GroupByVariableUrlSyncHandler.js.map +1 -1
- package/dist/index.d.ts +4 -4
- package/dist/index.js +22 -64
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,15 @@
|
|
|
1
|
+
# v6.6.3 (Fri Apr 04 2025)
|
|
2
|
+
|
|
3
|
+
#### 🐛 Bug Fix
|
|
4
|
+
|
|
5
|
+
- GroupByVariable: Add browser history action support for GroupBy var [#1087](https://github.com/grafana/scenes/pull/1087) ([@mdvictor](https://github.com/mdvictor))
|
|
6
|
+
|
|
7
|
+
#### Authors: 1
|
|
8
|
+
|
|
9
|
+
- Victor Marin ([@mdvictor](https://github.com/mdvictor))
|
|
10
|
+
|
|
11
|
+
---
|
|
12
|
+
|
|
1
13
|
# v6.6.2 (Wed Apr 02 2025)
|
|
2
14
|
|
|
3
15
|
#### 🐛 Bug Fix
|
|
@@ -4,24 +4,11 @@ import { selectors } from '@grafana/e2e-selectors';
|
|
|
4
4
|
import { css, cx } from '@emotion/css';
|
|
5
5
|
import { LoadingIndicator } from './LoadingIndicator.js';
|
|
6
6
|
|
|
7
|
-
function ControlsLabel({
|
|
8
|
-
htmlFor,
|
|
9
|
-
label,
|
|
10
|
-
description,
|
|
11
|
-
isLoading,
|
|
12
|
-
error,
|
|
13
|
-
icon,
|
|
14
|
-
layout,
|
|
15
|
-
isSelectable,
|
|
16
|
-
isSelected,
|
|
17
|
-
onSelect,
|
|
18
|
-
onCancel,
|
|
19
|
-
onRemove
|
|
20
|
-
}) {
|
|
7
|
+
function ControlsLabel(props) {
|
|
21
8
|
const styles = useStyles2(getStyles);
|
|
22
9
|
const theme = useTheme2();
|
|
23
|
-
const isVertical = layout === "vertical";
|
|
24
|
-
const loadingIndicator = Boolean(isLoading) ? /* @__PURE__ */ React.createElement(
|
|
10
|
+
const isVertical = props.layout === "vertical";
|
|
11
|
+
const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React.createElement(
|
|
25
12
|
"div",
|
|
26
13
|
{
|
|
27
14
|
style: { marginLeft: theme.spacing(1), marginTop: "-1px" },
|
|
@@ -31,62 +18,28 @@ function ControlsLabel({
|
|
|
31
18
|
LoadingIndicator,
|
|
32
19
|
{
|
|
33
20
|
onCancel: (e) => {
|
|
21
|
+
var _a;
|
|
34
22
|
e.preventDefault();
|
|
35
23
|
e.stopPropagation();
|
|
36
|
-
onCancel == null ? void 0 :
|
|
24
|
+
(_a = props.onCancel) == null ? void 0 : _a.call(props);
|
|
37
25
|
}
|
|
38
26
|
}
|
|
39
27
|
)
|
|
40
28
|
) : null;
|
|
41
29
|
let errorIndicator = null;
|
|
42
|
-
if (error) {
|
|
43
|
-
errorIndicator = /* @__PURE__ */ React.createElement(Tooltip, { content: error, placement: "bottom" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.errorIcon, name: "exclamation-triangle" }));
|
|
30
|
+
if (props.error) {
|
|
31
|
+
errorIndicator = /* @__PURE__ */ React.createElement(Tooltip, { content: props.error, placement: "bottom" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.errorIcon, name: "exclamation-triangle" }));
|
|
44
32
|
}
|
|
45
33
|
let descriptionIndicator = null;
|
|
46
|
-
if (description) {
|
|
47
|
-
descriptionIndicator = /* @__PURE__ */ React.createElement(Tooltip, { content: description, placement: isVertical ? "top" : "bottom" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.normalIcon, name: "info-circle" }));
|
|
34
|
+
if (props.description) {
|
|
35
|
+
descriptionIndicator = /* @__PURE__ */ React.createElement(Tooltip, { content: props.description, placement: isVertical ? "top" : "bottom" }, /* @__PURE__ */ React.createElement(Icon, { className: styles.normalIcon, name: "info-circle" }));
|
|
48
36
|
}
|
|
49
|
-
const testId = typeof label === "string" ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(label) : "";
|
|
37
|
+
const testId = typeof props.label === "string" ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : "";
|
|
50
38
|
let labelElement;
|
|
51
39
|
if (isVertical) {
|
|
52
|
-
labelElement = /* @__PURE__ */ React.createElement(
|
|
53
|
-
"label",
|
|
54
|
-
{
|
|
55
|
-
className: cx(
|
|
56
|
-
styles.verticalLabel,
|
|
57
|
-
isSelected && "dashboard-selected-element",
|
|
58
|
-
isSelectable && !isSelected && "dashboard-selectable-element"
|
|
59
|
-
),
|
|
60
|
-
"data-testid": testId,
|
|
61
|
-
htmlFor,
|
|
62
|
-
onPointerDown: onSelect
|
|
63
|
-
},
|
|
64
|
-
label,
|
|
65
|
-
descriptionIndicator,
|
|
66
|
-
errorIndicator,
|
|
67
|
-
icon && /* @__PURE__ */ React.createElement(Icon, { name: icon, className: styles.normalIcon }),
|
|
68
|
-
loadingIndicator,
|
|
69
|
-
onRemove && /* @__PURE__ */ React.createElement(IconButton, { variant: "secondary", size: "xs", name: "times", onClick: onRemove, tooltip: "Remove" })
|
|
70
|
-
);
|
|
40
|
+
labelElement = /* @__PURE__ */ React.createElement("label", { className: cx(styles.verticalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, props.label, descriptionIndicator, errorIndicator, props.icon && /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: styles.normalIcon }), loadingIndicator, props.onRemove && /* @__PURE__ */ React.createElement(IconButton, { variant: "secondary", size: "xs", name: "times", onClick: props.onRemove, tooltip: "Remove" }), props.suffix);
|
|
71
41
|
} else {
|
|
72
|
-
labelElement = /* @__PURE__ */ React.createElement(
|
|
73
|
-
"label",
|
|
74
|
-
{
|
|
75
|
-
className: cx(
|
|
76
|
-
styles.horizontalLabel,
|
|
77
|
-
isSelected && "dashboard-selected-element",
|
|
78
|
-
isSelectable && !isSelected && "dashboard-selectable-element"
|
|
79
|
-
),
|
|
80
|
-
"data-testid": testId,
|
|
81
|
-
htmlFor,
|
|
82
|
-
onPointerDown: onSelect
|
|
83
|
-
},
|
|
84
|
-
errorIndicator,
|
|
85
|
-
icon && /* @__PURE__ */ React.createElement(Icon, { name: icon, className: styles.normalIcon }),
|
|
86
|
-
label,
|
|
87
|
-
descriptionIndicator,
|
|
88
|
-
loadingIndicator
|
|
89
|
-
);
|
|
42
|
+
labelElement = /* @__PURE__ */ React.createElement("label", { className: cx(styles.horizontalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, errorIndicator, props.icon && /* @__PURE__ */ React.createElement(Icon, { name: props.icon, className: styles.normalIcon }), props.label, descriptionIndicator, loadingIndicator, props.suffix);
|
|
90
43
|
}
|
|
91
44
|
return labelElement;
|
|
92
45
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ControlsLabel.js","sources":["../../../src/utils/ControlsLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, IconName } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { ControlsLayout } from '../core/types';\n\ninterface ControlsLabelProps {\n label: string;\n htmlFor?: string;\n description?: string;\n isLoading?: boolean;\n error?: string;\n icon?: IconName;\n layout?: ControlsLayout;\n
|
|
1
|
+
{"version":3,"file":"ControlsLabel.js","sources":["../../../src/utils/ControlsLabel.tsx"],"sourcesContent":["import React from 'react';\nimport { Icon, IconButton, Tooltip, useStyles2, useTheme2 } from '@grafana/ui';\nimport { selectors } from '@grafana/e2e-selectors';\nimport { GrafanaTheme2, IconName } from '@grafana/data';\nimport { css, cx } from '@emotion/css';\nimport { LoadingIndicator } from './LoadingIndicator';\nimport { ControlsLayout } from '../core/types';\n\ninterface ControlsLabelProps {\n label: string;\n htmlFor?: string;\n description?: string;\n isLoading?: boolean;\n error?: string;\n icon?: IconName;\n layout?: ControlsLayout;\n prefix?: React.ReactNode;\n suffix?: React.ReactNode;\n className?: string;\n onCancel?: () => void;\n onRemove?: () => void;\n}\n\nexport function ControlsLabel(props: ControlsLabelProps) {\n const styles = useStyles2(getStyles);\n const theme = useTheme2();\n const isVertical = props.layout === 'vertical';\n\n const loadingIndicator = Boolean(props.isLoading) ? (\n <div\n style={{ marginLeft: theme.spacing(1), marginTop: '-1px' }}\n aria-label={selectors.components.LoadingIndicator.icon}\n >\n <LoadingIndicator\n onCancel={(e) => {\n e.preventDefault();\n e.stopPropagation();\n props.onCancel?.();\n }}\n />\n </div>\n ) : null;\n\n let errorIndicator = null;\n if (props.error) {\n errorIndicator = (\n <Tooltip content={props.error} placement={'bottom'}>\n <Icon className={styles.errorIcon} name=\"exclamation-triangle\" />\n </Tooltip>\n );\n }\n\n let descriptionIndicator = null;\n if (props.description) {\n descriptionIndicator = (\n <Tooltip content={props.description} placement={isVertical ? 'top' : 'bottom'}>\n <Icon className={styles.normalIcon} name=\"info-circle\" />\n </Tooltip>\n );\n }\n\n const testId =\n typeof props.label === 'string' ? selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : '';\n let labelElement: JSX.Element;\n\n // The vertical layout has different css class and order of elements (label always first)\n\n if (isVertical) {\n labelElement = (\n <label className={cx(styles.verticalLabel, props.className)} data-testid={testId} htmlFor={props.htmlFor}>\n {props.prefix}\n {props.label}\n {descriptionIndicator}\n {errorIndicator}\n {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n {loadingIndicator}\n {props.onRemove && (\n <IconButton variant=\"secondary\" size=\"xs\" name=\"times\" onClick={props.onRemove} tooltip={'Remove'} />\n )}\n {props.suffix}\n </label>\n );\n } else {\n labelElement = (\n <label className={cx(styles.horizontalLabel, props.className)} data-testid={testId} htmlFor={props.htmlFor}>\n {props.prefix}\n {errorIndicator}\n {props.icon && <Icon name={props.icon} className={styles.normalIcon} />}\n {props.label}\n {descriptionIndicator}\n {loadingIndicator}\n {props.suffix}\n </label>\n );\n }\n\n return labelElement;\n}\n\nconst getStyles = (theme: GrafanaTheme2) => ({\n horizontalLabel: css({\n background: theme.isDark ? theme.colors.background.primary : theme.colors.background.secondary,\n display: `flex`,\n alignItems: 'center',\n padding: theme.spacing(0, 1),\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.bodySmall.fontSize,\n height: theme.spacing(theme.components.height.md),\n lineHeight: theme.spacing(theme.components.height.md),\n borderRadius: `${theme.shape.radius.default} 0 0 ${theme.shape.radius.default}`,\n border: `1px solid ${theme.components.input.borderColor}`,\n position: 'relative',\n // To make the border line up with the input border\n right: -1,\n whiteSpace: 'nowrap',\n gap: theme.spacing(0.5),\n }),\n verticalLabel: css({\n display: `flex`,\n alignItems: 'center',\n fontWeight: theme.typography.fontWeightMedium,\n fontSize: theme.typography.bodySmall.fontSize,\n lineHeight: theme.typography.bodySmall.lineHeight,\n whiteSpace: 'nowrap',\n marginBottom: theme.spacing(0.5),\n gap: theme.spacing(1),\n }),\n errorIcon: css({\n color: theme.colors.error.text,\n }),\n normalIcon: css({\n color: theme.colors.text.secondary,\n }),\n});\n"],"names":[],"mappings":"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"}
|
|
@@ -5,7 +5,6 @@ import { sceneGraph } from '../../core/sceneGraph/index.js';
|
|
|
5
5
|
import { ControlsLabel } from '../../utils/ControlsLabel.js';
|
|
6
6
|
import { css } from '@emotion/css';
|
|
7
7
|
import { selectors } from '@grafana/e2e-selectors';
|
|
8
|
-
import { useElementSelection } from '@grafana/ui';
|
|
9
8
|
|
|
10
9
|
class VariableValueSelectors extends SceneObjectBase {
|
|
11
10
|
}
|
|
@@ -27,7 +26,6 @@ function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel })
|
|
|
27
26
|
function VariableLabel({ variable, layout, hideLabel }) {
|
|
28
27
|
var _a;
|
|
29
28
|
const { state } = variable;
|
|
30
|
-
const { isSelected, onSelect, isSelectable } = useElementSelection(`var-${variable.state.name}`);
|
|
31
29
|
if (variable.state.hide === VariableHide.hideLabel || hideLabel) {
|
|
32
30
|
return null;
|
|
33
31
|
}
|
|
@@ -45,10 +43,7 @@ function VariableLabel({ variable, layout, hideLabel }) {
|
|
|
45
43
|
label: labelOrName,
|
|
46
44
|
error: state.error,
|
|
47
45
|
layout,
|
|
48
|
-
description: (_a = state.description) != null ? _a : void 0
|
|
49
|
-
isSelected,
|
|
50
|
-
isSelectable,
|
|
51
|
-
onSelect
|
|
46
|
+
description: (_a = state.description) != null ? _a : void 0
|
|
52
47
|
}
|
|
53
48
|
);
|
|
54
49
|
}
|
|
@@ -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';\
|
|
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 /** To provide an option to hide the label in the variable value selector */\n hideLabel?: boolean;\n}\n\nexport function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel }: 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} hideLabel={hideLabel} />\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} hideLabel={hideLabel} />\n <variable.Component model={variable} />\n </div>\n );\n}\n\nfunction VariableLabel({ variable, layout, hideLabel }: VariableSelectProps) {\n const { state } = variable;\n\n if (variable.state.hide === VariableHide.hideLabel || 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({\n display: 'flex',\n // No border for second element (inputs) as label and input border is shared\n '> :nth-child(2)': css({\n borderTopLeftRadius: 0,\n borderBottomLeftRadius: 0,\n }),\n});\n\nconst verticalContainer = css({ display: 'flex', flexDirection: 'column' });\n"],"names":["_a"],"mappings":"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"}
|
|
@@ -3,6 +3,7 @@ import { toUrlCommaDelimitedString, unescapeUrlDelimiters } from '../utils.js';
|
|
|
3
3
|
class GroupByVariableUrlSyncHandler {
|
|
4
4
|
constructor(_sceneObject) {
|
|
5
5
|
this._sceneObject = _sceneObject;
|
|
6
|
+
this._nextChangeShouldAddHistoryStep = false;
|
|
6
7
|
}
|
|
7
8
|
getKey() {
|
|
8
9
|
return `var-${this._sceneObject.state.name}`;
|
|
@@ -29,6 +30,14 @@ class GroupByVariableUrlSyncHandler {
|
|
|
29
30
|
this._sceneObject.changeValueTo(values2, texts);
|
|
30
31
|
}
|
|
31
32
|
}
|
|
33
|
+
performBrowserHistoryAction(callback) {
|
|
34
|
+
this._nextChangeShouldAddHistoryStep = true;
|
|
35
|
+
callback();
|
|
36
|
+
this._nextChangeShouldAddHistoryStep = false;
|
|
37
|
+
}
|
|
38
|
+
shouldCreateHistoryStep(values) {
|
|
39
|
+
return this._nextChangeShouldAddHistoryStep;
|
|
40
|
+
}
|
|
32
41
|
}
|
|
33
42
|
function toUrlValues(values, texts) {
|
|
34
43
|
values = Array.isArray(values) ? values : [values];
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GroupByVariableUrlSyncHandler.js","sources":["../../../../src/variables/groupby/GroupByVariableUrlSyncHandler.ts"],"sourcesContent":["import { SceneObjectUrlSyncHandler, SceneObjectUrlValues } from '../../core/types';\nimport { GroupByVariable } from './GroupByVariable';\nimport { toUrlCommaDelimitedString, unescapeUrlDelimiters } from '../utils';\nimport { VariableValue } from '../types';\n\nexport class GroupByVariableUrlSyncHandler implements SceneObjectUrlSyncHandler {\n public constructor(private _sceneObject: GroupByVariable) {}\n\n private getKey(): string {\n return `var-${this._sceneObject.state.name}`;\n }\n\n public getKeys(): string[] {\n if (this._sceneObject.state.skipUrlSync) {\n return [];\n }\n\n return [this.getKey()];\n }\n\n public getUrlState(): SceneObjectUrlValues {\n if (this._sceneObject.state.skipUrlSync) {\n return {};\n }\n\n return { [this.getKey()]: toUrlValues(this._sceneObject.state.value, this._sceneObject.state.text) };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues): void {\n let urlValue = values[this.getKey()];\n\n if (urlValue != null) {\n /**\n * Initial URL Sync happens before scene objects are activated.\n * We need to skip validation in this case to make sure values set via URL are maintained.\n */\n if (!this._sceneObject.isActive) {\n this._sceneObject.skipNextValidation = true;\n }\n\n const { values, texts } = fromUrlValues(urlValue);\n\n this._sceneObject.changeValueTo(values, texts);\n }\n }\n}\n\nfunction toUrlValues(values: VariableValue, texts: VariableValue): string[] {\n values = Array.isArray(values) ? values : [values];\n texts = Array.isArray(texts) ? texts : [texts];\n\n return values.map((value, idx) => {\n if (value === undefined || value === null) {\n return '';\n }\n\n value = String(value);\n\n let text = texts[idx];\n text = text === undefined || text === null ? value : String(text);\n\n return toUrlCommaDelimitedString(value, text);\n });\n}\n\nfunction fromUrlValues(urlValues: string | string[]): { values: string[]; texts: string[] } {\n urlValues = Array.isArray(urlValues) ? urlValues : [urlValues];\n\n return urlValues.reduce<{ values: string[]; texts: string[] }>(\n (acc, urlValue) => {\n const [value, label] = (urlValue ?? '').split(',');\n\n acc.values.push(unescapeUrlDelimiters(value));\n acc.texts.push(unescapeUrlDelimiters(label ?? value));\n\n return acc;\n },\n {\n values: [],\n texts: [],\n }\n );\n}\n"],"names":["values"],"mappings":";;AAKO,MAAM,6BAAmE,CAAA;AAAA,EACvE,YAAoB,YAA+B,EAAA;AAA/B,IAAA,IAAA,CAAA,YAAA,GAAA,YAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"GroupByVariableUrlSyncHandler.js","sources":["../../../../src/variables/groupby/GroupByVariableUrlSyncHandler.ts"],"sourcesContent":["import { SceneObjectUrlSyncHandler, SceneObjectUrlValues } from '../../core/types';\nimport { GroupByVariable } from './GroupByVariable';\nimport { toUrlCommaDelimitedString, unescapeUrlDelimiters } from '../utils';\nimport { VariableValue } from '../types';\n\nexport class GroupByVariableUrlSyncHandler implements SceneObjectUrlSyncHandler {\n public constructor(private _sceneObject: GroupByVariable) {}\n\n protected _nextChangeShouldAddHistoryStep = false;\n\n private getKey(): string {\n return `var-${this._sceneObject.state.name}`;\n }\n\n public getKeys(): string[] {\n if (this._sceneObject.state.skipUrlSync) {\n return [];\n }\n\n return [this.getKey()];\n }\n\n public getUrlState(): SceneObjectUrlValues {\n if (this._sceneObject.state.skipUrlSync) {\n return {};\n }\n\n return { [this.getKey()]: toUrlValues(this._sceneObject.state.value, this._sceneObject.state.text) };\n }\n\n public updateFromUrl(values: SceneObjectUrlValues): void {\n let urlValue = values[this.getKey()];\n\n if (urlValue != null) {\n /**\n * Initial URL Sync happens before scene objects are activated.\n * We need to skip validation in this case to make sure values set via URL are maintained.\n */\n if (!this._sceneObject.isActive) {\n this._sceneObject.skipNextValidation = true;\n }\n\n const { values, texts } = fromUrlValues(urlValue);\n\n this._sceneObject.changeValueTo(values, texts);\n }\n }\n\n public performBrowserHistoryAction(callback: () => void) {\n this._nextChangeShouldAddHistoryStep = true;\n callback();\n this._nextChangeShouldAddHistoryStep = false;\n }\n\n public shouldCreateHistoryStep(values: SceneObjectUrlValues): boolean {\n return this._nextChangeShouldAddHistoryStep;\n }\n}\n\nfunction toUrlValues(values: VariableValue, texts: VariableValue): string[] {\n values = Array.isArray(values) ? values : [values];\n texts = Array.isArray(texts) ? texts : [texts];\n\n return values.map((value, idx) => {\n if (value === undefined || value === null) {\n return '';\n }\n\n value = String(value);\n\n let text = texts[idx];\n text = text === undefined || text === null ? value : String(text);\n\n return toUrlCommaDelimitedString(value, text);\n });\n}\n\nfunction fromUrlValues(urlValues: string | string[]): { values: string[]; texts: string[] } {\n urlValues = Array.isArray(urlValues) ? urlValues : [urlValues];\n\n return urlValues.reduce<{ values: string[]; texts: string[] }>(\n (acc, urlValue) => {\n const [value, label] = (urlValue ?? '').split(',');\n\n acc.values.push(unescapeUrlDelimiters(value));\n acc.texts.push(unescapeUrlDelimiters(label ?? value));\n\n return acc;\n },\n {\n values: [],\n texts: [],\n }\n );\n}\n"],"names":["values"],"mappings":"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"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2858,13 +2858,13 @@ interface ControlsLabelProps {
|
|
|
2858
2858
|
error?: string;
|
|
2859
2859
|
icon?: IconName;
|
|
2860
2860
|
layout?: ControlsLayout;
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2861
|
+
prefix?: React__default.ReactNode;
|
|
2862
|
+
suffix?: React__default.ReactNode;
|
|
2863
|
+
className?: string;
|
|
2864
2864
|
onCancel?: () => void;
|
|
2865
2865
|
onRemove?: () => void;
|
|
2866
2866
|
}
|
|
2867
|
-
declare function ControlsLabel(
|
|
2867
|
+
declare function ControlsLabel(props: ControlsLabelProps): JSX.Element;
|
|
2868
2868
|
|
|
2869
2869
|
declare function renderSelectForVariable(model: MultiValueVariable): React__default.JSX.Element;
|
|
2870
2870
|
|
package/dist/index.js
CHANGED
|
@@ -2933,6 +2933,7 @@ function renderSelectForVariable(model) {
|
|
|
2933
2933
|
class GroupByVariableUrlSyncHandler {
|
|
2934
2934
|
constructor(_sceneObject) {
|
|
2935
2935
|
this._sceneObject = _sceneObject;
|
|
2936
|
+
this._nextChangeShouldAddHistoryStep = false;
|
|
2936
2937
|
}
|
|
2937
2938
|
getKey() {
|
|
2938
2939
|
return `var-${this._sceneObject.state.name}`;
|
|
@@ -2959,6 +2960,14 @@ class GroupByVariableUrlSyncHandler {
|
|
|
2959
2960
|
this._sceneObject.changeValueTo(values2, texts);
|
|
2960
2961
|
}
|
|
2961
2962
|
}
|
|
2963
|
+
performBrowserHistoryAction(callback) {
|
|
2964
|
+
this._nextChangeShouldAddHistoryStep = true;
|
|
2965
|
+
callback();
|
|
2966
|
+
this._nextChangeShouldAddHistoryStep = false;
|
|
2967
|
+
}
|
|
2968
|
+
shouldCreateHistoryStep(values) {
|
|
2969
|
+
return this._nextChangeShouldAddHistoryStep;
|
|
2970
|
+
}
|
|
2962
2971
|
}
|
|
2963
2972
|
function toUrlValues(values, texts) {
|
|
2964
2973
|
values = Array.isArray(values) ? values : [values];
|
|
@@ -3349,24 +3358,11 @@ function LoadingIndicator(props) {
|
|
|
3349
3358
|
));
|
|
3350
3359
|
}
|
|
3351
3360
|
|
|
3352
|
-
function ControlsLabel({
|
|
3353
|
-
htmlFor,
|
|
3354
|
-
label,
|
|
3355
|
-
description,
|
|
3356
|
-
isLoading,
|
|
3357
|
-
error,
|
|
3358
|
-
icon,
|
|
3359
|
-
layout,
|
|
3360
|
-
isSelectable,
|
|
3361
|
-
isSelected,
|
|
3362
|
-
onSelect,
|
|
3363
|
-
onCancel,
|
|
3364
|
-
onRemove
|
|
3365
|
-
}) {
|
|
3361
|
+
function ControlsLabel(props) {
|
|
3366
3362
|
const styles = ui.useStyles2(getStyles$g);
|
|
3367
3363
|
const theme = ui.useTheme2();
|
|
3368
|
-
const isVertical = layout === "vertical";
|
|
3369
|
-
const loadingIndicator = Boolean(isLoading) ? /* @__PURE__ */ React__default.default.createElement(
|
|
3364
|
+
const isVertical = props.layout === "vertical";
|
|
3365
|
+
const loadingIndicator = Boolean(props.isLoading) ? /* @__PURE__ */ React__default.default.createElement(
|
|
3370
3366
|
"div",
|
|
3371
3367
|
{
|
|
3372
3368
|
style: { marginLeft: theme.spacing(1), marginTop: "-1px" },
|
|
@@ -3376,62 +3372,28 @@ function ControlsLabel({
|
|
|
3376
3372
|
LoadingIndicator,
|
|
3377
3373
|
{
|
|
3378
3374
|
onCancel: (e) => {
|
|
3375
|
+
var _a;
|
|
3379
3376
|
e.preventDefault();
|
|
3380
3377
|
e.stopPropagation();
|
|
3381
|
-
onCancel == null ? void 0 :
|
|
3378
|
+
(_a = props.onCancel) == null ? void 0 : _a.call(props);
|
|
3382
3379
|
}
|
|
3383
3380
|
}
|
|
3384
3381
|
)
|
|
3385
3382
|
) : null;
|
|
3386
3383
|
let errorIndicator = null;
|
|
3387
|
-
if (error) {
|
|
3388
|
-
errorIndicator = /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: error, placement: "bottom" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { className: styles.errorIcon, name: "exclamation-triangle" }));
|
|
3384
|
+
if (props.error) {
|
|
3385
|
+
errorIndicator = /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: props.error, placement: "bottom" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { className: styles.errorIcon, name: "exclamation-triangle" }));
|
|
3389
3386
|
}
|
|
3390
3387
|
let descriptionIndicator = null;
|
|
3391
|
-
if (description) {
|
|
3392
|
-
descriptionIndicator = /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: description, placement: isVertical ? "top" : "bottom" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { className: styles.normalIcon, name: "info-circle" }));
|
|
3388
|
+
if (props.description) {
|
|
3389
|
+
descriptionIndicator = /* @__PURE__ */ React__default.default.createElement(ui.Tooltip, { content: props.description, placement: isVertical ? "top" : "bottom" }, /* @__PURE__ */ React__default.default.createElement(ui.Icon, { className: styles.normalIcon, name: "info-circle" }));
|
|
3393
3390
|
}
|
|
3394
|
-
const testId = typeof label === "string" ? e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(label) : "";
|
|
3391
|
+
const testId = typeof props.label === "string" ? e2eSelectors.selectors.pages.Dashboard.SubMenu.submenuItemLabels(props.label) : "";
|
|
3395
3392
|
let labelElement;
|
|
3396
3393
|
if (isVertical) {
|
|
3397
|
-
labelElement = /* @__PURE__ */ React__default.default.createElement(
|
|
3398
|
-
"label",
|
|
3399
|
-
{
|
|
3400
|
-
className: css.cx(
|
|
3401
|
-
styles.verticalLabel,
|
|
3402
|
-
isSelected && "dashboard-selected-element",
|
|
3403
|
-
isSelectable && !isSelected && "dashboard-selectable-element"
|
|
3404
|
-
),
|
|
3405
|
-
"data-testid": testId,
|
|
3406
|
-
htmlFor,
|
|
3407
|
-
onPointerDown: onSelect
|
|
3408
|
-
},
|
|
3409
|
-
label,
|
|
3410
|
-
descriptionIndicator,
|
|
3411
|
-
errorIndicator,
|
|
3412
|
-
icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: icon, className: styles.normalIcon }),
|
|
3413
|
-
loadingIndicator,
|
|
3414
|
-
onRemove && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { variant: "secondary", size: "xs", name: "times", onClick: onRemove, tooltip: "Remove" })
|
|
3415
|
-
);
|
|
3394
|
+
labelElement = /* @__PURE__ */ React__default.default.createElement("label", { className: css.cx(styles.verticalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, props.label, descriptionIndicator, errorIndicator, props.icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: props.icon, className: styles.normalIcon }), loadingIndicator, props.onRemove && /* @__PURE__ */ React__default.default.createElement(ui.IconButton, { variant: "secondary", size: "xs", name: "times", onClick: props.onRemove, tooltip: "Remove" }), props.suffix);
|
|
3416
3395
|
} else {
|
|
3417
|
-
labelElement = /* @__PURE__ */ React__default.default.createElement(
|
|
3418
|
-
"label",
|
|
3419
|
-
{
|
|
3420
|
-
className: css.cx(
|
|
3421
|
-
styles.horizontalLabel,
|
|
3422
|
-
isSelected && "dashboard-selected-element",
|
|
3423
|
-
isSelectable && !isSelected && "dashboard-selectable-element"
|
|
3424
|
-
),
|
|
3425
|
-
"data-testid": testId,
|
|
3426
|
-
htmlFor,
|
|
3427
|
-
onPointerDown: onSelect
|
|
3428
|
-
},
|
|
3429
|
-
errorIndicator,
|
|
3430
|
-
icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: icon, className: styles.normalIcon }),
|
|
3431
|
-
label,
|
|
3432
|
-
descriptionIndicator,
|
|
3433
|
-
loadingIndicator
|
|
3434
|
-
);
|
|
3396
|
+
labelElement = /* @__PURE__ */ React__default.default.createElement("label", { className: css.cx(styles.horizontalLabel, props.className), "data-testid": testId, htmlFor: props.htmlFor }, props.prefix, errorIndicator, props.icon && /* @__PURE__ */ React__default.default.createElement(ui.Icon, { name: props.icon, className: styles.normalIcon }), props.label, descriptionIndicator, loadingIndicator, props.suffix);
|
|
3435
3397
|
}
|
|
3436
3398
|
return labelElement;
|
|
3437
3399
|
}
|
|
@@ -9342,7 +9304,6 @@ function VariableValueSelectWrapper({ variable, layout, showAlways, hideLabel })
|
|
|
9342
9304
|
function VariableLabel({ variable, layout, hideLabel }) {
|
|
9343
9305
|
var _a;
|
|
9344
9306
|
const { state } = variable;
|
|
9345
|
-
const { isSelected, onSelect, isSelectable } = ui.useElementSelection(`var-${variable.state.name}`);
|
|
9346
9307
|
if (variable.state.hide === data.VariableHide.hideLabel || hideLabel) {
|
|
9347
9308
|
return null;
|
|
9348
9309
|
}
|
|
@@ -9360,10 +9321,7 @@ function VariableLabel({ variable, layout, hideLabel }) {
|
|
|
9360
9321
|
label: labelOrName,
|
|
9361
9322
|
error: state.error,
|
|
9362
9323
|
layout,
|
|
9363
|
-
description: (_a = state.description) != null ? _a : void 0
|
|
9364
|
-
isSelected,
|
|
9365
|
-
isSelectable,
|
|
9366
|
-
onSelect
|
|
9324
|
+
description: (_a = state.description) != null ? _a : void 0
|
|
9367
9325
|
}
|
|
9368
9326
|
);
|
|
9369
9327
|
}
|