@perses-dev/dashboards 0.52.0-rc.1 → 0.53.0-beta.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.
Files changed (98) hide show
  1. package/dist/cjs/components/DashboardStickyToolbar/DashboardStickyToolbar.js +0 -2
  2. package/dist/cjs/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js +5 -20
  3. package/dist/cjs/components/GridLayout/GridItemContent.js +6 -64
  4. package/dist/cjs/components/LeaveDialog/LeaveDialog.js +10 -1
  5. package/dist/cjs/components/PanelDrawer/PanelEditorForm.js +186 -183
  6. package/dist/cjs/components/PanelDrawer/PanelPreview.js +3 -0
  7. package/dist/cjs/components/PanelGroupDialog/PanelGroupDialog.js +6 -21
  8. package/dist/cjs/components/QueryViewerDialog/QueryViewerDialog.js +121 -0
  9. package/dist/cjs/components/QueryViewerDialog/index.js +30 -0
  10. package/dist/cjs/components/Variables/ListVariableListBox.js +201 -0
  11. package/dist/cjs/components/Variables/Variable.js +130 -72
  12. package/dist/cjs/components/Variables/index.js +1 -0
  13. package/dist/cjs/components/index.js +2 -1
  14. package/dist/cjs/context/DashboardProvider/DashboardProviderWithQueryParams.js +5 -27
  15. package/dist/cjs/context/DashboardProvider/duplicate-panel-slice.js +1 -1
  16. package/dist/cjs/context/DashboardProvider/panel-editor-slice.js +1 -2
  17. package/dist/cjs/context/PanelEditorProvider/PanelEditorProvider.js +49 -0
  18. package/dist/cjs/context/PanelEditorProvider/index.js +23 -0
  19. package/dist/cjs/context/VariableProvider/query-params.js +14 -12
  20. package/dist/cjs/context/index.js +1 -0
  21. package/dist/cjs/test/render.js +8 -6
  22. package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.d.ts.map +1 -1
  23. package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js +0 -2
  24. package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map +1 -1
  25. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.d.ts.map +1 -1
  26. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js +5 -15
  27. package/dist/components/DeletePanelGroupDialog/DeletePanelGroupDialog.js.map +1 -1
  28. package/dist/components/GridLayout/GridItemContent.d.ts.map +1 -1
  29. package/dist/components/GridLayout/GridItemContent.js +8 -66
  30. package/dist/components/GridLayout/GridItemContent.js.map +1 -1
  31. package/dist/components/LeaveDialog/LeaveDialog.d.ts +2 -1
  32. package/dist/components/LeaveDialog/LeaveDialog.d.ts.map +1 -1
  33. package/dist/components/LeaveDialog/LeaveDialog.js +10 -1
  34. package/dist/components/LeaveDialog/LeaveDialog.js.map +1 -1
  35. package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map +1 -1
  36. package/dist/components/PanelDrawer/PanelEditorForm.js +186 -183
  37. package/dist/components/PanelDrawer/PanelEditorForm.js.map +1 -1
  38. package/dist/components/PanelDrawer/PanelPreview.d.ts.map +1 -1
  39. package/dist/components/PanelDrawer/PanelPreview.js +4 -1
  40. package/dist/components/PanelDrawer/PanelPreview.js.map +1 -1
  41. package/dist/components/PanelGroupDialog/PanelGroupDialog.d.ts.map +1 -1
  42. package/dist/components/PanelGroupDialog/PanelGroupDialog.js +5 -15
  43. package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map +1 -1
  44. package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts +9 -0
  45. package/dist/components/QueryViewerDialog/QueryViewerDialog.d.ts.map +1 -0
  46. package/dist/components/QueryViewerDialog/QueryViewerDialog.js +72 -0
  47. package/dist/components/QueryViewerDialog/QueryViewerDialog.js.map +1 -0
  48. package/dist/components/QueryViewerDialog/index.d.ts +2 -0
  49. package/dist/components/QueryViewerDialog/index.d.ts.map +1 -0
  50. package/dist/components/QueryViewerDialog/index.js +15 -0
  51. package/dist/components/QueryViewerDialog/index.js.map +1 -0
  52. package/dist/components/Variables/ListVariableListBox.d.ts +16 -0
  53. package/dist/components/Variables/ListVariableListBox.d.ts.map +1 -0
  54. package/dist/components/Variables/ListVariableListBox.js +141 -0
  55. package/dist/components/Variables/ListVariableListBox.js.map +1 -0
  56. package/dist/components/Variables/Variable.d.ts.map +1 -1
  57. package/dist/components/Variables/Variable.js +134 -76
  58. package/dist/components/Variables/Variable.js.map +1 -1
  59. package/dist/components/Variables/index.d.ts +1 -0
  60. package/dist/components/Variables/index.d.ts.map +1 -1
  61. package/dist/components/Variables/index.js +1 -0
  62. package/dist/components/Variables/index.js.map +1 -1
  63. package/dist/components/index.d.ts +2 -1
  64. package/dist/components/index.d.ts.map +1 -1
  65. package/dist/components/index.js +2 -1
  66. package/dist/components/index.js.map +1 -1
  67. package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.d.ts.map +1 -1
  68. package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js +5 -27
  69. package/dist/context/DashboardProvider/DashboardProviderWithQueryParams.js.map +1 -1
  70. package/dist/context/DashboardProvider/duplicate-panel-slice.js +2 -2
  71. package/dist/context/DashboardProvider/duplicate-panel-slice.js.map +1 -1
  72. package/dist/context/DashboardProvider/panel-editor-slice.d.ts.map +1 -1
  73. package/dist/context/DashboardProvider/panel-editor-slice.js +2 -3
  74. package/dist/context/DashboardProvider/panel-editor-slice.js.map +1 -1
  75. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts +13 -0
  76. package/dist/context/PanelEditorProvider/PanelEditorProvider.d.ts.map +1 -0
  77. package/dist/context/PanelEditorProvider/PanelEditorProvider.js +33 -0
  78. package/dist/context/PanelEditorProvider/PanelEditorProvider.js.map +1 -0
  79. package/dist/context/PanelEditorProvider/index.d.ts +3 -0
  80. package/dist/context/PanelEditorProvider/index.d.ts.map +1 -0
  81. package/dist/context/PanelEditorProvider/index.js +16 -0
  82. package/dist/context/PanelEditorProvider/index.js.map +1 -0
  83. package/dist/context/VariableProvider/query-params.d.ts +3 -4
  84. package/dist/context/VariableProvider/query-params.d.ts.map +1 -1
  85. package/dist/context/VariableProvider/query-params.js +14 -9
  86. package/dist/context/VariableProvider/query-params.js.map +1 -1
  87. package/dist/context/index.d.ts +1 -0
  88. package/dist/context/index.d.ts.map +1 -1
  89. package/dist/context/index.js +1 -0
  90. package/dist/context/index.js.map +1 -1
  91. package/dist/test/render.d.ts.map +1 -1
  92. package/dist/test/render.js +8 -6
  93. package/dist/test/render.js.map +1 -1
  94. package/dist/utils/panelUtils.d.ts +3 -0
  95. package/dist/utils/panelUtils.d.ts.map +1 -1
  96. package/dist/utils/panelUtils.js +3 -0
  97. package/dist/utils/panelUtils.js.map +1 -1
  98. package/package.json +6 -6
