npm - @perses-dev/dashboards - Versions diffs - 0.15.0 → 0.17.0 - Mend

@perses-dev/dashboards 0.15.0 → 0.17.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 (86) hide show

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

	@@ -1 +1 @@
1	- {"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2022 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 } from 'react';\nimport {\n Button,\n Stack,\n Box,\n TableContainer,\n TableBody,\n TableRow,\n TableCell,\n Table,\n Paper,\n TableHead,\n Switch,\n Typography,\n IconButton,\n} from '@mui/material';\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';\n\nimport { VariableEditForm } from './VariableEditorForm';\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\n const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n const removeVariable = (index: number) => {\n setVariableDefinitions((draft) => {\n draft.splice(index, 1);\n });\n };\n\n const addVariable = () => {\n setVariableDefinitions((draft) => {\n draft.push({\n kind: 'TextVariable',\n spec: {\n name: 'NewVariable',\n value: '',\n },\n });\n });\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 <Box p={4}>\n {currentEditingVariableDefinition && (\n <>\n <Typography variant=\"h3\" mb={2}>\n Edit Variable\n </Typography>\n <VariableEditForm\n initialVariableDefinition={currentEditingVariableDefinition}\n onChange={(definition) => {\n setVariableDefinitions((draft) => {\n draft[variableEditIdx] = definition;\n setVariableEditIdx(null);\n });\n }}\n onCancel={() => setVariableEditIdx(null)}\n />\n </>\n )}\n {!currentEditingVariableDefinition && (\n <>\n <Stack direction=\"row\" spacing={1} justifyContent=\"end\">\n <Button\n disabled={props.variableDefinitions === variableDefinitions}\n variant=\"contained\"\n onClick={() => {\n props.onChange(variableDefinitions);\n }}\n >\n Apply\n </Button>\n <Button\n variant=\"outlined\"\n onClick={() => {\n props.onCancel();\n }}\n >\n Cancel\n </Button>\n </Stack>\n <Typography variant=\"h3\" mb={2}>\n Variable List\n </Typography>\n <Stack spacing={2}>\n <TableContainer component={Paper}>\n <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Variable Name</TableCell>\n <TableCell>Variable Type</TableCell>\n <TableCell align=\"right\">Action</TableCell>\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>{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={() => setVariableEditIdx(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 onClick={addVariable} variant=\"contained\">\n Add New Variable\n </Button>\n </Box>\n </Stack>\n </>\n )}\n </Box>\n );\n}\n"],"names":["useState","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","length","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","spacing","justifyContent","disabled","onClick","component","sx","minWidth","aria-label","align","map","idx","scope","checked","e","target","fontWeight"],"mappings":"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"}
1	+ {"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2022 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,\n Table,\n Paper,\n TableHead,\n Switch,\n Typography,\n IconButton,\n Alert,\n} from '@mui/material';\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';\n\nimport { VariableEditForm } from './VariableEditorForm';\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\n const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n const removeVariable = (index: number) => {\n setVariableDefinitions((draft) => {\n draft.splice(index, 1);\n });\n };\n\n const addVariable = () => {\n setVariableDefinitions((draft) => {\n draft.push({\n kind: 'TextVariable',\n spec: {\n name: 'NewVariable',\n value: '',\n },\n });\n });\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={() => setVariableEditIdx(null)}\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.grey[100]}`,\n }}\n >\n <Typography variant=\"h2\">Template 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\n variant=\"outlined\"\n onClick={() => {\n props.onCancel();\n }}\n >\n Cancel\n </Button>\n </Stack>\n </Box>\n <Box padding={2} sx={{ overflowY: 'scroll' }}>\n <Typography variant=\"h3\" mb={2}>\n Variable List\n </Typography>\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 component={Paper}>\n <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n <TableHead>\n <TableRow>\n <TableCell>Visibility</TableCell>\n <TableCell>Variable Name</TableCell>\n <TableCell>Variable Type</TableCell>\n <TableCell align=\"right\">Action</TableCell>\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>{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={() => setVariableEditIdx(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 onClick={addVariable} variant=\"contained\">\n Add New Variable\n </Button>\n </Box>\n </Stack>\n </Box>\n </>\n )}\n </>\n );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","Alert","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","validation","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","kind","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","initialVariableDefinition","onChange","definition","onCancel","sx","alignItems","padding","theme","spacing","borderBottom","palette","grey","variant","marginLeft","disabled","onClick","overflowY","mb","error","severity","component","minWidth","aria-label","align","idx","scope","checked","e","target","fontWeight"],"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,EACTC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,MAAM,EACNC,UAAU,EACVC,UAAU,EACVC,KAAK,QACA,eAAe,CAAC;AAEvB,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;AAElD,SAASC,gBAAgB,QAAQ,sBAAsB,CAAC;AAExD,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,KAI9B,EAAE;IACD,MAAM,CAACd,mBAAmB,EAAEe,sBAAsB,CAAC,GAAGtB,QAAQ,CAACqB,KAAK,CAACd,mBAAmB,CAAC,AAAC;IAC1F,MAAM,CAACgB,eAAe,EAAEC,kBAAkB,CAAC,GAAGxC,QAAQ,CAAgB,IAAI,CAAC,AAAC;IAE5E,MAAMyC,UAAU,GAAGxC,OAAO,CAAC,IAAMqB,aAAa,CAACC,mBAAmB,CAAC,EAAE;QAACA,mBAAmB;KAAC,CAAC,AAAC;IAC5F,MAAMmB,gCAAgC,GAAG,OAAOH,eAAe,KAAK,QAAQ,IAAIhB,mBAAmB,CAACgB,eAAe,CAAC,AAAC;IAErH,MAAMI,cAAc,GAAG,CAACC,KAAa,GAAK;QACxCN,sBAAsB,CAAC,CAACO,KAAK,GAAK;YAChCA,KAAK,CAACC,MAAM,CAACF,KAAK,EAAE,CAAC,CAAC,CAAC;QACzB,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMG,WAAW,GAAG,IAAM;QACxBT,sBAAsB,CAAC,CAACO,KAAK,GAAK;YAChCA,KAAK,CAACX,IAAI,CAAC;gBACTc,IAAI,EAAE,cAAc;gBACpBpB,IAAI,EAAE;oBACJC,IAAI,EAAE,aAAa;oBACnBoB,KAAK,EAAE,EAAE;iBACV;aACF,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMC,wBAAwB,GAAG,CAACN,KAAa,EAAEO,OAAgB,GAAK;QACpEb,sBAAsB,CAAC,CAACO,KAAK,GAAK;YAChC,MAAMO,CAAC,GAAGP,KAAK,CAACD,KAAK,CAAC,AAAC;YACvB,IAAI,CAACQ,CAAC,EAAE;gBACN,OAAO;YACT,CAAC;YACD,IAAI,CAACA,CAAC,CAACxB,IAAI,CAACyB,OAAO,EAAE;gBACnBD,CAAC,CAACxB,IAAI,CAACyB,OAAO,GAAG;oBACfxB,IAAI,EAAEuB,CAAC,CAACxB,IAAI,CAACC,IAAI;oBACjByB,MAAM,EAAE,KAAK;iBACd,CAAC;YACJ,CAAC;YACDF,CAAC,CAACxB,IAAI,CAACyB,OAAO,CAACC,MAAM,GAAGH,OAAO,KAAK,KAAK,CAAC;QAC5C,CAAC,CAAC,CAAC;IACL,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,CAACX,KAAa,EAAEY,SAAwB,GAAK;QACvElB,sBAAsB,CAAC,CAACO,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,CAACb,MAAM,GAAG,CAAC,IAAI,CAAC2B,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,qBACE;;YACGjB,gCAAgC,kBAC/B,KAACrB,gBAAgB;gBACfuC,yBAAyB,EAAElB,gCAAgC;gBAC3DmB,QAAQ,EAAE,CAACC,UAAU,GAAK;oBACxBxB,sBAAsB,CAAC,CAACO,KAAK,GAAK;wBAChCA,KAAK,CAACN,eAAe,CAAC,GAAGuB,UAAU,CAAC;wBACpCtB,kBAAkB,CAAC,IAAI,CAAC,CAAC;oBAC3B,CAAC,CAAC,CAAC;gBACL,CAAC;gBACDuB,QAAQ,EAAE,IAAMvB,kBAAkB,CAAC,IAAI,CAAC;cACxC,AACH;YACA,CAACE,gCAAgC,kBAChC;;kCACE,MAACtC,GAAG;wBACF4D,EAAE,EAAE;4BACFX,OAAO,EAAE,MAAM;4BACfY,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,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;yBAChE;;0CAED,KAAC1D,UAAU;gCAAC2D,OAAO,EAAC,IAAI;0CAAC,oBAAkB;8BAAa;0CACxD,MAACrE,KAAK;gCAACqD,SAAS,EAAC,KAAK;gCAACY,OAAO,EAAE,CAAC;gCAAEK,UAAU,EAAC,MAAM;;kDAClD,KAACvE,MAAM;wCACLwE,QAAQ,EAAErC,KAAK,CAACd,mBAAmB,KAAKA,mBAAmB,IAAI,CAACkB,UAAU,CAACN,OAAO;wCAClFqC,OAAO,EAAC,WAAW;wCACnBG,OAAO,EAAE,IAAM;4CACbtC,KAAK,CAACwB,QAAQ,CAACtC,mBAAmB,CAAC,CAAC;wCACtC,CAAC;kDACF,OAED;sCAAS;kDACT,KAACrB,MAAM;wCACLsE,OAAO,EAAC,UAAU;wCAClBG,OAAO,EAAE,IAAM;4CACbtC,KAAK,CAAC0B,QAAQ,EAAE,CAAC;wCACnB,CAAC;kDACF,QAED;sCAAS;;8BACH;;sBACJ;kCACN,MAAC3D,GAAG;wBAAC8D,OAAO,EAAE,CAAC;wBAAEF,EAAE,EAAE;4BAAEY,SAAS,EAAE,QAAQ;yBAAE;;0CAC1C,KAAC/D,UAAU;gCAAC2D,OAAO,EAAC,IAAI;gCAACK,EAAE,EAAE,CAAC;0CAAE,eAEhC;8BAAa;0CACb,MAAC1E,KAAK;gCAACiE,OAAO,EAAE,CAAC;;oCACd,CAAC3B,UAAU,CAACN,OAAO,IAClBM,UAAU,CAACjB,MAAM,CAACE,GAAG,CAAC,CAACoD,KAAK,iBAC1B,KAAC/D,KAAK;4CAACgE,QAAQ,EAAC,OAAO;sDACpBD,KAAK;2CADqBA,KAAK,CAE1B,AACT,CAAC;kDACJ,KAACzE,cAAc;wCAAC2E,SAAS,EAAEtE,KAAK;kDAC9B,cAAA,MAACD,KAAK;4CAACuD,EAAE,EAAE;gDAAEiB,QAAQ,EAAE,GAAG;6CAAE;4CAAEC,YAAU,EAAC,cAAc;;8DACrD,KAACvE,SAAS;8DACR,cAAA,MAACJ,QAAQ;;0EACP,KAACC,SAAS;0EAAC,YAAU;8DAAY;0EACjC,KAACA,SAAS;0EAAC,eAAa;8DAAY;0EACpC,KAACA,SAAS;0EAAC,eAAa;8DAAY;0EACpC,KAACA,SAAS;gEAAC2E,KAAK,EAAC,OAAO;0EAAC,QAAM;8DAAY;;sDAClC;kDACD;8DACZ,KAAC7E,SAAS;8DACPiB,mBAAmB,CAACG,GAAG,CAAC,CAAC0B,CAAC,EAAEgC,GAAG;4DAIfhC,GAAc;sEAH7B,OAAA,MAAC7C,QAAQ;;8EACP,KAACC,SAAS;oEAACwE,SAAS,EAAC,IAAI;oEAACK,KAAK,EAAC,KAAK;8EACnC,cAAA,KAACzE,MAAM;wEACL0E,OAAO,EAAElC,CAAAA,CAAAA,GAAc,GAAdA,CAAC,CAACxB,IAAI,CAACyB,OAAO,cAAdD,GAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,GAAc,CAAEE,MAAM,CAAA,KAAK,IAAI;wEACxCO,QAAQ,EAAE,CAAC0B,CAAC,GAAK;4EACfrC,wBAAwB,CAACkC,GAAG,EAAEG,CAAC,CAACC,MAAM,CAACF,OAAO,CAAC,CAAC;wEAClD,CAAC;sEACD;kEACQ;8EACZ,KAAC9E,SAAS;oEAACwE,SAAS,EAAC,IAAI;oEAACK,KAAK,EAAC,KAAK;oEAACrB,EAAE,EAAE;wEAAEyB,UAAU,EAAE,MAAM;qEAAE;8EAC7DrC,CAAC,CAACxB,IAAI,CAACC,IAAI;kEACF;8EACZ,KAACrB,SAAS;8EAAE4C,CAAC,CAACJ,IAAI;kEAAa;8EAC/B,MAACxC,SAAS;oEAAC2E,KAAK,EAAC,OAAO;;sFACtB,KAACrE,UAAU;4EAAC6D,OAAO,EAAE,IAAMpB,mBAAmB,CAAC6B,GAAG,EAAE,IAAI,CAAC;4EAAEV,QAAQ,EAAEU,GAAG,KAAK,CAAC;sFAC5E,cAAA,KAACjE,OAAO,KAAG;0EACA;sFACb,KAACL,UAAU;4EACT6D,OAAO,EAAE,IAAMpB,mBAAmB,CAAC6B,GAAG,EAAE,MAAM,CAAC;4EAC/CV,QAAQ,EAAEU,GAAG,KAAK7D,mBAAmB,CAACS,MAAM,GAAG,CAAC;sFAEhD,cAAA,KAACZ,SAAS,KAAG;0EACF;sFAEb,KAACN,UAAU;4EAAC6D,OAAO,EAAE,IAAMnC,kBAAkB,CAAC4C,GAAG,CAAC;sFAChD,cAAA,KAACnE,UAAU,KAAG;0EACH;sFACb,KAACH,UAAU;4EAAC6D,OAAO,EAAE,IAAMhC,cAAc,CAACyC,GAAG,CAAC;sFAC5C,cAAA,KAAClE,SAAS,KAAG;0EACF;;kEACH;;2DA9BCkC,CAAC,CAACxB,IAAI,CAACC,IAAI,CA+Bf,CAAA;qDACZ,CAAC;kDACQ;;0CACN;sCACO;kDACjB,KAACzB,GAAG;wCAACiD,OAAO,EAAC,MAAM;kDACjB,cAAA,KAACnD,MAAM;4CAACyE,OAAO,EAAE5B,WAAW;4CAAEyB,OAAO,EAAC,WAAW;sDAAC,kBAElD;0CAAS;sCACL;;8BACA;;sBACJ;;cACL,AACJ;;MACA,CACH;AACJ,CAAC"}

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

	@@ -1 +1 @@
