@perses-dev/dashboards 0.13.0 → 0.15.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Box, BoxProps, Collapse, GlobalStyles, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { styles } from '../../css/styles';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps extends BoxProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId, ...others } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <>\n      <GlobalStyles styles={styles} />\n      <Box {...others} component=\"section\" sx={{ '& + &': { marginTop: (theme) => theme.spacing(1) } }}>\n        {groupDefinition.title !== undefined && (\n          <GridTitle\n            panelGroupId={panelGroupId}\n            title={groupDefinition.title}\n            collapse={\n              groupDefinition.isCollapsed === undefined\n                ? undefined\n                : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n            }\n          />\n        )}\n        <Collapse in={isOpen} unmountOnExit>\n          <ResponsiveGridLayout\n            className=\"layout\"\n            breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n            cols={{ sm: 24, xxs: 2 }}\n            rowHeight={30}\n            draggableHandle={'.drag-handle'}\n            resizeHandles={['se']}\n            isDraggable={isEditMode}\n            isResizable={isEditMode}\n            containerPadding={[0, 10]}\n            layouts={{ sm: groupDefinition.itemLayouts }}\n            onLayoutChange={updatePanelGroupLayouts}\n          >\n            {groupDefinition.itemLayouts.map(({ i }) => (\n              <div key={i}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n                </ErrorBoundary>\n              </div>\n            ))}\n          </ResponsiveGridLayout>\n        </Collapse>\n      </Box>\n    </>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Box","Collapse","GlobalStyles","useTheme","ErrorAlert","ErrorBoundary","styles","useEditMode","usePanelGroup","usePanelGroupActions","GridTitle","GridItemContent","ResponsiveGridLayout","GridLayout","props","panelGroupId","others","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","component","sx","marginTop","spacing","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false}>\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={{ sm: 24, xxs: 2 }}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          containerPadding={[0, 10]}\n          layouts={{ sm: groupDefinition.itemLayouts }}\n          onLayoutChange={updatePanelGroupLayouts}\n        >\n          {groupDefinition.itemLayouts.map(({ i }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }} />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GridTitle","GridItemContent","GridContainer","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","className","breakpoints","sm","values","xxs","cols","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","containerPadding","layouts","itemLayouts","onLayoutChange","map","i","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId"],"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":";AAsBA,OAAO,EAAqC,YAAY,EAAE,MAAM,eAAe,CAAC;AAEhF,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,eAyD9C"}
+{"version":3,"file":"GridTitle.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridTitle.tsx"],"names":[],"mappings":";AAsBA,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,eA0D9C"}

package/dist/components/GridLayout/GridTitle.js

@@ -20,14 +20,15 @@ import PencilIcon from 'mdi-material-ui/PencilOutline';
 import ArrowUpIcon from 'mdi-material-ui/ArrowUp';
 import ArrowDownIcon from 'mdi-material-ui/ArrowDown';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import { usePanelGroupActions, useEditMode } from '../../context';
