@perses-dev/dashboards 0.15.0 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { useId } from '../../utils/component-ids';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    setIsHovered(true);\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    setIsHovered(false);\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        isHovered={isHovered}\n        sx={{ paddingX: (theme) => theme.spacing(panelPadding) }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","Card","CardContent","useId","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","id","title","spec","name","description","paddingX","theme","spacing","position","overflow","flexGrow","margin","padding","FallbackComponent","panelPluginKind","plugin","kind"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/Panel.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport useResizeObserver from 'use-resize-observer';\nimport { useInView } from 'react-intersection-observer';\nimport { ErrorBoundary, ErrorAlert, combineSx, useId } from '@perses-dev/components';\nimport { PanelDefinition } from '@perses-dev/core';\nimport { Card, CardProps, CardContent } from '@mui/material';\nimport { PanelHeader, PanelHeaderProps } from './PanelHeader';\nimport { PanelContent } from './PanelContent';\n\nexport interface PanelProps extends CardProps<'section'> {\n  definition: PanelDefinition;\n  editHandlers?: PanelHeaderProps['editHandlers'];\n}\n\n/**\n * Renders a PanelDefinition's content inside of a Card.\n */\nexport function Panel(props: PanelProps) {\n  const { definition, editHandlers, onMouseEnter, onMouseLeave, sx, ...others } = props;\n\n  // Make sure we have an ID we can use for aria attributes\n  const generatedPanelId = useId('Panel');\n  const headerId = `${generatedPanelId}-header`;\n\n  const [contentElement, setContentElement] = useState<HTMLElement | null>(null);\n  const [isHovered, setIsHovered] = useState(false);\n\n  const { width, height } = useResizeObserver({ ref: contentElement });\n\n  const contentDimensions = useMemo(() => {\n    if (width === undefined || height === undefined) return undefined;\n    return { width, height };\n  }, [width, height]);\n\n  const { ref, inView } = useInView({\n    threshold: 0.3,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  // TODO: adjust padding for small panels, consistent way to determine isLargePanel here and in StatChart\n  const panelPadding = 1.5;\n\n  const handleMouseEnter: CardProps['onMouseEnter'] = (e) => {\n    setIsHovered(true);\n    onMouseEnter?.(e);\n  };\n\n  const handleMouseLeave: CardProps['onMouseLeave'] = (e) => {\n    setIsHovered(false);\n    onMouseLeave?.(e);\n  };\n\n  return (\n    <Card\n      ref={ref}\n      component=\"section\"\n      sx={combineSx(\n        {\n          width: '100%',\n          height: '100%',\n          display: 'flex',\n          flexFlow: 'column nowrap',\n        },\n        sx\n      )}\n      variant=\"outlined\"\n      onMouseEnter={handleMouseEnter}\n      onMouseLeave={handleMouseLeave}\n      aria-labelledby={headerId}\n      aria-describedby={headerId}\n      {...others}\n    >\n      <PanelHeader\n        id={headerId}\n        title={definition.spec.display.name}\n        description={definition.spec.display.description}\n        editHandlers={editHandlers}\n        isHovered={isHovered}\n        sx={{ paddingX: (theme) => theme.spacing(panelPadding) }}\n      />\n      <CardContent\n        component=\"figure\"\n        sx={{\n          position: 'relative',\n          overflow: 'hidden',\n          flexGrow: 1,\n          margin: 0,\n          padding: (theme) => theme.spacing(panelPadding),\n          // Override MUI default style for last-child\n          ':last-child': {\n            padding: (theme) => theme.spacing(panelPadding),\n          },\n        }}\n        ref={setContentElement}\n      >\n        <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[definition.spec.plugin.spec]}>\n          {inView === true && (\n            <PanelContent\n              panelPluginKind={definition.spec.plugin.kind}\n              spec={definition.spec.plugin.spec}\n              contentDimensions={contentDimensions}\n            />\n          )}\n        </ErrorBoundary>\n      </CardContent>\n    </Card>\n  );\n}\n"],"names":["useState","useMemo","useResizeObserver","useInView","ErrorBoundary","ErrorAlert","combineSx","useId","Card","CardContent","PanelHeader","PanelContent","Panel","props","definition","editHandlers","onMouseEnter","onMouseLeave","sx","others","generatedPanelId","headerId","contentElement","setContentElement","isHovered","setIsHovered","width","height","ref","contentDimensions","undefined","inView","threshold","initialInView","triggerOnce","panelPadding","handleMouseEnter","e","handleMouseLeave","component","display","flexFlow","variant","aria-labelledby","aria-describedby","id","title","spec","name","description","paddingX","theme","spacing","position","overflow","flexGrow","margin","padding","FallbackComponent","resetKeys","plugin","panelPluginKind","kind"],"mappings":"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"}

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

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

package/dist/components/Panel/PanelHeader.js

