@perses-dev/dashboards 0.42.0 → 0.43.0-rc0

package/dist/components/AddPanelButton/AddPanelButton.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Button } from '@mui/material';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { InfoTooltip } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboardActions } from '../../context';
 export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Panel' , fullWidth  })=>{
     const { openAddPanel  } = useDashboardActions();
@@ -27,10 +27,7 @@ export const AddPanelButton = ({ variant ='text' , color ='primary' , label ='Pa
             variant: variant,
             color: color,
             fullWidth: fullWidth,
-            sx: {
-                whiteSpace: 'nowrap',
-                minWidth: 'auto'
-            },
+            sx: editButtonStyle,
             children: label
         })
     });

package/dist/components/AddPanelButton/AddPanelButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx","whiteSpace","minWidth"],"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,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAU,OAAM,EAChBC,OAAQ,UAAS,EACjBC,OAAQ,QAAO,EACfC,UAAS,EACW;IACpB,MAAM,EAAEC,aAAY,EAAE,GAAGN;IAEzB,qBACE,KAACF;QAAYS,aAAaR,aAAaS;kBACrC,cAAA,KAACZ;YACCa,yBAAW,KAACZ;YACZa,SAASJ;YACTK,cAAYZ,aAAaS;YACzBN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAI;gBAAEC,YAAY;gBAAUC,UAAU;YAAO;sBAE5CV;;;AAIT,EAAE"}
+{"version":3,"sources":["../../../src/components/AddPanelButton/AddPanelButton.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 { Button, ButtonProps } from '@mui/material';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboardActions } from '../../context';\n\nexport interface AddPanelButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport const AddPanelButton = ({\n  variant = 'text',\n  color = 'primary',\n  label = 'Panel',\n  fullWidth,\n}: AddPanelButtonProps) => {\n  const { openAddPanel } = useDashboardActions();\n\n  return (\n    <InfoTooltip description={TOOLTIP_TEXT.addPanel}>\n      <Button\n        startIcon={<AddPanelIcon />}\n        onClick={openAddPanel}\n        aria-label={TOOLTIP_TEXT.addPanel}\n        variant={variant}\n        color={color}\n        fullWidth={fullWidth}\n        sx={editButtonStyle}\n      >\n        {label}\n      </Button>\n    </InfoTooltip>\n  );\n};\n"],"names":["Button","AddPanelIcon","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useDashboardActions","AddPanelButton","variant","color","label","fullWidth","openAddPanel","description","addPanel","startIcon","onClick","aria-label","sx"],"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,SAASA,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,kBAAkB,sCAAsC;AAC/D,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,mBAAmB,QAAQ,gBAAgB;AAmBpD,OAAO,MAAMC,iBAAiB,CAAC,EAC7BC,SAAU,OAAM,EAChBC,OAAQ,UAAS,EACjBC,OAAQ,QAAO,EACfC,UAAS,EACW;IACpB,MAAM,EAAEC,aAAY,EAAE,GAAGN;IAEzB,qBACE,KAACH;QAAYU,aAAaT,aAAaU;kBACrC,cAAA,KAACb;YACCc,yBAAW,KAACb;YACZc,SAASJ;YACTK,cAAYb,aAAaU;YACzBN,SAASA;YACTC,OAAOA;YACPE,WAAWA;YACXO,IAAIb;sBAEHK;;;AAIT,EAAE"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA2B,OAAO,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAM1F,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAgCxE"}
+{"version":3,"file":"DashboardStickyToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.tsx"],"names":[],"mappings":";AAcA,OAAO,EAKL,OAAO,EACP,KAAK,EAIN,MAAM,eAAe,CAAC;AAMvB,UAAU,2BAA2B;IACnC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,sBAAsB,CAAC,KAAK,EAAE,2BAA2B,eAuExE"}

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
-import { AppBar, Box, IconButton, useScrollTrigger } from '@mui/material';
+import { AppBar, Box, IconButton, Stack, useMediaQuery, useScrollTrigger, useTheme } from '@mui/material';
 import PinOutline from 'mdi-material-ui/PinOutline';
 import PinOffOutline from 'mdi-material-ui/PinOffOutline';
 import { TemplateVariableList } from '../Variables';
