@perses-dev/dashboards 0.32.0 → 0.34.0

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -93,7 +93,7 @@ const DashboardToolbar = (props)=>{
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
-                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                    backgroundColor: ({ palette  })=>palette.background.default
                                 }
                             })
                         }),
@@ -181,7 +181,7 @@ const DashboardToolbar = (props)=>{
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardStickyToolbar.DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
-                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                backgroundColor: ({ palette  })=>palette.background.default
                             }
                         })
                     })

package/dist/cjs/components/GridLayout/GridTitle.js

@@ -28,6 +28,7 @@ const _arrowUp = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/A
 const _arrowDown = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ArrowDown"));
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _components = require("@perses-dev/components");
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
 const _context = require("../../context");
 function _interopRequireDefault(obj) {
@@ -36,7 +37,8 @@ function _interopRequireDefault(obj) {
     };
 }
 function GridTitle(props) {
-    const { panelGroupId , title , collapse  } = props;
+    const { panelGroupId , title: rawTitle , collapse  } = props;
+    const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
     const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = (0, _context.usePanelGroupActions)(panelGroupId);
     const { openDeletePanelGroupDialog  } = (0, _context.useDeletePanelGroupDialog)();
     const { isEditMode  } = (0, _context.useEditMode)();
@@ -52,7 +54,7 @@ function GridTitle(props) {
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
-            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
+            backgroundColor: ({ palette  })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {

package/dist/cjs/components/Panel/PanelHeader.js

@@ -26,15 +26,18 @@ const _pencilOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-materia
 const _deleteOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DeleteOutline"));
 const _dragVertical = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/DragVertical"));
 const _contentCopy = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/ContentCopy"));
+const _pluginSystem = require("@perses-dev/plugin-system");
 const _constants = require("../../constants");
 function _interopRequireDefault(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function PanelHeader({ id , title , description , editHandlers , sx , ...rest }) {
+function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
+    const title = (0, _pluginSystem.useReplaceVariablesInString)(rawTitle);
+    const description = (0, _pluginSystem.useReplaceVariablesInString)(rawDescription);
     let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -26,11 +26,15 @@ const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
 const SaveChangesConfirmationDialog = ()=>{
-    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(true);
-    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(true);
-    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
-    const { isSavedVariableModified , modifiedVariableNames  } = getSavedVariablesStatus();
     const { saveChangesConfirmationDialog: dialog  } = (0, _context.useSaveChangesConfirmationDialog)();
+    var ref;
+    const isSavedDurationModified = (ref = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && ref !== void 0 ? ref : true;
+    var ref1;
+    const isSavedVariableModified = (ref1 = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && ref1 !== void 0 ? ref1 : true;
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
+    const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
+    const { getSavedVariablesStatus  } = (0, _context.useTemplateVariableActions)();
+    const { modifiedVariableNames  } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange  } = (0, _pluginSystem.useTimeRange)();
     const currentTimeRangeText = (0, _core.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
@@ -54,8 +58,8 @@ const SaveChangesConfirmationDialog = ()=>{
                             children: [
                                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControlLabel, {
                                     control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Checkbox, {
-                                        disabled: !(0, _core.isRelativeTimeRange)(timeRange),
-                                        checked: saveDefaultTimeRange && (0, _core.isRelativeTimeRange)(timeRange),
+                                        disabled: !isSavedDurationModified || !(0, _core.isRelativeTimeRange)(timeRange),
+                                        checked: saveDefaultTimeRange && isSavedDurationModified && (0, _core.isRelativeTimeRange)(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
                                     label: saveTimeRangeText

package/dist/cjs/components/SaveDashboardButton/SaveDashboardButton.js

@@ -26,7 +26,7 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
     const [isSavingDashboard, setSavingDashboard] = (0, _react.useState)(false);
-    const { dashboard  } = (0, _context.useDashboard)();
+    const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const { getSavedVariablesStatus , setVariableDefaultValues  } = (0, _context.useTemplateVariableActions)();
     const { isSavedVariableModified  } = getSavedVariablesStatus();
     const { timeRange  } = (0, _pluginSystem.useTimeRange)();
@@ -45,11 +45,14 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    setDashboard(dashboard);
                     saveDashboard();
                 },
                 onCancel: ()=>{
                     closeSaveChangesConfirmationDialog();
-                }
+                },
+                isSavedDurationModified,
+                isSavedVariableModified
             });
         } else {
             saveDashboard();
@@ -65,7 +68,9 @@ const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
             } catch (error) {
                 throw new Error(`An error occurred while saving the dashboard. ${error}`);
             } finally{
-                setSavingDashboard(false);
+                if (isSavingDashboard) {
+                    setSavingDashboard(false);
+                }
             }
         } else {
             setEditMode(false);

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

@@ -368,8 +368,23 @@ function VariableEditForm(props) {
                                                 label: "Allow All option"
                                             }),
                                             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                                                mb: 1,
                                                 variant: "caption",
                                                 children: "Enables an option to include all variable values"
+                                            }),
+                                            state.listVariableFields.allowAll && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                                label: "Custom All Value",
+                                                value: state.listVariableFields.customAllValue,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        if (e.target.value) {
+                                                            draft.listVariableFields.customAllValue = e.target.value;
+                                                        } else {
+                                                            draft.listVariableFields.customAllValue = undefined;
+                                                        }
+                                                    });
+                                                },
+                                                helperText: "When All is selected, this value will be used"
                                             })
                                         ]
                                     })

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -37,7 +37,8 @@ function getInitialState(initialVariableDefinition) {
         plugin: {
             kind: '',
             spec: {}
-        }
+        },
+        customAllValue: undefined
     };
     if (initialVariableDefinition.kind === 'ListVariable') {
         var _allow_all_value;
@@ -46,6 +47,7 @@ function getInitialState(initialVariableDefinition) {
         listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
         listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+        listVariableFields.customAllValue = initialVariableDefinition.spec.custom_all_value;
     }
     return {
         name: initialVariableDefinition.spec.name,
@@ -80,7 +82,8 @@ function getVariableDefinitionFromState(state) {
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
                 capturing_regexp: state.listVariableFields.capturing_regexp,
-                plugin: state.listVariableFields.plugin
+                plugin: state.listVariableFields.plugin,
+                custom_all_value: state.listVariableFields.customAllValue
             }
         };
     }

package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -103,6 +103,7 @@ function useTemplateVariableStore() {
 }
 function PluginProvider({ children  }) {
     const originalValues = useTemplateVariableValues();
+    const definitions = useTemplateVariableDefinitions();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
         // This will loop through all the current variables values
@@ -113,15 +114,22 @@ function PluginProvider({ children  }) {
                 ...originalValues[name]
             };
             if (v.value === _pluginSystem.DEFAULT_ALL_VALUE) {
-                var ref;
-                var ref1;
-                v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+                const definition = definitions.find((d)=>d.spec.name === name);
+                // If the variable is a list variable and has a custom all value, then use that value instead
+                if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.custom_all_value) {
+                    v.value = definition.spec.custom_all_value;
+                } else {
+                    var ref;
+                    var ref1;
+                    v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+                }
             }
             contextValues[name] = v;
         });
         return contextValues;
     }, [
-        originalValues
+        originalValues,
+        definitions
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TemplateVariableContext.Provider, {
         value: {

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA+G5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6G5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -85,7 +85,7 @@ export const DashboardToolbar = (props)=>{
                             children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
-                                    backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                    backgroundColor: ({ palette  })=>palette.background.default
                                 }
                             })
                         }),