@@ -20,58 +20,55 @@ import DragIcon from 'mdi-material-ui/DragVertical';
 export function PanelHeader({ id , title , description , editHandlers , isHovered , sx , ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
-    // Don't show any actions unless panel is hovered
     let action = undefined;
-    if (isHovered) {
-        if (editHandlers !== undefined) {
-            // If there are edit handlers, always just show the edit buttons
-            action = /*#__PURE__*/ _jsxs(Stack, {
-                direction: "row",
-                alignItems: "center",
-                spacing: 0.5,
-                children: [
-                    /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": "edit panel",
-                        size: "small",
-                        onClick: editHandlers.onEditPanelClick,
-                        children: /*#__PURE__*/ _jsx(PencilIcon, {})
-                    }),
-                    /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": "delete panel",
-                        size: "small",
-                        onClick: editHandlers.onDeletePanelClick,
-                        children: /*#__PURE__*/ _jsx(DeleteIcon, {})
-                    }),
-                    /*#__PURE__*/ _jsx(HeaderIconButton, {
-                        "aria-label": "drag handle",
-                        size: "small",
-                        children: /*#__PURE__*/ _jsx(DragIcon, {
-                            className: "drag-handle",
-                            sx: {
-                                cursor: 'grab'
-                            }
-                        })
-                    })
-                ]
-            });
-        } else if (description !== undefined) {
-            // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
-            action = /*#__PURE__*/ _jsx(InfoTooltip, {
-                id: descriptionTooltipId,
-                description: description,
-                placement: TooltipPlacement.Bottom,
-                children: /*#__PURE__*/ _jsx(HeaderIconButton, {
-                    "aria-label": "Panel Description",
-                    children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
-                        "aria-describedby": "info-tooltip",
-                        "aria-hidden": false,
+    if (editHandlers !== undefined) {
+        // If there are edit handlers, always just show the edit buttons
+        action = /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 0.5,
+            children: [
+                /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": `edit panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onEditPanelClick,
+                    children: /*#__PURE__*/ _jsx(PencilIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": `delete panel ${title}`,
+                    size: "small",
+                    onClick: editHandlers.onDeletePanelClick,
+                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                }),
+                /*#__PURE__*/ _jsx(HeaderIconButton, {
+                    "aria-label": `move panel ${title}`,
+                    size: "small",
+                    children: /*#__PURE__*/ _jsx(DragIcon, {
+                        className: "drag-handle",
                         sx: {
-                            color: (theme)=>theme.palette.grey[700]
+                            cursor: 'grab'
                         }
                     })
                 })
-            });
-        }
+            ]
+        });
+    } else if (description !== undefined && isHovered) {
+        // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description
+        action = /*#__PURE__*/ _jsx(InfoTooltip, {
+            id: descriptionTooltipId,
+            description: description,
+            placement: TooltipPlacement.Bottom,
+            children: /*#__PURE__*/ _jsx(HeaderIconButton, {
+                "aria-label": "Panel Description",
+                children: /*#__PURE__*/ _jsx(InformationOutlineIcon, {
+                    "aria-describedby": "info-tooltip",
+                    "aria-hidden": false,
+                    sx: {
+                        color: (theme)=>theme.palette.grey[700]
+                    }
+                })
+            })
+        });
     }
     return /*#__PURE__*/ _jsx(CardHeader, {
         id: id,
@@ -82,6 +79,15 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
         title: /*#__PURE__*/ _jsx(Typography, {
             id: titleElementId,
             variant: "subtitle1",
+            sx: {
+                // `minHeight` guarantees that the header has the correct height
+                // when there is no title (i.e. in the preview)
+                lineHeight: '24px',
+                minHeight: '24px',
+                whiteSpace: 'nowrap',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis'
+            },
             children: title
         }),
         action: action,
@@ -89,9 +95,7 @@ export function PanelHeader({ id , title , description , editHandlers , isHovere
                 padding: theme.spacing(1),
                 borderBottom: `solid 1px ${theme.palette.divider}`,
                 '.MuiCardHeader-content': {
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
+                    overflow: 'hidden'
                 }
             }), sx),
         ...rest

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  // Don't show any actions unless panel is hovered\n  let action: CardHeaderProps['action'] = undefined;\n  if (isHovered) {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      action = (\n        <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n          <HeaderIconButton aria-label=\"edit panel\" size=\"small\" onClick={editHandlers.onEditPanelClick}>\n            <PencilIcon />\n          </HeaderIconButton>\n          <HeaderIconButton aria-label=\"delete panel\" size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n            <DeleteIcon />\n          </HeaderIconButton>\n          <HeaderIconButton aria-label=\"drag handle\" size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n          </HeaderIconButton>\n        </Stack>\n      );\n    } else if (description !== undefined) {\n      // If there aren't edit handlers and we have a description, show a button with a tooltip for the panel description\n      action = (\n        <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n          <HeaderIconButton aria-label=\"Panel Description\">\n            <InformationOutlineIcon\n              aria-describedby=\"info-tooltip\"\n              aria-hidden={false}\n              sx={{ color: (theme) => theme.palette.grey[700] }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Typography id={titleElementId} variant=\"subtitle1\">\n          {title}\n        </Typography>\n      }\n      action={action}\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            whiteSpace: 'nowrap',\n            overflow: 'hidden',\n            textOverflow: 'ellipsis',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","alignItems","spacing","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","padding","borderBottom","divider","whiteSpace","overflow","textOverflow","borderRadius","shape"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, TooltipPlacement, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\n\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  isHovered: boolean;\n}\n\nexport function PanelHeader({ id, title, description, editHandlers, isHovered, sx, ...rest }: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  let action: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    action = (\n      <Stack direction=\"row\" alignItems=\"center\" spacing={0.5}>\n        <HeaderIconButton aria-label={`edit panel ${title}`} size=\"small\" onClick={editHandlers.onEditPanelClick}>\n          <PencilIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`delete panel ${title}`} size=\"small\" onClick={editHandlers.onDeletePanelClick}>\n          <DeleteIcon />\n        </HeaderIconButton>\n        <HeaderIconButton aria-label={`move panel ${title}`} size=\"small\">\n          <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} />\n        </HeaderIconButton>\n      </Stack>\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    action = (\n      <InfoTooltip id={descriptionTooltipId} description={description} placement={TooltipPlacement.Bottom}>\n        <HeaderIconButton aria-label=\"Panel Description\">\n          <InformationOutlineIcon\n            aria-describedby=\"info-tooltip\"\n            aria-hidden={false}\n            sx={{ color: (theme) => theme.palette.grey[700] }}\n          />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }\n\n  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={action}\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        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","TooltipPlacement","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","PanelHeader","id","title","description","editHandlers","isHovered","sx","rest","titleElementId","descriptionTooltipId","action","undefined","direction","alignItems","spacing","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","onDeletePanelClick","className","cursor","placement","Bottom","aria-describedby","aria-hidden","color","theme","palette","grey","component","aria-labelledby","disableTypography","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","padding","borderBottom","divider","borderRadius","shape"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelDrawer.test.js

@@ -61,6 +61,29 @@ describe('Panel Drawer', ()=>{
             }
         });
     });
