@perses-dev/dashboards 0.29.1 → 0.31.0

package/dist/cjs/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -24,16 +24,9 @@ const _material = require("@mui/material");
 const _useImmer = require("use-immer");
 const _pluginSystem = require("@perses-dev/plugin-system");
 const _components = require("@perses-dev/components");
-const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
-const _clipboardOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ClipboardOutline"));
-const _constants = require("../../../constants");
 const _variableModel = require("../variable-model");
+const _variablePreview = require("./VariablePreview");
 const _variableEditorFormModel = require("./variable-editor-form-model");
-function _interopRequireDefault(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
-}
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -73,7 +66,6 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const DEFAULT_MAX_PREVIEW_VALUES = 50;
 // TODO: Replace with proper validation library
 function getValidation(state) {
     /** Name validation */ let name = null;
@@ -89,100 +81,22 @@ function getValidation(state) {
         isValid: !name
     };
 }
-const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-        pb: 2,
-        variant: "subtitle1",
-        children: children
-    });
-function VariableListPreview({ definition , onRefresh  }) {
-    const { data , isFetching , error  } = (0, _variableModel.useListVariablePluginValues)(definition);
-    const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
-    const showAll = ()=>{
-        setMaxValues(undefined);
-    };
-    let notShown = 0;
-    if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
-        notShown = data.length - maxValues;
-    }
-    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
-        children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-                direction: 'row',
-                spacing: 1,
-                alignItems: "center",
-                children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                        variant: "caption",
-                        children: "Preview Values"
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            onClick: onRefresh,
-                            size: "small",
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
-                        description: _constants.TOOLTIP_TEXT.copyVariableValues,
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
-                            onClick: async ()=>{
-                                if (data === null || data === void 0 ? void 0 : data.length) {
-                                    await navigator.clipboard.writeText(data.map((d)=>d.label).join(','));
-                                    alert('Copied to clipboard!');
-                                }
-                            },
-                            size: "small",
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_clipboardOutline.default, {})
-                        })
-                    })
-                ]
-            }),
-            errorMessage && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
-                severity: "error",
-                children: errorMessage
-            }),
-            isFetching && 'Loading...',
-            (data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
-                severity: "info",
-                children: "No results"
-            }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
-                children: [
-                    data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
-                            sx: {
-                                mr: 1,
-                                mb: 1
-                            },
-                            size: "small",
-                            label: val.label
-                        }, val.value)),
-                    notShown > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
-                        onClick: showAll,
-                        variant: "outlined",
-                        sx: {
-                            mr: 1,
-                            mb: 1
-                        },
-                        size: "small",
-                        label: `+${notShown} more`
-                    })
-                ]
-            })
-        ]
+function FallbackPreview() {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+        children: "Error previewing values"
     });
 }
-function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+function VariableEditForm(props) {
+    const { initialVariableDefinition , onChange , onCancel  } = props;
     const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
     const validation = (0, _react.useMemo)(()=>getValidation(state), [
         state
     ]);
-    const [previewKey, setPreviewKey] = _react.default.useState(0);
+    const [previewKey, setPreviewKey] = (0, _react.useState)(0);
     const refreshPreview = ()=>{
         setPreviewKey((prev)=>prev + 1);
     };
-    /** We use the `previewKey` that we increment to know when to explicity update the
+    /** We use the `previewKey` that we increment to know when to explicitly update the
    * spec that will be used for preview. The reason why we do this is to avoid
    * having to re-fetch the values when the user is still editing the spec.
    */ const previewSpec = (0, _react.useMemo)(()=>{
@@ -238,9 +152,6 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                     overflowY: 'scroll'
                 },
                 children: [
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
-                        children: "General"
-                    }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
                         container: true,
                         spacing: 2,
@@ -248,7 +159,7 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         children: [
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                                 item: true,
-                                xs: 6,
+                                xs: 8,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                                     required: true,
                                     error: !!validation.name,
@@ -265,7 +176,35 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                             }),
                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
                                 item: true,
-                                xs: 6,
+                                xs: 4,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    fullWidth: true,
+                                    label: "Display Label",
+                                    value: state.title || '',
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.title = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 8,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                    fullWidth: true,
+                                    label: "Description",
+                                    value: state.description,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.description = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                                item: true,
+                                xs: 4,
                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
                                     fullWidth: true,
                                     children: [
@@ -290,50 +229,28 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                         })
                                     ]
                                 })
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 6,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    fullWidth: true,
-                                    label: "Display Label",
-                                    value: state.title || '',
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.title = v.target.value;
-                                        });
-                                    }
-                                })
-                            }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                item: true,
-                                xs: 12,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                    fullWidth: true,
-                                    label: "Description",
-                                    value: state.description,
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.description = v.target.value;
-                                        });
-                                    }
-                                })
                             })
                         ]
                     }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {}),
                     state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                py: 1,