@@ -173,7 +173,7 @@ export const DashboardToolbar = (props)=>{
                         children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
-                                backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
+                                backgroundColor: ({ palette  })=>palette.background.default
                             }
                         })
                     })

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) =>\n                    palette.mode === 'dark' ? palette.background.default : palette.background.paper,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","mode","background","default","paper","whiteSpace","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={1} data-testid={testId}>\n          <Box p={2} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              {isReadonly && (\n                <Alert severity={'warning'} sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'start',\n              padding: (theme) => theme.spacing(1, 2, 2, 2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            {isBiggerThanMd ? (\n              // On bigger screens, make it one row\n              <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            ) : (\n              // On smaller screens, make it two rows\n              <Stack spacing={1}>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <TimeRangeControls />\n                  <DownloadButton />\n                  <EditJsonButton />\n                </Stack>\n                <Stack direction=\"row\" spacing={1} marginLeft=\"auto\" sx={{ whiteSpace: 'nowrap' }}>\n                  <EditVariablesButton />\n                  <AddPanelButton />\n                  <AddGroupButton />\n                </Stack>\n              </Stack>\n            )}\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={1} padding={2} data-testid={testId}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <TimeRangeControls />\n              <DownloadButton />\n              {isBiggerThanSm && <EditButton onClick={onEditButtonClick} />}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","dashboardTitle","variant","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","whiteSpace","paddingY"],"mappings":"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"}

package/dist/components/GridLayout/GridTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAuBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAsG9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAwBA,OAAO,EAAqC,YAAY,EAA6B,MAAM,eAAe,CAAC;AAE3G,MAAM,WAAW,cAAc;IAC7B,YAAY,EAAE,YAAY,CAAC;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE;QACT,MAAM,EAAE,OAAO,CAAC;QAChB,YAAY,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;CACH;AAED;;;GAGG;AACH,wBAAgB,SAAS,CAAC,KAAK,EAAE,cAAc,eAuG9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -20,13 +20,15 @@ import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
 import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import { InfoTooltip } from '@perses-dev/components';
+import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
 import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';
 /**
  * Renders the title for a Grid section, optionally also supporting expanding
  * and collapsing
  */ export function GridTitle(props) {
-    const { panelGroupId , title , collapse  } = props;
+    const { panelGroupId , title: rawTitle , collapse  } = props;
+    const title = useReplaceVariablesInString(rawTitle);
     const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = usePanelGroupActions(panelGroupId);
     const { openDeletePanelGroupDialog  } = useDeletePanelGroupDialog();
     const { isEditMode  } = useEditMode();
@@ -42,7 +44,7 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
             cursor: collapse ? 'pointer' : 'auto',
-            backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
+            backgroundColor: ({ palette  })=>palette.background.paper
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {

package/dist/components/GridLayout/GridTitle.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title, collapse } = props;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) =>\n          palette.mode === 'dark' ? palette.background.paper : palette.background.default,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","mode","background","paper","default","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.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 { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronDown';\nimport CollapsedIcon from 'mdi-material-ui/ChevronRight';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport ArrowUpIcon from 'mdi-material-ui/ArrowUp';\nimport ArrowDownIcon from 'mdi-material-ui/ArrowDown';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\nimport { usePanelGroupActions, useEditMode, PanelGroupId, useDeletePanelGroupDialog } from '../../context';\n\nexport interface GridTitleProps {\n  panelGroupId: PanelGroupId;\n  title: string;\n  collapse?: {\n    isOpen: boolean;\n    onToggleOpen: () => void;\n  };\n}\n\n/**\n * Renders the title for a Grid section, optionally also supporting expanding\n * and collapsing\n */\nexport function GridTitle(props: GridTitleProps) {\n  const { panelGroupId, title: rawTitle, collapse } = props;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n\n  const { openAddPanel, openEditPanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\n  const { openDeletePanelGroupDialog } = useDeletePanelGroupDialog();\n  const { isEditMode } = useEditMode();\n\n  const text = <Typography variant=\"h2\">{title}</Typography>;\n\n  return (\n    <Box\n      onClick={collapse?.onToggleOpen}\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\n        cursor: collapse ? 'pointer' : 'auto',\n        backgroundColor: ({ palette }) => palette.background.paper,\n      }}\n      data-testid=\"panel-group-header\"\n    >\n      {collapse ? (\n        <>\n          <IconButton sx={{ marginRight: 1 }} aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && (\n            <Stack direction=\"row\" marginLeft=\"auto\">\n              <InfoTooltip description={TOOLTIP_TEXT.addPanelToGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openAddPanel();\n                  }}\n                >\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.editGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openEditPanelGroup();\n                  }}\n                >\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    openDeletePanelGroupDialog(panelGroupId);\n                  }}\n                >\n                  <DeleteIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupDown}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupDown(title)}\n                  disabled={moveDown === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveDown && moveDown();\n                  }}\n                >\n                  <ArrowDownIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.moveGroupUp}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.moveGroupUp(title)}\n                  disabled={moveUp === undefined}\n                  onClick={(e) => {\n                    // Don't trigger expand/collapse\n                    e.stopPropagation();\n                    moveUp && moveUp();\n                  }}\n                >\n                  <ArrowUpIcon />\n                </IconButton>\n              </InfoTooltip>\n            </Stack>\n          )}\n        </>\n      ) : (\n        // If we don't need expand/collapse, just render the title text\n        text\n      )}\n    </Box>\n  );\n}\n"],"names":["Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddPanelIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","InfoTooltip","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","rawTitle","collapse","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","onClick","onToggleOpen","sx","display","justifyContent","alignItems","padding","theme","spacing","cursor","backgroundColor","palette","background","paper","data-testid","marginRight","aria-label","isOpen","direction","marginLeft","description","addPanelToGroup","e","stopPropagation","editGroup","deleteGroup","moveGroupDown","disabled","undefined","moveGroupUp"],"mappings":"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"}

package/dist/components/Panel/PanelHeader.d.ts

@@ -11,6 +11,6 @@ export interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {
         onDeletePanelClick: () => void;
     };
 }
-export declare function PanelHeader({ id, title, description, editHandlers, sx, ...rest }: PanelHeaderProps): JSX.Element;
+export declare function PanelHeader({ id, title: rawTitle, description: rawDescription, editHandlers, sx, ...rest }: PanelHeaderProps): JSX.Element;
 export {};
 //# sourceMappingURL=PanelHeader.d.ts.map

package/dist/components/Panel/PanelHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAmHlG"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AASnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;CACH;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,YAAY,EACZ,EAAE,EACF,GAAG,IAAI,EACR,EAAE,gBAAgB,eAsHlB"}

package/dist/components/Panel/PanelHeader.js

@@ -18,10 +18,13 @@ import PencilIcon from 'mdi-material-ui/PencilOutline';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import DragIcon from 'mdi-material-ui/DragVertical';
 import ContentCopy from 'mdi-material-ui/ContentCopy';