+    it('should add panel with duplicate panel name', async ()=>{
+        const storeApi = renderPanelDrawer();
+        act(()=>storeApi.getState().openAddPanel());
+        const nameInput = await screen.findByLabelText(/Name/);
+        userEvent.type(nameInput, 'cpu');
+        userEvent.click(screen.getByText('Add'));
+        const panels = storeApi.getState().panels;
+        expect(panels).toMatchObject({
+            // make sure we don't have duplicate panel key by appending "-1"
+            'cpu-1': {
+                kind: 'Panel',
+                spec: {
+                    display: {
+                        name: 'cpu'
+                    },
+                    plugin: {
+                        kind: '',
+                        spec: {}
+                    }
+                }
+            }
+        });
+    });
     it('should edit an existing panel', async ()=>{
         const storeApi = renderPanelDrawer();
         // Open the drawer for an existing panel

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelDrawer />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Test group not found');\n    }\n    const layout = Object.entries(group.itemPanelKeys).find(([, panelKey]) => panelKey === 'cpu');\n    if (layout === undefined) {\n      throw new Error('Test panel not found');\n    }\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: group.id, panelGroupItemLayoutId: layout[0] }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","createDashboardProviderSpy","getTestDashboard","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","spec","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { screen } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\nimport { act } from 'react-dom/test-utils';\nimport { createDashboardProviderSpy, getTestDashboard, renderWithContext } from '../../test';\nimport { DashboardProvider } from '../../context/DashboardProvider';\nimport { PanelDrawer } from './PanelDrawer';\n\ndescribe('Panel Drawer', () => {\n  const renderPanelDrawer = () => {\n    const { store, DashboardProviderSpy } = createDashboardProviderSpy();\n\n    renderWithContext(\n      <DashboardProvider initialState={{ dashboardResource: getTestDashboard(), isEditMode: true }}>\n        <DashboardProviderSpy />\n        <PanelDrawer />\n      </DashboardProvider>\n    );\n\n    const { value: storeApi } = store;\n    if (storeApi === undefined) {\n      throw new Error('Expected dashboard store to be set after initial render');\n    }\n\n    return storeApi;\n  };\n\n  it('should add new panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for a new panel\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'New Panel');\n    userEvent.click(screen.getByText('Add'));\n\n    // TODO: Assert drawer is closed?\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // Should have the new panel in the store\n      NewPanel: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'New Panel' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should add panel with duplicate panel name', async () => {\n    const storeApi = renderPanelDrawer();\n\n    act(() => storeApi.getState().openAddPanel());\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.type(nameInput, 'cpu');\n    userEvent.click(screen.getByText('Add'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      // make sure we don't have duplicate panel key by appending \"-1\"\n      'cpu-1': {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu' },\n          plugin: {\n            kind: '',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n\n  it('should edit an existing panel', async () => {\n    const storeApi = renderPanelDrawer();\n\n    // Open the drawer for an existing panel\n    const group = Object.values(storeApi.getState().panelGroups).find((group) => group.title === 'CPU Stats');\n    if (group === undefined) {\n      throw new Error('Test group not found');\n    }\n    const layout = Object.entries(group.itemPanelKeys).find(([, panelKey]) => panelKey === 'cpu');\n    if (layout === undefined) {\n      throw new Error('Test panel not found');\n    }\n    act(() => storeApi.getState().openEditPanel({ panelGroupId: group.id, panelGroupItemLayoutId: layout[0] }));\n\n    const nameInput = await screen.findByLabelText(/Name/);\n    userEvent.clear(nameInput);\n    userEvent.type(nameInput, 'cpu usage');\n    userEvent.click(screen.getByText('Apply'));\n\n    const panels = storeApi.getState().panels;\n    expect(panels).toMatchObject({\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'cpu usage' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {},\n          },\n        },\n      },\n    });\n  });\n});\n"],"names":["screen","userEvent","act","createDashboardProviderSpy","getTestDashboard","renderWithContext","DashboardProvider","PanelDrawer","describe","renderPanelDrawer","store","DashboardProviderSpy","initialState","dashboardResource","isEditMode","value","storeApi","undefined","Error","it","getState","openAddPanel","nameInput","findByLabelText","type","click","getByText","panels","expect","toMatchObject","NewPanel","kind","spec","display","name","plugin","group","Object","values","panelGroups","find","title","layout","entries","itemPanelKeys","panelKey","openEditPanel","panelGroupId","id","panelGroupItemLayoutId","clear","cpu"],"mappings":"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"}

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

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { generatePath } from 'react-router';
 import { createMemoryHistory } from 'history';
 import userEvent from '@testing-library/user-event';
-import { screen } from '@testing-library/react';
+import { screen, act } from '@testing-library/react';
 import { renderWithContext } from '../../test';
 import testDashboard from '../../test/testDashboard';
 import { DashboardProvider, TimeRangeProvider } from '../../context';
@@ -71,7 +71,9 @@ describe('TimeRangeControls', ()=>{
         userEvent.click(secondSelected);
         expect(history.location.search).toEqual('?start=12h');
         // back button should return to first option selected
-        history.back();
+        act(()=>{
+            history.back();
+        });
         expect(history.location.search).toEqual('?start=5m');
     });
 // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/dashboards/:id', { id: 'test' })],\n});\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n  const testDefaultTimeRange = { pastDuration: testDashboard.spec.duration };\n\n  beforeEach(() => {\n    initialState = {\n      dashboardResource: testDashboard,\n    };\n  });\n\n  const renderTimeRangeControls = (testURLParams: boolean) => {\n    renderWithContext(\n      <DashboardProvider initialState={initialState}>\n        <TimeRangeProvider initialTimeRange={testDefaultTimeRange} enabledURLParams={testURLParams}>\n          <TimeRangeControls />\n        </TimeRangeProvider>\n      </DashboardProvider>,\n      undefined,\n      history\n    );\n  };\n\n  it('should default to dashboard duration and update selected time option when clicked', async () => {\n    renderTimeRangeControls(false);\n    expect(screen.getByText('Last 30 minutes')).toBeInTheDocument();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstSelected = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstSelected);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  it('should update URL params with correct time range values', () => {\n    renderTimeRangeControls(true);\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstSelected = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstSelected);\n    expect(history.location.search).toEqual('?start=5m');\n\n    // pick another option from TimeRangeSelector dropdown\n    const secondSelected = screen.getByText('Last 12 hours');\n    userEvent.click(secondSelected);\n    expect(history.location.search).toEqual('?start=12h');\n\n    // back button should return to first option selected\n    history.back();\n    expect(history.location.search).toEqual('?start=5m');\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardResource","renderTimeRangeControls","testURLParams","initialTimeRange","enabledURLParams","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstSelected","name","toHaveTextContent","location","search","toEqual","secondSelected","back"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,YAAY,QAAQ,cAAc,CAAC;AAC5C,SAASC,mBAAmB,QAAQ,SAAS,CAAC;AAC9C,OAAOC,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,YAAY,CAAC;AAC/C,OAAOC,aAAa,MAAM,0BAA0B,CAAC;AACrD,SAASC,iBAAiB,EAAuBC,iBAAiB,QAAQ,eAAe,CAAC;AAC1F,SAASC,iBAAiB,QAAQ,qBAAqB,CAAC;AAExD,MAAMC,OAAO,GAAGR,mBAAmB,CAAC;IAClCS,cAAc,EAAE;QAACV,YAAY,CAAC,iBAAiB,EAAE;YAAEW,EAAE,EAAE,MAAM;SAAE,CAAC;KAAC;CAClE,CAAC,AAAC;AAEHC,QAAQ,CAAC,mBAAmB,EAAE,IAAM;IAClC,IAAIC,YAAY,AAAqB,AAAC;IACtC,MAAMC,oBAAoB,GAAG;QAAEC,YAAY,EAAEV,aAAa,CAACW,IAAI,CAACC,QAAQ;KAAE,AAAC;IAE3EC,UAAU,CAAC,IAAM;QACfL,YAAY,GAAG;YACbM,iBAAiB,EAAEd,aAAa;SACjC,CAAC;IACJ,CAAC,CAAC,CAAC;IAEH,MAAMe,uBAAuB,GAAG,CAACC,aAAsB,GAAK;QAC1DjB,iBAAiB,eACf,KAACE,iBAAiB;YAACO,YAAY,EAAEA,YAAY;sBAC3C,cAAA,KAACN,iBAAiB;gBAACe,gBAAgB,EAAER,oBAAoB;gBAAES,gBAAgB,EAAEF,aAAa;0BACxF,cAAA,KAACb,iBAAiB,KAAG;cACH;UACF,EACpBgB,SAAS,EACTf,OAAO,CACR,CAAC;IACJ,CAAC,AAAC;IAEFgB,EAAE,CAAC,mFAAmF,EAAE,UAAY;QAClGL,uBAAuB,CAAC,KAAK,CAAC,CAAC;QAC/BM,MAAM,CAACvB,MAAM,CAACwB,SAAS,CAAC,iBAAiB,CAAC,CAAC,CAACC,iBAAiB,EAAE,CAAC;QAChE,MAAMC,UAAU,GAAG1B,MAAM,CAAC2B,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9C5B,SAAS,CAAC6B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,aAAa,GAAG7B,MAAM,CAAC2B,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC7E/B,SAAS,CAAC6B,KAAK,CAACC,aAAa,CAAC,CAAC;QAC/BN,MAAM,CAACG,UAAU,CAAC,CAACK,iBAAiB,cAAc,CAAC;IACrD,CAAC,CAAC,CAAC;IAEHT,EAAE,CAAC,yDAAyD,EAAE,IAAM;QAClEL,uBAAuB,CAAC,IAAI,CAAC,CAAC;QAC9B,MAAMS,UAAU,GAAG1B,MAAM,CAAC2B,SAAS,CAAC,QAAQ,CAAC,AAAC;QAC9C5B,SAAS,CAAC6B,KAAK,CAACF,UAAU,CAAC,CAAC;QAC5B,MAAMG,aAAa,GAAG7B,MAAM,CAAC2B,SAAS,CAAC,QAAQ,EAAE;YAAEG,IAAI,EAAE,gBAAgB;SAAE,CAAC,AAAC;QAC7E/B,SAAS,CAAC6B,KAAK,CAACC,aAAa,CAAC,CAAC;QAC/BN,MAAM,CAACjB,OAAO,CAAC0B,QAAQ,CAACC,MAAM,CAAC,CAACC,OAAO,CAAC,WAAW,CAAC,CAAC;QAErD,sDAAsD;QACtD,MAAMC,cAAc,GAAGnC,MAAM,CAACwB,SAAS,CAAC,eAAe,CAAC,AAAC;QACzDzB,SAAS,CAAC6B,KAAK,CAACO,cAAc,CAAC,CAAC;QAChCZ,MAAM,CAACjB,OAAO,CAAC0B,QAAQ,CAACC,MAAM,CAAC,CAACC,OAAO,CAAC,YAAY,CAAC,CAAC;QAEtD,qDAAqD;QACrD5B,OAAO,CAAC8B,IAAI,EAAE,CAAC;QACfb,MAAM,CAACjB,OAAO,CAAC0B,QAAQ,CAACC,MAAM,CAAC,CAACC,OAAO,CAAC,WAAW,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AAEH,8FAA8F;AAChG,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../../src/components/TimeRangeControls/TimeRangeControls.test.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { generatePath } from 'react-router';\nimport { createMemoryHistory } from 'history';\nimport userEvent from '@testing-library/user-event';\nimport { screen, act } from '@testing-library/react';\nimport { renderWithContext } from '../../test';\nimport testDashboard from '../../test/testDashboard';\nimport { DashboardProvider, DashboardStoreProps, TimeRangeProvider } from '../../context';\nimport { TimeRangeControls } from './TimeRangeControls';\n\nconst history = createMemoryHistory({\n  initialEntries: [generatePath('/dashboards/:id', { id: 'test' })],\n});\n\ndescribe('TimeRangeControls', () => {\n  let initialState: DashboardStoreProps;\n  const testDefaultTimeRange = { pastDuration: testDashboard.spec.duration };\n\n  beforeEach(() => {\n    initialState = {\n      dashboardResource: testDashboard,\n    };\n  });\n\n  const renderTimeRangeControls = (testURLParams: boolean) => {\n    renderWithContext(\n      <DashboardProvider initialState={initialState}>\n        <TimeRangeProvider initialTimeRange={testDefaultTimeRange} enabledURLParams={testURLParams}>\n          <TimeRangeControls />\n        </TimeRangeProvider>\n      </DashboardProvider>,\n      undefined,\n      history\n    );\n  };\n\n  it('should default to dashboard duration and update selected time option when clicked', async () => {\n    renderTimeRangeControls(false);\n    expect(screen.getByText('Last 30 minutes')).toBeInTheDocument();\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstSelected = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstSelected);\n    expect(dateButton).toHaveTextContent(/5 minutes/i);\n  });\n\n  it('should update URL params with correct time range values', () => {\n    renderTimeRangeControls(true);\n    const dateButton = screen.getByRole('button');\n    userEvent.click(dateButton);\n    const firstSelected = screen.getByRole('option', { name: 'Last 5 minutes' });\n    userEvent.click(firstSelected);\n    expect(history.location.search).toEqual('?start=5m');\n\n    // pick another option from TimeRangeSelector dropdown\n    const secondSelected = screen.getByText('Last 12 hours');\n    userEvent.click(secondSelected);\n    expect(history.location.search).toEqual('?start=12h');\n\n    // back button should return to first option selected\n    act(() => {\n      history.back();\n    });\n    expect(history.location.search).toEqual('?start=5m');\n  });\n\n  // TODO: add additional tests for absolute time selection, other inputs, form validation, etc.\n});\n"],"names":["generatePath","createMemoryHistory","userEvent","screen","act","renderWithContext","testDashboard","DashboardProvider","TimeRangeProvider","TimeRangeControls","history","initialEntries","id","describe","initialState","testDefaultTimeRange","pastDuration","spec","duration","beforeEach","dashboardResource","renderTimeRangeControls","testURLParams","initialTimeRange","enabledURLParams","undefined","it","expect","getByText","toBeInTheDocument","dateButton","getByRole","click","firstSelected","name","toHaveTextContent","location","search","toEqual","secondSelected","back"],"mappings":"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"}

package/dist/components/Variables/Variable.js

@@ -191,6 +191,11 @@ function ListVariable({ name  }) {
                             disabled: true,
                             children: "Loading"
                         }),
