@perses-dev/dashboards 0.38.0 → 0.40.0

package/dist/components/Variables/VariableEditor.js

@@ -12,18 +12,24 @@
 // 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 } 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';
 import TrashIcon from 'mdi-material-ui/TrashCan';
 import ArrowUp from 'mdi-material-ui/ArrowUp';
 import ArrowDown from 'mdi-material-ui/ArrowDown';
-import { VariableEditForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
+import ContentDuplicate from 'mdi-material-ui/ContentDuplicate';
+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 = [];
@@ -41,9 +47,19 @@ export function VariableEditor(props) {
     const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);
     const [variableEditIdx, setVariableEditIdx] = useState(null);
     const [variableFormAction, setVariableFormAction] = useState('update');
+    const externalVariableDefinitions = props.externalVariableDefinitions;
+    const builtinVariableDefinitions = props.builtinVariableDefinitions;
     const validation = useMemo(()=>getValidation(variableDefinitions), [
         variableDefinitions
     ]);
+    const [variableState] = useMemo(()=>{
+        return [
+            hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)
+        ];
+    }, [
+        externalVariableDefinitions,
+        variableDefinitions
+    ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
     const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = useDiscardChangesConfirmationDialog();
     const handleCancel = ()=>{
@@ -111,33 +127,39 @@ 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;
             }
         });
     };
-    var ref;
+    const overrideVariable = (v)=>{
+        setVariableDefinitions((draft)=>{
+            draft.push(v);
+        });
+    };
+    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: [
@@ -151,7 +173,7 @@ export function VariableEditor(props) {
                         children: [
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "h2",
-                                children: "Variables"
+                                children: "Edit Dashboard Variables"
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
@@ -184,102 +206,283 @@ export function VariableEditor(props) {
                         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__*/ _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, {
+                                                                    children: "Description"
+                                                                }),
+                                                                /*#__PURE__*/ _jsx(TableCell, {
+                                                                    align: "right",
+                                                                    children: "Actions"
                                                                 })
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                                component: "th",
-                                                                scope: "row",
-                                                                sx: {
-                                                                    fontWeight: 'bold'
-                                                                },
-                                                                children: v.spec.name
-                                                            }),
-                                                            /*#__PURE__*/ _jsx(TableCell, {
-                                                                children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
-                                                            }),
-                                                            /*#__PURE__*/ _jsxs(TableCell, {
-                                                                align: "right",
+                                                            ]
+                                                        })
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(TableBody, {
+                                                        children: variableDefinitions.map((v, idx)=>{
+                                                            var _v_spec_display, _v_spec_display1;
+                                                            /*#__PURE__*/ return _jsxs(TableRow, {
                                                                 children: [
-                                                                    /*#__PURE__*/ _jsx(IconButton, {
-                                                                        onClick: ()=>changeVariableOrder(idx, 'up'),
-                                                                        disabled: idx === 0,
-                                                                        children: /*#__PURE__*/ _jsx(ArrowUp, {})
+                                                                    /*#__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,
+                                                                            onChange: (e)=>{
+                                                                                toggleVariableVisibility(idx, e.target.checked);
+                                                                            }
+                                                                        })
                                                                     }),
-                                                                    /*#__PURE__*/ _jsx(IconButton, {
-                                                                        onClick: ()=>changeVariableOrder(idx, 'down'),
-                                                                        disabled: idx === variableDefinitions.length - 1,
-                                                                        children: /*#__PURE__*/ _jsx(ArrowDown, {})
+                                                                    /*#__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(IconButton, {
-                                                                        onClick: ()=>editVariable(idx),
-                                                                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        children: (_getVariableLabelByKind = getVariableLabelByKind(v.kind)) !== null && _getVariableLabelByKind !== void 0 ? _getVariableLabelByKind : v.kind
                                                                     }),
-                                                                    /*#__PURE__*/ _jsx(IconButton, {
-                                                                        onClick: ()=>removeVariable(idx),
-                                                                        children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                    /*#__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: {
+                                                                            display: 'flex',
+                                                                            flexDirection: 'row',
+                                                                            flexGrow: 1
+                                                                        },
+                                                                        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 && !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"
+                                                                })
                                                             })
                                                         ]
-                                                    }, v.spec.name);
+                                                    })
+                                                })
+                                            }),
+                                            /*#__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);
+                                                                })
+                                                            })
+                                                        ]
+                                                    })
                                                 })
                                             })
                                         ]
-                                    })
+                                    });
                                 }),
-                                /*#__PURE__*/ _jsx(Box, {
-                                    display: "flex",
-                                    children: /*#__PURE__*/ _jsx(Button, {
-                                        variant: "contained",
-                                        startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
-                                        sx: {
-                                            marginLeft: 'auto'
-                                        },
-                                        onClick: addVariable,
-                                        children: "Add Variable"
-                                    })
+                                builtinVariableDefinitions && /*#__PURE__*/ _jsx(BuiltinVariableAccordions, {
+                                    builtinVariableDefinitions: builtinVariableDefinitions
                                 })
                             ]
                         })
@@ -292,5 +495,31 @@ export function VariableEditor(props) {
 const TableCell = styled(MuiTableCell)(({ theme  })=>({
         borderBottom: `solid 1px ${theme.palette.divider}`
     }));
+export function VariableName(props) {
+    const { name , state  } = props;
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            !(state === null || state === void 0 ? void 0 : state.overridden) && `${name} `,
+            !(state === null || state === void 0 ? void 0 : state.overridden) && (state === null || state === void 0 ? void 0 : state.overriding) && /*#__PURE__*/ _jsx(Box, {
+                fontWeight: "normal",
+                color: (theme)=>theme.palette.primary.main,
+                children: "(overriding)"
+            }),
+            (state === null || state === void 0 ? void 0 : state.overridden) && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Box, {
+                        color: (theme)=>theme.palette.grey[500],
+                        children: name
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        fontWeight: "normal",
+                        color: (theme)=>theme.palette.grey[500],
+                        children: "(overridden)"
+                    })
+                ]
+            })
+        ]
+    });
+}
 
 //# sourceMappingURL=VariableEditor.js.map