@perses-dev/dashboards 0.29.1 → 0.31.0

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -11,41 +11,27 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useDashboard, useEditMode } from '../../context';
+import { useEditMode } from '../../context';
 import { AddPanelButton } from '../AddPanelButton';
 import { AddGroupButton } from '../AddGroupButton';
 import { DownloadButton } from '../DownloadButton';
 import { TimeRangeControls } from '../TimeRangeControls';
-import { TemplateVariableList, EditVariablesButton } from '../Variables';
+import { EditVariablesButton } from '../Variables';
 import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
+import { SaveDashboardButton } from '../SaveDashboardButton';
+import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
 export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave ,  } = props;
-    const dashboard = useDashboard();
-    const { isEditMode , setEditMode  } = useEditMode();
+    const { isEditMode  } = useEditMode();
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
-    const [isSavingDashboard, setSavingDashboard] = useState(false);
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
     });
-    const onSaveButtonClick = ()=>{
-        if (onSave !== undefined) {
-            setSavingDashboard(true);
-            onSave(dashboard.dashboard).then(()=>{
-                setSavingDashboard(false);
-                setEditMode(false);
-            }).catch(()=>{
-                setSavingDashboard(false);
-            });
-        } else {
-            setEditMode(false);
-        }
-    };
     const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ _jsx(_Fragment, {
         children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
@@ -73,11 +59,9 @@ export const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "contained",
-                                    onClick: onSaveButtonClick,
-                                    disabled: isReadonly || isSavingDashboard,
-                                    children: "Save"
+                                /*#__PURE__*/ _jsx(SaveDashboardButton, {
+                                    onSave: onSave,
+                                    isDisabled: isReadonly
                                 }),
                                 /*#__PURE__*/ _jsx(Button, {
                                     variant: "outlined",
@@ -98,7 +82,7 @@ export const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                            children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                                 initialVariableIsSticky: initialVariableIsSticky,
                                 sx: {
                                     backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper
@@ -186,7 +170,7 @@ export const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                        children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
                             initialVariableIsSticky: initialVariableIsSticky,
                             sx: {
                                 backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.default : palette.background.paper

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 { useState } from 'react';\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport { useDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { TemplateVariableList, EditVariablesButton } from '../Variables';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\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?: (entity: DashboardResource) => Promise<DashboardResource>;\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 dashboard = useDashboard();\n  const { isEditMode, setEditMode } = useEditMode();\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n\n  const [isSavingDashboard, setSavingDashboard] = useState<boolean>(false);\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSaveButtonClick = () => {\n    if (onSave !== undefined) {\n      setSavingDashboard(true);\n      onSave(dashboard.dashboard)\n        .then(() => {\n          setSavingDashboard(false);\n          setEditMode(false);\n        })\n        .catch(() => {\n          setSavingDashboard(false);\n        });\n    } else {\n      setEditMode(false);\n    }\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              <Button variant=\"contained\" onClick={onSaveButtonClick} disabled={isReadonly || isSavingDashboard}>\n                Save\n              </Button>\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              <TemplateVariableList\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              <TemplateVariableList\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":["useState","Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useDashboard","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","TemplateVariableList","EditVariablesButton","EditButton","EditJsonButton","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","dashboard","isEditMode","setEditMode","isBiggerThanMd","breakpoints","up","isBiggerThanSm","isSavingDashboard","setSavingDashboard","dashboardTitle","variant","onSaveButtonClick","undefined","then","catch","testId","spacing","data-testid","p","display","sx","backgroundColor","theme","palette","primary","main","direction","marginLeft","severity","padding","onClick","disabled","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 { DashboardResource } from '@perses-dev/core';\nimport { 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?: (entity: DashboardResource) => Promise<DashboardResource>;\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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"}

package/dist/components/EditJsonButton/EditJsonButton.js

@@ -21,6 +21,7 @@ export const EditJsonButton = ()=>{
     return /*#__PURE__*/ _jsx(InfoTooltip, {
         description: TOOLTIP_TEXT.editJson,
         children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
+            "aria-label": TOOLTIP_TEXT.editJson,
             variant: "outlined",
             onClick: ()=>openEditJsonDialog(),
             children: /*#__PURE__*/ _jsx(CodeIcon, {})

package/dist/components/EditJsonButton/EditJsonButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.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 CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useEditJsonDialog } from '../../context';\n\nexport const EditJsonButton = () => {\n  const { openEditJsonDialog } = useEditJsonDialog();\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.editJson}>\n      <ToolbarIconButton variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","TOOLTIP_TEXT","ToolbarIconButton","useEditJsonDialog","EditJsonButton","openEditJsonDialog","description","editJson","variant","onClick"],"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,OAAOA,QAAQ,MAAM,4BAA4B,CAAC;AAClD,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAElD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,kBAAkB,CAAA,EAAE,GAAGF,iBAAiB,EAAE,AAAC;IACnD,qBACE,KAACH,WAAW;QAACM,WAAW,EAAEL,YAAY,CAACM,QAAQ;kBAC7C,cAAA,KAACL,iBAAiB;YAACM,OAAO,EAAC,UAAU;YAACC,OAAO,EAAE,IAAMJ,kBAAkB,EAAE;sBACvE,cAAA,KAACN,QAAQ,KAAG;UACM;MACR,CACd;AACJ,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/EditJsonButton/EditJsonButton.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 CodeIcon from 'mdi-material-ui/CodeBraces';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { ToolbarIconButton } from '../ToolbarIconButton';\nimport { useEditJsonDialog } from '../../context';\n\nexport const EditJsonButton = () => {\n  const { openEditJsonDialog } = useEditJsonDialog();\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.editJson}>\n      <ToolbarIconButton aria-label={TOOLTIP_TEXT.editJson} variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","TOOLTIP_TEXT","ToolbarIconButton","useEditJsonDialog","EditJsonButton","openEditJsonDialog","description","editJson","aria-label","variant","onClick"],"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,OAAOA,QAAQ,MAAM,4BAA4B,CAAC;AAClD,SAASC,WAAW,QAAQ,wBAAwB,CAAC;AACrD,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,iBAAiB,QAAQ,sBAAsB,CAAC;AACzD,SAASC,iBAAiB,QAAQ,eAAe,CAAC;AAElD,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,kBAAkB,CAAA,EAAE,GAAGF,iBAAiB,EAAE,AAAC;IACnD,qBACE,KAACH,WAAW;QAACM,WAAW,EAAEL,YAAY,CAACM,QAAQ;kBAC7C,cAAA,KAACL,iBAAiB;YAACM,YAAU,EAAEP,YAAY,CAACM,QAAQ;YAAEE,OAAO,EAAC,UAAU;YAACC,OAAO,EAAE,IAAML,kBAAkB,EAAE;sBAC1G,cAAA,KAACN,QAAQ,KAAG;UACM;MACR,CACd;AACJ,CAAC,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}
+{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Alert, FormControl } from '@mui/material';
 import { Dialog, JSONEditor } from '@perses-dev/components';
+import { useTimeRange } from '@perses-dev/plugin-system';
 import { useEditJsonDialog } from '../../context/DashboardProvider';
 import { useDashboard } from '../../context/useDashboard';
 export const EditJsonDialog = ()=>{
@@ -34,11 +35,15 @@ export const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = useEditJsonDialog();
+    const { setTimeRange  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
     const [draftDashboard, setDraftDashboard] = useState(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
         setDashboard(draftDashboard);
+        setTimeRange({
+            pastDuration: draftDashboard.spec.duration
+        });
         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 { 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 { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\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","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"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,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,eAAe,CAAC;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAC5D,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,YAAY,QAAQ,4BAA4B,CAAC;AAE1D,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,cAAc,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IAEpE,qBACE,MAACF,MAAM;QAACO,IAAI,EAAE,CAAC,CAACF,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA;QAAEC,MAAM,EAAC,OAAO;QAACC,SAAS;QAACC,QAAQ,EAAC,IAAI;;0BAC5E,KAACX,MAAM,CAACY,MAAM;gBAACC,OAAO,EAAE,IAAMP,mBAAmB,EAAE;0BAAE,gBAAc;cAAgB;YAClFD,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA,kBAAI,KAACM,kBAAkB,KAAG;;MAC1C,CACT;AACJ,CAAC,CAAC;AAEF,MAAMA,kBAAkB,GAAG,IAAM;IAC/B,MAAM,EAAER,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IACpD,MAAM,EAAEa,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,YAAY,EAAE,AAAC;IACnD,MAAM,CAACc,cAAc,EAAEC,iBAAiB,CAAC,GAAGrB,QAAQ,CAACkB,SAAS,CAAC,AAAC;IAEhE,MAAMI,WAAW,GAAG,CAACC,CAAY,GAAK;QACpCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnBL,YAAY,CAACC,cAAc,CAAC,CAAC;QAC7BX,mBAAmB,EAAE,CAAC;IACxB,CAAC,AAAC;IAEF,qBACE,MAACN,MAAM,CAACsB,IAAI;QAACC,QAAQ,EAAEJ,WAAW;;0BAChC,MAACnB,MAAM,CAACwB,OAAO;gBAACC,EAAE,EAAE;oBAAEC,KAAK,EAAE,MAAM;iBAAE;;kCACnC,KAAC5B,KAAK;wBAAC2B,EAAE,EAAE;4BAAEE,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;yBAAE;wBAAEC,QAAQ,EAAC,SAAS;kCAAC,uCAE7E;sBAAQ;kCACR,KAAC/B,WAAW;wBAACW,SAAS;kCACpB,cAAA,KAACT,UAAU;4BACT8B,SAAS,EAAC,OAAO;4BACjBC,SAAS,EAAC,OAAO;4BACjBC,KAAK,EAAEhB,cAAc;4BACrBiB,QAAQ,EAAE,CAACD,KAAK,GAAKf,iBAAiB,CAACe,KAAK,CAAC;0BAC7C;sBACU;;cACC;0BACjB,KAACjC,MAAM,CAACmC,OAAO;0BACb,cAAA,KAACnC,MAAM,CAACoC,aAAa;oBAACC,OAAO,EAAElB,WAAW;8BAAE,OAAK;kBAAuB;cACzD;;MACL,CACd;AACJ,CAAC,AAAC"}
+{"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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"}

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,eAiF9C"}
+{"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"}

package/dist/components/GridLayout/GridTitle.js

@@ -32,24 +32,25 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
     const { isEditMode  } = useEditMode();
     const text = /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
-        sx: {
-            marginLeft: collapse !== undefined ? 1 : undefined
-        },
         children: title
     });
     return /*#__PURE__*/ _jsx(Box, {
+        onClick: collapse === null || collapse === void 0 ? void 0 : collapse.onToggleOpen,
         sx: {
             display: 'flex',
             justifyContent: 'start',
             alignItems: 'center',
             padding: (theme)=>theme.spacing(1),
+            cursor: collapse ? 'pointer' : 'auto',
             backgroundColor: ({ palette  })=>palette.mode === 'dark' ? palette.background.paper : palette.background.default
         },
         "data-testid": "panel-group-header",
         children: collapse ? /*#__PURE__*/ _jsxs(_Fragment, {
             children: [
                 /*#__PURE__*/ _jsx(IconButton, {
-                    onClick: collapse.onToggleOpen,
+                    sx: {
+                        marginRight: 1
+                    },
                     "aria-label": `${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`,
                     children: collapse.isOpen ? /*#__PURE__*/ _jsx(ExpandedIcon, {}) : /*#__PURE__*/ _jsx(CollapsedIcon, {})
                 }),
@@ -62,7 +63,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             description: TOOLTIP_TEXT.addPanelToGroup,
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.addPanelToGroup(title),
-                                onClick: openAddPanel,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openAddPanel();
+                                },
                                 children: /*#__PURE__*/ _jsx(AddPanelIcon, {})
                             })
                         }),
@@ -70,7 +75,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             description: TOOLTIP_TEXT.editGroup,
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.editGroup(title),
-                                onClick: openEditPanelGroup,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openEditPanelGroup();
+                                },
                                 children: /*#__PURE__*/ _jsx(PencilIcon, {})
                             })
                         }),
@@ -78,7 +87,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             description: TOOLTIP_TEXT.deleteGroup,
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.deleteGroup(title),
-                                onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    openDeletePanelGroupDialog(panelGroupId);
+                                },
                                 children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                             })
                         }),
@@ -87,7 +100,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.moveGroupDown(title),
                                 disabled: moveDown === undefined,
-                                onClick: moveDown,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveDown && moveDown();
+                                },
                                 children: /*#__PURE__*/ _jsx(ArrowDownIcon, {})
                             })
                         }),