@@ -23,6 +23,7 @@ export function DashboardStickyToolbar(props) {
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
+    const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     return(// marginBottom={-1} counteracts the marginBottom={1} on every variable input.
     // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.
     /*#__PURE__*/ _jsx(Box, {
@@ -39,24 +40,52 @@ export function DashboardStickyToolbar(props) {
             children: /*#__PURE__*/ _jsxs(Box, {
                 display: "flex",
                 justifyContent: "space-between",
+                sx: {
+                    flexDirection: isBiggerThanMd ? 'row' : 'column'
+                },
                 children: [
                     /*#__PURE__*/ _jsxs(Box, {
                         display: "flex",
-                        flexWrap: "wrap",
-                        alignItems: "start",
-                        mt: isSticky ? 1.5 : 0,
-                        ml: isSticky ? 2 : 0,
+                        flexWrap: !isSticky && isBiggerThanMd ? 'wrap' : 'nowrap',
+                        maxWidth: isSticky || !isBiggerThanMd ? '100vw' : '100%',
+                        maxHeight: "150px" // Limit the vertical space used to ~3 rows of variables
+                        ,
+                        pt: 1,
+                        pl: isSticky ? 1 : 0,
+                        mt: isSticky && isBiggerThanMd ? 0.5 : 0,
+                        ml: isSticky && isBiggerThanMd ? 0.5 : 0,
+                        sx: {
+                            overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',
+                            // Firefox:
+                            scrollbarWidth: 'thin',
+                            // Safari and Chrome:
+                            '&::-webkit-scrollbar': {
+                                height: '8px',
+                                backgroundColor: (theme)=>theme.palette.grey['300']
+                            },
+                            '&::-webkit-scrollbar-thumb': {
+                                background: (theme)=>theme.palette.grey['600']
+                            }
+                        },
+                        gap: 1,
                         children: [
                             /*#__PURE__*/ _jsx(TemplateVariableList, {}),
                             props.initialVariableIsSticky && /*#__PURE__*/ _jsx(IconButton, {
+                                style: {
+                                    width: 'fit-content',
+                                    height: 'fit-content'
+                                },
                                 onClick: ()=>setIsPin(!isPin),
                                 children: isPin ? /*#__PURE__*/ _jsx(PinOutline, {}) : /*#__PURE__*/ _jsx(PinOffOutline, {})
                             })
                         ]
                     }),
-                    isSticky && /*#__PURE__*/ _jsx(Box, {
-                        mt: 1.5,
-                        mr: 2,
+                    isSticky && /*#__PURE__*/ _jsx(Stack, {
+                        m: isBiggerThanMd ? 1.5 : 1,
+                        mt: isBiggerThanMd ? 1.5 : 0,
+                        ml: isBiggerThanMd ? 1.5 : 'auto',
+                        direction: "row",
+                        justifyContent: "end",
                         children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
                     })
                 ]

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 { AppBar, Box, IconButton, SxProps, Theme, useScrollTrigger } from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box display=\"flex\" justifyContent=\"space-between\">\n          <Box display=\"flex\" flexWrap=\"wrap\" alignItems=\"start\" mt={isSticky ? 1.5 : 0} ml={isSticky ? 2 : 0}>\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Box mt={1.5} mr={2}>\n              <TimeRangeControls></TimeRangeControls>\n            </Box>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexWrap","alignItems","mt","ml","onClick","mr"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,gBAAgB;AAC1F,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,uBAAuB;AAOzD,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGZ,SAASU,MAAMG;IAEzC,MAAMC,gBAAgBV,iBAAiB;QAAEW,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,2BAA2BF;IAEnE,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACT;QAAIe,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACjB;YACCkB,OAAM;YACNC,UAAUJ,WAAW,UAAU;YAC/BK,WAAWL,WAAW,IAAI;YAC1BM,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGb,MAAMY,EAAE;YAAC;sBAE9C,cAAA,MAACpB;gBAAIsB,SAAQ;gBAAOC,gBAAe;;kCACjC,MAACvB;wBAAIsB,SAAQ;wBAAOE,UAAS;wBAAOC,YAAW;wBAAQC,IAAIZ,WAAW,MAAM;wBAAGa,IAAIb,WAAW,IAAI;;0CAChG,KAACT;4BACAG,MAAMG,yCACL,KAACV;gCAAW2B,SAAS,IAAMlB,SAAS,CAACD;0CAASA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAG3EU,0BACC,KAACd;wBAAI0B,IAAI;wBAAKG,IAAI;kCAChB,cAAA,KAACvB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 {\n  AppBar,\n  Box,\n  IconButton,\n  Stack,\n  SxProps,\n  Theme,\n  useMediaQuery,\n  useScrollTrigger,\n  useTheme,\n} from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box\n          display=\"flex\"\n          justifyContent=\"space-between\"\n          sx={{\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n          }}\n        >\n          <Box\n            display=\"flex\"\n            flexWrap={!isSticky && isBiggerThanMd ? 'wrap' : 'nowrap'}\n            maxWidth={isSticky || !isBiggerThanMd ? '100vw' : '100%'}\n            maxHeight=\"150px\" // Limit the vertical space used to ~3 rows of variables\n            pt={1}\n            pl={isSticky ? 1 : 0}\n            mt={isSticky && isBiggerThanMd ? 0.5 : 0}\n            ml={isSticky && isBiggerThanMd ? 0.5 : 0}\n            sx={{\n              overflowX: !isSticky && isBiggerThanMd ? 'hidden' : 'auto',\n              // Firefox:\n              scrollbarWidth: 'thin',\n              // Safari and Chrome:\n              '&::-webkit-scrollbar': {\n                height: '8px',\n                backgroundColor: (theme) => theme.palette.grey['300'],\n              },\n              '&::-webkit-scrollbar-thumb': {\n                background: (theme) => theme.palette.grey['600'],\n              },\n            }}\n            gap={1}\n          >\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton style={{ width: 'fit-content', height: 'fit-content' }} onClick={() => setIsPin(!isPin)}>\n                {isPin ? <PinOutline /> : <PinOffOutline />}\n              </IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Stack\n              m={isBiggerThanMd ? 1.5 : 1}\n              mt={isBiggerThanMd ? 1.5 : 0}\n              ml={isBiggerThanMd ? 1.5 : 'auto'}\n              direction=\"row\"\n              justifyContent=\"end\"\n            >\n              <TimeRangeControls></TimeRangeControls>\n            </Stack>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","Stack","useMediaQuery","useScrollTrigger","useTheme","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","isBiggerThanMd","breakpoints","up","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexDirection","flexWrap","maxWidth","maxHeight","pt","pl","mt","ml","overflowX","scrollbarWidth","height","theme","palette","grey","background","gap","style","width","onClick","m","direction"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SACEC,MAAM,EACNC,GAAG,EACHC,UAAU,EACVC,KAAK,EAGLC,aAAa,EACbC,gBAAgB,EAChBC,QAAQ,QACH,gBAAgB;AACvB,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,uBAAuB;AAOzD,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGf,SAASa,MAAMG;IAEzC,MAAMC,gBAAgBX,iBAAiB;QAAEY,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,2BAA2BF;IAEnE,MAAMM,iBAAiBf,cAAcE,WAAWc,YAAYC,GAAG;IAE/D,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACpB;QAAIqB,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACvB;YACCwB,OAAM;YACNC,UAAUP,WAAW,UAAU;YAC/BQ,WAAWR,WAAW,IAAI;YAC1BS,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGhB,MAAMe,EAAE;YAAC;sBAE9C,cAAA,MAAC1B;gBACC4B,SAAQ;gBACRC,gBAAe;gBACfH,IAAI;oBACFI,eAAeZ,iBAAiB,QAAQ;gBAC1C;;kCAEA,MAAClB;wBACC4B,SAAQ;wBACRG,UAAU,CAACd,YAAYC,iBAAiB,SAAS;wBACjDc,UAAUf,YAAY,CAACC,iBAAiB,UAAU;wBAClDe,WAAU,QAAQ,wDAAwD;;wBAC1EC,IAAI;wBACJC,IAAIlB,WAAW,IAAI;wBACnBmB,IAAInB,YAAYC,iBAAiB,MAAM;wBACvCmB,IAAIpB,YAAYC,iBAAiB,MAAM;wBACvCQ,IAAI;4BACFY,WAAW,CAACrB,YAAYC,iBAAiB,WAAW;4BACpD,WAAW;4BACXqB,gBAAgB;4BAChB,qBAAqB;4BACrB,wBAAwB;gCACtBC,QAAQ;gCACRb,iBAAiB,CAACc,QAAUA,MAAMC,QAAQC,IAAI,CAAC,MAAM;4BACvD;4BACA,8BAA8B;gCAC5BC,YAAY,CAACH,QAAUA,MAAMC,QAAQC,IAAI,CAAC,MAAM;4BAClD;wBACF;wBACAE,KAAK;;0CAEL,KAACrC;4BACAG,MAAMG,yCACL,KAACb;gCAAW6C,OAAO;oCAAEC,OAAO;oCAAeP,QAAQ;gCAAc;gCAAGQ,SAAS,IAAMnC,SAAS,CAACD;0CAC1FA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAIhCU,0BACC,KAACf;wBACC+C,GAAG/B,iBAAiB,MAAM;wBAC1BkB,IAAIlB,iBAAiB,MAAM;wBAC3BmB,IAAInB,iBAAiB,MAAM;wBAC3BgC,WAAU;wBACVrB,gBAAe;kCAEf,cAAA,KAACpB;;;;;;AAOf"}

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;AAY7D,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,gBAiG5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAY7D,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,gBA8F5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -28,15 +28,14 @@ export const DashboardToolbar = (props)=>{
     const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , isReadonly , onEditButtonClick , onCancelButtonClick , onSave  } = props;
     const { isEditMode  } = useEditMode();
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
-    const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));
+    const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));
     const dashboardTitle = dashboardTitleComponent ? dashboardTitleComponent : /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
         children: dashboardName
     });
     const testId = 'dashboard-toolbar';
     return /*#__PURE__*/ _jsx(_Fragment, {
-        children: isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
-            spacing: 1,
+        children: /*#__PURE__*/ _jsxs(Stack, {
             "data-testid": testId,
             children: [
                 /*#__PURE__*/ _jsxs(Box, {
@@ -44,11 +43,11 @@ export const DashboardToolbar = (props)=>{
                     py: 1.5,
                     display: "flex",
                     sx: {
-                        backgroundColor: (theme)=>theme.palette.primary.main + '30'
+                        backgroundColor: (theme)=>theme.palette.primary.main + (isEditMode ? '30' : '0')
                     },
                     children: [
                         dashboardTitle,
-                        /*#__PURE__*/ _jsxs(Stack, {
+                        isEditMode ? /*#__PURE__*/ _jsxs(Stack, {
                             direction: "row",
                             gap: 1,
                             ml: "auto",
@@ -61,6 +60,18 @@ export const DashboardToolbar = (props)=>{
                                     },
                                     children: "Dashboard managed via code only. Download JSON and commit changes to save."
                                 }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 0.5,
+                                    ml: 1,
+                                    whiteSpace: "nowrap",
+                                    children: [
+                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
+                                        /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
+                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
+                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
+                                    ]
+                                }),
                                 /*#__PURE__*/ _jsx(SaveDashboardButton, {
                                     onSave: onSave,
                                     isDisabled: isReadonly
@@ -71,6 +82,15 @@ export const DashboardToolbar = (props)=>{
                                     children: "Cancel"
                                 })
                             ]
+                        }) : /*#__PURE__*/ _jsx(_Fragment, {
+                            children: isBiggerThanSm && /*#__PURE__*/ _jsx(Stack, {
+                                direction: "row",
+                                gap: 1,
+                                ml: "auto",
+                                children: /*#__PURE__*/ _jsx(EditButton, {
+                                    onClick: onEditButtonClick
+                                })
+                            })
                         })
                     ]
                 }),
@@ -79,89 +99,44 @@ export const DashboardToolbar = (props)=>{
                         display: 'flex',
                         width: '100%',
                         alignItems: 'start',
-                        padding: (theme)=>theme.spacing(1, 2, 0, 2)
+                        padding: (theme)=>theme.spacing(1, 2, 0, 2),
+                        flexDirection: isBiggerThanMd ? 'row' : 'column',
+                        flexWrap: 'nowrap',
+                        gap: 1
                     },
                     children: [
-                        /*#__PURE__*/ _jsx(ErrorBoundary, {
-                            FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
-                                initialVariableIsSticky: initialVariableIsSticky,
-                                sx: {
-                                    backgroundColor: ({ palette  })=>palette.background.default
-                                }
+                        /*#__PURE__*/ _jsx(Box, {
+                            width: "100%",
+                            children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                FallbackComponent: ErrorAlert,
+                                children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
+                                    initialVariableIsSticky: initialVariableIsSticky,
+                                    sx: {
+                                        backgroundColor: ({ palette  })=>palette.background.default
+                                    }
+                                })
                             })
                         }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            ml: "auto",
+                        /*#__PURE__*/ _jsx(Stack, {
                             direction: "row",
-                            flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
+                            ml: "auto",
+                            flexWrap: "wrap",
                             justifyContent: "end",
-                            children: [
-                                /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    ml: 1,
-                                    whiteSpace: "nowrap",
-                                    children: [
-                                        /*#__PURE__*/ _jsx(EditVariablesButton, {}),
-                                        /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
-                                        /*#__PURE__*/ _jsx(AddPanelButton, {}),
-                                        /*#__PURE__*/ _jsx(AddGroupButton, {})
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(Stack, {
-                                    direction: "row",
-                                    spacing: 1,
-                                    ml: 1,
-                                    children: [
-                                        /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                        /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                        /*#__PURE__*/ _jsx(EditJsonButton, {})
-                                    ]
-                                })
-                            ]
-                        })
-                    ]
-                })
-            ]
-        }) : /*#__PURE__*/ _jsxs(Stack, {
-            gap: 1,
-            mx: 2,
-            mt: 1.5,
-            "data-testid": testId,
-            children: [
-                /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        width: '100%'
-                    },
-                    children: [
-                        dashboardTitle,
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ _jsx(TimeRangeControls, {}),
-                                /*#__PURE__*/ _jsx(DownloadButton, {}),
-                                isBiggerThanSm && /*#__PURE__*/ _jsx(EditButton, {
-                                    onClick: onEditButtonClick
-                                })
-                            ]
+                            children: /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                mt: 1,
+                                ml: 1,
+                                children: [
+                                    /*#__PURE__*/ _jsx(TimeRangeControls, {}),
+                                    /*#__PURE__*/ _jsx(DownloadButton, {}),
+                                    /*#__PURE__*/ _jsx(EditJsonButton, {
+                                        isReadonly: !isEditMode
+                                    })
+                                ]
+                            })
                         })
                     ]
