@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { CardHeader, Typography, Stack, IconButton, CardHeaderProps, styled } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport DragIcon from 'mdi-material-ui/DragVertical';\nimport ContentCopy from 'mdi-material-ui/ContentCopy';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ARIA_LABEL_TEXT, TOOLTIP_TEXT } from '../../constants';\ntype OmittedProps = 'children' | 'action' | 'title' | 'disableTypography';\n\nexport interface PanelHeaderProps extends Omit<CardHeaderProps, OmittedProps> {\n  id: string;\n  title: string;\n  description?: string;\n  extra?: React.ReactNode;\n  editHandlers?: {\n    onEditPanelClick: () => void;\n    onDuplicatePanelClick: () => void;\n    onDeletePanelClick: () => void;\n  };\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  editHandlers,\n  sx,\n  extra,\n  ...rest\n}: PanelHeaderProps) {\n  const titleElementId = `${id}-title`;\n  const descriptionTooltipId = `${id}-description`;\n\n  const title = useReplaceVariablesInString(rawTitle) as string;\n  const description = useReplaceVariablesInString(rawDescription);\n\n  let actions: CardHeaderProps['action'] = undefined;\n  if (editHandlers !== undefined) {\n    // If there are edit handlers, always just show the edit buttons\n    actions = (\n      <>\n        <InfoTooltip description={TOOLTIP_TEXT.editPanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.editPanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onEditPanelClick}\n          >\n            <PencilIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.duplicatePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.duplicatePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDuplicatePanelClick}\n          >\n            <ContentCopy\n              fontSize=\"inherit\"\n              sx={{\n                // Shrink this icon a little bit to look more consistent\n                // with the other icons in the header.\n                transform: 'scale(0.925)',\n              }}\n            />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.deletePanel}>\n          <HeaderIconButton\n            aria-label={ARIA_LABEL_TEXT.deletePanel(title)}\n            size=\"small\"\n            onClick={editHandlers.onDeletePanelClick}\n          >\n            <DeleteIcon fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n        <InfoTooltip description={TOOLTIP_TEXT.movePanel}>\n          <HeaderIconButton aria-label={ARIA_LABEL_TEXT.movePanel(title)} size=\"small\">\n            <DragIcon className=\"drag-handle\" sx={{ cursor: 'grab' }} fontSize=\"inherit\" />\n          </HeaderIconButton>\n        </InfoTooltip>\n      </>\n    );\n  }\n\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '24px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\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        </Stack>\n      }\n      action={\n        <HeaderActionWrapper direction=\"row\" spacing={0.25} alignItems=\"center\">\n          {editHandlers === undefined && extra} {actions}\n        </HeaderActionWrapper>\n      }\n      sx={combineSx(\n        (theme) => ({\n          padding: theme.spacing(1),\n          borderBottom: `solid 1px ${theme.palette.divider}`,\n          '.MuiCardHeader-content': {\n            overflow: 'hidden',\n          },\n          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n\nconst HeaderIconButton = styled(IconButton)(({ theme }) => ({\n  borderRadius: theme.shape.borderRadius,\n  padding: '4px',\n}));\n\nconst HeaderActionWrapper = styled(Stack)(() => ({\n  // Adding back the negative margins from MUI's defaults for actions, so we\n  // avoid increasing the header size when actions are present while also being\n  // able to vertically center the actions.\n  // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n  marginTop: -4,\n  marginBottom: -4,\n}));\n"],"names":["CardHeader","Typography","Stack","IconButton","styled","InfoTooltip","combineSx","InformationOutlineIcon","PencilIcon","DeleteIcon","DragIcon","ContentCopy","useReplaceVariablesInString","ARIA_LABEL_TEXT","TOOLTIP_TEXT","PanelHeader","id","title","rawTitle","description","rawDescription","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","actions","undefined","editPanel","HeaderIconButton","aria-label","size","onClick","onEditPanelClick","fontSize","duplicatePanel","onDuplicatePanelClick","transform","deletePanel","onDeletePanelClick","movePanel","className","cursor","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","trim","length","enterDelay","aria-hidden","color","theme","palette","text","secondary","action","HeaderActionWrapper","spacing","alignItems","padding","borderBottom","divider","margin","borderRadius","shape","marginTop","marginBottom"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,UAAU,EAAEC,UAAU,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,MAAM,QAAQ,gBAAgB;AACnG,SAASC,WAAW,EAAEC,SAAS,QAAQ,yBAAyB;AAChE,OAAOC,4BAA4B,qCAAqC;AACxE,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,cAAc,+BAA+B;AACpD,OAAOC,iBAAiB,8BAA8B;AACtD,SAASC,2BAA2B,QAAQ,4BAA4B;AACxE,SAASC,eAAe,EAAEC,YAAY,QAAQ,kBAAkB;AAehE,OAAO,SAASC,YAAY,EAC1BC,GAAE,EACFC,OAAOC,SAAQ,EACfC,aAAaC,eAAc,EAC3BC,aAAY,EACZC,GAAE,EACFC,MAAK,EACL,GAAGC,MACc;IACjB,MAAMC,iBAAiB,CAAC,EAAET,GAAG,MAAM,CAAC;IACpC,MAAMU,uBAAuB,CAAC,EAAEV,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQL,4BAA4BM;IAC1C,MAAMC,cAAcP,4BAA4BQ;IAEhD,IAAIO,UAAqCC;IACzC,IAAIP,iBAAiBO,WAAW;QAC9B,gEAAgE;QAChED,wBACE;;8BACE,KAACtB;oBAAYc,aAAaL,aAAae;8BACrC,cAAA,KAACC;wBACCC,cAAYlB,gBAAgBgB,UAAUZ;wBACtCe,MAAK;wBACLC,SAASZ,aAAaa;kCAEtB,cAAA,KAAC1B;4BAAW2B,UAAS;;;;8BAGzB,KAAC9B;oBAAYc,aAAaL,aAAasB;8BACrC,cAAA,KAACN;wBACCC,cAAYlB,gBAAgBuB,eAAenB;wBAC3Ce,MAAK;wBACLC,SAASZ,aAAagB;kCAEtB,cAAA,KAAC1B;4BACCwB,UAAS;4BACTb,IAAI;gCACF,wDAAwD;gCACxD,sCAAsC;gCACtCgB,WAAW;4BACb;;;;8BAIN,KAACjC;oBAAYc,aAAaL,aAAayB;8BACrC,cAAA,KAACT;wBACCC,cAAYlB,gBAAgB0B,YAAYtB;wBACxCe,MAAK;wBACLC,SAASZ,aAAamB;kCAEtB,cAAA,KAAC/B;4BAAW0B,UAAS;;;;8BAGzB,KAAC9B;oBAAYc,aAAaL,aAAa2B;8BACrC,cAAA,KAACX;wBAAiBC,cAAYlB,gBAAgB4B,UAAUxB;wBAAQe,MAAK;kCACnE,cAAA,KAACtB;4BAASgC,WAAU;4BAAcpB,IAAI;gCAAEqB,QAAQ;4BAAO;4BAAGR,UAAS;;;;;;IAK7E;IAEA,qBACE,KAACnC;QACCgB,IAAIA;QACJ4B,WAAU;QACVC,mBAAiBpB;QACjBqB,oBAAkBpB;QAClBqB,iBAAiB;QACjB9B,qBACE,MAACf;YAAM8C,WAAU;;8BACf,KAAC/C;oBACCe,IAAIS;oBACJwB,SAAQ;oBACR3B,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/C4B,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAECrC;;gBAGFE,gBAAgBS,aAAaT,YAAYoC,OAAOC,SAAS,mBACxD,KAACnD;oBAAYW,IAAIU;oBAAsBP,aAAaA;oBAAasC,YAAY;8BAC3E,cAAA,KAAC3B;wBAAiBC,cAAW;wBAAoBC,MAAK;kCACpD,cAAA,KAACzB;4BACCuC,oBAAiB;4BACjBY,eAAa;4BACbvB,UAAS;4BACTb,IAAI;gCAAEqC,OAAO,CAACC,QAAUA,MAAMC,QAAQC,KAAKC;4BAAU;;;;;;QAOjEC,sBACE,MAACC;YAAoBjB,WAAU;YAAMkB,SAAS;YAAMC,YAAW;;gBAC5D9C,iBAAiBO,aAAaL;gBAAM;gBAAEI;;;QAG3CL,IAAIhB,UACF,CAACsD,QAAW,CAAA;gBACVQ,SAASR,MAAMM,QAAQ;gBACvBG,cAAc,CAAC,UAAU,EAAET,MAAMC,QAAQS,QAAQ,CAAC;gBAClD,0BAA0B;oBACxBjB,UAAU;gBACZ;gBACA,yBAAyB;oBACvB,6DAA6D;oBAC7D,oEAAoE;oBACpE,oDAAoD;oBACpD,4GAA4G;oBAC5GkB,QAAQ;gBACV;YACF,CAAA,GACAjD;QAED,GAAGE,IAAI;;AAGd;AAEA,MAAMM,mBAAmB1B,OAAOD,YAAY,CAAC,EAAEyD,MAAK,EAAE,GAAM,CAAA;QAC1DY,cAAcZ,MAAMa,MAAMD;QAC1BJ,SAAS;IACX,CAAA;AAEA,MAAMH,sBAAsB7D,OAAOF,OAAO,IAAO,CAAA;QAC/C,0EAA0E;QAC1E,6EAA6E;QAC7E,yCAAyC;QACzC,4GAA4G;QAC5GwE,WAAW,CAAC;QACZC,cAAc,CAAC;IACjB,CAAA"}
+{"version":3,"sources":["../../../src/components/Panel/PanelHeader.tsx"],"sourcesContent":["// Copyright 2025 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 { Box, CardHeader, CardHeaderProps, Stack, Typography } from '@mui/material';\nimport { InfoTooltip, combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport InformationOutlineIcon from 'mdi-material-ui/InformationOutline';\nimport { ReactElement, ReactNode } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\nimport { PanelLinks } from './PanelLinks';\nimport { HeaderIconButton } from './HeaderIconButton';\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  readHandlers?: PanelActionsProps['readHandlers'];\n  editHandlers?: PanelActionsProps['editHandlers'];\n}\n\nexport function PanelHeader({\n  id,\n  title: rawTitle,\n  description: rawDescription,\n  links,\n  readHandlers,\n  editHandlers,\n  sx,\n  extra,\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\n  return (\n    <CardHeader\n      id={id}\n      component=\"header\"\n      aria-labelledby={titleElementId}\n      aria-describedby={descriptionTooltipId}\n      disableTypography\n      title={\n        <Stack direction=\"row\">\n          <Typography\n            id={titleElementId}\n            variant=\"subtitle1\"\n            sx={{\n              // `minHeight` guarantees that the header has the correct height\n              // when there is no title (i.e. in the preview)\n              lineHeight: '24px',\n              minHeight: '26px',\n              whiteSpace: 'nowrap',\n              overflow: 'hidden',\n              textOverflow: 'ellipsis',\n            }}\n          >\n            {title}\n          </Typography>\n          {/* Show the info tooltip when description is defined and is not all whitespace */}\n          {description !== undefined && description.trim().length > 0 && (\n            <Box sx={{ display: editHandlers === undefined ? 'var(--panel-hover, none)' : 'flex' }}>\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            </Box>\n          )}\n          {links !== undefined && links.length > 0 && <PanelLinks links={links} />}\n        </Stack>\n      }\n      action={<PanelActions title={title} readHandlers={readHandlers} editHandlers={editHandlers} extra={extra} />}\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          '.MuiCardHeader-action': {\n            // Overriding the negative margins from MUI's defaults, so we\n            // can vertically center the icons. Moving these values to a wrapper\n            // inside the action in `HeaderActionWrapper` below.\n            // https://github.com/mui/material-ui/blob/master/packages/mui-material/src/CardHeader/CardHeader.js#L56-L58\n            margin: 'auto',\n          },\n        }),\n        sx\n      )}\n      {...rest}\n    />\n  );\n}\n"],"names":["Box","CardHeader","Stack","Typography","InfoTooltip","combineSx","useReplaceVariablesInString","InformationOutlineIcon","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelLinks","HeaderIconButton","PanelHeader","id","title","rawTitle","description","rawDescription","links","readHandlers","editHandlers","sx","extra","rest","titleElementId","descriptionTooltipId","component","aria-labelledby","aria-describedby","disableTypography","direction","variant","lineHeight","minHeight","whiteSpace","overflow","textOverflow","undefined","trim","length","display","enterDelay","aria-label","size","aria-hidden","fontSize","color","theme","palette","text","secondary","action","containerType","containerName","padding","spacing","borderBottom","divider","margin"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,EAAEC,UAAU,EAAmBC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AACpF,SAASC,WAAW,EAAEC,SAAS,QAAQ,yBAAyB;AAEhE,SAASC,2BAA2B,QAAQ,4BAA4B;AACxE,OAAOC,4BAA4B,qCAAqC;AAExE,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AACjE,SAASC,UAAU,QAAQ,eAAe;AAC1C,SAASC,gBAAgB,QAAQ,qBAAqB;AActD,OAAO,SAASC,YAAY,EAC1BC,EAAE,EACFC,OAAOC,QAAQ,EACfC,aAAaC,cAAc,EAC3BC,KAAK,EACLC,YAAY,EACZC,YAAY,EACZC,EAAE,EACFC,KAAK,EACL,GAAGC,MACc;IACjB,MAAMC,iBAAiB,CAAC,EAAEX,GAAG,MAAM,CAAC;IACpC,MAAMY,uBAAuB,CAAC,EAAEZ,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQR,4BAA4BS;IAC1C,MAAMC,cAAcV,4BAA4BW;IAEhD,qBACE,KAAChB;QACCY,IAAIA;QACJa,WAAU;QACVC,mBAAiBH;QACjBI,oBAAkBH;QAClBI,iBAAiB;QACjBf,qBACE,MAACZ;YAAM4B,WAAU;;8BACf,KAAC3B;oBACCU,IAAIW;oBACJO,SAAQ;oBACRV,IAAI;wBACF,gEAAgE;wBAChE,+CAA+C;wBAC/CW,YAAY;wBACZC,WAAW;wBACXC,YAAY;wBACZC,UAAU;wBACVC,cAAc;oBAChB;8BAECtB;;gBAGFE,gBAAgBqB,aAAarB,YAAYsB,IAAI,GAAGC,MAAM,GAAG,mBACxD,KAACvC;oBAAIqB,IAAI;wBAAEmB,SAASpB,iBAAiBiB,YAAY,6BAA6B;oBAAO;8BACnF,cAAA,KAACjC;wBAAYS,IAAIY;wBAAsBT,aAAaA;wBAAayB,YAAY;kCAC3E,cAAA,KAAC9B;4BAAiB+B,cAAW;4BAAoBC,MAAK;sCACpD,cAAA,KAACpC;gCACCqB,oBAAiB;gCACjBgB,eAAa;gCACbC,UAAS;gCACTxB,IAAI;oCAAEyB,OAAO,CAACC,QAAUA,MAAMC,OAAO,CAACC,IAAI,CAACC,SAAS;gCAAC;;;;;gBAM9DhC,UAAUmB,aAAanB,MAAMqB,MAAM,GAAG,mBAAK,KAAC7B;oBAAWQ,OAAOA;;;;QAGnEiC,sBAAQ,KAAC1C;YAAaK,OAAOA;YAAOK,cAAcA;YAAcC,cAAcA;YAAcE,OAAOA;;QACnGD,IAAIhB,UACF,CAAC0C,QAAW,CAAA;gBACVK,eAAe;gBACfC,eAAe7C;gBACf8C,SAASP,MAAMQ,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAET,MAAMC,OAAO,CAACS,OAAO,CAAC,CAAC;gBAClD,0BAA0B;oBACxBtB,UAAU;gBACZ;gBACA,yBAAyB;oBACvB,6DAA6D;oBAC7D,oEAAoE;oBACpE,oDAAoD;oBACpD,4GAA4G;oBAC5GuB,QAAQ;gBACV;YACF,CAAA,GACArC;QAED,GAAGE,IAAI;;AAGd"}

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

@@ -0,0 +1,6 @@
+import { Link } from '@perses-dev/core';
+import { ReactElement } from 'react';
+export declare function PanelLinks({ links }: {
+    links: Link[];
+}): ReactElement;
+//# sourceMappingURL=PanelLinks.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PanelLinks.d.ts","sourceRoot":"","sources":["../../../src/components/Panel/PanelLinks.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAc,YAAY,EAAY,MAAM,OAAO,CAAC;AAI3D,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,EAAE;IAAE,KAAK,EAAE,IAAI,EAAE,CAAA;CAAE,GAAG,YAAY,CAgDrE"}

package/dist/components/Panel/PanelLinks.js

@@ -0,0 +1,123 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { IconButton, Link as LinkComponent, Menu, MenuItem } from '@mui/material';
+import LaunchIcon from 'mdi-material-ui/Launch';
+import { useState } from 'react';
+import { InfoTooltip } from '@perses-dev/components';
+import { useReplaceVariablesInString } from '@perses-dev/plugin-system';
+export function PanelLinks({ links }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isMenuOpened = Boolean(anchorEl);
+    const handleOpenMenu = (event)=>{
+        setAnchorEl(event.currentTarget);
+    };
+    const handleClose = ()=>{
+        setAnchorEl(null);
+    };
+    // If there is only one link, show it directly
+    if (links.length === 1 && links[0]) {
+        const link = links[0];
+        return /*#__PURE__*/ _jsx(LinkButton, {
+            link: link
+        });
+    }
+    // Else we show a menu with a list of all links
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: `${links.length} links`,
+                enterDelay: 100,
+                children: /*#__PURE__*/ _jsx(IconButton, {
+                    "aria-label": "Panel links",
+                    size: "small",
+                    onClick: handleOpenMenu,
+                    sx: (theme)=>({
+                            borderRadius: theme.shape.borderRadius,
+                            padding: '4px'
+                        }),
+                    children: /*#__PURE__*/ _jsx(LaunchIcon, {
+                        "aria-describedby": "links-icon",
+                        fontSize: "inherit",
+                        sx: {
+                            color: (theme)=>theme.palette.text.secondary
+                        }
+                    })
+                })
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                anchorEl: anchorEl,
+                open: isMenuOpened,
+                onClose: handleClose,
+                MenuListProps: {
+                    'aria-labelledby': 'panel-links'
+                },
+                children: links.map((link)=>/*#__PURE__*/ _jsx(LinkMenuItem, {
+                        link: link
+                    }, link.url))
+            })
+        ]
+    });
+}
+function LinkButton({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: tooltip ?? url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ _jsx(IconButton, {
+            "aria-label": name ?? url,
+            size: "small",
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            sx: (theme)=>({
+                    borderRadius: theme.shape.borderRadius,
+                    padding: '4px'
+                }),
+            children: /*#__PURE__*/ _jsx(LaunchIcon, {
+                fontSize: "inherit",
+                sx: {
+                    color: (theme)=>theme.palette.text.secondary
+                }
+            })
+        })
+    });
+}
+function LinkMenuItem({ link }) {
+    const { url, name, tooltip, targetBlank } = useLink(link);
+    return /*#__PURE__*/ _jsx(InfoTooltip, {
+        description: tooltip ?? url,
+        enterDelay: 100,
+        children: /*#__PURE__*/ _jsx(MenuItem, {
+            component: LinkComponent,
+            href: url,
+            target: targetBlank ? '_blank' : '_self',
+            children: name ?? url
+        })
+    });
+}
+function useLink(link) {
+    const url = useReplaceVariablesInString(link.url) ?? link.url;
+    const name = useReplaceVariablesInString(link.name);
+    const tooltip = useReplaceVariablesInString(link.tooltip);
+    if (link.renderVariables === false) {
+        return link;
+    }
+    return {
+        ...link,
+        url,
+        name,
+        tooltip
+    };
+}
+
+//# sourceMappingURL=PanelLinks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Panel/PanelLinks.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { IconButton, Link as LinkComponent, Menu, MenuItem, Theme } from '@mui/material';\nimport LaunchIcon from 'mdi-material-ui/Launch';\nimport { Link } from '@perses-dev/core';\nimport { MouseEvent, ReactElement, useState } from 'react';\nimport { InfoTooltip } from '@perses-dev/components';\nimport { useReplaceVariablesInString } from '@perses-dev/plugin-system';\n\nexport function PanelLinks({ links }: { links: Link[] }): ReactElement {\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n  const isMenuOpened = Boolean(anchorEl);\n  const handleOpenMenu = (event: MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  // If there is only one link, show it directly\n  if (links.length === 1 && links[0]) {\n    const link = links[0];\n    return <LinkButton link={link} />;\n  }\n\n  // Else we show a menu with a list of all links\n  return (\n    <>\n      <InfoTooltip description={`${links.length} links`} enterDelay={100}>\n        <IconButton\n          aria-label=\"Panel links\"\n          size=\"small\"\n          onClick={handleOpenMenu}\n          sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n        >\n          <LaunchIcon\n            aria-describedby=\"links-icon\"\n            fontSize=\"inherit\"\n            sx={{ color: (theme) => theme.palette.text.secondary }}\n          />\n        </IconButton>\n      </InfoTooltip>\n\n      <Menu\n        anchorEl={anchorEl}\n        open={isMenuOpened}\n        onClose={handleClose}\n        MenuListProps={{\n          'aria-labelledby': 'panel-links',\n        }}\n      >\n        {links.map((link: Link) => (\n          <LinkMenuItem key={link.url} link={link} />\n        ))}\n      </Menu>\n    </>\n  );\n}\n\nfunction LinkButton({ link }: { link: Link }): ReactElement {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <IconButton\n        aria-label={name ?? url}\n        size=\"small\"\n        href={url}\n        target={targetBlank ? '_blank' : '_self'}\n        sx={(theme) => ({ borderRadius: theme.shape.borderRadius, padding: '4px' })}\n      >\n        <LaunchIcon fontSize=\"inherit\" sx={{ color: (theme: Theme) => theme.palette.text.secondary }} />\n      </IconButton>\n    </InfoTooltip>\n  );\n}\n\nfunction LinkMenuItem({ link }: { link: Link }): ReactElement {\n  const { url, name, tooltip, targetBlank } = useLink(link);\n\n  return (\n    <InfoTooltip description={tooltip ?? url} enterDelay={100}>\n      <MenuItem component={LinkComponent} href={url} target={targetBlank ? '_blank' : '_self'}>\n        {name ?? url}\n      </MenuItem>\n    </InfoTooltip>\n  );\n}\n\nfunction useLink(link: Link): Link {\n  const url = useReplaceVariablesInString(link.url) ?? link.url;\n  const name = useReplaceVariablesInString(link.name);\n  const tooltip = useReplaceVariablesInString(link.tooltip);\n\n  if (link.renderVariables === false) {\n    return link;\n  }\n\n  return { ...link, url, name, tooltip };\n}\n"],"names":["IconButton","Link","LinkComponent","Menu","MenuItem","LaunchIcon","useState","InfoTooltip","useReplaceVariablesInString","PanelLinks","links","anchorEl","setAnchorEl","isMenuOpened","Boolean","handleOpenMenu","event","currentTarget","handleClose","length","link","LinkButton","description","enterDelay","aria-label","size","onClick","sx","theme","borderRadius","shape","padding","aria-describedby","fontSize","color","palette","text","secondary","open","onClose","MenuListProps","map","LinkMenuItem","url","name","tooltip","targetBlank","useLink","href","target","component","renderVariables"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 /**
  * The Add/Edit panel drawer for editing a panel's options.
  */