@@ -96,7 +113,11 @@ import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '..
                             children: /*#__PURE__*/ _jsx(IconButton, {
                                 "aria-label": ARIA_LABEL_TEXT.moveGroupUp(title),
                                 disabled: moveUp === undefined,
-                                onClick: moveUp,
+                                onClick: (e)=>{
+                                    // Don't trigger expand/collapse
+                                    e.stopPropagation();
+                                    moveUp && moveUp();
+                                },
                                 children: /*#__PURE__*/ _jsx(ArrowUpIcon, {})
                             })
                         })

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 = (\n    <Typography variant=\"h2\" sx={{ marginLeft: collapse !== undefined ? 1 : undefined }}>\n      {title}\n    </Typography>\n  );\n\n  return (\n    <Box\n      sx={{\n        display: 'flex',\n        justifyContent: 'start',\n        alignItems: 'center',\n        padding: (theme) => theme.spacing(1),\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\n            onClick={collapse.onToggleOpen}\n            aria-label={`${collapse.isOpen ? 'collapse' : 'expand'} group ${title}`}\n          >\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 aria-label={ARIA_LABEL_TEXT.addPanelToGroup(title)} onClick={openAddPanel}>\n                  <AddPanelIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.editGroup}>\n                <IconButton aria-label={ARIA_LABEL_TEXT.editGroup(title)} onClick={openEditPanelGroup}>\n                  <PencilIcon />\n                </IconButton>\n              </InfoTooltip>\n              <InfoTooltip description={TOOLTIP_TEXT.deleteGroup}>\n                <IconButton\n                  aria-label={ARIA_LABEL_TEXT.deleteGroup(title)}\n                  onClick={() => openDeletePanelGroupDialog(panelGroupId)}\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={moveDown}\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={moveUp}\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","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","mode","background","paper","default","data-testid","onClick","onToggleOpen","aria-label","isOpen","direction","description","addPanelToGroup","editGroup","deleteGroup","moveGroupDown","disabled","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 { 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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"}

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

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const SaveChangesConfirmationDialog: () => JSX.Element;
+//# sourceMappingURL=SaveChangesConfirmationDialog.d.ts.map

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

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

