@perses-dev/dashboards 0.30.0 → 0.32.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/dist/cjs/components/DashboardToolbar/DashboardToolbar.js +5 -22
- package/dist/cjs/components/EditJsonButton/EditJsonButton.js +1 -0
- package/dist/cjs/components/GridLayout/GridTitle.js +30 -9
- package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +92 -0
- package/dist/cjs/components/SaveChangesConfirmationDialog/index.js +28 -0
- package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js +80 -0
- package/dist/cjs/components/SaveDashboardButton/index.js +28 -0
- package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js +123 -197
- package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js +178 -0
- package/dist/cjs/components/Variables/VariableEditorForm/index.js +1 -0
- package/dist/cjs/components/Variables/index.js +1 -0
- package/dist/cjs/components/index.js +2 -0
- package/dist/cjs/context/DashboardProvider/DashboardProvider.js +2 -0
- package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js +9 -0
- package/dist/cjs/context/DashboardProvider/index.js +1 -0
- package/dist/cjs/context/DashboardProvider/save-changes-dialog-slice.js +33 -0
- package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js +56 -7
- package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js +2 -0
- package/dist/cjs/context/TemplateVariableProvider/utils.js +44 -0
- package/dist/cjs/test/render.js +35 -13
- package/dist/cjs/views/ViewDashboard/DashboardApp.js +2 -1
- package/dist/components/DashboardToolbar/DashboardToolbar.d.ts +2 -2
- package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map +1 -1
- package/dist/components/DashboardToolbar/DashboardToolbar.js +6 -23
- package/dist/components/DashboardToolbar/DashboardToolbar.js.map +1 -1
- package/dist/components/EditJsonButton/EditJsonButton.js +1 -0
- package/dist/components/EditJsonButton/EditJsonButton.js.map +1 -1
- package/dist/components/GridLayout/GridTitle.d.ts.map +1 -1
- package/dist/components/GridLayout/GridTitle.js +30 -9
- package/dist/components/GridLayout/GridTitle.js.map +1 -1
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts +3 -0
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts.map +1 -0
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js +86 -0
- package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map +1 -0
- package/dist/components/SaveChangesConfirmationDialog/index.d.ts +2 -0
- package/dist/components/SaveChangesConfirmationDialog/index.d.ts.map +1 -0
- package/dist/components/SaveChangesConfirmationDialog/index.js +15 -0
- package/dist/components/SaveChangesConfirmationDialog/index.js.map +1 -0
- package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts +10 -0
- package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map +1 -0
- package/dist/components/SaveDashboardButton/SaveDashboardButton.js +74 -0
- package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map +1 -0
- package/dist/components/SaveDashboardButton/index.d.ts +2 -0
- package/dist/components/SaveDashboardButton/index.d.ts.map +1 -0
- package/dist/components/SaveDashboardButton/index.js +15 -0
- package/dist/components/SaveDashboardButton/index.js.map +1 -0
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts +4 -2
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map +1 -1
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js +126 -195
- package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map +1 -1
- package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts +16 -0
- package/dist/components/Variables/VariableEditorForm/VariablePreview.d.ts.map +1 -0
- package/dist/components/Variables/VariableEditorForm/VariablePreview.js +122 -0
- package/dist/components/Variables/VariableEditorForm/VariablePreview.js.map +1 -0
- package/dist/components/Variables/VariableEditorForm/index.d.ts +1 -0
- package/dist/components/Variables/VariableEditorForm/index.d.ts.map +1 -1
- package/dist/components/Variables/VariableEditorForm/index.js +1 -0
- package/dist/components/Variables/VariableEditorForm/index.js.map +1 -1
- package/dist/components/Variables/index.d.ts +1 -0
- package/dist/components/Variables/index.d.ts.map +1 -1
- package/dist/components/Variables/index.js +1 -0
- package/dist/components/Variables/index.js.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts +2 -1
- package/dist/context/DashboardProvider/DashboardProvider.d.ts.map +1 -1
- package/dist/context/DashboardProvider/DashboardProvider.js +2 -0
- package/dist/context/DashboardProvider/DashboardProvider.js.map +1 -1
- package/dist/context/DashboardProvider/common.d.ts +2 -1
- package/dist/context/DashboardProvider/common.d.ts.map +1 -1
- package/dist/context/DashboardProvider/common.js.map +1 -1
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts +5 -0
- package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map +1 -1
- package/dist/context/DashboardProvider/dashboard-provider-api.js +8 -0
- package/dist/context/DashboardProvider/dashboard-provider-api.js.map +1 -1
- package/dist/context/DashboardProvider/index.d.ts +1 -0
- package/dist/context/DashboardProvider/index.d.ts.map +1 -1
- package/dist/context/DashboardProvider/index.js +1 -0
- package/dist/context/DashboardProvider/index.js.map +1 -1
- package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts +15 -0
- package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts.map +1 -0
- package/dist/context/DashboardProvider/save-changes-dialog-slice.js +27 -0
- package/dist/context/DashboardProvider/save-changes-dialog-slice.js.map +1 -0
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts +10 -0
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map +1 -1
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js +51 -7
- package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map +1 -1
- package/dist/context/TemplateVariableProvider/hydrationUtils.d.ts.map +1 -1
- package/dist/context/TemplateVariableProvider/hydrationUtils.js +2 -0
- package/dist/context/TemplateVariableProvider/hydrationUtils.js.map +1 -1
- package/dist/context/TemplateVariableProvider/utils.d.ts +7 -0
- package/dist/context/TemplateVariableProvider/utils.d.ts.map +1 -0
- package/dist/context/TemplateVariableProvider/utils.js +40 -0
- package/dist/context/TemplateVariableProvider/utils.js.map +1 -0
- package/dist/stories/decorators/WithDashboard.js.map +1 -1
- package/dist/stories/decorators/WithDatasourceStore.js.map +1 -1
- package/dist/stories/decorators/WithTemplateVariables.js.map +1 -1
- package/dist/test/render.d.ts.map +1 -1
- package/dist/test/render.js +35 -13
- package/dist/test/render.js.map +1 -1
- package/dist/views/ViewDashboard/DashboardApp.d.ts +2 -1
- package/dist/views/ViewDashboard/DashboardApp.d.ts.map +1 -1
- package/dist/views/ViewDashboard/DashboardApp.js +3 -2
- package/dist/views/ViewDashboard/DashboardApp.js.map +1 -1
- package/package.json +7 -6
|
@@ -12,16 +12,13 @@
|
|
|
12
12
|
// limitations under the License.
|
|
13
13
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
14
14
|
import React, { useMemo, useState } from 'react';
|
|
15
|
-
import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack,
|
|
15
|
+
import { Box, Typography, Switch, TextField, Grid, FormControl, FormControlLabel, InputLabel, MenuItem, Select, Button, Stack, ClickAwayListener, Divider } from '@mui/material';
|
|
16
16
|
import { useImmer } from 'use-immer';
|
|
17
17
|
import { PluginEditor } from '@perses-dev/plugin-system';
|
|
18
|
-
import { ErrorBoundary
|
|
19
|
-
import
|
|
20
|
-
import
|
|
21
|
-
import { TOOLTIP_TEXT } from '../../../constants';
|
|
22
|
-
import { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';
|
|
18
|
+
import { ErrorBoundary } from '@perses-dev/components';
|
|
19
|
+
import { VARIABLE_TYPES } from '../variable-model';
|
|
20
|
+
import { VariableListPreview, VariablePreview } from './VariablePreview';
|
|
23
21
|
import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
|
|
24
|
-
const DEFAULT_MAX_PREVIEW_VALUES = 50;
|
|
25
22
|
// TODO: Replace with proper validation library
|
|
26
23
|
function getValidation(state) {
|
|
27
24
|
/** Name validation */ let name = null;
|
|
@@ -37,96 +34,18 @@ function getValidation(state) {
|
|
|
37
34
|
isValid: !name
|
|
38
35
|
};
|
|
39
36
|
}
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
children: children
|
|
44
|
-
});
|
|
45
|
-
function VariableListPreview({ definition , onRefresh }) {
|
|
46
|
-
const { data , isFetching , error } = useListVariablePluginValues(definition);
|
|
47
|
-
const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
|
|
48
|
-
const showAll = ()=>{
|
|
49
|
-
setMaxValues(undefined);
|
|
50
|
-
};
|
|
51
|
-
let notShown = 0;
|
|
52
|
-
if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
|
|
53
|
-
notShown = data.length - maxValues;
|
|
54
|
-
}
|
|
55
|
-
const errorMessage = error === null || error === void 0 ? void 0 : error.message;
|
|
56
|
-
return /*#__PURE__*/ _jsxs(Box, {
|
|
57
|
-
children: [
|
|
58
|
-
/*#__PURE__*/ _jsxs(Stack, {
|
|
59
|
-
direction: 'row',
|
|
60
|
-
spacing: 1,
|
|
61
|
-
alignItems: "center",
|
|
62
|
-
children: [
|
|
63
|
-
/*#__PURE__*/ _jsx(Typography, {
|
|
64
|
-
variant: "caption",
|
|
65
|
-
children: "Preview Values"
|
|
66
|
-
}),
|
|
67
|
-
/*#__PURE__*/ _jsx(InfoTooltip, {
|
|
68
|
-
description: TOOLTIP_TEXT.refreshVariableValues,
|
|
69
|
-
children: /*#__PURE__*/ _jsx(IconButton, {
|
|
70
|
-
onClick: onRefresh,
|
|
71
|
-
size: "small",
|
|
72
|
-
children: /*#__PURE__*/ _jsx(Refresh, {})
|
|
73
|
-
})
|
|
74
|
-
}),
|
|
75
|
-
/*#__PURE__*/ _jsx(InfoTooltip, {
|
|
76
|
-
description: TOOLTIP_TEXT.copyVariableValues,
|
|
77
|
-
children: /*#__PURE__*/ _jsx(IconButton, {
|
|
78
|
-
onClick: async ()=>{
|
|
79
|
-
if (data === null || data === void 0 ? void 0 : data.length) {
|
|
80
|
-
await navigator.clipboard.writeText(data.map((d)=>d.label).join(','));
|
|
81
|
-
alert('Copied to clipboard!');
|
|
82
|
-
}
|
|
83
|
-
},
|
|
84
|
-
size: "small",
|
|
85
|
-
children: /*#__PURE__*/ _jsx(Clipboard, {})
|
|
86
|
-
})
|
|
87
|
-
})
|
|
88
|
-
]
|
|
89
|
-
}),
|
|
90
|
-
errorMessage && /*#__PURE__*/ _jsx(Alert, {
|
|
91
|
-
severity: "error",
|
|
92
|
-
children: errorMessage
|
|
93
|
-
}),
|
|
94
|
-
isFetching && 'Loading...',
|
|
95
|
-
(data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ _jsx(Alert, {
|
|
96
|
-
severity: "info",
|
|
97
|
-
children: "No results"
|
|
98
|
-
}),
|
|
99
|
-
/*#__PURE__*/ _jsxs(_Fragment, {
|
|
100
|
-
children: [
|
|
101
|
-
data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ _jsx(Chip, {
|
|
102
|
-
sx: {
|
|
103
|
-
mr: 1,
|
|
104
|
-
mb: 1
|
|
105
|
-
},
|
|
106
|
-
size: "small",
|
|
107
|
-
label: val.label
|
|
108
|
-
}, val.value)),
|
|
109
|
-
notShown > 0 && /*#__PURE__*/ _jsx(Chip, {
|
|
110
|
-
onClick: showAll,
|
|
111
|
-
variant: "outlined",
|
|
112
|
-
sx: {
|
|
113
|
-
mr: 1,
|
|
114
|
-
mb: 1
|
|
115
|
-
},
|
|
116
|
-
size: "small",
|
|
117
|
-
label: `+${notShown} more`
|
|
118
|
-
})
|
|
119
|
-
]
|
|
120
|
-
})
|
|
121
|
-
]
|
|
37
|
+
function FallbackPreview() {
|
|
38
|
+
return /*#__PURE__*/ _jsx("div", {
|
|
39
|
+
children: "Error previewing values"
|
|
122
40
|
});
|
|
123
41
|
}
|
|
124
|
-
export function VariableEditForm(
|
|
42
|
+
export function VariableEditForm(props) {
|
|
43
|
+
const { initialVariableDefinition , onChange , onCancel } = props;
|
|
125
44
|
const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
|
|
126
45
|
const validation = useMemo(()=>getValidation(state), [
|
|
127
46
|
state
|
|
128
47
|
]);
|
|
129
|
-
const [previewKey, setPreviewKey] =
|
|
48
|
+
const [previewKey, setPreviewKey] = useState(0);
|
|
130
49
|
const refreshPreview = ()=>{
|
|
131
50
|
setPreviewKey((prev)=>prev + 1);
|
|
132
51
|
};
|
|
@@ -186,9 +105,6 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
|
|
|
186
105
|
overflowY: 'scroll'
|
|
187
106
|
},
|
|
188
107
|
children: [
|
|
189
|
-
/*#__PURE__*/ _jsx(SectionHeader, {
|
|
190
|
-
children: "General"
|
|
191
|
-
}),
|
|
192
108
|
/*#__PURE__*/ _jsxs(Grid, {
|
|
193
109
|
container: true,
|
|
194
110
|
spacing: 2,
|
|
@@ -196,7 +112,7 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
|
|
|
196
112
|
children: [
|
|
197
113
|
/*#__PURE__*/ _jsx(Grid, {
|
|
198
114
|
item: true,
|
|
199
|
-
xs:
|
|
115
|
+
xs: 8,
|
|
200
116
|
children: /*#__PURE__*/ _jsx(TextField, {
|
|
201
117
|
required: true,
|
|
202
118
|
error: !!validation.name,
|
|
@@ -213,7 +129,35 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
|
|
|
213
129
|
}),
|
|
214
130
|
/*#__PURE__*/ _jsx(Grid, {
|
|
215
131
|
item: true,
|
|
216
|
-
xs:
|
|
132
|
+
xs: 4,
|
|
133
|
+
children: /*#__PURE__*/ _jsx(TextField, {
|
|
134
|
+
fullWidth: true,
|
|
135
|
+
label: "Display Label",
|
|
136
|
+
value: state.title || '',
|
|
137
|
+
onChange: (v)=>{
|
|
138
|
+
setState((draft)=>{
|
|
139
|
+
draft.title = v.target.value;
|
|
140
|
+
});
|
|
141
|
+
}
|
|
142
|
+
})
|
|
143
|
+
}),
|
|
144
|
+
/*#__PURE__*/ _jsx(Grid, {
|
|
145
|
+
item: true,
|
|
146
|
+
xs: 8,
|
|
147
|
+
children: /*#__PURE__*/ _jsx(TextField, {
|
|
148
|
+
fullWidth: true,
|
|
149
|
+
label: "Description",
|
|
150
|
+
value: state.description,
|
|
151
|
+
onChange: (v)=>{
|
|
152
|
+
setState((draft)=>{
|
|
153
|
+
draft.description = v.target.value;
|
|
154
|
+
});
|
|
155
|
+
}
|
|
156
|
+
})
|
|
157
|
+
}),
|
|
158
|
+
/*#__PURE__*/ _jsx(Grid, {
|
|
159
|
+
item: true,
|
|
160
|
+
xs: 4,
|
|
217
161
|
children: /*#__PURE__*/ _jsxs(FormControl, {
|
|
218
162
|
fullWidth: true,
|
|
219
163
|
children: [
|
|
@@ -238,50 +182,28 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
|
|
|
238
182
|
})
|
|
239
183
|
]
|
|
240
184
|
})
|
|
241
|
-
}),
|
|
242
|
-
/*#__PURE__*/ _jsx(Grid, {
|
|
243
|
-
item: true,
|
|
244
|
-
xs: 6,
|
|
245
|
-
children: /*#__PURE__*/ _jsx(TextField, {
|
|
246
|
-
fullWidth: true,
|
|
247
|
-
label: "Display Label",
|
|
248
|
-
value: state.title || '',
|
|
249
|
-
onChange: (v)=>{
|
|
250
|
-
setState((draft)=>{
|
|
251
|
-
draft.title = v.target.value;
|
|
252
|
-
});
|
|
253
|
-
}
|
|
254
|
-
})
|
|
255
|
-
}),
|
|
256
|
-
/*#__PURE__*/ _jsx(Grid, {
|
|
257
|
-
item: true,
|
|
258
|
-
xs: 12,
|
|
259
|
-
children: /*#__PURE__*/ _jsx(TextField, {
|
|
260
|
-
fullWidth: true,
|
|
261
|
-
label: "Description",
|
|
262
|
-
value: state.description,
|
|
263
|
-
onChange: (v)=>{
|
|
264
|
-
setState((draft)=>{
|
|
265
|
-
draft.description = v.target.value;
|
|
266
|
-
});
|
|
267
|
-
}
|
|
268
|
-
})
|
|
269
185
|
})
|
|
270
186
|
]
|
|
271
187
|
}),
|
|
188
|
+
/*#__PURE__*/ _jsx(Divider, {}),
|
|
272
189
|
state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
273
190
|
children: [
|
|
274
|
-
/*#__PURE__*/ _jsx(
|
|
191
|
+
/*#__PURE__*/ _jsx(Typography, {
|
|
192
|
+
py: 1,
|
|
193
|
+
variant: "subtitle1",
|
|
275
194
|
children: "Text Options"
|
|
276
195
|
}),
|
|
277
|
-
/*#__PURE__*/
|
|
278
|
-
container: true,
|
|
196
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
279
197
|
spacing: 2,
|
|
280
|
-
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
198
|
+
children: [
|
|
199
|
+
/*#__PURE__*/ _jsx(Box, {
|
|
200
|
+
children: /*#__PURE__*/ _jsx(VariablePreview, {
|
|
201
|
+
values: [
|
|
202
|
+
state.textVariableFields.value
|
|
203
|
+
]
|
|
204
|
+
})
|
|
205
|
+
}),
|
|
206
|
+
/*#__PURE__*/ _jsx(TextField, {
|
|
285
207
|
label: "Value",
|
|
286
208
|
value: state.textVariableFields.value,
|
|
287
209
|
onChange: (v)=>{
|
|
@@ -290,30 +212,43 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
|
|
|
290
212
|
});
|
|
291
213
|
}
|
|
292
214
|
})
|
|
293
|
-
|
|
215
|
+
]
|
|
294
216
|
})
|
|
295
217
|
]
|
|
296
218
|
}),
|
|
297
219
|
state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
|
|
298
220
|
children: [
|
|
299
|
-
/*#__PURE__*/ _jsx(
|
|
221
|
+
/*#__PURE__*/ _jsx(Typography, {
|
|
222
|
+
py: 1,
|
|
223
|
+
variant: "subtitle1",
|
|
300
224
|
children: "List Options"
|
|
301
225
|
}),
|
|
302
|
-
/*#__PURE__*/ _jsxs(
|
|
303
|
-
container: true,
|
|
226
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
304
227
|
spacing: 2,
|
|
305
228
|
mb: 2,
|
|
306
229
|
children: [
|
|
307
|
-
/*#__PURE__*/
|
|
308
|
-
|
|
309
|
-
|
|
230
|
+
state.listVariableFields.plugin.kind ? /*#__PURE__*/ _jsx(Box, {
|
|
231
|
+
children: /*#__PURE__*/ _jsx(ErrorBoundary, {
|
|
232
|
+
FallbackComponent: FallbackPreview,
|
|
233
|
+
resetKeys: [
|
|
234
|
+
previewSpec
|
|
235
|
+
],
|
|
236
|
+
children: /*#__PURE__*/ _jsx(VariableListPreview, {
|
|
237
|
+
definition: previewSpec,
|
|
238
|
+
onRefresh: refreshPreview
|
|
239
|
+
})
|
|
240
|
+
})
|
|
241
|
+
}) : /*#__PURE__*/ _jsx(VariablePreview, {
|
|
242
|
+
isLoading: true
|
|
243
|
+
}),
|
|
244
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
310
245
|
children: [
|
|
311
246
|
/*#__PURE__*/ _jsx(ClickAwayListener, {
|
|
312
247
|
onClickAway: ()=>refreshPreview(),
|
|
313
248
|
children: /*#__PURE__*/ _jsx(Box, {})
|
|
314
249
|
}),
|
|
315
250
|
/*#__PURE__*/ _jsx(PluginEditor, {
|
|
316
|
-
width:
|
|
251
|
+
width: "100%",
|
|
317
252
|
pluginType: "Variable",
|
|
318
253
|
pluginKindLabel: "Source",
|
|
319
254
|
value: state.listVariableFields.plugin,
|
|
@@ -325,73 +260,69 @@ export function VariableEditForm({ initialVariableDefinition , onChange , onCanc
|
|
|
325
260
|
})
|
|
326
261
|
]
|
|
327
262
|
}),
|
|
328
|
-
|
|
329
|
-
|
|
330
|
-
|
|
331
|
-
|
|
332
|
-
|
|
333
|
-
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
label: "Capturing Regexp Filter",
|
|
337
|
-
value: state.listVariableFields.capturing_regexp || '',
|
|
338
|
-
onChange: (e)=>{
|
|
339
|
-
setState((draft)=>{
|
|
263
|
+
/*#__PURE__*/ _jsx(Stack, {
|
|
264
|
+
children: /*#__PURE__*/ _jsx(TextField, {
|
|
265
|
+
label: "Capturing Regexp Filter",
|
|
266
|
+
value: state.listVariableFields.capturing_regexp || '',
|
|
267
|
+
onChange: (e)=>{
|
|
268
|
+
setState((draft)=>{
|
|
269
|
+
if (e.target.value) {
|
|
270
|
+
// TODO: do a better fix, if empty string => it should skip the filter
|
|
340
271
|
draft.listVariableFields.capturing_regexp = e.target.value;
|
|
341
|
-
}
|
|
342
|
-
|
|
343
|
-
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
348
|
-
resetKeys: [
|
|
349
|
-
previewSpec
|
|
350
|
-
],
|
|
351
|
-
children: /*#__PURE__*/ _jsx(VariableListPreview, {
|
|
352
|
-
onRefresh: refreshPreview,
|
|
353
|
-
definition: previewSpec
|
|
354
|
-
})
|
|
355
|
-
})
|
|
356
|
-
]
|
|
272
|
+
} else {
|
|
273
|
+
draft.listVariableFields.capturing_regexp = undefined;
|
|
274
|
+
}
|
|
275
|
+
});
|
|
276
|
+
},
|
|
277
|
+
helperText: "Optional, if you want to filter on captured result."
|
|
278
|
+
})
|
|
357
279
|
})
|
|
358
280
|
]
|
|
359
281
|
}),
|
|
360
|
-
/*#__PURE__*/ _jsx(
|
|
282
|
+
/*#__PURE__*/ _jsx(Divider, {}),
|
|
283
|
+
/*#__PURE__*/ _jsx(Typography, {
|
|
284
|
+
py: 1,
|
|
285
|
+
variant: "subtitle1",
|
|
361
286
|
children: "Dropdown Options"
|
|
362
287
|
}),
|
|
363
|
-
/*#__PURE__*/ _jsxs(
|
|
364
|
-
|
|
365
|
-
spacing: 1,
|
|
366
|
-
mb: 1,
|
|
288
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
289
|
+
spacing: "2",
|
|
367
290
|
children: [
|
|
368
|
-
/*#__PURE__*/ _jsxs(
|
|
369
|
-
item: true,
|
|
370
|
-
xs: 12,
|
|
291
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
371
292
|
children: [
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
|
|
378
|
-
|
|
379
|
-
|
|
293
|
+
/*#__PURE__*/ _jsx(FormControlLabel, {
|
|
294
|
+
control: /*#__PURE__*/ _jsx(Switch, {
|
|
295
|
+
checked: state.listVariableFields.allowMultiple,
|
|
296
|
+
onChange: (e)=>{
|
|
297
|
+
setState((draft)=>{
|
|
298
|
+
draft.listVariableFields.allowMultiple = e.target.checked;
|
|
299
|
+
});
|
|
300
|
+
}
|
|
301
|
+
}),
|
|
302
|
+
label: "Allow Multiple Values"
|
|
303
|
+
}),
|
|
304
|
+
/*#__PURE__*/ _jsx(Typography, {
|
|
305
|
+
variant: "caption",
|
|
306
|
+
children: "Enables multiple values to be selected at the same time"
|
|
380
307
|
})
|
|
381
308
|
]
|
|
382
309
|
}),
|
|
383
|
-
/*#__PURE__*/ _jsxs(
|
|
384
|
-
item: true,
|
|
385
|
-
xs: 12,
|
|
310
|
+
/*#__PURE__*/ _jsxs(Stack, {
|
|
386
311
|
children: [
|
|
387
|
-
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
312
|
+
/*#__PURE__*/ _jsx(FormControlLabel, {
|
|
313
|
+
control: /*#__PURE__*/ _jsx(Switch, {
|
|
314
|
+
checked: state.listVariableFields.allowAll,
|
|
315
|
+
onChange: (e)=>{
|
|
316
|
+
setState((draft)=>{
|
|
317
|
+
draft.listVariableFields.allowAll = e.target.checked;
|
|
318
|
+
});
|
|
319
|
+
}
|
|
320
|
+
}),
|
|
321
|
+
label: "Allow All option"
|
|
322
|
+
}),
|
|
323
|
+
/*#__PURE__*/ _jsx(Typography, {
|
|
324
|
+
variant: "caption",
|
|
325
|
+
children: "Enables an option to include all variable values"
|
|
395
326
|
})
|
|
396
327
|
]
|
|
397
328
|
})
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useMemo, useState } from 'react';\nimport {\n Box,\n Typography,\n Switch,\n TextField,\n Grid,\n FormControl,\n InputLabel,\n MenuItem,\n Select,\n Button,\n Stack,\n Alert,\n Chip,\n IconButton,\n ClickAwayListener,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary, InfoTooltip } from '@perses-dev/components';\nimport Refresh from 'mdi-material-ui/Refresh';\nimport Clipboard from 'mdi-material-ui/ClipboardOutline';\n\nimport { TOOLTIP_TEXT } from '../../../constants';\nimport { useListVariablePluginValues, VARIABLE_TYPES } from '../variable-model';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\nconst DEFAULT_MAX_PREVIEW_VALUES = 50;\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n /** Name validation */\n let name = null;\n if (!state.name) {\n name = 'Name is required';\n }\n // name can only contain alphanumeric characters and underscores and no spaces\n if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n }\n\n return {\n name,\n isValid: !name,\n };\n}\n\nconst SectionHeader = ({ children }: React.PropsWithChildren) => (\n <Typography pb={2} variant=\"subtitle1\">\n {children}\n </Typography>\n);\n\nfunction VariableListPreview({ definition, onRefresh }: { definition: ListVariableDefinition; onRefresh: () => void }) {\n const { data, isFetching, error } = useListVariablePluginValues(definition);\n const [maxValues, setMaxValues] = useState<number | undefined>(DEFAULT_MAX_PREVIEW_VALUES);\n const showAll = () => {\n setMaxValues(undefined);\n };\n let notShown = 0;\n\n if (data && data?.length > 0 && maxValues) {\n notShown = data.length - maxValues;\n }\n const errorMessage = (error as Error)?.message;\n\n return (\n <Box>\n <Stack direction={'row'} spacing={1} alignItems=\"center\">\n <Typography variant=\"caption\">Preview Values</Typography>\n <InfoTooltip description={TOOLTIP_TEXT.refreshVariableValues}>\n <IconButton onClick={onRefresh} size=\"small\">\n <Refresh />\n </IconButton>\n </InfoTooltip>\n <InfoTooltip description={TOOLTIP_TEXT.copyVariableValues}>\n <IconButton\n onClick={async () => {\n if (data?.length) {\n await navigator.clipboard.writeText(data.map((d) => d.label).join(','));\n alert('Copied to clipboard!');\n }\n }}\n size=\"small\"\n >\n <Clipboard />\n </IconButton>\n </InfoTooltip>\n </Stack>\n {errorMessage && <Alert severity=\"error\">{errorMessage}</Alert>}\n {isFetching && 'Loading...'}\n {data?.length === 0 && <Alert severity=\"info\">No results</Alert>}\n <>\n {data?.slice(0, maxValues).map((val) => (\n <Chip sx={{ mr: 1, mb: 1 }} size=\"small\" key={val.value} label={val.label} />\n ))}\n {notShown > 0 && (\n <Chip onClick={showAll} variant=\"outlined\" sx={{ mr: 1, mb: 1 }} size=\"small\" label={`+${notShown} more`} />\n )}\n </>\n </Box>\n );\n}\n\nexport function VariableEditForm({\n initialVariableDefinition,\n onChange,\n onCancel,\n}: {\n initialVariableDefinition: VariableDefinition;\n onChange: (def: VariableDefinition) => void;\n onCancel: () => void;\n}) {\n const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n const validation = useMemo(() => getValidation(state), [state]);\n\n const [previewKey, setPreviewKey] = React.useState(0);\n\n const refreshPreview = () => {\n setPreviewKey((prev) => prev + 1);\n };\n\n /** We use the `previewKey` that we increment to know when to explicitly update the\n * spec that will be used for preview. The reason why we do this is to avoid\n * having to re-fetch the values when the user is still editing the spec.\n */\n const previewSpec = useMemo(() => {\n return getVariableDefinitionFromState(state) as ListVariableDefinition;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [previewKey]);\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Variable</Typography>\n <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n <Button\n disabled={!validation.isValid}\n variant=\"contained\"\n onClick={() => {\n onChange(getVariableDefinitionFromState(state));\n }}\n >\n Update\n </Button>\n <Button\n color=\"secondary\"\n variant=\"outlined\"\n onClick={() => {\n onCancel();\n }}\n >\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <SectionHeader>General</SectionHeader>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={6}>\n <TextField\n required\n error={!!validation.name}\n fullWidth\n label=\"Name\"\n value={state.name}\n helperText={validation.name}\n onChange={(v) => {\n setState((draft) => {\n draft.name = v.target.value as string;\n });\n }}\n />\n </Grid>\n <Grid item xs={6}>\n <FormControl fullWidth>\n <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n <Select\n labelId=\"variable-type-select-label\"\n id=\"variable-type-select\"\n label=\"Type\"\n value={state.kind}\n onChange={(v) => {\n setState((draft) => {\n draft.kind = v.target.value as VariableEditorState['kind'];\n });\n }}\n >\n {VARIABLE_TYPES.map((v) => (\n <MenuItem key={v.kind} value={v.kind}>\n {v.label}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n </Grid>\n <Grid item xs={6}>\n <TextField\n fullWidth\n label=\"Display Label\"\n value={state.title || ''}\n onChange={(v) => {\n setState((draft) => {\n draft.title = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={12}>\n <TextField\n fullWidth\n label=\"Description\"\n value={state.description}\n onChange={(v) => {\n setState((draft) => {\n draft.description = v.target.value;\n });\n }}\n />\n </Grid>\n </Grid>\n\n {state.kind === 'TextVariable' && (\n <>\n <SectionHeader>Text Options</SectionHeader>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={12}>\n <TextField\n label=\"Value\"\n value={state.textVariableFields.value}\n onChange={(v) => {\n setState((draft) => {\n draft.textVariableFields.value = v.target.value;\n });\n }}\n />\n </Grid>\n </Grid>\n </>\n )}\n\n {state.kind === 'ListVariable' && (\n <>\n <SectionHeader>List Options</SectionHeader>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={6}>\n {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n <ClickAwayListener onClickAway={() => refreshPreview()}>\n <Box />\n </ClickAwayListener>\n {/** */}\n <PluginEditor\n width={500}\n pluginType=\"Variable\"\n pluginKindLabel=\"Source\"\n value={state.listVariableFields.plugin}\n onChange={(val) => {\n setState((draft) => {\n draft.listVariableFields.plugin = val;\n });\n }}\n />\n </Grid>\n\n {state.listVariableFields.plugin.kind && (\n <Grid item xs={12}>\n <TextField\n sx={{ mb: 1 }}\n label=\"Capturing Regexp Filter\"\n value={state.listVariableFields.capturing_regexp || ''}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.capturing_regexp = e.target.value;\n });\n }}\n />\n <ErrorBoundary FallbackComponent={() => <div>Error previewing values</div>} resetKeys={[previewSpec]}>\n <VariableListPreview onRefresh={refreshPreview} definition={previewSpec} />\n </ErrorBoundary>\n </Grid>\n )}\n </Grid>\n\n <SectionHeader>Dropdown Options</SectionHeader>\n <Grid container spacing={1} mb={1}>\n <Grid item xs={12}>\n Allow Multiple\n <Switch\n checked={state.listVariableFields.allowMultiple}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowMultiple = e.target.checked;\n });\n }}\n />\n </Grid>\n <Grid item xs={12}>\n Allow All\n <Switch\n checked={state.listVariableFields.allowAll}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowAll = e.target.checked;\n });\n }}\n />\n </Grid>\n </Grid>\n </>\n )}\n </Box>\n </>\n );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","InputLabel","MenuItem","Select","Button","Stack","Alert","Chip","IconButton","ClickAwayListener","useImmer","PluginEditor","ErrorBoundary","InfoTooltip","Refresh","Clipboard","TOOLTIP_TEXT","useListVariablePluginValues","VARIABLE_TYPES","getVariableDefinitionFromState","getInitialState","DEFAULT_MAX_PREVIEW_VALUES","getValidation","state","name","test","isValid","SectionHeader","children","pb","variant","VariableListPreview","definition","onRefresh","data","isFetching","error","maxValues","setMaxValues","showAll","undefined","notShown","length","errorMessage","message","direction","spacing","alignItems","description","refreshVariableValues","onClick","size","copyVariableValues","navigator","clipboard","writeText","map","d","label","join","alert","severity","slice","val","sx","mr","mb","value","VariableEditForm","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","display","padding","theme","borderBottom","palette","divider","marginLeft","disabled","color","overflowY","container","item","xs","required","fullWidth","helperText","v","draft","target","id","labelId","kind","title","textVariableFields","onClickAway","width","pluginType","pluginKindLabel","listVariableFields","plugin","capturing_regexp","e","FallbackComponent","div","resetKeys","checked","allowMultiple","allowAll"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React, { useMemo, useState } from 'react';\nimport {\n Box,\n Typography,\n Switch,\n TextField,\n Grid,\n FormControl,\n FormControlLabel,\n InputLabel,\n MenuItem,\n Select,\n Button,\n Stack,\n ClickAwayListener,\n Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\n\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n /** Name validation */\n let name = null;\n if (!state.name) {\n name = 'Name is required';\n }\n // name can only contain alphanumeric characters and underscores and no spaces\n if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n }\n\n return {\n name,\n isValid: !name,\n };\n}\n\nfunction FallbackPreview() {\n return <div>Error previewing values</div>;\n}\n\ninterface VariableEditFormProps {\n initialVariableDefinition: VariableDefinition;\n onChange: (def: VariableDefinition) => void;\n onCancel: () => void;\n}\n\nexport function VariableEditForm(props: VariableEditFormProps) {\n const { initialVariableDefinition, onChange, onCancel } = props;\n const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n const validation = useMemo(() => getValidation(state), [state]);\n\n const [previewKey, setPreviewKey] = useState(0);\n\n const refreshPreview = () => {\n setPreviewKey((prev) => prev + 1);\n };\n\n /** We use the `previewKey` that we increment to know when to explicitly update the\n * spec that will be used for preview. The reason why we do this is to avoid\n * having to re-fetch the values when the user is still editing the spec.\n */\n const previewSpec = useMemo(() => {\n return getVariableDefinitionFromState(state) as ListVariableDefinition;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [previewKey]);\n\n return (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Edit Variable</Typography>\n <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n <Button\n disabled={!validation.isValid}\n variant=\"contained\"\n onClick={() => {\n onChange(getVariableDefinitionFromState(state));\n }}\n >\n Update\n </Button>\n <Button\n color=\"secondary\"\n variant=\"outlined\"\n onClick={() => {\n onCancel();\n }}\n >\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Grid container spacing={2} mb={2}>\n <Grid item xs={8}>\n <TextField\n required\n error={!!validation.name}\n fullWidth\n label=\"Name\"\n value={state.name}\n helperText={validation.name}\n onChange={(v) => {\n setState((draft) => {\n draft.name = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={4}>\n <TextField\n fullWidth\n label=\"Display Label\"\n value={state.title || ''}\n onChange={(v) => {\n setState((draft) => {\n draft.title = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={8}>\n <TextField\n fullWidth\n label=\"Description\"\n value={state.description}\n onChange={(v) => {\n setState((draft) => {\n draft.description = v.target.value;\n });\n }}\n />\n </Grid>\n <Grid item xs={4}>\n <FormControl fullWidth>\n <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n <Select\n labelId=\"variable-type-select-label\"\n id=\"variable-type-select\"\n label=\"Type\"\n value={state.kind}\n onChange={(v) => {\n setState((draft) => {\n draft.kind = v.target.value as VariableEditorState['kind'];\n });\n }}\n >\n {VARIABLE_TYPES.map((v) => (\n <MenuItem key={v.kind} value={v.kind}>\n {v.label}\n </MenuItem>\n ))}\n </Select>\n </FormControl>\n </Grid>\n </Grid>\n\n <Divider />\n\n {state.kind === 'TextVariable' && (\n <>\n <Typography py={1} variant=\"subtitle1\">\n Text Options\n </Typography>\n <Stack spacing={2}>\n <Box>\n <VariablePreview values={[state.textVariableFields.value]} />\n </Box>\n <TextField\n label=\"Value\"\n value={state.textVariableFields.value}\n onChange={(v) => {\n setState((draft) => {\n draft.textVariableFields.value = v.target.value;\n });\n }}\n />\n </Stack>\n </>\n )}\n\n {state.kind === 'ListVariable' && (\n <>\n <Typography py={1} variant=\"subtitle1\">\n List Options\n </Typography>\n <Stack spacing={2} mb={2}>\n {state.listVariableFields.plugin.kind ? (\n <Box>\n <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n </ErrorBoundary>\n </Box>\n ) : (\n <VariablePreview isLoading={true} />\n )}\n\n <Stack>\n {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n <ClickAwayListener onClickAway={() => refreshPreview()}>\n <Box />\n </ClickAwayListener>\n {/** */}\n <PluginEditor\n width=\"100%\"\n pluginType=\"Variable\"\n pluginKindLabel=\"Source\"\n value={state.listVariableFields.plugin}\n onChange={(val) => {\n setState((draft) => {\n draft.listVariableFields.plugin = val;\n });\n }}\n />\n </Stack>\n\n <Stack>\n <TextField\n label=\"Capturing Regexp Filter\"\n value={state.listVariableFields.capturing_regexp || ''}\n onChange={(e) => {\n setState((draft) => {\n if (e.target.value) {\n // TODO: do a better fix, if empty string => it should skip the filter\n draft.listVariableFields.capturing_regexp = e.target.value;\n } else {\n draft.listVariableFields.capturing_regexp = undefined;\n }\n });\n }}\n helperText=\"Optional, if you want to filter on captured result.\"\n />\n </Stack>\n </Stack>\n\n <Divider />\n\n <Typography py={1} variant=\"subtitle1\">\n Dropdown Options\n </Typography>\n <Stack spacing=\"2\">\n <Stack>\n <FormControlLabel\n control={\n <Switch\n checked={state.listVariableFields.allowMultiple}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowMultiple = e.target.checked;\n });\n }}\n />\n }\n label=\"Allow Multiple Values\"\n />\n <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n </Stack>\n <Stack>\n <FormControlLabel\n control={\n <Switch\n checked={state.listVariableFields.allowAll}\n onChange={(e) => {\n setState((draft) => {\n draft.listVariableFields.allowAll = e.target.checked;\n });\n }}\n />\n }\n label=\"Allow All option\"\n />\n <Typography variant=\"caption\">Enables an option to include all variable values</Typography>\n </Stack>\n </Stack>\n </>\n )}\n </Box>\n </>\n );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","FormControlLabel","InputLabel","MenuItem","Select","Button","Stack","ClickAwayListener","Divider","useImmer","PluginEditor","ErrorBoundary","VARIABLE_TYPES","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","getValidation","state","name","test","isValid","FallbackPreview","div","VariableEditForm","props","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","overflowY","container","mb","item","xs","required","error","fullWidth","label","value","helperText","v","draft","target","title","description","id","labelId","kind","map","py","values","textVariableFields","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturing_regexp","e","undefined","control","checked","allowMultiple","allowAll"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,IAAIC,OAAO,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACjD,SACEC,GAAG,EACHC,UAAU,EACVC,MAAM,EACNC,SAAS,EACTC,IAAI,EACJC,WAAW,EACXC,gBAAgB,EAChBC,UAAU,EACVC,QAAQ,EACRC,MAAM,EACNC,MAAM,EACNC,KAAK,EACLC,iBAAiB,EACjBC,OAAO,QACF,eAAe,CAAC;AACvB,SAASC,QAAQ,QAAQ,WAAW,CAAC;AACrC,SAASC,YAAY,QAAQ,2BAA2B,CAAC;AAEzD,SAASC,aAAa,QAAQ,wBAAwB,CAAC;AAEvD,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,mBAAmB,EAAEC,eAAe,QAAQ,mBAAmB,CAAC;AACzE,SAA8BC,8BAA8B,EAAEC,eAAe,QAAQ,8BAA8B,CAAC;AAEpH,+CAA+C;AAC/C,SAASC,aAAa,CAACC,KAAyC,EAAE;IAChE,oBAAoB,GACpB,IAAIC,IAAI,GAAG,IAAI,AAAC;IAChB,IAAI,CAACD,KAAK,CAACC,IAAI,EAAE;QACfA,IAAI,GAAG,kBAAkB,CAAC;IAC5B,CAAC;IACD,8EAA8E;IAC9E,IAAID,KAAK,CAACC,IAAI,IAAI,CAAC,mBAAmBC,IAAI,CAACF,KAAK,CAACC,IAAI,CAAC,EAAE;QACtDA,IAAI,GAAG,wEAAwE,CAAC;IAClF,CAAC;IAED,OAAO;QACLA,IAAI;QACJE,OAAO,EAAE,CAACF,IAAI;KACf,CAAC;AACJ,CAAC;AAED,SAASG,eAAe,GAAG;IACzB,qBAAO,KAACC,KAAG;kBAAC,yBAAuB;MAAM,CAAC;AAC5C,CAAC;AAQD,OAAO,SAASC,gBAAgB,CAACC,KAA4B,EAAE;IAC7D,MAAM,EAAEC,yBAAyB,CAAA,EAAEC,QAAQ,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAChE,MAAM,CAACP,KAAK,EAAEW,QAAQ,CAAC,GAAGpB,QAAQ,CAACO,eAAe,CAACU,yBAAyB,CAAC,CAAC,AAAC;IAC/E,MAAMI,UAAU,GAAGrC,OAAO,CAAC,IAAMwB,aAAa,CAACC,KAAK,CAAC,EAAE;QAACA,KAAK;KAAC,CAAC,AAAC;IAEhE,MAAM,CAACa,UAAU,EAAEC,aAAa,CAAC,GAAGtC,QAAQ,CAAC,CAAC,CAAC,AAAC;IAEhD,MAAMuC,cAAc,GAAG,IAAM;QAC3BD,aAAa,CAAC,CAACE,IAAI,GAAKA,IAAI,GAAG,CAAC,CAAC,CAAC;IACpC,CAAC,AAAC;IAEF;;;GAGC,GACD,MAAMC,WAAW,GAAG1C,OAAO,CAAC,IAAM;QAChC,OAAOsB,8BAA8B,CAACG,KAAK,CAAC,CAA2B;IACvE,uDAAuD;IACzD,CAAC,EAAE;QAACa,UAAU;KAAC,CAAC,AAAC;IAEjB,qBACE;;0BACE,MAACpC,GAAG;gBACFyC,EAAE,EAAE;oBACFC,OAAO,EAAE,MAAM;oBACfC,UAAU,EAAE,QAAQ;oBACpBC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;oBACvCC,YAAY,EAAE,CAACF,KAAK,GAAK,CAAC,UAAU,EAAEA,KAAK,CAACG,OAAO,CAACC,OAAO,CAAC,CAAC;iBAC9D;;kCAED,KAAChD,UAAU;wBAACiD,OAAO,EAAC,IAAI;kCAAC,eAAa;sBAAa;kCACnD,MAACvC,KAAK;wBAACwC,SAAS,EAAC,KAAK;wBAACL,OAAO,EAAE,CAAC;wBAAEL,EAAE,EAAE;4BAAEW,UAAU,EAAE,MAAM;yBAAE;;0CAC3D,KAAC1C,MAAM;gCACL2C,QAAQ,EAAE,CAAClB,UAAU,CAACT,OAAO;gCAC7BwB,OAAO,EAAC,WAAW;gCACnBI,OAAO,EAAE,IAAM;oCACbtB,QAAQ,CAACZ,8BAA8B,CAACG,KAAK,CAAC,CAAC,CAAC;gCAClD,CAAC;0CACF,QAED;8BAAS;0CACT,KAACb,MAAM;gCACL6C,KAAK,EAAC,WAAW;gCACjBL,OAAO,EAAC,UAAU;gCAClBI,OAAO,EAAE,IAAM;oCACbrB,QAAQ,EAAE,CAAC;gCACb,CAAC;0CACF,QAED;8BAAS;;sBACH;;cACJ;0BACN,MAACjC,GAAG;gBAAC4C,OAAO,EAAE,CAAC;gBAAEH,EAAE,EAAE;oBAAEe,SAAS,EAAE,QAAQ;iBAAE;;kCAC1C,MAACpD,IAAI;wBAACqD,SAAS;wBAACX,OAAO,EAAE,CAAC;wBAAEY,EAAE,EAAE,CAAC;;0CAC/B,KAACtD,IAAI;gCAACuD,IAAI;gCAACC,EAAE,EAAE,CAAC;0CACd,cAAA,KAACzD,SAAS;oCACR0D,QAAQ;oCACRC,KAAK,EAAE,CAAC,CAAC3B,UAAU,CAACX,IAAI;oCACxBuC,SAAS;oCACTC,KAAK,EAAC,MAAM;oCACZC,KAAK,EAAE1C,KAAK,CAACC,IAAI;oCACjB0C,UAAU,EAAE/B,UAAU,CAACX,IAAI;oCAC3BQ,QAAQ,EAAE,CAACmC,CAAC,GAAK;wCACfjC,QAAQ,CAAC,CAACkC,KAAK,GAAK;4CAClBA,KAAK,CAAC5C,IAAI,GAAG2C,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;wCAC9B,CAAC,CAAC,CAAC;oCACL,CAAC;kCACD;8BACG;0CACP,KAAC7D,IAAI;gCAACuD,IAAI;gCAACC,EAAE,EAAE,CAAC;0CACd,cAAA,KAACzD,SAAS;oCACR4D,SAAS;oCACTC,KAAK,EAAC,eAAe;oCACrBC,KAAK,EAAE1C,KAAK,CAAC+C,KAAK,IAAI,EAAE;oCACxBtC,QAAQ,EAAE,CAACmC,CAAC,GAAK;wCACfjC,QAAQ,CAAC,CAACkC,KAAK,GAAK;4CAClBA,KAAK,CAACE,KAAK,GAAGH,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;wCAC/B,CAAC,CAAC,CAAC;oCACL,CAAC;kCACD;8BACG;0CACP,KAAC7D,IAAI;gCAACuD,IAAI;gCAACC,EAAE,EAAE,CAAC;0CACd,cAAA,KAACzD,SAAS;oCACR4D,SAAS;oCACTC,KAAK,EAAC,aAAa;oCACnBC,KAAK,EAAE1C,KAAK,CAACgD,WAAW;oCACxBvC,QAAQ,EAAE,CAACmC,CAAC,GAAK;wCACfjC,QAAQ,CAAC,CAACkC,KAAK,GAAK;4CAClBA,KAAK,CAACG,WAAW,GAAGJ,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;wCACrC,CAAC,CAAC,CAAC;oCACL,CAAC;kCACD;8BACG;0CACP,KAAC7D,IAAI;gCAACuD,IAAI;gCAACC,EAAE,EAAE,CAAC;0CACd,cAAA,MAACvD,WAAW;oCAAC0D,SAAS;;sDACpB,KAACxD,UAAU;4CAACiE,EAAE,EAAC,4BAA4B;sDAAC,MAAI;0CAAa;sDAC7D,KAAC/D,MAAM;4CACLgE,OAAO,EAAC,4BAA4B;4CACpCD,EAAE,EAAC,sBAAsB;4CACzBR,KAAK,EAAC,MAAM;4CACZC,KAAK,EAAE1C,KAAK,CAACmD,IAAI;4CACjB1C,QAAQ,EAAE,CAACmC,CAAC,GAAK;gDACfjC,QAAQ,CAAC,CAACkC,KAAK,GAAK;oDAClBA,KAAK,CAACM,IAAI,GAAGP,CAAC,CAACE,MAAM,CAACJ,KAAK,AAA+B,CAAC;gDAC7D,CAAC,CAAC,CAAC;4CACL,CAAC;sDAEAhD,cAAc,CAAC0D,GAAG,CAAC,CAACR,CAAC,iBACpB,KAAC3D,QAAQ;oDAAcyD,KAAK,EAAEE,CAAC,CAACO,IAAI;8DACjCP,CAAC,CAACH,KAAK;mDADKG,CAAC,CAACO,IAAI,CAEV,AACZ,CAAC;0CACK;;kCACG;8BACT;;sBACF;kCAEP,KAAC7D,OAAO,KAAG;oBAEVU,KAAK,CAACmD,IAAI,KAAK,cAAc,kBAC5B;;0CACE,KAACzE,UAAU;gCAAC2E,EAAE,EAAE,CAAC;gCAAE1B,OAAO,EAAC,WAAW;0CAAC,cAEvC;8BAAa;0CACb,MAACvC,KAAK;gCAACmC,OAAO,EAAE,CAAC;;kDACf,KAAC9C,GAAG;kDACF,cAAA,KAACmB,eAAe;4CAAC0D,MAAM,EAAE;gDAACtD,KAAK,CAACuD,kBAAkB,CAACb,KAAK;6CAAC;0CAAI;sCACzD;kDACN,KAAC9D,SAAS;wCACR6D,KAAK,EAAC,OAAO;wCACbC,KAAK,EAAE1C,KAAK,CAACuD,kBAAkB,CAACb,KAAK;wCACrCjC,QAAQ,EAAE,CAACmC,CAAC,GAAK;4CACfjC,QAAQ,CAAC,CAACkC,KAAK,GAAK;gDAClBA,KAAK,CAACU,kBAAkB,CAACb,KAAK,GAAGE,CAAC,CAACE,MAAM,CAACJ,KAAK,CAAC;4CAClD,CAAC,CAAC,CAAC;wCACL,CAAC;sCACD;;8BACI;;sBACP,AACJ;oBAEA1C,KAAK,CAACmD,IAAI,KAAK,cAAc,kBAC5B;;0CACE,KAACzE,UAAU;gCAAC2E,EAAE,EAAE,CAAC;gCAAE1B,OAAO,EAAC,WAAW;0CAAC,cAEvC;8BAAa;0CACb,MAACvC,KAAK;gCAACmC,OAAO,EAAE,CAAC;gCAAEY,EAAE,EAAE,CAAC;;oCACrBnC,KAAK,CAACwD,kBAAkB,CAACC,MAAM,CAACN,IAAI,iBACnC,KAAC1E,GAAG;kDACF,cAAA,KAACgB,aAAa;4CAACiE,iBAAiB,EAAEtD,eAAe;4CAAEuD,SAAS,EAAE;gDAAC1C,WAAW;6CAAC;sDACzE,cAAA,KAACtB,mBAAmB;gDAACiE,UAAU,EAAE3C,WAAW;gDAAE4C,SAAS,EAAE9C,cAAc;8CAAI;0CAC7D;sCACZ,iBAEN,KAACnB,eAAe;wCAACkE,SAAS,EAAE,IAAI;sCAAI,AACrC;kDAED,MAAC1E,KAAK;;0DAEJ,KAACC,iBAAiB;gDAAC0E,WAAW,EAAE,IAAMhD,cAAc,EAAE;0DACpD,cAAA,KAACtC,GAAG,KAAG;8CACW;0DAEpB,KAACe,YAAY;gDACXwE,KAAK,EAAC,MAAM;gDACZC,UAAU,EAAC,UAAU;gDACrBC,eAAe,EAAC,QAAQ;gDACxBxB,KAAK,EAAE1C,KAAK,CAACwD,kBAAkB,CAACC,MAAM;gDACtChD,QAAQ,EAAE,CAAC0D,GAAG,GAAK;oDACjBxD,QAAQ,CAAC,CAACkC,KAAK,GAAK;wDAClBA,KAAK,CAACW,kBAAkB,CAACC,MAAM,GAAGU,GAAG,CAAC;oDACxC,CAAC,CAAC,CAAC;gDACL,CAAC;8CACD;;sCACI;kDAER,KAAC/E,KAAK;kDACJ,cAAA,KAACR,SAAS;4CACR6D,KAAK,EAAC,yBAAyB;4CAC/BC,KAAK,EAAE1C,KAAK,CAACwD,kBAAkB,CAACY,gBAAgB,IAAI,EAAE;4CACtD3D,QAAQ,EAAE,CAAC4D,CAAC,GAAK;gDACf1D,QAAQ,CAAC,CAACkC,KAAK,GAAK;oDAClB,IAAIwB,CAAC,CAACvB,MAAM,CAACJ,KAAK,EAAE;wDAClB,sEAAsE;wDACtEG,KAAK,CAACW,kBAAkB,CAACY,gBAAgB,GAAGC,CAAC,CAACvB,MAAM,CAACJ,KAAK,CAAC;oDAC7D,OAAO;wDACLG,KAAK,CAACW,kBAAkB,CAACY,gBAAgB,GAAGE,SAAS,CAAC;oDACxD,CAAC;gDACH,CAAC,CAAC,CAAC;4CACL,CAAC;4CACD3B,UAAU,EAAC,qDAAqD;0CAChE;sCACI;;8BACF;0CAER,KAACrD,OAAO,KAAG;0CAEX,KAACZ,UAAU;gCAAC2E,EAAE,EAAE,CAAC;gCAAE1B,OAAO,EAAC,WAAW;0CAAC,kBAEvC;8BAAa;0CACb,MAACvC,KAAK;gCAACmC,OAAO,EAAC,GAAG;;kDAChB,MAACnC,KAAK;;0DACJ,KAACL,gBAAgB;gDACfwF,OAAO,gBACL,KAAC5F,MAAM;oDACL6F,OAAO,EAAExE,KAAK,CAACwD,kBAAkB,CAACiB,aAAa;oDAC/ChE,QAAQ,EAAE,CAAC4D,CAAC,GAAK;wDACf1D,QAAQ,CAAC,CAACkC,KAAK,GAAK;4DAClBA,KAAK,CAACW,kBAAkB,CAACiB,aAAa,GAAGJ,CAAC,CAACvB,MAAM,CAAC0B,OAAO,CAAC;wDAC5D,CAAC,CAAC,CAAC;oDACL,CAAC;kDACD;gDAEJ/B,KAAK,EAAC,uBAAuB;8CAC7B;0DACF,KAAC/D,UAAU;gDAACiD,OAAO,EAAC,SAAS;0DAAC,yDAAuD;8CAAa;;sCAC5F;kDACR,MAACvC,KAAK;;0DACJ,KAACL,gBAAgB;gDACfwF,OAAO,gBACL,KAAC5F,MAAM;oDACL6F,OAAO,EAAExE,KAAK,CAACwD,kBAAkB,CAACkB,QAAQ;oDAC1CjE,QAAQ,EAAE,CAAC4D,CAAC,GAAK;wDACf1D,QAAQ,CAAC,CAACkC,KAAK,GAAK;4DAClBA,KAAK,CAACW,kBAAkB,CAACkB,QAAQ,GAAGL,CAAC,CAACvB,MAAM,CAAC0B,OAAO,CAAC;wDACvD,CAAC,CAAC,CAAC;oDACL,CAAC;kDACD;gDAEJ/B,KAAK,EAAC,kBAAkB;8CACxB;0DACF,KAAC/D,UAAU;gDAACiD,OAAO,EAAC,SAAS;0DAAC,kDAAgD;8CAAa;;sCACrF;;8BACF;;sBACP,AACJ;;cACG;;MACL,CACH;AACJ,CAAC"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { ListVariableDefinition } from '@perses-dev/core';
|
|
3
|
+
interface VariablePreviewProps {
|
|
4
|
+
values?: string[];
|
|
5
|
+
onRefresh?: () => void;
|
|
6
|
+
isLoading?: boolean;
|
|
7
|
+
error?: string;
|
|
8
|
+
}
|
|
9
|
+
export declare function VariablePreview(props: VariablePreviewProps): JSX.Element;
|
|
10
|
+
interface VariableListPreviewProps {
|
|
11
|
+
definition: ListVariableDefinition;
|
|
12
|
+
onRefresh: () => void;
|
|
13
|
+
}
|
|
14
|
+
export declare function VariableListPreview(props: VariableListPreviewProps): JSX.Element;
|
|
15
|
+
export {};
|
|
16
|
+
//# sourceMappingURL=VariablePreview.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"VariablePreview.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariablePreview.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,sBAAsB,EAAE,MAAM,kBAAkB,CAAC;AAM1D,UAAU,oBAAoB;IAC5B,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC;IACvB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuD1D;AAED,UAAU,wBAAwB;IAChC,UAAU,EAAE,sBAAsB,CAAC;IACnC,SAAS,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAalE"}
|