@perses-dev/dashboards 0.0.0-snapshot-time-range-height-80d08fc

package/dist/cjs/components/PanelGroupDialog/PanelGroupEditorForm.js

@@ -0,0 +1,92 @@
+// Copyright 2022 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, {
+    PanelGroupEditorForm: ()=>PanelGroupEditorForm,
+    panelGroupEditorFormId: ()=>panelGroupEditorFormId
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+function PanelGroupEditorForm(props) {
+    const { initialValues , onSubmit  } = props;
+    const [title, setTitle] = (0, _react.useState)(initialValues.title);
+    const [isCollapsed, setIsCollapsed] = (0, _react.useState)(initialValues.isCollapsed);
+    const handleCollapsedChange = (e)=>{
+        const next = e.target.value;
+        setIsCollapsed(next === 'Closed');
+    };
+    const handleSubmit = (e)=>{
+        e.preventDefault();
+        onSubmit({
+            title,
+            isCollapsed
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("form", {
+        id: panelGroupEditorFormId,
+        onSubmit: handleSubmit,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                    required: true,
+                    label: "Name",
+                    variant: "outlined",
+                    value: title,
+                    onChange: (e)=>setTitle(e.target.value)
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                fullWidth: true,
+                margin: "normal",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                        id: "select-collapse-state",
+                        children: "Collapse State"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                        required: true,
+                        displayEmpty: true,
+                        labelId: "select-collapse-state",
+                        label: "Collapse State",
+                        size: "small",
+                        value: isCollapsed ? 'Closed' : 'Open',
+                        onChange: handleCollapsedChange,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: "Open",
+                                children: "Open"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: "Closed",
+                                children: "Closed"
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+const panelGroupEditorFormId = 'panel-group-editor-form';

package/dist/cjs/components/PanelGroupDialog/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./PanelGroupDialog"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.js

@@ -0,0 +1,136 @@
+// Copyright 2022 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, {
+    TIME_OPTIONS: ()=>TIME_OPTIONS,
+    TimeRangeControls: ()=>TimeRangeControls
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _refresh = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Refresh"));
+const _material = require("@mui/material");
+const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _core = require("@perses-dev/core");
+const _context = require("../../context");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const TIME_OPTIONS = [
+    {
+        value: {
+            pastDuration: '5m'
+        },
+        display: 'Last 5 minutes'
+    },
+    {
+        value: {
+            pastDuration: '15m'
+        },
+        display: 'Last 15 minutes'
+    },
+    {
+        value: {
+            pastDuration: '30m'
+        },
+        display: 'Last 30 minutes'
+    },
+    {
+        value: {
+            pastDuration: '1h'
+        },
+        display: 'Last 1 hour'
+    },
+    {
+        value: {
+            pastDuration: '6h'
+        },
+        display: 'Last 6 hours'
+    },
+    {
+        value: {
+            pastDuration: '12h'
+        },
+        display: 'Last 12 hours'
+    },
+    {
+        value: {
+            pastDuration: '24h'
+        },
+        display: 'Last 1 day'
+    },
+    {
+        value: {
+            pastDuration: '7d'
+        },
+        display: 'Last 7 days'
+    },
+    {
+        value: {
+            pastDuration: '14d'
+        },
+        display: 'Last 14 days'
+    }
+];
+const DEFAULT_HEIGHT = '34px';
+function TimeRangeControls({ heightPx  }) {
+    const { timeRange , setTimeRange , refresh  } = (0, _pluginSystem.useTimeRange)();
+    const defaultTimeRange = (0, _context.useDefaultTimeRange)();
+    // Convert height as a number to height as a string, then use this value for styling
+    const height = heightPx === undefined ? DEFAULT_HEIGHT : `${heightPx}px`;
+    // add time shortcut if one does not match duration from dashboard JSON
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
+        if ((0, _core.isDurationString)(defaultTimeRange.pastDuration)) {
+            TIME_OPTIONS.push({
+                value: {
+                    pastDuration: defaultTimeRange.pastDuration
+                },
+                display: `Last ${defaultTimeRange.pastDuration}`
+            });
+        }
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.DateTimeRangePicker, {
+                timeOptions: TIME_OPTIONS,
+                value: timeRange,
+                onChange: setTimeRange,
+                height: height
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(RefreshIconButton, {
+                "aria-label": "Refresh Dashboard",
+                onClick: refresh,
+                sx: {
+                    height
+                },
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_refresh.default, {})
+            })
+        ]
+    });
+}
+const RefreshIconButton = (0, _material.styled)(_material.IconButton)(({ theme  })=>({
+        border: `1px solid ${theme.palette.grey[300]}`,
+        borderRadius: theme.shape.borderRadius,
+        padding: theme.spacing(0.5),
+        color: theme.palette.grey[900]
+    }));

package/dist/cjs/components/TimeRangeControls/TimeRangeControls.test.js

@@ -0,0 +1,95 @@
+// Copyright 2022 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
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _reactRouter = require("react-router");
+const _history = require("history");
+const _userEvent = /*#__PURE__*/ _interopRequireDefault(require("@testing-library/user-event"));
+const _react = require("@testing-library/react");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _test = require("../../test");
+const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
+const _context = require("../../context");
+const _timeRangeControls = require("./TimeRangeControls");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const history = (0, _history.createMemoryHistory)({
+    initialEntries: [
+        (0, _reactRouter.generatePath)('/home'),
+        (0, _reactRouter.generatePath)('/dashboards/:id', {
+            id: 'test'
+        })
+    ]
+});
+describe('TimeRangeControls', ()=>{
+    let initialState;
+    const testDefaultTimeRange = {
+        pastDuration: _testDashboard.default.spec.duration
+    };
+    beforeEach(()=>{
+        initialState = {
+            dashboardResource: _testDashboard.default
+        };
+    });
+    const renderTimeRangeControls = (testURLParams)=>{
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+            initialState: initialState,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+                initialTimeRange: testDefaultTimeRange,
+                enabledURLParams: testURLParams,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
+            })
+        }), undefined, history);
+    };
+    it('should default to dashboard duration and update selected time option when clicked', async ()=>{
+        renderTimeRangeControls(false);
+        expect(_react.screen.getByText('Last 30 minutes')).toBeInTheDocument();
+        const dateButton = _react.screen.getByRole('button', {
+            name: /last/i
+        });
+        _userEvent.default.click(dateButton);
+        const firstSelected = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstSelected);
+        expect(dateButton).toHaveTextContent(/5 minutes/i);
+    });
+    it('should update URL params with correct time range values', ()=>{
+        renderTimeRangeControls(true);
+        const dateButton = _react.screen.getByRole('button', {
+            name: /last/i
+        });
+        _userEvent.default.click(dateButton);
+        const firstSelected = _react.screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        _userEvent.default.click(firstSelected);
+        expect(history.location.search).toEqual('?start=5m');
+        // pick another option from TimeRangeSelector dropdown
+        const secondSelected = _react.screen.getByText('Last 12 hours');
+        _userEvent.default.click(secondSelected);
+        expect(history.location.search).toEqual('?start=12h');
+        // back button should return to previous page selected
+        (0, _react.act)(()=>{
+            history.back();
+        });
+        expect(history.location.pathname).toEqual('/home');
+    });
+// TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
+});