package/dist/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -0,0 +1,82 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Checkbox, FormGroup, FormControlLabel, Typography } from '@mui/material';
+import { useTimeRange } from '@perses-dev/plugin-system';
+import { isRelativeTimeRange, SAVE_DEFAULTS_DIALOG_TEXT } from '@perses-dev/core';
+import { Dialog } from '@perses-dev/components';
+import { useSaveChangesConfirmationDialog } from '../../context';
+export const SaveChangesConfirmationDialog = ()=>{
+    const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(true);
+    const [saveDefaultVariables, setSaveDefaultVariables] = useState(true);
+    const { saveChangesConfirmationDialog: dialog  } = useSaveChangesConfirmationDialog();
+    const isOpen = dialog !== undefined;
+    const { timeRange  } = useTimeRange();
+    const currentTimeRangeText = isRelativeTimeRange(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
+    const timeRangeInfoText = `Save current time range as new default ${currentTimeRangeText}`;
+    return /*#__PURE__*/ _jsx(Dialog, {
+        open: isOpen,
+        children: dialog !== undefined && /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(Dialog.Header, {
+                    onClose: ()=>dialog.onCancel(),
+                    children: "Save Dashboard"
+                }),
+                /*#__PURE__*/ _jsxs(Dialog.Content, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Typography, {
+                            marginBottom: 2,
+                            children: dialog.description || SAVE_DEFAULTS_DIALOG_TEXT
+                        }),
+                        /*#__PURE__*/ _jsxs(FormGroup, {
+                            children: [
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                                        disabled: !isRelativeTimeRange(timeRange),
+                                        checked: saveDefaultTimeRange && isRelativeTimeRange(timeRange),
+                                        onChange: (e)=>setSaveDefaultTimeRange(e.target.checked)
+                                    }),
+                                    label: timeRangeInfoText
+                                }),
+                                /*#__PURE__*/ _jsx(FormControlLabel, {
+                                    control: /*#__PURE__*/ _jsx(Checkbox, {
+                                        checked: saveDefaultVariables,
+                                        onChange: (e)=>setSaveDefaultVariables(e.target.checked)
+                                    }),
+                                    label: "Save current variable values as new default."
+                                })
+                            ]
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs(Dialog.Actions, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Dialog.PrimaryButton, {
+                            onClick: ()=>{
+                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultVariables);
+                            },
+                            children: "Save Changes"
+                        }),
+                        /*#__PURE__*/ _jsx(Dialog.SecondaryButton, {
+                            onClick: ()=>dialog.onCancel(),
+                            children: "Cancel"
+                        })
+                    ]
+                })
+            ]
+        })
+    });
+};
+
+//# sourceMappingURL=SaveChangesConfirmationDialog.js.map

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

