@perses-dev/dashboards 0.39.0 → 0.40.0

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

@@ -14,71 +14,64 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TemplateVariable", {
-    enumerable: true,
-    get: ()=>TemplateVariable
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TemplateVariable: function() {
+        return TemplateVariable;
+    },
+    useListVariableState: function() {
+        return useListVariableState;
+    }
 });
-const _jsxRuntime = require("react/jsx-runtime");
+const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 function TemplateVariable({ name , source  }) {
-    var ref;
+    var _ctx_definition;
     const ctx = (0, _context.useTemplateVariable)(name, source);
-    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    const kind = (_ctx_definition = ctx.definition) === null || _ctx_definition === void 0 ? void 0 : _ctx_definition.kind;
     switch(kind){
         case 'TextVariable':
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(TextVariable, {
                 name: name,
                 source: source
             });
         case 'ListVariable':
-            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
+            return /*#__PURE__*/ (0, _jsxruntime.jsx)(ListVariable, {
                 name: name,
                 source: source
             });
     }
-    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)("div", {
         children: [
             "Unsupported Variable Kind: $",
             kind
         ]
     });
 }
-function ListVariable({ name , source  }) {
-    var ref, ref1, ref2, ref3;
-    const ctx = (0, _context.useTemplateVariable)(name, source);
-    const definition = ctx.definition;
-    const variablesOptionsQuery = (0, _pluginSystem.useListVariablePluginValues)(definition);
-    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
-    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_multiple) === true;
-    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allow_all_value) === true;
-    var ref4;
-    const title = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref4 !== void 0 ? ref4 : name;
-    (0, _react.useEffect)(()=>{
-        setVariableLoading(name, variablesOptionsQuery.isFetching, source);
-        if (variablesOptionsQuery.data) {
-            setVariableOptions(name, variablesOptionsQuery.data, source);
-        }
-    }, [
-        variablesOptionsQuery,
-        name,
-        setVariableLoading,
-        setVariableOptions,
-        source
+function useListVariableState(spec, state, variablesOptionsQuery) {
+    const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
+    const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
+    const loading = (0, _react.useMemo)(()=>variablesOptionsQuery.isFetching || false, [
+        variablesOptionsQuery
     ]);
-    let value = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.value;
-    const options = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.options;
-    const loading = (ref3 = ctx.state) === null || ref3 === void 0 ? void 0 : ref3.loading;
+    const options = variablesOptionsQuery.data;
+    let value = state === null || state === void 0 ? void 0 : state.value;
     // Make sure value is an array if allowMultiple is true
     if (allowMultiple && !Array.isArray(value)) {
         value = typeof value === 'string' ? [
             value
         ] : [];
     }
-    const finalOptions = (0, _react.useMemo)(()=>{
+    const viewOptions = (0, _react.useMemo)(()=>{
         let computedOptions = options ? [
             ...options
         ] : [];
@@ -97,51 +90,100 @@ function ListVariable({ name , source  }) {
         options,
         allowAllValue
     ]);
-    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(finalOptions.find((v)=>{
+    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(viewOptions.find((v)=>{
             if (allowMultiple) {
                 return value.includes(v.value);
             }
             return value === v.value;
         })), [
-        finalOptions,
+        viewOptions,
         value,
         allowMultiple
     ]);
-    let selectValue = value;
-    if (!valueIsInOptions) {
-        selectValue = allowMultiple ? [] : '';
-    }
+    value = (0, _react.useMemo)(()=>{
+        var _viewOptions_;
+        const firstOptionValue = viewOptions === null || viewOptions === void 0 ? void 0 : (_viewOptions_ = viewOptions[allowAllValue ? 1 : 0]) === null || _viewOptions_ === void 0 ? void 0 : _viewOptions_.value;
+        // If there is no value but there are options, or the value is not in options, we set the value to the first option.
+        if (firstOptionValue) {
+            if (!valueIsInOptions || !value || value.length === 0) {
+                return allowMultiple ? [
+                    firstOptionValue
+                ] : firstOptionValue;
+            }
+        }
+        return value;
+    }, [
+        viewOptions,
+        value,
+        valueIsInOptions,
+        allowMultiple,
+        allowAllValue
+    ]);
+    // Once we computed value, we set it as the selected one, if it is available in the options
+    const selectedValue = value && valueIsInOptions ? value : allowMultiple ? [] : '';
+    return {
+        value,
+        loading,
+        options,
+        selectedValue,
+        viewOptions
+    };
+}
+function ListVariable({ name , source  }) {
+    var _definition_spec_display;
+    const ctx = (0, _context.useTemplateVariable)(name, source);
+    const definition = ctx.definition;
+    const variablesOptionsQuery = (0, _pluginsystem.useListVariablePluginValues)(definition);
+    const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
+    const { selectedValue , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    var _definition_spec_display_name;
+    const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
+    const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
+    const allowAllValue = (definition === null || definition === void 0 ? void 0 : definition.spec.allowAllValue) === true;
+    // Update value when changed
     (0, _react.useEffect)(()=>{
-        const firstOption = finalOptions === null || finalOptions === void 0 ? void 0 : finalOptions[0];
-        // If there is no value but there are options, set the value to the first option.
-        if (!value && firstOption) {
-            setVariableValue(name, firstOption.value, source);
+        if (value) {
+            setVariableValue(name, value, source);
         }
     }, [
-        finalOptions,
         setVariableValue,
+        name,
         value,
+        source
+    ]);
+    // Update loading when changed
+    (0, _react.useEffect)(()=>{
+        setVariableLoading(name, loading, source);
+    }, [
+        setVariableLoading,
         name,
-        allowMultiple,
+        loading,
         source
     ]);
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+    // Update options when changed
+    (0, _react.useEffect)(()=>{
+        if (options) {
+            setVariableOptions(name, options, source);
+        }
+    }, [
+        setVariableOptions,
+        name,
+        options,
+        source
+    ]);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         display: 'flex',
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
             fullWidth: true,
             children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
                     id: name,
                     children: title
                 }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
-                    sx: {
-                        minWidth: 100,
-                        maxWidth: 250
-                    },
+                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
                     id: name,
                     label: title,
-                    value: selectValue,
+                    value: selectedValue,
                     onChange: (e)=>{
                         // Must be selected
                         if (e.target.value === null || e.target.value.length === 0) {
@@ -154,45 +196,50 @@ function ListVariable({ name , source  }) {
                     },
                     multiple: allowMultiple,
                     children: [
-                        loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                        loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                             value: "loading",
                             disabled: true,
                             children: "Loading"
                         }),
-                        finalOptions.length === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                        viewOptions.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                             value: "empty",
                             disabled: true,
                             children: "No options"
                         }),
-                        finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                        viewOptions.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
                                 value: option.value,
                                 children: option.label
                             }, option.value))
                     ]
                 }),
-                loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.LinearProgress, {})
+                loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
             ]
         })
     });
 }
 function TextVariable({ name , source  }) {
-    var ref;
-    const { state , definition  } = (0, _context.useTemplateVariable)(name, source);
-    var ref1;
-    const [tempValue, setTempValue] = (0, _react.useState)((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
+    var _definition_spec_display;
+    const ctx = (0, _context.useTemplateVariable)(name, source);
+    const state = ctx.state;
+    const definition = ctx.definition;
+    var _state_value;
+    const [tempValue, setTempValue] = (0, _react.useState)((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
     const { setVariableValue  } = (0, _context.useTemplateVariableActions)();
     (0, _react.useEffect)(()=>{
-        var ref;
-        setTempValue((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+        var _state_value;
+        setTempValue((_state_value = state === null || state === void 0 ? void 0 : state.value) !== null && _state_value !== void 0 ? _state_value : '');
     }, [
         state === null || state === void 0 ? void 0 : state.value
     ]);
-    var ref2;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+    var _definition_spec_display_name, _definition_spec_constant;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
         value: tempValue,
         onChange: (e)=>setTempValue(e.target.value),
         onBlur: ()=>setVariableValue(name, tempValue, source),
         placeholder: name,
-        label: (ref2 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : name
+        label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
+        InputProps: {
+            readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
+        }
     });
 }