@perses-dev/dashboards 0.22.0 → 0.23.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    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  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  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  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  } else if (description !== undefined && isHovered) {\n    // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n    actions = (\n      <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n        <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography\n          id={titleElementId}\n          variant=\"subtitle1\"\n          sx={{\n            // `minHeight` guarantees that the header has the correct height\n            // when there is no title (i.e. in the preview)\n            lineHeight: '24px',\n            minHeight: '24px',\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          }}\n        >\n          {title}\n        </Typography>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","enterDelay","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","action","HeaderActionWrapper","direction","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"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"}

package/dist/components/PanelGroupDialog/PanelGroupDialog.js

@@ -81,6 +81,7 @@ import { PanelGroupEditorForm, panelGroupEditorFormId } from './PanelGroupEditor
                         }),
                         /*#__PURE__*/ _jsx(Button, {
                             variant: "outlined",
+                            color: "secondary",
                             onClick: panelGroupEditor.close,
                             children: "Cancel"
                         })

package/dist/components/PanelGroupDialog/PanelGroupDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\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 close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['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 (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.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 { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Button } from '@mui/material';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { useState } from 'react';\nimport { usePanelGroupEditor } from '../../context';\nimport { PanelGroupEditorForm, panelGroupEditorFormId, PanelGroupEditorFormProps } from './PanelGroupEditorForm';\n\n/**\n * A dialog for adding or editing a Panel Group. Open and initial state is controlled by the DashboardStore.\n */\nexport function PanelGroupDialog() {\n  const panelGroupEditor = usePanelGroupEditor();\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 close on the store until the Dialog has completely transitioned out\n  const handleExited = () => {\n    panelGroupEditor?.close();\n    setIsClosing(false);\n  };\n\n  // Dialog is open if we have a model and we're not transitioning out\n  const isOpen = panelGroupEditor !== undefined && isClosing === false;\n\n  const handleSubmit: PanelGroupEditorFormProps['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 (panelGroupEditor === undefined) {\n      throw new Error('Cannot apply changes');\n    }\n    panelGroupEditor.applyChanges(values);\n    handleClose();\n  };\n\n  return (\n    <Dialog open={isOpen} TransitionProps={{ onExited: handleExited }}>\n      {panelGroupEditor !== undefined && (\n        <>\n          <DialogTitle>{panelGroupEditor.mode} Panel Group</DialogTitle>\n          <IconButton\n            aria-label=\"Close\"\n            onClick={panelGroupEditor.close}\n            sx={(theme) => ({\n              position: 'absolute',\n              top: theme.spacing(0.5),\n              right: theme.spacing(0.5),\n            })}\n          >\n            <CloseIcon />\n          </IconButton>\n          <DialogContent dividers sx={{ width: '500px' }}>\n            <PanelGroupEditorForm initialValues={panelGroupEditor.initialValues} onSubmit={handleSubmit} />\n          </DialogContent>\n          <DialogActions>\n            <Button variant=\"contained\" type=\"submit\" form={panelGroupEditorFormId}>\n              {panelGroupEditor.mode === 'Edit' ? 'Apply' : 'Add'}\n            </Button>\n            <Button variant=\"outlined\" color=\"secondary\" onClick={panelGroupEditor.close}>\n              Cancel\n            </Button>\n          </DialogActions>\n        </>\n      )}\n    </Dialog>\n  );\n}\n"],"names":["IconButton","Dialog","DialogTitle","DialogContent","DialogActions","Button","CloseIcon","useState","usePanelGroupEditor","PanelGroupEditorForm","panelGroupEditorFormId","PanelGroupDialog","panelGroupEditor","isClosing","setIsClosing","handleClose","handleExited","close","isOpen","undefined","handleSubmit","values","Error","applyChanges","open","TransitionProps","onExited","mode","aria-label","onClick","sx","theme","position","top","spacing","right","dividers","width","initialValues","onSubmit","variant","type","form","color"],"mappings":"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"}

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

@@ -52,7 +52,7 @@ describe('TimeRangeControls', ()=>{
         renderTimeRangeControls(false);
         expect(screen.getByText('Last 30 minutes')).toBeInTheDocument();
         const dateButton = screen.getByRole('button', {
-            name: /last/i
+            name: /time range/i
         });
         userEvent.click(dateButton);
         const firstSelected = screen.getByRole('option', {
@@ -64,7 +64,7 @@ describe('TimeRangeControls', ()=>{
     it('should update URL params with correct time range values', ()=>{
         renderTimeRangeControls(true);
         const dateButton = screen.getByRole('button', {
-            name: /last/i
+            name: /time range/i
         });
         userEvent.click(dateButton);
         const firstSelected = screen.getByRole('option', {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.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 { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen, act } from '@testing-library/react';\nimport { TimeRangeProvider } from '@perses-dev/plugin-system';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/home'), 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', { name: /last/i });\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', { name: /last/i });\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 previous page selected\n    act(() => {\n      history.back();\n    });\n    expect(history.location.pathname).toEqual('/home');\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","act","TimeRangeProvider","renderWithContext","testDashboard","DashboardProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardResource","renderTimeRangeControls","testURLParams","initialTimeRange","enabledURLParams","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","name","click","firstSelected","toHaveTextContent","location","search","toEqual","secondSelected","back","pathname"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.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 { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen, act } from '@testing-library/react';\nimport { TimeRangeProvider } from '@perses-dev/plugin-system';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/home'), 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', { name: /time range/i });\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', { name: /time range/i });\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 previous page selected\n    act(() => {\n      history.back();\n    });\n    expect(history.location.pathname).toEqual('/home');\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","act","TimeRangeProvider","renderWithContext","testDashboard","DashboardProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardResource","renderTimeRangeControls","testURLParams","initialTimeRange","enabledURLParams","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","name","click","firstSelected","toHaveTextContent","location","search","toEqual","secondSelected","back","pathname"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAuBA,wBAAgB,mBAAmB,gBAgClC"}
+{"version":3,"file":"EditVariablesButton.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/EditVariablesButton.tsx"],"names":[],"mappings":";AAuBA,wBAAgB,mBAAmB,gBAqClC"}

package/dist/components/Variables/EditVariablesButton.js

@@ -47,6 +47,7 @@ export function EditVariablesButton() {
                         width: '50%'
                     }
                 },
+                "data-testid": "variable-editor",
                 children: /*#__PURE__*/ _jsx(VariableEditor, {
                     variableDefinitions: variableDefinitions,
                     onCancel: closeVariableEditor,

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport function EditVariablesButton() {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button startIcon={<PencilIcon />} onClick={openVariableEditor} aria-label={TOOLTIP_TEXT.editVariables}>\n          Variables\n        </Button>\n      </InfoTooltip>\n      <Drawer isOpen={isVariableEditorOpen} onClose={closeVariableEditor} PaperProps={{ sx: { width: '50%' } }}>\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateVariableDefinitions","useTemplateVariableActions","VariableEditor","EditVariablesButton","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","isOpen","onClose","PaperProps","sx","width","onCancel","onChange","variables"],"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,MAAM,QAAQ,eAAe,CAAC;AACvC,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAC3F,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAElD,OAAO,SAASC,mBAAmB,GAAG;IACpC,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMY,mBAAmB,GAAyBN,8BAA8B,EAAE,AAAC;IACnF,MAAM,EAAEO,sBAAsB,CAAA,EAAE,GAAGN,0BAA0B,EAAE,AAAC;IAEhE,MAAMO,kBAAkB,GAAG,IAAM;QAC/BH,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChCJ,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACP,WAAW;gBAACY,WAAW,EAAEX,YAAY,CAACY,aAAa;0BAClD,cAAA,KAAChB,MAAM;oBAACiB,SAAS,gBAAE,KAAChB,UAAU,KAAG;oBAAEiB,OAAO,EAAEL,kBAAkB;oBAAEM,YAAU,EAAEf,YAAY,CAACY,aAAa;8BAAE,WAExG;kBAAS;cACG;0BACd,KAACd,MAAM;gBAACkB,MAAM,EAAEX,oBAAoB;gBAAEY,OAAO,EAAEP,mBAAmB;gBAAEQ,UAAU,EAAE;oBAAEC,EAAE,EAAE;wBAAEC,KAAK,EAAE,KAAK;qBAAE;iBAAE;0BACtG,cAAA,KAACjB,cAAc;oBACbI,mBAAmB,EAAEA,mBAAmB;oBACxCc,QAAQ,EAAEX,mBAAmB;oBAC7BY,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7Cf,sBAAsB,CAACe,SAAS,CAAC,CAAC;wBAClCjB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/EditVariablesButton.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 { VariableDefinition } from '@perses-dev/core';\n\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useTemplateVariableDefinitions, useTemplateVariableActions } from '../../context';\nimport { VariableEditor } from './VariableEditor';\n\nexport function EditVariablesButton() {\n  const [isVariableEditorOpen, setIsVariableEditorOpen] = useState(false);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n  const { setVariableDefinitions } = useTemplateVariableActions();\n\n  const openVariableEditor = () => {\n    setIsVariableEditorOpen(true);\n  };\n\n  const closeVariableEditor = () => {\n    setIsVariableEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editVariables}>\n        <Button startIcon={<PencilIcon />} onClick={openVariableEditor} aria-label={TOOLTIP_TEXT.editVariables}>\n          Variables\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isVariableEditorOpen}\n        onClose={closeVariableEditor}\n        PaperProps={{ sx: { width: '50%' } }}\n        data-testid=\"variable-editor\"\n      >\n        <VariableEditor\n          variableDefinitions={variableDefinitions}\n          onCancel={closeVariableEditor}\n          onChange={(variables: VariableDefinition[]) => {\n            setVariableDefinitions(variables);\n            setIsVariableEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","useTemplateVariableDefinitions","useTemplateVariableActions","VariableEditor","EditVariablesButton","isVariableEditorOpen","setIsVariableEditorOpen","variableDefinitions","setVariableDefinitions","openVariableEditor","closeVariableEditor","description","editVariables","startIcon","onClick","aria-label","isOpen","onClose","PaperProps","sx","width","data-testid","onCancel","onChange","variables"],"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,MAAM,QAAQ,eAAe,CAAC;AACvC,OAAOC,UAAU,MAAM,+BAA+B,CAAC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,wBAAwB,CAAC;AAG7D,SAASC,YAAY,QAAQ,iBAAiB,CAAC;AAC/C,SAASC,8BAA8B,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAC3F,SAASC,cAAc,QAAQ,kBAAkB,CAAC;AAElD,OAAO,SAASC,mBAAmB,GAAG;IACpC,MAAM,CAACC,oBAAoB,EAAEC,uBAAuB,CAAC,GAAGX,QAAQ,CAAC,KAAK,CAAC,AAAC;IACxE,MAAMY,mBAAmB,GAAyBN,8BAA8B,EAAE,AAAC;IACnF,MAAM,EAAEO,sBAAsB,CAAA,EAAE,GAAGN,0BAA0B,EAAE,AAAC;IAEhE,MAAMO,kBAAkB,GAAG,IAAM;QAC/BH,uBAAuB,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,AAAC;IAEF,MAAMI,mBAAmB,GAAG,IAAM;QAChCJ,uBAAuB,CAAC,KAAK,CAAC,CAAC;IACjC,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACP,WAAW;gBAACY,WAAW,EAAEX,YAAY,CAACY,aAAa;0BAClD,cAAA,KAAChB,MAAM;oBAACiB,SAAS,gBAAE,KAAChB,UAAU,KAAG;oBAAEiB,OAAO,EAAEL,kBAAkB;oBAAEM,YAAU,EAAEf,YAAY,CAACY,aAAa;8BAAE,WAExG;kBAAS;cACG;0BACd,KAACd,MAAM;gBACLkB,MAAM,EAAEX,oBAAoB;gBAC5BY,OAAO,EAAEP,mBAAmB;gBAC5BQ,UAAU,EAAE;oBAAEC,EAAE,EAAE;wBAAEC,KAAK,EAAE,KAAK;qBAAE;iBAAE;gBACpCC,aAAW,EAAC,iBAAiB;0BAE7B,cAAA,KAAClB,cAAc;oBACbI,mBAAmB,EAAEA,mBAAmB;oBACxCe,QAAQ,EAAEZ,mBAAmB;oBAC7Ba,QAAQ,EAAE,CAACC,SAA+B,GAAK;wBAC7ChB,sBAAsB,CAACgB,SAAS,CAAC,CAAC;wBAClClB,uBAAuB,CAAC,KAAK,CAAC,CAAC;oBACjC,CAAC;kBACD;cACK;;MACR,CACH;AACJ,CAAC"}

package/dist/components/Variables/VariableEditor.js

@@ -182,7 +182,7 @@ export function VariableEditor(props) {
                                         sx: {
                                             minWidth: 650
                                         },
-                                        "aria-label": "simple table",
+                                        "aria-label": "table of variables",
                                         children: [
                                             /*#__PURE__*/ _jsx(TableHead, {
                                                 children: /*#__PURE__*/ _jsxs(TableRow, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { useDiscardChangesConfirmationDialog } from '../../context';\nimport { VariableEditForm } from './VariableEditorForm';\nimport { VARIABLE_TYPES } from './variable-model';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\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 removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          onChange={(definition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onCancel={() => setVariableEditIdx(null)}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\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\">Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\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              {!validation.isValid &&\n                validation.errors.map((error) => (\n                  <Alert severity=\"error\" key={error}>\n                    {error}\n                  </Alert>\n                ))}\n              <TableContainer>\n                <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                  <TableHead>\n                    <TableRow>\n                      <TableCell>Visibility</TableCell>\n                      <TableCell>Name</TableCell>\n                      <TableCell>Type</TableCell>\n                      <TableCell align=\"right\" />\n                    </TableRow>\n                  </TableHead>\n                  <TableBody>\n                    {variableDefinitions.map((v, idx) => (\n                      <TableRow key={v.spec.name}>\n                        <TableCell component=\"th\" scope=\"row\">\n                          <Switch\n                            checked={v.spec.display?.hidden !== true}\n                            onChange={(e) => {\n                              toggleVariableVisibility(idx, e.target.checked);\n                            }}\n                          />\n                        </TableCell>\n                        <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                          {v.spec.name}\n                        </TableCell>\n                        <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                        <TableCell align=\"right\">\n                          <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                            <ArrowUp />\n                          </IconButton>\n                          <IconButton\n                            onClick={() => changeVariableOrder(idx, 'down')}\n                            disabled={idx === variableDefinitions.length - 1}\n                          >\n                            <ArrowDown />\n                          </IconButton>\n\n                          <IconButton onClick={() => setVariableEditIdx(idx)}>\n                            <PencilIcon />\n                          </IconButton>\n                          <IconButton onClick={() => removeVariable(idx)}>\n                            <TrashIcon />\n                          </IconButton>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </TableContainer>\n              <Box display=\"flex\">\n                <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                  Add Variable\n                </Button>\n              </Box>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","useDiscardChangesConfirmationDialog","VariableEditForm","VARIABLE_TYPES","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","validation","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","initialVariableDefinition","onChange","definition","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.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, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell as MuiTableCell,\n  Table,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n  styled,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { VariableDefinition } from '@perses-dev/core';\nimport { useImmer } from 'use-immer';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport ArrowUp from 'mdi-material-ui/ArrowUp';\nimport ArrowDown from 'mdi-material-ui/ArrowDown';\n\nimport { useDiscardChangesConfirmationDialog } from '../../context';\nimport { VariableEditForm } from './VariableEditorForm';\nimport { VARIABLE_TYPES } from './variable-model';\n\nfunction getVariableLabelByKind(kind: string) {\n  return VARIABLE_TYPES.find((variableType) => variableType.kind === kind)?.label;\n}\n\nfunction getValidation(variableDefinitions: VariableDefinition[]) {\n  const errors = [];\n\n  /**  Variable names must be unique */\n  const variableNames = variableDefinitions.map((variableDefinition) => variableDefinition.spec.name);\n  const uniqueVariableNames = new Set(variableNames);\n  if (variableNames.length !== uniqueVariableNames.size) {\n    errors.push('Variable names must be unique');\n  }\n  return {\n    errors: errors,\n    isValid: errors.length === 0,\n  };\n}\n\nexport function VariableEditor(props: {\n  variableDefinitions: VariableDefinition[];\n  onChange: (variableDefinitions: VariableDefinition[]) => void;\n  onCancel: () => void;\n}) {\n  const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);\n  const [variableEditIdx, setVariableEditIdx] = useState<number | null>(null);\n\n  const validation = useMemo(() => getValidation(variableDefinitions), [variableDefinitions]);\n  const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n  const handleCancel = () => {\n    if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {\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 removeVariable = (index: number) => {\n    setVariableDefinitions((draft) => {\n      draft.splice(index, 1);\n    });\n  };\n\n  const addVariable = () => {\n    setVariableDefinitions((draft) => {\n      draft.push({\n        kind: 'TextVariable',\n        spec: {\n          name: 'NewVariable',\n          value: '',\n        },\n      });\n    });\n    setVariableEditIdx(variableDefinitions.length);\n  };\n\n  const toggleVariableVisibility = (index: number, visible: boolean) => {\n    setVariableDefinitions((draft) => {\n      const v = draft[index];\n      if (!v) {\n        return;\n      }\n      if (!v.spec.display) {\n        v.spec.display = {\n          name: v.spec.name,\n          hidden: false,\n        };\n      }\n      v.spec.display.hidden = visible === false;\n    });\n  };\n\n  const changeVariableOrder = (index: number, direction: 'up' | 'down') => {\n    setVariableDefinitions((draft) => {\n      if (direction === 'up') {\n        const prevElement = draft[index - 1];\n        const currentElement = draft[index];\n        if (index === 0 || !prevElement || !currentElement) {\n          return;\n        }\n        draft[index - 1] = currentElement;\n        draft[index] = prevElement;\n      } else {\n        const nextElement = draft[index + 1];\n        const currentElement = draft[index];\n        if (index === draft.length - 1 || !nextElement || !currentElement) {\n          return;\n        }\n        draft[index + 1] = currentElement;\n        draft[index] = nextElement;\n      }\n    });\n  };\n\n  return (\n    <>\n      {currentEditingVariableDefinition && (\n        <VariableEditForm\n          initialVariableDefinition={currentEditingVariableDefinition}\n          onChange={(definition) => {\n            setVariableDefinitions((draft) => {\n              draft[variableEditIdx] = definition;\n              setVariableEditIdx(null);\n            });\n          }}\n          onCancel={() => setVariableEditIdx(null)}\n        />\n      )}\n      {!currentEditingVariableDefinition && (\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\">Variables</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.variableDefinitions === variableDefinitions || !validation.isValid}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(variableDefinitions);\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              {!validation.isValid &&\n                validation.errors.map((error) => (\n                  <Alert severity=\"error\" key={error}>\n                    {error}\n                  </Alert>\n                ))}\n              <TableContainer>\n                <Table sx={{ minWidth: 650 }} aria-label=\"table of variables\">\n                  <TableHead>\n                    <TableRow>\n                      <TableCell>Visibility</TableCell>\n                      <TableCell>Name</TableCell>\n                      <TableCell>Type</TableCell>\n                      <TableCell align=\"right\" />\n                    </TableRow>\n                  </TableHead>\n                  <TableBody>\n                    {variableDefinitions.map((v, idx) => (\n                      <TableRow key={v.spec.name}>\n                        <TableCell component=\"th\" scope=\"row\">\n                          <Switch\n                            checked={v.spec.display?.hidden !== true}\n                            onChange={(e) => {\n                              toggleVariableVisibility(idx, e.target.checked);\n                            }}\n                          />\n                        </TableCell>\n                        <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                          {v.spec.name}\n                        </TableCell>\n                        <TableCell>{getVariableLabelByKind(v.kind) ?? v.kind}</TableCell>\n                        <TableCell align=\"right\">\n                          <IconButton onClick={() => changeVariableOrder(idx, 'up')} disabled={idx === 0}>\n                            <ArrowUp />\n                          </IconButton>\n                          <IconButton\n                            onClick={() => changeVariableOrder(idx, 'down')}\n                            disabled={idx === variableDefinitions.length - 1}\n                          >\n                            <ArrowDown />\n                          </IconButton>\n\n                          <IconButton onClick={() => setVariableEditIdx(idx)}>\n                            <PencilIcon />\n                          </IconButton>\n                          <IconButton onClick={() => removeVariable(idx)}>\n                            <TrashIcon />\n                          </IconButton>\n                        </TableCell>\n                      </TableRow>\n                    ))}\n                  </TableBody>\n                </Table>\n              </TableContainer>\n              <Box display=\"flex\">\n                <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginLeft: 'auto' }} onClick={addVariable}>\n                  Add Variable\n                </Button>\n              </Box>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n\nconst TableCell = styled(MuiTableCell)(({ theme }) => ({\n  borderBottom: `solid 1px ${theme.palette.divider}`,\n}));\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","MuiTableCell","Table","TableHead","Switch","Typography","IconButton","Alert","styled","AddIcon","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","useDiscardChangesConfirmationDialog","VariableEditForm","VARIABLE_TYPES","getVariableLabelByKind","kind","find","variableType","label","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","validation","currentEditingVariableDefinition","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeVariable","index","draft","splice","addVariable","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","initialVariableDefinition","onChange","definition","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","marginLeft","disabled","onClick","color","overflowY","error","severity","minWidth","aria-label","align","idx","component","scope","checked","e","target","fontWeight","startIcon"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA2B,OAAO,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAU1F,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAmCpE"}
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA2B,OAAO,EAAE,KAAK,EAAoB,MAAM,eAAe,CAAC;AAU1F,UAAU,yBAAyB;IACjC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;CACrB;AAED,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,eAsCpE"}

package/dist/components/Variables/VariableList.js

@@ -26,12 +26,17 @@ export function TemplateVariableList(props) {
         disableHysteresis: true
     });
     const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
-    return /*#__PURE__*/ _jsx(Box, {
+    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, {
+        marginBottom: -1,
+        "data-testid": "variable-list",
         children: /*#__PURE__*/ _jsx(AppBar, {
             color: "inherit",
             position: isSticky ? 'fixed' : 'static',
             elevation: isSticky ? 4 : 0,
             sx: {
+                backgroundColor: 'inherit',
                 ...props.sx
             },
             children: /*#__PURE__*/ _jsxs(Box, {
@@ -49,6 +54,7 @@ export function TemplateVariableList(props) {
                             maxWidth: VARIABLE_INPUT_MAX_WIDTH,
                             marginBottom: 1,
                             marginRight: 1,
+                            "data-testid": "template-variable",
                             children: /*#__PURE__*/ _jsx(TemplateVariable, {
                                 name: v.spec.name
                             }, v.spec.name)
@@ -61,7 +67,7 @@ export function TemplateVariableList(props) {
                 ]
             })
         })
-    });
+    }));
 }
 
 //# sourceMappingURL=VariableList.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableList.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 { VariableDefinition } from '@perses-dev/core';\nimport { useTemplateVariableDefinitions } from '../../context';\nimport { TemplateVariable } from './Variable';\n\nconst VARIABLE_INPUT_MIN_WIDTH = '120px';\nconst VARIABLE_INPUT_MAX_WIDTH = '240px';\n\ninterface TemplateVariableListProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function TemplateVariableList(props: TemplateVariableListProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  return (\n    <Box>\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ ...props.sx }}\n      >\n        <Box display=\"flex\" flexWrap=\"wrap\" alignItems=\"start\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n          {variableDefinitions.map((v) => (\n            <Box\n              key={v.spec.name}\n              display={v.spec.display?.hidden ? 'none' : undefined}\n              minWidth={VARIABLE_INPUT_MIN_WIDTH}\n              maxWidth={VARIABLE_INPUT_MAX_WIDTH}\n              marginBottom={1}\n              marginRight={1}\n            >\n              <TemplateVariable key={v.spec.name} name={v.spec.name} />\n            </Box>\n          ))}\n          {props.initialVariableIsSticky && (\n            <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","useTemplateVariableDefinitions","TemplateVariable","VARIABLE_INPUT_MIN_WIDTH","VARIABLE_INPUT_MAX_WIDTH","TemplateVariableList","props","isPin","setIsPin","initialVariableIsSticky","variableDefinitions","scrollTrigger","disableHysteresis","isSticky","color","position","elevation","sx","display","flexWrap","alignItems","my","ml","map","v","spec","hidden","undefined","minWidth","maxWidth","marginBottom","marginRight","name","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,eAAe,CAAC;AAC1F,OAAOC,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAOC,aAAa,MAAM,+BAA+B,CAAC;AAE1D,SAASC,8BAA8B,QAAQ,eAAe,CAAC;AAC/D,SAASC,gBAAgB,QAAQ,YAAY,CAAC;AAE9C,MAAMC,wBAAwB,GAAG,OAAO,AAAC;AACzC,MAAMC,wBAAwB,GAAG,OAAO,AAAC;AAOzC,OAAO,SAASC,oBAAoB,CAACC,KAAgC,EAAE;IACrE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAACY,KAAK,CAACG,uBAAuB,CAAC,AAAC;IAClE,MAAMC,mBAAmB,GAAyBT,8BAA8B,EAAE,AAAC;IAEnF,MAAMU,aAAa,GAAGb,gBAAgB,CAAC;QAAEc,iBAAiB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpE,MAAMC,QAAQ,GAAGF,aAAa,IAAIL,KAAK,CAACG,uBAAuB,IAAIF,KAAK,AAAC;IAEzE,qBACE,KAACX,GAAG;kBACF,cAAA,KAACD,MAAM;YACLmB,KAAK,EAAC,SAAS;YACfC,QAAQ,EAAEF,QAAQ,GAAG,OAAO,GAAG,QAAQ;YACvCG,SAAS,EAAEH,QAAQ,GAAG,CAAC,GAAG,CAAC;YAC3BI,EAAE,EAAE;gBAAE,GAAGX,KAAK,CAACW,EAAE;aAAE;sBAEnB,cAAA,MAACrB,GAAG;gBAACsB,OAAO,EAAC,MAAM;gBAACC,QAAQ,EAAC,MAAM;gBAACC,UAAU,EAAC,OAAO;gBAACC,EAAE,EAAER,QAAQ,GAAG,CAAC,GAAG,CAAC;gBAAES,EAAE,EAAET,QAAQ,GAAG,CAAC,GAAG,CAAC;;oBAC9FH,mBAAmB,CAACa,GAAG,CAAC,CAACC,CAAC;4BAGdA,GAAc;sCAFzB,OAAA,KAAC5B,GAAG;4BAEFsB,OAAO,EAAEM,CAAAA,CAAAA,GAAc,GAAdA,CAAC,CAACC,IAAI,CAACP,OAAO,cAAdM,GAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,GAAc,CAAEE,MAAM,CAAA,GAAG,MAAM,GAAGC,SAAS;4BACpDC,QAAQ,EAAEzB,wBAAwB;4BAClC0B,QAAQ,EAAEzB,wBAAwB;4BAClC0B,YAAY,EAAE,CAAC;4BACfC,WAAW,EAAE,CAAC;sCAEd,cAAA,KAAC7B,gBAAgB;gCAAmB8B,IAAI,EAAER,CAAC,CAACC,IAAI,CAACO,IAAI;+BAA9BR,CAAC,CAACC,IAAI,CAACO,IAAI,CAAuB;2BAPpDR,CAAC,CAACC,IAAI,CAACO,IAAI,CAQZ,CAAA;qBACP,CAAC;oBACD1B,KAAK,CAACG,uBAAuB,kBAC5B,KAACZ,UAAU;wBAACoC,OAAO,EAAE,IAAMzB,QAAQ,CAAC,CAACD,KAAK,CAAC;kCAAGA,KAAK,iBAAG,KAACR,UAAU,KAAG,iBAAG,KAACC,aAAa,KAAG;sBAAc,AACvG;;cACG;UACC;MACL,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Variables/VariableList.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 { VariableDefinition } from '@perses-dev/core';\nimport { useTemplateVariableDefinitions } from '../../context';\nimport { TemplateVariable } from './Variable';\n\nconst VARIABLE_INPUT_MIN_WIDTH = '120px';\nconst VARIABLE_INPUT_MAX_WIDTH = '240px';\n\ninterface TemplateVariableListProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function TemplateVariableList(props: TemplateVariableListProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n  const variableDefinitions: VariableDefinition[] = useTemplateVariableDefinitions();\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\" flexWrap=\"wrap\" alignItems=\"start\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n          {variableDefinitions.map((v) => (\n            <Box\n              key={v.spec.name}\n              display={v.spec.display?.hidden ? 'none' : undefined}\n              minWidth={VARIABLE_INPUT_MIN_WIDTH}\n              maxWidth={VARIABLE_INPUT_MAX_WIDTH}\n              marginBottom={1}\n              marginRight={1}\n              data-testid=\"template-variable\"\n            >\n              <TemplateVariable key={v.spec.name} name={v.spec.name} />\n            </Box>\n          ))}\n          {props.initialVariableIsSticky && (\n            <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","useTemplateVariableDefinitions","TemplateVariable","VARIABLE_INPUT_MIN_WIDTH","VARIABLE_INPUT_MAX_WIDTH","TemplateVariableList","props","isPin","setIsPin","initialVariableIsSticky","variableDefinitions","scrollTrigger","disableHysteresis","isSticky","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","flexWrap","alignItems","my","ml","map","v","spec","hidden","undefined","minWidth","maxWidth","marginRight","name","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,eAAe,CAAC;AAC1F,OAAOC,UAAU,MAAM,4BAA4B,CAAC;AACpD,OAAOC,aAAa,MAAM,+BAA+B,CAAC;AAE1D,SAASC,8BAA8B,QAAQ,eAAe,CAAC;AAC/D,SAASC,gBAAgB,QAAQ,YAAY,CAAC;AAE9C,MAAMC,wBAAwB,GAAG,OAAO,AAAC;AACzC,MAAMC,wBAAwB,GAAG,OAAO,AAAC;AAOzC,OAAO,SAASC,oBAAoB,CAACC,KAAgC,EAAE;IACrE,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGd,QAAQ,CAACY,KAAK,CAACG,uBAAuB,CAAC,AAAC;IAClE,MAAMC,mBAAmB,GAAyBT,8BAA8B,EAAE,AAAC;IAEnF,MAAMU,aAAa,GAAGb,gBAAgB,CAAC;QAAEc,iBAAiB,EAAE,IAAI;KAAE,CAAC,AAAC;IACpE,MAAMC,QAAQ,GAAGF,aAAa,IAAIL,KAAK,CAACG,uBAAuB,IAAIF,KAAK,AAAC;IAEzE,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACX,GAAG;QAACkB,YAAY,EAAE,CAAC,CAAC;QAAEC,aAAW,EAAC,eAAe;kBAChD,cAAA,KAACpB,MAAM;YACLqB,KAAK,EAAC,SAAS;YACfC,QAAQ,EAAEJ,QAAQ,GAAG,OAAO,GAAG,QAAQ;YACvCK,SAAS,EAAEL,QAAQ,GAAG,CAAC,GAAG,CAAC;YAC3BM,EAAE,EAAE;gBAAEC,eAAe,EAAE,SAAS;gBAAE,GAAGd,KAAK,CAACa,EAAE;aAAE;sBAE/C,cAAA,MAACvB,GAAG;gBAACyB,OAAO,EAAC,MAAM;gBAACC,QAAQ,EAAC,MAAM;gBAACC,UAAU,EAAC,OAAO;gBAACC,EAAE,EAAEX,QAAQ,GAAG,CAAC,GAAG,CAAC;gBAAEY,EAAE,EAAEZ,QAAQ,GAAG,CAAC,GAAG,CAAC;;oBAC9FH,mBAAmB,CAACgB,GAAG,CAAC,CAACC,CAAC;4BAGdA,GAAc;sCAFzB,OAAA,KAAC/B,GAAG;4BAEFyB,OAAO,EAAEM,CAAAA,CAAAA,GAAc,GAAdA,CAAC,CAACC,IAAI,CAACP,OAAO,cAAdM,GAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,GAAc,CAAEE,MAAM,CAAA,GAAG,MAAM,GAAGC,SAAS;4BACpDC,QAAQ,EAAE5B,wBAAwB;4BAClC6B,QAAQ,EAAE5B,wBAAwB;4BAClCU,YAAY,EAAE,CAAC;4BACfmB,WAAW,EAAE,CAAC;4BACdlB,aAAW,EAAC,mBAAmB;sCAE/B,cAAA,KAACb,gBAAgB;gCAAmBgC,IAAI,EAAEP,CAAC,CAACC,IAAI,CAACM,IAAI;+BAA9BP,CAAC,CAACC,IAAI,CAACM,IAAI,CAAuB;2BARpDP,CAAC,CAACC,IAAI,CAACM,IAAI,CASZ,CAAA;qBACP,CAAC;oBACD5B,KAAK,CAACG,uBAAuB,kBAC5B,KAACZ,UAAU;wBAACsC,OAAO,EAAE,IAAM3B,QAAQ,CAAC,CAACD,KAAK,CAAC;kCAAGA,KAAK,iBAAG,KAACR,UAAU,KAAG,iBAAG,KAACC,aAAa,KAAG;sBAAc,AACvG;;cACG;UACC;MACL,EACN;AACJ,CAAC"}

package/dist/constants/grid-layout-config.d.ts

@@ -0,0 +1,6 @@
+export declare const GRID_LAYOUT_COLS: {
+    readonly sm: 24;
+    readonly xxs: 2;
+};
+export declare const GRID_LAYOUT_SMALL_BREAKPOINT: "sm";
+//# sourceMappingURL=grid-layout-config.d.ts.map

package/dist/constants/grid-layout-config.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-layout-config.d.ts","sourceRoot":"","sources":["../../src/constants/grid-layout-config.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,gBAAgB;;;CAA8B,CAAC;AAE5D,eAAO,MAAM,4BAA4B,MAAgB,CAAC"}

package/dist/{utils/functions.js → constants/grid-layout-config.js}

@@ -10,8 +10,10 @@
 // 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.
-export const removeWhiteSpacesAndSpecialCharacters = (str)=>{
-    return str.replace(/\s+/g, '');
+export const GRID_LAYOUT_COLS = {
+    sm: 24,
+    xxs: 2
 };
+export const GRID_LAYOUT_SMALL_BREAKPOINT = 'sm';
 
-//# sourceMappingURL=functions.js.map
+//# sourceMappingURL=grid-layout-config.js.map

package/dist/constants/grid-layout-config.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/constants/grid-layout-config.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const GRID_LAYOUT_COLS = { sm: 24, xxs: 2 } as const;\n\nexport const GRID_LAYOUT_SMALL_BREAKPOINT = 'sm' as const;\n"],"names":["GRID_LAYOUT_COLS","sm","xxs","GRID_LAYOUT_SMALL_BREAKPOINT"],"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,OAAO,MAAMA,gBAAgB,GAAG;IAAEC,EAAE,EAAE,EAAE;IAAEC,GAAG,EAAE,CAAC;CAAE,AAAS,CAAC;AAE5D,OAAO,MAAMC,4BAA4B,GAAG,IAAI,AAAS,CAAC"}

package/dist/constants/index.d.ts

@@ -1,2 +1,3 @@
+export * from './grid-layout-config';
 export * from './user-interface-text';
 //# sourceMappingURL=index.d.ts.map

package/dist/constants/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAaA,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/constants/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/constants/index.js

@@ -10,6 +10,7 @@
 // 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.
+export * from './grid-layout-config';
 export * from './user-interface-text';
 
 //# sourceMappingURL=index.js.map

package/dist/constants/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './user-interface-text';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,uBAAuB,CAAC"}
+{"version":3,"sources":["../../src/constants/index.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport * from './grid-layout-config';\nexport * from './user-interface-text';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,uBAAuB,CAAC"}

package/dist/constants/user-interface-text.d.ts

@@ -10,6 +10,7 @@ export declare const TOOLTIP_TEXT: {
     moveGroupDown: string;
     moveGroupUp: string;
     editPanel: string;
+    duplicatePanel: string;
     deletePanel: string;
     movePanel: string;
     refreshVariableValues: string;
@@ -22,6 +23,7 @@ export declare const ARIA_LABEL_TEXT: {
     moveGroupDown: (groupName: string) => string;
     moveGroupUp: (groupName: string) => string;
     editPanel: (panelName: string) => string;
+    duplicatePanel: (panelName: string) => string;
     deletePanel: (panelName: string) => string;
     movePanel: (panelName: string) => string;
 };

package/dist/constants/user-interface-text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;CAoBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;6BACJ,MAAM;2BACR,MAAM;CAC9B,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;CAqBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM;6BACV,MAAM;2BACR,MAAM;+BACF,MAAM;6BACR,MAAM;2BAER,MAAM;gCACD,MAAM;6BACT,MAAM;2BACR,MAAM;CAC9B,CAAC"}

package/dist/constants/user-interface-text.js

@@ -25,6 +25,7 @@ export const TOOLTIP_TEXT = {
     moveGroupUp: 'Move group up',
     // Panel buttons
     editPanel: 'Edit',
+    duplicatePanel: 'Duplicate',
     deletePanel: 'Delete',
     movePanel: 'Move',
     // Variable editor buttons
@@ -40,6 +41,7 @@ export const ARIA_LABEL_TEXT = {
     moveGroupUp: (groupName)=>`move group ${groupName} up`,
     // Panel buttons
     editPanel: (panelName)=>`edit panel ${panelName}`,
+    duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
     deletePanel: (panelName)=>`delete panel ${panelName}`,
     movePanel: (panelName)=>`move panel ${panelName}`
 };

package/dist/constants/user-interface-text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editVariables: 'Edit variables',\n  refreshDashboard: 'Refresh dashboard',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  editPanel: 'Edit',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editVariables","refreshDashboard","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"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,OAAO,MAAMA,YAAY,GAAG;IAC1B,kBAAkB;IAClBC,QAAQ,EAAE,WAAW;IACrBC,QAAQ,EAAE,iBAAiB;IAC3BC,iBAAiB,EAAE,eAAe;IAClCC,aAAa,EAAE,gBAAgB;IAC/BC,gBAAgB,EAAE,mBAAmB;IACrC,gBAAgB;IAChBC,eAAe,EAAE,oBAAoB;IACrCC,WAAW,EAAE,cAAc;IAC3BC,SAAS,EAAE,YAAY;IACvBC,aAAa,EAAE,iBAAiB;IAChCC,WAAW,EAAE,eAAe;IAC5B,gBAAgB;IAChBC,SAAS,EAAE,MAAM;IACjBC,WAAW,EAAE,QAAQ;IACrBC,SAAS,EAAE,MAAM;IACjB,0BAA0B;IAC1BC,qBAAqB,EAAE,gBAAgB;IACvCC,kBAAkB,EAAE,0BAA0B;CAC/C,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAG;IAC7B,gBAAgB;IAChBV,eAAe,EAAE,CAACW,SAAiB,GAAK,CAAC,mBAAmB,EAAEA,SAAS,CAAC,CAAC;IACzEV,WAAW,EAAE,CAACU,SAAiB,GAAK,CAAC,aAAa,EAAEA,SAAS,CAAC,CAAC;IAC/DT,SAAS,EAAE,CAACS,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,CAAC;IAC3DR,aAAa,EAAE,CAACQ,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,KAAK,CAAC;IACpEP,WAAW,EAAE,CAACO,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,GAAG,CAAC;IAChE,gBAAgB;IAChBN,SAAS,EAAE,CAACO,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,CAAC;IAC3DN,WAAW,EAAE,CAACM,SAAiB,GAAK,CAAC,aAAa,EAAEA,SAAS,CAAC,CAAC;IAC/DL,SAAS,EAAE,CAACK,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,CAAC;CAC5D,CAAC"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  downloadDashboard: 'Download JSON',\n  editVariables: 'Edit variables',\n  refreshDashboard: 'Refresh dashboard',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string) => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string) => `delete group ${groupName}`,\n  editGroup: (groupName: string) => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string) => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string) => `move group ${groupName} up`,\n  // Panel buttons\n  editPanel: (panelName: string) => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string) => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string) => `delete panel ${panelName}`,\n  movePanel: (panelName: string) => `move panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","downloadDashboard","editVariables","refreshDashboard","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","ARIA_LABEL_TEXT","groupName","panelName"],"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,OAAO,MAAMA,YAAY,GAAG;IAC1B,kBAAkB;IAClBC,QAAQ,EAAE,WAAW;IACrBC,QAAQ,EAAE,iBAAiB;IAC3BC,iBAAiB,EAAE,eAAe;IAClCC,aAAa,EAAE,gBAAgB;IAC/BC,gBAAgB,EAAE,mBAAmB;IACrC,gBAAgB;IAChBC,eAAe,EAAE,oBAAoB;IACrCC,WAAW,EAAE,cAAc;IAC3BC,SAAS,EAAE,YAAY;IACvBC,aAAa,EAAE,iBAAiB;IAChCC,WAAW,EAAE,eAAe;IAC5B,gBAAgB;IAChBC,SAAS,EAAE,MAAM;IACjBC,cAAc,EAAE,WAAW;IAC3BC,WAAW,EAAE,QAAQ;IACrBC,SAAS,EAAE,MAAM;IACjB,0BAA0B;IAC1BC,qBAAqB,EAAE,gBAAgB;IACvCC,kBAAkB,EAAE,0BAA0B;CAC/C,CAAC;AAEF,OAAO,MAAMC,eAAe,GAAG;IAC7B,gBAAgB;IAChBX,eAAe,EAAE,CAACY,SAAiB,GAAK,CAAC,mBAAmB,EAAEA,SAAS,CAAC,CAAC;IACzEX,WAAW,EAAE,CAACW,SAAiB,GAAK,CAAC,aAAa,EAAEA,SAAS,CAAC,CAAC;IAC/DV,SAAS,EAAE,CAACU,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,CAAC;IAC3DT,aAAa,EAAE,CAACS,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,KAAK,CAAC;IACpER,WAAW,EAAE,CAACQ,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,GAAG,CAAC;IAChE,gBAAgB;IAChBP,SAAS,EAAE,CAACQ,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,CAAC;IAC3DP,cAAc,EAAE,CAACO,SAAiB,GAAK,CAAC,gBAAgB,EAAEA,SAAS,CAAC,CAAC;IACrEN,WAAW,EAAE,CAACM,SAAiB,GAAK,CAAC,aAAa,EAAEA,SAAS,CAAC,CAAC;IAC/DL,SAAS,EAAE,CAACK,SAAiB,GAAK,CAAC,WAAW,EAAEA,SAAS,CAAC,CAAC;CAC5D,CAAC"}

package/dist/context/DashboardProvider/DashboardProvider.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 import type { StoreApi } from 'zustand';
-import { DashboardResource, ProjectMetadata, RelativeTimeRange } from '@perses-dev/core';
+import { ReactNode } from 'react';
+import { DashboardResource, Display, ProjectMetadata, RelativeTimeRange } from '@perses-dev/core';
 import { PanelGroupEditorSlice } from './panel-group-editor-slice';
 import { PanelGroupSlice } from './panel-group-slice';
 import { PanelEditorSlice } from './panel-editor-slice';
@@ -8,12 +8,14 @@ import { PanelSlice } from './panel-slice';
 import { DeletePanelGroupSlice } from './delete-panel-group-slice';
 import { DeletePanelSlice } from './delete-panel-slice';
 import { DiscardChangesConfirmationDialogSlice } from './discard-changes-dialog-slice';
-export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice {
+import { DuplicatePanelSlice } from './duplicate-panel-slice';
+export interface DashboardStoreState extends PanelGroupSlice, PanelSlice, PanelGroupEditorSlice, DeletePanelGroupSlice, PanelEditorSlice, DeletePanelSlice, DiscardChangesConfirmationDialogSlice, DuplicatePanelSlice {
     isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
     defaultTimeRange: RelativeTimeRange;
     setDashboard: (dashboard: DashboardResource) => void;
     metadata: ProjectMetadata;
+    display?: Display;
 }
 export interface DashboardStoreProps {
     dashboardResource: DashboardResource;
@@ -21,7 +23,7 @@ export interface DashboardStoreProps {
 }
 export interface DashboardProviderProps {
     initialState: DashboardStoreProps;
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
 export declare const DashboardContext: import("react").Context<StoreApi<DashboardStoreState> | undefined>;
 export declare function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":";AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAKxC,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AACzF,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AAExH,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC;IACvC,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,eAAe,CAAC;CAC3B;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/DashboardProvider.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,SAAS,CAAC;AAIxC,OAAO,EAAiB,SAAS,EAAgD,MAAM,OAAO,CAAC;AAC/F,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAElG,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAAsD,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC1G,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAoB,UAAU,EAAE,MAAM,eAAe,CAAC;AAC7D,OAAO,EAA+B,qBAAqB,EAAE,MAAM,4BAA4B,CAAC;AAChG,OAAO,EAA0B,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAChF,OAAO,EAAmC,qCAAqC,EAAE,MAAM,gCAAgC,CAAC;AACxH,OAAO,EAA6B,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAEzF,MAAM,WAAW,mBACf,SAAQ,eAAe,EACrB,UAAU,EACV,qBAAqB,EACrB,qBAAqB,EACrB,gBAAgB,EAChB,gBAAgB,EAChB,qCAAqC,EACrC,mBAAmB;IACrB,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,gBAAgB,EAAE,iBAAiB,CAAC;IACpC,YAAY,EAAE,CAAC,SAAS,EAAE,iBAAiB,KAAK,IAAI,CAAC;IACrD,QAAQ,EAAE,eAAe,CAAC;IAC1B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,mBAAmB;IAClC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,oEAAsE,CAAC;AAEpG,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAsB9D"}