@@ -0,0 +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 } from '../../context';\n\nexport const SaveChangesConfirmationDialog = () => {\n  const [saveDefaultTimeRange, setSaveDefaultTimeRange] = useState(true);\n  const [saveDefaultVariables, setSaveDefaultVariables] = useState(true);\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 timeRangeInfoText = `Save current time range as new default ${currentTimeRangeText}`;\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={timeRangeInfoText}\n              />\n              <FormControlLabel\n                control={\n                  <Checkbox\n                    checked={saveDefaultVariables}\n                    onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSaveDefaultVariables(e.target.checked)}\n                  />\n                }\n                label=\"Save current variable values as new default.\"\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","SaveChangesConfirmationDialog","saveDefaultTimeRange","setSaveDefaultTimeRange","saveDefaultVariables","setSaveDefaultVariables","saveChangesConfirmationDialog","dialog","isOpen","undefined","timeRange","currentTimeRangeText","pastDuration","timeRangeInfoText","open","Header","onClose","onCancel","Content","marginBottom","description","control","disabled","checked","onChange","e","target","label","Actions","PrimaryButton","onClick","onSaveChanges","SecondaryButton"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,QAAQ,EAAEC,SAAS,EAAEC,gBAAgB,EAAEC,UAAU,QAAQ,eAAe,CAAC;AAClF,SAASC,YAAY,QAAQ,2BAA2B,CAAC;AACzD,SAASC,mBAAmB,EAAEC,yBAAyB,QAAQ,kBAAkB,CAAC;AAClF,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,gCAAgC,QAAQ,eAAe,CAAC;AAEjE,OAAO,MAAMC,6BAA6B,GAAG,IAAM;IACjD,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGZ,QAAQ,CAAC,IAAI,CAAC,AAAC;IACvE,MAAM,CAACa,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGd,QAAQ,CAAC,IAAI,CAAC,AAAC;IAEvE,MAAM,EAAEe,6BAA6B,EAAEC,MAAM,CAAA,EAAE,GAAGP,gCAAgC,EAAE,AAAC;IACrF,MAAMQ,MAAM,GAAGD,MAAM,KAAKE,SAAS,AAAC;IAEpC,MAAM,EAAEC,SAAS,CAAA,EAAE,GAAGd,YAAY,EAAE,AAAC;IACrC,MAAMe,oBAAoB,GAAGd,mBAAmB,CAACa,SAAS,CAAC,GACvD,CAAC,MAAM,EAAEA,SAAS,CAACE,YAAY,CAAC,CAAC,CAAC,GAClC,yCAAyC,AAAC;IAE9C,MAAMC,iBAAiB,GAAG,CAAC,uCAAuC,EAAEF,oBAAoB,CAAC,CAAC,AAAC;IAE3F,qBACE,KAACZ,MAAM;QAACe,IAAI,EAAEN,MAAM;kBACjBD,MAAM,KAAKE,SAAS,kBACnB;;8BACE,KAACV,MAAM,CAACgB,MAAM;oBAACC,OAAO,EAAE,IAAMT,MAAM,CAACU,QAAQ,EAAE;8BAAE,gBAAc;kBAAgB;8BAE/E,MAAClB,MAAM,CAACmB,OAAO;;sCACb,KAACvB,UAAU;4BAACwB,YAAY,EAAE,CAAC;sCAAGZ,MAAM,CAACa,WAAW,IAAItB,yBAAyB;0BAAc;sCAC3F,MAACL,SAAS;;8CACR,KAACC,gBAAgB;oCACf2B,OAAO,gBACL,KAAC7B,QAAQ;wCACP8B,QAAQ,EAAE,CAACzB,mBAAmB,CAACa,SAAS,CAAC;wCACzCa,OAAO,EAAErB,oBAAoB,IAAIL,mBAAmB,CAACa,SAAS,CAAC;wCAC/Dc,QAAQ,EAAE,CAACC,CAAsC,GAAKtB,uBAAuB,CAACsB,CAAC,CAACC,MAAM,CAACH,OAAO,CAAC;sCAC/F;oCAEJI,KAAK,EAAEd,iBAAiB;kCACxB;8CACF,KAACnB,gBAAgB;oCACf2B,OAAO,gBACL,KAAC7B,QAAQ;wCACP+B,OAAO,EAAEnB,oBAAoB;wCAC7BoB,QAAQ,EAAE,CAACC,CAAsC,GAAKpB,uBAAuB,CAACoB,CAAC,CAACC,MAAM,CAACH,OAAO,CAAC;sCAC/F;oCAEJI,KAAK,EAAC,8CAA8C;kCACpD;;0BACQ;;kBACG;8BAEjB,MAAC5B,MAAM,CAAC6B,OAAO;;sCACb,KAAC7B,MAAM,CAAC8B,aAAa;4BACnBC,OAAO,EAAE,IAAM;gCACb,OAAOvB,MAAM,CAACwB,aAAa,CAAC7B,oBAAoB,EAAEE,oBAAoB,CAAC,CAAC;4BAC1E,CAAC;sCACF,cAED;0BAAuB;sCACvB,KAACL,MAAM,CAACiC,eAAe;4BAACF,OAAO,EAAE,IAAMvB,MAAM,CAACU,QAAQ,EAAE;sCAAE,QAAM;0BAAyB;;kBAC1E;;UAChB,AACJ;MACM,CACT;AACJ,CAAC,CAAC"}

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