+                                variant: "subtitle1",
                                 children: "Text Options"
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                container: true,
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 spacing: 2,
-                                mb: 2,
-                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
-                                    item: true,
-                                    xs: 12,
-                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariablePreview, {
+                                            values: [
+                                                state.textVariableFields.value
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                                         label: "Value",
                                         value: state.textVariableFields.value,
                                         onChange: (v)=>{
@@ -342,30 +259,43 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                             });
                                         }
                                     })
-                                })
+                                ]
                             })
                         ]
                     }),
                     state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
                         children: [
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                py: 1,
+                                variant: "subtitle1",
                                 children: "List Options"
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                container: true,
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                 spacing: 2,
                                 mb: 2,
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                        item: true,
-                                        xs: 6,
+                                    state.listVariableFields.plugin.kind ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
+                                            FallbackComponent: FallbackPreview,
+                                            resetKeys: [
+                                                previewSpec
+                                            ],
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariableListPreview, {
+                                                definition: previewSpec,
+                                                onRefresh: refreshPreview
+                                            })
+                                        })
+                                    }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variablePreview.VariablePreview, {
+                                        isLoading: true
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                         children: [
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.ClickAwayListener, {
                                                 onClickAway: ()=>refreshPreview(),
                                                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {})
                                             }),
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
-                                                width: 500,
+                                                width: "100%",
                                                 pluginType: "Variable",
                                                 pluginKindLabel: "Source",
                                                 value: state.listVariableFields.plugin,
@@ -377,73 +307,69 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                                             })
                                         ]
                                     }),
-                                    state.listVariableFields.plugin.kind && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                        item: true,
-                                        xs: 12,
-                                        children: [
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                                                sx: {
-                                                    mb: 1
-                                                },
-                                                label: "Capturing Regexp Filter",
-                                                value: state.listVariableFields.capturing_regexp || '',
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                            label: "Capturing Regexp Filter",
+                                            value: state.listVariableFields.capturing_regexp || '',
+                                            onChange: (e)=>{
+                                                setState((draft)=>{
+                                                    if (e.target.value) {
+                                                        // TODO: do a better fix, if empty string => it should skip the filter
                                                         draft.listVariableFields.capturing_regexp = e.target.value;
-                                                    });
-                                                }
-                                            }),
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorBoundary, {
-                                                FallbackComponent: ()=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                                                        children: "Error previewing values"
-                                                    }),
-                                                resetKeys: [
-                                                    previewSpec
-                                                ],
-                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariableListPreview, {
-                                                    onRefresh: refreshPreview,
-                                                    definition: previewSpec
-                                                })
-                                            })
-                                        ]
+                                                    } else {
+                                                        draft.listVariableFields.capturing_regexp = undefined;
+                                                    }
+                                                });
+                                            },
+                                            helperText: "Optional, if you want to filter on captured result."
+                                        })
                                     })
                                 ]
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {}),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                py: 1,
+                                variant: "subtitle1",
                                 children: "Dropdown Options"
                             }),
-                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                container: true,
-                                spacing: 1,
-                                mb: 1,
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                spacing: "2",
                                 children: [
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                        item: true,
-                                        xs: 12,
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                         children: [
-                                            "Allow Multiple",
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                checked: state.listVariableFields.allowMultiple,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.allowMultiple = e.target.checked;
-                                                    });
-                                                }
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                    checked: state.listVariableFields.allowMultiple,
+                                                    onChange: (e)=>{
+                                                        setState((draft)=>{
+                                                            draft.listVariableFields.allowMultiple = e.target.checked;
+                                                        });
+                                                    }
+                                                }),
+                                                label: "Allow Multiple Values"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Enables multiple values to be selected at the same time"
                                             })
                                         ]
                                     }),
