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

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

@@ -0,0 +1,276 @@
+// 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");
+const _variableModel = require("./variable-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function getVariableLabelByKind(kind) {
+    var ref;
+    return (ref = _variableModel.VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
+}
+function getValidation(variableDefinitions) {
+    const errors = [];
+    /**  Variable names must be unique */ const variableNames = variableDefinitions.map((variableDefinition)=>variableDefinition.spec.name);
+    const uniqueVariableNames = new Set(variableNames);
+    if (variableNames.length !== uniqueVariableNames.size) {
+        errors.push('Variable names must be unique');
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
+function VariableEditor(props) {
+    const [variableDefinitions, setVariableDefinitions] = (0, _useImmer.useImmer)(props.variableDefinitions);
+    const [variableEditIdx, setVariableEditIdx] = (0, _react.useState)(null);
+    const validation = (0, _react.useMemo)(()=>getValidation(variableDefinitions), [
+        variableDefinitions
+    ]);
+    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: ''
+                }
+            });
+        });
+        setVariableEditIdx(variableDefinitions.length);
+    };
+    const toggleVariableVisibility = (index, visible)=>{
+        setVariableDefinitions((draft)=>{
+            const v = draft[index];
+            if (!v) {
+                return;
+            }
+            if (!v.spec.display) {
+                v.spec.display = {
+                    name: v.spec.name,
+                    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;
+            }
+        });
+    };
+    var ref;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            currentEditingVariableDefinition && /*#__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.Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: (theme)=>theme.spacing(1, 2),
+                            borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                variant: "h2",
+                                children: "Variables"
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                marginLeft: "auto",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                        disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
+                                        variant: "contained",
+                                        onClick: ()=>{
+                                            props.onChange(variableDefinitions);
+                                        },
+                                        children: "Apply"
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                                        color: "secondary",
+                                        variant: "outlined",
+                                        onClick: ()=>{
+                                            props.onCancel();
+                                        },
+                                        children: "Cancel"
+                                    })
+                                ]
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                        padding: 2,
+                        sx: {
+                            overflowY: 'scroll'
+                        },
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                            spacing: 2,
+                            children: [
+                                !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Alert, {
+                                        severity: "error",
+                                        children: error
+                                    }, error)),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableContainer, {
+                                    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)(TableCell, {
+                                                            children: "Visibility"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                            children: "Name"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                            children: "Type"
+                                                        }),
+                                                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                            align: "right",
+                                                            children: "Action"
+                                                        })
+                                                    ]
+                                                })
+                                            }),
+                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableBody, {
+                                                children: variableDefinitions.map((v, idx)=>{
+                                                    var ref1;
+                                                    /*#__PURE__*/ return (0, _jsxRuntime.jsxs)(_material.TableRow, {
+                                                        children: [
+                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                                                    checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
+                                                                    onChange: (e)=>{
+                                                                        toggleVariableVisibility(idx, e.target.checked);
+                                                                    }
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                component: "th",
+                                                                scope: "row",
+                                                                sx: {
+                                                                    fontWeight: 'bold'
+                                                                },
+                                                                children: v.spec.name
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxRuntime.jsx)(TableCell, {
+                                                                children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
+                                                            }),
+                                                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(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"
+                                    })
+                                })
+                            ]
+                        })
+                    })
+                ]
+            })
+        ]
+    });
+}
+const TableCell = (0, _material.styled)(_material.TableCell)(({ theme  })=>({
+        borderBottom: `solid 1px ${theme.palette.divider}`
+    }));