npm - @perses-dev/dashboards - Versions diffs - 0.38.0 → 0.39.0 - Mend

@perses-dev/dashboards 0.38.0 → 0.39.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (78) hide show

package/dist/components/Variables/VariableEditor.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";~~AA+BA~~,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;~~AA4BtD~~,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,~~eA4MA~~"}
1	+ {"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAOtD,OAAO,EAA4B,aAAa,EAAkB,MAAM,2BAA2B,CAAC;AACpG,OAAO,EAAE,0BAA0B,EAAuC,MAAM,eAAe,CAAC;AAsBhG,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA8QA;AAMD,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,eAoBrF"}

package/dist/components/Variables/VariableEditor.js CHANGED Viewed

@@ -12,15 +12,17 @@
 // 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 } 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 ContentDuplicate from 'mdi-material-ui/ContentDuplicate';
 import { VariableEditForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';
 import { useDiscardChangesConfirmationDialog } from '../../context';
+import { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';
 function getVariableLabelByKind(kind) {
     var ref;
     return (ref = VARIABLE_TYPES.find((variableType)=>variableType.kind === kind)) === null || ref === void 0 ? void 0 : ref.label;
@@ -41,9 +43,18 @@ 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 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 = ()=>{
@@ -120,7 +131,12 @@ export function VariableEditor(props) {
             }
         });
     };
-    var ref;
+    const overrideVariable = (v)=>{
+        setVariableDefinitions((draft)=>{
+            draft.push(v);
+        });
+    };
+    var ref, ref1;
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditForm, {
@@ -151,7 +167,7 @@ export function VariableEditor(props) {
                         children: [
                             /*#__PURE__*/ _jsx(Typography, {
                                 variant: "h2",
-                                children: "Variables"
+                                children: "Dashboard Variables"
                             }),
                             /*#__PURE__*/ _jsxs(Stack, {
                                 direction: "row",
@@ -176,113 +192,226 @@ export function VariableEditor(props) {
                             })
                         ]
                     }),
-                    /*#__PURE__*/ _jsx(Box, {
+                    /*#__PURE__*/ _jsxs(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__*/ _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, {
-                                                                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);
-                                                                    }
-                                                                })
+                                                                children: "Visibility"
                                                             }),
                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                component: "th",
-                                                                scope: "row",
-                                                                sx: {
-                                                                    fontWeight: 'bold'
-                                                                },
-                                                                children: v.spec.name
+                                                                children: "Name"
                                                             }),
                                                             /*#__PURE__*/ _jsx(TableCell, {
-                                                                children: (ref = getVariableLabelByKind(v.kind)) !== null && ref !== void 0 ? ref : v.kind
+                                                                children: "Type"
                                                             }),
