@perses-dev/dashboards 0.9.0 → 0.11.0

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,29 @@
+// 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);
+_exportStar(require("./DeletePanelGroupDialog"), 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

@@ -29,7 +29,6 @@ const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
-const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const TIME_OPTIONS = [
     {
@@ -88,14 +87,14 @@ const TIME_OPTIONS = [
     }
 ];
 function TimeRangeControls() {
-    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRange)();
-    const { dashboard  } = (0, _context.useDashboard)();
-    const { queryString  } = (0, _pluginSystem.useQueryString)();
-    const defaultTimeRange = (0, _core.getDefaultTimeRange)(dashboard.duration, queryString);
-    // selected form value can be relative or absolute, timeRange from plugin-system is only absolute
-    const [selectedTimeRange, setSelectedTimeRange] = (0, _react.useState)(defaultTimeRange);
+    const { timeRange , setTimeRange  } = (0, _context.useDashboardTimeRange)();
     const [showCustomDateSelector, setShowCustomDateSelector] = (0, _react.useState)(false);
     const anchorEl = (0, _react.useRef)();
+    const convertedTimeRange = (0, _react.useMemo)(()=>{
+        return (0, _core.isRelativeTimeRange)(timeRange) ? (0, _core.toAbsoluteTimeRange)(timeRange) : timeRange;
+    }, [
+        timeRange
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
         direction: "row",
         spacing: 1,
@@ -112,10 +111,9 @@ function TimeRangeControls() {
                         padding: theme.spacing(2)
                     }),
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.AbsoluteTimePicker, {
-                    initialTimeRange: timeRange,
+                    initialTimeRange: convertedTimeRange,
                     onChange: (timeRange)=>{
                         setTimeRange(timeRange);
-                        setSelectedTimeRange(timeRange);
                         setShowCustomDateSelector(false);
                     }
                 })
@@ -126,7 +124,7 @@ function TimeRangeControls() {
                     ref: anchorEl,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.TimeRangeSelector, {
                         timeOptions: TIME_OPTIONS,
-                        value: selectedTimeRange,
+                        value: timeRange,
                         onSelectChange: (event)=>{
                             const duration = event.target.value;
                             const relativeTimeInput = {
@@ -134,7 +132,6 @@ function TimeRangeControls() {
                                 end: new Date()
                             };
                             setTimeRange(relativeTimeInput);
-                            setSelectedTimeRange(relativeTimeInput);
                             setShowCustomDateSelector(false);
                         },
                         onCustomClick: ()=>{

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

@@ -15,8 +15,9 @@ 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 _core = require("@perses-dev/core");
 const _react = require("@testing-library/react");
 const _test = require("../../test");
 const _testDashboard = /*#__PURE__*/ _interopRequireDefault(require("../../test/testDashboard"));
@@ -27,31 +28,37 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
+const history = (0, _history.createMemoryHistory)({
+    initialEntries: [
+        (0, _reactRouter.generatePath)('/dashboards/:id', {
+            id: 'test'
+        })
+    ]
+});
 describe('TimeRangeControls', ()=>{
     let initialState;
+    const testDefaultTimeRange = {
+        pastDuration: _testDashboard.default.spec.duration
+    };
     beforeEach(()=>{
         initialState = {
             dashboardSpec: _testDashboard.default.spec
         };
     });
     const renderTimeRangeControls = ()=>{
-        const queryString = new URLSearchParams();
-        const defaultTimeRange = (0, _core.getDefaultTimeRange)(initialState.dashboardSpec.duration, queryString);
-        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.QueryStringProvider, {
-            queryString: queryString,
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
-                initialState: initialState,
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                    initialTimeRange: defaultTimeRange,
-                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
-                })
+        (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DashboardProvider, {
+            initialState: initialState,
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
+                timeRange: testDefaultTimeRange,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeRangeControls.TimeRangeControls, {})
             })
-        }));
+        }), undefined, history);
     };
     it('should render correct initial relative time shortcut', async ()=>{
         renderTimeRangeControls();
-        expect(_react.screen.getByText('Last 1 day')).toBeInTheDocument();
+        expect(_react.screen.getByText('Last 5 minutes')).toBeInTheDocument();
     });