+                        finalOptions.length === 0 && /*#__PURE__*/ _jsx(MenuItem, {
+                            value: "empty",
+                            disabled: true,
+                            children: "No options"
+                        }),
                         finalOptions.map((option)=>/*#__PURE__*/ _jsx(MenuItem, {
                                 value: option.value,
                                 children: option.label

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport {\n  usePlugin,\n  DEFAULT_ALL_VALUE,\n  useTemplateVariableValues,\n  VariableStateMap,\n  useDatasourceStore,\n  useTimeRange,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nfunction getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useTemplateVariableValues();\n  const { timeRange } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables;\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const title = definition?.spec.display?.name ?? name;\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  const variablesOptionsQuery = useQuery(\n    [name, definition, variablesValueKey, timeRange],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange });\n      return resp?.data ?? [];\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        finalOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [finalOptions, value, allowMultiple]\n  );\n\n  let selectValue = value;\n  if (!valueIsInOptions) {\n    selectValue = allowMultiple ? [] : '';\n  }\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={selectValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state } = useTemplateVariable(name);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue)}\n      placeholder={name}\n      label={name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","usePlugin","DEFAULT_ALL_VALUE","useTemplateVariableValues","useDatasourceStore","useTimeRange","useQuery","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","getVariableValuesKey","v","Object","values","map","JSON","stringify","value","join","data","variablePlugin","spec","plugin","setVariableValue","setVariableLoading","setVariableOptions","datasourceStore","allVariables","timeRange","variablePluginCtx","variables","dependsOnVariables","dependsOn","dependencies","allowMultiple","allow_multiple","allowAllValue","allow_all_value","title","display","waitToLoad","some","loading","variablesValueKey","variablesOptionsQuery","resp","getVariableOptions","enabled","isFetching","state","options","Array","isArray","finalOptions","computedOptions","label","valueIsInOptions","Boolean","find","includes","selectValue","firstOption","fullWidth","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","option","tempValue","setTempValue","onBlur","placeholder"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/Variable.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useEffect, useMemo, useState } from 'react';\nimport { Select, FormControl, InputLabel, MenuItem, Box, LinearProgress, TextField } from '@mui/material';\nimport { VariableName, ListVariableDefinition, VariableValue } from '@perses-dev/core';\nimport {\n  usePlugin,\n  DEFAULT_ALL_VALUE,\n  useTemplateVariableValues,\n  VariableStateMap,\n  useDatasourceStore,\n  useTimeRange,\n} from '@perses-dev/plugin-system';\nimport { useQuery } from '@tanstack/react-query';\nimport { useTemplateVariable, useTemplateVariableActions } from '../../context';\n\ntype TemplateVariableProps = {\n  name: VariableName;\n};\n\nexport function TemplateVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const kind = ctx.definition?.kind;\n  switch (kind) {\n    case 'TextVariable':\n      return <TextVariable name={name} />;\n    case 'ListVariable':\n      return <ListVariable name={name} />;\n  }\n\n  return <div>Unsupported Variable Kind: ${kind}</div>;\n}\n\n/**\n * Returns a serialized string of the current state of variable values.\n */\nfunction getVariableValuesKey(v: VariableStateMap) {\n  return Object.values(v)\n    .map((v) => JSON.stringify(v.value))\n    .join(',');\n}\n\nfunction ListVariable({ name }: TemplateVariableProps) {\n  const ctx = useTemplateVariable(name);\n  const definition = ctx.definition as ListVariableDefinition;\n  const { data: variablePlugin } = usePlugin('Variable', definition.spec.plugin.kind);\n  const { setVariableValue, setVariableLoading, setVariableOptions } = useTemplateVariableActions();\n  const datasourceStore = useDatasourceStore();\n  const allVariables = useTemplateVariableValues();\n  const { timeRange } = useTimeRange();\n\n  const variablePluginCtx = { timeRange, datasourceStore, variables: allVariables };\n\n  const spec = definition.spec.plugin.spec;\n\n  let dependsOnVariables: string[] | undefined;\n  if (variablePlugin?.dependsOn) {\n    const dependencies = variablePlugin.dependsOn(spec, variablePluginCtx);\n    dependsOnVariables = dependencies.variables;\n  }\n\n  const variables = useTemplateVariableValues(dependsOnVariables);\n  const allowMultiple = definition?.spec.allow_multiple === true;\n  const allowAllValue = definition?.spec.allow_all_value === true;\n  const title = definition?.spec.display?.name ?? name;\n\n  let waitToLoad = false;\n  if (dependsOnVariables) {\n    waitToLoad = dependsOnVariables.some((v) => variables[v]?.loading);\n  }\n\n  const variablesValueKey = getVariableValuesKey(variables);\n\n  const variablesOptionsQuery = useQuery(\n    [name, definition, variablesValueKey, timeRange],\n    async () => {\n      const resp = await variablePlugin?.getVariableOptions(spec, { datasourceStore, variables, timeRange });\n      return resp?.data ?? [];\n    },\n    { enabled: !!variablePlugin || waitToLoad }\n  );\n\n  useEffect(() => {\n    setVariableLoading(name, variablesOptionsQuery.isFetching);\n    if (variablesOptionsQuery.data) {\n      setVariableOptions(name, variablesOptionsQuery.data);\n    }\n  }, [variablesOptionsQuery, name, setVariableLoading, setVariableOptions]);\n\n  let value = ctx.state?.value;\n  const options = ctx.state?.options;\n  const loading = ctx.state?.loading;\n\n  // Make sure value is an array if allowMultiple is true\n  if (allowMultiple && !Array.isArray(value)) {\n    value = typeof value === 'string' ? [value] : [];\n  }\n\n  const finalOptions = useMemo(() => {\n    let computedOptions = options ? [...options] : [];\n\n    // Add the all value if it's allowed\n    if (allowAllValue) {\n      computedOptions = [{ value: DEFAULT_ALL_VALUE, label: 'All' }, ...computedOptions];\n    }\n    return computedOptions;\n  }, [options, allowAllValue]);\n\n  const valueIsInOptions = useMemo(\n    () =>\n      Boolean(\n        finalOptions.find((v) => {\n          if (allowMultiple) {\n            return (value as string[]).includes(v.value);\n          }\n          return value === v.value;\n        })\n      ),\n    [finalOptions, value, allowMultiple]\n  );\n\n  let selectValue = value;\n  if (!valueIsInOptions) {\n    selectValue = allowMultiple ? [] : '';\n  }\n\n  useEffect(() => {\n    const firstOption = finalOptions?.[0];\n\n    // If there is no value but there are options, set the value to the first option.\n    if (!value && firstOption) {\n      setVariableValue(name, firstOption.value);\n    }\n  }, [finalOptions, setVariableValue, value, name, allowMultiple]);\n\n  return (\n    <Box display={'flex'}>\n      <FormControl fullWidth>\n        <InputLabel id={name}>{title}</InputLabel>\n        <Select\n          sx={{ minWidth: 100, maxWidth: 250 }}\n          id={name}\n          label={name}\n          value={selectValue}\n          onChange={(e) => {\n            // Must be selected\n            if (e.target.value === null || e.target.value.length === 0) {\n              if (allowAllValue) {\n                setVariableValue(name, DEFAULT_ALL_VALUE);\n              }\n              return;\n            }\n            setVariableValue(name, e.target.value as VariableValue);\n          }}\n          multiple={allowMultiple}\n        >\n          {loading && (\n            <MenuItem value=\"loading\" disabled>\n              Loading\n            </MenuItem>\n          )}\n\n          {finalOptions.length === 0 && (\n            <MenuItem value=\"empty\" disabled>\n              No options\n            </MenuItem>\n          )}\n          {finalOptions.map((option) => (\n            <MenuItem key={option.value} value={option.value}>\n              {option.label}\n            </MenuItem>\n          ))}\n        </Select>\n        {loading && <LinearProgress />}\n      </FormControl>\n    </Box>\n  );\n}\n\nfunction TextVariable({ name }: TemplateVariableProps) {\n  const { state } = useTemplateVariable(name);\n  const [tempValue, setTempValue] = useState(state?.value ?? '');\n  const { setVariableValue } = useTemplateVariableActions();\n\n  useEffect(() => {\n    setTempValue(state?.value ?? '');\n  }, [state?.value]);\n\n  return (\n    <TextField\n      value={tempValue}\n      onChange={(e) => setTempValue(e.target.value)}\n      onBlur={() => setVariableValue(name, tempValue)}\n      placeholder={name}\n      label={name}\n    />\n  );\n}\n"],"names":["useEffect","useMemo","useState","Select","FormControl","InputLabel","MenuItem","Box","LinearProgress","TextField","usePlugin","DEFAULT_ALL_VALUE","useTemplateVariableValues","useDatasourceStore","useTimeRange","useQuery","useTemplateVariable","useTemplateVariableActions","TemplateVariable","name","ctx","kind","definition","TextVariable","ListVariable","div","getVariableValuesKey","v","Object","values","map","JSON","stringify","value","join","data","variablePlugin","spec","plugin","setVariableValue","setVariableLoading","setVariableOptions","datasourceStore","allVariables","timeRange","variablePluginCtx","variables","dependsOnVariables","dependsOn","dependencies","allowMultiple","allow_multiple","allowAllValue","allow_all_value","title","display","waitToLoad","some","loading","variablesValueKey","variablesOptionsQuery","resp","getVariableOptions","enabled","isFetching","state","options","Array","isArray","finalOptions","computedOptions","label","valueIsInOptions","Boolean","find","includes","selectValue","firstOption","fullWidth","id","sx","minWidth","maxWidth","onChange","e","target","length","multiple","disabled","option","tempValue","setTempValue","onBlur","placeholder"],"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,SAAS,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AACrD,SAASC,MAAM,EAAEC,WAAW,EAAEC,UAAU,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,cAAc,EAAEC,SAAS,QAAQ,eAAe,CAAC;AAE1G,SACEC,SAAS,EACTC,iBAAiB,EACjBC,yBAAyB,EAEzBC,kBAAkB,EAClBC,YAAY,QACP,2BAA2B,CAAC;AACnC,SAASC,QAAQ,QAAQ,uBAAuB,CAAC;AACjD,SAASC,mBAAmB,EAAEC,0BAA0B,QAAQ,eAAe,CAAC;AAMhF,OAAO,SAASC,gBAAgB,CAAC,EAAEC,IAAI,CAAA,EAAyB,EAAE;QAEnDC,GAAc;IAD3B,MAAMA,GAAG,GAAGJ,mBAAmB,CAACG,IAAI,CAAC,AAAC;IACtC,MAAME,IAAI,GAAGD,CAAAA,GAAc,GAAdA,GAAG,CAACE,UAAU,cAAdF,GAAc,WAAM,GAApBA,KAAAA,CAAoB,GAApBA,GAAc,CAAEC,IAAI,AAAC;IAClC,OAAQA,IAAI;QACV,KAAK,cAAc;YACjB,qBAAO,KAACE,YAAY;gBAACJ,IAAI,EAAEA,IAAI;cAAI,CAAC;QACtC,KAAK,cAAc;YACjB,qBAAO,KAACK,YAAY;gBAACL,IAAI,EAAEA,IAAI;cAAI,CAAC;KACvC;IAED,qBAAO,MAACM,KAAG;;YAAC,8BAA4B;YAACJ,IAAI;;MAAO,CAAC;AACvD,CAAC;AAED;;CAEC,GACD,SAASK,oBAAoB,CAACC,CAAmB,EAAE;IACjD,OAAOC,MAAM,CAACC,MAAM,CAACF,CAAC,CAAC,CACpBG,GAAG,CAAC,CAACH,CAAC,GAAKI,IAAI,CAACC,SAAS,CAACL,CAAC,CAACM,KAAK,CAAC,CAAC,CACnCC,IAAI,CAAC,GAAG,CAAC,CAAC;AACf,CAAC;AAED,SAASV,YAAY,CAAC,EAAEL,IAAI,CAAA,EAAyB,EAAE;aA+CzCC,IAAS,EACLA,IAAS,EACTA,IAAS;IAhDzB,MAAMA,GAAG,GAAGJ,mBAAmB,CAACG,IAAI,CAAC,AAAC;IACtC,MAAMG,UAAU,GAAGF,GAAG,CAACE,UAAU,AAA0B,AAAC;IAC5D,MAAM,EAAEa,IAAI,EAAEC,cAAc,CAAA,EAAE,GAAG1B,SAAS,CAAC,UAAU,EAAEY,UAAU,CAACe,IAAI,CAACC,MAAM,CAACjB,IAAI,CAAC,AAAC;IACpF,MAAM,EAAEkB,gBAAgB,CAAA,EAAEC,kBAAkB,CAAA,EAAEC,kBAAkB,CAAA,EAAE,GAAGxB,0BAA0B,EAAE,AAAC;IAClG,MAAMyB,eAAe,GAAG7B,kBAAkB,EAAE,AAAC;IAC7C,MAAM8B,YAAY,GAAG/B,yBAAyB,EAAE,AAAC;IACjD,MAAM,EAAEgC,SAAS,CAAA,EAAE,GAAG9B,YAAY,EAAE,AAAC;IAErC,MAAM+B,iBAAiB,GAAG;QAAED,SAAS;QAAEF,eAAe;QAAEI,SAAS,EAAEH,YAAY;KAAE,AAAC;IAElF,MAAMN,IAAI,GAAGf,UAAU,CAACe,IAAI,CAACC,MAAM,CAACD,IAAI,AAAC;IAEzC,IAAIU,kBAAkB,AAAsB,AAAC;IAC7C,IAAIX,cAAc,aAAdA,cAAc,WAAW,GAAzBA,KAAAA,CAAyB,GAAzBA,cAAc,CAAEY,SAAS,EAAE;QAC7B,MAAMC,YAAY,GAAGb,cAAc,CAACY,SAAS,CAACX,IAAI,EAAEQ,iBAAiB,CAAC,AAAC;QACvEE,kBAAkB,GAAGE,YAAY,CAACH,SAAS,CAAC;IAC9C,CAAC;IAED,MAAMA,SAAS,GAAGlC,yBAAyB,CAACmC,kBAAkB,CAAC,AAAC;IAChE,MAAMG,aAAa,GAAG5B,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACc,cAAc,MAAK,IAAI,AAAC;IAC/D,MAAMC,aAAa,GAAG9B,CAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACgB,eAAe,MAAK,IAAI,AAAC;QAClD/B,IAA8B;IAA5C,MAAMgC,KAAK,GAAGhC,CAAAA,IAA8B,GAA9BA,OAAAA,UAAU,aAAVA,UAAU,WAAM,GAAhBA,KAAAA,CAAgB,GAAhBA,UAAU,CAAEe,IAAI,CAACkB,OAAO,4BAAM,GAA9BjC,KAAAA,CAA8B,OAAJH,IAAI,cAA9BG,IAA8B,cAA9BA,IAA8B,GAAIH,IAAI,AAAC;IAErD,IAAIqC,UAAU,GAAG,KAAK,AAAC;IACvB,IAAIT,kBAAkB,EAAE;QACtBS,UAAU,GAAGT,kBAAkB,CAACU,IAAI,CAAC,CAAC9B,CAAC;gBAAKmB,GAAY;YAAZA,OAAAA,CAAAA,GAAY,GAAZA,SAAS,CAACnB,CAAC,CAAC,cAAZmB,GAAY,WAAS,GAArBA,KAAAA,CAAqB,GAArBA,GAAY,CAAEY,OAAO,CAAA;SAAA,CAAC,CAAC;IACrE,CAAC;IAED,MAAMC,iBAAiB,GAAGjC,oBAAoB,CAACoB,SAAS,CAAC,AAAC;IAE1D,MAAMc,qBAAqB,GAAG7C,QAAQ,CACpC;QAACI,IAAI;QAAEG,UAAU;QAAEqC,iBAAiB;QAAEf,SAAS;KAAC,EAChD,UAAY;QACV,MAAMiB,IAAI,GAAG,OAAMzB,cAAc,aAAdA,cAAc,WAAoB,GAAlCA,KAAAA,CAAkC,GAAlCA,cAAc,CAAE0B,kBAAkB,CAACzB,IAAI,EAAE;YAAEK,eAAe;YAAEI,SAAS;YAAEF,SAAS;SAAE,CAAC,CAAA,AAAC;YAChGiB,GAAU;QAAjB,OAAOA,CAAAA,GAAU,GAAVA,IAAI,aAAJA,IAAI,WAAM,GAAVA,KAAAA,CAAU,GAAVA,IAAI,CAAE1B,IAAI,cAAV0B,GAAU,cAAVA,GAAU,GAAI,EAAE,CAAC;IAC1B,CAAC,EACD;QAAEE,OAAO,EAAE,CAAC,CAAC3B,cAAc,IAAIoB,UAAU;KAAE,CAC5C,AAAC;IAEFxD,SAAS,CAAC,IAAM;QACdwC,kBAAkB,CAACrB,IAAI,EAAEyC,qBAAqB,CAACI,UAAU,CAAC,CAAC;QAC3D,IAAIJ,qBAAqB,CAACzB,IAAI,EAAE;YAC9BM,kBAAkB,CAACtB,IAAI,EAAEyC,qBAAqB,CAACzB,IAAI,CAAC,CAAC;QACvD,CAAC;IACH,CAAC,EAAE;QAACyB,qBAAqB;QAAEzC,IAAI;QAAEqB,kBAAkB;QAAEC,kBAAkB;KAAC,CAAC,CAAC;IAE1E,IAAIR,KAAK,GAAGb,CAAAA,IAAS,GAATA,GAAG,CAAC6C,KAAK,cAAT7C,IAAS,WAAO,GAAhBA,KAAAA,CAAgB,GAAhBA,IAAS,CAAEa,KAAK,AAAC;IAC7B,MAAMiC,OAAO,GAAG9C,CAAAA,IAAS,GAATA,GAAG,CAAC6C,KAAK,cAAT7C,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAE8C,OAAO,AAAC;IACnC,MAAMR,OAAO,GAAGtC,CAAAA,IAAS,GAATA,GAAG,CAAC6C,KAAK,cAAT7C,IAAS,WAAS,GAAlBA,KAAAA,CAAkB,GAAlBA,IAAS,CAAEsC,OAAO,AAAC;IAEnC,uDAAuD;IACvD,IAAIR,aAAa,IAAI,CAACiB,KAAK,CAACC,OAAO,CAACnC,KAAK,CAAC,EAAE;QAC1CA,KAAK,GAAG,OAAOA,KAAK,KAAK,QAAQ,GAAG;YAACA,KAAK;SAAC,GAAG,EAAE,CAAC;IACnD,CAAC;IAED,MAAMoC,YAAY,GAAGpE,OAAO,CAAC,IAAM;QACjC,IAAIqE,eAAe,GAAGJ,OAAO,GAAG;eAAIA,OAAO;SAAC,GAAG,EAAE,AAAC;QAElD,oCAAoC;QACpC,IAAId,aAAa,EAAE;YACjBkB,eAAe,GAAG;gBAAC;oBAAErC,KAAK,EAAEtB,iBAAiB;oBAAE4D,KAAK,EAAE,KAAK;iBAAE;mBAAKD,eAAe;aAAC,CAAC;QACrF,CAAC;QACD,OAAOA,eAAe,CAAC;IACzB,CAAC,EAAE;QAACJ,OAAO;QAAEd,aAAa;KAAC,CAAC,AAAC;IAE7B,MAAMoB,gBAAgB,GAAGvE,OAAO,CAC9B,IACEwE,OAAO,CACLJ,YAAY,CAACK,IAAI,CAAC,CAAC/C,CAAC,GAAK;YACvB,IAAIuB,aAAa,EAAE;gBACjB,OAAO,AAACjB,KAAK,CAAc0C,QAAQ,CAAChD,CAAC,CAACM,KAAK,CAAC,CAAC;YAC/C,CAAC;YACD,OAAOA,KAAK,KAAKN,CAAC,CAACM,KAAK,CAAC;QAC3B,CAAC,CAAC,CACH,EACH;QAACoC,YAAY;QAAEpC,KAAK;QAAEiB,aAAa;KAAC,CACrC,AAAC;IAEF,IAAI0B,WAAW,GAAG3C,KAAK,AAAC;IACxB,IAAI,CAACuC,gBAAgB,EAAE;QACrBI,WAAW,GAAG1B,aAAa,GAAG,EAAE,GAAG,EAAE,CAAC;IACxC,CAAC;IAEDlD,SAAS,CAAC,IAAM;QACd,MAAM6E,WAAW,GAAGR,YAAY,aAAZA,YAAY,WAAK,GAAjBA,KAAAA,CAAiB,GAAjBA,YAAY,AAAE,CAAC,CAAC,CAAC,AAAC;QAEtC,iFAAiF;QACjF,IAAI,CAACpC,KAAK,IAAI4C,WAAW,EAAE;YACzBtC,gBAAgB,CAACpB,IAAI,EAAE0D,WAAW,CAAC5C,KAAK,CAAC,CAAC;QAC5C,CAAC;IACH,CAAC,EAAE;QAACoC,YAAY;QAAE9B,gBAAgB;QAAEN,KAAK;QAAEd,IAAI;QAAE+B,aAAa;KAAC,CAAC,CAAC;IAEjE,qBACE,KAAC3C,GAAG;QAACgD,OAAO,EAAE,MAAM;kBAClB,cAAA,MAACnD,WAAW;YAAC0E,SAAS;;8BACpB,KAACzE,UAAU;oBAAC0E,EAAE,EAAE5D,IAAI;8BAAGmC,KAAK;kBAAc;8BAC1C,MAACnD,MAAM;oBACL6E,EAAE,EAAE;wBAAEC,QAAQ,EAAE,GAAG;wBAAEC,QAAQ,EAAE,GAAG;qBAAE;oBACpCH,EAAE,EAAE5D,IAAI;oBACRoD,KAAK,EAAEpD,IAAI;oBACXc,KAAK,EAAE2C,WAAW;oBAClBO,QAAQ,EAAE,CAACC,CAAC,GAAK;wBACf,mBAAmB;wBACnB,IAAIA,CAAC,CAACC,MAAM,CAACpD,KAAK,KAAK,IAAI,IAAImD,CAAC,CAACC,MAAM,CAACpD,KAAK,CAACqD,MAAM,KAAK,CAAC,EAAE;4BAC1D,IAAIlC,aAAa,EAAE;gCACjBb,gBAAgB,CAACpB,IAAI,EAAER,iBAAiB,CAAC,CAAC;4BAC5C,CAAC;4BACD,OAAO;wBACT,CAAC;wBACD4B,gBAAgB,CAACpB,IAAI,EAAEiE,CAAC,CAACC,MAAM,CAACpD,KAAK,CAAkB,CAAC;oBAC1D,CAAC;oBACDsD,QAAQ,EAAErC,aAAa;;wBAEtBQ,OAAO,kBACN,KAACpD,QAAQ;4BAAC2B,KAAK,EAAC,SAAS;4BAACuD,QAAQ;sCAAC,SAEnC;0BAAW,AACZ;wBAEAnB,YAAY,CAACiB,MAAM,KAAK,CAAC,kBACxB,KAAChF,QAAQ;4BAAC2B,KAAK,EAAC,OAAO;4BAACuD,QAAQ;sCAAC,YAEjC;0BAAW,AACZ;wBACAnB,YAAY,CAACvC,GAAG,CAAC,CAAC2D,MAAM,iBACvB,KAACnF,QAAQ;gCAAoB2B,KAAK,EAAEwD,MAAM,CAACxD,KAAK;0CAC7CwD,MAAM,CAAClB,KAAK;+BADAkB,MAAM,CAACxD,KAAK,CAEhB,AACZ,CAAC;;kBACK;gBACRyB,OAAO,kBAAI,KAAClD,cAAc,KAAG;;UAClB;MACV,CACN;AACJ,CAAC;AAED,SAASe,YAAY,CAAC,EAAEJ,IAAI,CAAA,EAAyB,EAAE;IACrD,MAAM,EAAE8C,KAAK,CAAA,EAAE,GAAGjD,mBAAmB,CAACG,IAAI,CAAC,AAAC;QACD8C,GAAY;IAAvD,MAAM,CAACyB,SAAS,EAAEC,YAAY,CAAC,GAAGzF,QAAQ,CAAC+D,CAAAA,GAAY,GAAZA,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAEhC,KAAK,cAAZgC,GAAY,cAAZA,GAAY,GAAI,EAAE,CAAC,AAAC;IAC/D,MAAM,EAAE1B,gBAAgB,CAAA,EAAE,GAAGtB,0BAA0B,EAAE,AAAC;IAE1DjB,SAAS,CAAC,IAAM;YACDiE,GAAY;QAAzB0B,YAAY,CAAC1B,CAAAA,GAAY,GAAZA,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAEhC,KAAK,cAAZgC,GAAY,cAAZA,GAAY,GAAI,EAAE,CAAC,CAAC;IACnC,CAAC,EAAE;QAACA,KAAK,aAALA,KAAK,WAAO,GAAZA,KAAAA,CAAY,GAAZA,KAAK,CAAEhC,KAAK;KAAC,CAAC,CAAC;IAEnB,qBACE,KAACxB,SAAS;QACRwB,KAAK,EAAEyD,SAAS;QAChBP,QAAQ,EAAE,CAACC,CAAC,GAAKO,YAAY,CAACP,CAAC,CAACC,MAAM,CAACpD,KAAK,CAAC;QAC7C2D,MAAM,EAAE,IAAMrD,gBAAgB,CAACpB,IAAI,EAAEuE,SAAS,CAAC;QAC/CG,WAAW,EAAE1E,IAAI;QACjBoD,KAAK,EAAEpD,IAAI;MACX,CACF;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAStD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAoKA"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":";AA8BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAwBtD,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA2KA"}

