@perses-dev/dashboards 0.53.0-rc.2 → 0.53.0

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

@@ -43,7 +43,7 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
     });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
+            title ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
                 id: id,
                 component: "header",
                 "aria-labelledby": titleElementId,
@@ -99,6 +99,33 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                         }
                     }), sx),
                 ...rest
+            }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
+                id: id,
+                component: "header",
+                "aria-describedby": descriptionTooltipId,
+                sx: (0, _components.combineSx)({
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    zIndex: 5,
+                    containerType: 'inline-size',
+                    containerName: _constants.HEADER_ACTIONS_CONTAINER_NAME
+                }, sx),
+                ...rest,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelActions.PanelActions, {
+                    title: title,
+                    description: description,
+                    descriptionTooltipId: descriptionTooltipId,
+                    links: links,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
+                    extra: extra,
+                    queryResults: queryResults,
+                    pluginActions: pluginActions,
+                    itemActions: actionButtons,
+                    showIcons: showIcons
+                })
             }),
             confirmDialog
         ]

package/dist/cjs/components/PanelDrawer/PanelDrawer.js

@@ -40,6 +40,7 @@ const _context = require("../../context");
 const _PanelEditorForm = require("./PanelEditorForm");
 const PanelDrawer = ()=>{
     const panelEditor = (0, _context.usePanelEditor)();
+    const panelKey = (0, _context.usePanelKey)(panelEditor?.panelGroupItemId);
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = (0, _react.useState)(false);
     // Drawer is open if we have a model and we're not transitioning out
@@ -72,13 +73,16 @@ const PanelDrawer = ()=>{
         return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
             isOpen: isOpen,
             onClose: handleClickOut,
-            SlideProps: {
-                onExited: handleExited
+            slotProps: {
+                transition: {
+                    onExited: handleExited
+                }
             },
             "data-testid": "panel-editor",
             children: panelEditor && /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                 FallbackComponent: _components.ErrorAlert,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
+                    panelKey: panelKey,
                     initialAction: panelEditor.mode,
                     initialValues: panelEditor.initialValues,
                     onSave: handleSave,
@@ -90,7 +94,8 @@ const PanelDrawer = ()=>{
         handleExited,
         handleSave,
         isOpen,
-        panelEditor
+        panelEditor,
+        panelKey
     ]);
     // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
     if (panelEditor?.panelGroupItemId?.repeatVariable) {

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

@@ -40,7 +40,7 @@ const _PanelEditorProvider = require("../../context/PanelEditorProvider/PanelEdi
 const _usePanelEditor = require("./usePanelEditor");
 const _PanelQueriesSharedControls = require("./PanelQueriesSharedControls");
 function PanelEditorForm(props) {
-    const { initialValues, initialAction, onSave, onClose } = props;
+    const { initialValues, initialAction, panelKey, onSave, onClose } = props;
     const panelGroups = (0, _context.useListPanelGroups)();
     const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
@@ -154,11 +154,26 @@ function PanelEditorForm(props) {
                         borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                     },
                     children: [
-                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
-                            variant: "h2",
+                        /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            alignItems: "center",
                             children: [
-                                titleAction,
-                                " Panel"
+                                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                    variant: "h2",
+                                    children: [
+                                        titleAction,
+                                        " Panel"
+                                    ]
+                                }),
+                                panelKey && /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Typography, {
+                                    variant: "subtitle1",
+                                    children: [
+                                        "(ID: ",
+                                        panelKey,
+                                        ")"
+                                    ]
+                                })
                             ]
                         }),
                         /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {

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

@@ -61,11 +61,11 @@ const ARIA_LABEL_TEXT = {
     moveGroupDown: (groupName)=>`move group ${groupName} down`,
     moveGroupUp: (groupName)=>`move group ${groupName} up`,
     // Panel buttons
-    viewPanel: (panelName)=>`toggle panel ${panelName} view mode`,
-    editPanel: (panelName)=>`edit panel ${panelName}`,
-    duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
-    deletePanel: (panelName)=>`delete panel ${panelName}`,
-    showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
-    movePanel: (panelName)=>`move panel ${panelName}`,
-    openQueryView: (panelName)=>`open query view for panel ${panelName}`
+    viewPanel: (panelName)=>panelName ? `toggle panel ${panelName} view mode` : 'toggle panel view mode',
+    editPanel: (panelName)=>panelName ? `edit panel ${panelName}` : 'edit panel',
+    duplicatePanel: (panelName)=>panelName ? `duplicate panel ${panelName}` : 'duplicate panel',
+    deletePanel: (panelName)=>panelName ? `delete panel ${panelName}` : 'delete panel',
+    showPanelActions: (panelName)=>panelName ? `show panel actions for ${panelName}` : 'show panel actions',
+    movePanel: (panelName)=>panelName ? `move panel ${panelName}` : 'move panel',
+    openQueryView: (panelName)=>panelName ? `open query view for panel ${panelName}` : 'open query view for panel'
 };

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -66,6 +66,9 @@ _export(exports, {
     get usePanelGroupIds () {
         return usePanelGroupIds;
     },
+    get usePanelKey () {
+        return usePanelKey;
+    },
     get useSaveChangesConfirmationDialog () {
         return useSaveChangesConfirmationDialog;
     },
@@ -186,6 +189,17 @@ function useDeletePanelGroupDialog() {
         closeDeletePanelGroupDialog: ()=>closeDeletePanelGroupDialog()
     };
 }
+function usePanelKey(panelGroupItemId) {
+    const panelKey = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
+        if (panelGroupItemId === undefined) {
+            return undefined;
+        }
+        return store.panelGroups[panelGroupItemId.panelGroupId]?.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+    }, [
+        panelGroupItemId
+    ]));
+    return panelKey;
+}
 function usePanel(panelGroupItemId) {
     const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
     const panel = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{

package/dist/components/Panel/PanelActions.d.ts

@@ -3,7 +3,7 @@ import { QueryData } from '@perses-dev/plugin-system';
 import { Link } from '@perses-dev/core';
 import { PanelOptions } from './Panel';
 export interface PanelActionsProps {
-    title: string;
+    title?: string;
     description?: string;
     descriptionTooltipId: string;
     links?: Link[];

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

@@ -1 +1 @@
-{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmD,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAatD,OAAO,EAAE,IAAI,EAAU,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgQpD,CAAC"}
+{"version":3,"file":"PanelActions.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelActions.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAmD,SAAS,EAAqB,MAAM,OAAO,CAAC;AAEtG,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAatD,OAAO,EAAE,IAAI,EAAU,MAAM,kBAAkB,CAAC;AAUhD,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAQvC,MAAM,WAAW,iBAAiB;IAChC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,oBAAoB,EAAE,MAAM,CAAC;IAC7B,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,YAAY,CAAC,EAAE;QACb,gBAAgB,EAAE,MAAM,IAAI,CAAC;QAC7B,qBAAqB,EAAE,MAAM,IAAI,CAAC;QAClC,kBAAkB,EAAE,MAAM,IAAI,CAAC;KAChC,CAAC;IACF,YAAY,CAAC,EAAE;QACb,aAAa,CAAC,EAAE,OAAO,CAAC;QACxB,gBAAgB,EAAE,MAAM,IAAI,CAAC;KAC9B,CAAC;IACF,kBAAkB,CAAC,EAAE;QACnB,OAAO,EAAE,MAAM,IAAI,CAAC;KACrB,CAAC;IACF,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,WAAW,CAAC,EAAE,SAAS,EAAE,CAAC;IAC1B,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACtC;AASD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAgQpD,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 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 { Stack, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport MenuIcon from 'mdi-material-ui/Menu';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport AlertCircleIcon from 'mdi-material-ui/AlertCircle';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport LightningBoltIcon from 'mdi-material-ui/LightningBolt';\nimport { Link, Notice } from '@perses-dev/core';\nimport {\n  ARIA_LABEL_TEXT,\n  HEADER_ACTIONS_CONTAINER_NAME,\n  HEADER_MEDIUM_WIDTH,\n  HEADER_SMALL_WIDTH,\n  TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\nimport { PanelOptions } from './Panel';\n\nconst noticeTypeToIcon: Record<Notice['type'], ReactNode> = {\n  error: <AlertCircleIcon color=\"error\" />,\n  warning: <AlertIcon fontSize=\"inherit\" color=\"warning\" />,\n  info: <InformationOutlineIcon fontSize=\"inherit\" color=\"info\" />,\n};\n\nexport interface PanelActionsProps {\n  title: string;\n  description?: string;\n  descriptionTooltipId: string;\n  links?: Link[];\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  viewQueriesHandler?: {\n    onClick: () => void;\n  };\n  queryResults: QueryData[];\n  pluginActions?: ReactNode[];\n  itemActions?: ReactNode[];\n  areItemActionsDisabled?: boolean;\n  showIcons: PanelOptions['showIcons'];\n}\n\nconst ConditionalBox = styled(Box)({\n  display: 'none',\n  alignItems: 'center',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n  editHandlers,\n  readHandlers,\n  viewQueriesHandler,\n  extra,\n  title,\n  description,\n  descriptionTooltipId,\n  links,\n  queryResults,\n  pluginActions = [],\n  itemActions = [],\n  showIcons,\n}) => {\n  const descriptionAction = useMemo((): ReactNode | undefined => {\n    if (description && description.trim().length > 0) {\n      return (\n        <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n          <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n            <InformationOutlineIcon\n              aria-describedby=\"info-tooltip\"\n              aria-hidden={false}\n              fontSize=\"inherit\"\n              sx={{ color: (theme) => theme.palette.text.secondary }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [descriptionTooltipId, description]);\n\n  const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n  const extraActions = editHandlers === undefined && extra;\n\n  const queryStateIndicator = useMemo((): ReactNode | undefined => {\n    const hasData = queryResults.some((q) => q.data);\n    const isFetching = queryResults.some((q) => q.isFetching);\n    const queryErrors = queryResults.filter((q) => q.error);\n\n    if (isFetching && hasData) {\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (queryErrors.length > 0) {\n      const errorTexts = queryErrors\n        .map((q) => q.error)\n        .map((e) => e.message)\n        .join('\\n');\n\n      return (\n        <InfoTooltip description={errorTexts}>\n          <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n            <AlertIcon\n              fontSize=\"inherit\"\n              sx={{\n                color: (theme) => theme.palette.error.main,\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\n  const noticesIndicator = useMemo(() => {\n    const notices = queryResults.flatMap((q) => {\n      return q.data?.metadata?.notices ?? [];\n    });\n\n    if (notices.length > 0) {\n      const lastNotice = notices[notices.length - 1]!;\n\n      return (\n        <InfoTooltip description={lastNotice.message}>\n          <HeaderIconButton aria-label=\"panel notices\" size=\"small\">\n            {noticeTypeToIcon[lastNotice.type]}\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\n  const readActions = useMemo((): ReactNode | undefined => {\n    if (readHandlers !== undefined) {\n      return (\n        <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n            size=\"small\"\n            onClick={readHandlers.onViewPanelClick}\n          >\n            {readHandlers.isPanelViewed ? (\n              <ArrowCollapseIcon fontSize=\"inherit\" />\n            ) : (\n              <ArrowExpandIcon fontSize=\"inherit\" />\n            )}\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [readHandlers, title]);\n\n  const viewQueryAction = useMemo(() => {\n    if (!viewQueriesHandler?.onClick) return null;\n    return (\n      <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n        <HeaderIconButton\n          aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n          size=\"small\"\n          onClick={viewQueriesHandler.onClick}\n        >\n          <DatabaseSearch fontSize=\"inherit\" />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }, [viewQueriesHandler, title]);\n\n  const editActions = useMemo((): ReactNode | undefined => {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      return (\n        <>\n          <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onEditPanelClick}\n            >\n              <PencilIcon fontSize=\"inherit\" />\n            </HeaderIconButton>\n          </InfoTooltip>\n          <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onDuplicatePanelClick}\n            >\n              <ContentCopyIcon\n                fontSize=\"inherit\"\n                sx={{\n                  // Shrink this icon a little bit to look more consistent\n                  // with the other icons in the header.\n                  transform: 'scale(0.925)',\n                }}\n              />\n            </HeaderIconButton>\n          </InfoTooltip>\n          <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onDeletePanelClick}\n            >\n              <DeleteIcon fontSize=\"inherit\" />\n            </HeaderIconButton>\n          </InfoTooltip>\n        </>\n      );\n    }\n    return undefined;\n  }, [editHandlers, title]);\n\n  const moveAction = useMemo((): ReactNode | undefined => {\n    if (editActions && !readHandlers?.isPanelViewed) {\n      return (\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [editActions, readHandlers, title]);\n\n  const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n  // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n  const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n    showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\n\n  return (\n    <>\n      {/* small panel width: move all icons except move/grab to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n        })}\n      >\n        {divider}\n        <OnHover>\n          <OverflowMenu title={title}>\n            {descriptionAction} {linksAction} {queryStateIndicator} {noticesIndicator} {extraActions} {viewQueryAction}\n            {readActions} {pluginActions} {itemActions}\n            {editActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* medium panel width: move edit icons to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n            display: 'flex',\n          },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        {noticesIndicator}\n        <OnHover>\n          {extraActions}\n          {readActions}\n          <OverflowMenu title={title}>\n            {editActions} {viewQueryAction} {pluginActions} {itemActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* large panel width: show all icons in panel header */}\n      <ConditionalBox\n        sx={(theme) => ({\n          // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n          display: 'flex',\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        {noticesIndicator}\n        <OnHover>\n          {extraActions}\n          {viewQueryAction}\n          {readActions} {editActions}\n          {/* Show plugin actions inside a menu if it gets crowded */}\n          {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n          {itemActions.length <= 1 ? (\n            itemActions\n          ) : (\n            <InfoTooltip description={`${itemActions.length} actions`}>\n              <OverflowMenu icon={<LightningBoltIcon fontSize=\"inherit\" />} direction=\"column\" title={title}>\n                {itemActions}\n              </OverflowMenu>\n            </InfoTooltip>\n          )}\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n    </>\n  );\n};\n\nconst OverflowMenu: React.FC<\n  PropsWithChildren<{ title: string; icon?: ReactElement; direction?: 'row' | 'column' }>\n> = ({ children, title, icon, direction = 'row' }) => {\n  const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n  // do not show overflow menu if there is no content (for example, edit actions are hidden)\n  const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n  if (!hasContent) {\n    return null;\n  }\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n    setAnchorPosition(event.currentTarget.getBoundingClientRect());\n  };\n\n  const handleClose = (): void => {\n    setAnchorPosition(undefined);\n  };\n\n  const open = Boolean(anchorPosition);\n  const id = open ? 'actions-menu' : undefined;\n\n  return (\n    <>\n      <HeaderIconButton\n        className=\"show-actions\"\n        aria-describedby={id}\n        onClick={handleClick}\n        aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n        size=\"small\"\n      >\n        {icon ?? <MenuIcon fontSize=\"inherit\" />}\n      </HeaderIconButton>\n      <Popover\n        id={id}\n        open={open}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={anchorPosition}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n      >\n        <Stack direction={direction} alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n          {children}\n        </Stack>\n      </Popover>\n    </>\n  );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","AlertCircleIcon","InformationOutlineIcon","LightningBoltIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","noticeTypeToIcon","error","color","warning","fontSize","info","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","itemActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","sx","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","errorTexts","map","e","message","join","main","noticesIndicator","notices","flatMap","metadata","lastNotice","type","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","icon","direction","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","padding"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Panel/PanelActions.tsx"],"sourcesContent":["// Copyright 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 { Stack, Box, Popover, CircularProgress, styled, PopoverPosition } from '@mui/material';\nimport { isValidElement, PropsWithChildren, ReactElement, ReactNode, useMemo, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { QueryData } from '@perses-dev/plugin-system';\nimport DatabaseSearch from 'mdi-material-ui/DatabaseSearch';\nimport ArrowCollapseIcon from 'mdi-material-ui/ArrowCollapse';\nimport ArrowExpandIcon from 'mdi-material-ui/ArrowExpand';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopyIcon from 'mdi-material-ui/ContentCopy';\nimport MenuIcon from 'mdi-material-ui/Menu';\nimport AlertIcon from 'mdi-material-ui/Alert';\nimport AlertCircleIcon from 'mdi-material-ui/AlertCircle';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport LightningBoltIcon from 'mdi-material-ui/LightningBolt';\nimport { Link, Notice } from '@perses-dev/core';\nimport {\n  ARIA_LABEL_TEXT,\n  HEADER_ACTIONS_CONTAINER_NAME,\n  HEADER_MEDIUM_WIDTH,\n  HEADER_SMALL_WIDTH,\n  TOOLTIP_TEXT,\n} from '../../constants';\nimport { HeaderIconButton } from './HeaderIconButton';\nimport { PanelLinks } from './PanelLinks';\nimport { PanelOptions } from './Panel';\n\nconst noticeTypeToIcon: Record<Notice['type'], ReactNode> = {\n  error: <AlertCircleIcon color=\"error\" />,\n  warning: <AlertIcon fontSize=\"inherit\" color=\"warning\" />,\n  info: <InformationOutlineIcon fontSize=\"inherit\" color=\"info\" />,\n};\n\nexport interface PanelActionsProps {\n  title?: string;\n  description?: string;\n  descriptionTooltipId: string;\n  links?: Link[];\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n  readHandlers?: {\n    isPanelViewed?: boolean;\n    onViewPanelClick: () => void;\n  };\n  viewQueriesHandler?: {\n    onClick: () => void;\n  };\n  queryResults: QueryData[];\n  pluginActions?: ReactNode[];\n  itemActions?: ReactNode[];\n  areItemActionsDisabled?: boolean;\n  showIcons: PanelOptions['showIcons'];\n}\n\nconst ConditionalBox = styled(Box)({\n  display: 'none',\n  alignItems: 'center',\n  flexGrow: 1,\n  justifyContent: 'flex-end',\n});\n\nexport const PanelActions: React.FC<PanelActionsProps> = ({\n  editHandlers,\n  readHandlers,\n  viewQueriesHandler,\n  extra,\n  title,\n  description,\n  descriptionTooltipId,\n  links,\n  queryResults,\n  pluginActions = [],\n  itemActions = [],\n  showIcons,\n}) => {\n  const descriptionAction = useMemo((): ReactNode | undefined => {\n    if (description && description.trim().length > 0) {\n      return (\n        <InfoTooltip id={descriptionTooltipId} description={description} enterDelay={100}>\n          <HeaderIconButton aria-label=\"panel description\" size=\"small\">\n            <InformationOutlineIcon\n              aria-describedby=\"info-tooltip\"\n              aria-hidden={false}\n              fontSize=\"inherit\"\n              sx={{ color: (theme) => theme.palette.text.secondary }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [descriptionTooltipId, description]);\n\n  const linksAction = links && links.length > 0 && <PanelLinks links={links} />;\n  const extraActions = editHandlers === undefined && extra;\n\n  const queryStateIndicator = useMemo((): ReactNode | undefined => {\n    const hasData = queryResults.some((q) => q.data);\n    const isFetching = queryResults.some((q) => q.isFetching);\n    const queryErrors = queryResults.filter((q) => q.error);\n\n    if (isFetching && hasData) {\n      return <CircularProgress aria-label=\"loading\" size=\"1.125rem\" />;\n    } else if (queryErrors.length > 0) {\n      const errorTexts = queryErrors\n        .map((q) => q.error)\n        .map((e) => e.message)\n        .join('\\n');\n\n      return (\n        <InfoTooltip description={errorTexts}>\n          <HeaderIconButton aria-label=\"panel errors\" size=\"small\">\n            <AlertIcon\n              fontSize=\"inherit\"\n              sx={{\n                color: (theme) => theme.palette.error.main,\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\n  const noticesIndicator = useMemo(() => {\n    const notices = queryResults.flatMap((q) => {\n      return q.data?.metadata?.notices ?? [];\n    });\n\n    if (notices.length > 0) {\n      const lastNotice = notices[notices.length - 1]!;\n\n      return (\n        <InfoTooltip description={lastNotice.message}>\n          <HeaderIconButton aria-label=\"panel notices\" size=\"small\">\n            {noticeTypeToIcon[lastNotice.type]}\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n  }, [queryResults]);\n\n  const readActions = useMemo((): ReactNode | undefined => {\n    if (readHandlers !== undefined) {\n      return (\n        <InfoTooltip description={TOOLTIP_TEXT.viewPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.viewPanel(title)}\n            size=\"small\"\n            onClick={readHandlers.onViewPanelClick}\n          >\n            {readHandlers.isPanelViewed ? (\n              <ArrowCollapseIcon fontSize=\"inherit\" />\n            ) : (\n              <ArrowExpandIcon fontSize=\"inherit\" />\n            )}\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [readHandlers, title]);\n\n  const viewQueryAction = useMemo(() => {\n    if (!viewQueriesHandler?.onClick) return null;\n    return (\n      <InfoTooltip description={TOOLTIP_TEXT.queryView}>\n        <HeaderIconButton\n          aria-label={ARIA_LABEL_TEXT.openQueryView(title)}\n          size=\"small\"\n          onClick={viewQueriesHandler.onClick}\n        >\n          <DatabaseSearch fontSize=\"inherit\" />\n        </HeaderIconButton>\n      </InfoTooltip>\n    );\n  }, [viewQueriesHandler, title]);\n\n  const editActions = useMemo((): ReactNode | undefined => {\n    if (editHandlers !== undefined) {\n      // If there are edit handlers, always just show the edit buttons\n      return (\n        <>\n          <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onEditPanelClick}\n            >\n              <PencilIcon fontSize=\"inherit\" />\n            </HeaderIconButton>\n          </InfoTooltip>\n          <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onDuplicatePanelClick}\n            >\n              <ContentCopyIcon\n                fontSize=\"inherit\"\n                sx={{\n                  // Shrink this icon a little bit to look more consistent\n                  // with the other icons in the header.\n                  transform: 'scale(0.925)',\n                }}\n              />\n            </HeaderIconButton>\n          </InfoTooltip>\n          <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n            <HeaderIconButton\n              aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n              size=\"small\"\n              onClick={editHandlers.onDeletePanelClick}\n            >\n              <DeleteIcon fontSize=\"inherit\" />\n            </HeaderIconButton>\n          </InfoTooltip>\n        </>\n      );\n    }\n    return undefined;\n  }, [editHandlers, title]);\n\n  const moveAction = useMemo((): ReactNode | undefined => {\n    if (editActions && !readHandlers?.isPanelViewed) {\n      return (\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      );\n    }\n    return undefined;\n  }, [editActions, readHandlers, title]);\n\n  const divider = <Box sx={{ flexGrow: 1 }}></Box>;\n\n  // By default, the panel header shows certain icons only on hover if the panel is in non-editing, non-fullscreen mode\n  const OnHover = ({ children }: PropsWithChildren): ReactNode =>\n    showIcons === 'hover' ? <Box sx={{ display: 'var(--panel-hover, none)' }}>{children}</Box> : <>{children}</>;\n\n  return (\n    <>\n      {/* small panel width: move all icons except move/grab to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(0, HEADER_SMALL_WIDTH)]: { display: 'flex' },\n        })}\n      >\n        {divider}\n        <OnHover>\n          <OverflowMenu title={title}>\n            {descriptionAction} {linksAction} {queryStateIndicator} {noticesIndicator} {extraActions} {viewQueryAction}\n            {readActions} {pluginActions} {itemActions}\n            {editActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* medium panel width: move edit icons to overflow menu */}\n      <ConditionalBox\n        sx={(theme) => ({\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).between(HEADER_SMALL_WIDTH, HEADER_MEDIUM_WIDTH)]: {\n            display: 'flex',\n          },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        {noticesIndicator}\n        <OnHover>\n          {extraActions}\n          {readActions}\n          <OverflowMenu title={title}>\n            {editActions} {viewQueryAction} {pluginActions} {itemActions}\n          </OverflowMenu>\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n\n      {/* large panel width: show all icons in panel header */}\n      <ConditionalBox\n        sx={(theme) => ({\n          // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons\n          display: 'flex',\n          [theme.containerQueries(HEADER_ACTIONS_CONTAINER_NAME).down(HEADER_MEDIUM_WIDTH)]: { display: 'none' },\n        })}\n      >\n        <OnHover>\n          {descriptionAction} {linksAction}\n        </OnHover>\n        {divider} {queryStateIndicator}\n        {noticesIndicator}\n        <OnHover>\n          {extraActions}\n          {viewQueryAction}\n          {readActions} {editActions}\n          {/* Show plugin actions inside a menu if it gets crowded */}\n          {pluginActions.length <= 1 ? pluginActions : <OverflowMenu title={title}>{pluginActions}</OverflowMenu>}\n          {itemActions.length <= 1 ? (\n            itemActions\n          ) : (\n            <InfoTooltip description={`${itemActions.length} actions`}>\n              <OverflowMenu icon={<LightningBoltIcon fontSize=\"inherit\" />} direction=\"column\" title={title}>\n                {itemActions}\n              </OverflowMenu>\n            </InfoTooltip>\n          )}\n          {moveAction}\n        </OnHover>\n      </ConditionalBox>\n    </>\n  );\n};\n\nconst OverflowMenu: React.FC<\n  PropsWithChildren<{ title?: string; icon?: ReactElement; direction?: 'row' | 'column' }>\n> = ({ children, title, icon, direction = 'row' }) => {\n  const [anchorPosition, setAnchorPosition] = useState<PopoverPosition>();\n\n  // do not show overflow menu if there is no content (for example, edit actions are hidden)\n  const hasContent = isValidElement(children) || (Array.isArray(children) && children.some(isValidElement));\n  if (!hasContent) {\n    return null;\n  }\n\n  const handleClick = (event: React.MouseEvent<HTMLElement>): void => {\n    setAnchorPosition(event.currentTarget.getBoundingClientRect());\n  };\n\n  const handleClose = (): void => {\n    setAnchorPosition(undefined);\n  };\n\n  const open = Boolean(anchorPosition);\n  const id = open ? 'actions-menu' : undefined;\n\n  return (\n    <>\n      <HeaderIconButton\n        className=\"show-actions\"\n        aria-describedby={id}\n        onClick={handleClick}\n        aria-label={ARIA_LABEL_TEXT.showPanelActions(title)}\n        size=\"small\"\n      >\n        {icon ?? <MenuIcon fontSize=\"inherit\" />}\n      </HeaderIconButton>\n      <Popover\n        id={id}\n        open={open}\n        anchorReference=\"anchorPosition\"\n        anchorPosition={anchorPosition}\n        onClose={handleClose}\n        anchorOrigin={{\n          vertical: 'bottom',\n          horizontal: 'left',\n        }}\n      >\n        <Stack direction={direction} alignItems=\"center\" sx={{ padding: 1 }} onClick={handleClose}>\n          {children}\n        </Stack>\n      </Popover>\n    </>\n  );\n};\n"],"names":["Stack","Box","Popover","CircularProgress","styled","isValidElement","useMemo","useState","InfoTooltip","DatabaseSearch","ArrowCollapseIcon","ArrowExpandIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopyIcon","MenuIcon","AlertIcon","AlertCircleIcon","InformationOutlineIcon","LightningBoltIcon","ARIA_LABEL_TEXT","HEADER_ACTIONS_CONTAINER_NAME","HEADER_MEDIUM_WIDTH","HEADER_SMALL_WIDTH","TOOLTIP_TEXT","HeaderIconButton","PanelLinks","noticeTypeToIcon","error","color","warning","fontSize","info","ConditionalBox","display","alignItems","flexGrow","justifyContent","PanelActions","editHandlers","readHandlers","viewQueriesHandler","extra","title","description","descriptionTooltipId","links","queryResults","pluginActions","itemActions","showIcons","descriptionAction","trim","length","id","enterDelay","aria-label","size","aria-describedby","aria-hidden","sx","theme","palette","text","secondary","undefined","linksAction","extraActions","queryStateIndicator","hasData","some","q","data","isFetching","queryErrors","filter","errorTexts","map","e","message","join","main","noticesIndicator","notices","flatMap","metadata","lastNotice","type","readActions","viewPanel","onClick","onViewPanelClick","isPanelViewed","viewQueryAction","queryView","openQueryView","editActions","editPanel","onEditPanelClick","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","moveAction","movePanel","className","cursor","divider","OnHover","children","containerQueries","between","OverflowMenu","down","icon","direction","anchorPosition","setAnchorPosition","hasContent","Array","isArray","handleClick","event","currentTarget","getBoundingClientRect","handleClose","open","Boolean","showPanelActions","anchorReference","onClose","anchorOrigin","vertical","horizontal","padding"],"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,EAAc,eAAe,EAA8B,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAqD,MAAM,2BAA2B,CAAC;AACrH,OAAO,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAExD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,KAAK,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,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,UAAU,EAAE,CAAC;IACrC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,KAAK,EACL,aAAa,EACb,qBAAqB,EACrB,SAAS,EACT,kBAAkB,EAClB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CAgFjC"}
+{"version":3,"file":"PanelHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelHeader.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,eAAe,EAA8B,MAAM,eAAe,CAAC;AAExF,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,UAAU,EAAE,SAAS,EAAqD,MAAM,2BAA2B,CAAC;AACrH,OAAO,EAAE,YAAY,EAAE,SAAS,EAAU,MAAM,OAAO,CAAC;AAExD,OAAO,EAAgB,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACjE,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AAGvC,KAAK,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,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,IAAI,EAAE,CAAC;IACf,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,YAAY,EAAE,SAAS,EAAE,CAAC;IAC1B,kBAAkB,CAAC,EAAE,iBAAiB,CAAC,oBAAoB,CAAC,CAAC;IAC7D,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,YAAY,CAAC,EAAE,iBAAiB,CAAC,cAAc,CAAC,CAAC;IACjD,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;IAC5B,qBAAqB,CAAC,EAAE,UAAU,EAAE,CAAC;IACrC,SAAS,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/B;AAED,wBAAgB,WAAW,CAAC,EAC1B,EAAE,EACF,KAAK,EAAE,QAAQ,EACf,WAAW,EAAE,cAAc,EAC3B,KAAK,EACL,YAAY,EACZ,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,KAAK,EACL,aAAa,EACb,qBAAqB,EACrB,SAAS,EACT,kBAAkB,EAClB,SAAS,EACT,GAAG,IAAI,EACR,EAAE,gBAAgB,GAAG,YAAY,CAmHjC"}

package/dist/components/Panel/PanelHeader.js

@@ -33,7 +33,7 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
     });
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(CardHeader, {
+            title ? /*#__PURE__*/ _jsx(CardHeader, {
                 id: id,
                 component: "header",
                 "aria-labelledby": titleElementId,
@@ -89,6 +89,33 @@ export function PanelHeader({ id, title: rawTitle, description: rawDescription,
                         }
                     }), sx),
                 ...rest
+            }) : /*#__PURE__*/ _jsx(Stack, {
+                id: id,
+                component: "header",
+                "aria-describedby": descriptionTooltipId,
+                sx: combineSx({
+                    position: 'absolute',
+                    right: 0,
+                    top: 0,
+                    zIndex: 5,
+                    containerType: 'inline-size',
+                    containerName: HEADER_ACTIONS_CONTAINER_NAME
+                }, sx),
+                ...rest,
+                children: /*#__PURE__*/ _jsx(PanelActions, {
+                    title: title,
+                    description: description,
+                    descriptionTooltipId: descriptionTooltipId,
+                    links: links,
+                    readHandlers: readHandlers,
+                    editHandlers: editHandlers,
+                    viewQueriesHandler: viewQueriesHandler,
+                    extra: extra,
+                    queryResults: queryResults,
+                    pluginActions: pluginActions,
+                    itemActions: actionButtons,
+                    showIcons: showIcons
+                })
             }),
             confirmDialog
         ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 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, CardHeaderProps, Stack, Typography, Tooltip } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { ItemAction, QueryData, useAllVariableValues, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode, useRef } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\nimport { PanelOptions } from './Panel';\nimport { useSelectionItemActions } from './useSelectionItemActions';\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  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  viewQueriesHandler?: PanelActionsProps['viewQueriesHandler'];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n  pluginActions?: ReactNode[];\n  itemActionsListConfig?: ItemAction[];\n  showIcons: PanelOptions['showIcons'];\n  dimension?: { width: number };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  pluginActions,\n  itemActionsListConfig,\n  showIcons,\n  viewQueriesHandler,\n  dimension,\n  ...rest\n}: PanelHeaderProps): ReactElement {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n  const variableState = useAllVariableValues();\n\n  const textRef = useRef<HTMLDivElement>(null);\n\n  const isEllipsisActive =\n    textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;\n\n  const { actionButtons, confirmDialog } = useSelectionItemActions({\n    actions: itemActionsListConfig,\n    variableState,\n    disabledWithEmptySelection: true,\n  });\n\n  return (\n    <>\n      <CardHeader\n        id={id}\n        component=\"header\"\n        aria-labelledby={titleElementId}\n        aria-describedby={descriptionTooltipId}\n        disableTypography\n        title={\n          <Stack direction=\"row\" alignItems=\"center\" height=\"var(--panel-header-height, 30px)\">\n            <Tooltip title={title} disableHoverListener={!isEllipsisActive}>\n              <Typography\n                id={titleElementId}\n                variant=\"subtitle1\"\n                ref={textRef}\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: '26px',\n                  whiteSpace: 'nowrap',\n                  overflow: 'hidden',\n                  textOverflow: 'ellipsis',\n                }}\n              >\n                {title}\n              </Typography>\n            </Tooltip>\n            <PanelActions\n              title={title}\n              description={description}\n              descriptionTooltipId={descriptionTooltipId}\n              links={links}\n              readHandlers={readHandlers}\n              editHandlers={editHandlers}\n              viewQueriesHandler={viewQueriesHandler}\n              extra={extra}\n              queryResults={queryResults}\n              pluginActions={pluginActions}\n              itemActions={actionButtons}\n              showIcons={showIcons}\n            />\n          </Stack>\n        }\n        sx={combineSx(\n          (theme) => ({\n            containerType: 'inline-size',\n            containerName: HEADER_ACTIONS_CONTAINER_NAME,\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      {confirmDialog}\n    </>\n  );\n}\n"],"names":["CardHeader","Stack","Typography","Tooltip","combineSx","useAllVariableValues","useReplaceVariablesInString","useRef","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","useSelectionItemActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","itemActionsListConfig","showIcons","viewQueriesHandler","dimension","rest","titleElementId","descriptionTooltipId","variableState","textRef","isEllipsisActive","current","width","scrollWidth","clientWidth","actionButtons","confirmDialog","actions","disabledWithEmptySelection","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","disableHoverListener","variant","ref","lineHeight","minHeight","whiteSpace","overflow","textOverflow","itemActions","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAmBC,KAAK,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AACxF,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAgCC,oBAAoB,EAAEC,2BAA2B,QAAQ,4BAA4B;AACrH,SAAkCC,MAAM,QAAQ,QAAQ;AACxD,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAEjE,SAASC,uBAAuB,QAAQ,4BAA4B;AAoBpE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,qBAAqB,EACrBC,SAAS,EACTC,kBAAkB,EAClBC,SAAS,EACT,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGjB,GAAG,MAAM,CAAC;IACpC,MAAMkB,uBAAuB,GAAGlB,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQP,4BAA4BQ;IAC1C,MAAMC,cAAcT,4BAA4BU;IAChD,MAAMe,gBAAgB1B;IAEtB,MAAM2B,UAAUzB,OAAuB;IAEvC,MAAM0B,mBACJD,QAAQE,OAAO,IAAIP,WAAWQ,QAAQH,QAAQE,OAAO,CAACE,WAAW,GAAGJ,QAAQE,OAAO,CAACG,WAAW,GAAG;IAEpG,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAG7B,wBAAwB;QAC/D8B,SAAShB;QACTO;QACAU,4BAA4B;IAC9B;IAEA,qBACE;;0BACE,KAACzC;gBACCY,IAAIA;gBACJ8B,WAAU;gBACVC,mBAAiBd;gBACjBe,oBAAkBd;gBAClBe,iBAAiB;gBACjBhC,qBACE,MAACZ;oBAAM6C,WAAU;oBAAMC,YAAW;oBAASC,QAAO;;sCAChD,KAAC7C;4BAAQU,OAAOA;4BAAOoC,sBAAsB,CAAChB;sCAC5C,cAAA,KAAC/B;gCACCU,IAAIiB;gCACJqB,SAAQ;gCACRC,KAAKnB;gCACLX,IAAI;oCACF,gEAAgE;oCAChE,+CAA+C;oCAC/C+B,YAAY;oCACZC,WAAW;oCACXC,YAAY;oCACZC,UAAU;oCACVC,cAAc;gCAChB;0CAEC3C;;;sCAGL,KAACJ;4BACCI,OAAOA;4BACPE,aAAaA;4BACbe,sBAAsBA;4BACtBb,OAAOA;4BACPE,cAAcA;4BACdC,cAAcA;4BACdM,oBAAoBA;4BACpBJ,OAAOA;4BACPJ,cAAcA;4BACdK,eAAeA;4BACfkC,aAAanB;4BACbb,WAAWA;;;;gBAIjBJ,IAAIjB,UACF,CAACsD,QAAW,CAAA;wBACVC,eAAe;wBACfC,eAAepD;wBACfqD,SAASH,MAAMI,OAAO,CAAC;wBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;wBAClD,0BAA0B;4BACxBV,UAAU;wBACZ;oBACF,CAAA,GACAlC;gBAED,GAAGO,IAAI;;YAETW;;;AAGP"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 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, CardHeaderProps, Stack, Typography, Tooltip } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { ItemAction, QueryData, useAllVariableValues, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode, useRef } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\nimport { PanelOptions } from './Panel';\nimport { useSelectionItemActions } from './useSelectionItemActions';\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  links?: Link[];\n  extra?: ReactNode;\n  queryResults: QueryData[];\n  viewQueriesHandler?: PanelActionsProps['viewQueriesHandler'];\n  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n  pluginActions?: ReactNode[];\n  itemActionsListConfig?: ItemAction[];\n  showIcons: PanelOptions['showIcons'];\n  dimension?: { width: number };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  queryResults,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\n  pluginActions,\n  itemActionsListConfig,\n  showIcons,\n  viewQueriesHandler,\n  dimension,\n  ...rest\n}: PanelHeaderProps): ReactElement {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle);\n  const description = useReplaceVariablesInString(rawDescription);\n  const variableState = useAllVariableValues();\n\n  const textRef = useRef<HTMLDivElement>(null);\n\n  const isEllipsisActive =\n    textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;\n\n  const { actionButtons, confirmDialog } = useSelectionItemActions({\n    actions: itemActionsListConfig,\n    variableState,\n    disabledWithEmptySelection: true,\n  });\n\n  return (\n    <>\n      {title ? (\n        <CardHeader\n          id={id}\n          component=\"header\"\n          aria-labelledby={titleElementId}\n          aria-describedby={descriptionTooltipId}\n          disableTypography\n          title={\n            <Stack direction=\"row\" alignItems=\"center\" height=\"var(--panel-header-height, 30px)\">\n              <Tooltip title={title} disableHoverListener={!isEllipsisActive}>\n                <Typography\n                  id={titleElementId}\n                  variant=\"subtitle1\"\n                  ref={textRef}\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: '26px',\n                    whiteSpace: 'nowrap',\n                    overflow: 'hidden',\n                    textOverflow: 'ellipsis',\n                  }}\n                >\n                  {title}\n                </Typography>\n              </Tooltip>\n              <PanelActions\n                title={title}\n                description={description}\n                descriptionTooltipId={descriptionTooltipId}\n                links={links}\n                readHandlers={readHandlers}\n                editHandlers={editHandlers}\n                viewQueriesHandler={viewQueriesHandler}\n                extra={extra}\n                queryResults={queryResults}\n                pluginActions={pluginActions}\n                itemActions={actionButtons}\n                showIcons={showIcons}\n              />\n            </Stack>\n          }\n          sx={combineSx(\n            (theme) => ({\n              containerType: 'inline-size',\n              containerName: HEADER_ACTIONS_CONTAINER_NAME,\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        <Stack\n          id={id}\n          component=\"header\"\n          aria-describedby={descriptionTooltipId}\n          sx={combineSx(\n            {\n              position: 'absolute',\n              right: 0,\n              top: 0,\n              zIndex: 5,\n              containerType: 'inline-size',\n              containerName: HEADER_ACTIONS_CONTAINER_NAME,\n            },\n            sx\n          )}\n          {...rest}\n        >\n          <PanelActions\n            title={title}\n            description={description}\n            descriptionTooltipId={descriptionTooltipId}\n            links={links}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            extra={extra}\n            queryResults={queryResults}\n            pluginActions={pluginActions}\n            itemActions={actionButtons}\n            showIcons={showIcons}\n          />\n        </Stack>\n      )}\n      {confirmDialog}\n    </>\n  );\n}\n"],"names":["CardHeader","Stack","Typography","Tooltip","combineSx","useAllVariableValues","useReplaceVariablesInString","useRef","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","useSelectionItemActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","itemActionsListConfig","showIcons","viewQueriesHandler","dimension","rest","titleElementId","descriptionTooltipId","variableState","textRef","isEllipsisActive","current","width","scrollWidth","clientWidth","actionButtons","confirmDialog","actions","disabledWithEmptySelection","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","disableHoverListener","variant","ref","lineHeight","minHeight","whiteSpace","overflow","textOverflow","itemActions","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider","position","right","top","zIndex"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAmBC,KAAK,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AACxF,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAgCC,oBAAoB,EAAEC,2BAA2B,QAAQ,4BAA4B;AACrH,SAAkCC,MAAM,QAAQ,QAAQ;AACxD,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAEjE,SAASC,uBAAuB,QAAQ,4BAA4B;AAoBpE,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACLC,aAAa,EACbC,qBAAqB,EACrBC,SAAS,EACTC,kBAAkB,EAClBC,SAAS,EACT,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGjB,GAAG,MAAM,CAAC;IACpC,MAAMkB,uBAAuB,GAAGlB,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQP,4BAA4BQ;IAC1C,MAAMC,cAAcT,4BAA4BU;IAChD,MAAMe,gBAAgB1B;IAEtB,MAAM2B,UAAUzB,OAAuB;IAEvC,MAAM0B,mBACJD,QAAQE,OAAO,IAAIP,WAAWQ,QAAQH,QAAQE,OAAO,CAACE,WAAW,GAAGJ,QAAQE,OAAO,CAACG,WAAW,GAAG;IAEpG,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAE,GAAG7B,wBAAwB;QAC/D8B,SAAShB;QACTO;QACAU,4BAA4B;IAC9B;IAEA,qBACE;;YACG5B,sBACC,KAACb;gBACCY,IAAIA;gBACJ8B,WAAU;gBACVC,mBAAiBd;gBACjBe,oBAAkBd;gBAClBe,iBAAiB;gBACjBhC,qBACE,MAACZ;oBAAM6C,WAAU;oBAAMC,YAAW;oBAASC,QAAO;;sCAChD,KAAC7C;4BAAQU,OAAOA;4BAAOoC,sBAAsB,CAAChB;sCAC5C,cAAA,KAAC/B;gCACCU,IAAIiB;gCACJqB,SAAQ;gCACRC,KAAKnB;gCACLX,IAAI;oCACF,gEAAgE;oCAChE,+CAA+C;oCAC/C+B,YAAY;oCACZC,WAAW;oCACXC,YAAY;oCACZC,UAAU;oCACVC,cAAc;gCAChB;0CAEC3C;;;sCAGL,KAACJ;4BACCI,OAAOA;4BACPE,aAAaA;4BACbe,sBAAsBA;4BACtBb,OAAOA;4BACPE,cAAcA;4BACdC,cAAcA;4BACdM,oBAAoBA;4BACpBJ,OAAOA;4BACPJ,cAAcA;4BACdK,eAAeA;4BACfkC,aAAanB;4BACbb,WAAWA;;;;gBAIjBJ,IAAIjB,UACF,CAACsD,QAAW,CAAA;wBACVC,eAAe;wBACfC,eAAepD;wBACfqD,SAASH,MAAMI,OAAO,CAAC;wBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;wBAClD,0BAA0B;4BACxBV,UAAU;wBACZ;oBACF,CAAA,GACAlC;gBAED,GAAGO,IAAI;+BAGV,KAAC3B;gBACCW,IAAIA;gBACJ8B,WAAU;gBACVE,oBAAkBd;gBAClBT,IAAIjB,UACF;oBACE8D,UAAU;oBACVC,OAAO;oBACPC,KAAK;oBACLC,QAAQ;oBACRV,eAAe;oBACfC,eAAepD;gBACjB,GACAa;gBAED,GAAGO,IAAI;0BAER,cAAA,KAACnB;oBACCI,OAAOA;oBACPE,aAAaA;oBACbe,sBAAsBA;oBACtBb,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdM,oBAAoBA;oBACpBJ,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;oBACfkC,aAAanB;oBACbb,WAAWA;;;YAIhBc;;;AAGP"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAC;AAOhF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YAsE9B,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":"AA2BA,OAAO,EAAE,YAAY,EAA6C,MAAM,OAAO,CAAC;AAOhF;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YAwE9B,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -26,12 +26,13 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useState, useMemo, useCallback } from 'react';
 import { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { useVariableValues, VariableContext } from '@perses-dev/plugin-system';
-import { usePanelEditor } from '../../context';
+import { usePanelEditor, usePanelKey } from '../../context';
 import { PanelEditorForm } from './PanelEditorForm';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */ export const PanelDrawer = ()=>{
     const panelEditor = usePanelEditor();
+    const panelKey = usePanelKey(panelEditor?.panelGroupItemId);
     // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation
     const [isClosing, setIsClosing] = useState(false);
     // Drawer is open if we have a model and we're not transitioning out
@@ -64,13 +65,16 @@ import { PanelEditorForm } from './PanelEditorForm';
         return /*#__PURE__*/ _jsx(Drawer, {
             isOpen: isOpen,
             onClose: handleClickOut,
-            SlideProps: {
-                onExited: handleExited
+            slotProps: {
+                transition: {
+                    onExited: handleExited
+                }
             },
             "data-testid": "panel-editor",
             children: panelEditor && /*#__PURE__*/ _jsx(ErrorBoundary, {
                 FallbackComponent: ErrorAlert,
                 children: /*#__PURE__*/ _jsx(PanelEditorForm, {
+                    panelKey: panelKey,
                     initialAction: panelEditor.mode,
                     initialValues: panelEditor.initialValues,
                     onSave: handleSave,
@@ -82,7 +86,8 @@ import { PanelEditorForm } from './PanelEditorForm';
         handleExited,
         handleSave,
         isOpen,
-        panelEditor
+        panelEditor,
+        panelKey
     ]);
     // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider
     if (panelEditor?.panelGroupItemId?.repeatVariable) {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 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\n/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 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 { ReactElement, useState, useMemo, ReactNode, useCallback } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { usePanelEditor } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && !isClosing;\n\n  const handleSave = useCallback(\n    (values: PanelEditorValues) => {\n      // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n      if (panelEditor === undefined || values === undefined) {\n        throw new Error('Cannot apply changes');\n      }\n      panelEditor.applyChanges(values);\n      setIsClosing(true);\n    },\n    [panelEditor]\n  );\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = useCallback(() => {\n    panelEditor?.close();\n    setIsClosing(false);\n  }, [panelEditor]);\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  const drawer = useMemo(() => {\n    return (\n      <Drawer\n        isOpen={isOpen}\n        onClose={handleClickOut}\n        SlideProps={{ onExited: handleExited }}\n        data-testid=\"panel-editor\"\n      >\n        {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n        {panelEditor && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelEditorForm\n              initialAction={panelEditor.mode}\n              initialValues={panelEditor.initialValues}\n              onSave={handleSave}\n              onClose={handleClose}\n            />\n          </ErrorBoundary>\n        )}\n      </Drawer>\n    );\n  }, [handleExited, handleSave, isOpen, panelEditor]);\n\n  // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider\n  if (panelEditor?.panelGroupItemId?.repeatVariable) {\n    return (\n      <RepeatVariableWrapper repeatVariable={panelEditor.panelGroupItemId.repeatVariable}>\n        {drawer}\n      </RepeatVariableWrapper>\n    );\n  }\n\n  return drawer;\n};\n\n// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value\n// This is necessary for previewing panels that use repeat variables and query editor\nfunction RepeatVariableWrapper({\n  repeatVariable,\n  children,\n}: {\n  repeatVariable: [string, string];\n  children: ReactNode;\n}): ReactElement {\n  const variables = useVariableValues();\n\n  return (\n    <VariableContext.Provider\n      value={{ state: { ...variables, [repeatVariable[0]]: { value: repeatVariable[1], loading: false } } }}\n    >\n      {children}\n    </VariableContext.Provider>\n  );\n}\n"],"names":["useState","useMemo","useCallback","Drawer","ErrorAlert","ErrorBoundary","useVariableValues","VariableContext","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","drawer","onClose","SlideProps","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave","panelGroupItemId","repeatVariable","RepeatVariableWrapper","children","variables","Provider","value","state","loading"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,uDAAuD,GACvD,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,EAAEC,OAAO,EAAaC,WAAW,QAAQ,QAAQ;AAChF,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,4BAA4B;AAC/E,SAASC,cAAc,QAAQ,gBAAgB;AAC/C,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGb,SAAS;IAE3C,oEAAoE;IACpE,MAAMc,SAASH,gBAAgBI,aAAa,CAACH;IAE7C,MAAMI,aAAad,YACjB,CAACe;QACC,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf,GACA;QAACF;KAAY;IAGf,MAAMS,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAenB,YAAY;QAC/BS,aAAaW;QACbT,aAAa;IACf,GAAG;QAACF;KAAY;IAEhB,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMY,iBAAiB;IACrB,cAAc,GAChB;IAEA,MAAMC,SAASvB,QAAQ;QACrB,qBACE,KAACE;YACCW,QAAQA;YACRW,SAASF;YACTG,YAAY;gBAAEC,UAAUN;YAAa;YACrCO,eAAY;sBAGXjB,6BACC,KAACN;gBAAcwB,mBAAmBzB;0BAChC,cAAA,KAACK;oBACCqB,eAAenB,YAAYoB,IAAI;oBAC/BC,eAAerB,YAAYqB,aAAa;oBACxCC,QAAQjB;oBACRS,SAASL;;;;IAMrB,GAAG;QAACC;QAAcL;QAAYF;QAAQH;KAAY;IAElD,2GAA2G;IAC3G,IAAIA,aAAauB,kBAAkBC,gBAAgB;QACjD,qBACE,KAACC;YAAsBD,gBAAgBxB,YAAYuB,gBAAgB,CAACC,cAAc;sBAC/EX;;IAGP;IAEA,OAAOA;AACT,EAAE;AAEF,sFAAsF;AACtF,qFAAqF;AACrF,SAASY,sBAAsB,EAC7BD,cAAc,EACdE,QAAQ,EAIT;IACC,MAAMC,YAAYhC;IAElB,qBACE,KAACC,gBAAgBgC,QAAQ;QACvBC,OAAO;YAAEC,OAAO;gBAAE,GAAGH,SAAS;gBAAE,CAACH,cAAc,CAAC,EAAE,CAAC,EAAE;oBAAEK,OAAOL,cAAc,CAAC,EAAE;oBAAEO,SAAS;gBAAM;YAAE;QAAE;kBAEnGL;;AAGP"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["// Copyright 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\n/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 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 { ReactElement, useState, useMemo, ReactNode, useCallback } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { usePanelEditor, usePanelKey } from '../../context';\nimport { PanelEditorForm } from './PanelEditorForm';\n\n/**\n * The Add/Edit panel drawer for editing a panel's options.\n */\nexport const PanelDrawer = (): ReactElement => {\n  const panelEditor = usePanelEditor();\n  const panelKey = usePanelKey(panelEditor?.panelGroupItemId);\n\n  // When the user clicks close, start closing but don't call the store yet to keep values stable during animtation\n  const [isClosing, setIsClosing] = useState(false);\n\n  // Drawer is open if we have a model and we're not transitioning out\n  const isOpen = panelEditor !== undefined && !isClosing;\n\n  const handleSave = useCallback(\n    (values: PanelEditorValues) => {\n      // This shouldn't happen since we don't render the submit button until we have a model, but check to make TS happy\n      if (panelEditor === undefined || values === undefined) {\n        throw new Error('Cannot apply changes');\n      }\n      panelEditor.applyChanges(values);\n      setIsClosing(true);\n    },\n    [panelEditor]\n  );\n\n  const handleClose = (): void => {\n    setIsClosing(true);\n  };\n\n  // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state\n  const handleExited = useCallback(() => {\n    panelEditor?.close();\n    setIsClosing(false);\n  }, [panelEditor]);\n\n  // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.\n  // -> TODO find a way to enable closing by clicking-out in edit view, with a discard confirmation modal popping up\n  const handleClickOut = (): void => {\n    /* do nothing */\n  };\n\n  const drawer = useMemo(() => {\n    return (\n      <Drawer\n        isOpen={isOpen}\n        onClose={handleClickOut}\n        slotProps={{ transition: { onExited: handleExited } }}\n        data-testid=\"panel-editor\"\n      >\n        {/* When the drawer is opened, we should have panel editor state (this also ensures the form state gets reset between opens) */}\n        {panelEditor && (\n          <ErrorBoundary FallbackComponent={ErrorAlert}>\n            <PanelEditorForm\n              panelKey={panelKey}\n              initialAction={panelEditor.mode}\n              initialValues={panelEditor.initialValues}\n              onSave={handleSave}\n              onClose={handleClose}\n            />\n          </ErrorBoundary>\n        )}\n      </Drawer>\n    );\n  }, [handleExited, handleSave, isOpen, panelEditor, panelKey]);\n\n  // If the panel editor is using a repeat variable, we need to wrap the drawer in a VariableContext.Provider\n  if (panelEditor?.panelGroupItemId?.repeatVariable) {\n    return (\n      <RepeatVariableWrapper repeatVariable={panelEditor.panelGroupItemId.repeatVariable}>\n        {drawer}\n      </RepeatVariableWrapper>\n    );\n  }\n\n  return drawer;\n};\n\n// Wraps the drawer in a VariableContext.Provider to provide the repeat variable value\n// This is necessary for previewing panels that use repeat variables and query editor\nfunction RepeatVariableWrapper({\n  repeatVariable,\n  children,\n}: {\n  repeatVariable: [string, string];\n  children: ReactNode;\n}): ReactElement {\n  const variables = useVariableValues();\n\n  return (\n    <VariableContext.Provider\n      value={{ state: { ...variables, [repeatVariable[0]]: { value: repeatVariable[1], loading: false } } }}\n    >\n      {children}\n    </VariableContext.Provider>\n  );\n}\n"],"names":["useState","useMemo","useCallback","Drawer","ErrorAlert","ErrorBoundary","useVariableValues","VariableContext","usePanelEditor","usePanelKey","PanelEditorForm","PanelDrawer","panelEditor","panelKey","panelGroupItemId","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","drawer","onClose","slotProps","transition","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave","repeatVariable","RepeatVariableWrapper","children","variables","Provider","value","state","loading"],"mappings":"AAAA,+BAA+B;AAC/B,oEAAoE;AACpE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,sEAAsE;AACtE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,uDAAuD,GACvD,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,EAAEC,OAAO,EAAaC,WAAW,QAAQ,QAAQ;AAChF,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,SAASC,iBAAiB,EAAEC,eAAe,QAAQ,4BAA4B;AAC/E,SAASC,cAAc,EAAEC,WAAW,QAAQ,gBAAgB;AAC5D,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcJ;IACpB,MAAMK,WAAWJ,YAAYG,aAAaE;IAE1C,iHAAiH;IACjH,MAAM,CAACC,WAAWC,aAAa,GAAGhB,SAAS;IAE3C,oEAAoE;IACpE,MAAMiB,SAASL,gBAAgBM,aAAa,CAACH;IAE7C,MAAMI,aAAajB,YACjB,CAACkB;QACC,kHAAkH;QAClH,IAAIR,gBAAgBM,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAT,YAAYU,YAAY,CAACF;QACzBJ,aAAa;IACf,GACA;QAACJ;KAAY;IAGf,MAAMW,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAetB,YAAY;QAC/BU,aAAaa;QACbT,aAAa;IACf,GAAG;QAACJ;KAAY;IAEhB,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMc,iBAAiB;IACrB,cAAc,GAChB;IAEA,MAAMC,SAAS1B,QAAQ;QACrB,qBACE,KAACE;YACCc,QAAQA;YACRW,SAASF;YACTG,WAAW;gBAAEC,YAAY;oBAAEC,UAAUP;gBAAa;YAAE;YACpDQ,eAAY;sBAGXpB,6BACC,KAACP;gBAAc4B,mBAAmB7B;0BAChC,cAAA,KAACM;oBACCG,UAAUA;oBACVqB,eAAetB,YAAYuB,IAAI;oBAC/BC,eAAexB,YAAYwB,aAAa;oBACxCC,QAAQlB;oBACRS,SAASL;;;;IAMrB,GAAG;QAACC;QAAcL;QAAYF;QAAQL;QAAaC;KAAS;IAE5D,2GAA2G;IAC3G,IAAID,aAAaE,kBAAkBwB,gBAAgB;QACjD,qBACE,KAACC;YAAsBD,gBAAgB1B,YAAYE,gBAAgB,CAACwB,cAAc;sBAC/EX;;IAGP;IAEA,OAAOA;AACT,EAAE;AAEF,sFAAsF;AACtF,qFAAqF;AACrF,SAASY,sBAAsB,EAC7BD,cAAc,EACdE,QAAQ,EAIT;IACC,MAAMC,YAAYnC;IAElB,qBACE,KAACC,gBAAgBmC,QAAQ;QACvBC,OAAO;YAAEC,OAAO;gBAAE,GAAGH,SAAS;gBAAE,CAACH,cAAc,CAAC,EAAE,CAAC,EAAE;oBAAEK,OAAOL,cAAc,CAAC,EAAE;oBAAEO,SAAS;gBAAM;YAAE;QAAE;kBAEnGL;;AAGP"}

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

@@ -3,6 +3,7 @@ import { Action, PanelEditorValues } from '@perses-dev/core';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
     initialAction: Action;
+    panelKey?: string;
     onSave: (values: PanelEditorValues) => void;
     onClose: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA4OzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAoC,MAAM,OAAO,CAAC;AAEvE,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA+OzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -22,7 +22,7 @@ import { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEdit
 import { usePanelEditor } from './usePanelEditor';
 import { PanelQueriesSharedControls } from './PanelQueriesSharedControls';
 export function PanelEditorForm(props) {
-    const { initialValues, initialAction, onSave, onClose } = props;
+    const { initialValues, initialAction, panelKey, onSave, onClose } = props;
     const panelGroups = useListPanelGroups();
     const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = usePanelEditor(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
@@ -136,11 +136,26 @@ export function PanelEditorForm(props) {
                         borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
                     },
                     children: [
-                        /*#__PURE__*/ _jsxs(Typography, {
-                            variant: "h2",
+                        /*#__PURE__*/ _jsxs(Stack, {
+                            direction: "row",
+                            spacing: 1,
+                            alignItems: "center",
                             children: [
-                                titleAction,
-                                " Panel"
+                                /*#__PURE__*/ _jsxs(Typography, {
+                                    variant: "h2",
+                                    children: [
+                                        titleAction,
+                                        " Panel"
+                                    ]
+                                }),
+                                panelKey && /*#__PURE__*/ _jsxs(Typography, {
+                                    variant: "subtitle1",
+                                    children: [
+                                        "(ID: ",
+                                        panelKey,
+                                        ")"
+                                    ]
+                                })
                             ]
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { usePanelEditor } from './usePanelEditor';\nimport { PanelQueriesSharedControls } from './PanelQueriesSharedControls';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps): ReactElement {\n  const { initialValues, initialAction, onSave, onClose } = props;\n  const panelGroups = useListPanelGroups();\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialValues.panelDefinition);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  const { panelEditorSchema } = useValidationSchemas();\n  const form = useForm<PanelEditorValues>({\n    resolver: zodResolver(panelEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialValues,\n  });\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValues> = useCallback(\n    (data) => {\n      onSave(data);\n    },\n    [onSave]\n  );\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    const currentValues = form.getValues();\n\n    // Normalize display: if both name and description are undefined, set display to undefined\n    const normalizeDisplay = (values: PanelEditorValues): PanelEditorValues => {\n      if (\n        values.panelDefinition.spec.display?.name === undefined &&\n        values.panelDefinition.spec.display?.description === undefined\n      ) {\n        values.panelDefinition.spec.display = undefined;\n      }\n      return values;\n    };\n\n    const normalizedInitial = normalizeDisplay(JSON.parse(JSON.stringify(initialValues)));\n    const normalizedCurrent = normalizeDisplay(JSON.parse(JSON.stringify(currentValues)));\n\n    if (JSON.stringify(normalizedInitial) !== JSON.stringify(normalizedCurrent)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  const watchedName = useWatch({ control: form.control, name: 'panelDefinition.spec.display.name' });\n  const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });\n  const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });\n\n  const handleSubmit = useCallback(() => {\n    form.handleSubmit(processForm)();\n  }, [form, processForm]);\n\n  return (\n    <FormProvider {...form}>\n      <PanelEditorProvider>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            padding: (theme) => theme.spacing(1, 2),\n            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n          }}\n        >\n          <Typography variant=\"h2\">{titleAction} Panel</Typography>\n          <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n            <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={handleSubmit}>\n              {submitText}\n            </Button>\n            <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n              Cancel\n            </Button>\n          </Stack>\n        </Box>\n        <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n          <Grid container spacing={2}>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.name\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Name\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedName ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setName(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"groupId\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    select\n                    {...field}\n                    required\n                    fullWidth\n                    label=\"Group\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  >\n                    {panelGroups.map((panelGroup, index) => (\n                      <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                        {panelGroup.title ?? `Group ${index + 1}`}\n                      </MenuItem>\n                    ))}\n                  </TextField>\n                )}\n              />\n            </Grid>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedDescription ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setDescription(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.plugin.kind\"\n                render={({ field, fieldState }) => (\n                  <PluginKindSelect\n                    {...field}\n                    pluginTypes={['Panel']}\n                    required\n                    fullWidth\n                    label=\"Type\"\n                    disabled={pluginEditor.isLoading}\n                    error={!!pluginEditor.error || !!fieldState.error}\n                    helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                    value={{ type: 'Panel', kind: watchedPluginKind }}\n                    onChange={(event) => {\n                      field.onChange(event.kind);\n                      pluginEditor.onSelectionChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelQueriesSharedControls\n                control={form.control}\n                plugin={plugin}\n                panelDefinition={panelDefinition}\n                onQueriesChange={(q) => setQueries(q)}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n                onJSONChange={handlePanelDefinitionChange}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Box>\n        <DiscardChangesConfirmationDialog\n          description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n          isOpen={isDiscardDialogOpened}\n          onCancel={() => {\n            setDiscardDialogOpened(false);\n          }}\n          onDiscardChanges={() => {\n            setDiscardDialogOpened(false);\n            onClose();\n          }}\n        />\n      </PanelEditorProvider>\n    </FormProvider>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useCallback","useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelEditorProvider","usePanelEditor","PanelQueriesSharedControls","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","pluginEditor","pluginTypes","value","selection","kind","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","currentValues","getValues","normalizeDisplay","values","display","description","normalizedInitial","JSON","parse","stringify","normalizedCurrent","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","handleSubmit","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","formState","isValid","onClick","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","fullWidth","label","error","helperText","message","event","target","select","required","map","panelGroup","index","title","isLoading","onSelectionChange","FallbackComponent","onQueriesChange","q","onPluginSpecChange","onSpecChange","onJSONChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"sourcesContent":["// Copyright 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 { ReactElement, useCallback, useEffect, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { usePanelEditor } from './usePanelEditor';\nimport { PanelQueriesSharedControls } from './PanelQueriesSharedControls';\n\nexport interface PanelEditorFormProps {\n  initialValues: PanelEditorValues;\n  initialAction: Action;\n  panelKey?: string;\n  onSave: (values: PanelEditorValues) => void;\n  onClose: () => void;\n}\n\nexport function PanelEditorForm(props: PanelEditorFormProps): ReactElement {\n  const { initialValues, initialAction, panelKey, onSave, onClose } = props;\n  const panelGroups = useListPanelGroups();\n  const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } =\n    usePanelEditor(initialValues.panelDefinition);\n  const { plugin } = panelDefinition.spec;\n  const [isDiscardDialogOpened, setDiscardDialogOpened] = useState<boolean>(false);\n\n  const { panelEditorSchema } = useValidationSchemas();\n  const form = useForm<PanelEditorValues>({\n    resolver: zodResolver(panelEditorSchema),\n    mode: 'onBlur',\n    defaultValues: initialValues,\n  });\n\n  // Use common plugin editor logic even though we've split the inputs up in this form\n  const pluginEditor = usePluginEditor({\n    pluginTypes: ['Panel'],\n    value: { selection: { kind: plugin.kind, type: 'Panel' }, spec: plugin.spec },\n    onChange: (plugin) => {\n      form.setValue('panelDefinition.spec.plugin', { kind: plugin.selection.kind, spec: plugin.spec });\n      setPlugin({\n        kind: plugin.selection.kind,\n        spec: plugin.spec,\n      });\n    },\n    onHideQueryEditorChange: (isHidden) => {\n      setQueries(undefined, isHidden);\n    },\n  });\n\n  const titleAction = getTitleAction(initialAction, true);\n  const submitText = getSubmitText(initialAction, true);\n\n  const links = useWatch({ control: form.control, name: 'panelDefinition.spec.links' });\n  useEffect(() => {\n    setLinks(links);\n  }, [setLinks, links]);\n\n  const processForm: SubmitHandler<PanelEditorValues> = useCallback(\n    (data) => {\n      onSave(data);\n    },\n    [onSave]\n  );\n\n  // When user click on cancel, several possibilities:\n  // - create action: ask for discard approval\n  // - update action: ask for discard approval if changed\n  // - read action: don´t ask for discard approval\n  function handleCancel(): void {\n    const currentValues = form.getValues();\n\n    // Normalize display: if both name and description are undefined, set display to undefined\n    const normalizeDisplay = (values: PanelEditorValues): PanelEditorValues => {\n      if (\n        values.panelDefinition.spec.display?.name === undefined &&\n        values.panelDefinition.spec.display?.description === undefined\n      ) {\n        values.panelDefinition.spec.display = undefined;\n      }\n      return values;\n    };\n\n    const normalizedInitial = normalizeDisplay(JSON.parse(JSON.stringify(initialValues)));\n    const normalizedCurrent = normalizeDisplay(JSON.parse(JSON.stringify(currentValues)));\n\n    if (JSON.stringify(normalizedInitial) !== JSON.stringify(normalizedCurrent)) {\n      setDiscardDialogOpened(true);\n    } else {\n      onClose();\n    }\n  }\n\n  const handlePanelDefinitionChange = (nextPanelDefStr: string): void => {\n    const nextPanelDef: PanelDefinition = JSON.parse(nextPanelDefStr);\n    const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;\n    // if panel plugin kind and spec are modified, then need to save current spec\n    if (\n      panelDefinition.spec.plugin.kind !== pluginKind &&\n      JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)\n    ) {\n      pluginEditor.rememberCurrentSpecState();\n    }\n    setPanelDefinition(nextPanelDef);\n  };\n\n  const watchedName = useWatch({ control: form.control, name: 'panelDefinition.spec.display.name' });\n  const watchedDescription = useWatch({ control: form.control, name: 'panelDefinition.spec.display.description' });\n  const watchedPluginKind = useWatch({ control: form.control, name: 'panelDefinition.spec.plugin.kind' });\n\n  const handleSubmit = useCallback(() => {\n    form.handleSubmit(processForm)();\n  }, [form, processForm]);\n\n  return (\n    <FormProvider {...form}>\n      <PanelEditorProvider>\n        <Box\n          sx={{\n            display: 'flex',\n            alignItems: 'center',\n            padding: (theme) => theme.spacing(1, 2),\n            borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n          }}\n        >\n          <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n            <Typography variant=\"h2\">{titleAction} Panel</Typography>\n            {panelKey && <Typography variant=\"subtitle1\">(ID: {panelKey})</Typography>}\n          </Stack>\n          <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n            <Button variant=\"contained\" disabled={!form.formState.isValid} onClick={handleSubmit}>\n              {submitText}\n            </Button>\n            <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n              Cancel\n            </Button>\n          </Stack>\n        </Box>\n        <Box id={panelEditorFormId} sx={{ flex: 1, overflowY: 'scroll', padding: (theme) => theme.spacing(2) }}>\n          <Grid container spacing={2}>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.name\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Name\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedName ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setName(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"groupId\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    select\n                    {...field}\n                    required\n                    fullWidth\n                    label=\"Group\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    onChange={(event) => {\n                      field.onChange(event);\n                    }}\n                  >\n                    {panelGroups.map((panelGroup, index) => (\n                      <MenuItem key={panelGroup.id} value={panelGroup.id}>\n                        {panelGroup.title ?? `Group ${index + 1}`}\n                      </MenuItem>\n                    ))}\n                  </TextField>\n                )}\n              />\n            </Grid>\n            <Grid item xs={8}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.display.description\"\n                render={({ field, fieldState }) => (\n                  <TextField\n                    {...field}\n                    fullWidth\n                    label=\"Description\"\n                    error={!!fieldState.error}\n                    helperText={fieldState.error?.message}\n                    value={watchedDescription ?? ''}\n                    onChange={(event) => {\n                      field.onChange(event);\n                      setDescription(event.target.value);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n            <Grid item xs={4}>\n              <Controller\n                control={form.control}\n                name=\"panelDefinition.spec.plugin.kind\"\n                render={({ field, fieldState }) => (\n                  <PluginKindSelect\n                    {...field}\n                    pluginTypes={['Panel']}\n                    required\n                    fullWidth\n                    label=\"Type\"\n                    disabled={pluginEditor.isLoading}\n                    error={!!pluginEditor.error || !!fieldState.error}\n                    helperText={pluginEditor.error?.message ?? fieldState.error?.message}\n                    value={{ type: 'Panel', kind: watchedPluginKind }}\n                    onChange={(event) => {\n                      field.onChange(event.kind);\n                      pluginEditor.onSelectionChange(event);\n                    }}\n                  />\n                )}\n              />\n            </Grid>\n\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <PanelQueriesSharedControls\n                control={form.control}\n                plugin={plugin}\n                panelDefinition={panelDefinition}\n                onQueriesChange={(q) => setQueries(q)}\n                onPluginSpecChange={(spec) => {\n                  pluginEditor.onSpecChange(spec);\n                }}\n                onJSONChange={handlePanelDefinitionChange}\n              />\n            </ErrorBoundary>\n          </Grid>\n        </Box>\n        <DiscardChangesConfirmationDialog\n          description=\"You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.\"\n          isOpen={isDiscardDialogOpened}\n          onCancel={() => {\n            setDiscardDialogOpened(false);\n          }}\n          onDiscardChanges={() => {\n            setDiscardDialogOpened(false);\n            onClose();\n          }}\n        />\n      </PanelEditorProvider>\n    </FormProvider>\n  );\n}\n\n/**\n * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.\n */\nexport const panelEditorFormId = 'panel-editor-form';\n"],"names":["useCallback","useEffect","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","getTitleAction","getSubmitText","useValidationSchemas","Controller","FormProvider","useForm","useWatch","zodResolver","useListPanelGroups","PanelEditorProvider","usePanelEditor","PanelQueriesSharedControls","PanelEditorForm","props","initialValues","initialAction","panelKey","onSave","onClose","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","pluginEditor","pluginTypes","value","selection","kind","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","currentValues","getValues","normalizeDisplay","values","display","description","normalizedInitial","JSON","parse","stringify","normalizedCurrent","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","handleSubmit","sx","alignItems","padding","theme","spacing","borderBottom","palette","divider","direction","variant","marginLeft","disabled","formState","isValid","onClick","color","id","panelEditorFormId","flex","overflowY","container","item","xs","render","field","fieldState","fullWidth","label","error","helperText","message","event","target","select","required","map","panelGroup","index","title","isLoading","onSelectionChange","FallbackComponent","onQueriesChange","q","onPluginSpecChange","onSpecChange","onJSONChange","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

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

@@ -25,12 +25,12 @@ export declare const ARIA_LABEL_TEXT: {
     editGroup: (groupName: string) => string;
     moveGroupDown: (groupName: string) => string;
     moveGroupUp: (groupName: string) => string;
-    viewPanel: (panelName: string) => string;
-    editPanel: (panelName: string) => string;
-    duplicatePanel: (panelName: string) => string;
-    deletePanel: (panelName: string) => string;
-    showPanelActions: (panelName: string) => string;
-    movePanel: (panelName: string) => string;
-    openQueryView: (panelName: string) => string;
+    viewPanel: (panelName?: string) => string;
+    editPanel: (panelName?: string) => string;
+    duplicatePanel: (panelName?: string) => string;
+    deletePanel: (panelName?: string) => string;
+    showPanelActions: (panelName?: string) => string;
+    movePanel: (panelName?: string) => string;
+    openQueryView: (panelName?: string) => string;
 };
 //# sourceMappingURL=user-interface-text.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM,KAAG,MAAM;6BACnB,MAAM,KAAG,MAAM;2BACjB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;6BACjB,MAAM,KAAG,MAAM;2BAEjB,MAAM,KAAG,MAAM;2BACf,MAAM,KAAG,MAAM;gCACV,MAAM,KAAG,MAAM;6BAClB,MAAM,KAAG,MAAM;kCACV,MAAM,KAAG,MAAM;2BACtB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;CAC3C,CAAC"}
+{"version":3,"file":"user-interface-text.d.ts","sourceRoot":"","sources":["../../src/constants/user-interface-text.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;CAwBxB,CAAC;AAEF,eAAO,MAAM,eAAe;iCAEG,MAAM,KAAG,MAAM;6BACnB,MAAM,KAAG,MAAM;2BACjB,MAAM,KAAG,MAAM;+BACX,MAAM,KAAG,MAAM;6BACjB,MAAM,KAAG,MAAM;4BAEhB,MAAM,KAAG,MAAM;4BAEf,MAAM,KAAG,MAAM;iCACV,MAAM,KAAG,MAAM;8BAClB,MAAM,KAAG,MAAM;mCACV,MAAM,KAAG,MAAM;4BAEtB,MAAM,KAAG,MAAM;gCACX,MAAM,KAAG,MAAM;CAE5C,CAAC"}

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

@@ -43,13 +43,13 @@ export const ARIA_LABEL_TEXT = {
     moveGroupDown: (groupName)=>`move group ${groupName} down`,
     moveGroupUp: (groupName)=>`move group ${groupName} up`,
     // Panel buttons
-    viewPanel: (panelName)=>`toggle panel ${panelName} view mode`,
-    editPanel: (panelName)=>`edit panel ${panelName}`,
-    duplicatePanel: (panelName)=>`duplicate panel ${panelName}`,
-    deletePanel: (panelName)=>`delete panel ${panelName}`,
-    showPanelActions: (panelName)=>`show panel actions for ${panelName}`,
-    movePanel: (panelName)=>`move panel ${panelName}`,
-    openQueryView: (panelName)=>`open query view for panel ${panelName}`
+    viewPanel: (panelName)=>panelName ? `toggle panel ${panelName} view mode` : 'toggle panel view mode',
+    editPanel: (panelName)=>panelName ? `edit panel ${panelName}` : 'edit panel',
+    duplicatePanel: (panelName)=>panelName ? `duplicate panel ${panelName}` : 'duplicate panel',
+    deletePanel: (panelName)=>panelName ? `delete panel ${panelName}` : 'delete panel',
+    showPanelActions: (panelName)=>panelName ? `show panel actions for ${panelName}` : 'show panel actions',
+    movePanel: (panelName)=>panelName ? `move panel ${panelName}` : 'move panel',
+    openQueryView: (panelName)=>panelName ? `open query view for panel ${panelName}` : 'open query view for panel'
 };
 
 //# sourceMappingURL=user-interface-text.js.map

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  viewPanel: 'Toggle View Mode',\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n  queryView: 'Open query view',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string): string => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string): string => `delete group ${groupName}`,\n  editGroup: (groupName: string): string => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string): string => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string): string => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName: string): string => `toggle panel ${panelName} view mode`,\n  editPanel: (panelName: string): string => `edit panel ${panelName}`,\n  duplicatePanel: (panelName: string): string => `duplicate panel ${panelName}`,\n  deletePanel: (panelName: string): string => `delete panel ${panelName}`,\n  showPanelActions: (panelName: string): string => `show panel actions for ${panelName}`,\n  movePanel: (panelName: string): string => `move panel ${panelName}`,\n  openQueryView: (panelName: string): string => `open query view for panel ${panelName}`,\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","queryView","ARIA_LABEL_TEXT","groupName","panelName","showPanelActions","openQueryView"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;IACpBC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBb,iBAAiB,CAACc,YAA8B,CAAC,mBAAmB,EAAEA,WAAW;IACjFb,aAAa,CAACa,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEZ,WAAW,CAACY,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEX,eAAe,CAACW,YAA8B,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IAC5EV,aAAa,CAACU,YAA8B,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IACxE,gBAAgB;IAChBT,WAAW,CAACU,YAA8B,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC;IAC/ET,WAAW,CAACS,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnER,gBAAgB,CAACQ,YAA8B,CAAC,gBAAgB,EAAEA,WAAW;IAC7EP,aAAa,CAACO,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEC,kBAAkB,CAACD,YAA8B,CAAC,uBAAuB,EAAEA,WAAW;IACtFN,WAAW,CAACM,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEE,eAAe,CAACF,YAA8B,CAAC,0BAA0B,EAAEA,WAAW;AACxF,EAAE"}
+{"version":3,"sources":["../../src/constants/user-interface-text.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const TOOLTIP_TEXT = {\n  // Toolbar buttons\n  addPanel: 'Add panel',\n  addGroup: 'Add panel group',\n  editDatasources: 'Edit datasources',\n  editJson: 'Edit JSON',\n  editVariables: 'Edit variables',\n  viewJson: 'View JSON',\n  // Group buttons\n  addPanelToGroup: 'Add panel to group',\n  deleteGroup: 'Delete group',\n  editGroup: 'Edit group',\n  moveGroupDown: 'Move group down',\n  moveGroupUp: 'Move group up',\n  // Panel buttons\n  viewPanel: 'Toggle View Mode',\n  editPanel: 'Edit',\n  duplicatePanel: 'Duplicate',\n  deletePanel: 'Delete',\n  movePanel: 'Move',\n  // Variable editor buttons\n  refreshVariableValues: 'Refresh values',\n  copyVariableValues: 'Copy values to clipboard',\n  queryView: 'Open query view',\n};\n\nexport const ARIA_LABEL_TEXT = {\n  // Group buttons\n  addPanelToGroup: (groupName: string): string => `add panel to group ${groupName}`,\n  deleteGroup: (groupName: string): string => `delete group ${groupName}`,\n  editGroup: (groupName: string): string => `edit group ${groupName}`,\n  moveGroupDown: (groupName: string): string => `move group ${groupName} down`,\n  moveGroupUp: (groupName: string): string => `move group ${groupName} up`,\n  // Panel buttons\n  viewPanel: (panelName?: string): string =>\n    panelName ? `toggle panel ${panelName} view mode` : 'toggle panel view mode',\n  editPanel: (panelName?: string): string => (panelName ? `edit panel ${panelName}` : 'edit panel'),\n  duplicatePanel: (panelName?: string): string => (panelName ? `duplicate panel ${panelName}` : 'duplicate panel'),\n  deletePanel: (panelName?: string): string => (panelName ? `delete panel ${panelName}` : 'delete panel'),\n  showPanelActions: (panelName?: string): string =>\n    panelName ? `show panel actions for ${panelName}` : 'show panel actions',\n  movePanel: (panelName?: string): string => (panelName ? `move panel ${panelName}` : 'move panel'),\n  openQueryView: (panelName?: string): string =>\n    panelName ? `open query view for panel ${panelName}` : 'open query view for panel',\n};\n"],"names":["TOOLTIP_TEXT","addPanel","addGroup","editDatasources","editJson","editVariables","viewJson","addPanelToGroup","deleteGroup","editGroup","moveGroupDown","moveGroupUp","viewPanel","editPanel","duplicatePanel","deletePanel","movePanel","refreshVariableValues","copyVariableValues","queryView","ARIA_LABEL_TEXT","groupName","panelName","showPanelActions","openQueryView"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,OAAO,MAAMA,eAAe;IAC1B,kBAAkB;IAClBC,UAAU;IACVC,UAAU;IACVC,iBAAiB;IACjBC,UAAU;IACVC,eAAe;IACfC,UAAU;IACV,gBAAgB;IAChBC,iBAAiB;IACjBC,aAAa;IACbC,WAAW;IACXC,eAAe;IACfC,aAAa;IACb,gBAAgB;IAChBC,WAAW;IACXC,WAAW;IACXC,gBAAgB;IAChBC,aAAa;IACbC,WAAW;IACX,0BAA0B;IAC1BC,uBAAuB;IACvBC,oBAAoB;IACpBC,WAAW;AACb,EAAE;AAEF,OAAO,MAAMC,kBAAkB;IAC7B,gBAAgB;IAChBb,iBAAiB,CAACc,YAA8B,CAAC,mBAAmB,EAAEA,WAAW;IACjFb,aAAa,CAACa,YAA8B,CAAC,aAAa,EAAEA,WAAW;IACvEZ,WAAW,CAACY,YAA8B,CAAC,WAAW,EAAEA,WAAW;IACnEX,eAAe,CAACW,YAA8B,CAAC,WAAW,EAAEA,UAAU,KAAK,CAAC;IAC5EV,aAAa,CAACU,YAA8B,CAAC,WAAW,EAAEA,UAAU,GAAG,CAAC;IACxE,gBAAgB;IAChBT,WAAW,CAACU,YACVA,YAAY,CAAC,aAAa,EAAEA,UAAU,UAAU,CAAC,GAAG;IACtDT,WAAW,CAACS,YAAgCA,YAAY,CAAC,WAAW,EAAEA,WAAW,GAAG;IACpFR,gBAAgB,CAACQ,YAAgCA,YAAY,CAAC,gBAAgB,EAAEA,WAAW,GAAG;IAC9FP,aAAa,CAACO,YAAgCA,YAAY,CAAC,aAAa,EAAEA,WAAW,GAAG;IACxFC,kBAAkB,CAACD,YACjBA,YAAY,CAAC,uBAAuB,EAAEA,WAAW,GAAG;IACtDN,WAAW,CAACM,YAAgCA,YAAY,CAAC,WAAW,EAAEA,WAAW,GAAG;IACpFE,eAAe,CAACF,YACdA,YAAY,CAAC,0BAA0B,EAAEA,WAAW,GAAG;AAC3D,EAAE"}

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts

@@ -55,6 +55,7 @@ export declare function useDeletePanelGroupDialog(): {
     openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;
     deletePanelGroup: (panelGroupId: PanelGroupId) => void;
 };
+export declare function usePanelKey(panelGroupItemId?: PanelGroupItemId): string | undefined;
 /**
  * Gets an individual panel in the store. Throws if the panel can't be found.
  */

package/dist/context/DashboardProvider/dashboard-provider-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"dashboard-provider-api.d.ts","sourceRoot":"","sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"names":[],"mappings":"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"}

package/dist/context/DashboardProvider/dashboard-provider-api.js

@@ -134,6 +134,17 @@ const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog, openDeletePanelG
         closeDeletePanelGroupDialog: ()=>closeDeletePanelGroupDialog()
     };
 }
+export function usePanelKey(panelGroupItemId) {
+    const panelKey = useDashboardStore(useCallback((store)=>{
+        if (panelGroupItemId === undefined) {
+            return undefined;
+        }
+        return store.panelGroups[panelGroupItemId.panelGroupId]?.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+    }, [
+        panelGroupItemId
+    ]));
+    return panelKey;
+}
 /**
  * Gets an individual panel in the store. Throws if the panel can't be found.
  */ export function usePanel(panelGroupItemId) {

package/dist/context/DashboardProvider/dashboard-provider-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"sourcesContent":["// Copyright 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 { useCallback, useMemo } from 'react';\nimport {\n  DashboardResource,\n  DurationString,\n  EphemeralDashboardResource,\n  PanelDefinition,\n  PanelGroupId,\n  PanelGroupDefinition,\n  PanelGroupItemId,\n  PanelGroupItemLayout,\n} from '@perses-dev/core';\nimport { DashboardStoreState, useDashboardStore } from './DashboardProvider';\nimport { DeletePanelGroupDialogState } from './delete-panel-group-slice';\nimport { PanelGroupEditor } from './panel-group-editor-slice';\nimport { PanelEditorState } from './panel-editor-slice';\nimport { DeletePanelDialogState } from './delete-panel-slice';\nimport { SaveChangesConfirmationDialogState } from './save-changes-dialog-slice';\nimport { DiscardChangesConfirmationDialogState } from './discard-changes-dialog-slice';\nimport { EditJsonDialogState } from './edit-json-dialog-slice';\nimport { ViewPanelSlice } from './view-panel-slice';\n\nconst selectEditMode: ({ isEditMode, setEditMode }: DashboardStoreState) => {\n  setEditMode: (isEditMode: boolean) => void;\n  isEditMode: boolean;\n} = ({ isEditMode, setEditMode }: DashboardStoreState) => ({ isEditMode, setEditMode });\nexport function useEditMode(): { setEditMode: (isEditMode: boolean) => void; isEditMode: boolean } {\n  return useDashboardStore(selectEditMode);\n}\n\nconst selectDashboardActions: ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => {\n  openAddPanelGroup: () => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} = ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => ({\n  setDashboard,\n  openAddPanelGroup,\n  openAddPanel,\n});\n/**\n * Returns actions that can be performed on the current dashboard.\n */\nexport function useDashboardActions(): {\n  openAddPanelGroup: () => void;\n  openAddPanel: () => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} {\n  const { setDashboard, openAddPanelGroup, openAddPanel } = useDashboardStore(selectDashboardActions);\n  return {\n    setDashboard,\n    openAddPanelGroup: () => openAddPanelGroup(),\n    openAddPanel: () => openAddPanel(),\n  };\n}\n\nconst selectPanelGroupOrder = (state: DashboardStoreState): number[] => state.panelGroupOrder;\n/**\n * Returns an array of PanelGroupIds in the order they appear in the dashboard.\n */\nexport function usePanelGroupIds(): number[] {\n  return useDashboardStore(selectPanelGroupOrder);\n}\n\nconst selectPanelGroups: (state: DashboardStoreState) => Record<number, PanelGroupDefinition> = (\n  state: DashboardStoreState\n) => state.panelGroups;\n/**\n * Returns an array of PanelGroupDefinitions in the order they appear in the dashboard.\n */\nexport function useListPanelGroups(): PanelGroupDefinition[] {\n  const panelGroupIds = usePanelGroupIds();\n  const panelGroups = useDashboardStore(selectPanelGroups);\n  return useMemo(() => {\n    return panelGroupIds.map((id) => {\n      const group = panelGroups[id];\n      if (group === undefined) {\n        throw new Error(`Invalid panel group Id found ${id}`);\n      }\n      return group;\n    });\n  }, [panelGroupIds, panelGroups]);\n}\n\n/**\n * Gets a specific panel group by its id. Throws if the panel group does not exist.\n */\nexport function usePanelGroup(panelGroupId: PanelGroupId): PanelGroupDefinition {\n  const panelGroup = useDashboardStore(useCallback((state) => state.panelGroups[panelGroupId], [panelGroupId]));\n  if (panelGroup === undefined) {\n    throw new Error(`Panel group with Id ${panelGroupId} was not found`);\n  }\n  return panelGroup;\n}\n\nconst selectPanelGroupActions: ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n}: DashboardStoreState) => {\n  updatePanelGroupLayouts: (panelGroupId: PanelGroupId, itemLayouts: PanelGroupDefinition['itemLayouts']) => void;\n  openEditPanelGroup: (panelGroupId: PanelGroupId) => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({ openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts }: DashboardStoreState) => ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n});\n/**\n * Returns actions that can be performed on the given panel group.\n */\nexport function usePanelGroupActions(panelGroupId: PanelGroupId): {\n  updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) => void;\n  openEditPanelGroup: () => void;\n  openAddPanel: () => void;\n  moveDown: (() => void) | undefined;\n  deletePanelGroup: () => void;\n  moveUp: (() => void) | undefined;\n} {\n  const { moveUp, moveDown } = useMovePanelGroup(panelGroupId);\n  const { openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts } =\n    useDashboardStore(selectPanelGroupActions);\n\n  return {\n    openEditPanelGroup: () => openEditPanelGroup(panelGroupId),\n    deletePanelGroup: () => deletePanelGroup(panelGroupId),\n    openAddPanel: () => openAddPanel(panelGroupId),\n    moveUp,\n    moveDown,\n    updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) =>\n      updatePanelGroupLayouts(panelGroupId, itemLayouts),\n  };\n}\n\nconst selectSwapPanelGroups: (state: DashboardStoreState) => (xIndex: number, yIndex: number) => void = (\n  state: DashboardStoreState\n) => state.swapPanelGroups;\nconst selectPanelGroupsLength: (state: DashboardStoreState) => number = (state: DashboardStoreState) =>\n  state.panelGroupOrder.length;\n/**\n * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be\n * moved in that direction.\n */\nfunction useMovePanelGroup(panelGroupId: PanelGroupId): {\n  moveDown: (() => void) | undefined;\n  moveUp: (() => void) | undefined;\n} {\n  const currentIndex = useDashboardStore(\n    useCallback((store) => store.panelGroupOrder.findIndex((id) => id === panelGroupId), [panelGroupId])\n  );\n  const panelGroupsLength = useDashboardStore(selectPanelGroupsLength);\n  const swapPanelGroups = useDashboardStore(selectSwapPanelGroups);\n\n  if (currentIndex < 0) {\n    throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);\n  }\n\n  const moveUp: () => void = () => swapPanelGroups(currentIndex, currentIndex - 1);\n  const moveDown: () => void = () => swapPanelGroups(currentIndex, currentIndex + 1);\n  return {\n    moveUp: currentIndex > 0 ? moveUp : undefined,\n    moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined,\n  };\n}\n\nconst selectPanelGroupEditor: (state: DashboardStoreState) => PanelGroupEditor | undefined = (\n  state: DashboardStoreState\n) => state.panelGroupEditor;\n/**\n * Gets the Panel Group editor state.\n */\nexport function usePanelGroupEditor(): PanelGroupEditor | undefined {\n  return useDashboardStore(selectPanelGroupEditor);\n}\n\nconst selectDeletePanelGroupDialog: ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n});\n/**\n * Gets the Delete Panel Group dialog state.\n */\nexport function useDeletePanelGroupDialog(): {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} {\n  const { deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } =\n    useDashboardStore(selectDeletePanelGroupDialog);\n  return {\n    deletePanelGroupDialog,\n    deletePanelGroup,\n    openDeletePanelGroupDialog,\n    closeDeletePanelGroupDialog: () => closeDeletePanelGroupDialog(),\n  };\n}\n\n/**\n * Gets an individual panel in the store. Throws if the panel can't be found.\n */\nexport function usePanel(panelGroupItemId: PanelGroupItemId): PanelDefinition {\n  const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n  const panel = useDashboardStore(\n    useCallback(\n      (store) => {\n        const panelKey = store.panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) return;\n        return store.panels[panelKey];\n      },\n      [panelGroupId, panelGroupLayoutId]\n    )\n  );\n\n  if (panel === undefined) {\n    throw new Error(`Could not find panel for Id ${panelGroupItemId}`);\n  }\n  return panel;\n}\n\nconst selectPanelActions: ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n}: DashboardStoreState) => {\n  openDeletePanelDialog: (panelGroupItemId: PanelGroupItemId) => void;\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n  setViewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel }: DashboardStoreState) => ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n});\n\n/**\n * Returns actions that can be performed on the given Panel.\n */\nexport function usePanelActions(panelGroupItemId: PanelGroupItemId): {\n  openDeletePanelDialog: () => void;\n  duplicatePanel: () => void;\n  openEditPanel: () => void;\n  viewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} {\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = useDashboardStore(selectPanelActions);\n  return {\n    openEditPanel: () => openEditPanel(panelGroupItemId),\n    openDeletePanelDialog: () => openDeletePanelDialog(panelGroupItemId),\n    duplicatePanel: () => duplicatePanel(panelGroupItemId),\n    viewPanel: (panelGroupItemId?: PanelGroupItemId) => setViewPanel(panelGroupItemId),\n  };\n}\n\nconst selectPanelEditor: (state: DashboardStoreState) => PanelEditorState | undefined = (state: DashboardStoreState) =>\n  state.panelEditor;\n/**\n * Gets the state for the Panel Editor.\n */\nexport function usePanelEditor(): PanelEditorState | undefined {\n  return useDashboardStore(selectPanelEditor);\n}\n\nconst selectDeletePanelDialog: ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} = ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => ({\n  deletePanelDialog,\n  deletePanel,\n  closeDeletePanelDialog,\n});\n\n/**\n * Gets the state for the Delete Panel dialog.\n */\nexport function useDeletePanelDialog(): {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} {\n  // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself\n  return useDashboardStore(selectDeletePanelDialog);\n}\n\nconst selectDashboardDuration: (state: DashboardStoreState) => DurationString = (state: DashboardStoreState) =>\n  state.duration;\nexport function useDashboardDuration(): DurationString {\n  return useDashboardStore(selectDashboardDuration);\n}\n\nconst selectViewPanel: (state: DashboardStoreState) => {\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  getViewPanel: DashboardStoreState['getViewPanel'];\n  viewPanelId: DashboardStoreState['viewPanel']['panelGroupItemId'];\n} = (state: DashboardStoreState) => ({\n  setViewPanel: state.setViewPanel,\n  getViewPanel: state.getViewPanel,\n  viewPanelId: state.getViewPanel(),\n});\n/**\n * Returns actions related to the ViewPanel.\n */\nexport function useViewPanel(): {\n  setViewPanel: ViewPanelSlice['setViewPanel'];\n  getViewPanel: ViewPanelSlice['getViewPanel'];\n  viewPanelId: ViewPanelSlice['viewPanel']['panelGroupItemId'];\n} {\n  return useDashboardStore(selectViewPanel);\n}\n\nconst selectViewPanelGroup: (state: DashboardStoreState) => PanelGroupItemId | undefined = (\n  state: DashboardStoreState\n) => state.getViewPanel();\n/**\n * Gets the Panel Group for the view panel.\n */\nexport function useViewPanelGroup(): PanelGroupItemId | undefined {\n  return useDashboardStore(selectViewPanelGroup);\n}\n\nconst selectSaveChangesConfirmationDialog: ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} = ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n});\nexport function useSaveChangesConfirmationDialog(): {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} {\n  return useDashboardStore(selectSaveChangesConfirmationDialog);\n}\n\nconst selectDiscardChangesConfirmationDialog: ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} = ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n});\nexport function useDiscardChangesConfirmationDialog(): {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} {\n  return useDashboardStore(selectDiscardChangesConfirmationDialog);\n}\n\nconst selectEditJsonDialog: ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} = ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => ({\n  editJsonDialog,\n  openEditJsonDialog,\n  closeEditJsonDialog,\n});\n/**\n * Gets the state for the edit JSON dialog.\n */\nexport function useEditJsonDialog(): {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} {\n  return useDashboardStore(selectEditJsonDialog);\n}\n"],"names":["useCallback","useMemo","useDashboardStore","selectEditMode","isEditMode","setEditMode","useEditMode","selectDashboardActions","setDashboard","openAddPanelGroup","openAddPanel","useDashboardActions","selectPanelGroupOrder","state","panelGroupOrder","usePanelGroupIds","selectPanelGroups","panelGroups","useListPanelGroups","panelGroupIds","map","id","group","undefined","Error","usePanelGroup","panelGroupId","panelGroup","selectPanelGroupActions","openEditPanelGroup","deletePanelGroup","updatePanelGroupLayouts","usePanelGroupActions","moveUp","moveDown","useMovePanelGroup","itemLayouts","selectSwapPanelGroups","swapPanelGroups","selectPanelGroupsLength","length","currentIndex","store","findIndex","panelGroupsLength","selectPanelGroupEditor","panelGroupEditor","usePanelGroupEditor","selectDeletePanelGroupDialog","deletePanelGroupDialog","openDeletePanelGroupDialog","closeDeletePanelGroupDialog","useDeletePanelGroupDialog","usePanel","panelGroupItemId","panelGroupItemLayoutId","panelGroupLayoutId","panel","panelKey","itemPanelKeys","panels","selectPanelActions","openEditPanel","openDeletePanelDialog","duplicatePanel","setViewPanel","usePanelActions","viewPanel","selectPanelEditor","panelEditor","usePanelEditor","selectDeletePanelDialog","deletePanelDialog","deletePanel","closeDeletePanelDialog","useDeletePanelDialog","selectDashboardDuration","duration","useDashboardDuration","selectViewPanel","getViewPanel","viewPanelId","useViewPanel","selectViewPanelGroup","useViewPanelGroup","selectSaveChangesConfirmationDialog","saveChangesConfirmationDialog","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","useSaveChangesConfirmationDialog","selectDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","selectEditJsonDialog","editJsonDialog","openEditJsonDialog","closeEditJsonDialog","useEditJsonDialog"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/dashboard-provider-api.ts"],"sourcesContent":["// Copyright 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 { useCallback, useMemo } from 'react';\nimport {\n  DashboardResource,\n  DurationString,\n  EphemeralDashboardResource,\n  PanelDefinition,\n  PanelGroupId,\n  PanelGroupDefinition,\n  PanelGroupItemId,\n  PanelGroupItemLayout,\n} from '@perses-dev/core';\nimport { DashboardStoreState, useDashboardStore } from './DashboardProvider';\nimport { DeletePanelGroupDialogState } from './delete-panel-group-slice';\nimport { PanelGroupEditor } from './panel-group-editor-slice';\nimport { PanelEditorState } from './panel-editor-slice';\nimport { DeletePanelDialogState } from './delete-panel-slice';\nimport { SaveChangesConfirmationDialogState } from './save-changes-dialog-slice';\nimport { DiscardChangesConfirmationDialogState } from './discard-changes-dialog-slice';\nimport { EditJsonDialogState } from './edit-json-dialog-slice';\nimport { ViewPanelSlice } from './view-panel-slice';\n\nconst selectEditMode: ({ isEditMode, setEditMode }: DashboardStoreState) => {\n  setEditMode: (isEditMode: boolean) => void;\n  isEditMode: boolean;\n} = ({ isEditMode, setEditMode }: DashboardStoreState) => ({ isEditMode, setEditMode });\nexport function useEditMode(): { setEditMode: (isEditMode: boolean) => void; isEditMode: boolean } {\n  return useDashboardStore(selectEditMode);\n}\n\nconst selectDashboardActions: ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => {\n  openAddPanelGroup: () => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} = ({ setDashboard, openAddPanelGroup, openAddPanel }: DashboardStoreState) => ({\n  setDashboard,\n  openAddPanelGroup,\n  openAddPanel,\n});\n/**\n * Returns actions that can be performed on the current dashboard.\n */\nexport function useDashboardActions(): {\n  openAddPanelGroup: () => void;\n  openAddPanel: () => void;\n  setDashboard: (dashboard: DashboardResource | EphemeralDashboardResource) => void;\n} {\n  const { setDashboard, openAddPanelGroup, openAddPanel } = useDashboardStore(selectDashboardActions);\n  return {\n    setDashboard,\n    openAddPanelGroup: () => openAddPanelGroup(),\n    openAddPanel: () => openAddPanel(),\n  };\n}\n\nconst selectPanelGroupOrder = (state: DashboardStoreState): number[] => state.panelGroupOrder;\n/**\n * Returns an array of PanelGroupIds in the order they appear in the dashboard.\n */\nexport function usePanelGroupIds(): number[] {\n  return useDashboardStore(selectPanelGroupOrder);\n}\n\nconst selectPanelGroups: (state: DashboardStoreState) => Record<number, PanelGroupDefinition> = (\n  state: DashboardStoreState\n) => state.panelGroups;\n/**\n * Returns an array of PanelGroupDefinitions in the order they appear in the dashboard.\n */\nexport function useListPanelGroups(): PanelGroupDefinition[] {\n  const panelGroupIds = usePanelGroupIds();\n  const panelGroups = useDashboardStore(selectPanelGroups);\n  return useMemo(() => {\n    return panelGroupIds.map((id) => {\n      const group = panelGroups[id];\n      if (group === undefined) {\n        throw new Error(`Invalid panel group Id found ${id}`);\n      }\n      return group;\n    });\n  }, [panelGroupIds, panelGroups]);\n}\n\n/**\n * Gets a specific panel group by its id. Throws if the panel group does not exist.\n */\nexport function usePanelGroup(panelGroupId: PanelGroupId): PanelGroupDefinition {\n  const panelGroup = useDashboardStore(useCallback((state) => state.panelGroups[panelGroupId], [panelGroupId]));\n  if (panelGroup === undefined) {\n    throw new Error(`Panel group with Id ${panelGroupId} was not found`);\n  }\n  return panelGroup;\n}\n\nconst selectPanelGroupActions: ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n}: DashboardStoreState) => {\n  updatePanelGroupLayouts: (panelGroupId: PanelGroupId, itemLayouts: PanelGroupDefinition['itemLayouts']) => void;\n  openEditPanelGroup: (panelGroupId: PanelGroupId) => void;\n  openAddPanel: (panelGroupId?: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({ openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts }: DashboardStoreState) => ({\n  openEditPanelGroup,\n  deletePanelGroup,\n  openAddPanel,\n  updatePanelGroupLayouts,\n});\n/**\n * Returns actions that can be performed on the given panel group.\n */\nexport function usePanelGroupActions(panelGroupId: PanelGroupId): {\n  updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) => void;\n  openEditPanelGroup: () => void;\n  openAddPanel: () => void;\n  moveDown: (() => void) | undefined;\n  deletePanelGroup: () => void;\n  moveUp: (() => void) | undefined;\n} {\n  const { moveUp, moveDown } = useMovePanelGroup(panelGroupId);\n  const { openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts } =\n    useDashboardStore(selectPanelGroupActions);\n\n  return {\n    openEditPanelGroup: () => openEditPanelGroup(panelGroupId),\n    deletePanelGroup: () => deletePanelGroup(panelGroupId),\n    openAddPanel: () => openAddPanel(panelGroupId),\n    moveUp,\n    moveDown,\n    updatePanelGroupLayouts: (itemLayouts: PanelGroupItemLayout[]) =>\n      updatePanelGroupLayouts(panelGroupId, itemLayouts),\n  };\n}\n\nconst selectSwapPanelGroups: (state: DashboardStoreState) => (xIndex: number, yIndex: number) => void = (\n  state: DashboardStoreState\n) => state.swapPanelGroups;\nconst selectPanelGroupsLength: (state: DashboardStoreState) => number = (state: DashboardStoreState) =>\n  state.panelGroupOrder.length;\n/**\n * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be\n * moved in that direction.\n */\nfunction useMovePanelGroup(panelGroupId: PanelGroupId): {\n  moveDown: (() => void) | undefined;\n  moveUp: (() => void) | undefined;\n} {\n  const currentIndex = useDashboardStore(\n    useCallback((store) => store.panelGroupOrder.findIndex((id) => id === panelGroupId), [panelGroupId])\n  );\n  const panelGroupsLength = useDashboardStore(selectPanelGroupsLength);\n  const swapPanelGroups = useDashboardStore(selectSwapPanelGroups);\n\n  if (currentIndex < 0) {\n    throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);\n  }\n\n  const moveUp: () => void = () => swapPanelGroups(currentIndex, currentIndex - 1);\n  const moveDown: () => void = () => swapPanelGroups(currentIndex, currentIndex + 1);\n  return {\n    moveUp: currentIndex > 0 ? moveUp : undefined,\n    moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined,\n  };\n}\n\nconst selectPanelGroupEditor: (state: DashboardStoreState) => PanelGroupEditor | undefined = (\n  state: DashboardStoreState\n) => state.panelGroupEditor;\n/**\n * Gets the Panel Group editor state.\n */\nexport function usePanelGroupEditor(): PanelGroupEditor | undefined {\n  return useDashboardStore(selectPanelGroupEditor);\n}\n\nconst selectDeletePanelGroupDialog: ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} = ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n}: DashboardStoreState) => ({\n  deletePanelGroupDialog,\n  openDeletePanelGroupDialog,\n  closeDeletePanelGroupDialog,\n  deletePanelGroup,\n});\n/**\n * Gets the Delete Panel Group dialog state.\n */\nexport function useDeletePanelGroupDialog(): {\n  deletePanelGroupDialog: DeletePanelGroupDialogState | undefined;\n  closeDeletePanelGroupDialog: () => void;\n  openDeletePanelGroupDialog: (panelGroupId: PanelGroupId) => void;\n  deletePanelGroup: (panelGroupId: PanelGroupId) => void;\n} {\n  const { deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } =\n    useDashboardStore(selectDeletePanelGroupDialog);\n  return {\n    deletePanelGroupDialog,\n    deletePanelGroup,\n    openDeletePanelGroupDialog,\n    closeDeletePanelGroupDialog: () => closeDeletePanelGroupDialog(),\n  };\n}\n\nexport function usePanelKey(panelGroupItemId?: PanelGroupItemId): string | undefined {\n  const panelKey = useDashboardStore(\n    useCallback(\n      (store) => {\n        if (panelGroupItemId === undefined) {\n          return undefined;\n        }\n\n        return store.panelGroups[panelGroupItemId.panelGroupId]?.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];\n      },\n      [panelGroupItemId]\n    )\n  );\n  return panelKey;\n}\n\n/**\n * Gets an individual panel in the store. Throws if the panel can't be found.\n */\nexport function usePanel(panelGroupItemId: PanelGroupItemId): PanelDefinition {\n  const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;\n  const panel = useDashboardStore(\n    useCallback(\n      (store) => {\n        const panelKey = store.panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];\n        if (panelKey === undefined) return;\n        return store.panels[panelKey];\n      },\n      [panelGroupId, panelGroupLayoutId]\n    )\n  );\n\n  if (panel === undefined) {\n    throw new Error(`Could not find panel for Id ${panelGroupItemId}`);\n  }\n  return panel;\n}\n\nconst selectPanelActions: ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n}: DashboardStoreState) => {\n  openDeletePanelDialog: (panelGroupItemId: PanelGroupItemId) => void;\n  duplicatePanel: (panelGroupItemId: PanelGroupItemId) => void;\n  openEditPanel: (panelGroupItemId: PanelGroupItemId) => void;\n  setViewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel }: DashboardStoreState) => ({\n  openEditPanel,\n  openDeletePanelDialog,\n  duplicatePanel,\n  setViewPanel,\n});\n\n/**\n * Returns actions that can be performed on the given Panel.\n */\nexport function usePanelActions(panelGroupItemId: PanelGroupItemId): {\n  openDeletePanelDialog: () => void;\n  duplicatePanel: () => void;\n  openEditPanel: () => void;\n  viewPanel: (panelGroupItemId?: PanelGroupItemId) => void;\n} {\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = useDashboardStore(selectPanelActions);\n  return {\n    openEditPanel: () => openEditPanel(panelGroupItemId),\n    openDeletePanelDialog: () => openDeletePanelDialog(panelGroupItemId),\n    duplicatePanel: () => duplicatePanel(panelGroupItemId),\n    viewPanel: (panelGroupItemId?: PanelGroupItemId) => setViewPanel(panelGroupItemId),\n  };\n}\n\nconst selectPanelEditor: (state: DashboardStoreState) => PanelEditorState | undefined = (state: DashboardStoreState) =>\n  state.panelEditor;\n/**\n * Gets the state for the Panel Editor.\n */\nexport function usePanelEditor(): PanelEditorState | undefined {\n  return useDashboardStore(selectPanelEditor);\n}\n\nconst selectDeletePanelDialog: ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} = ({ deletePanelDialog, deletePanel, closeDeletePanelDialog }: DashboardStoreState) => ({\n  deletePanelDialog,\n  deletePanel,\n  closeDeletePanelDialog,\n});\n\n/**\n * Gets the state for the Delete Panel dialog.\n */\nexport function useDeletePanelDialog(): {\n  deletePanelDialog: DeletePanelDialogState | undefined;\n  closeDeletePanelDialog: () => void;\n  deletePanel: (panelGroupItemId: PanelGroupItemId) => void;\n} {\n  // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself\n  return useDashboardStore(selectDeletePanelDialog);\n}\n\nconst selectDashboardDuration: (state: DashboardStoreState) => DurationString = (state: DashboardStoreState) =>\n  state.duration;\nexport function useDashboardDuration(): DurationString {\n  return useDashboardStore(selectDashboardDuration);\n}\n\nconst selectViewPanel: (state: DashboardStoreState) => {\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  getViewPanel: DashboardStoreState['getViewPanel'];\n  viewPanelId: DashboardStoreState['viewPanel']['panelGroupItemId'];\n} = (state: DashboardStoreState) => ({\n  setViewPanel: state.setViewPanel,\n  getViewPanel: state.getViewPanel,\n  viewPanelId: state.getViewPanel(),\n});\n/**\n * Returns actions related to the ViewPanel.\n */\nexport function useViewPanel(): {\n  setViewPanel: ViewPanelSlice['setViewPanel'];\n  getViewPanel: ViewPanelSlice['getViewPanel'];\n  viewPanelId: ViewPanelSlice['viewPanel']['panelGroupItemId'];\n} {\n  return useDashboardStore(selectViewPanel);\n}\n\nconst selectViewPanelGroup: (state: DashboardStoreState) => PanelGroupItemId | undefined = (\n  state: DashboardStoreState\n) => state.getViewPanel();\n/**\n * Gets the Panel Group for the view panel.\n */\nexport function useViewPanelGroup(): PanelGroupItemId | undefined {\n  return useDashboardStore(selectViewPanelGroup);\n}\n\nconst selectSaveChangesConfirmationDialog: ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} = ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  saveChangesConfirmationDialog,\n  openSaveChangesConfirmationDialog,\n  closeSaveChangesConfirmationDialog,\n});\nexport function useSaveChangesConfirmationDialog(): {\n  closeSaveChangesConfirmationDialog: () => void;\n  openSaveChangesConfirmationDialog: (saveChangesConfirmationDialog: SaveChangesConfirmationDialogState) => void;\n  saveChangesConfirmationDialog: SaveChangesConfirmationDialogState | undefined;\n} {\n  return useDashboardStore(selectSaveChangesConfirmationDialog);\n}\n\nconst selectDiscardChangesConfirmationDialog: ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} = ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n}: DashboardStoreState) => ({\n  discardChangesConfirmationDialog,\n  openDiscardChangesConfirmationDialog,\n  closeDiscardChangesConfirmationDialog,\n});\nexport function useDiscardChangesConfirmationDialog(): {\n  discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState | undefined;\n  closeDiscardChangesConfirmationDialog: () => void;\n  openDiscardChangesConfirmationDialog: (\n    discardChangesConfirmationDialog: DiscardChangesConfirmationDialogState\n  ) => void;\n} {\n  return useDashboardStore(selectDiscardChangesConfirmationDialog);\n}\n\nconst selectEditJsonDialog: ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} = ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog }: DashboardStoreState) => ({\n  editJsonDialog,\n  openEditJsonDialog,\n  closeEditJsonDialog,\n});\n/**\n * Gets the state for the edit JSON dialog.\n */\nexport function useEditJsonDialog(): {\n  openEditJsonDialog: () => void;\n  closeEditJsonDialog: () => void;\n  editJsonDialog: EditJsonDialogState | undefined;\n} {\n  return useDashboardStore(selectEditJsonDialog);\n}\n"],"names":["useCallback","useMemo","useDashboardStore","selectEditMode","isEditMode","setEditMode","useEditMode","selectDashboardActions","setDashboard","openAddPanelGroup","openAddPanel","useDashboardActions","selectPanelGroupOrder","state","panelGroupOrder","usePanelGroupIds","selectPanelGroups","panelGroups","useListPanelGroups","panelGroupIds","map","id","group","undefined","Error","usePanelGroup","panelGroupId","panelGroup","selectPanelGroupActions","openEditPanelGroup","deletePanelGroup","updatePanelGroupLayouts","usePanelGroupActions","moveUp","moveDown","useMovePanelGroup","itemLayouts","selectSwapPanelGroups","swapPanelGroups","selectPanelGroupsLength","length","currentIndex","store","findIndex","panelGroupsLength","selectPanelGroupEditor","panelGroupEditor","usePanelGroupEditor","selectDeletePanelGroupDialog","deletePanelGroupDialog","openDeletePanelGroupDialog","closeDeletePanelGroupDialog","useDeletePanelGroupDialog","usePanelKey","panelGroupItemId","panelKey","itemPanelKeys","panelGroupItemLayoutId","usePanel","panelGroupLayoutId","panel","panels","selectPanelActions","openEditPanel","openDeletePanelDialog","duplicatePanel","setViewPanel","usePanelActions","viewPanel","selectPanelEditor","panelEditor","usePanelEditor","selectDeletePanelDialog","deletePanelDialog","deletePanel","closeDeletePanelDialog","useDeletePanelDialog","selectDashboardDuration","duration","useDashboardDuration","selectViewPanel","getViewPanel","viewPanelId","useViewPanel","selectViewPanelGroup","useViewPanelGroup","selectSaveChangesConfirmationDialog","saveChangesConfirmationDialog","openSaveChangesConfirmationDialog","closeSaveChangesConfirmationDialog","useSaveChangesConfirmationDialog","selectDiscardChangesConfirmationDialog","discardChangesConfirmationDialog","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","useDiscardChangesConfirmationDialog","selectEditJsonDialog","editJsonDialog","openEditJsonDialog","closeEditJsonDialog","useEditJsonDialog"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.53.0-rc.2",
+  "version": "0.53.0",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -29,9 +29,9 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.53.0-rc.2",
-    "@perses-dev/core": "0.53.0-rc.0",
-    "@perses-dev/plugin-system": "0.53.0-rc.2",
+    "@perses-dev/components": "0.53.0",
+    "@perses-dev/core": "0.53.0-rc.2",
+    "@perses-dev/plugin-system": "0.53.0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^4.1.0",
     "immer": "^10.1.1",
@@ -58,4 +58,4 @@
   "files": [
     "dist"
   ]
-}
+}