+import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
 import { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';
-export function PanelHeader({ id , title , description , editHandlers , sx , ...rest }) {
+export function PanelHeader({ id , title: rawTitle , description: rawDescription , editHandlers , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
+    const title = useReplaceVariablesInString(rawTitle);
+    const description = useReplaceVariablesInString(rawDescription);
     let actions = undefined;
     if (editHandlers !== undefined) {
         // If there are edit handlers, always just show the edit buttons

package/dist/components/Panel/PanelHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","description","editHandlers","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.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 { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,6BAA6B,mBAmEzC,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,6BAA6B,mBAqEzC,CAAC"}

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -18,11 +18,15 @@ import { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core
 import { Dialog } from '@perses-dev/components';
 import { useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';
 export const SaveChangesConfirmationDialog = ()=>{
-    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(true);
-    const [saveDefaultVariables, setSaveDefaultVariables] = useState(true);
-    const { getSavedVariablesStatus  } = useTemplateVariableActions();
-    const { isSavedVariableModified , modifiedVariableNames  } = getSavedVariablesStatus();
     const { saveChangesConfirmationDialog: dialog  } = useSaveChangesConfirmationDialog();
+    var ref;
+    const isSavedDurationModified = (ref = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedDurationModified) !== null && ref !== void 0 ? ref : true;
+    var ref1;
+    const isSavedVariableModified = (ref1 = dialog === null || dialog === void 0 ? void 0 : dialog.isSavedVariableModified) !== null && ref1 !== void 0 ? ref1 : true;
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);
+    const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);
+    const { getSavedVariablesStatus  } = useTemplateVariableActions();
+    const { modifiedVariableNames  } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange  } = useTimeRange();
     const currentTimeRangeText = isRelativeTimeRange(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
@@ -46,8 +50,8 @@ export const SaveChangesConfirmationDialog = ()=>{
                             children: [
                                 /*#__PURE__*/ _jsx(FormControlLabel, {
                                     control: /*#__PURE__*/ _jsx(Checkbox, {
-                                        disabled: !isRelativeTimeRange(timeRange),
-                                        checked: saveDefaultTimeRange && isRelativeTimeRange(timeRange),
+                                        disabled: !isSavedDurationModified || !isRelativeTimeRange(timeRange),
+                                        checked: saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange),
                                         onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
                                     }),
                                     label: saveTimeRangeText

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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 } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = () => {\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(true);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(true);\n\n  const { getSavedVariablesStatus } = useTemplateVariableActions();\n  const { isSavedVariableModified, modifiedVariableNames } = getSavedVariablesStatus();\n\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useTemplateVariableActions","SaveChangesConfirmationDialog","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","isSavedVariableModified","modifiedVariableNames","saveChangesConfirmationDialog","dialog","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.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 } from 'react';\nimport { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';\nimport { Dialog } from '@perses-dev/components';\nimport { useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';\n\nexport const SaveChangesConfirmationDialog = () => {\n  const { saveChangesConfirmationDialog: dialog } = useSaveChangesConfirmationDialog();\n  const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;\n  const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(isSavedDurationModified);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(isSavedVariableModified);\n\n  const { getSavedVariablesStatus } = useTemplateVariableActions();\n  const { modifiedVariableNames } = getSavedVariablesStatus();\n\n  const isOpen = dialog !== undefined;\n\n  const { timeRange } = useTimeRange();\n  const currentTimeRangeText = isRelativeTimeRange(timeRange)\n    ? `(Last ${timeRange.pastDuration})`\n    : '(Absolute time ranges can not be saved)';\n\n  const saveTimeRangeText = `Save current time range as new default ${currentTimeRangeText}`;\n\n  const saveVariablesText = `Save current variable values as new default (${\n    modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'\n  })`;\n\n  return (\n    <Dialog open={isOpen}>\n      {dialog !== undefined && (\n        <>\n          <Dialog.Header onClose={() => dialog.onCancel()}>Save Dashboard</Dialog.Header>\n\n          <Dialog.Content>\n            <Typography marginBottom={2}>{dialog.description || SAVE_DEFAULTS_DIALOG_TEXT}</Typography>\n            <FormGroup>\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedDurationModified || !isRelativeTimeRange(timeRange)}\n                    checked={saveDefaultTimeRange && isSavedDurationModified && isRelativeTimeRange(timeRange)}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultTimeRange(e.target.checked)}\n                  />\n                }\n                label={saveTimeRangeText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    disabled={!isSavedVariableModified}\n                    checked={saveDefaultVariables && isSavedVariableModified}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label={saveVariablesText}\n              />\n            </FormGroup>\n          </Dialog.Content>\n\n          <Dialog.Actions>\n            <Dialog.PrimaryButton\n              onClick={() => {\n                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);\n              }}\n            >\n              Save Changes\n            </Dialog.PrimaryButton>\n            <Dialog.SecondaryButton onClick={() => dialog.onCancel()}>Cancel</Dialog.SecondaryButton>\n          </Dialog.Actions>\n        </>\n      )}\n    </Dialog>\n  );\n};\n"],"names":["useState","Checkbox","FormGroup","FormControlLabel","Typography","useTimeRange","isRelativeTimeRange","SAVE_DEFAULTS_DIALOG_TEXT","Dialog","useSaveChangesConfirmationDialog","useTemplateVariableActions","SaveChangesConfirmationDialog","saveChangesConfirmationDialog","dialog","isSavedDurationModified","isSavedVariableModified","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","getSavedVariablesStatus","modifiedVariableNames","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","saveTimeRangeText","saveVariablesText","length","join","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"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"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,oCAAmD,wBAAwB,gBAyD1G,CAAC"}
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EACL,eAAe,EAKhB,MAAM,eAAe,CAAC;AAEvB,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,oCAAmD,wBAAwB,gBA8D1G,CAAC"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -18,7 +18,7 @@ import { useTimeRange } from '@perses-dev/plugin-system';
 import { useDashboard, useEditMode, useSaveChangesConfirmationDialog, useTemplateVariableActions } from '../../context';
 export const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'  })=>{
     const [isSavingDashboard, setSavingDashboard] = useState(false);
-    const { dashboard  } = useDashboard();
+    const { dashboard , setDashboard  } = useDashboard();
     const { getSavedVariablesStatus , setVariableDefaultValues  } = useTemplateVariableActions();
     const { isSavedVariableModified  } = getSavedVariablesStatus();
     const { timeRange  } = useTimeRange();
@@ -37,11 +37,14 @@ export const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
                     }
+                    setDashboard(dashboard);
                     saveDashboard();
                 },
                 onCancel: ()=>{
                     closeSaveChangesConfirmationDialog();
-                }
+                },
+                isSavedDurationModified,
+                isSavedVariableModified
             });
         } else {
             saveDashboard();
@@ -57,7 +60,9 @@ export const SaveDashboardButton = ({ onSave , isDisabled , variant ='contained'
             } catch (error) {
                 throw new Error(`An error occurred while saving the dashboard. ${error}`);
             } finally{
-                setSavingDashboard(false);
+                if (isSavingDashboard) {
+                    setSavingDashboard(false);
+                }
             }
         } else {
             setEditMode(false);

package/dist/components/SaveDashboardButton/SaveDashboardButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.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 } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useTemplateVariableActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' }: SaveDashboardButtonProps) => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = () => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    // Save dashboard if active timeRange from plugin-system is relative and different than currently saved\n    if (isSavedDurationModified || isSavedVariableModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async () => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        setSavingDashboard(false);\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useTemplateVariableActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.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 } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport { isRelativeTimeRange } from '@perses-dev/core';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport {\n  OnSaveDashboard,\n  useDashboard,\n  useEditMode,\n  useSaveChangesConfirmationDialog,\n  useTemplateVariableActions,\n} from '../../context';\n\nexport interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  onSave?: OnSaveDashboard;\n  isDisabled: boolean;\n  variant?: 'contained' | 'text' | 'outlined';\n}\n\nexport const SaveDashboardButton = ({ onSave, isDisabled, variant = 'contained' }: SaveDashboardButtonProps) => {\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n  const { dashboard, setDashboard } = useDashboard();\n  const { getSavedVariablesStatus, setVariableDefaultValues } = useTemplateVariableActions();\n  const { isSavedVariableModified } = getSavedVariablesStatus();\n  const { timeRange } = useTimeRange();\n  const { setEditMode } = useEditMode();\n  const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = useSaveChangesConfirmationDialog();\n\n  const onSaveButtonClick = () => {\n    const isSavedDurationModified =\n      isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;\n\n    // Save dashboard if active timeRange from plugin-system is relative and different than currently saved\n    if (isSavedDurationModified || isSavedVariableModified) {\n      openSaveChangesConfirmationDialog({\n        onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables) => {\n          if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {\n            dashboard.spec.duration = timeRange.pastDuration;\n          }\n          if (saveDefaultVariables === true) {\n            const variables = setVariableDefaultValues();\n            dashboard.spec.variables = variables;\n          }\n          setDashboard(dashboard);\n          saveDashboard();\n        },\n        onCancel: () => {\n          closeSaveChangesConfirmationDialog();\n        },\n        isSavedDurationModified,\n        isSavedVariableModified,\n      });\n    } else {\n      saveDashboard();\n    }\n  };\n\n  const saveDashboard = async () => {\n    if (onSave) {\n      try {\n        setSavingDashboard(true);\n        await onSave(dashboard);\n        closeSaveChangesConfirmationDialog();\n        setEditMode(false);\n      } catch (error) {\n        throw new Error(`An error occurred while saving the dashboard. ${error}`);\n      } finally {\n        if (isSavingDashboard) {\n          setSavingDashboard(false);\n        }\n      }\n    } else {\n      setEditMode(false);\n    }\n  };\n\n  return (\n    <Button variant={variant} onClick={onSaveButtonClick} disabled={isDisabled || isSavingDashboard}>\n      Save\n    </Button>\n  );\n};\n"],"names":["useState","Button","isRelativeTimeRange","useTimeRange","useDashboard","useEditMode","useSaveChangesConfirmationDialog","useTemplateVariableActions","SaveDashboardButton","onSave","isDisabled","variant","isSavingDashboard","setSavingDashboard","dashboard","setDashboard","getSavedVariablesStatus","setVariableDefaultValues","isSavedVariableModified","timeRange","setEditMode","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","onSaveButtonClick","isSavedDurationModified","spec","duration","pastDuration","onSaveChanges","saveDefaultTimeRange","saveDefaultVariables","variables","saveDashboard","onCancel","error","Error","onClick","disabled"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AA6B9E,UAAU,qBAAqB;IAC7B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eA+O5D"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,kBAAkB,EAA0B,MAAM,kBAAkB,CAAC;AA6B9E,UAAU,qBAAqB;IAC7B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,eAiQ5D"}

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

@@ -321,8 +321,23 @@ export function VariableEditForm(props) {
                                                 label: "Allow All option"
                                             }),
                                             /*#__PURE__*/ _jsx(Typography, {
+                                                mb: 1,
                                                 variant: "caption",
                                                 children: "Enables an option to include all variable values"
+                                            }),
+                                            state.listVariableFields.allowAll && /*#__PURE__*/ _jsx(TextField, {
+                                                label: "Custom All Value",
+                                                value: state.listVariableFields.customAllValue,
+                                                onChange: (e)=>{
+                                                    setState((draft)=>{
+                                                        if (e.target.value) {
+                                                            draft.listVariableFields.customAllValue = e.target.value;
+                                                        } else {
+                                                            draft.listVariableFields.customAllValue = undefined;
+                                                        }
+                                                    });
+                                                },
+                                                helperText: "When All is selected, this value will be used"
                                             })
                                         ]
                                     })

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  FormControlLabel,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\n\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\ninterface VariableEditFormProps {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}\n\nexport function VariableEditForm(props: VariableEditFormProps) {\n  const { initialVariableDefinition, onChange, onCancel } = props;\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  const [previewKey, setPreviewKey] = useState(0);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicitly update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  return (\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\">Edit Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          <Button\n            disabled={!validation.isValid}\n            variant=\"contained\"\n            onClick={() => {\n              onChange(getVariableDefinitionFromState(state));\n            }}\n          >\n            Update\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outlined\"\n            onClick={() => {\n              onCancel();\n            }}\n          >\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <TextField\n              fullWidth\n              label=\"Display Label\"\n              value={state.title || ''}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <FormControl fullWidth>\n              <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n              <Select\n                labelId=\"variable-type-select-label\"\n                id=\"variable-type-select\"\n                label=\"Type\"\n                value={state.kind}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.kind = v.target.value as VariableEditorState['kind'];\n                  });\n                }}\n              >\n                {VARIABLE_TYPES.map((v) => (\n                  <MenuItem key={v.kind} value={v.kind}>\n                    {v.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              Text Options\n            </Typography>\n            <Stack spacing={2}>\n              <Box>\n                <VariablePreview values={[state.textVariableFields.value]} />\n              </Box>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Stack>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              List Options\n            </Typography>\n            <Stack spacing={2} mb={2}>\n              {state.listVariableFields.plugin.kind ? (\n                <Box>\n                  <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n                    <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n                  </ErrorBoundary>\n                </Box>\n              ) : (\n                <VariablePreview isLoading={true} />\n              )}\n\n              <Stack>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width=\"100%\"\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Stack>\n\n              <Stack>\n                <TextField\n                  label=\"Capturing Regexp Filter\"\n                  value={state.listVariableFields.capturing_regexp || ''}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      if (e.target.value) {\n                        // TODO: do a better fix, if empty string => it should skip the filter\n                        draft.listVariableFields.capturing_regexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturing_regexp = undefined;\n                      }\n                    });\n                  }}\n                  helperText=\"Optional, if you want to filter on captured result.\"\n                />\n              </Stack>\n            </Stack>\n\n            <Divider />\n\n            <Typography py={1} variant=\"subtitle1\">\n              Dropdown Options\n            </Typography>\n            <Stack spacing=\"2\">\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowMultiple}\n                      onChange={(e) => {\n                        setState((draft) => {\n                          draft.listVariableFields.allowMultiple = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow Multiple Values\"\n                />\n                <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n              </Stack>\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowAll}\n                      onChange={(e) => {\n                        setState((draft) => {\n                          draft.listVariableFields.allowAll = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow All option\"\n                />\n                <Typography variant=\"caption\">Enables an option to include all variable values</Typography>\n              </Stack>\n            </Stack>\n          </>\n        )}\n      </Box>\n    </>\n  );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","FormControlLabel","InputLabel","MenuItem","Select","Button","Stack","ClickAwayListener","Divider","useImmer","PluginEditor","ErrorBoundary","VARIABLE_TYPES","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","getValidation","state","name","test","isValid","FallbackPreview","div","VariableEditForm","props","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","overflowY","container","mb","item","xs","required","error","fullWidth","label","value","helperText","v","draft","target","title","description","id","labelId","kind","map","py","values","textVariableFields","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturing_regexp","e","undefined","control","checked","allowMultiple","allowAll"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.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 React, { useMemo, useState } from 'react';\nimport {\n  Box,\n  Typography,\n  Switch,\n  TextField,\n  Grid,\n  FormControl,\n  FormControlLabel,\n  InputLabel,\n  MenuItem,\n  Select,\n  Button,\n  Stack,\n  ClickAwayListener,\n  Divider,\n} from '@mui/material';\nimport { useImmer } from 'use-immer';\nimport { PluginEditor } from '@perses-dev/plugin-system';\nimport { VariableDefinition, ListVariableDefinition } from '@perses-dev/core';\nimport { ErrorBoundary } from '@perses-dev/components';\n\nimport { VARIABLE_TYPES } from '../variable-model';\nimport { VariableListPreview, VariablePreview } from './VariablePreview';\nimport { VariableEditorState, getVariableDefinitionFromState, getInitialState } from './variable-editor-form-model';\n\n// TODO: Replace with proper validation library\nfunction getValidation(state: ReturnType<typeof getInitialState>) {\n  /** Name validation */\n  let name = null;\n  if (!state.name) {\n    name = 'Name is required';\n  }\n  // name can only contain alphanumeric characters and underscores and no spaces\n  if (state.name && !/^[a-zA-Z0-9_-]+$/.test(state.name)) {\n    name = 'Name can only contain alphanumeric characters, underscores, and dashes';\n  }\n\n  return {\n    name,\n    isValid: !name,\n  };\n}\n\nfunction FallbackPreview() {\n  return <div>Error previewing values</div>;\n}\n\ninterface VariableEditFormProps {\n  initialVariableDefinition: VariableDefinition;\n  onChange: (def: VariableDefinition) => void;\n  onCancel: () => void;\n}\n\nexport function VariableEditForm(props: VariableEditFormProps) {\n  const { initialVariableDefinition, onChange, onCancel } = props;\n  const [state, setState] = useImmer(getInitialState(initialVariableDefinition));\n  const validation = useMemo(() => getValidation(state), [state]);\n\n  const [previewKey, setPreviewKey] = useState(0);\n\n  const refreshPreview = () => {\n    setPreviewKey((prev) => prev + 1);\n  };\n\n  /** We use the `previewKey` that we increment to know when to explicitly update the\n   * spec that will be used for preview. The reason why we do this is to avoid\n   * having to re-fetch the values when the user is still editing the spec.\n   */\n  const previewSpec = useMemo(() => {\n    return getVariableDefinitionFromState(state) as ListVariableDefinition;\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [previewKey]);\n\n  return (\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\">Edit Variable</Typography>\n        <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n          <Button\n            disabled={!validation.isValid}\n            variant=\"contained\"\n            onClick={() => {\n              onChange(getVariableDefinitionFromState(state));\n            }}\n          >\n            Update\n          </Button>\n          <Button\n            color=\"secondary\"\n            variant=\"outlined\"\n            onClick={() => {\n              onCancel();\n            }}\n          >\n            Cancel\n          </Button>\n        </Stack>\n      </Box>\n      <Box padding={2} sx={{ overflowY: 'scroll' }}>\n        <Grid container spacing={2} mb={2}>\n          <Grid item xs={8}>\n            <TextField\n              required\n              error={!!validation.name}\n              fullWidth\n              label=\"Name\"\n              value={state.name}\n              helperText={validation.name}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.name = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <TextField\n              fullWidth\n              label=\"Display Label\"\n              value={state.title || ''}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.title = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={8}>\n            <TextField\n              fullWidth\n              label=\"Description\"\n              value={state.description}\n              onChange={(v) => {\n                setState((draft) => {\n                  draft.description = v.target.value;\n                });\n              }}\n            />\n          </Grid>\n          <Grid item xs={4}>\n            <FormControl fullWidth>\n              <InputLabel id=\"variable-type-select-label\">Type</InputLabel>\n              <Select\n                labelId=\"variable-type-select-label\"\n                id=\"variable-type-select\"\n                label=\"Type\"\n                value={state.kind}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.kind = v.target.value as VariableEditorState['kind'];\n                  });\n                }}\n              >\n                {VARIABLE_TYPES.map((v) => (\n                  <MenuItem key={v.kind} value={v.kind}>\n                    {v.label}\n                  </MenuItem>\n                ))}\n              </Select>\n            </FormControl>\n          </Grid>\n        </Grid>\n\n        <Divider />\n\n        {state.kind === 'TextVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              Text Options\n            </Typography>\n            <Stack spacing={2}>\n              <Box>\n                <VariablePreview values={[state.textVariableFields.value]} />\n              </Box>\n              <TextField\n                label=\"Value\"\n                value={state.textVariableFields.value}\n                onChange={(v) => {\n                  setState((draft) => {\n                    draft.textVariableFields.value = v.target.value;\n                  });\n                }}\n              />\n            </Stack>\n          </>\n        )}\n\n        {state.kind === 'ListVariable' && (\n          <>\n            <Typography py={1} variant=\"subtitle1\">\n              List Options\n            </Typography>\n            <Stack spacing={2} mb={2}>\n              {state.listVariableFields.plugin.kind ? (\n                <Box>\n                  <ErrorBoundary FallbackComponent={FallbackPreview} resetKeys={[previewSpec]}>\n                    <VariableListPreview definition={previewSpec} onRefresh={refreshPreview} />\n                  </ErrorBoundary>\n                </Box>\n              ) : (\n                <VariablePreview isLoading={true} />\n              )}\n\n              <Stack>\n                {/** Hack?: Cool technique to refresh the preview to simulate onBlur event */}\n                <ClickAwayListener onClickAway={() => refreshPreview()}>\n                  <Box />\n                </ClickAwayListener>\n                {/** */}\n                <PluginEditor\n                  width=\"100%\"\n                  pluginType=\"Variable\"\n                  pluginKindLabel=\"Source\"\n                  value={state.listVariableFields.plugin}\n                  onChange={(val) => {\n                    setState((draft) => {\n                      draft.listVariableFields.plugin = val;\n                    });\n                  }}\n                />\n              </Stack>\n\n              <Stack>\n                <TextField\n                  label=\"Capturing Regexp Filter\"\n                  value={state.listVariableFields.capturing_regexp || ''}\n                  onChange={(e) => {\n                    setState((draft) => {\n                      if (e.target.value) {\n                        // TODO: do a better fix, if empty string => it should skip the filter\n                        draft.listVariableFields.capturing_regexp = e.target.value;\n                      } else {\n                        draft.listVariableFields.capturing_regexp = undefined;\n                      }\n                    });\n                  }}\n                  helperText=\"Optional, if you want to filter on captured result.\"\n                />\n              </Stack>\n            </Stack>\n\n            <Divider />\n\n            <Typography py={1} variant=\"subtitle1\">\n              Dropdown Options\n            </Typography>\n            <Stack spacing=\"2\">\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowMultiple}\n                      onChange={(e) => {\n                        setState((draft) => {\n                          draft.listVariableFields.allowMultiple = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow Multiple Values\"\n                />\n                <Typography variant=\"caption\">Enables multiple values to be selected at the same time</Typography>\n              </Stack>\n              <Stack>\n                <FormControlLabel\n                  control={\n                    <Switch\n                      checked={state.listVariableFields.allowAll}\n                      onChange={(e) => {\n                        setState((draft) => {\n                          draft.listVariableFields.allowAll = e.target.checked;\n                        });\n                      }}\n                    />\n                  }\n                  label=\"Allow All option\"\n                />\n                <Typography mb={1} variant=\"caption\">\n                  Enables an option to include all variable values\n                </Typography>\n                {state.listVariableFields.allowAll && (\n                  <TextField\n                    label=\"Custom All Value\"\n                    value={state.listVariableFields.customAllValue}\n                    onChange={(e) => {\n                      setState((draft) => {\n                        if (e.target.value) {\n                          draft.listVariableFields.customAllValue = e.target.value;\n                        } else {\n                          draft.listVariableFields.customAllValue = undefined;\n                        }\n                      });\n                    }}\n                    helperText=\"When All is selected, this value will be used\"\n                  />\n                )}\n              </Stack>\n            </Stack>\n          </>\n        )}\n      </Box>\n    </>\n  );\n}\n"],"names":["React","useMemo","useState","Box","Typography","Switch","TextField","Grid","FormControl","FormControlLabel","InputLabel","MenuItem","Select","Button","Stack","ClickAwayListener","Divider","useImmer","PluginEditor","ErrorBoundary","VARIABLE_TYPES","VariableListPreview","VariablePreview","getVariableDefinitionFromState","getInitialState","getValidation","state","name","test","isValid","FallbackPreview","div","VariableEditForm","props","initialVariableDefinition","onChange","onCancel","setState","validation","previewKey","setPreviewKey","refreshPreview","prev","previewSpec","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","color","overflowY","container","mb","item","xs","required","error","fullWidth","label","value","helperText","v","draft","target","title","description","id","labelId","kind","map","py","values","textVariableFields","listVariableFields","plugin","FallbackComponent","resetKeys","definition","onRefresh","isLoading","onClickAway","width","pluginType","pluginKindLabel","val","capturing_regexp","e","undefined","control","checked","allowMultiple","allowAll","customAllValue"],"mappings":"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"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts

@@ -12,6 +12,7 @@ export declare function getInitialState(initialVariableDefinition: VariableDefin
             kind: string;
             spec: {};
         };
+        customAllValue: string | undefined;
     };
     textVariableFields: {
         value: string;

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAmC,MAAM,kBAAkB,CAAC;AAEvF,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB;;;;;;;;;;;;;;;;;EA6B5E;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CA8B7F"}
+{"version":3,"file":"variable-editor-form-model.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,kBAAkB,EAAmC,MAAM,kBAAkB,CAAC;AAEvF,wBAAgB,eAAe,CAAC,yBAAyB,EAAE,kBAAkB;;;;;;;;;;;;;;;;;;EA+B5E;AAED,oBAAY,mBAAmB,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAErE,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,mBAAmB,GAAG,kBAAkB,CA+B7F"}

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -23,7 +23,8 @@ export function getInitialState(initialVariableDefinition) {
         plugin: {
             kind: '',
             spec: {}
-        }
+        },
+        customAllValue: undefined
     };
     if (initialVariableDefinition.kind === 'ListVariable') {
         var _allow_all_value;
@@ -32,6 +33,7 @@ export function getInitialState(initialVariableDefinition) {
         listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
         listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;
         listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+        listVariableFields.customAllValue = initialVariableDefinition.spec.custom_all_value;
     }
     return {
         name: initialVariableDefinition.spec.name,
@@ -66,7 +68,8 @@ export function getVariableDefinitionFromState(state) {
                 allow_multiple: state.listVariableFields.allowMultiple,
                 allow_all_value: state.listVariableFields.allowAll,
                 capturing_regexp: state.listVariableFields.capturing_regexp,
-                plugin: state.listVariableFields.plugin
+                plugin: state.listVariableFields.plugin,
+                custom_all_value: state.listVariableFields.customAllValue
             }
         };
     }

package/dist/components/Variables/VariableEditorForm/variable-editor-form-model.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"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 { VariableDefinition, TextVariableDefinition, Display } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    capturing_regexp: undefined as string | undefined,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind } = state;\n\n  const display: Display | undefined = title ? { name: title } : undefined;\n\n  if (kind === 'TextVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        ...state.textVariableFields,\n      },\n    };\n  }\n\n  if (kind === 'ListVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        capturing_regexp: state.listVariableFields.capturing_regexp,\n        plugin: state.listVariableFields.plugin,\n      },\n    };\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","capturing_regexp","undefined","plugin","kind","allow_all_value","name","title","display","description","getVariableDefinitionFromState","state","allow_multiple","Error"],"mappings":"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"}
+{"version":3,"sources":["../../../../src/components/Variables/VariableEditorForm/variable-editor-form-model.ts"],"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 { VariableDefinition, TextVariableDefinition, Display } from '@perses-dev/core';\n\nexport function getInitialState(initialVariableDefinition: VariableDefinition) {\n  const textVariableFields = {\n    value: (initialVariableDefinition as TextVariableDefinition).spec.value ?? '',\n  };\n\n  const listVariableFields = {\n    allowMultiple: false,\n    allowAll: false,\n    capturing_regexp: undefined as string | undefined,\n    plugin: {\n      kind: '',\n      spec: {},\n    },\n    customAllValue: undefined as string | undefined,\n  };\n  if (initialVariableDefinition.kind === 'ListVariable') {\n    listVariableFields.allowMultiple = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.allowAll = initialVariableDefinition.spec.allow_all_value ?? false;\n    listVariableFields.capturing_regexp = initialVariableDefinition.spec.capturing_regexp;\n    listVariableFields.plugin = initialVariableDefinition.spec.plugin;\n    listVariableFields.customAllValue = initialVariableDefinition.spec.custom_all_value;\n  }\n\n  return {\n    name: initialVariableDefinition.spec.name,\n    title: initialVariableDefinition.spec.display?.name,\n    kind: initialVariableDefinition.kind,\n    description: '',\n    listVariableFields,\n    textVariableFields,\n  };\n}\n\nexport type VariableEditorState = ReturnType<typeof getInitialState>;\n\nexport function getVariableDefinitionFromState(state: VariableEditorState): VariableDefinition {\n  const { name, title, kind } = state;\n\n  const display: Display | undefined = title ? { name: title } : undefined;\n\n  if (kind === 'TextVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        ...state.textVariableFields,\n      },\n    };\n  }\n\n  if (kind === 'ListVariable') {\n    return {\n      kind,\n      spec: {\n        name,\n        display,\n        allow_multiple: state.listVariableFields.allowMultiple,\n        allow_all_value: state.listVariableFields.allowAll,\n        capturing_regexp: state.listVariableFields.capturing_regexp,\n        plugin: state.listVariableFields.plugin,\n        custom_all_value: state.listVariableFields.customAllValue,\n      },\n    };\n  }\n  throw new Error(`Unknown variable kind: ${kind}`);\n}\n"],"names":["getInitialState","initialVariableDefinition","textVariableFields","value","spec","listVariableFields","allowMultiple","allowAll","capturing_regexp","undefined","plugin","kind","customAllValue","allow_all_value","custom_all_value","name","title","display","description","getVariableDefinitionFromState","state","allow_multiple","Error"],"mappings":"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"}