+    // TODO: fix setTimeRange no-op, test query params
     it('should be able to select the first option', ()=>{
         renderTimeRangeControls();
         const dateButton = _react.screen.getByRole('button');

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

@@ -51,7 +51,7 @@ function TemplateVariable({ name  }) {
     return Object.values(v).map((v)=>JSON.stringify(v.value)).join(',');
 }
 function ListVariable({ name  }) {
-    var ref, ref1, ref2;
+    var ref, ref1, ref2, ref3;
     const ctx = (0, _context.useTemplateVariable)(name);
     const definition = ctx.definition;
     const { data: variablePlugin  } = (0, _pluginSystem.usePlugin)('Variable', definition.spec.plugin.kind);
@@ -65,6 +65,8 @@ function ListVariable({ name  }) {
     const variables = (0, _pluginSystem.useTemplateVariableValues)(dependsOnVariables);
     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 label = (ref4 = (ref = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || ref === void 0 ? void 0 : ref.label) !== null && ref4 !== void 0 ? ref4 : name;
     let waitToLoad = false;
     if (dependsOnVariables) {
         waitToLoad = dependsOnVariables.some((v)=>{
@@ -98,9 +100,9 @@ function ListVariable({ name  }) {
         setVariableLoading,
         setVariableOptions
     ]);
-    let value = (ref = ctx.state) === null || ref === void 0 ? void 0 : ref.value;
-    const options = (ref1 = ctx.state) === null || ref1 === void 0 ? void 0 : ref1.options;
-    const loading = (ref2 = ctx.state) === null || ref2 === void 0 ? void 0 : ref2.loading;
+    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' ? [
@@ -152,10 +154,11 @@ function ListVariable({ name  }) {
     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: name
+                    children: label
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Select, {
                     sx: {
@@ -195,13 +198,19 @@ function ListVariable({ name  }) {
 }
 function TextVariable({ name  }) {
     const { state  } = (0, _context.useTemplateVariable)(name);
-    const s = (0, _context.useTemplateVariableStore)();
-    const setVariableValue = s.setVariableValue;
-    const ref = (0, _react.useRef)(null);
+    var ref;
+    const [tempValue, setTempValue] = (0, _react.useState)((ref = state === null || state === void 0 ? void 0 : state.value) !== null && ref !== void 0 ? ref : '');
+    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
+    ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-        ref: ref,
-        defaultValue: state === null || state === void 0 ? void 0 : state.value,
-        onBlur: (e)=>setVariableValue(name, e.target.value),
+        value: tempValue,
+        onChange: (e)=>setTempValue(e.target.value),
+        onBlur: ()=>setVariableValue(name, tempValue),
         placeholder: name,
         label: name
     });

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

@@ -0,0 +1,240 @@
+// 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, "VariableEditor", {
+    enumerable: true,
+    get: ()=>VariableEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _useImmer = require("use-immer");
+const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _trashCan = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/TrashCan"));
+const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowUp"));
+const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
+const _variableEditorForm = require("./VariableEditorForm");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function VariableEditor(props) {
+    const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
+    const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
+    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const removeVariable = (index)=>{
+        setVariableDefinitions((draft)=>{
+            draft.splice(index, 1);
+        });
+    };
+    const addVariable = ()=>{
+        setVariableDefinitions((draft)=>{
+            draft.push({
+                kind: 'TextVariable',
+                spec: {
+                    name: 'NewVariable',
+                    value: ''
+                }
+            });
+        });
+    };
+    const toggleVariableVisibility = (index, visible)=>{
+        setVariableDefinitions((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            if (!v.spec.display) {
+                v.spec.display = {
+                    hidden: false
+                };
+            }
+            v.spec.display.hidden = visible === false;
+        });
+    };
+    const changeVariableOrder = (index, direction)=>{
+        setVariableDefinitions((draft)=>{
+            if (direction === 'up') {
+                const prevElement = draft[index - 1];
+                const currentElement = draft[index];
+                if (index === 0 || !prevElement || !currentElement) {
+                    return;
+                }
+                draft[index - 1] = currentElement;
+                draft[index] = prevElement;
+            } else {
+                const nextElement = draft[index + 1];
+                const currentElement1 = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                    return;
+                }
+                draft[index + 1] = currentElement1;
+                draft[index] = nextElement;
+            }
+        });
+    };
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        p: 4,
+        children: [
+            currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Edit Variable"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditorForm.VariableEditForm, {
+                        initialVariableDefinition: currentEditingVariableDefinition,
+                        onChange: (definition)=>{
+                            setVariableDefinitions((draft)=>{
+                                draft[variableEditIdx] = definition;
+                                setVariableEditIdx(null);
+                            });
+                        },
+                        onCancel: ()=>setVariableEditIdx(null)
+                    })
+                ]
+            }),
+            !currentEditingVariableDefinition && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        justifyContent: "end",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                onClick: ()=>{
+                                    props.onCancel();
+                                },
+                                children: "Cancel"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                disabled: props.variableDefinitions === variableDefinitions,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    props.onChange(variableDefinitions);
+                                },
+                                children: "Apply Changes"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                        variant: "h3",
+                        mb: 2,
+                        children: "Variable List"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        spacing: 2,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+                                component: _material.Paper,
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Table, {
+                                    sx: {
+                                        minWidth: 650
+                                    },
+                                    "aria-label": "simple table",
+                                    children: [
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableHead, {
+                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                children: [
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Visibility"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Variable Name"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        children: "Variable Type"
+                                                    }),
+                                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                        align: "right",
+                                                        children: "Action"
+                                                    })
+                                                ]
+                                            })
+                                        }),
+                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+                                            children: variableDefinitions.map((v, idx)=>{
+                                                var ref;
+                                                /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                    children: [
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                                checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
+                                                                onChange: (e)=>{
+                                                                    toggleVariableVisibility(idx, e.target.checked);
+                                                                }
+                                                            })
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            component: "th",
+                                                            scope: "row",
+                                                            sx: {
+                                                                fontWeight: 'bold'
+                                                            },
+                                                            children: v.spec.name
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableCell, {
+                                                            children: v.kind
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.TableCell, {
+                                                            align: "right",
+                                                            children: [
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'up'),
+                                                                    disabled: idx === 0,
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowUp.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                    disabled: idx === variableDefinitions.length - 1,
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_arrowDown.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>setVariableEditIdx(idx),
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {})
+                                                                }),
+                                                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                                                                    onClick: ()=>removeVariable(idx),
+                                                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_trashCan.default, {})
+                                                                })
+                                                            ]
+                                                        })
+                                                    ]
+                                                }, v.spec.name);
+                                            })
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                                display: "flex",
+                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                    onClick: addVariable,
+                                    variant: "contained",
+                                    children: "Add New Variable"
+                                })
+                            })
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}