@@ -21,17 +21,12 @@ Object.defineProperty(exports, "PanelGroupDialog", {
21
21
  }
22
22
  });
23
23
  const _jsxruntime = require("react/jsx-runtime");
24
- const _material = require("@mui/material");
25
- const _Close = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Close"));
26
24
  const _react = require("react");
27
25
  const _pluginsystem = require("@perses-dev/plugin-system");
26
+ const _components = require("@perses-dev/components");
27
+ const _material = require("@mui/material");
28
28
  const _context = require("../../context");
29
29
  const _PanelGroupEditorForm = require("./PanelGroupEditorForm");
30
- function _interop_require_default(obj) {
31
- return obj && obj.__esModule ? obj : {
32
- default: obj
33
- };
34
- }
35
30
  function PanelGroupDialog() {
36
31
  const panelGroupEditor = (0, _context.usePanelGroupEditor)();
37
32
  const variables = (0, _pluginsystem.useVariableValues)();
@@ -53,30 +48,20 @@ function PanelGroupDialog() {
53
48
  panelGroupEditor.applyChanges(values);
54
49
  handleClose();
55
50
  };
56
- return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Dialog, {
51
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
57
52
  open: isOpen,
58
53
  TransitionProps: {
59
54
  onExited: handleExited
60
55
  },
61
56
  children: panelGroupEditor !== undefined && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
62
57
  children: [
63
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogTitle, {
58
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Header, {
64
59
  children: [
65
60
  panelGroupEditor.mode,
66
61
  " Panel Group"
67
62
  ]
68
63
  }),
69
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
70
- "aria-label": "Close",
71
- onClick: panelGroupEditor.close,
72
- sx: (theme)=>({
73
- position: 'absolute',
74
- top: theme.spacing(0.5),
75
- right: theme.spacing(0.5)
76
- }),
77
- children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Close.default, {})
78
- }),
79
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.DialogContent, {
64
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
80
65
  dividers: true,
81
66
  sx: {
82
67
  width: '500px'
@@ -87,7 +72,7 @@ function PanelGroupDialog() {
87
72
  onSubmit: handleSubmit
88
73
  })
89
74
  }),