package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts

@@ -8,6 +8,8 @@ export interface SaveChangesConfirmationDialogSlice {
 export interface SaveChangesConfirmationDialogState {
     onSaveChanges: (saveDefaultTimeRange: boolean, saveDefaultVariables: boolean) => void;
     onCancel: () => void;
+    isSavedDurationModified: boolean;
+    isSavedVariableModified: boolean;
     description?: string;
 }
 export declare const createSaveChangesDialogSlice: StateCreator<SaveChangesConfirmationDialogSlice, Middleware, [

package/dist/context/DashboardProvider/save-changes-dialog-slice.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"save-changes-dialog-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/save-changes-dialog-slice.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,kCAAkC;IACjD,6BAA6B,CAAC,EAAE,kCAAkC,CAAC;IACnE,iCAAiC,EAAE,CAAC,6BAA6B,EAAE,kCAAkC,KAAK,IAAI,CAAC;IAC/G,kCAAkC,EAAE,MAAM,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,kCAAkC;IACjD,aAAa,EAAE,CAAC,oBAAoB,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,KAAK,IAAI,CAAC;IACtF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,4BAA4B,EAAE,YAAY,CACrD,kCAAkC,EAClC,UAAU,EACV;CAAE,EACF,kCAAkC,CAuBlC,CAAC"}
+{"version":3,"file":"save-changes-dialog-slice.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/save-changes-dialog-slice.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC,MAAM,WAAW,kCAAkC;IACjD,6BAA6B,CAAC,EAAE,kCAAkC,CAAC;IACnE,iCAAiC,EAAE,CAAC,6BAA6B,EAAE,kCAAkC,KAAK,IAAI,CAAC;IAC/G,kCAAkC,EAAE,MAAM,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,kCAAkC;IACjD,aAAa,EAAE,CAAC,oBAAoB,EAAE,OAAO,EAAE,oBAAoB,EAAE,OAAO,KAAK,IAAI,CAAC;IACtF,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,uBAAuB,EAAE,OAAO,CAAC;IACjC,uBAAuB,EAAE,OAAO,CAAC;IACjC,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,4BAA4B,EAAE,YAAY,CACrD,kCAAkC,EAClC,UAAU,EACV;CAAE,EACF,kCAAkC,CAuBlC,CAAC"}

package/dist/context/DashboardProvider/save-changes-dialog-slice.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/save-changes-dialog-slice.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 { StateCreator } from 'zustand';\nimport { Middleware } from './common';\n\nexport interface SaveChangesConfirmationDialogSlice {\n  saveChangesConfirmationDialog?: SaveChangesConfirmationDialogState;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  closeSaveChangesConfirmationDialog: () => void;\n}\n\nexport interface SaveChangesConfirmationDialogState {\n  onSaveChanges: (saveDefaultTimeRange: boolean, saveDefaultVariables: boolean) => void;\n  onCancel: () => void;\n  description?: string;\n}\n\nexport const createSaveChangesDialogSlice: StateCreator<\n  SaveChangesConfirmationDialogSlice,\n  Middleware,\n  [],\n  SaveChangesConfirmationDialogSlice\n> = (set) => ({\n  isOpen: false,\n\n  openSaveChangesConfirmationDialog(dialog) {\n    set(\n      (state) => {\n        state.saveChangesConfirmationDialog = dialog;\n      },\n      false,\n      'openSaveChangesConfirmationDialog'\n    );\n  },\n\n  closeSaveChangesConfirmationDialog() {\n    set(\n      (state) => {\n        state.saveChangesConfirmationDialog = undefined;\n      },\n      false,\n      'closeSaveChangesConfirmationDialog'\n    );\n  },\n});\n"],"names":["createSaveChangesDialogSlice","set","isOpen","openSaveChangesConfirmationDialog","dialog","state","saveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","undefined"],"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;AAiBjC,OAAO,MAAMA,4BAA4B,GAKrC,CAACC,GAAG,GAAM,CAAA;QACZC,MAAM,EAAE,KAAK;QAEbC,iCAAiC,EAACC,MAAM,EAAE;YACxCH,GAAG,CACD,CAACI,KAAK,GAAK;gBACTA,KAAK,CAACC,6BAA6B,GAAGF,MAAM,CAAC;YAC/C,CAAC,EACD,KAAK,EACL,mCAAmC,CACpC,CAAC;QACJ,CAAC;QAEDG,kCAAkC,IAAG;YACnCN,GAAG,CACD,CAACI,KAAK,GAAK;gBACTA,KAAK,CAACC,6BAA6B,GAAGE,SAAS,CAAC;YAClD,CAAC,EACD,KAAK,EACL,oCAAoC,CACrC,CAAC;QACJ,CAAC;KACF,CAAA,AAAC,CAAC"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/save-changes-dialog-slice.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 { StateCreator } from 'zustand';\nimport { Middleware } from './common';\n\nexport interface SaveChangesConfirmationDialogSlice {\n  saveChangesConfirmationDialog?: SaveChangesConfirmationDialogState;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  closeSaveChangesConfirmationDialog: () => void;\n}\n\nexport interface SaveChangesConfirmationDialogState {\n  onSaveChanges: (saveDefaultTimeRange: boolean, saveDefaultVariables: boolean) => void;\n  onCancel: () => void;\n  isSavedDurationModified: boolean;\n  isSavedVariableModified: boolean;\n  description?: string;\n}\n\nexport const createSaveChangesDialogSlice: StateCreator<\n  SaveChangesConfirmationDialogSlice,\n  Middleware,\n  [],\n  SaveChangesConfirmationDialogSlice\n> = (set) => ({\n  isOpen: false,\n\n  openSaveChangesConfirmationDialog(dialog) {\n    set(\n      (state) => {\n        state.saveChangesConfirmationDialog = dialog;\n      },\n      false,\n      'openSaveChangesConfirmationDialog'\n    );\n  },\n\n  closeSaveChangesConfirmationDialog() {\n    set(\n      (state) => {\n        state.saveChangesConfirmationDialog = undefined;\n      },\n      false,\n      'closeSaveChangesConfirmationDialog'\n    );\n  },\n});\n"],"names":["createSaveChangesDialogSlice","set","isOpen","openSaveChangesConfirmationDialog","dialog","state","saveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","undefined"],"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;AAmBjC,OAAO,MAAMA,4BAA4B,GAKrC,CAACC,GAAG,GAAM,CAAA;QACZC,MAAM,EAAE,KAAK;QAEbC,iCAAiC,EAACC,MAAM,EAAE;YACxCH,GAAG,CACD,CAACI,KAAK,GAAK;gBACTA,KAAK,CAACC,6BAA6B,GAAGF,MAAM,CAAC;YAC/C,CAAC,EACD,KAAK,EACL,mCAAmC,CACpC,CAAC;QACJ,CAAC;QAEDG,kCAAkC,IAAG;YACnCN,GAAG,CACD,CAACI,KAAK,GAAK;gBACTA,KAAK,CAACC,6BAA6B,GAAGE,SAAS,CAAC;YAClD,CAAC,EACD,KAAK,EACL,oCAAoC,CACrC,CAAC;QACJ,CAAC;KACF,CAAA,AAAC,CAAC"}

