@perses-dev/dashboards 0.39.0 → 0.40.1

package/dist/components/Variables/VariableEditor.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useState, useMemo } from 'react';
-import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell as MuiTableCell, Table, TableHead, Switch, Typography, IconButton, Alert, styled, capitalize, Tooltip } from '@mui/material';
+import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell as MuiTableCell, Table, TableHead, Switch, Typography, IconButton, Alert, styled, capitalize, Tooltip, Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
 import { useImmer } from 'use-immer';
 import PencilIcon from 'mdi-material-ui/Pencil';
@@ -20,12 +20,16 @@ import TrashIcon from 'mdi-material-ui/TrashCan';
 import ArrowUp from 'mdi-material-ui/ArrowUp';
 import ArrowDown from 'mdi-material-ui/ArrowDown';
 import ContentDuplicate from 'mdi-material-ui/ContentDuplicate';
-import { VariableEditForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
+import OpenInNewIcon from 'mdi-material-ui/OpenInNew';
+import ExpandMoreIcon from 'mdi-material-ui/ChevronUp';
+import { VariableEditorForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
+import { InfoTooltip } from '@perses-dev/components';
 import { useDiscardChangesConfirmationDialog } from '../../context';
 import { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';
+import { BuiltinVariableAccordions } from './BuiltinVariableAccordions';
 function getVariableLabelByKind(kind) {
-    var ref;
-    return (ref = VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
+    var _VARIABLE_TYPES_find;
+    return (_VARIABLE_TYPES_find = VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || _VARIABLE_TYPES_find === void 0 ? void 0 : _VARIABLE_TYPES_find.label;
 }
 function getValidation(variableDefinitions) {
     const errors = [];
@@ -44,6 +48,7 @@ export function VariableEditor(props) {
     const [variableEditIdx, setVariableEditIdx] = useState(null);
     const [variableFormAction, setVariableFormAction] = useState('update');
     const externalVariableDefinitions = props.externalVariableDefinitions;
+    const builtinVariableDefinitions = props.builtinVariableDefinitions;
     const validation = useMemo(()=>getValidation(variableDefinitions), [
         variableDefinitions
     ]);
@@ -122,11 +127,11 @@ export function VariableEditor(props) {
                 draft[index] = prevElement;
             } else {
                 const nextElement = draft[index + 1];
-                const currentElement1 = draft[index];
-                if (index === draft.length - 1 || !nextElement || !currentElement1) {
+                const currentElement = draft[index];
+                if (index === draft.length - 1 || !nextElement || !currentElement) {
                     return;
                 }
-                draft[index + 1] = currentElement1;
+                draft[index + 1] = currentElement;
                 draft[index] = nextElement;
             }
         });
@@ -136,24 +141,25 @@ export function VariableEditor(props) {
             draft.push(v);
         });
     };
-    var ref, ref1;
+    var _getVariableLabelByKind, _v_spec_display_description, _getVariableLabelByKind1, _v_spec_display_description1;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditForm, {
+            currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorForm, {
                 initialVariableDefinition: currentEditingVariableDefinition,
-                onChange: (definition)=>{
+                initialAction: variableFormAction,
+                isDraft: true,
+                onSave: (definition)=>{
                     setVariableDefinitions((draft)=>{
                         draft[variableEditIdx] = definition;
                         setVariableEditIdx(null);
                     });
                 },
-                onCancel: ()=>{
+                onClose: ()=>{
                     if (variableFormAction === 'create') {
                         removeVariable(variableEditIdx);
                     }
                     setVariableEditIdx(null);
-                },
-                action: variableFormAction
+                }
             }),
             !currentEditingVariableDefinition && /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
@@ -167,7 +173,7 @@ export function VariableEditor(props) {
                         children: [
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "h2",
-                                children: "Dashboard Variables"
+                                children: "Edit Dashboard Variables"
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
@@ -192,129 +198,21 @@ export function VariableEditor(props) {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsxs(Box, {
+                    /*#__PURE__*/ _jsx(Box, {
                         padding: 2,
                         sx: {
                             overflowY: 'scroll'
                         },
-                        children: [
-                            /*#__PURE__*/ _jsxs(Stack, {
-                                spacing: 2,
-                                children: [
-                                    !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ _jsx(Alert, {
-                                            severity: "error",
-                                            children: error
-                                        }, error)),
-                                    /*#__PURE__*/ _jsx(TableContainer, {
-                                        children: /*#__PURE__*/ _jsxs(Table, {
-                                            sx: {
-                                                minWidth: 650
-                                            },
-                                            "aria-label": "table of variables",
-                                            children: [
-                                                /*#__PURE__*/ _jsx(TableHead, {
-                                                    children: /*#__PURE__*/ _jsxs(TableRow, {
-                                                        children: [
-                                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                                children: "Visibility"
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                                children: "Name"
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                                children: "Type"
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                                align: "right"
-                                                            })
-                                                        ]
-                                                    })
-                                                }),
-                                                /*#__PURE__*/ _jsx(TableBody, {
-                                                    children: variableDefinitions.map((v, idx)=>{
-                                                        var ref1;
-                                                        /*#__PURE__*/ return _jsxs(TableRow, {
-                                                            children: [
-                                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                                    component: "th",
-                                                                    scope: "row",
-                                                                    children: /*#__PURE__*/ _jsx(Switch, {
-                                                                        checked: ((ref1 = v.spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) !== true,
-                                                                        onChange: (e)=>{
-                                                                            toggleVariableVisibility(idx, e.target.checked);
-                                                                        }
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                                    component: "th",
-                                                                    scope: "row",
-                                                                    sx: {
-                                                                        fontWeight: 'bold'
-                                                                    },
-                                                                    children: /*#__PURE__*/ _jsx(VariableName, {
-                                                                        name: v.spec.name,
-                                                                        state: variableState.get({
-                                                                            name: v.spec.name
-                                                                        })
-                                                                    })
-                                                                }),
-                                                                /*#__PURE__*/ _jsx(TableCell, {
-                                                                    children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
-                                                                }),
-                                                                /*#__PURE__*/ _jsxs(TableCell, {
-                                                                    align: "right",
-                                                                    children: [
-                                                                        /*#__PURE__*/ _jsx(IconButton, {
-                                                                            onClick: ()=>changeVariableOrder(idx, 'up'),
-                                                                            disabled: idx === 0,
-                                                                            children: /*#__PURE__*/ _jsx(ArrowUp, {})
-                                                                        }),
-                                                                        /*#__PURE__*/ _jsx(IconButton, {
-                                                                            onClick: ()=>changeVariableOrder(idx, 'down'),
-                                                                            disabled: idx === variableDefinitions.length - 1,
-                                                                            children: /*#__PURE__*/ _jsx(ArrowDown, {})
-                                                                        }),
-                                                                        /*#__PURE__*/ _jsx(IconButton, {
-                                                                            onClick: ()=>editVariable(idx),
-                                                                            children: /*#__PURE__*/ _jsx(PencilIcon, {})
-                                                                        }),
-                                                                        /*#__PURE__*/ _jsx(IconButton, {
-                                                                            onClick: ()=>removeVariable(idx),
-                                                                            children: /*#__PURE__*/ _jsx(TrashIcon, {})
-                                                                        })
-                                                                    ]
-                                                                })
-                                                            ]
-                                                        }, v.spec.name);
-                                                    })
-                                                })
-                                            ]
-                                        })
-                                    }),
-                                    /*#__PURE__*/ _jsx(Box, {
-                                        display: "flex",
-                                        children: /*#__PURE__*/ _jsx(Button, {
-                                            variant: "contained",
-                                            startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
-                                            sx: {
-                                                marginLeft: 'auto'
-                                            },
-                                            onClick: addVariable,
-                                            children: "Add Variable"
-                                        })
-                                    })
-                                ]
-                            }),
-                            externalVariableDefinitions.map((extVar)=>{
-                                /*#__PURE__*/ return _jsxs(Stack, {
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    spacing: 2,
                                     children: [
-                                        /*#__PURE__*/ _jsxs(Typography, {
-                                            variant: "h2",
-                                            children: [
-                                                capitalize(extVar.source),
-                                                " Variables"
-                                            ]
-                                        }),
+                                        !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ _jsx(Alert, {
+                                                severity: "error",
+                                                children: error
+                                            }, error)),
                                         /*#__PURE__*/ _jsx(TableContainer, {
                                             children: /*#__PURE__*/ _jsxs(Table, {
                                                 sx: {
@@ -335,22 +233,28 @@ export function VariableEditor(props) {
                                                                     children: "Type"
                                                                 }),
                                                                 /*#__PURE__*/ _jsx(TableCell, {
-                                                                    align: "right"
+                                                                    children: "Description"
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                                    align: "right",
+                                                                    children: "Actions"
                                                                 })
                                                             ]
                                                         })
                                                     }),
                                                     /*#__PURE__*/ _jsx(TableBody, {
-                                                        children: extVar.definitions.map((v)=>{
-                                                            var ref;
+                                                        children: variableDefinitions.map((v, idx)=>{
+                                                            var _v_spec_display, _v_spec_display1;
                                                             /*#__PURE__*/ return _jsxs(TableRow, {
                                                                 children: [
                                                                     /*#__PURE__*/ _jsx(TableCell, {
                                                                         component: "th",
                                                                         scope: "row",
                                                                         children: /*#__PURE__*/ _jsx(Switch, {
-                                                                            checked: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
-                                                                            disabled: true
+                                                                            checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                            onChange: (e)=>{
+                                                                                toggleVariableVisibility(idx, e.target.checked);
+                                                                            }
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ _jsx(TableCell, {
@@ -362,41 +266,38 @@ export function VariableEditor(props) {
                                                                         children: /*#__PURE__*/ _jsx(VariableName, {
                                                                             name: v.spec.name,
                                                                             state: variableState.get({
-                                                                                name: v.spec.name,
-                                                                                source: extVar.source
+                                                                                name: v.spec.name
                                                                             })
                                                                         })
                                                                     }),
                                                                     /*#__PURE__*/ _jsx(TableCell, {
-                                                                        children: (ref1 = getVariableLabelByKind(v.kind)) !== null && ref1 !== void 0 ? ref1 : v.kind
+                                                                        children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
+                                                                    }),
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        children: (_v_spec_display_description = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description !== void 0 ? _v_spec_display_description : ''
                                                                     }),
                                                                     /*#__PURE__*/ _jsxs(TableCell, {
                                                                         align: "right",
+                                                                        sx: {
+                                                                            whiteSpace: 'nowrap'
+                                                                        },
                                                                         children: [
-                                                                            /*#__PURE__*/ _jsx(Tooltip, {
-                                                                                title: "Override",
-                                                                                children: /*#__PURE__*/ _jsx(IconButton, {
-                                                                                    onClick: ()=>overrideVariable(v),
-                                                                                    disabled: !!variableState.get({
-                                                                                        name: v.spec.name
-                                                                                    }),
-                                                                                    children: /*#__PURE__*/ _jsx(ContentDuplicate, {})
-                                                                                })
-                                                                            }),
                                                                             /*#__PURE__*/ _jsx(IconButton, {
-                                                                                disabled: true,
+                                                                                onClick: ()=>changeVariableOrder(idx, 'up'),
+                                                                                disabled: idx === 0,
                                                                                 children: /*#__PURE__*/ _jsx(ArrowUp, {})
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(IconButton, {
-                                                                                disabled: true,
+                                                                                onClick: ()=>changeVariableOrder(idx, 'down'),
+                                                                                disabled: idx === variableDefinitions.length - 1,
                                                                                 children: /*#__PURE__*/ _jsx(ArrowDown, {})
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(IconButton, {
-                                                                                disabled: true,
+                                                                                onClick: ()=>editVariable(idx),
                                                                                 children: /*#__PURE__*/ _jsx(PencilIcon, {})
                                                                             }),
                                                                             /*#__PURE__*/ _jsx(IconButton, {
-                                                                                disabled: true,
+                                                                                onClick: ()=>removeVariable(idx),
                                                                                 children: /*#__PURE__*/ _jsx(TrashIcon, {})
                                                                             })
                                                                         ]
@@ -407,11 +308,182 @@ export function VariableEditor(props) {
                                                     })
                                                 ]
                                             })
+                                        }),
+                                        /*#__PURE__*/ _jsx(Box, {
+                                            display: "flex",
+                                            children: /*#__PURE__*/ _jsx(Button, {
+                                                variant: "contained",
+                                                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                                                sx: {
+                                                    marginLeft: 'auto'
+                                                },
+                                                onClick: addVariable,
+                                                children: "Add Variable"
+                                            })
                                         })
                                     ]
-                                }, extVar.source);
-                            })
-                        ]
+                                }),
+                                externalVariableDefinitions && !externalVariableDefinitions.every((v)=>v.definitions.length === 0) && externalVariableDefinitions.map((extVar)=>{
+                                    return extVar.definitions.length > 0 && /*#__PURE__*/ _jsxs(Accordion, {
+                                        sx: (theme)=>({
+                                                '.MuiAccordionSummary-root': {
+                                                    backgroundColor: theme.palette.background.lighter
+                                                },
+                                                '.MuiAccordionDetails-root': {
+                                                    backgroundColor: theme.palette.background.lighter
+                                                }
+                                            }),
+                                        children: [
+                                            /*#__PURE__*/ _jsx(AccordionSummary, {
+                                                expandIcon: /*#__PURE__*/ _jsx(ExpandMoreIcon, {}),
+                                                "aria-controls": extVar.source,
+                                                id: extVar.source,
+                                                children: /*#__PURE__*/ _jsx(Stack, {
+                                                    flexDirection: "row",
+                                                    alignItems: "center",
+                                                    justifyContent: "start",
+                                                    children: /*#__PURE__*/ _jsxs(_Fragment, {
+                                                        children: [
+                                                            extVar.tooltip ? /*#__PURE__*/ _jsx(Typography, {
+                                                                variant: "h2",
+                                                                children: /*#__PURE__*/ _jsx(InfoTooltip, {
+                                                                    title: extVar.tooltip.title || '',
+                                                                    description: extVar.tooltip.description || '',
+                                                                    children: /*#__PURE__*/ _jsxs("span", {
+                                                                        children: [
+                                                                            capitalize(extVar.source),
+                                                                            " Variables"
+                                                                        ]
+                                                                    })
+                                                                })
+                                                            }) : /*#__PURE__*/ _jsxs(Typography, {
+                                                                variant: "h2",
+                                                                children: [
+                                                                    capitalize(extVar.source),
+                                                                    " Variables"
+                                                                ]
+                                                            }),
+                                                            extVar.editLink && /*#__PURE__*/ _jsx(IconButton, {
+                                                                href: extVar.editLink,
+                                                                target: "_blank",
+                                                                children: /*#__PURE__*/ _jsx(OpenInNewIcon, {
+                                                                    fontSize: "small"
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            }),
+                                            /*#__PURE__*/ _jsx(AccordionDetails, {
+                                                children: /*#__PURE__*/ _jsx(TableContainer, {
+                                                    children: /*#__PURE__*/ _jsxs(Table, {
+                                                        sx: {
+                                                            minWidth: 650
+                                                        },
+                                                        "aria-label": "table of external variables",
+                                                        children: [
+                                                            /*#__PURE__*/ _jsx(TableHead, {
+                                                                children: /*#__PURE__*/ _jsxs(TableRow, {
+                                                                    children: [
+                                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                                            children: "Visibility"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                                            children: "Name"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                                            children: "Type"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                                            children: "Description"
+                                                                        }),
+                                                                        /*#__PURE__*/ _jsx(TableCell, {
+                                                                            align: "right",
+                                                                            children: "Actions"
+                                                                        })
+                                                                    ]
+                                                                })
+                                                            }),
+                                                            /*#__PURE__*/ _jsx(TableBody, {
+                                                                children: extVar.definitions.map((v)=>{
+                                                                    var _v_spec_display, _v_spec_display1;
+                                                                    /*#__PURE__*/ return _jsxs(TableRow, {
+                                                                        children: [
+                                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                                component: "th",
+                                                                                scope: "row",
+                                                                                children: /*#__PURE__*/ _jsx(Switch, {
+                                                                                    checked: ((_v_spec_display = v.spec.display) === null || _v_spec_display === void 0 ? void 0 : _v_spec_display.hidden) !== true,
+                                                                                    disabled: true
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                                component: "th",
+                                                                                scope: "row",
+                                                                                sx: {
+                                                                                    fontWeight: 'bold'
+                                                                                },
+                                                                                children: /*#__PURE__*/ _jsx(VariableName, {
+                                                                                    name: v.spec.name,
+                                                                                    state: variableState.get({
+                                                                                        name: v.spec.name,
+                                                                                        source: extVar.source
+                                                                                    })
+                                                                                })
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                                children: (_getVariableLabelByKind1 = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind1 !== void 0 ? _getVariableLabelByKind1 : v.kind
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsx(TableCell, {
+                                                                                children: (_v_spec_display_description1 = (_v_spec_display1 = v.spec.display) === null || _v_spec_display1 === void 0 ? void 0 : _v_spec_display1.description) !== null && _v_spec_display_description1 !== void 0 ? _v_spec_display_description1 : ''
+                                                                            }),
+                                                                            /*#__PURE__*/ _jsxs(TableCell, {
+                                                                                align: "right",
+                                                                                children: [
+                                                                                    /*#__PURE__*/ _jsx(Tooltip, {
+                                                                                        title: "Override",
+                                                                                        children: /*#__PURE__*/ _jsx(IconButton, {
+                                                                                            onClick: ()=>overrideVariable(v),
+                                                                                            disabled: !!variableState.get({
+                                                                                                name: v.spec.name
+                                                                                            }),
+                                                                                            children: /*#__PURE__*/ _jsx(ContentDuplicate, {})
+                                                                                        })
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ _jsx(ArrowUp, {})
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ _jsx(ArrowDown, {})
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                                    }),
+                                                                                    /*#__PURE__*/ _jsx(IconButton, {
+                                                                                        disabled: true,
+                                                                                        children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                                    })
+                                                                                ]
+                                                                            })
+                                                                        ]
+                                                                    }, v.spec.name);
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
+                                                })
+                                            })
+                                        ]
+                                    });
+                                }),
+                                builtinVariableDefinitions && /*#__PURE__*/ _jsx(BuiltinVariableAccordions, {
+                                    builtinVariableDefinitions: builtinVariableDefinitions
+                                })
+                            ]
+                        })
                     })
                 ]
             })