@perses-dev/dashboards 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/cjs/test/testDashboard.js

@@ -29,6 +29,7 @@ const testDashboard = {
     },
     spec: {
         duration: '30m',
+        refreshInterval: '0s',
         variables: [
             {
                 kind: 'TextVariable',

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -29,7 +29,10 @@ function ViewDashboard(props) {
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
+    var _refreshInterval;
+    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : '0s';
     const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
+    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashhboardRefreshInterval);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -40,6 +43,7 @@ function ViewDashboard(props) {
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
                 initialTimeRange: initialTimeRange,
+                initialRefreshInterval: initialRefreshInterval,
                 enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,

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,gBAgG5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -26,8 +26,8 @@ import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
     const { isEditMode  } = useEditMode();
-    const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
+    const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
@@ -77,7 +77,7 @@ export const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 2, 2)
+                        padding: (theme)=>theme.spacing(1, 2)
                     },
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
@@ -85,54 +85,37 @@ 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
                                 }
                             })
                         }),
-                        isBiggerThanMd ? // On bigger screens, make it one row
                         /*#__PURE__*/ _jsxs(Stack, {
+                            ml: "auto",
                             direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            sx: {
-                                whiteSpace: 'nowrap'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                /*#__PURE__*/ _jsx(AddPanelButton, {}),
-                                /*#__PURE__*/ _jsx(AddGroupButton, {}),
-                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                /*#__PURE__*/ _jsx(EditJsonButton, {})
-                            ]
-                        }) : // On smaller screens, make it two rows
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            spacing: 1,
+                            flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
+                            justifyContent: "end",
                             children: [
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
+                                    whiteSpace: "nowrap",
                                     children: [
-                                        /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                        /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                        /*#__PURE__*/ _jsx(EditJsonButton, {})
+                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
+                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
                                     ]
                                 }),
                                 /*#__PURE__*/ _jsxs(Stack, {
                                     direction: "row",
                                     spacing: 1,
-                                    marginLeft: "auto",
-                                    sx: {
-                                        whiteSpace: 'nowrap'
-                                    },
+                                    ml: 1,
+                                    mb: 1,
                                     children: [
-                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
-                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
+                                        /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                        /*#__PURE__*/ _jsx(DownloadButton, {}),
+                                        /*#__PURE__*/ _jsx(EditJsonButton, {})
                                     ]
                                 })
                             ]