@@ -0,0 +1,2 @@
+export * from './SaveChangesConfirmationDialog';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/index.ts"],"names":[],"mappings":"AAaA,cAAc,iCAAiC,CAAC"}

package/dist/{stories/decorators/WithQueryParams.js → components/SaveChangesConfirmationDialog/index.js}

@@ -10,14 +10,6 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx } from "react/jsx-runtime";
-import { WindowHistoryAdapter } from 'use-query-params/adapters/window';
-import { QueryParamProvider } from 'use-query-params';
-export const WithQueryParams = (Story)=>{
-    return /*#__PURE__*/ _jsx(QueryParamProvider, {
-        adapter: WindowHistoryAdapter,
-        children: /*#__PURE__*/ _jsx(Story, {})
-    });
-};
+export * from './SaveChangesConfirmationDialog';
 
-//# sourceMappingURL=WithQueryParams.js.map
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/SaveChangesConfirmationDialog/index.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\nexport * from './SaveChangesConfirmationDialog';\n"],"names":[],"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,cAAc,iCAAiC,CAAC"}

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ButtonProps } from '@mui/material';
+import { DashboardResource } from '@perses-dev/core';
+export interface SaveDashboardButtonProps extends Pick<ButtonProps, 'fullWidth'> {
+    onSave?: (entity: DashboardResource) => Promise<DashboardResource>;
+    isDisabled: boolean;
+    variant?: 'contained' | 'text' | 'outlined';
+}
+export declare const SaveDashboardButton: ({ onSave, isDisabled, variant }: SaveDashboardButtonProps) => JSX.Element;
+//# sourceMappingURL=SaveDashboardButton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SaveDashboardButton.d.ts","sourceRoot":"","sources":["../../../src/components/SaveDashboardButton/SaveDashboardButton.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAU,WAAW,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAI1E,MAAM,WAAW,wBAAyB,SAAQ,IAAI,CAAC,WAAW,EAAE,WAAW,CAAC;IAC9E,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACnE,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,CAAC,EAAE,WAAW,GAAG,MAAM,GAAG,UAAU,CAAC;CAC7C;AAED,eAAO,MAAM,mBAAmB,oCAAmD,wBAAwB,gBAyD1G,CAAC"}