90
- /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.DialogActions, {
75
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog.Actions, {
91
76
  children: [
92
77
  /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
93
78
  variant: "contained",
@@ -0,0 +1,121 @@
1
+ // Copyright 2025 The Perses Authors
2
+ // Licensed under the Apache License, Version 2.0 (the "License");
3
+ // you may not use this file except in compliance with the License.
4
+ // You may obtain a copy of the License at
5
+ //
6
+ // http://www.apache.org/licenses/LICENSE-2.0
7
+ //
8
+ // Unless required by applicable law or agreed to in writing, software
9
+ // distributed under the License is distributed on an "AS IS" BASIS,
10
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
+ // See the License for the specific language governing permissions and
12
+ // limitations under the License.
13
+ "use strict";
14
+ Object.defineProperty(exports, "__esModule", {
15
+ value: true
16
+ });
17
+ Object.defineProperty(exports, "QueryViewerDialog", {
18
+ enumerable: true,
19
+ get: function() {
20
+ return QueryViewerDialog;
21
+ }
22
+ });
23
+ const _jsxruntime = require("react/jsx-runtime");
24
+ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
25
+ const _components = require("@perses-dev/components");
26
+ const _material = require("@mui/material");
27
+ const _pluginsystem = require("@perses-dev/plugin-system");
28
+ function _getRequireWildcardCache(nodeInterop) {
29
+ if (typeof WeakMap !== "function") return null;
30
+ var cacheBabelInterop = new WeakMap();
31
+ var cacheNodeInterop = new WeakMap();
32
+ return (_getRequireWildcardCache = function(nodeInterop) {
33
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
34
+ })(nodeInterop);
35
+ }
36
+ function _interop_require_wildcard(obj, nodeInterop) {
37
+ if (!nodeInterop && obj && obj.__esModule) {
38
+ return obj;
39
+ }
40
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
41
+ return {
42
+ default: obj
43
+ };
44
+ }
45
+ var cache = _getRequireWildcardCache(nodeInterop);
46
+ if (cache && cache.has(obj)) {
47
+ return cache.get(obj);
48
+ }
49
+ var newObj = {
50
+ __proto__: null
51
+ };
52
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
53
+ for(var key in obj){
54
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
55
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
56
+ if (desc && (desc.get || desc.set)) {
57
+ Object.defineProperty(newObj, key, desc);
58
+ } else {
59
+ newObj[key] = obj[key];
60
+ }
61
+ }
62
+ }
63
+ newObj.default = obj;
64
+ if (cache) {
65
+ cache.set(obj, newObj);
66
+ }
67
+ return newObj;
68
+ }
69
+ function QueryViewerDialog({ open, queryDefinitions, onClose }) {
70
+ const queryRows = (0, _react.useMemo)(()=>{
71
+ if (!queryDefinitions?.length) return null;
72
+ const queryItems = [];
73
+ queryDefinitions.forEach((query, index)=>{
74
+ if (query?.spec?.plugin?.kind && query?.kind) {
75
+ queryItems.push(/*#__PURE__*/ (0, _jsxruntime.jsxs)(_react.default.Fragment, {
76
+ children: [
77
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginSpecEditor, {
78
+ value: query.spec.plugin.spec,
79
+ pluginSelection: {
80
+ kind: query.spec.plugin.kind,
81
+ type: query.kind
82
+ },
83
+ onChange: ()=>{},
84
+ isReadonly: true
85
+ }),
86
+ index < queryDefinitions.length - 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {
87
+ sx: {
88
+ my: 2
89
+ }
90
+ })
91
+ ]
92
+ }, `query-${index}`));
93
+ }
94
+ });
95
+ return queryItems;
96
+ }, [
97
+ queryDefinitions
98
+ ]);
99
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_components.Dialog, {
100
+ open: open,
101
+ onClose: onClose,
102
+ maxWidth: "lg",
103
+ fullWidth: true,
104
+ children: [
105
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Header, {
106
+ children: "Query Viewer"
107
+ }),
108
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Content, {
109
+ children: queryRows
110
+ }),
111
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.Actions, {
112
+ children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
113
+ variant: "outlined",
114
+ color: "secondary",
115
+ onClick: onClose,
116
+ children: "Close"
117
+ })
118
+ })
119
+ ]
120
+ });
121
+ }
@@ -0,0 +1,30 @@
1
+ // Copyright 2025 The Perses Authors
2
+ // Licensed under the Apache License, Version 2.0 (the "License");
3
+ // you may not use this file except in compliance with the License.
4
+ // You may obtain a copy of the License at
5
+ //
6
+ // http://www.apache.org/licenses/LICENSE-2.0
7
+ //
8
+ // Unless required by applicable law or agreed to in writing, software
9
+ // distributed under the License is distributed on an "AS IS" BASIS,
10
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
+ // See the License for the specific language governing permissions and
12
+ // limitations under the License.
13
+ "use strict";
14
+ Object.defineProperty(exports, "__esModule", {
15
+ value: true
16
+ });
17
+ _export_star(require("./QueryViewerDialog"), exports);
18
+ function _export_star(from, to) {
19
+ Object.keys(from).forEach(function(k) {
20
+ if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
21
+ Object.defineProperty(to, k, {
22
+ enumerable: true,
23
+ get: function() {
24
+ return from[k];
25
+ }
26
+ });
27
+ }
28
+ });
29
+ return from;
30
+ }
@@ -0,0 +1,201 @@
1
+ // Copyright 2025 The Perses Authors
2
+ // Licensed under the Apache License, Version 2.0 (the "License");
3
+ // you may not use this file except in compliance with the License.
4
+ // You may obtain a copy of the License at
5
+ //
6
+ // http://www.apache.org/licenses/LICENSE-2.0
7
+ //
8
+ // Unless required by applicable law or agreed to in writing, software
9
+ // distributed under the License is distributed on an "AS IS" BASIS,
10
+ // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
11
+ // See the License for the specific language governing permissions and
12
+ // limitations under the License.
13
+ "use strict";
14
+ Object.defineProperty(exports, "__esModule", {
15
+ value: true
16
+ });
17
+ function _export(target, all) {
18
+ for(var name in all)Object.defineProperty(target, name, {
19
+ enumerable: true,
20
+ get: all[name]
21
+ });
22
+ }
23
+ _export(exports, {
24
+ ListVariableListBox: function() {
25
+ return ListVariableListBox;
26
+ },
27
+ ListVariableListBoxProvider: function() {
28
+ return ListVariableListBoxProvider;
29
+ },
30
+ useListVariableListBoxContext: function() {
31
+ return useListVariableListBoxContext;
32
+ }
33
+ });
34
+ const _jsxruntime = require("react/jsx-runtime");
35
+ const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
36
+ const _material = require("@mui/material");
37
+ const _core = require("@perses-dev/core");
38
+ function _getRequireWildcardCache(nodeInterop) {
39
+ if (typeof WeakMap !== "function") return null;
40
+ var cacheBabelInterop = new WeakMap();
41
+ var cacheNodeInterop = new WeakMap();
42
+ return (_getRequireWildcardCache = function(nodeInterop) {
43
+ return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
44
+ })(nodeInterop);
45
+ }
46
+ function _interop_require_wildcard(obj, nodeInterop) {
47
+ if (!nodeInterop && obj && obj.__esModule) {
48
+ return obj;
49
+ }
50
+ if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
51
+ return {
52
+ default: obj
53
+ };
54
+ }
55
+ var cache = _getRequireWildcardCache(nodeInterop);
56
+ if (cache && cache.has(obj)) {
57
+ return cache.get(obj);
58
+ }
59
+ var newObj = {
60
+ __proto__: null
61
+ };
62
+ var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
63
+ for(var key in obj){
64
+ if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
65
+ var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
66
+ if (desc && (desc.get || desc.set)) {
67
+ Object.defineProperty(newObj, key, desc);
68
+ } else {
69
+ newObj[key] = obj[key];
70
+ }
71
+ }
72
+ }
73
+ newObj.default = obj;
74
+ if (cache) {
75
+ cache.set(obj, newObj);
76
+ }
77
+ return newObj;
78
+ }
79
+ const ListVariableListBoxContext = /*#__PURE__*/ _react.default.createContext(undefined);
80
+ function useListVariableListBoxContext() {
81
+ const ctx = (0, _react.useContext)(ListVariableListBoxContext);
82
+ if (!ctx) throw new Error('ListVariableListBoxContext not found');
83
+ return ctx;
84
+ }
85
+ /*
86
+ * Handles the logic for toggling the global select checkbox in the ListBox header.
87
+ *
88
+ * If all options are selected, it will deselect all options.
89
+ * Except if filteredOptions is a subset of options, then it will only deselect the filtered options.
90
+ *
91
+ * If some options are selected, it will select all filtered options.
92
+ *
93
+ * If no options are selected, it will select all filtered options.
94
+ * Should be not possible since a ListVariable has always at least one value.
95
+ *
96
+ * If allowAllValue is true, it will handle the special "All" option logic.
97
+ * Main difference is if some options are selected and there is no filter, it will select the "All" option
98
+ */ function handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange) {
99
+ if (isAllSelected) {
100
+ if (filteredOptions.length !== options.length) {
101
+ onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
102
+ } else {
103
+ onChange([]);
104
+ }
105
+ return;
106
+ }
107
+ if (isIndeterminate) {
108
+ if (allowAllValue) {
109
+ if (filteredOptions.length === options.length) {
110
+ if (selectedOptions[0]?.value === _core.DEFAULT_ALL_VALUE) {
111
+ onChange(options.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE));
112
+ } else {
113
+ onChange([
114
+ {
115
+ label: _core.DEFAULT_ALL_VALUE,
116
+ value: _core.DEFAULT_ALL_VALUE
117
+ }
118
+ ]);
119
+ }
120
+ } else {
121
+ if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
122
+ onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
123
+ } else {
124
+ onChange([
125
+ ...selectedOptions,
126
+ ...filteredOptions.filter((o)=>o.value !== _core.DEFAULT_ALL_VALUE)
127
+ ]);
128
+ }
129
+ }
130
+ } else {
131
+ if (filteredOptions.length === options.length) {
132
+ onChange(options);
133
+ } else {
134
+ if (filteredOptions.every((o)=>selectedOptions.includes(o))) {
135
+ onChange(selectedOptions.filter((o)=>!filteredOptions.includes(o)));
136
+ } else {
137
+ onChange([
138
+ ...selectedOptions,
139
+ ...filteredOptions
140
+ ]);
141
+ }
142
+ }
143
+ }
144
+ return;
145
+ }
146
+ // Nothing selected, so select filtered options
147
+ onChange(filteredOptions);
148
+ }
149
+ function ListVariableListBoxProvider({ value, children }) {
150
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariableListBoxContext.Provider, {
151
+ value: value,
152
+ children: children
153
+ });
154
+ }
155
+ const ListVariableListBox = /*#__PURE__*/ (0, _react.forwardRef)(function ListVariableListBox(props, ref) {
156
+ const { children, ...rest } = props;
157
+ const { options, selectedOptions, filteredOptions, allowAllValue, onChange } = useListVariableListBoxContext();
158
+ // Derived selection metadata for context listbox header
159
+ const selectedCount = (0, _react.useMemo)(()=>selectedOptions.length, [
160
+ selectedOptions
161
+ ]);
162
+ const isIndeterminate = (0, _react.useMemo)(()=>options.length > 0 && selectedCount > 0 && selectedCount !== options.length, [
163
+ selectedCount,
164
+ options
165
+ ]);
166
+ const isAllSelected = (0, _react.useMemo)(()=>options.length > 0 && selectedCount === options.length, [
167
+ selectedCount,
168
+ options
169
+ ]);
170
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)("ul", {
171
+ ...rest,
172
+ ref: ref,
173
+ role: "listbox",
174
+ children: [
175
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
176
+ style: {
177
+ display: 'flex',
178
+ alignItems: 'center'
179
+ },
180
+ children: [
181
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
182
+ indeterminate: isIndeterminate,
183
+ checked: isAllSelected,
184
+ // intentionally not passing event to underlying handler to mimic previous behavior
185
+ onChange: ()=>handleGlobalSelectToggle(options, selectedOptions, filteredOptions, isIndeterminate, isAllSelected, allowAllValue, onChange)
186
+ }),
187
+ /*#__PURE__*/ (0, _jsxruntime.jsxs)("span", {
188
+ children: [
189
+ /*#__PURE__*/ (0, _jsxruntime.jsx)("strong", {
190
+ children: selectedCount
191
+ }),
192
+ " Selected"
193
+ ]
194
+ })
195
+ ]
196
+ }),
197
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Divider, {}),
198
+ children
199
+ ]
200
+ });
201
+ });
@@ -35,6 +35,7 @@ const _core = require("@perses-dev/core");
35
35
  const _pluginsystem = require("@perses-dev/plugin-system");