@@ -173,7 +156,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":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,UAAU,EAAEC,KAAK,EAAEC,MAAM,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,EAAEC,KAAK,QAAQ,eAAe,CAAC;AAC/F,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAA0BC,WAAW,QAAQ,eAAe,CAAC;AAC7D,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,mBAAmB,QAAQ,cAAc,CAAC;AACnD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAAQ,mBAAmB,CAAC;AACnD,SAASC,mBAAmB,QAAQ,wBAAwB,CAAC;AAC7D,SAASC,sBAAsB,QAAQ,2BAA2B,CAAC;AAYnE,OAAO,MAAMC,gBAAgB,GAAG,CAACC,KAA4B,GAAK;IAChE,MAAM,EACJC,aAAa,CAAA,EACbC,uBAAuB,CAAA,EACvBC,uBAAuB,CAAA,EACvBC,UAAU,CAAA,EACVC,iBAAiB,CAAA,EACjBC,mBAAmB,CAAA,EACnBC,MAAM,CAAA,IACP,GAAGP,KAAK,AAAC;IAEV,MAAM,EAAEQ,UAAU,CAAA,EAAE,GAAGnB,WAAW,EAAE,AAAC;IAErC,MAAMoB,cAAc,GAAGxB,aAAa,CAACD,QAAQ,EAAE,CAAC0B,WAAW,CAACC,EAAE,CAAC,IAAI,CAAC,CAAC,AAAC;IACtE,MAAMC,cAAc,GAAG3B,aAAa,CAACD,QAAQ,EAAE,CAAC0B,WAAW,CAACC,EAAE,CAAC,IAAI,CAAC,CAAC,AAAC;IAEtE,MAAME,cAAc,GAAGX,uBAAuB,GAC5CA,uBAAuB,iBAEvB,KAACtB,UAAU;QAACkC,OAAO,EAAC,IAAI;kBAAEb,aAAa;MAAc,AACtD,AAAC;IAEF,MAAMc,MAAM,GAAG,mBAAmB,AAAC;IAEnC,qBACE;kBACGP,UAAU,iBACT,MAAC3B,KAAK;YAACmC,OAAO,EAAE,CAAC;YAAEC,aAAW,EAAEF,MAAM;;8BACpC,MAAChC,GAAG;oBAACmC,CAAC,EAAE,CAAC;oBAAEC,OAAO,EAAC,MAAM;oBAACC,EAAE,EAAE;wBAAEC,eAAe,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,OAAO,CAACC,IAAI,GAAG,IAAI;qBAAE;;wBAC5FZ,cAAc;sCACf,MAAChC,KAAK;4BAAC6C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEW,UAAU,EAAC,MAAM;;gCACjDvB,UAAU,kBACT,KAAClB,KAAK;oCAAC0C,QAAQ,EAAE,SAAS;oCAAER,EAAE,EAAE;wCAAEC,eAAe,EAAE,aAAa;wCAAEQ,OAAO,EAAE,CAAC;qCAAE;8CAAE,4EAEhF;kCAAQ,AACT;8CACD,KAAChC,mBAAmB;oCAACU,MAAM,EAAEA,MAAM;oCAAEuB,UAAU,EAAE1B,UAAU;kCAAI;8CAC/D,KAACtB,MAAM;oCAACgC,OAAO,EAAC,UAAU;oCAACiB,OAAO,EAAEzB,mBAAmB;8CAAE,QAEzD;kCAAS;;0BACH;;kBACJ;8BACN,MAACvB,GAAG;oBACFqC,EAAE,EAAE;wBACFD,OAAO,EAAE,MAAM;wBACfa,KAAK,EAAE,MAAM;wBACbC,UAAU,EAAE,OAAO;wBACnBJ,OAAO,EAAE,CAACP,KAAK,GAAKA,KAAK,CAACN,OAAO,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC;qBAC9C;;sCAED,KAAC7B,aAAa;4BAAC+C,iBAAiB,EAAE9C,UAAU;sCAC1C,cAAA,KAACU,sBAAsB;gCACrBK,uBAAuB,EAAEA,uBAAuB;gCAChDiB,EAAE,EAAE;oCACFC,eAAe,EAAE,CAAC,EAAEE,OAAO,CAAA,EAAE,GAC3BA,OAAO,CAACY,IAAI,KAAK,MAAM,GAAGZ,OAAO,CAACa,UAAU,CAACC,OAAO,GAAGd,OAAO,CAACa,UAAU,CAACE,KAAK;iCAClF;8BACD;0BACY;wBACf7B,cAAc,GACb,qCAAqC;sCACrC,MAAC5B,KAAK;4BAAC6C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEW,UAAU,EAAC,MAAM;4BAACP,EAAE,EAAE;gCAAEmB,UAAU,EAAE,QAAQ;6BAAE;;8CAC/E,KAAC7C,mBAAmB,KAAG;8CACvB,KAACJ,cAAc,KAAG;8CAClB,KAACC,cAAc,KAAG;8CAClB,KAACE,iBAAiB,KAAG;8CACrB,KAACD,cAAc,KAAG;8CAClB,KAACI,cAAc,KAAG;;0BACZ,GAER,uCAAuC;sCACvC,MAACf,KAAK;4BAACmC,OAAO,EAAE,CAAC;;8CACf,MAACnC,KAAK;oCAAC6C,SAAS,EAAC,KAAK;oCAACV,OAAO,EAAE,CAAC;oCAAEW,UAAU,EAAC,MAAM;oCAACP,EAAE,EAAE;wCAAEmB,UAAU,EAAE,QAAQ;qCAAE;;sDAC/E,KAAC9C,iBAAiB,KAAG;sDACrB,KAACD,cAAc,KAAG;sDAClB,KAACI,cAAc,KAAG;;kCACZ;8CACR,MAACf,KAAK;oCAAC6C,SAAS,EAAC,KAAK;oCAACV,OAAO,EAAE,CAAC;oCAAEW,UAAU,EAAC,MAAM;oCAACP,EAAE,EAAE;wCAAEmB,UAAU,EAAE,QAAQ;qCAAE;;sDAC/E,KAAC7C,mBAAmB,KAAG;sDACvB,KAACJ,cAAc,KAAG;sDAClB,KAACC,cAAc,KAAG;;kCACZ;;0BACF,AACT;;kBACG;;UACA,iBAER,MAACV,KAAK;YAACmC,OAAO,EAAE,CAAC;YAAEa,OAAO,EAAE,CAAC;YAAEZ,aAAW,EAAEF,MAAM;;8BAChD,MAAChC,GAAG;oBAACqC,EAAE,EAAE;wBAAED,OAAO,EAAE,MAAM;wBAAEa,KAAK,EAAE,MAAM;qBAAE;;wBACxCnB,cAAc;sCACf,MAAChC,KAAK;4BAAC6C,SAAS,EAAC,KAAK;4BAACV,OAAO,EAAE,CAAC;4BAAEW,UAAU,EAAC,MAAM;;8CAClD,KAAClC,iBAAiB,KAAG;8CACrB,KAACD,cAAc,KAAG;gCACjBoB,cAAc,kBAAI,KAACjB,UAAU;oCAACoC,OAAO,EAAE1B,iBAAiB;kCAAI;;0BACvD;;kBACJ;8BACN,KAACtB,GAAG;oBAACyD,QAAQ,EAAE,CAAC;8BACd,cAAA,KAACrD,aAAa;wBAAC+C,iBAAiB,EAAE9C,UAAU;kCAC1C,cAAA,KAACU,sBAAsB;4BACrBK,uBAAuB,EAAEA,uBAAuB;4BAChDiB,EAAE,EAAE;gCACFC,eAAe,EAAE,CAAC,EAAEE,OAAO,CAAA,EAAE,GAC3BA,OAAO,CAACY,IAAI,KAAK,MAAM,GAAGZ,OAAO,CAACa,UAAU,CAACC,OAAO,GAAGd,OAAO,CAACa,UAAU,CAACE,KAAK;6BAClF;0BACD;sBACY;kBACZ;;UACA,AACT;MACA,CACH;AACJ,CAAC,CAAC"}
+{"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 isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\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),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n            <Stack ml=\"auto\" direction=\"row\" flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'} justifyContent=\"end\">\n              <Stack direction=\"row\" spacing={1} ml={1} mb={1} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <Stack direction=\"row\" spacing={1} ml={1} mb={1}>\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            </Stack>\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","isBiggerThanSm","breakpoints","up","isBiggerThanLg","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","ml","flexWrap","justifyContent","mb","whiteSpace","paddingY"],"mappings":"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"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -35,7 +35,7 @@ export const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = useEditJsonDialog();
-    const { setTimeRange  } = useTimeRange();
+    const { setTimeRange , setRefreshInterval  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
     const [draftDashboard, setDraftDashboard] = useState(dashboard);
     const handleApply = (e)=>{
@@ -44,6 +44,7 @@ const EditJsonDialogForm = ()=>{
         setTimeRange({
             pastDuration: draftDashboard.spec.duration
         });
+        setRefreshInterval(draftDashboard.spec.refreshInterval);
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ _jsxs(Dialog.Form, {

package/dist/components/EditJsonDialog/EditJsonDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.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 { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange, setRefreshInterval } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    setRefreshInterval(draftDashboard.spec.refreshInterval);\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","setRefreshInterval","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","refreshInterval","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"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,eAuHlB"}

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
@@ -81,25 +84,6 @@ export function PanelHeader({ id , title , description , editHandlers , sx , ...
                 })
             ]
         });
-    } else if (description !== undefined) {
-        // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-        actions = /*#__PURE__*/ _jsx(InfoTooltip, {
-            id: descriptionTooltipId,
-            description: description,
-            enterDelay: 100,
-            children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                "aria-label": "panel description",
-                size: "small",
-                children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
-                    "aria-describedby": "info-tooltip",
-                    "aria-hidden": false,
-                    fontSize: "inherit",
-                    sx: {
-                        color: (theme)=>theme.palette.grey[700]
-                    }
-                })
-            })
-        });
     }
     return /*#__PURE__*/ _jsx(CardHeader, {
         id: id,
@@ -107,19 +91,41 @@ export function PanelHeader({ id , title , description , editHandlers , sx , ...
         "aria-labelledby": titleElementId,
         "aria-describedby": descriptionTooltipId,
         disableTypography: true,
-        title: /*#__PURE__*/ _jsx(Typography, {
-            id: titleElementId,
-            variant: "subtitle1",
-            sx: {
-                // `minHeight` guarantees that the header has the correct height
-                // when there is no title (i.e. in the preview)
-                lineHeight: '24px',
-                minHeight: '24px',
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            },
-            children: title
+        title: /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    id: titleElementId,
+                    variant: "subtitle1",
+                    sx: {
+                        // `minHeight` guarantees that the header has the correct height
+                        // when there is no title (i.e. in the preview)
+                        lineHeight: '24px',
+                        minHeight: '24px',
+                        whiteSpace: 'nowrap',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis'
+                    },
+                    children: title
+                }),
+                description !== undefined && description.trim().length > 0 && /*#__PURE__*/ _jsx(InfoTooltip, {
+                    id: descriptionTooltipId,
+                    description: description,
+                    enterDelay: 100,
+                    children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                        "aria-label": "panel description",
+                        size: "small",
+                        children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                            "aria-describedby": "info-tooltip",
+                            "aria-hidden": false,
+                            fontSize: "inherit",
+                            sx: {
+                                color: (theme)=>theme.palette.text.secondary
+                            }
+                        })
+                    })
+                })
+            ]
         }),
         action: /*#__PURE__*/ _jsx(HeaderActionWrapper, {
             direction: "row",

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  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\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          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\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.text.secondary }}\n                />\n              </HeaderIconButton>\n            </InfoTooltip>\n          )}\n        </Stack>\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","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","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,gBA0D1G,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"}