package/dist/components/SaveDashboardButton/SaveDashboardButton.js

@@ -0,0 +1,72 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Button } from '@mui/material';
+import { isRelativeTimeRange } from '@perses-dev/core';
+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 { getSavedVariablesStatus , setVariableDefaultValues  } = useTemplateVariableActions();
+    const isSavedVariableModified = getSavedVariablesStatus();
+    const { timeRange  } = useTimeRange();
+    const { setEditMode  } = useEditMode();
+    const { openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  } = useSaveChangesConfirmationDialog();
+    const onSaveButtonClick = ()=>{
+        const isSavedDurationModified = isRelativeTimeRange(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
+        // Save dashboard if active timeRange from plugin-system is relative and different than currently saved
+        if (isSavedDurationModified || isSavedVariableModified) {
+            openSaveChangesConfirmationDialog({
+                onSaveChanges: (saveDefaultTimeRange, saveDefaultVariables)=>{
+                    if (isRelativeTimeRange(timeRange) && saveDefaultTimeRange === true) {
+                        dashboard.spec.duration = timeRange.pastDuration;
+                    }
+                    if (saveDefaultVariables === true) {
+                        const variables = setVariableDefaultValues();
+                        dashboard.spec.variables = variables;
+                    }
+                    saveDashboard();
+                },
+                onCancel: ()=>{
+                    closeSaveChangesConfirmationDialog();
+                }
+            });
+        } else {
+            saveDashboard();
+        }
+    };
+    const saveDashboard = ()=>{
+        if (onSave !== undefined) {
+            setSavingDashboard(true);
+            onSave(dashboard).then(()=>{
+                setSavingDashboard(false);
+                closeSaveChangesConfirmationDialog();
+                setEditMode(false);
+            }).catch(()=>{
+                setSavingDashboard(false);
+            });
+        } else {
+            setEditMode(false);
+        }
+    };
+    return /*#__PURE__*/ _jsx(Button, {
+        variant: variant,
+        onClick: onSaveButtonClick,
+        disabled: isDisabled || isSavingDashboard,
+        children: "Save"
+    });
+};
+
+//# sourceMappingURL=SaveDashboardButton.js.map