36
36
  const _context = require("../../context");
37
37
  const _constants = require("../../constants");
38
+ const _ListVariableListBox = require("./ListVariableListBox");
38
39
  function variableOptionToVariableValue(options) {
39
40
  if (options === null) {
40
41
  return null;
@@ -91,22 +92,8 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
91
92
  ...options
92
93
  ] : [];
93
94
  if (!sort || sort === 'none') return opts;
94
- switch(sort){
95
- case 'alphabetical-asc':
96
- return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
97
- case 'alphabetical-desc':
98
- return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
99
- case 'numerical-asc':
100
- return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
101
- case 'numerical-desc':
102
- return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
103
- case 'alphabetical-ci-asc':
104
- return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
105
- case 'alphabetical-ci-desc':
106
- return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
107
- default:
108
- return opts;
109
- }
95
+ const sortMethod = _pluginsystem.SORT_METHODS[sort];
96
+ return !sortMethod ? opts : sortMethod.sort(opts);
110
97
  }, [
111
98
  options,
112
99
  sort
@@ -214,6 +201,15 @@ function ListVariable({ name, source }) {
214
201
  const title = definition?.spec.display?.name ?? name;
215
202
  const allowMultiple = definition?.spec.allowMultiple === true;
216
203
  const allowAllValue = definition?.spec.allowAllValue === true;
204
+ const filterOptions = (0, _material.createFilterOptions)({});
205
+ const filteredOptions = (0, _react.useMemo)(()=>filterOptions(viewOptions, {
206
+ inputValue,
207
+ getOptionLabel: (o)=>o.label
208
+ }), [
209
+ inputValue,
210
+ viewOptions,
211
+ filterOptions
212
+ ]);
217
213
  // Update value when changed
218
214
  (0, _react.useEffect)(()=>{
219
215
  if (value) {
@@ -245,64 +241,126 @@ function ListVariable({ name, source }) {
245
241
  options,
246
242
  source
247
243
  ]);
248
- return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
249
- children: [
250
- /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
251
- disablePortal: true,
252
- disableCloseOnSelect: allowMultiple,
253
- multiple: allowMultiple,
254
- fullWidth: true,
255
- limitTags: 3,
256
- size: "small",
257
- disableClearable: true,
258
- slots: {
259
- popper: StyledPopper
260
- },
261
- renderInput: (params)=>{
262
- return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
263
- ...params,
264
- label: title,
265
- onChange: (e)=>setInputValue(e.target.value)
266
- }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
267
- ...params,
268
- label: title,
269
- style: {
270
- width: `${inputWidth}px`
271
- }
272
- });
273
- },
274
- sx: {
275
- '& .MuiInputBase-root': {
276
- minHeight: '38px'
277
- },
278
- '& .MuiAutocomplete-tag': {
279
- margin: '1px 2px'
280
- }
281
- },
282
- value: selectedOptions,
283
- onChange: (_, value)=>{
284
- if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
285
- setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
286
- } else {
287
- setVariableValue(name, variableOptionToVariableValue(value), source);
288
- }
289
- },
290
- inputValue: allowMultiple ? inputValue : undefined,
291
- onInputChange: (_, newInputValue)=>{
292
- if (!allowMultiple) {
293
- setInputWidth(getWidthPx(newInputValue, 'list'));
294
- }
244
+ const handleGlobalSelect = (0, _react.useCallback)((options)=>{
245
+ setVariableValue(name, variableOptionToVariableValue(options), source);
246
+ }, [
247
+ name,
248
+ setVariableValue,
249
+ source
250
+ ]);
251
+ const listBoxProviderValue = (0, _react.useMemo)(()=>({
252
+ options: viewOptions,
253
+ selectedOptions: selectedOptions,
254
+ filteredOptions: filteredOptions,
255
+ allowAllValue,
256
+ onChange: handleGlobalSelect
257
+ }), [
258
+ allowAllValue,
259
+ filteredOptions,
260
+ handleGlobalSelect,
261
+ selectedOptions,
262
+ viewOptions
263
+ ]);
264
+ const autocompleteComponent = (0, _react.useMemo)(()=>{
265
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
266
+ disablePortal: true,
267
+ loading: loading,
268
+ disableCloseOnSelect: allowMultiple,
269
+ multiple: allowMultiple,
270
+ fullWidth: true,
271
+ limitTags: 3,
272
+ size: "small",
273
+ disableClearable: true,
274
+ slotProps: {
275
+ listbox: {
276
+ component: allowMultiple ? _ListVariableListBox.ListVariableListBox : undefined
277
+ }
278
+ },
279
+ slots: {
280
+ popper: StyledPopper
281
+ },
282
+ sx: {
283
+ '& .MuiInputBase-root': {
284
+ minHeight: '38px'
295
285
  },
296
- onBlur: ()=>{
297
- if (allowMultiple) {
298
- setInputValue('');
286
+ '& .MuiAutocomplete-tag': {
287
+ margin: '1px 2px'
288
+ }
289
+ },
290
+ filterOptions: filterOptions,
291
+ options: viewOptions,
292
+ value: selectedOptions,
293
+ onChange: (_, value)=>{
294
+ if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
295
+ setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
296
+ } else {
297
+ setVariableValue(name, variableOptionToVariableValue(value), source);
298
+ }
299
+ },
300
+ inputValue: allowMultiple ? inputValue : undefined,
301
+ onInputChange: (_, newInputValue)=>{
302
+ if (!allowMultiple) {
303
+ setInputWidth(getWidthPx(newInputValue, 'list'));
304
+ }
305
+ },
306
+ onBlur: ()=>{
307
+ if (allowMultiple) {
308
+ setInputValue('');
309
+ }
310
+ },
311
+ renderInput: (params)=>{
312
+ return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
313
+ ...params,
314
+ label: title,
315
+ onChange: (e)=>setInputValue(e.target.value)
316
+ }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
317
+ ...params,
318
+ label: title,
319
+ style: {
320
+ width: `${inputWidth}px`
299
321
  }
300
- },
301
- options: viewOptions
302
- }),
303
- loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
304
- ]
305
- });
322
+ });
323
+ },
324
+ renderOption: (props, option, { selected })=>{
325
+ const { key, ...optionProps } = props;
326
+ return /*#__PURE__*/ (0, _jsxruntime.jsxs)("li", {
327
+ ...optionProps,
328
+ style: {
329
+ padding: 0
330
+ },
331
+ children: [
332
+ /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
333
+ style: {
334
+ marginRight: 8
335
+ },
336
+ checked: selected
337
+ }),
338
+ option.label
339
+ ]
340
+ }, key);
341
+ }
342
+ });
343
+ }, [
344
+ allowAllValue,
345
+ allowMultiple,
346
+ filterOptions,
347
+ inputValue,
348
+ inputWidth,
349
+ loading,
350
+ name,
351
+ selectedOptions,
352
+ setVariableValue,
353
+ source,
354
+ title,
355
+ viewOptions
356
+ ]);
357
+ if (allowMultiple) {
358
+ return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ListVariableListBox.ListVariableListBoxProvider, {
359
+ value: listBoxProviderValue,
360
+ children: autocompleteComponent
361
+ });
362
+ }
363
+ return autocompleteComponent;
306
364
  }