package/dist/context/TemplateVariableProvider/TemplateVariableProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TemplateVariableProvider.d.ts","sourceRoot":"","sources":["../../../src/context/TemplateVariableProvider/TemplateVariableProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAEL,gBAAgB,EAChB,aAAa,EACb,cAAc,EAEf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKnF,aAAK,qBAAqB,GAAG;IAC3B,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,aAAa,EAAE,gBAAgB,CAAC;IAChC,gBAAgB,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7E,kBAAkB,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5E,kBAAkB,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,sBAAsB,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IACpE,wBAAwB,EAAE,MAAM,kBAAkB,EAAE,CAAC;IACrD,uBAAuB,EAAE,MAAM;QAAE,uBAAuB,EAAE,OAAO,CAAC;QAAC,qBAAqB,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CACtG,CAAC;AAaF,wBAAgB,yBAAyB,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,oBAqBjE;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM;;;EAU/C;AAED,wBAAgB,0BAA0B;;;;;;;;;;EAYzC;AAED,wBAAgB,8BAA8B,yBAG7C;AAED,wBAAgB,wBAAwB,0BAGvC;AAkJD,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACnD;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,0BAA+B,EAAE,EAAE,6BAA6B,eASpH"}
+{"version":3,"file":"TemplateVariableProvider.d.ts","sourceRoot":"","sources":["../../../src/context/TemplateVariableProvider/TemplateVariableProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAEL,gBAAgB,EAChB,aAAa,EACb,cAAc,EAEf,MAAM,2BAA2B,CAAC;AACnC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAKnF,aAAK,qBAAqB,GAAG;IAC3B,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,aAAa,EAAE,gBAAgB,CAAC;IAChC,gBAAgB,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7E,kBAAkB,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,cAAc,EAAE,KAAK,IAAI,CAAC;IAC5E,kBAAkB,EAAE,CAAC,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IACnE,sBAAsB,EAAE,CAAC,WAAW,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IACpE,wBAAwB,EAAE,MAAM,kBAAkB,EAAE,CAAC;IACrD,uBAAuB,EAAE,MAAM;QAAE,uBAAuB,EAAE,OAAO,CAAC;QAAC,qBAAqB,EAAE,MAAM,EAAE,CAAA;KAAE,CAAC;CACtG,CAAC;AAaF,wBAAgB,yBAAyB,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,oBAqBjE;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM;;;EAU/C;AAED,wBAAgB,0BAA0B;;;;;;;;;;EAYzC;AAED,wBAAgB,8BAA8B,yBAG7C;AAED,wBAAgB,wBAAwB,0BAGvC;AA0JD,MAAM,WAAW,6BAA6B;IAC5C,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACnD;AAED,wBAAgB,wBAAwB,CAAC,EAAE,QAAQ,EAAE,0BAA+B,EAAE,EAAE,6BAA6B,eASpH"}

package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -80,6 +80,7 @@ export function useTemplateVariableStore() {
 }
 function PluginProvider({ children  }) {
     const originalValues = useTemplateVariableValues();
+    const definitions = useTemplateVariableDefinitions();
     const values = useMemo(()=>{
         const contextValues = {};
         // This will loop through all the current variables values
@@ -90,15 +91,22 @@ function PluginProvider({ children  }) {
                 ...originalValues[name]
             };
             if (v.value === ALL_VALUE) {
-                var ref;
-                var ref1;
-                v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+                const definition = definitions.find((d)=>d.spec.name === name);
+                // If the variable is a list variable and has a custom all value, then use that value instead
+                if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.custom_all_value) {
+                    v.value = definition.spec.custom_all_value;
+                } else {
+                    var ref;
+                    var ref1;
+                    v.value = (ref1 = (ref = v.options) === null || ref === void 0 ? void 0 : ref.map((o)=>o.value)) !== null && ref1 !== void 0 ? ref1 : null;
+                }
             }
             contextValues[name] = v;
         });
         return contextValues;
     }, [
-        originalValues
+        originalValues,
+        definitions
     ]);
     return /*#__PURE__*/ _jsx(TemplateVariableContext.Provider, {
         value: {

package/dist/context/TemplateVariableProvider/TemplateVariableProvider.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/TemplateVariableProvider/TemplateVariableProvider.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 { createContext, useContext, useMemo, useState } from 'react';\nimport { createStore, useStore } from 'zustand';\nimport { immer } from 'zustand/middleware/immer';\nimport { devtools } from 'zustand/middleware';\nimport produce from 'immer';\n\nimport {\n  TemplateVariableContext,\n  VariableStateMap,\n  VariableState,\n  VariableOption,\n  DEFAULT_ALL_VALUE as ALL_VALUE,\n} from '@perses-dev/plugin-system';\nimport { VariableName, VariableValue, VariableDefinition } from '@perses-dev/core';\nimport { checkSavedDefaultVariableStatus } from './utils';\nimport { hydrateTemplateVariableStates } from './hydrationUtils';\nimport { useVariableQueryParams, getInitalValuesFromQueryParameters, getURLQueryParamName } from './query-params';\n\ntype TemplateVariableStore = {\n  variableDefinitions: VariableDefinition[];\n  variableState: VariableStateMap;\n  setVariableValue: (variableName: VariableName, value: VariableValue) => void;\n  setVariableOptions: (name: VariableName, options: VariableOption[]) => void;\n  setVariableLoading: (name: VariableName, loading: boolean) => void;\n  setVariableDefinitions: (definitions: VariableDefinition[]) => void;\n  setVariableDefaultValues: () => VariableDefinition[];\n  getSavedVariablesStatus: () => { isSavedVariableModified: boolean; modifiedVariableNames: string[] };\n};\n\nconst TemplateVariableStoreContext = createContext<ReturnType<typeof createTemplateVariableSrvStore> | undefined>(\n  undefined\n);\nfunction useTemplateVariableStoreCtx() {\n  const context = useContext(TemplateVariableStoreContext);\n  if (!context) {\n    throw new Error('TemplateVariableStoreContext not initialized');\n  }\n  return context;\n}\n\nexport function useTemplateVariableValues(variableNames?: string[]) {\n  const store = useTemplateVariableStoreCtx();\n  const state = useStore(\n    store,\n    (s) => {\n      const names = variableNames ?? Object.keys(s.variableState);\n      const vars: VariableStateMap = {};\n      names.forEach((name) => {\n        const varState = s.variableState[name];\n        if (!varState) {\n          return;\n        }\n        vars[name] = varState;\n      });\n      return vars;\n    },\n    (left, right) => {\n      return JSON.stringify(left) === JSON.stringify(right);\n    }\n  );\n  return state;\n}\n\nexport function useTemplateVariable(name: string) {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store, (s) => {\n    const variableState = s.variableState[name];\n    const definition = s.variableDefinitions.find((v) => v.spec.name === name);\n    return {\n      state: variableState,\n      definition,\n    };\n  });\n}\n\nexport function useTemplateVariableActions() {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store, (s) => {\n    return {\n      setVariableValue: s.setVariableValue,\n      setVariableLoading: s.setVariableLoading,\n      setVariableOptions: s.setVariableOptions,\n      setVariableDefinitions: s.setVariableDefinitions,\n      setVariableDefaultValues: s.setVariableDefaultValues,\n      getSavedVariablesStatus: s.getSavedVariablesStatus,\n    };\n  });\n}\n\nexport function useTemplateVariableDefinitions() {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store, (s) => s.variableDefinitions);\n}\n\nexport function useTemplateVariableStore() {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store);\n}\n\nfunction PluginProvider({ children }: { children: React.ReactNode }) {\n  const originalValues = useTemplateVariableValues();\n\n  const values = useMemo(() => {\n    const contextValues: VariableStateMap = {};\n\n    // This will loop through all the current variables values\n    // and update any variables that have ALL_VALUE as their current value\n    // to include all options.\n    Object.keys(originalValues).forEach((name) => {\n      const v = { ...originalValues[name] } as VariableState;\n      if (v.value === ALL_VALUE) {\n        v.value = v.options?.map((o: { value: string }) => o.value) ?? null;\n      }\n      contextValues[name] = v;\n    });\n    return contextValues;\n  }, [originalValues]);\n\n  return <TemplateVariableContext.Provider value={{ state: values }}>{children}</TemplateVariableContext.Provider>;\n}\n\ninterface TemplateVariableSrvArgs {\n  initialVariableDefinitions?: VariableDefinition[];\n  queryParams?: ReturnType<typeof useVariableQueryParams>;\n}\n\nfunction createTemplateVariableSrvStore({ initialVariableDefinitions = [], queryParams }: TemplateVariableSrvArgs) {\n  const initialParams = getInitalValuesFromQueryParameters(queryParams ? queryParams[0] : {});\n  const store = createStore<TemplateVariableStore>()(\n    devtools(\n      immer((set, get) => ({\n        variableState: hydrateTemplateVariableStates(initialVariableDefinitions, initialParams),\n        variableDefinitions: initialVariableDefinitions,\n        setVariableDefinitions(definitions: VariableDefinition[]) {\n          set(\n            (state) => {\n              state.variableDefinitions = definitions;\n              state.variableState = hydrateTemplateVariableStates(definitions, initialParams);\n            },\n            false,\n            '[Variables] setVariableDefinitions' // Used for action name in Redux devtools\n          );\n        },\n        setVariableOptions(name, options) {\n          set(\n            (state) => {\n              const varState = state.variableState[name];\n              if (!varState) {\n                return;\n              }\n              varState.options = options;\n            },\n            false,\n            '[Variables] setVariableOptions'\n          );\n        },\n        setVariableLoading(name, loading) {\n          set(\n            (state) => {\n              const varState = state.variableState[name];\n              if (!varState) {\n                return;\n              }\n              varState.loading = loading;\n            },\n            false,\n            '[Variables] setVariableLoading'\n          );\n        },\n        setVariableValue: (name, value) =>\n          set(\n            (state) => {\n              let val = value;\n              const varState = state.variableState[name];\n              if (!varState) {\n                return;\n              }\n\n              // Make sure there is only one all value\n              if (Array.isArray(val) && val.includes(ALL_VALUE)) {\n                if (val.at(-1) === ALL_VALUE) {\n                  val = ALL_VALUE;\n                } else {\n                  val = val.filter((v) => v !== ALL_VALUE);\n                }\n              }\n              if (queryParams) {\n                const setQueryParams = queryParams[1];\n                setQueryParams({ [getURLQueryParamName(name)]: val });\n              }\n              varState.value = val;\n            },\n            false,\n            '[Variables] setVariableValue'\n          ),\n        setVariableDefaultValues: () => {\n          const variableDefinitions = get().variableDefinitions;\n          const variableState = get().variableState;\n          const updatedVariables = produce(variableDefinitions, (draft) => {\n            draft.forEach((variable, index) => {\n              if (variable.kind === 'ListVariable') {\n                const currentVariable = variableState[variable.spec.name];\n                if (currentVariable?.value !== undefined) {\n                  draft[index] = {\n                    kind: 'ListVariable',\n                    spec: produce(variable.spec, (specDraft) => {\n                      specDraft.default_value = currentVariable.value;\n                    }),\n                  };\n                }\n              } else if (variable.kind === 'TextVariable') {\n                const currentVariable = variableState[variable.spec.name];\n                const currentVariableValue = typeof currentVariable?.value === 'string' ? currentVariable.value : '';\n                if (currentVariable?.value !== undefined) {\n                  draft[index] = {\n                    kind: 'TextVariable',\n                    spec: produce(variable.spec, (specDraft) => {\n                      specDraft.value = currentVariableValue;\n                    }),\n                  };\n                }\n              }\n            });\n          });\n          set(\n            (state) => {\n              state.variableDefinitions = updatedVariables;\n            },\n            false,\n            '[Variables] setVariableDefaultValues'\n          );\n          return updatedVariables;\n        },\n        getSavedVariablesStatus: () => {\n          return checkSavedDefaultVariableStatus(get().variableDefinitions, get().variableState);\n        },\n      }))\n    )\n  );\n\n  return store;\n}\n\nexport interface TemplateVariableProviderProps {\n  children: React.ReactNode;\n  initialVariableDefinitions?: VariableDefinition[];\n}\n\nexport function TemplateVariableProvider({ children, initialVariableDefinitions = [] }: TemplateVariableProviderProps) {\n  const queryParams = useVariableQueryParams(initialVariableDefinitions);\n  const [store] = useState(createTemplateVariableSrvStore({ initialVariableDefinitions, queryParams }));\n\n  return (\n    <TemplateVariableStoreContext.Provider value={store}>\n      <PluginProvider>{children}</PluginProvider>\n    </TemplateVariableStoreContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","useMemo","useState","createStore","useStore","immer","devtools","produce","TemplateVariableContext","DEFAULT_ALL_VALUE","ALL_VALUE","checkSavedDefaultVariableStatus","hydrateTemplateVariableStates","useVariableQueryParams","getInitalValuesFromQueryParameters","getURLQueryParamName","TemplateVariableStoreContext","undefined","useTemplateVariableStoreCtx","context","Error","useTemplateVariableValues","variableNames","store","state","s","names","Object","keys","variableState","vars","forEach","name","varState","left","right","JSON","stringify","useTemplateVariable","definition","variableDefinitions","find","v","spec","useTemplateVariableActions","setVariableValue","setVariableLoading","setVariableOptions","setVariableDefinitions","setVariableDefaultValues","getSavedVariablesStatus","useTemplateVariableDefinitions","useTemplateVariableStore","PluginProvider","children","originalValues","values","contextValues","value","options","map","o","Provider","createTemplateVariableSrvStore","initialVariableDefinitions","queryParams","initialParams","set","get","definitions","loading","val","Array","isArray","includes","at","filter","setQueryParams","updatedVariables","draft","variable","index","kind","currentVariable","specDraft","default_value","currentVariableValue","TemplateVariableProvider"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/TemplateVariableProvider/TemplateVariableProvider.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 { createContext, useContext, useMemo, useState } from 'react';\nimport { createStore, useStore } from 'zustand';\nimport { immer } from 'zustand/middleware/immer';\nimport { devtools } from 'zustand/middleware';\nimport produce from 'immer';\n\nimport {\n  TemplateVariableContext,\n  VariableStateMap,\n  VariableState,\n  VariableOption,\n  DEFAULT_ALL_VALUE as ALL_VALUE,\n} from '@perses-dev/plugin-system';\nimport { VariableName, VariableValue, VariableDefinition } from '@perses-dev/core';\nimport { checkSavedDefaultVariableStatus } from './utils';\nimport { hydrateTemplateVariableStates } from './hydrationUtils';\nimport { useVariableQueryParams, getInitalValuesFromQueryParameters, getURLQueryParamName } from './query-params';\n\ntype TemplateVariableStore = {\n  variableDefinitions: VariableDefinition[];\n  variableState: VariableStateMap;\n  setVariableValue: (variableName: VariableName, value: VariableValue) => void;\n  setVariableOptions: (name: VariableName, options: VariableOption[]) => void;\n  setVariableLoading: (name: VariableName, loading: boolean) => void;\n  setVariableDefinitions: (definitions: VariableDefinition[]) => void;\n  setVariableDefaultValues: () => VariableDefinition[];\n  getSavedVariablesStatus: () => { isSavedVariableModified: boolean; modifiedVariableNames: string[] };\n};\n\nconst TemplateVariableStoreContext = createContext<ReturnType<typeof createTemplateVariableSrvStore> | undefined>(\n  undefined\n);\nfunction useTemplateVariableStoreCtx() {\n  const context = useContext(TemplateVariableStoreContext);\n  if (!context) {\n    throw new Error('TemplateVariableStoreContext not initialized');\n  }\n  return context;\n}\n\nexport function useTemplateVariableValues(variableNames?: string[]) {\n  const store = useTemplateVariableStoreCtx();\n  const state = useStore(\n    store,\n    (s) => {\n      const names = variableNames ?? Object.keys(s.variableState);\n      const vars: VariableStateMap = {};\n      names.forEach((name) => {\n        const varState = s.variableState[name];\n        if (!varState) {\n          return;\n        }\n        vars[name] = varState;\n      });\n      return vars;\n    },\n    (left, right) => {\n      return JSON.stringify(left) === JSON.stringify(right);\n    }\n  );\n  return state;\n}\n\nexport function useTemplateVariable(name: string) {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store, (s) => {\n    const variableState = s.variableState[name];\n    const definition = s.variableDefinitions.find((v) => v.spec.name === name);\n    return {\n      state: variableState,\n      definition,\n    };\n  });\n}\n\nexport function useTemplateVariableActions() {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store, (s) => {\n    return {\n      setVariableValue: s.setVariableValue,\n      setVariableLoading: s.setVariableLoading,\n      setVariableOptions: s.setVariableOptions,\n      setVariableDefinitions: s.setVariableDefinitions,\n      setVariableDefaultValues: s.setVariableDefaultValues,\n      getSavedVariablesStatus: s.getSavedVariablesStatus,\n    };\n  });\n}\n\nexport function useTemplateVariableDefinitions() {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store, (s) => s.variableDefinitions);\n}\n\nexport function useTemplateVariableStore() {\n  const store = useTemplateVariableStoreCtx();\n  return useStore(store);\n}\n\nfunction PluginProvider({ children }: { children: React.ReactNode }) {\n  const originalValues = useTemplateVariableValues();\n  const definitions = useTemplateVariableDefinitions();\n\n  const values = useMemo(() => {\n    const contextValues: VariableStateMap = {};\n\n    // This will loop through all the current variables values\n    // and update any variables that have ALL_VALUE as their current value\n    // to include all options.\n    Object.keys(originalValues).forEach((name) => {\n      const v = { ...originalValues[name] } as VariableState;\n\n      if (v.value === ALL_VALUE) {\n        const definition = definitions.find((d) => d.spec.name === name);\n        // If the variable is a list variable and has a custom all value, then use that value instead\n        if (definition?.kind === 'ListVariable' && definition.spec.custom_all_value) {\n          v.value = definition.spec.custom_all_value;\n        } else {\n          v.value = v.options?.map((o: { value: string }) => o.value) ?? null;\n        }\n      }\n      contextValues[name] = v;\n    });\n    return contextValues;\n  }, [originalValues, definitions]);\n\n  return <TemplateVariableContext.Provider value={{ state: values }}>{children}</TemplateVariableContext.Provider>;\n}\n\ninterface TemplateVariableSrvArgs {\n  initialVariableDefinitions?: VariableDefinition[];\n  queryParams?: ReturnType<typeof useVariableQueryParams>;\n}\n\nfunction createTemplateVariableSrvStore({ initialVariableDefinitions = [], queryParams }: TemplateVariableSrvArgs) {\n  const initialParams = getInitalValuesFromQueryParameters(queryParams ? queryParams[0] : {});\n  const store = createStore<TemplateVariableStore>()(\n    devtools(\n      immer((set, get) => ({\n        variableState: hydrateTemplateVariableStates(initialVariableDefinitions, initialParams),\n        variableDefinitions: initialVariableDefinitions,\n        setVariableDefinitions(definitions: VariableDefinition[]) {\n          set(\n            (state) => {\n              state.variableDefinitions = definitions;\n              state.variableState = hydrateTemplateVariableStates(definitions, initialParams);\n            },\n            false,\n            '[Variables] setVariableDefinitions' // Used for action name in Redux devtools\n          );\n        },\n        setVariableOptions(name, options) {\n          set(\n            (state) => {\n              const varState = state.variableState[name];\n              if (!varState) {\n                return;\n              }\n              varState.options = options;\n            },\n            false,\n            '[Variables] setVariableOptions'\n          );\n        },\n        setVariableLoading(name, loading) {\n          set(\n            (state) => {\n              const varState = state.variableState[name];\n              if (!varState) {\n                return;\n              }\n              varState.loading = loading;\n            },\n            false,\n            '[Variables] setVariableLoading'\n          );\n        },\n        setVariableValue: (name, value) =>\n          set(\n            (state) => {\n              let val = value;\n              const varState = state.variableState[name];\n              if (!varState) {\n                return;\n              }\n\n              // Make sure there is only one all value\n              if (Array.isArray(val) && val.includes(ALL_VALUE)) {\n                if (val.at(-1) === ALL_VALUE) {\n                  val = ALL_VALUE;\n                } else {\n                  val = val.filter((v) => v !== ALL_VALUE);\n                }\n              }\n              if (queryParams) {\n                const setQueryParams = queryParams[1];\n                setQueryParams({ [getURLQueryParamName(name)]: val });\n              }\n              varState.value = val;\n            },\n            false,\n            '[Variables] setVariableValue'\n          ),\n        setVariableDefaultValues: () => {\n          const variableDefinitions = get().variableDefinitions;\n          const variableState = get().variableState;\n          const updatedVariables = produce(variableDefinitions, (draft) => {\n            draft.forEach((variable, index) => {\n              if (variable.kind === 'ListVariable') {\n                const currentVariable = variableState[variable.spec.name];\n                if (currentVariable?.value !== undefined) {\n                  draft[index] = {\n                    kind: 'ListVariable',\n                    spec: produce(variable.spec, (specDraft) => {\n                      specDraft.default_value = currentVariable.value;\n                    }),\n                  };\n                }\n              } else if (variable.kind === 'TextVariable') {\n                const currentVariable = variableState[variable.spec.name];\n                const currentVariableValue = typeof currentVariable?.value === 'string' ? currentVariable.value : '';\n                if (currentVariable?.value !== undefined) {\n                  draft[index] = {\n                    kind: 'TextVariable',\n                    spec: produce(variable.spec, (specDraft) => {\n                      specDraft.value = currentVariableValue;\n                    }),\n                  };\n                }\n              }\n            });\n          });\n          set(\n            (state) => {\n              state.variableDefinitions = updatedVariables;\n            },\n            false,\n            '[Variables] setVariableDefaultValues'\n          );\n          return updatedVariables;\n        },\n        getSavedVariablesStatus: () => {\n          return checkSavedDefaultVariableStatus(get().variableDefinitions, get().variableState);\n        },\n      }))\n    )\n  );\n\n  return store;\n}\n\nexport interface TemplateVariableProviderProps {\n  children: React.ReactNode;\n  initialVariableDefinitions?: VariableDefinition[];\n}\n\nexport function TemplateVariableProvider({ children, initialVariableDefinitions = [] }: TemplateVariableProviderProps) {\n  const queryParams = useVariableQueryParams(initialVariableDefinitions);\n  const [store] = useState(createTemplateVariableSrvStore({ initialVariableDefinitions, queryParams }));\n\n  return (\n    <TemplateVariableStoreContext.Provider value={store}>\n      <PluginProvider>{children}</PluginProvider>\n    </TemplateVariableStoreContext.Provider>\n  );\n}\n"],"names":["createContext","useContext","useMemo","useState","createStore","useStore","immer","devtools","produce","TemplateVariableContext","DEFAULT_ALL_VALUE","ALL_VALUE","checkSavedDefaultVariableStatus","hydrateTemplateVariableStates","useVariableQueryParams","getInitalValuesFromQueryParameters","getURLQueryParamName","TemplateVariableStoreContext","undefined","useTemplateVariableStoreCtx","context","Error","useTemplateVariableValues","variableNames","store","state","s","names","Object","keys","variableState","vars","forEach","name","varState","left","right","JSON","stringify","useTemplateVariable","definition","variableDefinitions","find","v","spec","useTemplateVariableActions","setVariableValue","setVariableLoading","setVariableOptions","setVariableDefinitions","setVariableDefaultValues","getSavedVariablesStatus","useTemplateVariableDefinitions","useTemplateVariableStore","PluginProvider","children","originalValues","definitions","values","contextValues","value","d","kind","custom_all_value","options","map","o","Provider","createTemplateVariableSrvStore","initialVariableDefinitions","queryParams","initialParams","set","get","loading","val","Array","isArray","includes","at","filter","setQueryParams","updatedVariables","draft","variable","index","currentVariable","specDraft","default_value","currentVariableValue","TemplateVariableProvider"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.32.0",
+  "version": "0.34.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.32.0",
-    "@perses-dev/core": "0.32.0",
-    "@perses-dev/plugin-system": "0.32.0",
+    "@perses-dev/components": "0.34.0",
+    "@perses-dev/core": "0.34.0",
+    "@perses-dev/plugin-system": "0.34.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -44,8 +44,8 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.32.0",
-    "@perses-dev/storybook": "0.32.0",
+    "@perses-dev/internal-utils": "0.34.0",
+    "@perses-dev/storybook": "0.34.0",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },
@@ -57,8 +57,5 @@
   },
   "files": [
     "dist"
-  ],
-  "typedoc": {
-    "entryPoint": "./src/index.ts"
-  }
+  ]
 }