-                }),
-                /*#__PURE__*/ _jsx(Box, {
-                    mt: 1,
-                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                        FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(DashboardStickyToolbar, {
-                            initialVariableIsSticky: initialVariableIsSticky,
-                            sx: {
-                                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 { EditDatasourcesButton } from '../Datasources';\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 px={2} py={1.5} display=\"flex\" sx={{ backgroundColor: (theme) => theme.palette.primary.main + '30' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" gap={1} ml=\"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, 0, 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} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <EditDatasourcesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <Stack direction=\"row\" spacing={1} ml={1}>\n                <TimeRangeControls />\n                <DownloadButton />\n                <EditJsonButton />\n              </Stack>\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack gap={1} mx={2} mt={1.5} 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 mt={1}>\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","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanLg","dashboardTitle","variant","testId","spacing","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","isDisabled","onClick","width","alignItems","FallbackComponent","background","default","flexWrap","justifyContent","whiteSpace","mx","mt","marginLeft"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { OnSaveDashboard, useEditMode } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { TimeRangeControls } from '../TimeRangeControls';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\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 isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\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      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"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              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                <EditVariablesButton />\n                <EditDatasourcesButton />\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\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 direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","useEditMode","AddPanelButton","AddGroupButton","DownloadButton","TimeRangeControls","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","backgroundColor","theme","palette","primary","main","direction","gap","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","alignItems","flexDirection","flexWrap","FallbackComponent","background","default","justifyContent","mt"],"mappings":"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"}

package/dist/components/Datasources/DatasourceEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAM1D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAyJA"}
+{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAU,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAM1D,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA0JA"}

package/dist/components/Datasources/DatasourceEditor.js

@@ -76,6 +76,7 @@ export function DatasourceEditor(props) {
             isDraft: true,
             onSave: (name, spec)=>{
                 setDatasources((draft)=>{
+                    delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed
                     draft[name] = spec;
                     setDatasourceEdit(null);
                 });

package/dist/components/Datasources/DatasourceEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm } from '@perses-dev/plugin-system';\nimport { useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}) {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<{ name: string; spec: DatasourceSpec } | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = () => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string) => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = () => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string) => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <DatasourceEditorForm\n          initialName={datasourceEdit.name}\n          initialSpec={datasourceEdit.spec}\n          initialAction={datasourceFormAction}\n          isDraft={true}\n          onSave={(name: string, spec: DatasourceSpec) => {\n            setDatasources((draft) => {\n              draft[name] = spec;\n              setDatasourceEdit(null);\n            });\n          }}\n          onClose={() => {\n            setDatasourceEdit(null);\n          }}\n        />\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialName","initialSpec","initialAction","isDraft","onSave","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceSpec } from '@perses-dev/core';\nimport { DatasourceEditorForm } from '@perses-dev/plugin-system';\nimport { useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}) {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<{ name: string; spec: DatasourceSpec } | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = () => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string) => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = () => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string) => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <DatasourceEditorForm\n          initialName={datasourceEdit.name}\n          initialSpec={datasourceEdit.spec}\n          initialAction={datasourceFormAction}\n          isDraft={true}\n          onSave={(name: string, spec: DatasourceSpec) => {\n            setDatasources((draft) => {\n              delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n              draft[name] = spec;\n              setDatasourceEdit(null);\n            });\n          }}\n          onClose={() => {\n            setDatasourceEdit(null);\n          }}\n        />\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialName","initialSpec","initialAction","isDraft","onSave","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}