307
365
  function TextVariable({ name, source }) {
308
366
  const ctx = (0, _context.useVariableDefinitionAndState)(name, source);
@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
16
16
  });
17
17
  _export_star(require("./BuiltinVariableAccordions"), exports);
18
18
  _export_star(require("./EditVariablesButton"), exports);
19
+ _export_star(require("./ListVariableListBox"), exports);
19
20
  _export_star(require("./Variable"), exports);
20
21
  _export_star(require("./VariableEditor"), exports);
21
22
  _export_star(require("./VariableList"), exports);
@@ -24,8 +24,8 @@ _export_star(require("./DeletePanelDialog"), exports);
24
24
  _export_star(require("./DeletePanelGroupDialog"), exports);
25
25
  _export_star(require("./DiscardChangesConfirmationDialog"), exports);
26
26
  _export_star(require("./DownloadButton"), exports);
27
- _export_star(require("./EditJsonButton"), exports);
28
27
  _export_star(require("./EditJsonDialog"), exports);
28
+ _export_star(require("./EditJsonButton"), exports);
29
29
  _export_star(require("./EmptyDashboard"), exports);
30
30
  _export_star(require("./GridLayout"), exports);
31
31
  _export_star(require("./LeaveDialog"), exports);
@@ -33,6 +33,7 @@ _export_star(require("./Panel"), exports);
33
33
  _export_star(require("./PanelDrawer"), exports);
34
34
  _export_star(require("./PanelGroupDialog"), exports);
35
35
  _export_star(require("./QuerySummaryTable"), exports);
36
+ _export_star(require("./QueryViewerDialog"), exports);
36
37
  _export_star(require("./SaveChangesConfirmationDialog"), exports);
37
38
  _export_star(require("./SaveDashboardButton"), exports);
38
39
  _export_star(require("./Variables"), exports);