-                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
-                                        item: true,
-                                        xs: 12,
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
                                         children: [
-                                            "Allow All",
-                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                                                checked: state.listVariableFields.allowAll,
-                                                onChange: (e)=>{
-                                                    setState((draft)=>{
-                                                        draft.listVariableFields.allowAll = e.target.checked;
-                                                    });
-                                                }
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
+                                                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                    checked: state.listVariableFields.allowAll,
+                                                    onChange: (e)=>{
+                                                        setState((draft)=>{
+                                                            draft.listVariableFields.allowAll = e.target.checked;
+                                                        });
+                                                    }
+                                                }),
+                                                label: "Allow All option"
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                                variant: "caption",
+                                                children: "Enables an option to include all variable values"
                                             })
                                         ]
                                     })

package/dist/cjs/components/Variables/VariableEditorForm/VariablePreview.js

@@ -0,0 +1,178 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    VariablePreview: ()=>VariablePreview,
+    VariableListPreview: ()=>VariableListPreview
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _clipboardOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ClipboardOutline"));
+const _constants = require("../../../constants");
+const _variableModel = require("../variable-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+const DEFAULT_MAX_PREVIEW_VALUES = 50;
+function VariablePreview(props) {
+    const { values , onRefresh , isLoading , error  } = props;
+    const [maxValues, setMaxValues] = (0, _react.useState)(DEFAULT_MAX_PREVIEW_VALUES);
+    const { infoSnackbar  } = (0, _components.useSnackbar)();
+    const showAll = ()=>{
+        setMaxValues(undefined);
+    };
+    let notShown = 0;
+    if (values && (values === null || values === void 0 ? void 0 : values.length) > 0 && maxValues) {
+        notShown = values.length - maxValues;
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: "row",
+                spacing: 1,
+                alignItems: "center",
+                mb: 1,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h4",
+                        children: "Preview Values"
+                    }),
+                    onRefresh && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.refreshVariableValues,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: onRefresh,
+                            size: "small",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.InfoTooltip, {
+                        description: _constants.TOOLTIP_TEXT.copyVariableValues,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: async ()=>{
+                                if (values === null || values === void 0 ? void 0 : values.length) {
+                                    await navigator.clipboard.writeText(values.map((value)=>value).join(', '));
+                                    infoSnackbar('Preview values copied to clipboard!');
+                                }
+                            },
+                            size: "small",
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_clipboardOutline.default, {})
+                        })
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Card, {
+                variant: "outlined",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    sx: {
+                        display: 'flex',
+                        flexWrap: 'wrap',
+                        gap: 1,
+                        m: 2
+                    },
+                    children: [
+                        error && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                            severity: "error",
+                            children: error
+                        }),
+                        (values === null || values === void 0 ? void 0 : values.length) === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                            severity: "info",
+                            children: "No results"
+                        }),
+                        isLoading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                            width: "100%",
+                            sx: {
+                                alignItems: 'center',
+                                justifyContent: 'center'
+                            },
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.CircularProgress, {})
+                        }),
+                        values === null || values === void 0 ? void 0 : values.slice(0, maxValues).map((val)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
+                                size: "small",
+                                label: val
+                            }, val)),
+                        notShown > 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Chip, {
+                            onClick: showAll,
+                            variant: "outlined",
+                            size: "small",
+                            label: `+${notShown} more`
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function VariableListPreview(props) {
+    const { definition , onRefresh  } = props;
+    const { data , isFetching , error  } = (0, _variableModel.useListVariablePluginValues)(definition);
+    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(VariablePreview, {
+        values: (data === null || data === void 0 ? void 0 : data.map((val)=>val.value)) || [],
+        onRefresh: onRefresh,
+        isLoading: isFetching,
+        error: errorMessage
+    });
+}

package/dist/cjs/components/Variables/VariableEditorForm/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./VariableEditorForm"), exports);
+_exportStar(require("./VariablePreview"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -58,17 +58,15 @@ function getInitialState(initialVariableDefinition) {
 }
 function getVariableDefinitionFromState(state) {
     const { name , title , kind  } = state;
-    const commonSpec = {
-        name,
-        display: {
-            name: title
-        }
-    };
+    const display = title ? {
+        name: title
+    } : undefined;
     if (kind === 'TextVariable') {
         return {
             kind,
             spec: {
-                ...commonSpec,
+                name,
+                display,
                 ...state.textVariableFields
             }
         };
@@ -77,7 +75,8 @@ function getVariableDefinitionFromState(state) {
         return {
             kind,
             spec: {
-                ...commonSpec,
+                name,
+                display,
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
                 capturing_regexp: state.listVariableFields.capturing_regexp,