package/dist/components/Variables/VariableEditor.js

@@ -11,17 +11,32 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell, Table, Paper, TableHead, Switch, Typography, IconButton } from '@mui/material';
+import { useState, useMemo } from 'react';
+import { Button, Stack, Box, TableContainer, TableBody, TableRow, TableCell, Table, Paper, TableHead, Switch, Typography, IconButton, Alert } from '@mui/material';
 import { useImmer } from 'use-immer';
 import PencilIcon from 'mdi-material-ui/Pencil';
 import TrashIcon from 'mdi-material-ui/TrashCan';
 import ArrowUp from 'mdi-material-ui/ArrowUp';
 import ArrowDown from 'mdi-material-ui/ArrowDown';
 import { VariableEditForm } from './VariableEditorForm';
+function getValidation(variableDefinitions) {
+    const errors = [];
+    /**  Variable names must be unique */ const variableNames = variableDefinitions.map((variableDefinition)=>variableDefinition.spec.name);
+    const uniqueVariableNames = new Set(variableNames);
+    if (variableNames.length !== uniqueVariableNames.size) {
+        errors.push('Variable names must be unique');
+    }
+    return {
+        errors: errors,
+        isValid: errors.length === 0
+    };
+}
 export function VariableEditor(props) {
     const [variableDefinitions, setVariableDefinitions] = useImmer(props.variableDefinitions);
     const [variableEditIdx, setVariableEditIdx] = useState(null);
+    const validation = useMemo(()=>getValidation(variableDefinitions), [
+        variableDefinitions
+    ]);
     const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
     const removeVariable = (index)=>{
         setVariableDefinitions((draft)=>{
@@ -105,7 +120,7 @@ export function VariableEditor(props) {
                         justifyContent: "end",
                         children: [
                             /*#__PURE__*/ _jsx(Button, {
-                                disabled: props.variableDefinitions === variableDefinitions,
+                                disabled: props.variableDefinitions === variableDefinitions || !validation.isValid,
                                 variant: "contained",
                                 onClick: ()=>{
                                     props.onChange(variableDefinitions);
@@ -129,6 +144,10 @@ export function VariableEditor(props) {
                     /*#__PURE__*/ _jsxs(Stack, {
                         spacing: 2,
                         children: [
+                            !validation.isValid && validation.errors.map((error)=>/*#__PURE__*/ _jsx(Alert, {
+                                    severity: "error",
+                                    children: error
+                                }, error)),
                             /*#__PURE__*/ _jsx(TableContainer, {
                                 component: Paper,
                                 children: /*#__PURE__*/ _jsxs(Table, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n} from '@mui/material';\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 { VariableEditForm } from './VariableEditorForm';\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 currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];\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  };\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    <Box p={4}>\n      {currentEditingVariableDefinition && (\n        <>\n          <Typography variant=\"h3\" mb={2}>\n            Edit Variable\n          </Typography>\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      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"end\">\n            <Button\n              disabled={props.variableDefinitions === variableDefinitions}\n              variant=\"contained\"\n              onClick={() => {\n                props.onChange(variableDefinitions);\n              }}\n            >\n              Apply\n            </Button>\n            <Button\n              variant=\"outlined\"\n              onClick={() => {\n                props.onCancel();\n              }}\n            >\n              Cancel\n            </Button>\n          </Stack>\n          <Typography variant=\"h3\" mb={2}>\n            Variable List\n          </Typography>\n          <Stack spacing={2}>\n            <TableContainer component={Paper}>\n              <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Visibility</TableCell>\n                    <TableCell>Variable Name</TableCell>\n                    <TableCell>Variable Type</TableCell>\n                    <TableCell align=\"right\">Action</TableCell>\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>{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 onClick={addVariable} variant=\"contained\">\n                Add New Variable\n              </Button>\n            </Box>\n          </Stack>\n        </>\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","VariableEditor","props","variableDefinitions","setVariableDefinitions","variableEditIdx","setVariableEditIdx","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","push","kind","spec","name","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","length","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","spacing","justifyContent","disabled","onClick","component","sx","minWidth","aria-label","align","map","idx","scope","checked","e","target","fontWeight"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Variables/VariableEditor.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState, useMemo } from 'react';\nimport {\n  Button,\n  Stack,\n  Box,\n  TableContainer,\n  TableBody,\n  TableRow,\n  TableCell,\n  Table,\n  Paper,\n  TableHead,\n  Switch,\n  Typography,\n  IconButton,\n  Alert,\n} from '@mui/material';\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 { VariableEditForm } from './VariableEditorForm';\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 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  };\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    <Box p={4}>\n      {currentEditingVariableDefinition && (\n        <>\n          <Typography variant=\"h3\" mb={2}>\n            Edit Variable\n          </Typography>\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      )}\n      {!currentEditingVariableDefinition && (\n        <>\n          <Stack direction=\"row\" spacing={1} justifyContent=\"end\">\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\n              variant=\"outlined\"\n              onClick={() => {\n                props.onCancel();\n              }}\n            >\n              Cancel\n            </Button>\n          </Stack>\n          <Typography variant=\"h3\" mb={2}>\n            Variable List\n          </Typography>\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 component={Paper}>\n              <Table sx={{ minWidth: 650 }} aria-label=\"simple table\">\n                <TableHead>\n                  <TableRow>\n                    <TableCell>Visibility</TableCell>\n                    <TableCell>Variable Name</TableCell>\n                    <TableCell>Variable Type</TableCell>\n                    <TableCell align=\"right\">Action</TableCell>\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>{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 onClick={addVariable} variant=\"contained\">\n                Add New Variable\n              </Button>\n            </Box>\n          </Stack>\n        </>\n      )}\n    </Box>\n  );\n}\n"],"names":["useState","useMemo","Button","Stack","Box","TableContainer","TableBody","TableRow","TableCell","Table","Paper","TableHead","Switch","Typography","IconButton","Alert","useImmer","PencilIcon","TrashIcon","ArrowUp","ArrowDown","VariableEditForm","getValidation","variableDefinitions","errors","variableNames","map","variableDefinition","spec","name","uniqueVariableNames","Set","length","size","push","isValid","VariableEditor","props","setVariableDefinitions","variableEditIdx","setVariableEditIdx","validation","currentEditingVariableDefinition","removeVariable","index","draft","splice","addVariable","kind","value","toggleVariableVisibility","visible","v","display","hidden","changeVariableOrder","direction","prevElement","currentElement","nextElement","p","variant","mb","initialVariableDefinition","onChange","definition","onCancel","spacing","justifyContent","disabled","onClick","error","severity","component","sx","minWidth","aria-label","align","idx","scope","checked","e","target","fontWeight"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWtD,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eAyJA"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":";AA6BA,OAAO,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AA6BtD,wBAAgB,gBAAgB,CAAC,EAC/B,yBAAyB,EACzB,QAAQ,EACR,QAAQ,GACT,EAAE;IACD,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,QAAQ,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC5C,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,eA8JA"}