package/dist/components/Datasources/EditDatasourcesButton.js

@@ -16,7 +16,7 @@ import { Button } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import { Drawer, InfoTooltip } from '@perses-dev/components';
 import { useDatasourceStore } from '@perses-dev/plugin-system';
-import { TOOLTIP_TEXT } from '../../constants';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
 import { useDashboard } from '../../context';
 import { DatasourceEditor } from './DatasourceEditor';
 export function EditDatasourcesButton() {
@@ -67,10 +67,7 @@ export function EditDatasourcesButton() {
                     "aria-label": TOOLTIP_TEXT.editDatasources,
                     variant: "text",
                     color: "primary",
-                    sx: {
-                        whiteSpace: 'nowrap',
-                        minWidth: 'auto'
-                    },
+                    sx: editButtonStyle,
                     children: "Datasources"
                 })
             }),

package/dist/components/Datasources/EditDatasourcesButton.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton() {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>) => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce((obj, key) => {\n        obj[key] = datasources[key] as DatasourceSpec;\n\n        return obj;\n      }, {} as Record<string, DatasourceSpec>);\n\n    setDashboard({\n      ...dashboard,\n      spec: {\n        ...dashboard.spec,\n        datasources: datasources,\n      },\n    });\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={{ whiteSpace: 'nowrap', minWidth: 'auto' }}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","whiteSpace","minWidth","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/EditDatasourcesButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Button } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/core';\nimport { useDatasourceStore } from '@perses-dev/plugin-system';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useDashboard } from '../../context';\nimport { DatasourceEditor } from './DatasourceEditor';\n\nexport function EditDatasourcesButton() {\n  const [isDatasourceEditorOpen, setIsDatasourceEditorOpen] = useState(false);\n  const { getLocalDatasources, setLocalDatasources, getSavedDatasources, setSavedDatasources } = useDatasourceStore();\n  const localDatasources: Record<string, DatasourceSpec> = getLocalDatasources();\n  const savedDatasources: Record<string, DatasourceSpec> = getSavedDatasources();\n  const { dashboard, setDashboard } = useDashboard();\n\n  const openDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(true);\n  };\n\n  const closeDatasourceEditor = () => {\n    setIsDatasourceEditorOpen(false);\n  };\n\n  const handleChangeDatasources = (datasources: Record<string, DatasourceSpec>) => {\n    // Calculates the new list of datasources that are allowed to be used.\n    const newSavedDatasources: Record<string, DatasourceSpec> = Object.keys(datasources)\n      .filter((key) => {\n        // Datasources are allowed to be used if a) they are direct, or b) they are proxied, and their\n        // proxy is the same as what we have saved.\n        const isDirect = 'directUrl' in (datasources[key]?.plugin?.spec ?? {});\n        const isSavedProxy =\n          !isDirect &&\n          !('directUrl' in (savedDatasources[key]?.plugin?.spec ?? {})) &&\n          datasources[key]?.plugin?.spec?.proxy === savedDatasources[key]?.plugin?.spec?.proxy;\n\n        return isDirect || isSavedProxy;\n      })\n      .reduce((obj, key) => {\n        obj[key] = datasources[key] as DatasourceSpec;\n\n        return obj;\n      }, {} as Record<string, DatasourceSpec>);\n\n    setDashboard({\n      ...dashboard,\n      spec: {\n        ...dashboard.spec,\n        datasources: datasources,\n      },\n    });\n    setSavedDatasources(newSavedDatasources);\n    setLocalDatasources(datasources);\n    setIsDatasourceEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editDatasources}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openDatasourceEditor}\n          aria-label={TOOLTIP_TEXT.editDatasources}\n          variant=\"text\"\n          color=\"primary\"\n          sx={editButtonStyle}\n        >\n          Datasources\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isDatasourceEditorOpen}\n        onClose={closeDatasourceEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"datasource-editor\"\n      >\n        <DatasourceEditor\n          datasources={localDatasources}\n          onCancel={closeDatasourceEditor}\n          onChange={handleChangeDatasources}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","useDatasourceStore","TOOLTIP_TEXT","editButtonStyle","useDashboard","DatasourceEditor","EditDatasourcesButton","isDatasourceEditorOpen","setIsDatasourceEditorOpen","getLocalDatasources","setLocalDatasources","getSavedDatasources","setSavedDatasources","localDatasources","savedDatasources","dashboard","setDashboard","openDatasourceEditor","closeDatasourceEditor","handleChangeDatasources","datasources","newSavedDatasources","Object","keys","filter","key","isDirect","plugin","spec","isSavedProxy","proxy","reduce","obj","description","editDatasources","startIcon","onClick","aria-label","variant","color","sx","isOpen","onClose","PaperProps","width","data-testid","onCancel","onChange"],"mappings":"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"}