-export declare const PanelDrawer: () => JSX.Element;
+export declare const PanelDrawer: () => ReactElement;
 //# sourceMappingURL=PanelDrawer.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":";AAmBA;;GAEG;AACH,eAAO,MAAM,WAAW,mBA+CvB,CAAC"}
+{"version":3,"file":"PanelDrawer.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAM/C;;GAEG;AACH,eAAO,MAAM,WAAW,QAAO,YAiD9B,CAAC"}

package/dist/components/PanelDrawer/PanelDrawer.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useState } from 'react';
-import { Drawer } from '@perses-dev/components';
+import { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { usePanelEditor } from '../../context';
 import { PanelEditorForm } from './PanelEditorForm';
 /**
@@ -36,7 +36,7 @@ import { PanelEditorForm } from './PanelEditorForm';
     };
     // Don't call closeDrawer on the store until the Drawer has completely transitioned out and reset close state
     const handleExited = ()=>{
-        panelEditor === null || panelEditor === void 0 ? void 0 : panelEditor.close();
+        panelEditor?.close();
         setIsClosing(false);
     };
     // Disables closing on click out. This is a quick-win solution to avoid losing draft changes.
@@ -50,11 +50,14 @@ import { PanelEditorForm } from './PanelEditorForm';
             onExited: handleExited
         },
         "data-testid": "panel-editor",
-        children: panelEditor && /*#__PURE__*/ _jsx(PanelEditorForm, {
-            initialAction: panelEditor.mode,
-            initialValues: panelEditor.initialValues,
-            onSave: handleSave,
-            onClose: handleClose
+        children: panelEditor && /*#__PURE__*/ _jsx(ErrorBoundary, {
+            FallbackComponent: ErrorAlert,
+            children: /*#__PURE__*/ _jsx(PanelEditorForm, {
+                initialAction: panelEditor.mode,
+                initialValues: panelEditor.initialValues,
+                onSave: handleSave,
+                onClose: handleClose
+            })
         })
     });
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { useState } from 'react';\nimport { Drawer } from '@perses-dev/components';\nimport { PanelEditorValues, 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 = () => {\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 === false;\n\n  function handleSave(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\n  const handleClose = () => {\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 = () => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\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 = () => {\n    /* do nothing */\n  };\n\n  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\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        <PanelEditorForm\n          initialAction={panelEditor.mode}\n          initialValues={panelEditor.initialValues}\n          onSave={handleSave}\n          onClose={handleClose}\n        />\n      )}\n    </Drawer>\n  );\n};\n"],"names":["useState","Drawer","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,QAAQ,yBAAyB;AAChD,SAA4BC,cAAc,QAAQ,gBAAgB;AAClE,SAASC,eAAe,QAAQ,oBAAoB;AAEpD;;CAEC,GACD,OAAO,MAAMC,cAAc;IACzB,MAAMC,cAAcH;IAEpB,iHAAiH;IACjH,MAAM,CAACI,WAAWC,aAAa,GAAGP,SAAS;IAE3C,oEAAoE;IACpE,MAAMQ,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,aAAaF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,wBAAAA,yBAAAA,KAAAA,IAAAA,YAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAChB;QAAOO,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACF;YACCmB,eAAejB,YAAYkB;YAC3BC,eAAenB,YAAYmB;YAC3BC,QAAQf;YACRQ,SAASJ;;;AAKnB,EAAE"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelDrawer.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\n// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Drawer, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorValues } from '@perses-dev/core';\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 === false;\n\n  function handleSave(values: PanelEditorValues): void {\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\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 = (): void => {\n    panelEditor?.close();\n    setIsClosing(false);\n  };\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  return (\n    <Drawer isOpen={isOpen} onClose={handleClickOut} SlideProps={{ onExited: handleExited }} data-testid=\"panel-editor\">\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};\n"],"names":["useState","Drawer","ErrorAlert","ErrorBoundary","usePanelEditor","PanelEditorForm","PanelDrawer","panelEditor","isClosing","setIsClosing","isOpen","undefined","handleSave","values","Error","applyChanges","handleClose","handleExited","close","handleClickOut","onClose","SlideProps","onExited","data-testid","FallbackComponent","initialAction","mode","initialValues","onSave"],"mappings":"AAAA,uDAAuD,GACvD,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAE3E,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,GAAGT,SAAS;IAE3C,oEAAoE;IACpE,MAAMU,SAASH,gBAAgBI,aAAaH,cAAc;IAE1D,SAASI,WAAWC,MAAyB;QAC3C,kHAAkH;QAClH,IAAIN,gBAAgBI,aAAaE,WAAWF,WAAW;YACrD,MAAM,IAAIG,MAAM;QAClB;QACAP,YAAYQ,YAAY,CAACF;QACzBJ,aAAa;IACf;IAEA,MAAMO,cAAc;QAClBP,aAAa;IACf;IAEA,6GAA6G;IAC7G,MAAMQ,eAAe;QACnBV,aAAaW;QACbT,aAAa;IACf;IAEA,6FAA6F;IAC7F,kHAAkH;IAClH,MAAMU,iBAAiB;IACrB,cAAc,GAChB;IAEA,qBACE,KAAClB;QAAOS,QAAQA;QAAQU,SAASD;QAAgBE,YAAY;YAAEC,UAAUL;QAAa;QAAGM,eAAY;kBAElGhB,6BACC,KAACJ;YAAcqB,mBAAmBtB;sBAChC,cAAA,KAACG;gBACCoB,eAAelB,YAAYmB,IAAI;gBAC/BC,eAAepB,YAAYoB,aAAa;gBACxCC,QAAQhB;gBACRQ,SAASJ;;;;AAMrB,EAAE"}

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