-                                                            /*#__PURE__*/ _jsxs(TableCell, {
-                                                                align: "right",
+                                                            /*#__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(Typography, {
+                                            variant: "h2",
+                                            children: [
+                                                capitalize(extVar.source),
+                                                " Variables"
+                                            ]
+                                        }),
+                                        /*#__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: extVar.definitions.map((v)=>{
+                                                            var ref;
+                                                            /*#__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: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) !== true,
+                                                                            disabled: true
+                                                                        })
                                                                     }),
-                                                                    /*#__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,
+                                                                                source: extVar.source
+                                                                            })
+                                                                        })
                                                                     }),
-                                                                    /*#__PURE__*/ _jsx(IconButton, {
-                                                                        onClick: ()=>editVariable(idx),
-                                                                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                                                                    /*#__PURE__*/ _jsx(TableCell, {
+                                                                        children: (ref1 = getVariableLabelByKind(v.kind)) !== null && ref1 !== void 0 ? ref1 : v.kind
                                                                     }),
-                                                                    /*#__PURE__*/ _jsx(IconButton, {
-                                                                        onClick: ()=>removeVariable(idx),
-                                                                        children: /*#__PURE__*/ _jsx(TrashIcon, {})
+                                                                    /*#__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);
-                                                })
+                                                            }, 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"
-                                    })
-                                })
-                            ]
-                        })
+                                        })
+                                    ]
+                                }, extVar.source);
+                            })
+                        ]
                     })
                 ]
             })
@@ -292,5 +421,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

package/dist/components/Variables/VariableEditor.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport {\n Button,\n Stack,\n Box,\n TableContainer,\n TableBody,\n TableRow,\n TableCell as MuiTableCell,\n Table,\n TableHead,\n Switch,\n Typography,\n IconButton,\n Alert,\n styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport { Action, VariableEditForm, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nfunction getVariableLabelByKind(kind: string) {\n return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n const errors = [];\n\n /** Variable names must be unique */\n const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n const uniqueVariableNames = new Set(variableNames);\n if (variableNames.length !== uniqueVariableNames.size) {\n errors.push('Variable names must be unique');\n }\n return {\n errors: errors,\n isValid: errors.length === 0,\n };\n}\n\nexport function VariableEditor(props: {\n variableDefinitions: VariableDefinition[];\n onChange: (variableDefinitions: VariableDefinition[]) => void;\n onCancel: () => void;\n}) {\n const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n const [variableEditIdx, setVariableEditIdx] = useState<number \| null>(null);\n const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n const handleCancel = () => {\n if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n closeDiscardChangesConfirmationDialog();\n props.onCancel();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n description:\n 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n });\n } else {\n props.onCancel();\n }\n };\n\n const removeVariable = (index: number) => {\n setVariableDefinitions((draft) => {\n draft.splice(index, 1);\n });\n };\n\n const addVariable = () => {\n setVariableFormAction('create');\n setVariableDefinitions((draft) => {\n draft.push({\n kind: 'TextVariable',\n spec: {\n name: 'NewVariable',\n value: '',\n },\n });\n });\n setVariableEditIdx(variableDefinitions.length);\n };\n\n const editVariable = (index: number) => {\n setVariableFormAction('update');\n setVariableEditIdx(index);\n };\n\n const toggleVariableVisibility = (index: number, visible: boolean) => {\n setVariableDefinitions((draft) => {\n const v = draft[index];\n if (!v) {\n return;\n }\n if (!v.spec.display) {\n v.spec.display = {\n name: v.spec.name,\n hidden: false,\n };\n }\n v.spec.display.hidden = visible === false;\n });\n };\n\n const changeVariableOrder = (index: number, direction: 'up' \| 'down') => {\n setVariableDefinitions((draft) => {\n if (direction === 'up') {\n const prevElement = draft[index - 1];\n const currentElement = draft[index];\n if (index === 0 \|\| !prevElement \|\| !currentElement) {\n return;\n }\n draft[index - 1] = currentElement;\n draft[index] = prevElement;\n } else {\n const nextElement = draft[index + 1];\n const currentElement = draft[index];\n if (index === draft.length - 1 \|\| !nextElement \|\| !currentElement) {\n return;\n }\n draft[index + 1] = currentElement;\n draft[index] = nextElement;\n }\n });\n };\n\n return (\n <>\n {currentEditingVariableDefinition && (\n <VariableEditForm\n initialVariableDefinition={currentEditingVariableDefinition}\n onChange={(definition) => {\n setVariableDefinitions((draft) => {\n draft[variableEditIdx] = definition;\n setVariableEditIdx(null);\n });\n }}\n onCancel={() => {\n if (variableFormAction === 'create') {\n removeVariable(variableEditIdx);\n }\n setVariableEditIdx(null);\n }}\n action={variableFormAction}\n />\n )}\n {!currentEditingVariableDefinition && (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Variables</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button\n disabled={props.variableDefinitions === variableDefinitions \|\| !validation.isValid}\n variant=\"contained\"\n onClick={() => {\n props.onChange(variableDefinitions);\n }}\n >\n Apply\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Stack spacing={2}>\n {!validation.isValid &&\n validation.errors.map((error) => (\n <Alert severity=\"error\" key={error}>\n {error}\n </Alert>\n ))}\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell align=\"right\" />\n </TableRow>\n </TableHead>\n <TableBody>\n {variableDefinitions.map((v, idx) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch\n checked={v.spec.display?.hidden !== true}\n onChange={(e) => {\n toggleVariableVisibility(idx, e.target.checked);\n }}\n />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n {v.spec.name}\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell align=\"right\">\n <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n <ArrowUp />\n </IconButton>\n <IconButton\n onClick={() => changeVariableOrder(idx, 'down')}\n disabled={idx === variableDefinitions.length - 1}\n >\n <ArrowDown />\n </IconButton>\n\n <IconButton onClick={() => editVariable(idx)}>\n <PencilIcon />\n </IconButton>\n <IconButton onClick={() => removeVariable(idx)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n Add Variable\n </Button>\n </Box>\n </Stack>\n </Box>\n </>\n )}\n </>\n );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","VARIABLE_TYPES","useDiscardChangesConfirmationDialog","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","validation","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","initialVariableDefinition","onChange","definition","action","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","startIcon"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport {\n Button,\n Stack,\n Box,\n TableContainer,\n TableBody,\n TableRow,\n TableCell as MuiTableCell,\n Table,\n TableHead,\n Switch,\n Typography,\n IconButton,\n Alert,\n styled,\n capitalize,\n Tooltip,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\nimport ContentDuplicate from 'mdi-material-ui/ContentDuplicate';\nimport { Action, VariableEditForm, VariableState, VARIABLE_TYPES } from '@perses-dev/plugin-system';\nimport { ExternalVariableDefinition, useDiscardChangesConfirmationDialog } from '../../context';\nimport { hydrateTemplateVariableStates } from '../../context/TemplateVariableProvider/hydrationUtils';\n\nfunction getVariableLabelByKind(kind: string) {\n return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n const errors = [];\n\n /** Variable names must be unique */\n const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n const uniqueVariableNames = new Set(variableNames);\n if (variableNames.length !== uniqueVariableNames.size) {\n errors.push('Variable names must be unique');\n }\n return {\n errors: errors,\n isValid: errors.length === 0,\n };\n}\n\nexport function VariableEditor(props: {\n variableDefinitions: VariableDefinition[];\n externalVariableDefinitions: ExternalVariableDefinition[];\n onChange: (variableDefinitions: VariableDefinition[]) => void;\n onCancel: () => void;\n}) {\n const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n const [variableEditIdx, setVariableEditIdx] = useState<number \| null>(null);\n const [variableFormAction, setVariableFormAction] = useState<Action>('update');\n\n const externalVariableDefinitions = props.externalVariableDefinitions;\n const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n const [variableState] = useMemo(() => {\n return [hydrateTemplateVariableStates(variableDefinitions, {}, externalVariableDefinitions)];\n }, [externalVariableDefinitions, variableDefinitions]);\n const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n useDiscardChangesConfirmationDialog();\n const handleCancel = () => {\n if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\n openDiscardChangesConfirmationDialog({\n onDiscardChanges: () => {\n closeDiscardChangesConfirmationDialog();\n props.onCancel();\n },\n onCancel: () => {\n closeDiscardChangesConfirmationDialog();\n },\n description:\n 'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n });\n } else {\n props.onCancel();\n }\n };\n\n const removeVariable = (index: number) => {\n setVariableDefinitions((draft) => {\n draft.splice(index, 1);\n });\n };\n\n const addVariable = () => {\n setVariableFormAction('create');\n setVariableDefinitions((draft) => {\n draft.push({\n kind: 'TextVariable',\n spec: {\n name: 'NewVariable',\n value: '',\n },\n });\n });\n setVariableEditIdx(variableDefinitions.length);\n };\n\n const editVariable = (index: number) => {\n setVariableFormAction('update');\n setVariableEditIdx(index);\n };\n\n const toggleVariableVisibility = (index: number, visible: boolean) => {\n setVariableDefinitions((draft) => {\n const v = draft[index];\n if (!v) {\n return;\n }\n if (!v.spec.display) {\n v.spec.display = {\n name: v.spec.name,\n hidden: false,\n };\n }\n v.spec.display.hidden = visible === false;\n });\n };\n\n const changeVariableOrder = (index: number, direction: 'up' \| 'down') => {\n setVariableDefinitions((draft) => {\n if (direction === 'up') {\n const prevElement = draft[index - 1];\n const currentElement = draft[index];\n if (index === 0 \|\| !prevElement \|\| !currentElement) {\n return;\n }\n draft[index - 1] = currentElement;\n draft[index] = prevElement;\n } else {\n const nextElement = draft[index + 1];\n const currentElement = draft[index];\n if (index === draft.length - 1 \|\| !nextElement \|\| !currentElement) {\n return;\n }\n draft[index + 1] = currentElement;\n draft[index] = nextElement;\n }\n });\n };\n\n const overrideVariable = (v: VariableDefinition) => {\n setVariableDefinitions((draft) => {\n draft.push(v);\n });\n };\n\n return (\n <>\n {currentEditingVariableDefinition && (\n <VariableEditForm\n initialVariableDefinition={currentEditingVariableDefinition}\n onChange={(definition) => {\n setVariableDefinitions((draft) => {\n draft[variableEditIdx] = definition;\n setVariableEditIdx(null);\n });\n }}\n onCancel={() => {\n if (variableFormAction === 'create') {\n removeVariable(variableEditIdx);\n }\n setVariableEditIdx(null);\n }}\n action={variableFormAction}\n />\n )}\n {!currentEditingVariableDefinition && (\n <>\n <Box\n sx={{\n display: 'flex',\n alignItems: 'center',\n padding: (theme) => theme.spacing(1, 2),\n borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n }}\n >\n <Typography variant=\"h2\">Dashboard Variables</Typography>\n <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n <Button\n disabled={props.variableDefinitions === variableDefinitions \|\| !validation.isValid}\n variant=\"contained\"\n onClick={() => {\n props.onChange(variableDefinitions);\n }}\n >\n Apply\n </Button>\n <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Stack spacing={2}>\n {!validation.isValid &&\n validation.errors.map((error) => (\n <Alert severity=\"error\" key={error}>\n {error}\n </Alert>\n ))}\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell align=\"right\" />\n </TableRow>\n </TableHead>\n <TableBody>\n {variableDefinitions.map((v, idx) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch\n checked={v.spec.display?.hidden !== true}\n onChange={(e) => {\n toggleVariableVisibility(idx, e.target.checked);\n }}\n />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n <VariableName name={v.spec.name} state={variableState.get({ name: v.spec.name })} />\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell align=\"right\">\n <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n <ArrowUp />\n </IconButton>\n <IconButton\n onClick={() => changeVariableOrder(idx, 'down')}\n disabled={idx === variableDefinitions.length - 1}\n >\n <ArrowDown />\n </IconButton>\n\n <IconButton onClick={() => editVariable(idx)}>\n <PencilIcon />\n </IconButton>\n <IconButton onClick={() => removeVariable(idx)}>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n <Box display=\"flex\">\n <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n Add Variable\n </Button>\n </Box>\n </Stack>\n\n {externalVariableDefinitions.map((extVar) => (\n <Stack key={extVar.source}>\n <Typography variant=\"h2\">{capitalize(extVar.source)} Variables</Typography>\n <TableContainer>\n <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Name</TableCell>\n <TableCell>Type</TableCell>\n <TableCell align=\"right\" />\n </TableRow>\n </TableHead>\n <TableBody>\n {extVar.definitions.map((v) => (\n <TableRow key={v.spec.name}>\n <TableCell component=\"th\" scope=\"row\">\n <Switch checked={v.spec.display?.hidden !== true} disabled />\n </TableCell>\n <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n <VariableName\n name={v.spec.name}\n state={variableState.get({ name: v.spec.name, source: extVar.source })}\n />\n </TableCell>\n <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n <TableCell align=\"right\">\n <Tooltip title=\"Override\">\n <IconButton\n onClick={() => overrideVariable(v)}\n disabled={!!variableState.get({ name: v.spec.name })}\n >\n <ContentDuplicate />\n </IconButton>\n </Tooltip>\n <IconButton disabled>\n <ArrowUp />\n </IconButton>\n <IconButton disabled>\n <ArrowDown />\n </IconButton>\n <IconButton disabled>\n <PencilIcon />\n </IconButton>\n <IconButton disabled>\n <TrashIcon />\n </IconButton>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </TableContainer>\n </Stack>\n ))}\n </Box>\n </>\n )}\n </>\n );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n\nexport function VariableName(props: { name: string; state: VariableState \| undefined }) {\n const { name, state } = props;\n return (\n <>\n {!state?.overridden && `${name} `}\n {!state?.overridden && state?.overriding && (\n <Box fontWeight=\"normal\" color={(theme) => theme.palette.primary.main}>\n (overriding)\n </Box>\n )}\n {state?.overridden && (\n <>\n <Box color={(theme) => theme.palette.grey[500]}>{name}</Box>\n <Box fontWeight=\"normal\" color={(theme) => theme.palette.grey[500]}>\n (overridden)\n </Box>\n </>\n )}\n </>\n );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","capitalize","Tooltip","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","ContentDuplicate","VariableEditForm","VARIABLE_TYPES","useDiscardChangesConfirmationDialog","hydrateTemplateVariableStates","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","variableFormAction","setVariableFormAction","externalVariableDefinitions","validation","variableState","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","editVariable","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","overrideVariable","initialVariableDefinition","onChange","definition","action","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","VariableName","state","get","startIcon","extVar","source","definitions","title","overridden","overriding","primary","main","grey"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,EAAEC,OAAO,QAAQ,OAAO,CAAC;AAC1C,SACEC,MAAM,EACNC,KAAK,EACLC,GAAG,EACHC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,SAAS,IAAIC,YAAY,EACzBC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,UAAU,EACVC,KAAK,EACLC,MAAM,EACNC,UAAU,EACVC,OAAO,QACF,eAAe,CAAC;AACvB,OAAOC,OAAO,MAAM,sBAAsB,CAAC;AAE3C,SAASC,QAAQ,QAAQ,WAAW,CAAC;AACrC,OAAOC,UAAU,MAAM,wBAAwB,CAAC;AAChD,OAAOC,SAAS,MAAM,0BAA0B,CAAC;AACjD,OAAOC,OAAO,MAAM,yBAAyB,CAAC;AAC9C,OAAOC,SAAS,MAAM,2BAA2B,CAAC;AAClD,OAAOC,gBAAgB,MAAM,kCAAkC,CAAC;AAChE,SAAiBC,gBAAgB,EAAiBC,cAAc,QAAQ,2BAA2B,CAAC;AACpG,SAAqCC,mCAAmC,QAAQ,eAAe,CAAC;AAChG,SAASC,6BAA6B,QAAQ,uDAAuD,CAAC;AAEtG,SAASC,sBAAsB,CAACC,IAAY,EAAE;QACrCJ,GAAiE;IAAxE,OAAOA,CAAAA,GAAiE,GAAjEA,cAAc,CAACK,IAAI,CAAC,CAACC,YAAY,GAAKA,YAAY,CAACF,IAAI,KAAKA,IAAI,CAAC,cAAjEJ,GAAiE,WAAO,GAAxEA,KAAAA,CAAwE,GAAxEA,GAAiE,CAAEO,KAAK,CAAC;AAClF,CAAC;AAED,SAASC,aAAa,CAACC,mBAAyC,EAAE;IAChE,MAAMC,MAAM,GAAG,EAAE,AAAC;IAElB,mCAAmC,GACnC,MAAMC,aAAa,GAAGF,mBAAmB,CAACG,GAAG,CAAC,CAACC,kBAAkB,GAAKA,kBAAkB,CAACC,IAAI,CAACC,IAAI,CAAC,AAAC;IACpG,MAAMC,mBAAmB,GAAG,IAAIC,GAAG,CAACN,aAAa,CAAC,AAAC;IACnD,IAAIA,aAAa,CAACO,MAAM,KAAKF,mBAAmB,CAACG,IAAI,EAAE;QACrDT,MAAM,CAACU,IAAI,CAAC,+BAA+B,CAAC,CAAC;IAC/C,CAAC;IACD,OAAO;QACLV,MAAM,EAAEA,MAAM;QACdW,OAAO,EAAEX,MAAM,CAACQ,MAAM,KAAK,CAAC;KAC7B,CAAC;AACJ,CAAC;AAED,OAAO,SAASI,cAAc,CAACC,KAK9B,EAAE;IACD,MAAM,CAACd,mBAAmB,EAAEe,sBAAsB,CAAC,GAAG/B,QAAQ,CAAC8B,KAAK,CAACd,mBAAmB,CAAC,AAAC;IAC1F,MAAM,CAACgB,eAAe,EAAEC,kBAAkB,CAAC,GAAGrD,QAAQ,CAAgB,IAAI,CAAC,AAAC;IAC5E,MAAM,CAACsD,kBAAkB,EAAEC,qBAAqB,CAAC,GAAGvD,QAAQ,CAAS,QAAQ,CAAC,AAAC;IAE/E,MAAMwD,2BAA2B,GAAGN,KAAK,CAACM,2BAA2B,AAAC;IACtE,MAAMC,UAAU,GAAGxD,OAAO,CAAC,IAAMkC,aAAa,CAACC,mBAAmB,CAAC,EAAE;QAACA,mBAAmB;KAAC,CAAC,AAAC;IAC5F,MAAM,CAACsB,aAAa,CAAC,GAAGzD,OAAO,CAAC,IAAM;QACpC,OAAO;YAAC4B,6BAA6B,CAACO,mBAAmB,EAAE,EAAE,EAAEoB,2BAA2B,CAAC;SAAC,CAAC;IAC/F,CAAC,EAAE;QAACA,2BAA2B;QAAEpB,mBAAmB;KAAC,CAAC,AAAC;IACvD,MAAMuB,gCAAgC,GAAG,OAAOP,eAAe,KAAK,QAAQ,IAAIhB,mBAAmB,CAACgB,eAAe,CAAC,AAAC;IAErH,MAAM,EAAEQ,oCAAoC,CAAA,EAAEC,qCAAqC,CAAA,EAAE,GACnFjC,mCAAmC,EAAE,AAAC;IACxC,MAAMkC,YAAY,GAAG,IAAM;QACzB,IAAIC,IAAI,CAACC,SAAS,CAACd,KAAK,CAACd,mBAAmB,CAAC,KAAK2B,IAAI,CAACC,SAAS,CAAC5B,mBAAmB,CAAC,EAAE;YACrFwB,oCAAoC,CAAC;gBACnCK,gBAAgB,EAAE,IAAM;oBACtBJ,qCAAqC,EAAE,CAAC;oBACxCX,KAAK,CAACgB,QAAQ,EAAE,CAAC;gBACnB,CAAC;gBACDA,QAAQ,EAAE,IAAM;oBACdL,qCAAqC,EAAE,CAAC;gBAC1C,CAAC;gBACDM,WAAW,EACT,0GAA0G;aAC7G,CAAC,CAAC;QACL,OAAO;YACLjB,KAAK,CAACgB,QAAQ,EAAE,CAAC;QACnB,CAAC;IACH,CAAC,AAAC;IAEF,MAAME,cAAc,GAAG,CAACC,KAAa,GAAK;QACxClB,sBAAsB,CAAC,CAACmB,KAAK,GAAK;YAChCA,KAAK,CAACC,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMG,WAAW,GAAG,IAAM;QACxBjB,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAChCJ,sBAAsB,CAAC,CAACmB,KAAK,GAAK;YAChCA,KAAK,CAACvB,IAAI,CAAC;gBACThB,IAAI,EAAE,cAAc;gBACpBU,IAAI,EAAE;oBACJC,IAAI,EAAE,aAAa;oBACnB+B,KAAK,EAAE,EAAE;iBACV;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QACHpB,kBAAkB,CAACjB,mBAAmB,CAACS,MAAM,CAAC,CAAC;IACjD,CAAC,AAAC;IAEF,MAAM6B,YAAY,GAAG,CAACL,KAAa,GAAK;QACtCd,qBAAqB,CAAC,QAAQ,CAAC,CAAC;QAChCF,kBAAkB,CAACgB,KAAK,CAAC,CAAC;IAC5B,CAAC,AAAC;IAEF,MAAMM,wBAAwB,GAAG,CAACN,KAAa,EAAEO,OAAgB,GAAK;QACpEzB,sBAAsB,CAAC,CAACmB,KAAK,GAAK;YAChC,MAAMO,CAAC,GAAGP,KAAK,CAACD,KAAK,CAAC,AAAC;YACvB,IAAI,CAACQ,CAAC,EAAE;gBACN,OAAO;YACT,CAAC;YACD,IAAI,CAACA,CAAC,CAACpC,IAAI,CAACqC,OAAO,EAAE;gBACnBD,CAAC,CAACpC,IAAI,CAACqC,OAAO,GAAG;oBACfpC,IAAI,EAAEmC,CAAC,CAACpC,IAAI,CAACC,IAAI;oBACjBqC,MAAM,EAAE,KAAK;iBACd,CAAC;YACJ,CAAC;YACDF,CAAC,CAACpC,IAAI,CAACqC,OAAO,CAACC,MAAM,GAAGH,OAAO,KAAK,KAAK,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,CAACX,KAAa,EAAEY,SAAwB,GAAK;QACvE9B,sBAAsB,CAAC,CAACmB,KAAK,GAAK;YAChC,IAAIW,SAAS,KAAK,IAAI,EAAE;gBACtB,MAAMC,WAAW,GAAGZ,KAAK,CAACD,KAAK,GAAG,CAAC,CAAC,AAAC;gBACrC,MAAMc,cAAc,GAAGb,KAAK,CAACD,KAAK,CAAC,AAAC;gBACpC,IAAIA,KAAK,KAAK,CAAC,IAAI,CAACa,WAAW,IAAI,CAACC,cAAc,EAAE;oBAClD,OAAO;gBACT,CAAC;gBACDb,KAAK,CAACD,KAAK,GAAG,CAAC,CAAC,GAAGc,cAAc,CAAC;gBAClCb,KAAK,CAACD,KAAK,CAAC,GAAGa,WAAW,CAAC;YAC7B,OAAO;gBACL,MAAME,WAAW,GAAGd,KAAK,CAACD,KAAK,GAAG,CAAC,CAAC,AAAC;gBACrC,MAAMc,eAAc,GAAGb,KAAK,CAACD,KAAK,CAAC,AAAC;gBACpC,IAAIA,KAAK,KAAKC,KAAK,CAACzB,MAAM,GAAG,CAAC,IAAI,CAACuC,WAAW,IAAI,CAACD,eAAc,EAAE;oBACjE,OAAO;gBACT,CAAC;gBACDb,KAAK,CAACD,KAAK,GAAG,CAAC,CAAC,GAAGc,eAAc,CAAC;gBAClCb,KAAK,CAACD,KAAK,CAAC,GAAGe,WAAW,CAAC;YAC7B,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMC,gBAAgB,GAAG,CAACR,CAAqB,GAAK;QAClD1B,sBAAsB,CAAC,CAACmB,KAAK,GAAK;YAChCA,KAAK,CAACvB,IAAI,CAAC8B,CAAC,CAAC,CAAC;QAChB,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;QAgFgC/C,GAA8B,EAwD5BA,IAA8B;IAtIlE,qBACE;;YACG6B,gCAAgC,kBAC/B,KAACjC,gBAAgB;gBACf4D,yBAAyB,EAAE3B,gCAAgC;gBAC3D4B,QAAQ,EAAE,CAACC,UAAU,GAAK;oBACxBrC,sBAAsB,CAAC,CAACmB,KAAK,GAAK;wBAChCA,KAAK,CAAClB,eAAe,CAAC,GAAGoC,UAAU,CAAC;wBACpCnC,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,CAAC,CAAC;gBACL,CAAC;gBACDa,QAAQ,EAAE,IAAM;oBACd,IAAIZ,kBAAkB,KAAK,QAAQ,EAAE;wBACnCc,cAAc,CAAChB,eAAe,CAAC,CAAC;oBAClC,CAAC;oBACDC,kBAAkB,CAAC,IAAI,CAAC,CAAC;gBAC3B,CAAC;gBACDoC,MAAM,EAAEnC,kBAAkB;cAC1B,AACH;YACA,CAACK,gCAAgC,kBAChC;;kCACE,MAACvD,GAAG;wBACFsF,EAAE,EAAE;4BACFZ,OAAO,EAAE,MAAM;4BACfa,UAAU,EAAE,QAAQ;4BACpBC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,EAAE,CAAC,CAAC;4BACvCC,YAAY,EAAE,CAACF,KAAK,GAAK,CAAC,UAAU,EAAEA,KAAK,CAACG,OAAO,CAACC,OAAO,CAAC,CAAC;yBAC9D;;0CAED,KAACpF,UAAU;gCAACqF,OAAO,EAAC,IAAI;0CAAC,qBAAmB;8BAAa;0CACzD,MAAC/F,KAAK;gCAAC8E,SAAS,EAAC,KAAK;gCAACa,OAAO,EAAE,CAAC;gCAAEK,UAAU,EAAC,MAAM;;kDAClD,KAACjG,MAAM;wCACLkG,QAAQ,EAAElD,KAAK,CAACd,mBAAmB,KAAKA,mBAAmB,IAAI,CAACqB,UAAU,CAACT,OAAO;wCAClFkD,OAAO,EAAC,WAAW;wCACnBG,OAAO,EAAE,IAAM;4CACbnD,KAAK,CAACqC,QAAQ,CAACnD,mBAAmB,CAAC,CAAC;wCACtC,CAAC;kDACF,OAED;sCAAS;kDACT,KAAClC,MAAM;wCAACoG,KAAK,EAAC,WAAW;wCAACJ,OAAO,EAAC,UAAU;wCAACG,OAAO,EAAEvC,YAAY;kDAAE,QAEpE;sCAAS;;8BACH;;sBACJ;kCACN,MAAC1D,GAAG;wBAACwF,OAAO,EAAE,CAAC;wBAAEF,EAAE,EAAE;4BAAEa,SAAS,EAAE,QAAQ;yBAAE;;0CAC1C,MAACpG,KAAK;gCAAC2F,OAAO,EAAE,CAAC;;oCACd,CAACrC,UAAU,CAACT,OAAO,IAClBS,UAAU,CAACpB,MAAM,CAACE,GAAG,CAAC,CAACiE,KAAK,iBAC1B,KAACzF,KAAK;4CAAC0F,QAAQ,EAAC,OAAO;sDACpBD,KAAK;2CADqBA,KAAK,CAE1B,AACT,CAAC;kDACJ,KAACnG,cAAc;kDACb,cAAA,MAACK,KAAK;4CAACgF,EAAE,EAAE;gDAAEgB,QAAQ,EAAE,GAAG;6CAAE;4CAAEC,YAAU,EAAC,oBAAoB;;8DAC3D,KAAChG,SAAS;8DACR,cAAA,MAACJ,QAAQ;;0EACP,KAACC,SAAS;0EAAC,YAAU;8DAAY;0EACjC,KAACA,SAAS;0EAAC,MAAI;8DAAY;0EAC3B,KAACA,SAAS;0EAAC,MAAI;8DAAY;0EAC3B,KAACA,SAAS;gEAACoG,KAAK,EAAC,OAAO;8DAAG;;sDAClB;kDACD;8DACZ,KAACtG,SAAS;8DACP8B,mBAAmB,CAACG,GAAG,CAAC,CAACsC,CAAC,EAAEgC,GAAG;4DAIfhC,IAAc;sEAH7B,OAAA,MAACtE,QAAQ;;8EACP,KAACC,SAAS;oEAACsG,SAAS,EAAC,IAAI;oEAACC,KAAK,EAAC,KAAK;8EACnC,cAAA,KAACnG,MAAM;wEACLoG,OAAO,EAAEnC,CAAAA,CAAAA,IAAc,GAAdA,CAAC,CAACpC,IAAI,CAACqC,OAAO,cAAdD,IAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,IAAc,CAAEE,MAAM,CAAA,KAAK,IAAI;wEACxCQ,QAAQ,EAAE,CAAC0B,CAAC,GAAK;4EACftC,wBAAwB,CAACkC,GAAG,EAAEI,CAAC,CAACC,MAAM,CAACF,OAAO,CAAC,CAAC;wEAClD,CAAC;sEACD;kEACQ;8EACZ,KAACxG,SAAS;oEAACsG,SAAS,EAAC,IAAI;oEAACC,KAAK,EAAC,KAAK;oEAACrB,EAAE,EAAE;wEAAEyB,UAAU,EAAE,MAAM;qEAAE;8EAC9D,cAAA,KAACC,YAAY;wEAAC1E,IAAI,EAAEmC,CAAC,CAACpC,IAAI,CAACC,IAAI;wEAAE2E,KAAK,EAAE3D,aAAa,CAAC4D,GAAG,CAAC;4EAAE5E,IAAI,EAAEmC,CAAC,CAACpC,IAAI,CAACC,IAAI;yEAAE,CAAC;sEAAI;kEAC1E;8EACZ,KAAClC,SAAS;8EAAEsB,CAAAA,GAA8B,GAA9BA,sBAAsB,CAAC+C,CAAC,CAAC9C,IAAI,CAAC,cAA9BD,GAA8B,cAA9BA,GAA8B,GAAI+C,CAAC,CAAC9C,IAAI;kEAAa;8EACjE,MAACvB,SAAS;oEAACoG,KAAK,EAAC,OAAO;;sFACtB,KAAC9F,UAAU;4EAACuF,OAAO,EAAE,IAAMrB,mBAAmB,CAAC6B,GAAG,EAAE,IAAI,CAAC;4EAAET,QAAQ,EAAES,GAAG,KAAK,CAAC;sFAC5E,cAAA,KAACtF,OAAO,KAAG;0EACA;sFACb,KAACT,UAAU;4EACTuF,OAAO,EAAE,IAAMrB,mBAAmB,CAAC6B,GAAG,EAAE,MAAM,CAAC;4EAC/CT,QAAQ,EAAES,GAAG,KAAKzE,mBAAmB,CAACS,MAAM,GAAG,CAAC;sFAEhD,cAAA,KAACrB,SAAS,KAAG;0EACF;sFAEb,KAACV,UAAU;4EAACuF,OAAO,EAAE,IAAM3B,YAAY,CAACmC,GAAG,CAAC;sFAC1C,cAAA,KAACxF,UAAU,KAAG;0EACH;sFACb,KAACP,UAAU;4EAACuF,OAAO,EAAE,IAAMjC,cAAc,CAACyC,GAAG,CAAC;sFAC5C,cAAA,KAACvF,SAAS,KAAG;0EACF;;kEACH;;2DA9BCuD,CAAC,CAACpC,IAAI,CAACC,IAAI,CA+Bf,CAAA;qDACZ,CAAC;kDACQ;;0CACN;sCACO;kDACjB,KAACtC,GAAG;wCAAC0E,OAAO,EAAC,MAAM;kDACjB,cAAA,KAAC5E,MAAM;4CAACgG,OAAO,EAAC,WAAW;4CAACqB,SAAS,gBAAE,KAACpG,OAAO,KAAG;4CAAEuE,EAAE,EAAE;gDAAES,UAAU,EAAE,MAAM;6CAAE;4CAAEE,OAAO,EAAE7B,WAAW;sDAAE,cAEtG;0CAAS;sCACL;;8BACA;4BAEPhB,2BAA2B,CAACjB,GAAG,CAAC,CAACiF,MAAM;8CACtC,OAAA,MAACrH,KAAK;;sDACJ,MAACU,UAAU;4CAACqF,OAAO,EAAC,IAAI;;gDAAEjF,UAAU,CAACuG,MAAM,CAACC,MAAM,CAAC;gDAAC,YAAU;;0CAAa;sDAC3E,KAACpH,cAAc;sDACb,cAAA,MAACK,KAAK;gDAACgF,EAAE,EAAE;oDAAEgB,QAAQ,EAAE,GAAG;iDAAE;gDAAEC,YAAU,EAAC,oBAAoB;;kEAC3D,KAAChG,SAAS;kEACR,cAAA,MAACJ,QAAQ;;8EACP,KAACC,SAAS;8EAAC,YAAU;kEAAY;8EACjC,KAACA,SAAS;8EAAC,MAAI;kEAAY;8EAC3B,KAACA,SAAS;8EAAC,MAAI;kEAAY;8EAC3B,KAACA,SAAS;oEAACoG,KAAK,EAAC,OAAO;kEAAG;;0DAClB;sDACD;kEACZ,KAACtG,SAAS;kEACPkH,MAAM,CAACE,WAAW,CAACnF,GAAG,CAAC,CAACsC,CAAC;gEAGHA,GAAc;0EAFnC,OAAA,MAACtE,QAAQ;;kFACP,KAACC,SAAS;wEAACsG,SAAS,EAAC,IAAI;wEAACC,KAAK,EAAC,KAAK;kFACnC,cAAA,KAACnG,MAAM;4EAACoG,OAAO,EAAEnC,CAAAA,CAAAA,GAAc,GAAdA,CAAC,CAACpC,IAAI,CAACqC,OAAO,cAAdD,GAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,GAAc,CAAEE,MAAM,CAAA,KAAK,IAAI;4EAAEqB,QAAQ;0EAAG;sEACnD;kFACZ,KAAC5F,SAAS;wEAACsG,SAAS,EAAC,IAAI;wEAACC,KAAK,EAAC,KAAK;wEAACrB,EAAE,EAAE;4EAAEyB,UAAU,EAAE,MAAM;yEAAE;kFAC9D,cAAA,KAACC,YAAY;4EACX1E,IAAI,EAAEmC,CAAC,CAACpC,IAAI,CAACC,IAAI;4EACjB2E,KAAK,EAAE3D,aAAa,CAAC4D,GAAG,CAAC;gFAAE5E,IAAI,EAAEmC,CAAC,CAACpC,IAAI,CAACC,IAAI;gFAAE+E,MAAM,EAAED,MAAM,CAACC,MAAM;6EAAE,CAAC;0EACtE;sEACQ;kFACZ,KAACjH,SAAS;kFAAEsB,CAAAA,IAA8B,GAA9BA,sBAAsB,CAAC+C,CAAC,CAAC9C,IAAI,CAAC,cAA9BD,IAA8B,cAA9BA,IAA8B,GAAI+C,CAAC,CAAC9C,IAAI;sEAAa;kFACjE,MAACvB,SAAS;wEAACoG,KAAK,EAAC,OAAO;;0FACtB,KAAC1F,OAAO;gFAACyG,KAAK,EAAC,UAAU;0FACvB,cAAA,KAAC7G,UAAU;oFACTuF,OAAO,EAAE,IAAMhB,gBAAgB,CAACR,CAAC,CAAC;oFAClCuB,QAAQ,EAAE,CAAC,CAAC1C,aAAa,CAAC4D,GAAG,CAAC;wFAAE5E,IAAI,EAAEmC,CAAC,CAACpC,IAAI,CAACC,IAAI;qFAAE,CAAC;8FAEpD,cAAA,KAACjB,gBAAgB,KAAG;kFACT;8EACL;0FACV,KAACX,UAAU;gFAACsF,QAAQ;0FAClB,cAAA,KAAC7E,OAAO,KAAG;8EACA;0FACb,KAACT,UAAU;gFAACsF,QAAQ;0FAClB,cAAA,KAAC5E,SAAS,KAAG;8EACF;0FACb,KAACV,UAAU;gFAACsF,QAAQ;0FAClB,cAAA,KAAC/E,UAAU,KAAG;8EACH;0FACb,KAACP,UAAU;gFAACsF,QAAQ;0FAClB,cAAA,KAAC9E,SAAS,KAAG;8EACF;;sEACH;;+DAhCCuD,CAAC,CAACpC,IAAI,CAACC,IAAI,CAiCf,CAAA;yDACZ,CAAC;sDACQ;;8CACN;0CACO;;mCAnDP8E,MAAM,CAACC,MAAM,CAoDjB,CAAA;6BACT,CAAC;;sBACE;;cACL,AACJ;;MACA,CACH;AACJ,CAAC;AAED,MAAMjH,SAAS,GAAGQ,MAAM,CAACP,YAAY,CAAC,CAAC,CAAC,EAAEoF,KAAK,CAAA,EAAE,GAAM,CAAA;QACrDE,YAAY,EAAE,CAAC,UAAU,EAAEF,KAAK,CAACG,OAAO,CAACC,OAAO,CAAC,CAAC;KACnD,CAAA,AAAC,CAAC,AAAC;AAEJ,OAAO,SAASmB,YAAY,CAAClE,KAAyD,EAAE;IACtF,MAAM,EAAER,IAAI,CAAA,EAAE2E,KAAK,CAAA,EAAE,GAAGnE,KAAK,AAAC;IAC9B,qBACE;;YACG,CAACmE,CAAAA,KAAK,aAALA,KAAK,WAAY,GAAjBA,KAAAA,CAAiB,GAAjBA,KAAK,CAAEO,UAAU,CAAA,IAAI,CAAC,EAAElF,IAAI,CAAC,CAAC,CAAC;YAChC,CAAC2E,CAAAA,KAAK,aAALA,KAAK,WAAY,GAAjBA,KAAAA,CAAiB,GAAjBA,KAAK,CAAEO,UAAU,CAAA,IAAIP,CAAAA,KAAK,aAALA,KAAK,WAAY,GAAjBA,KAAAA,CAAiB,GAAjBA,KAAK,CAAEQ,UAAU,CAAA,kBACtC,KAACzH,GAAG;gBAAC+G,UAAU,EAAC,QAAQ;gBAACb,KAAK,EAAE,CAACT,KAAK,GAAKA,KAAK,CAACG,OAAO,CAAC8B,OAAO,CAACC,IAAI;0BAAE,cAEvE;cAAM,AACP;YACAV,CAAAA,KAAK,aAALA,KAAK,WAAY,GAAjBA,KAAAA,CAAiB,GAAjBA,KAAK,CAAEO,UAAU,CAAA,kBAChB;;kCACE,KAACxH,GAAG;wBAACkG,KAAK,EAAE,CAACT,KAAK,GAAKA,KAAK,CAACG,OAAO,CAACgC,IAAI,CAAC,GAAG,CAAC;kCAAGtF,IAAI;sBAAO;kCAC5D,KAACtC,GAAG;wBAAC+G,UAAU,EAAC,QAAQ;wBAACb,KAAK,EAAE,CAACT,KAAK,GAAKA,KAAK,CAACG,OAAO,CAACgC,IAAI,CAAC,GAAG,CAAC;kCAAE,cAEpE;sBAAM;;cACL,AACJ;;MACA,CACH;AACJ,CAAC"}

package/dist/components/Variables/VariableList.d.ts CHANGED Viewed

@@ -1,3 +1,8 @@
 /// <reference types="react" />
+import { VariableSpec } from '@perses-dev/core';
 export declare function TemplateVariableList(): JSX.Element;
+export declare function TemplateVariableListItem({ spec, source }: {
+    spec: VariableSpec;
+    source?: string;
+}): JSX.Element;
 //# sourceMappingURL=VariableList.d.ts.map

package/dist/components/Variables/VariableList.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";~~AAqBA~~,wBAAgB,oBAAoB,~~gBAoBnC~~"}
1	+ {"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAsB,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAYpE,wBAAgB,oBAAoB,gBAmBnC;AAED,wBAAgB,wBAAwB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,EAAE;IAAE,IAAI,EAAE,YAAY,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,eAejG"}

package/dist/components/Variables/VariableList.js CHANGED Viewed

@@ -10,30 +10,44 @@
 // 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.
-import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { Box } from '@mui/material';
-import { useTemplateVariableDefinitions } from '../../context';
+import { useTemplateExternalVariableDefinitions, useTemplateVariable, useTemplateVariableDefinitions } from '../../context';
 import { TemplateVariable } from './TemplateVariable';
 const VARIABLE_INPUT_MIN_WIDTH = '120px';
 const VARIABLE_INPUT_MAX_WIDTH = '240px';
 export function TemplateVariableList() {
     const variableDefinitions = useTemplateVariableDefinitions();
-    return /*#__PURE__*/ _jsx(_Fragment, {
-        children: variableDefinitions.map((v)=>{
-            var ref;
-            /*#__PURE__*/ return _jsx(Box, {
-                display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                minWidth: VARIABLE_INPUT_MIN_WIDTH,
-                maxWidth: VARIABLE_INPUT_MAX_WIDTH,
-                marginBottom: 1,
-                marginRight: 1,
-                "data-testid": "template-variable",
-                children: /*#__PURE__*/ _jsx(TemplateVariable, {
-                    name: v.spec.name
-                }, v.spec.name)
-            }, v.spec.name);
-        })
+    const externalVariableDefinitions = useTemplateExternalVariableDefinitions();
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            externalVariableDefinitions.slice().reverse() // We reverse to have the most prioritized on top
+            .map((def)=>def.definitions.map((v)=>/*#__PURE__*/ _jsx(TemplateVariableListItem, {
+                        spec: v.spec,
+                        source: def.source
+                    }, v.spec.name + def.source))),
+            variableDefinitions.map((v)=>/*#__PURE__*/ _jsx(TemplateVariableListItem, {
+                    spec: v.spec
+                }, v.spec.name))
+        ]
     });
 }
+export function TemplateVariableListItem({ spec , source  }) {
+    var ref, ref1;
+    const ctx = useTemplateVariable(spec.name, source);
+    var ref2, ref3;
+    return /*#__PURE__*/ _jsx(Box, {
+        display: ((ref = ctx.state) === null || ref === void 0 ? void 0 : ref.overridden) || ((ref1 = spec.display) === null || ref1 === void 0 ? void 0 : ref1.hidden) ? 'none' : undefined,
+        minWidth: VARIABLE_INPUT_MIN_WIDTH,
+        maxWidth: VARIABLE_INPUT_MAX_WIDTH,
+        marginBottom: 1,
+        marginRight: 1,
+        "data-testid": "template-variable",
+        children: /*#__PURE__*/ _jsx(TemplateVariable, {
+            name: spec.name,
+            source: source
+        }, (ref2 = spec.name + source) !== null && ref2 !== void 0 ? ref2 : '')
+    }, (ref3 = spec.name + source) !== null && ref3 !== void 0 ? ref3 : '');
+}
 //# sourceMappingURL=VariableList.js.map