package/dist/components/EditJsonButton/EditJsonButton.d.ts

@@ -1,3 +1,6 @@
 /// <reference types="react" />
-export declare const EditJsonButton: () => JSX.Element;
+export interface EditJsonButtonProps {
+    isReadonly: boolean;
+}
+export declare const EditJsonButton: (props: EditJsonButtonProps) => JSX.Element;
 //# sourceMappingURL=EditJsonButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditJsonButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}
+{"version":3,"file":"EditJsonButton.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonButton/EditJsonButton.tsx"],"names":[],"mappings":";AAmBA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;CACrB;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,gBAaxD,CAAC"}

package/dist/components/EditJsonButton/EditJsonButton.js

@@ -16,12 +16,14 @@ import { InfoTooltip } from '@perses-dev/components';
 import { TOOLTIP_TEXT } from '../../constants';
 import { ToolbarIconButton } from '../ToolbarIconButton';
 import { useEditJsonDialog } from '../../context';
-export const EditJsonButton = ()=>{
+export const EditJsonButton = (props)=>{
+    const { isReadonly  } = props;
     const { openEditJsonDialog  } = useEditJsonDialog();
+    const info = isReadonly ? TOOLTIP_TEXT.viewJson : TOOLTIP_TEXT.editJson;
     return /*#__PURE__*/ _jsx(InfoTooltip, {
-        description: TOOLTIP_TEXT.editJson,
+        description: info,
         children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
-            "aria-label": TOOLTIP_TEXT.editJson,
+            "aria-label": info,
             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 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,OAAOA,cAAc,6BAA6B;AAClD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,gBAAgB;AAElD,OAAO,MAAMC,iBAAiB;IAC5B,MAAM,EAAEC,mBAAkB,EAAE,GAAGF;IAC/B,qBACE,KAACH;QAAYM,aAAaL,aAAaM;kBACrC,cAAA,KAACL;YAAkBM,cAAYP,aAAaM;YAAUE,SAAQ;YAAWC,SAAS,IAAML;sBACtF,cAAA,KAACN;;;AAIT,EAAE"}
+{"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 interface EditJsonButtonProps {\n  isReadonly: boolean;\n}\n\nexport const EditJsonButton = (props: EditJsonButtonProps) => {\n  const { isReadonly } = props;\n  const { openEditJsonDialog } = useEditJsonDialog();\n\n  const info = isReadonly ? TOOLTIP_TEXT.viewJson : TOOLTIP_TEXT.editJson;\n\n  return (\n    <InfoTooltip description={info}>\n      <ToolbarIconButton aria-label={info} variant=\"outlined\" onClick={() => openEditJsonDialog()}>\n        <CodeIcon />\n      </ToolbarIconButton>\n    </InfoTooltip>\n  );\n};\n"],"names":["CodeIcon","InfoTooltip","TOOLTIP_TEXT","ToolbarIconButton","useEditJsonDialog","EditJsonButton","props","isReadonly","openEditJsonDialog","info","viewJson","editJson","description","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,OAAOA,cAAc,6BAA6B;AAClD,SAASC,WAAW,QAAQ,yBAAyB;AACrD,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,iBAAiB,QAAQ,uBAAuB;AACzD,SAASC,iBAAiB,QAAQ,gBAAgB;AAMlD,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,WAAU,EAAE,GAAGD;IACvB,MAAM,EAAEE,mBAAkB,EAAE,GAAGJ;IAE/B,MAAMK,OAAOF,aAAaL,aAAaQ,WAAWR,aAAaS;IAE/D,qBACE,KAACV;QAAYW,aAAaH;kBACxB,cAAA,KAACN;YAAkBU,cAAYJ;YAAMK,SAAQ;YAAWC,SAAS,IAAMP;sBACrE,cAAA,KAACR;;;AAIT,EAAE"}

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 export interface EditJsonDialogProps {
+    isReadonly: boolean;
     disableMetadataEdition?: boolean;
 }
 export declare const EditJsonDialog: (props: EditJsonDialogProps) => JSX.Element;

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":";AAoBA,MAAM,WAAW,mBAAmB;IAClC,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,gBAUxD,CAAC"}
+{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":";AAoBA,MAAM,WAAW,mBAAmB;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,gBAYxD,CAAC"}