package/dist/cjs/components/TimeRangeControls/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./TimeRangeControls"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/UnsavedChangesConfirmationDialog/UnsavedChangesConfirmationDialog.js

@@ -0,0 +1,67 @@
+// Copyright 2022 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
+});
+Object.defineProperty(exports, "UnsavedChangesConfirmationDialog", {
+    enumerable: true,
+    get: ()=>UnsavedChangesConfirmationDialog
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _close = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Close"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const UnsavedChangesConfirmationDialog = ({ isOpen , onSave , onClose  })=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Dialog, {
+        open: isOpen,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogTitle, {
+                children: "Unsaved Changes"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                "aria-label": "Close",
+                onClick: onClose,
+                sx: (theme)=>({
+                        position: 'absolute',
+                        top: theme.spacing(0.5),
+                        right: theme.spacing(0.5)
+                    }),
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_close.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.DialogContent, {
+                sx: {
+                    width: '500px'
+                },
+                children: "You have unsaved changes in this dashboard. Would you like to save these changes?"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.DialogActions, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: onSave,
+                        children: "Save"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: onClose,
+                        children: "Cancel"
+                    })
+                ]
+            })
+        ]
+    });
+};

package/dist/cjs/components/UnsavedChangesConfirmationDialog/index.js

@@ -0,0 +1,28 @@
+// Copyright 2022 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
+});
+_exportStar(require("./UnsavedChangesConfirmationDialog"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -0,0 +1,194 @@
+// Copyright 2022 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
+});
+Object.defineProperty(exports, "TemplateVariable", {
+    enumerable: true,
+    get: ()=>TemplateVariable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _context = require("../../context");
+const _variableModel = require("./variable-model");
+function TemplateVariable({ name  }) {
+    var ref;
+    const ctx = (0, _context.useTemplateVariable)(name);
+    const kind = (ref = ctx.definition) === null || ref === void 0 ? void 0 : ref.kind;
+    switch(kind){
+        case 'TextVariable':
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TextVariable, {
+                name: name
+            });
+        case 'ListVariable':
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(ListVariable, {
+                name: name
+            });
+    }
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+        children: [
+            "Unsupported Variable Kind: $",
+            kind
+        ]
+    });
+}
+function ListVariable({ name  }) {
+    var ref, ref1, ref2, ref3;
+    const ctx = (0, _context.useTemplateVariable)(name);
+    const definition = ctx.definition;
+    const variablesOptionsQuery = (0, _variableModel.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);
+        if (variablesOptionsQuery.data) {
+            setVariableOptions(name, variablesOptionsQuery.data);
+        }
+    }, [
+        variablesOptionsQuery,
+        name,
+        setVariableLoading,
+        setVariableOptions
+    ]);
+    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;
+    // 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)(()=>{
+        let computedOptions = options ? [
+            ...options
+        ] : [];
+        // Add the all value if it's allowed
+        if (allowAllValue) {
+            computedOptions = [
+                {
+                    value: _pluginSystem.DEFAULT_ALL_VALUE,
+                    label: 'All'
+                },
+                ...computedOptions
+            ];
+        }
+        return computedOptions;
+    }, [
+        options,
+        allowAllValue
+    ]);
+    const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(finalOptions.find((v)=>{
+            if (allowMultiple) {
+                return value.includes(v.value);
+            }
+            return value === v.value;
+        })), [
+        finalOptions,
+        value,
+        allowMultiple
+    ]);
+    let selectValue = value;
+    if (!valueIsInOptions) {
+        selectValue = allowMultiple ? [] : '';
+    }
+    (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);
+        }
+    }, [
+        finalOptions,
+        setVariableValue,
+        value,
+        name,
+        allowMultiple
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        display: 'flex',
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+            fullWidth: true,
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                    id: name,
+                    children: title
+                }),
+                /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
+                    sx: {
+                        minWidth: 100,
+                        maxWidth: 250
+                    },
+                    id: name,
+                    label: name,
+                    value: selectValue,
+                    onChange: (e)=>{
+                        // Must be selected
+                        if (e.target.value === null || e.target.value.length === 0) {
+                            if (allowAllValue) {
+                                setVariableValue(name, _pluginSystem.DEFAULT_ALL_VALUE);
+                            }
+                            return;
+                        }
+                        setVariableValue(name, e.target.value);
+                    },
+                    multiple: allowMultiple,
+                    children: [
+                        loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "loading",
+                            disabled: true,
+                            children: "Loading"
+                        }),
+                        finalOptions.length === 0 && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                            value: "empty",
+                            disabled: true,
+                            children: "No options"
+                        }),
+                        finalOptions.map((option)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                value: option.value,
+                                children: option.label
+                            }, option.value))
+                    ]
+                }),
+                loading && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.LinearProgress, {})
+            ]
+        })
+    });
+}
+function TextVariable({ name  }) {
+    var ref;
+    const { state , definition  } = (0, _context.useTemplateVariable)(name);
+    var ref1;
+    const [tempValue, setTempValue] = (0, _react.useState)((ref1 = state === null || state === void 0 ? void 0 : state.value) !== null && ref1 !== void 0 ? ref1 : '');
+    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 : '');
+    }, [
+        state === null || state === void 0 ? void 0 : state.value
+    ]);
+    var ref2;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        value: tempValue,
+        onChange: (e)=>setTempValue(e.target.value),
+        onBlur: ()=>setVariableValue(name, tempValue),
+        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
+    });
+}