@@ -1,13 +1,12 @@
-/// <reference types="react" />
-import { Action } from '@perses-dev/core';
-import { PanelEditorValues } from '../../context/DashboardProvider/panel-editor-slice';
+import { ReactElement } from 'react';
+import { Action, PanelEditorValues } from '@perses-dev/core';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
     initialAction: Action;
     onSave: (values: PanelEditorValues) => void;
     onClose: () => void;
 }
-export declare function PanelEditorForm(props: PanelEditorFormProps): JSX.Element;
+export declare function PanelEditorForm(props: PanelEditorFormProps): ReactElement;
 /**
  * The `id` attribute added to the `PanelEditorForm` component, allowing submit buttons to live outside the form.
  */

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":";AAeA,OAAO,EAAE,MAAM,EAAmB,MAAM,kBAAkB,CAAC;AAY3D,OAAO,EAAE,iBAAiB,EAAE,MAAM,oDAAoD,CAAC;AAKvF,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,eAwN1D;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,EAAuB,MAAM,OAAO,CAAC;AAE1D,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,CA0NzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -11,32 +11,42 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';
 import { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText } from '@perses-dev/plugin-system';
-import { Controller, FormProvider, useForm } from 'react-hook-form';
+import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, getSubmitText, useValidationSchemas } from '@perses-dev/plugin-system';
+import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useListPanelGroups } from '../../context';
-import { panelEditorValidationSchema } from '../../validation';
 import { PanelPreview } from './PanelPreview';
 import { usePanelEditor } from './usePanelEditor';
 export function PanelEditorForm(props) {
-    const { initialValues: { panelDefinition: initialPanelDef , groupId: initialGroupId  } , initialAction , onSave , onClose  } = props;
+    const { initialValues, initialAction, onSave, onClose } = props;
     const panelGroups = useListPanelGroups();
-    const [groupId, setGroupId] = useState(initialGroupId);
-    const { panelDefinition , setName , setDescription , setQueries , setPlugin , setPanelDefinition  } = usePanelEditor(initialPanelDef);
-    const { plugin  } = panelDefinition.spec;
+    const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = usePanelEditor(initialValues.panelDefinition);
+    const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = useState(false);
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = usePluginEditor({
-        pluginType: 'Panel',
+        pluginTypes: [
+            'Panel'
+        ],
         value: {
-            kind: plugin.kind,
+            selection: {
+                kind: plugin.kind,
+                type: 'Panel'
+            },
             spec: plugin.spec
         },
         onChange: (plugin)=>{
-            setPlugin(plugin);
+            form.setValue('panelDefinition.spec.plugin', {
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
+            setPlugin({
+                kind: plugin.selection.kind,
+                spec: plugin.spec
+            });
         },
         onHideQueryEditorChange: (isHidden)=>{
             setQueries(undefined, isHidden);
@@ -44,35 +54,31 @@ export function PanelEditorForm(props) {
     });
     const titleAction = getTitleAction(initialAction, true);
     const submitText = getSubmitText(initialAction, true);
+    const { panelEditorSchema } = useValidationSchemas();
     const form = useForm({
-        resolver: zodResolver(panelEditorValidationSchema),
+        resolver: zodResolver(panelEditorSchema),
         mode: 'onBlur',
-        defaultValues: {
-            name: initialPanelDef.spec.display.name,
-            groupId: initialGroupId,
-            description: initialPanelDef.spec.display.description,
-            type: pluginEditor.pendingKind ? pluginEditor.pendingKind : plugin.kind
-        }
+        defaultValues: initialValues
+    });
+    const links = useWatch({
+        control: form.control,
+        name: 'panelDefinition.spec.links'
     });
-    const processForm = ()=>{
-        const values = {
-            groupId,
-            panelDefinition
-        };
-        onSave(values);
+    useEffect(()=>{
+        setLinks(links);
+    }, [
+        setLinks,
+        links
+    ]);
+    const processForm = (data)=>{
+        onSave(data);
     };
     // When user click on cancel, several possibilities:
     // - create action: ask for discard approval
     // - update action: ask for discard approval if changed
     // - read action: don´t ask for discard approval
     function handleCancel() {
-        if (JSON.stringify({
-            groupId: initialGroupId,
-            panelDefinition: initialPanelDef
-        }) !== JSON.stringify({
-            groupId,
-            panelDefinition
-        })) {
+        if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {
             setDiscardDialogOpened(true);
         } else {
             onClose();
@@ -80,14 +86,13 @@ export function PanelEditorForm(props) {
     }
     const handlePanelDefinitionChange = (nextPanelDefStr)=>{
         const nextPanelDef = JSON.parse(nextPanelDefStr);
-        const { kind: pluginKind , spec: pluginSpec  } = nextPanelDef.spec.plugin;
+        const { kind: pluginKind, spec: pluginSpec } = nextPanelDef.spec.plugin;
         // if panel plugin kind and spec are modified, then need to save current spec
         if (panelDefinition.spec.plugin.kind !== pluginKind && JSON.stringify(panelDefinition.spec.plugin.spec) !== JSON.stringify(pluginSpec)) {
             pluginEditor.rememberCurrentSpecState();
         }
         setPanelDefinition(nextPanelDef);
     };
-    var _panelGroup_title, _pluginEditor_error_message;
     return /*#__PURE__*/ _jsxs(FormProvider, {
         ...form,
         children: [
@@ -142,94 +147,93 @@ export function PanelEditorForm(props) {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ _jsx(Controller, {
-                                name: "name",
-                                render: ({ field , fieldState  })=>{
-                                    var _fieldState_error;
-                                    /*#__PURE__*/ return _jsx(TextField, {
+                                control: form.control,
+                                name: "panelDefinition.spec.display.name",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Name",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ _jsx(Controller, {
+                                control: form.control,
                                 name: "groupId",
-                                render: ({ field , fieldState  })=>{
-                                    var _fieldState_error;
-                                    /*#__PURE__*/ return _jsx(TextField, {
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         select: true,
                                         ...field,
                                         required: true,
                                         fullWidth: true,
                                         label: "Group",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
                                         onChange: (event)=>{
                                             field.onChange(event);
-                                            setGroupId(+event.target.value);
                                         },
                                         children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
                                                 value: panelGroup.id,
-                                                children: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : `Group ${index + 1}`
+                                                children: panelGroup.title ?? `Group ${index + 1}`
                                             }, panelGroup.id))
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
                             item: true,
                             xs: 8,
                             children: /*#__PURE__*/ _jsx(Controller, {
-                                name: "description",
-                                render: ({ field , fieldState  })=>{
-                                    var _fieldState_error;
-                                    /*#__PURE__*/ return _jsx(TextField, {
+                                control: form.control,
+                                name: "panelDefinition.spec.display.description",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
-                                        helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: fieldState.error?.message,
+                                        value: field.value ?? '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsx(Grid, {
                             item: true,
                             xs: 4,
                             children: /*#__PURE__*/ _jsx(Controller, {
-                                name: "type",
-                                render: ({ field , fieldState  })=>{
-                                    var _pluginEditor_error, _fieldState_error;
-                                    /*#__PURE__*/ return _jsx(PluginKindSelect, {
+                                control: form.control,
+                                name: "panelDefinition.spec.plugin.kind",
+                                render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(PluginKindSelect, {
                                         ...field,
-                                        pluginType: "Panel",
+                                        pluginTypes: [
+                                            'Panel'
+                                        ],
                                         required: true,
                                         fullWidth: true,
                                         label: "Type",
                                         disabled: pluginEditor.isLoading,
                                         error: !!pluginEditor.error || !!fieldState.error,
-                                        helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
+                                        helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                        value: {
+                                            type: 'Panel',
+                                            kind: field.value
+                                        },
                                         onChange: (event)=>{
-                                            field.onChange(event);
-                                            pluginEditor.onKindChange(event);
+                                            field.onChange(event.kind);
+                                            pluginEditor.onSelectionChange(event);
                                         }
-                                    });
-                                }
+                                    })
                             })
                         }),
                         /*#__PURE__*/ _jsxs(Grid, {
@@ -255,6 +259,7 @@ export function PanelEditorForm(props) {
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,
                                 children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
+                                    control: form.control,
                                     panelDefinition: panelDefinition,
                                     onJSONChange: handlePanelDefinitionChange,
                                     onQueriesChange: (queries)=>{