+import { usePanelGroupActions, useEditMode, useDeletePanelGroupDialog } from '../../context';
 /**
  * Renders the title for a Grid section, optionally also supporting expanding
  * and collapsing
  */ export function GridTitle(props) {
     const { panelGroupId , title , collapse  } = props;
     const [isHovered, setIsHovered] = useState(false);
-    const { openAddPanel , openEditPanelGroup , deletePanelGroup , moveUp , moveDown  } = usePanelGroupActions(panelGroupId);
+    const { openAddPanel , openEditPanelGroup , moveUp , moveDown  } = usePanelGroupActions(panelGroupId);
+    const { openDeletePanelGroupDialog  } = useDeletePanelGroupDialog();
     const { isEditMode  } = useEditMode();
     const text = /*#__PURE__*/ _jsx(Typography, {
         variant: "h2",
@@ -71,7 +72,7 @@ import { usePanelGroupActions, useEditMode } from '../../context';
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {
                             "aria-label": "delete group",
-                            onClick: deletePanelGroup,
+                            onClick: ()=>openDeletePanelGroupDialog(panelGroupId),
                             children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                         }),
                         /*#__PURE__*/ _jsx(IconButton, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\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 { usePanelGroupActions, useEditMode, PanelGroupId } 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 [isHovered, setIsHovered] = useState(false);\n  const { openAddPanel, openEditPanelGroup, deletePanelGroup, moveUp, moveDown } = usePanelGroupActions(panelGroupId);\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: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton aria-label=\"add panel to group\" onClick={openAddPanel}>\n                <AddIcon />\n              </IconButton>\n              <IconButton aria-label=\"edit group\" onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label=\"delete group\" onClick={deletePanelGroup}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group down\" disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group up\" disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\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":["useState","Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","GridTitle","props","panelGroupId","title","collapse","isHovered","setIsHovered","openAddPanel","openEditPanelGroup","deletePanelGroup","moveUp","moveDown","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridTitle.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Box, IconButton, Stack, Typography } from '@mui/material';\nimport ExpandedIcon from 'mdi-material-ui/ChevronUp';\nimport CollapsedIcon from 'mdi-material-ui/ChevronDown';\nimport AddIcon from 'mdi-material-ui/Plus';\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 { 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 [isHovered, setIsHovered] = useState(false);\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: (theme) => theme.palette.background.default,\n      }}\n      onMouseEnter={() => setIsHovered(true)}\n      onMouseLeave={() => setIsHovered(false)}\n    >\n      {collapse ? (\n        <>\n          <IconButton onClick={collapse.onToggleOpen}>\n            {collapse.isOpen ? <ExpandedIcon /> : <CollapsedIcon />}\n          </IconButton>\n          {text}\n          {isEditMode && isHovered && (\n            <Stack direction=\"row\" sx={{ marginLeft: 'auto' }}>\n              <IconButton aria-label=\"add panel to group\" onClick={openAddPanel}>\n                <AddIcon />\n              </IconButton>\n              <IconButton aria-label=\"edit group\" onClick={openEditPanelGroup}>\n                <PencilIcon />\n              </IconButton>\n              <IconButton aria-label=\"delete group\" onClick={() => openDeletePanelGroupDialog(panelGroupId)}>\n                <DeleteIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group down\" disabled={moveDown === undefined} onClick={moveDown}>\n                <ArrowDownIcon />\n              </IconButton>\n              <IconButton aria-label=\"move group up\" disabled={moveUp === undefined} onClick={moveUp}>\n                <ArrowUpIcon />\n              </IconButton>\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":["useState","Box","IconButton","Stack","Typography","ExpandedIcon","CollapsedIcon","AddIcon","PencilIcon","ArrowUpIcon","ArrowDownIcon","DeleteIcon","usePanelGroupActions","useEditMode","useDeletePanelGroupDialog","GridTitle","props","panelGroupId","title","collapse","isHovered","setIsHovered","openAddPanel","openEditPanelGroup","moveUp","moveDown","openDeletePanelGroupDialog","isEditMode","text","variant","sx","marginLeft","undefined","display","justifyContent","alignItems","padding","theme","spacing","backgroundColor","palette","background","default","onMouseEnter","onMouseLeave","onClick","onToggleOpen","isOpen","direction","aria-label","disabled"],"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,GAAG,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,QAAQ,eAAe,CAAC;AACnE,OAAOC,YAAY,MAAM,2BAA2B,CAAC;AACrD,OAAOC,aAAa,MAAM,6BAA6B,CAAC;AACxD,OAAOC,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,OAAOC,WAAW,MAAM,yBAAyB,CAAC;AAClD,OAAOC,aAAa,MAAM,2BAA2B,CAAC;AACtD,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,oBAAoB,EAAEC,WAAW,EAAgBC,yBAAyB,QAAQ,eAAe,CAAC;AAW3G;;;CAGC,GACD,OAAO,SAASC,SAAS,CAACC,KAAqB,EAAE;IAC/C,MAAM,EAAEC,YAAY,CAAA,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAEhD,MAAM,CAACI,SAAS,EAAEC,YAAY,CAAC,GAAGrB,QAAQ,CAAC,KAAK,CAAC,AAAC;IAClD,MAAM,EAAEsB,YAAY,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,MAAM,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGb,oBAAoB,CAACK,YAAY,CAAC,AAAC;IAClG,MAAM,EAAES,0BAA0B,CAAA,EAAE,GAAGZ,yBAAyB,EAAE,AAAC;IACnE,MAAM,EAAEa,UAAU,CAAA,EAAE,GAAGd,WAAW,EAAE,AAAC;IAErC,MAAMe,IAAI,iBACR,KAACxB,UAAU;QAACyB,OAAO,EAAC,IAAI;QAACC,EAAE,EAAE;YAAEC,UAAU,EAAEZ,QAAQ,KAAKa,SAAS,GAAG,CAAC,GAAGA,SAAS;SAAE;kBAChFd,KAAK;MACK,AACd,AAAC;IAEF,qBACE,KAACjB,GAAG;QACF6B,EAAE,EAAE;YACFG,OAAO,EAAE,MAAM;YACfC,cAAc,EAAE,OAAO;YACvBC,UAAU,EAAE,QAAQ;YACpBC,OAAO,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;YACpCC,eAAe,EAAE,CAACF,KAAK,GAAKA,KAAK,CAACG,OAAO,CAACC,UAAU,CAACC,OAAO;SAC7D;QACDC,YAAY,EAAE,IAAMtB,YAAY,CAAC,IAAI,CAAC;QACtCuB,YAAY,EAAE,IAAMvB,YAAY,CAAC,KAAK,CAAC;kBAEtCF,QAAQ,iBACP;;8BACE,KAACjB,UAAU;oBAAC2C,OAAO,EAAE1B,QAAQ,CAAC2B,YAAY;8BACvC3B,QAAQ,CAAC4B,MAAM,iBAAG,KAAC1C,YAAY,KAAG,iBAAG,KAACC,aAAa,KAAG;kBAC5C;gBACZsB,IAAI;gBACJD,UAAU,IAAIP,SAAS,kBACtB,MAACjB,KAAK;oBAAC6C,SAAS,EAAC,KAAK;oBAAClB,EAAE,EAAE;wBAAEC,UAAU,EAAE,MAAM;qBAAE;;sCAC/C,KAAC7B,UAAU;4BAAC+C,YAAU,EAAC,oBAAoB;4BAACJ,OAAO,EAAEvB,YAAY;sCAC/D,cAAA,KAACf,OAAO,KAAG;0BACA;sCACb,KAACL,UAAU;4BAAC+C,YAAU,EAAC,YAAY;4BAACJ,OAAO,EAAEtB,kBAAkB;sCAC7D,cAAA,KAACf,UAAU,KAAG;0BACH;sCACb,KAACN,UAAU;4BAAC+C,YAAU,EAAC,cAAc;4BAACJ,OAAO,EAAE,IAAMnB,0BAA0B,CAACT,YAAY,CAAC;sCAC3F,cAAA,KAACN,UAAU,KAAG;0BACH;sCACb,KAACT,UAAU;4BAAC+C,YAAU,EAAC,iBAAiB;4BAACC,QAAQ,EAAEzB,QAAQ,KAAKO,SAAS;4BAAEa,OAAO,EAAEpB,QAAQ;sCAC1F,cAAA,KAACf,aAAa,KAAG;0BACN;sCACb,KAACR,UAAU;4BAAC+C,YAAU,EAAC,eAAe;4BAACC,QAAQ,EAAE1B,MAAM,KAAKQ,SAAS;4BAAEa,OAAO,EAAErB,MAAM;sCACpF,cAAA,KAACf,WAAW,KAAG;0BACJ;;kBACP,AACT;;UACA,GAEH,+DAA+D;QAC/DmB,IAAI,AACL;MACG,CACN;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AAOnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAiE7G"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":";AAaA,OAAO,EAA6C,eAAe,EAAU,MAAM,eAAe,CAAC;AAOnG,aAAK,YAAY,GAAG,UAAU,GAAG,QAAQ,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAE1E,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,eAAe,EAAE,YAAY,CAAC;IAC3E,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,SAAS,EAAE,OAAO,CAAC;CACpB;AAED,wBAAgB,WAAW,CAAC,EAAE,EAAE,EAAE,KAAK,EAAE,WAAW,EAAE,YAAY,EAAE,SAAS,EAAE,EAAE,EAAE,GAAG,IAAI,EAAE,EAAE,gBAAgB,eAkE7G"}

package/dist/components/Panel/PanelHeader.js

@@ -82,17 +82,17 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
         title: /*#__PURE__*/ _jsx(Typography, {
             id: titleElementId,
             variant: "subtitle1",
-            sx: {
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis'
-            },
             children: title
         }),
         action: action,
         sx: combineSx((theme)=>({
                 padding: theme.spacing(1),
-                borderBottom: `solid 1px ${theme.palette.divider}`
+                borderBottom: `solid 1px ${theme.palette.divider}`,
+                '.MuiCardHeader-content': {
+                    whiteSpace: 'nowrap',
+                    overflow: 'hidden',
+                    textOverflow: 'ellipsis'
+                }
             }), sx),
         ...rest
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  // Don't show any actions unless panel is hovered\n  let action: CardHeaderProps['action'] = undefined;\n  if (isHovered) {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      action = (\n        <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n          <HeaderIconButton aria-label=\"edit panel\" size=\"small\" onClick={editHandlers.onEditPanelClick}>\n            <PencilIcon />\n          </HeaderIconButton>\n          <HeaderIconButton aria-label=\"delete panel\" size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n            <DeleteIcon />\n          </HeaderIconButton>\n          <HeaderIconButton aria-label=\"drag handle\" size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n          </HeaderIconButton>\n        </Stack>\n      );\n    } else if (description !== undefined) {\n      // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n      action = (\n        <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n          <HeaderIconButton aria-label=\"Panel Description\">\n            <InformationOutlineIcon\n              aria-describedby=\"info-tooltip\"\n              aria-hidden={false}\n              sx={{ color: (theme) => theme.palette.grey[700] }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}\n        >\n          {title}\n        </Typography>\n      }\n      action={action}\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","alignItems","spacing","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","whiteSpace","overflow","textOverflow","padding","borderBottom","divider","borderRadius","shape"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,UAAU,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,MAAM,QAAQ,eAAe,CAAC;AACnG,SAASC,WAAW,EAAEC,gBAAgB,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAClF,OAAOC,sBAAsB,MAAM,oCAAoC,CAAC;AACxE,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,OAAOC,QAAQ,MAAM,8BAA8B,CAAC;AAepD,OAAO,SAASC,WAAW,CAAC,EAAEC,EAAE,CAAA,EAAEC,KAAK,CAAA,EAAEC,WAAW,CAAA,EAAEC,YAAY,CAAA,EAAEC,SAAS,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,IAAI,EAAoB,EAAE;IAC9G,MAAMC,cAAc,GAAG,CAAC,EAAEP,EAAE,CAAC,MAAM,CAAC,AAAC;IACrC,MAAMQ,oBAAoB,GAAG,CAAC,EAAER,EAAE,CAAC,YAAY,CAAC,AAAC;IAEjD,iDAAiD;IACjD,IAAIS,MAAM,GAA8BC,SAAS,AAAC;IAClD,IAAIN,SAAS,EAAE;QACb,IAAID,YAAY,KAAKO,SAAS,EAAE;YAC9B,gEAAgE;YAChED,MAAM,iBACJ,MAACpB,KAAK;gBAACsB,SAAS,EAAC,KAAK;gBAACC,UAAU,EAAC,QAAQ;gBAACC,OAAO,EAAE,GAAG;;kCACrD,KAACC,gBAAgB;wBAACC,YAAU,EAAC,YAAY;wBAACC,IAAI,EAAC,OAAO;wBAACC,OAAO,EAAEd,YAAY,CAACe,gBAAgB;kCAC3F,cAAA,KAACtB,UAAU,KAAG;sBACG;kCACnB,KAACkB,gBAAgB;wBAACC,YAAU,EAAC,cAAc;wBAACC,IAAI,EAAC,OAAO;wBAACC,OAAO,EAAEd,YAAY,CAACgB,kBAAkB;kCAC/F,cAAA,KAACtB,UAAU,KAAG;sBACG;kCACnB,KAACiB,gBAAgB;wBAACC,YAAU,EAAC,aAAa;wBAACC,IAAI,EAAC,OAAO;kCACrD,cAAA,KAAClB,QAAQ;4BAACsB,SAAS,EAAC,aAAa;4BAACf,EAAE,EAAE;gCAAEgB,MAAM,EAAE,MAAM;6BAAE;0BAAI;sBAC3C;;cACb,AACT,CAAC;QACJ,OAAO,IAAInB,WAAW,KAAKQ,SAAS,EAAE;YACpC,kHAAkH;YAClHD,MAAM,iBACJ,KAACjB,WAAW;gBAACQ,EAAE,EAAEQ,oBAAoB;gBAAEN,WAAW,EAAEA,WAAW;gBAAEoB,SAAS,EAAE7B,gBAAgB,CAAC8B,MAAM;0BACjG,cAAA,KAACT,gBAAgB;oBAACC,YAAU,EAAC,mBAAmB;8BAC9C,cAAA,KAACpB,sBAAsB;wBACrB6B,kBAAgB,EAAC,cAAc;wBAC/BC,aAAW,EAAE,KAAK;wBAClBpB,EAAE,EAAE;4BAAEqB,KAAK,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,IAAI,CAAC,GAAG,CAAC;yBAAE;sBACjD;kBACe;cACP,AACf,CAAC;QACJ,CAAC;IACH,CAAC;IAED,qBACE,KAAC1C,UAAU;QACTa,EAAE,EAAEA,EAAE;QACN8B,SAAS,EAAC,QAAQ;QAClBC,iBAAe,EAAExB,cAAc;QAC/BiB,kBAAgB,EAAEhB,oBAAoB;QACtCwB,iBAAiB;QACjB/B,KAAK,gBACH,KAACb,UAAU;YACTY,EAAE,EAAEO,cAAc;YAClB0B,OAAO,EAAC,WAAW;YACnB5B,EAAE,EAAE;gBAAE6B,UAAU,EAAE,QAAQ;gBAAEC,QAAQ,EAAE,QAAQ;gBAAEC,YAAY,EAAE,UAAU;aAAE;sBAEzEnC,KAAK;UACK;QAEfQ,MAAM,EAAEA,MAAM;QACdJ,EAAE,EAAEX,SAAS,CACX,CAACiC,KAAK,GAAM,CAAA;gBACVU,OAAO,EAAEV,KAAK,CAACd,OAAO,CAAC,CAAC,CAAC;gBACzByB,YAAY,EAAE,CAAC,UAAU,EAAEX,KAAK,CAACC,OAAO,CAACW,OAAO,CAAC,CAAC;aACnD,CAAA,AAAC,EACFlC,EAAE,CACH;QACA,GAAGC,IAAI;MACR,CACF;AACJ,CAAC;AAED,MAAMQ,gBAAgB,GAAGvB,MAAM,CAACD,UAAU,CAAC,CAAC,CAAC,EAAEqC,KAAK,CAAA,EAAE,GAAM,CAAA;QAC1Da,YAAY,EAAEb,KAAK,CAACc,KAAK,CAACD,YAAY;QACtCH,OAAO,EAAE,KAAK;KACf,CAAA,AAAC,CAAC,AAAC"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  // Don't show any actions unless panel is hovered\n  let action: CardHeaderProps['action'] = undefined;\n  if (isHovered) {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      action = (\n        <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n          <HeaderIconButton aria-label=\"edit panel\" size=\"small\" onClick={editHandlers.onEditPanelClick}>\n            <PencilIcon />\n          </HeaderIconButton>\n          <HeaderIconButton aria-label=\"delete panel\" size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n            <DeleteIcon />\n          </HeaderIconButton>\n          <HeaderIconButton aria-label=\"drag handle\" size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n          </HeaderIconButton>\n        </Stack>\n      );\n    } else if (description !== undefined) {\n      // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n      action = (\n        <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n          <HeaderIconButton aria-label=\"Panel Description\">\n            <InformationOutlineIcon\n              aria-describedby=\"info-tooltip\"\n              aria-hidden={false}\n              sx={{ color: (theme) => theme.palette.grey[700] }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography id={titleElementId} variant=\"subtitle1\">\n          {title}\n        </Typography>\n      }\n      action={action}\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","alignItems","spacing","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","padding","borderBottom","divider","whiteSpace","overflow","textOverflow","borderRadius","shape"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAuDvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBAsDvB,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -50,8 +50,7 @@ import { PanelEditorForm, panelEditorFormId } from './PanelEditorForm';
                     sx: {
                         display: 'flex',
                         alignItems: 'center',
-                        marginBottom: (theme)=>theme.spacing(2),
-                        paddingBottom: (theme)=>theme.spacing(2),
+                        padding: (theme)=>theme.spacing(1, 2),
                         borderBottom: (theme)=>`1px solid ${theme.palette.grey[100]}`
                     },
                     children: [

package/dist/components/PanelDrawer/PanelDrawer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              marginBottom: (theme) => theme.spacing(2),\n              paddingBottom: (theme) => theme.spacing(2),\n              borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","marginBottom","theme","spacing","paddingBottom","borderBottom","palette","grey","variant","mode","direction","marginLeft","type","form","onClick","onSubmit","initialValues"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Stack, Box, Button, Typography } from '@mui/material';\nimport { Drawer } from '@perses-dev/components';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm, panelEditorFormId, PanelEditorFormProps } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = () => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n  const handleClose = () => setIsClosing(true);\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out\n  const handleExited = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelEditorFormProps['onSubmit'] = (values) => {\n    // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n    if (panelEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClose} SlideProps={{ onExited: handleExited }}>\n      {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n      {panelEditor !== undefined && (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.grey[100]}`,\n            }}\n          >\n            <Typography variant=\"h2\">{panelEditor.mode} Panel</Typography>\n            <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n              {/* Using the 'form' attribute lets us have a submit button like this outside the form element */}\n              <Button type=\"submit\" variant=\"contained\" form={panelEditorFormId}>\n                {panelEditor.mode === 'Add' ? 'Add' : 'Apply'}\n              </Button>\n              <Button variant=\"outlined\" onClick={handleClose}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <PanelEditorForm onSubmit={handleSubmit} initialValues={panelEditor.initialValues} />\n        </>\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Stack","Box","Button","Typography","Drawer","usePanelEditor","PanelEditorForm","panelEditorFormId","PanelDrawer","panelEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","onClose","SlideProps","onExited","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","grey","variant","mode","direction","marginLeft","type","form","onClick","onSubmit","initialValues"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA4BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAqG1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAGvF,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,QAAQ,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC/C;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eA0G1D;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.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 { FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
+import { Box, FormControl, FormHelperText, Grid, InputLabel, MenuItem, Select, TextField, Typography } from '@mui/material';
 import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';
 import { useListPanelGroups } from '../../context';
@@ -59,16 +59,18 @@ export function PanelEditorForm(props) {
     };
     var _title, ref1;
     return(// Grid maxHeight allows user to scroll inside Drawer to see all content
-    /*#__PURE__*/ _jsx("form", {
+    /*#__PURE__*/ _jsx(Box, {
+        component: "form",
         id: panelEditorFormId,
         onSubmit: handleSubmit,
+        sx: {
+            flex: 1,
+            overflowY: 'scroll',
+            padding: (theme)=>theme.spacing(2)
+        },
         children: /*#__PURE__*/ _jsxs(Grid, {
             container: true,
             spacing: 2,
-            sx: {
-                overflowY: 'scroll',
-                maxHeight: '90vh'
-            },
             children: [
                 /*#__PURE__*/ _jsx(Grid, {
                     item: true,

package/dist/components/PanelDrawer/PanelEditorForm.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport {\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <form id={panelEditorFormId} onSubmit={handleSubmit}>\n      <Grid container spacing={2} sx={{ overflowY: 'scroll', maxHeight: '90vh' }}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </form>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","form","id","panelEditorFormId","container","spacing","sx","overflowY","maxHeight","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEventHandler, useState } from 'react';\nimport {\n  Box,\n  FormControl,\n  FormHelperText,\n  Grid,\n  InputLabel,\n  MenuItem,\n  Select,\n  SelectProps,\n  TextField,\n  Typography,\n} from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PluginKindSelect, PluginSpecEditor, usePluginEditor } from '@perses-dev/plugin-system';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';\nimport { PanelPreview } from './PanelPreview';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  onSubmit: (values: PanelEditorValues) => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps) {\n  const { initialValues, onSubmit } = props;\n\n  const panelGroups = useListPanelGroups();\n\n  const [name, setName] = useState(initialValues.name);\n  const [description, setDescription] = useState(initialValues.description);\n  const [groupId, setGroupId] = useState(initialValues.groupId);\n  const [kind, setKind] = useState(initialValues.kind);\n  const [spec, setSpec] = useState(initialValues.spec);\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginType: 'Panel',\n    value: { kind, spec },\n    onChange: (plugin) => {\n      setKind(plugin.kind);\n      setSpec(plugin.spec);\n    },\n  });\n\n  // Ignore string values (which would be an \"empty\" value from the Select) since we don't allow them to unset it\n  const handleGroupChange: SelectProps<number>['onChange'] = (e) => {\n    const { value } = e.target;\n    if (typeof value === 'string') {\n      return;\n    }\n    setGroupId(value);\n  };\n\n  const handleSubmit: FormEventHandler = (e) => {\n    e.preventDefault();\n    const values: PanelEditorValues = { name, description, groupId, kind, spec };\n    onSubmit(values);\n  };\n\n  return (\n    // Grid maxHeight allows user to scroll inside Drawer to see all content\n    <Box\n      component=\"form\"\n      id={panelEditorFormId}\n      onSubmit={handleSubmit}\n      sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}\n    >\n      <Grid container spacing={2}>\n        <Grid item xs={8}>\n          <TextField\n            required\n            fullWidth\n            label=\"Name\"\n            value={name}\n            variant=\"outlined\"\n            onChange={(e) => setName(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth>\n            <InputLabel id=\"select-group\">Group</InputLabel>\n            <Select required labelId=\"select-group\" label=\"Group\" value={groupId} onChange={handleGroupChange}>\n              {panelGroups.map((panelGroup, index) => (\n                <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                  {panelGroup.title ?? `Group ${index + 1}`}\n                </MenuItem>\n              ))}\n            </Select>\n          </FormControl>\n        </Grid>\n        <Grid item xs={8}>\n          <TextField\n            fullWidth\n            label=\"Description\"\n            value={description}\n            variant=\"outlined\"\n            onChange={(e) => setDescription(e.target.value)}\n          />\n        </Grid>\n        <Grid item xs={4}>\n          <FormControl fullWidth disabled={pluginEditor.isLoading} error={pluginEditor.error !== null}>\n            <InputLabel id=\"panel-type-label\">Type</InputLabel>\n            <PluginKindSelect\n              pluginType=\"Panel\"\n              required\n              labelId=\"panel-type-label\"\n              label=\"Type\"\n              value={pluginEditor.pendingKind ? pluginEditor.pendingKind : kind}\n              onChange={pluginEditor.onKindChange}\n            />\n          </FormControl>\n          <FormHelperText>{pluginEditor.error?.message ?? ''}</FormHelperText>\n        </Grid>\n        <Grid item xs={12}>\n          <Typography variant=\"h4\" marginBottom={1}>\n            Preview\n          </Typography>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelPreview kind={kind} name={name} description={description} spec={spec} groupId={groupId} />\n          </ErrorBoundary>\n        </Grid>\n        <Grid item xs={12}>\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PluginSpecEditor pluginType=\"Panel\" pluginKind={kind} value={spec} onChange={pluginEditor.onSpecChange} />\n          </ErrorBoundary>\n        </Grid>\n      </Grid>\n    </Box>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useState","Box","FormControl","FormHelperText","Grid","InputLabel","MenuItem","Select","TextField","Typography","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","useListPanelGroups","PanelPreview","PanelEditorForm","props","pluginEditor","initialValues","onSubmit","panelGroups","name","setName","description","setDescription","groupId","setGroupId","kind","setKind","spec","setSpec","pluginType","value","onChange","plugin","handleGroupChange","e","target","handleSubmit","preventDefault","values","panelGroup","component","id","panelEditorFormId","sx","flex","overflowY","padding","theme","spacing","container","item","xs","required","fullWidth","label","variant","labelId","map","index","title","disabled","isLoading","error","pendingKind","onKindChange","message","marginBottom","FallbackComponent","pluginKind","onSpecChange"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAyC,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAW3F,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBAsDhC"}
+{"version":3,"file":"TimeRangeControls.d.ts","sourceRoot":"","sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAKzE,eAAO,MAAM,YAAY,EAAE,UAAU,EAUpC,CAAC;AAEF,wBAAgB,iBAAiB,gBAchC"}

package/dist/components/TimeRangeControls/TimeRangeControls.js

@@ -10,13 +10,11 @@
 // 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 } from "react/jsx-runtime";
-import { useRef, useState, useMemo } from 'react';
-import { Box, FormControl, Popover, Stack } from '@mui/material';
-import { AbsoluteTimePicker, TimeRangeSelector } from '@perses-dev/components';
-import { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/core';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DateTimeRangePicker } from '@perses-dev/components';
+import { isDurationString } from '@perses-dev/core';
 import { useDashboardTimeRange } from '../../context';
-// TODO: add time shortcut if one does not match duration
+import { useDefaultTimeRange } from '../../context';
 export const TIME_OPTIONS = [
     {
         value: {
@@ -75,59 +73,22 @@ export const TIME_OPTIONS = [
 ];
 export function TimeRangeControls() {
     const { timeRange , setTimeRange  } = useDashboardTimeRange();
-    const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);
-    const anchorEl = useRef();
-    const convertedTimeRange = useMemo(()=>{
-        return isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;
-    }, [
-        timeRange
-    ]);
-    return /*#__PURE__*/ _jsxs(Stack, {
-        direction: "row",
-        spacing: 1,
-        children: [
-            /*#__PURE__*/ _jsx(Popover, {
-                anchorEl: anchorEl.current,
-                anchorOrigin: {
-                    vertical: 'bottom',
-                    horizontal: 'center'
+    const defaultTimeRange = useDefaultTimeRange();
+    // add time shortcut if one does not match duration from dashboard JSON
+    if (!TIME_OPTIONS.some((option)=>option.value.pastDuration === defaultTimeRange.pastDuration)) {
+        if (isDurationString(defaultTimeRange.pastDuration)) {
+            TIME_OPTIONS.push({
+                value: {
+                    pastDuration: defaultTimeRange.pastDuration
                 },
-                open: showCustomDateSelector,
-                onClose: ()=>setShowCustomDateSelector(false),
-                sx: (theme)=>({
-                        padding: theme.spacing(2)
-                    }),
-                children: /*#__PURE__*/ _jsx(AbsoluteTimePicker, {
-                    initialTimeRange: convertedTimeRange,
-                    onChange: (timeRange)=>{
-                        setTimeRange(timeRange);
-                        setShowCustomDateSelector(false);
-                    }
-                })
-            }),
-            /*#__PURE__*/ _jsx(FormControl, {
-                fullWidth: true,
-                children: /*#__PURE__*/ _jsx(Box, {
-                    ref: anchorEl,
-                    children: /*#__PURE__*/ _jsx(TimeRangeSelector, {
-                        timeOptions: TIME_OPTIONS,
-                        value: timeRange,
-                        onSelectChange: (event)=>{
-                            const duration = event.target.value;
-                            const relativeTimeInput = {
-                                pastDuration: duration,
-                                end: new Date()
-                            };
-                            setTimeRange(relativeTimeInput);
-                            setShowCustomDateSelector(false);
-                        },
-                        onCustomClick: ()=>{
-                            setShowCustomDateSelector(true);
-                        }
-                    })
-                })
-            })
-        ]
+                display: `Last ${defaultTimeRange.pastDuration}`
+            });
+        }
+    }
+    return /*#__PURE__*/ _jsx(DateTimeRangePicker, {
+        timeOptions: TIME_OPTIONS,
+        value: timeRange,
+        onChange: setTimeRange
     });
 }
 

package/dist/components/TimeRangeControls/TimeRangeControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useRef, useState, useMemo } from 'react';\nimport { Box, FormControl, Popover, Stack } from '@mui/material';\nimport { AbsoluteTimePicker, TimeRangeSelector, TimeOption } from '@perses-dev/components';\nimport {\n  DurationString,\n  RelativeTimeRange,\n  AbsoluteTimeRange,\n  isRelativeTimeRange,\n  toAbsoluteTimeRange,\n} from '@perses-dev/core';\nimport { useDashboardTimeRange } from '../../context';\n\n// TODO: add time shortcut if one does not match duration\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange } = useDashboardTimeRange();\n\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n  const anchorEl = useRef();\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n  }, [timeRange]);\n\n  return (\n    <Stack direction=\"row\" spacing={1}>\n      <Popover\n        anchorEl={anchorEl.current}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'center',\n        }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({\n          padding: theme.spacing(2),\n        })}\n      >\n        <AbsoluteTimePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(timeRange: AbsoluteTimeRange) => {\n            setTimeRange(timeRange);\n            setShowCustomDateSelector(false);\n          }}\n        />\n      </Popover>\n      <FormControl fullWidth>\n        <Box ref={anchorEl}>\n          <TimeRangeSelector\n            timeOptions={TIME_OPTIONS}\n            value={timeRange}\n            onSelectChange={(event) => {\n              const duration = event.target.value;\n              const relativeTimeInput: RelativeTimeRange = {\n                pastDuration: duration as DurationString,\n                end: new Date(),\n              };\n              setTimeRange(relativeTimeInput);\n              setShowCustomDateSelector(false);\n            }}\n            onCustomClick={() => {\n              setShowCustomDateSelector(true);\n            }}\n          />\n        </Box>\n      </FormControl>\n    </Stack>\n  );\n}\n"],"names":["useRef","useState","useMemo","Box","FormControl","Popover","Stack","AbsoluteTimePicker","TimeRangeSelector","isRelativeTimeRange","toAbsoluteTimeRange","useDashboardTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","showCustomDateSelector","setShowCustomDateSelector","anchorEl","convertedTimeRange","direction","spacing","current","anchorOrigin","vertical","horizontal","open","onClose","sx","theme","padding","initialTimeRange","onChange","fullWidth","ref","timeOptions","onSelectChange","event","duration","target","relativeTimeInput","end","Date","onCustomClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DateTimeRangePicker, TimeOption } from '@perses-dev/components';\nimport { isDurationString } from '@perses-dev/core';\nimport { useDashboardTimeRange } from '../../context';\nimport { useDefaultTimeRange } from '../../context';\n\nexport const TIME_OPTIONS: TimeOption[] = [\n  { value: { pastDuration: '5m' }, display: 'Last 5 minutes' },\n  { value: { pastDuration: '15m' }, display: 'Last 15 minutes' },\n  { value: { pastDuration: '30m' }, display: 'Last 30 minutes' },\n  { value: { pastDuration: '1h' }, display: 'Last 1 hour' },\n  { value: { pastDuration: '6h' }, display: 'Last 6 hours' },\n  { value: { pastDuration: '12h' }, display: 'Last 12 hours' },\n  { value: { pastDuration: '24h' }, display: 'Last 1 day' },\n  { value: { pastDuration: '7d' }, display: 'Last 7 days' },\n  { value: { pastDuration: '14d' }, display: 'Last 14 days' },\n];\n\nexport function TimeRangeControls() {\n  const { timeRange, setTimeRange } = useDashboardTimeRange();\n  const defaultTimeRange = useDefaultTimeRange();\n\n  // add time shortcut if one does not match duration from dashboard JSON\n  if (!TIME_OPTIONS.some((option) => option.value.pastDuration === defaultTimeRange.pastDuration)) {\n    if (isDurationString(defaultTimeRange.pastDuration)) {\n      TIME_OPTIONS.push({\n        value: { pastDuration: defaultTimeRange.pastDuration },\n        display: `Last ${defaultTimeRange.pastDuration}`,\n      });\n    }\n  }\n  return <DateTimeRangePicker timeOptions={TIME_OPTIONS} value={timeRange} onChange={setTimeRange} />;\n}\n"],"names":["DateTimeRangePicker","isDurationString","useDashboardTimeRange","useDefaultTimeRange","TIME_OPTIONS","value","pastDuration","display","TimeRangeControls","timeRange","setTimeRange","defaultTimeRange","some","option","push","timeOptions","onChange"],"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,mBAAmB,QAAoB,wBAAwB,CAAC;AACzE,SAASC,gBAAgB,QAAQ,kBAAkB,CAAC;AACpD,SAASC,qBAAqB,QAAQ,eAAe,CAAC;AACtD,SAASC,mBAAmB,QAAQ,eAAe,CAAC;AAEpD,OAAO,MAAMC,YAAY,GAAiB;IACxC;QAAEC,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,gBAAgB;KAAE;IAC5D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,iBAAiB;KAAE;IAC9D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,iBAAiB;KAAE;IAC9D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,aAAa;KAAE;IACzD;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,cAAc;KAAE;IAC1D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,eAAe;KAAE;IAC5D;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,YAAY;KAAE;IACzD;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,IAAI;SAAE;QAAEC,OAAO,EAAE,aAAa;KAAE;IACzD;QAAEF,KAAK,EAAE;YAAEC,YAAY,EAAE,KAAK;SAAE;QAAEC,OAAO,EAAE,cAAc;KAAE;CAC5D,CAAC;AAEF,OAAO,SAASC,iBAAiB,GAAG;IAClC,MAAM,EAAEC,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGR,qBAAqB,EAAE,AAAC;IAC5D,MAAMS,gBAAgB,GAAGR,mBAAmB,EAAE,AAAC;IAE/C,uEAAuE;IACvE,IAAI,CAACC,YAAY,CAACQ,IAAI,CAAC,CAACC,MAAM,GAAKA,MAAM,CAACR,KAAK,CAACC,YAAY,KAAKK,gBAAgB,CAACL,YAAY,CAAC,EAAE;QAC/F,IAAIL,gBAAgB,CAACU,gBAAgB,CAACL,YAAY,CAAC,EAAE;YACnDF,YAAY,CAACU,IAAI,CAAC;gBAChBT,KAAK,EAAE;oBAAEC,YAAY,EAAEK,gBAAgB,CAACL,YAAY;iBAAE;gBACtDC,OAAO,EAAE,CAAC,KAAK,EAAEI,gBAAgB,CAACL,YAAY,CAAC,CAAC;aACjD,CAAC,CAAC;QACL,CAAC;IACH,CAAC;IACD,qBAAO,KAACN,mBAAmB;QAACe,WAAW,EAAEX,YAAY;QAAEC,KAAK,EAAEI,SAAS;QAAEO,QAAQ,EAAEN,YAAY;MAAI,CAAC;AACtG,CAAC"}

package/dist/components/TimeRangeControls/TimeRangeControls.test.js

@@ -36,30 +36,44 @@ describe('TimeRangeControls', ()=>{
             dashboardResource: testDashboard
         };
     });
-    const renderTimeRangeControls = ()=>{
+    const renderTimeRangeControls = (testURLParams)=>{
         renderWithContext(/*#__PURE__*/ _jsx(DashboardProvider, {
             initialState: initialState,
             children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                timeRange: testDefaultTimeRange,
+                initialTimeRange: testDefaultTimeRange,
+                enabledURLParams: testURLParams,
                 children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
             })
         }), undefined, history);
     };
-    it('should render correct initial relative time shortcut', async ()=>{
-        renderTimeRangeControls();
-        expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();
-    });
-    // TODO: fix setTimeRange no-op, test query params
-    it('should be able to select the first option', ()=>{
-        renderTimeRangeControls();
+    it('should default to dashboard duration and update selected time option when clicked', async ()=>{
+        renderTimeRangeControls(false);
+        expect(screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = screen.getByRole('button');
         userEvent.click(dateButton);
-        const firstOption = screen.getByRole('option', {
+        const firstSelected = screen.getByRole('option', {
             name: 'Last 5 minutes'
         });
-        userEvent.click(firstOption);
+        userEvent.click(firstSelected);
         expect(dateButton).toHaveTextContent(/5 minutes/i);
     });
+    it('should update URL params with correct time range values', ()=>{
+        renderTimeRangeControls(true);
+        const dateButton = screen.getByRole('button');
+        userEvent.click(dateButton);
+        const firstSelected = screen.getByRole('option', {
+            name: 'Last 5 minutes'
+        });
+        userEvent.click(firstSelected);
+        expect(history.location.search).toEqual('?start=5m');
+        // pick another option from TimeRangeSelector dropdown
+        const secondSelected = screen.getByText('Last 12 hours');
+        userEvent.click(secondSelected);
+        expect(history.location.search).toEqual('?start=12h');
+        // back button should return to first option selected
+        history.back();
+        expect(history.location.search).toEqual('?start=5m');
+    });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.
 });
 

package/dist/components/TimeRangeControls/TimeRangeControls.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/dashboards/:id', { id: 'test' })],\n});\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n  const testDefaultTimeRange = { pastDuration: testDashboard.spec.duration };\n\n  beforeEach(() => {\n    initialState = {\n      dashboardResource: testDashboard,\n    };\n  });\n\n  const renderTimeRangeControls = () => {\n    renderWithContext(\n      <DashboardProvider initialState={initialState}>\n        <TimeRangeProvider timeRange={testDefaultTimeRange}>\n          <TimeRangeControls />\n        </TimeRangeProvider>\n      </DashboardProvider>,\n      undefined,\n      history\n    );\n  };\n\n  it('should render correct initial relative time shortcut', async () => {\n    renderTimeRangeControls();\n    expect(screen.getByText('Last 5 minutes')).toBeInTheDocument();\n  });\n\n  // TODO: fix setTimeRange no-op, test query params\n  it('should be able to select the first option', () => {\n    renderTimeRangeControls();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstOption = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstOption);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardResource","renderTimeRangeControls","timeRange","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstOption","name","toHaveTextContent"],"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,YAAY,QAAQ,cAAc,CAAC;AAC5C,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAC9C,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,YAAY,CAAC;AAC/C,OAAOC,aAAa,MAAM,0BAA0B,CAAC;AACrD,SAASC,iBAAiB,EAAuBC,iBAAiB,QAAQ,eAAe,CAAC;AAC1F,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAExD,MAAMC,OAAO,GAAGR,mBAAmB,CAAC;IAClCS,cAAc,EAAE;QAACV,YAAY,CAAC,iBAAiB,EAAE;YAAEW,EAAE,EAAE,MAAM;SAAE,CAAC;KAAC;CAClE,CAAC,AAAC;AAEHC,QAAQ,CAAC,mBAAmB,EAAE,IAAM;IAClC,IAAIC,YAAY,AAAqB,AAAC;IACtC,MAAMC,oBAAoB,GAAG;QAAEC,YAAY,EAAEV,aAAa,CAACW,IAAI,CAACC,QAAQ;KAAE,AAAC;IAE3EC,UAAU,CAAC,IAAM;QACfL,YAAY,GAAG;YACbM,iBAAiB,EAAEd,aAAa;SACjC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAMe,uBAAuB,GAAG,IAAM;QACpChB,iBAAiB,eACf,KAACE,iBAAiB;YAACO,YAAY,EAAEA,YAAY;sBAC3C,cAAA,KAACN,iBAAiB;gBAACc,SAAS,EAAEP,oBAAoB;0BAChD,cAAA,KAACN,iBAAiB,KAAG;cACH;UACF,EACpBc,SAAS,EACTb,OAAO,CACR,CAAC;IACJ,CAAC,AAAC;IAEFc,EAAE,CAAC,sDAAsD,EAAE,UAAY;QACrEH,uBAAuB,EAAE,CAAC;QAC1BI,MAAM,CAACrB,MAAM,CAACsB,SAAS,CAAC,gBAAgB,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;IACjE,CAAC,CAAC,CAAC;IAEH,kDAAkD;IAClDH,EAAE,CAAC,2CAA2C,EAAE,IAAM;QACpDH,uBAAuB,EAAE,CAAC;QAC1B,MAAMO,UAAU,GAAGxB,MAAM,CAACyB,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9C1B,SAAS,CAAC2B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,WAAW,GAAG3B,MAAM,CAACyB,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC3E7B,SAAS,CAAC2B,KAAK,CAACC,WAAW,CAAC,CAAC;QAC7BN,MAAM,CAACG,UAAU,CAAC,CAACK,iBAAiB,cAAc,CAAC;IACrD,CAAC,CAAC,CAAC;AAEH,8FAA8F;AAChG,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/dashboards/:id', { id: 'test' })],\n});\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n  const testDefaultTimeRange = { pastDuration: testDashboard.spec.duration };\n\n  beforeEach(() => {\n    initialState = {\n      dashboardResource: testDashboard,\n    };\n  });\n\n  const renderTimeRangeControls = (testURLParams: boolean) => {\n    renderWithContext(\n      <DashboardProvider initialState={initialState}>\n        <TimeRangeProvider initialTimeRange={testDefaultTimeRange} enabledURLParams={testURLParams}>\n          <TimeRangeControls />\n        </TimeRangeProvider>\n      </DashboardProvider>,\n      undefined,\n      history\n    );\n  };\n\n  it('should default to dashboard duration and update selected time option when clicked', async () => {\n    renderTimeRangeControls(false);\n    expect(screen.getByText('Last 30 minutes')).toBeInTheDocument();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstSelected = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstSelected);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  it('should update URL params with correct time range values', () => {\n    renderTimeRangeControls(true);\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstSelected = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstSelected);\n    expect(history.location.search).toEqual('?start=5m');\n\n    // pick another option from TimeRangeSelector dropdown\n    const secondSelected = screen.getByText('Last 12 hours');\n    userEvent.click(secondSelected);\n    expect(history.location.search).toEqual('?start=12h');\n\n    // back button should return to first option selected\n    history.back();\n    expect(history.location.search).toEqual('?start=5m');\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardResource","renderTimeRangeControls","testURLParams","initialTimeRange","enabledURLParams","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstSelected","name","toHaveTextContent","location","search","toEqual","secondSelected","back"],"mappings":"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"}