1	- {"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";~~AA6BA~~,OAAO,EAAE,kBAAkB,~~EAAE~~,MAAM,kBAAkB,CAAC;~~AAWtD~~,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,~~eAyJA~~"}
1	+ {"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAiCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AAgE9E,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA2MA"}

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

@@ -11,216 +11,369 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import React from 'react';
-import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack } from '@mui/material';
+import React, { useMemo, useState } from 'react';
+import { Box, Typography, Switch, TextField, Grid, FormControl, InputLabel, MenuItem, Select, Button, Stack, Alert, Chip, IconButton, ClickAwayListener } from '@mui/material';
 import { useImmer } from 'use-immer';
 import { PluginEditor } from '@perses-dev/plugin-system';
+import { ErrorBoundary } from '@perses-dev/components';
+import Refresh from 'mdi-material-ui/Refresh';
+import { useListVariablePluginValues } from '../variable-model';
 import { getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';
 const VARIABLE_TYPES = [
     'ListVariable',
     'TextVariable'
 ];
+const DEFAULT_MAX_PREVIEW_VALUES = 50;
+// TODO: Replace with proper validation library
+function getValidation(state) {
+    /** Name validation */ let name = null;
+    if (!state.name) {
+        name = 'Name is required';
+    }
+    // name can only contain alphanumeric characters and underscores and no spaces
+    if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {
+        name = 'Name can only contain alphanumeric characters, underscores, and dashes';
+    }
+    return {
+        name,
+        isValid: !name
+    };
+}
 const SectionHeader = ({ children  })=>/*#__PURE__*/ _jsx(Typography, {
         pb: 2,
         variant: "subtitle1",
         children: children
     });
-export function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
-    const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
+function VariableListPreview({ definition  }) {
+    const { data , isFetching , error  } = useListVariablePluginValues(definition);
+    const [maxValues, setMaxValues] = useState(DEFAULT_MAX_PREVIEW_VALUES);
+    const showAll = ()=>{
+        setMaxValues(undefined);
+    };
+    let notShown = 0;
+    if (data && (data === null || data === void 0 ? void 0 : data.length) > 0 && maxValues) {
+        notShown = data.length - maxValues;
+    }
+    const errorMessage = error === null || error === void 0 ? void 0 : error.message;
     return /*#__PURE__*/ _jsxs(Box, {
         children: [
-            /*#__PURE__*/ _jsx(SectionHeader, {
-                children: "General"
+            errorMessage && /*#__PURE__*/ _jsx(Alert, {
+                severity: "error",
+                children: errorMessage
             }),
-            /*#__PURE__*/ _jsxs(Grid, {
-                container: true,
-                spacing: 2,
-                mb: 2,
+            isFetching && 'Loading...',
+            (data === null || data === void 0 ? void 0 : data.length) === 0 && /*#__PURE__*/ _jsx(Alert, {
+                severity: "info",
+                children: "No results"
+            }),
+            /*#__PURE__*/ _jsxs(_Fragment, {
                 children: [
-                    /*#__PURE__*/ _jsx(Grid, {
-                        item: true,
-                        xs: 6,
-                        children: /*#__PURE__*/ _jsx(TextField, {
-                            fullWidth: true,
-                            label: "Name",
-                            value: state.name,
-                            onChange: (v)=>{
-                                setState((draft)=>{
-                                    draft.name = v.target.value;
-                                });
-                            }
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Grid, {
-                        item: true,
-                        xs: 6,
-                        children: /*#__PURE__*/ _jsxs(FormControl, {
-                            fullWidth: true,
-                            children: [
-                                /*#__PURE__*/ _jsx(InputLabel, {
-                                    id: "variable-type-select-label",
-                                    children: "Type"
-                                }),
-                                /*#__PURE__*/ _jsx(Select, {
-                                    labelId: "variable-type-select-label",
-                                    id: "variable-type-select",
-                                    label: "Type",
-                                    value: state.kind,
-                                    onChange: (v)=>{
-                                        setState((draft)=>{
-                                            draft.kind = v.target.value;
-                                        });
-                                    },
-                                    children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                            value: v,
-                                            children: v
-                                        }, v))
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Grid, {
-                        item: true,
-                        xs: 6,
-                        children: /*#__PURE__*/ _jsx(TextField, {
-                            fullWidth: true,
-                            label: "Label",
-                            value: state.title,
-                            onChange: (v)=>{
-                                setState((draft)=>{
-                                    draft.title = v.target.value;
-                                });
-                            }
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Grid, {
-                        item: true,
-                        xs: 12,
-                        children: /*#__PURE__*/ _jsx(TextField, {
-                            fullWidth: true,
-                            label: "Description",
-                            value: state.description,
-                            onChange: (v)=>{
-                                setState((draft)=>{
-                                    draft.description = v.target.value;
-                                });
-                            }
-                        })
+                    data === null || data === void 0 ? void 0 : data.slice(0, maxValues).map((val)=>/*#__PURE__*/ _jsx(Chip, {
+                            sx: {
+                                mr: 1,
+                                mb: 1
+                            },
+                            size: "small",
+                            label: val.label
+                        }, val.value)),
+                    notShown > 0 && /*#__PURE__*/ _jsx(Chip, {
+                        onClick: showAll,
+                        variant: "outlined",
+                        sx: {
+                            mr: 1,
+                            mb: 1
+                        },
+                        size: "small",
+                        label: `+${notShown} more`
                     })
                 ]
-            }),
-            state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+            })
+        ]
+    });
+}
+export function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+    const [state, setState] = useImmer(getInitialState(initialVariableDefinition));
+    const validation = useMemo(()=>getValidation(state), [
+        state
+    ]);
+    const [previewKey, setPreviewKey] = React.useState(0);
+    const refreshPreview = ()=>{
+        setPreviewKey((prev)=>prev + 1);
+    };
+    /** We use the `previewKey` that we increment to know when to explicity update the
+   * spec that will be used for preview. The reason why we do this is to avoid
+   * having to re-fetch the values when the user is still editing the spec.
+   */ const previewSpec = useMemo(()=>{
+        return getVariableDefinitionFromState(state);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        previewKey
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsxs(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(SectionHeader, {
-                        children: "Text Options"
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h2",
+                        children: "Template Variables / Edit Variable"
                     }),
-                    /*#__PURE__*/ _jsx(Grid, {
-                        container: true,
-                        spacing: 2,
-                        mb: 2,
-                        children: /*#__PURE__*/ _jsx(Grid, {
-                            item: true,
-                            xs: 12,
-                            children: /*#__PURE__*/ _jsx(TextField, {
-                                label: "Value",
-                                value: state.textVariableFields.value,
-                                onChange: (v)=>{
-                                    setState((draft)=>{
-                                        draft.textVariableFields.value = v.target.value;
-                                    });
-                                }
+                    /*#__PURE__*/ _jsxs(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            /*#__PURE__*/ _jsx(Button, {
+                                disabled: !validation.isValid,
+                                variant: "contained",
+                                onClick: ()=>{
+                                    onChange(getVariableDefinitionFromState(state));
+                                },
+                                children: "Update"
+                            }),
+                            /*#__PURE__*/ _jsx(Button, {
+                                variant: "outlined",
+                                onClick: ()=>{
+                                    onCancel();
+                                },
+                                children: "Cancel"
                             })
-                        })
+                        ]
                     })
                 ]
             }),
-            state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+            /*#__PURE__*/ _jsxs(Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(SectionHeader, {
-                        children: "List Options"
-                    }),
-                    /*#__PURE__*/ _jsx(Grid, {
-                        container: true,
-                        spacing: 2,
+                    /*#__PURE__*/ _jsx(Typography, {
+                        variant: "h3",
                         mb: 2,
-                        children: /*#__PURE__*/ _jsx(Grid, {
-                            item: true,
-                            xs: 6,
-                            children: /*#__PURE__*/ _jsx(PluginEditor, {
-                                width: 500,
-                                pluginType: "Variable",
-                                pluginKindLabel: "Source",
-                                value: state.listVariableFields.plugin,
-                                onChange: (val)=>{
-                                    setState((draft)=>{
-                                        draft.listVariableFields.plugin = val;
-                                    });
-                                }
-                            })
-                        })
+                        children: "Edit Variable"
                     }),
                     /*#__PURE__*/ _jsx(SectionHeader, {
-                        children: "Dropdown Options"
+                        children: "General"
                     }),
                     /*#__PURE__*/ _jsxs(Grid, {
                         container: true,
-                        spacing: 1,
-                        mb: 1,
+                        spacing: 2,
+                        mb: 2,
                         children: [
-                            /*#__PURE__*/ _jsxs(Grid, {
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 6,
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    required: true,
+                                    error: !!validation.name,
+                                    fullWidth: true,
+                                    label: "Name",
+                                    value: state.name,
+                                    helperText: validation.name,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.name = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 6,
+                                children: /*#__PURE__*/ _jsxs(FormControl, {
+                                    fullWidth: true,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(InputLabel, {
+                                            id: "variable-type-select-label",
+                                            children: "Type"
+                                        }),
+                                        /*#__PURE__*/ _jsx(Select, {
+                                            labelId: "variable-type-select-label",
+                                            id: "variable-type-select",
+                                            label: "Type",
+                                            value: state.kind,
+                                            onChange: (v)=>{
+                                                setState((draft)=>{
+                                                    draft.kind = v.target.value;
+                                                });
+                                            },
+                                            children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                    value: v,
+                                                    children: v
+                                                }, v))
+                                        })
+                                    ]
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                item: true,
+                                xs: 6,
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    fullWidth: true,
+                                    label: "Label",
+                                    value: state.title,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.title = v.target.value;
+                                        });
+                                    }
+                                })
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
                                 item: true,
                                 xs: 12,
-                                children: [
-                                    "Allow Multiple",
-                                    /*#__PURE__*/ _jsx(Switch, {
-                                        checked: state.listVariableFields.allowMultiple,
-                                        onChange: (e)=>{
+                                children: /*#__PURE__*/ _jsx(TextField, {
+                                    fullWidth: true,
+                                    label: "Description",
+                                    value: state.description,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.description = v.target.value;
+                                        });
+                                    }
+                                })
+                            })
+                        ]
+                    }),
+                    state.kind === 'TextVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SectionHeader, {
+                                children: "Text Options"
+                            }),
+                            /*#__PURE__*/ _jsx(Grid, {
+                                container: true,
+                                spacing: 2,
+                                mb: 2,
+                                children: /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: /*#__PURE__*/ _jsx(TextField, {
+                                        label: "Value",
+                                        value: state.textVariableFields.value,
+                                        onChange: (v)=>{
                                             setState((draft)=>{
-                                                draft.listVariableFields.allowMultiple = e.target.checked;
+                                                draft.textVariableFields.value = v.target.value;
                                             });
                                         }
                                     })
+                                })
+                            })
+                        ]
+                    }),
+                    state.kind === 'ListVariable' && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(SectionHeader, {
+                                children: "List Options"
+                            }),
+                            /*#__PURE__*/ _jsxs(Grid, {
+                                container: true,
+                                spacing: 2,
+                                mb: 2,
+                                children: [
+                                    /*#__PURE__*/ _jsxs(Grid, {
+                                        item: true,
+                                        xs: 6,
+                                        children: [
+                                            /*#__PURE__*/ _jsx(ClickAwayListener, {
+                                                onClickAway: ()=>refreshPreview(),
+                                                children: /*#__PURE__*/ _jsx(Box, {})
+                                            }),
+                                            /*#__PURE__*/ _jsx(PluginEditor, {
+                                                width: 500,
+                                                pluginType: "Variable",
+                                                pluginKindLabel: "Source",
+                                                value: state.listVariableFields.plugin,
+                                                onChange: (val)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.plugin = val;
+                                                    });
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsx(Grid, {
+                                        item: true,
+                                        xs: 12,
+                                        children: /*#__PURE__*/ _jsxs(ErrorBoundary, {
+                                            FallbackComponent: ()=>/*#__PURE__*/ _jsx("div", {
+                                                    children: "Error"
+                                                }),
+                                            children: [
+                                                /*#__PURE__*/ _jsxs(Stack, {
+                                                    direction: 'row',
+                                                    spacing: 1,
+                                                    alignItems: "center",
+                                                    children: [
+                                                        /*#__PURE__*/ _jsx(Typography, {
+                                                            variant: "caption",
+                                                            children: "Preview Values"
+                                                        }),
+                                                        /*#__PURE__*/ _jsx(IconButton, {
+                                                            onClick: refreshPreview,
+                                                            size: "small",
+                                                            children: /*#__PURE__*/ _jsx(Refresh, {})
+                                                        })
+                                                    ]
+                                                }),
+                                                /*#__PURE__*/ _jsx(VariableListPreview, {
+                                                    definition: previewSpec
+                                                })
+                                            ]
+                                        })
+                                    })
                                 ]
                             }),
+                            /*#__PURE__*/ _jsx(SectionHeader, {
+                                children: "Dropdown Options"
+                            }),
                             /*#__PURE__*/ _jsxs(Grid, {
-                                item: true,
-                                xs: 12,
+                                container: true,
+                                spacing: 1,
+                                mb: 1,
                                 children: [
-                                    "Allow All",
-                                    /*#__PURE__*/ _jsx(Switch, {
-                                        checked: state.listVariableFields.allowAll,
-                                        onChange: (e)=>{
-                                            setState((draft)=>{
-                                                draft.listVariableFields.allowAll = e.target.checked;
-                                            });
-                                        }
+                                    /*#__PURE__*/ _jsxs(Grid, {
+                                        item: true,
+                                        xs: 12,
+                                        children: [
+                                            "Allow Multiple",
+                                            /*#__PURE__*/ _jsx(Switch, {
+                                                checked: state.listVariableFields.allowMultiple,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.allowMultiple = e.target.checked;
+                                                    });
+                                                }
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs(Grid, {
+                                        item: true,
+                                        xs: 12,
+                                        children: [
+                                            "Allow All",
+                                            /*#__PURE__*/ _jsx(Switch, {
+                                                checked: state.listVariableFields.allowAll,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        draft.listVariableFields.allowAll = e.target.checked;
+                                                    });
+                                                }
+                                            })
+                                        ]
                                     })
                                 ]
                             })
                         ]
                     })
                 ]
-            }),
-            /*#__PURE__*/ _jsxs(Stack, {
-                direction: 'row',
-                spacing: 2,
-                justifyContent: "end",
-                children: [
-                    /*#__PURE__*/ _jsx(Button, {
-                        variant: "contained",
-                        onClick: ()=>{
-                            onChange(getVariableDefinitionFromState(state));
-                        },
-                        children: "Update"
-                    }),
-                    /*#__PURE__*/ _jsx(Button, {
-                        variant: "outlined",
-                        onClick: ()=>{
-                            onCancel();
-                        },
-                        children: "Cancel"
-                    })
-                ]
             })
         ]
     });