@perses-dev/dashboards 0.52.0 → 0.53.0-beta.1

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

@@ -1 +1 @@
-{"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 { CardHeader, CardHeaderProps, Stack, Typography, Tooltip } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, useReplaceVariablesInString } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode, useEffect, useRef, useState } from 'react';\nimport { HEADER_ACTIONS_CONTAINER_NAME } from '../../constants';\nimport { PanelActions, PanelActionsProps } from './PanelActions';\nimport { PanelOptions } from './Panel';\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[]; // Add pluginActions prop\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  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\n  const textRef = useRef<HTMLDivElement>(null);\n  const [isEllipsisActive, setIsEllipsisActive] = useState(false);\n\n  useEffect(() => {\n    if (textRef.current && dimension?.width) {\n      setIsEllipsisActive(textRef.current.scrollWidth > textRef.current.clientWidth);\n    }\n  }, [title, dimension?.width]);\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\" 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            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}\n"],"names":["CardHeader","Stack","Typography","Tooltip","combineSx","useReplaceVariablesInString","useEffect","useRef","useState","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","showIcons","viewQueriesHandler","dimension","rest","titleElementId","descriptionTooltipId","textRef","isEllipsisActive","setIsEllipsisActive","current","width","scrollWidth","clientWidth","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","disableHoverListener","variant","ref","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"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,EAAmBC,KAAK,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AACxF,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AACnF,SAAkCC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC7E,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAoBjE,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,SAAS,EACTC,kBAAkB,EAClBC,SAAS,EACT,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGhB,GAAG,MAAM,CAAC;IACpC,MAAMiB,uBAAuB,GAAGjB,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQR,4BAA4BS;IAC1C,MAAMC,cAAcV,4BAA4BW;IAEhD,MAAMc,UAAUvB,OAAuB;IACvC,MAAM,CAACwB,kBAAkBC,oBAAoB,GAAGxB,SAAS;IAEzDF,UAAU;QACR,IAAIwB,QAAQG,OAAO,IAAIP,WAAWQ,OAAO;YACvCF,oBAAoBF,QAAQG,OAAO,CAACE,WAAW,GAAGL,QAAQG,OAAO,CAACG,WAAW;QAC/E;IACF,GAAG;QAACvB;QAAOa,WAAWQ;KAAM;IAE5B,qBACE,KAAClC;QACCY,IAAIA;QACJyB,WAAU;QACVC,mBAAiBV;QACjBW,oBAAkBV;QAClBW,iBAAiB;QACjB3B,qBACE,MAACZ;YAAMwC,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAACxC;oBAAQU,OAAOA;oBAAO+B,sBAAsB,CAACb;8BAC5C,cAAA,KAAC7B;wBACCU,IAAIgB;wBACJiB,SAAQ;wBACRC,KAAKhB;wBACLT,IAAI;4BACF,gEAAgE;4BAChE,+CAA+C;4BAC/C0B,YAAY;4BACZC,WAAW;4BACXC,YAAY;4BACZC,UAAU;4BACVC,cAAc;wBAChB;kCAECtC;;;8BAGL,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbc,sBAAsBA;oBACtBZ,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdK,oBAAoBA;oBACpBH,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;oBACfC,WAAWA;;;;QAIjBH,IAAIjB,UACF,CAACgD,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAe7C;gBACf8C,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACA7B;QAED,GAAGM,IAAI;;AAGd"}
+{"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 { CardHeader, CardHeaderProps, Stack, Typography, Tooltip } from '@mui/material';\nimport { combineSx } from '@perses-dev/components';\nimport { Link } from '@perses-dev/core';\nimport { QueryData, 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';\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[]; // Add pluginActions prop\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  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\n  const textRef = useRef<HTMLDivElement>(null);\n\n  const isEllipsisActive =\n    textRef.current && dimension?.width ? textRef.current.scrollWidth > textRef.current.clientWidth : false;\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\" 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            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}\n"],"names":["CardHeader","Stack","Typography","Tooltip","combineSx","useReplaceVariablesInString","useRef","HEADER_ACTIONS_CONTAINER_NAME","PanelActions","PanelHeader","id","title","rawTitle","description","rawDescription","links","queryResults","readHandlers","editHandlers","sx","extra","pluginActions","showIcons","viewQueriesHandler","dimension","rest","titleElementId","descriptionTooltipId","textRef","isEllipsisActive","current","width","scrollWidth","clientWidth","component","aria-labelledby","aria-describedby","disableTypography","direction","alignItems","height","disableHoverListener","variant","ref","lineHeight","minHeight","whiteSpace","overflow","textOverflow","theme","containerType","containerName","padding","spacing","borderBottom","palette","divider"],"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,EAAmBC,KAAK,EAAEC,UAAU,EAAEC,OAAO,QAAQ,gBAAgB;AACxF,SAASC,SAAS,QAAQ,yBAAyB;AAEnD,SAAoBC,2BAA2B,QAAQ,4BAA4B;AACnF,SAAkCC,MAAM,QAAQ,QAAQ;AACxD,SAASC,6BAA6B,QAAQ,kBAAkB;AAChE,SAASC,YAAY,QAA2B,iBAAiB;AAoBjE,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,SAAS,EACTC,kBAAkB,EAClBC,SAAS,EACT,GAAGC,MACc;IACjB,MAAMC,iBAAiB,GAAGhB,GAAG,MAAM,CAAC;IACpC,MAAMiB,uBAAuB,GAAGjB,GAAG,YAAY,CAAC;IAEhD,MAAMC,QAAQN,4BAA4BO;IAC1C,MAAMC,cAAcR,4BAA4BS;IAEhD,MAAMc,UAAUtB,OAAuB;IAEvC,MAAMuB,mBACJD,QAAQE,OAAO,IAAIN,WAAWO,QAAQH,QAAQE,OAAO,CAACE,WAAW,GAAGJ,QAAQE,OAAO,CAACG,WAAW,GAAG;IAEpG,qBACE,KAACjC;QACCU,IAAIA;QACJwB,WAAU;QACVC,mBAAiBT;QACjBU,oBAAkBT;QAClBU,iBAAiB;QACjB1B,qBACE,MAACV;YAAMqC,WAAU;YAAMC,YAAW;YAASC,QAAO;;8BAChD,KAACrC;oBAAQQ,OAAOA;oBAAO8B,sBAAsB,CAACZ;8BAC5C,cAAA,KAAC3B;wBACCQ,IAAIgB;wBACJgB,SAAQ;wBACRC,KAAKf;wBACLT,IAAI;4BACF,gEAAgE;4BAChE,+CAA+C;4BAC/CyB,YAAY;4BACZC,WAAW;4BACXC,YAAY;4BACZC,UAAU;4BACVC,cAAc;wBAChB;kCAECrC;;;8BAGL,KAACH;oBACCG,OAAOA;oBACPE,aAAaA;oBACbc,sBAAsBA;oBACtBZ,OAAOA;oBACPE,cAAcA;oBACdC,cAAcA;oBACdK,oBAAoBA;oBACpBH,OAAOA;oBACPJ,cAAcA;oBACdK,eAAeA;oBACfC,WAAWA;;;;QAIjBH,IAAIf,UACF,CAAC6C,QAAW,CAAA;gBACVC,eAAe;gBACfC,eAAe5C;gBACf6C,SAASH,MAAMI,OAAO,CAAC;gBACvBC,cAAc,CAAC,UAAU,EAAEL,MAAMM,OAAO,CAACC,OAAO,EAAE;gBAClD,0BAA0B;oBACxBT,UAAU;gBACZ;YACF,CAAA,GACA5B;QAED,GAAGM,IAAI;;AAGd"}

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,EAA4C,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,MAAM,EAA+C,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAoB1G,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,CA+OzE;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,EAA4C,MAAM,OAAO,CAAC;AAE/E,OAAO,EAAE,MAAM,EAA+C,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAqB1G,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,CAkPzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}

package/dist/components/PanelDrawer/PanelEditorForm.js

@@ -19,6 +19,7 @@ import { PluginKindSelect, usePluginEditor, PanelSpecEditor, getTitleAction, get
 import { Controller, FormProvider, useForm, useWatch } from 'react-hook-form';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { useDashboard, useListPanelGroups } from '../../context';
+import { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';
 import { PanelPreview } from './PanelPreview';
 import { usePanelEditor } from './usePanelEditor';
 export function PanelEditorForm(props) {
@@ -122,200 +123,202 @@ export function PanelEditorForm(props) {
     ]);
     return /*#__PURE__*/ _jsx(TimeRangeProvider, {
         timeRange: timeRange,
-        children: /*#__PURE__*/ _jsxs(FormProvider, {
+        children: /*#__PURE__*/ _jsx(FormProvider, {
             ...form,
-            children: [
-                /*#__PURE__*/ _jsxs(Box, {
-                    sx: {
-                        display: 'flex',
-                        alignItems: 'center',
-                        padding: (theme)=>theme.spacing(1, 2),
-                        borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsxs(Typography, {
-                            variant: "h2",
-                            children: [
-                                titleAction,
-                                " Panel"
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsxs(Stack, {
-                            direction: "row",
-                            spacing: 1,
-                            marginLeft: "auto",
-                            children: [
-                                /*#__PURE__*/ _jsx(Button, {
-                                    variant: "contained",
-                                    disabled: !form.formState.isValid,
-                                    onClick: handleSubmit,
-                                    children: submitText
-                                }),
-                                /*#__PURE__*/ _jsx(Button, {
-                                    color: "secondary",
-                                    variant: "outlined",
-                                    onClick: handleCancel,
-                                    children: "Cancel"
-                                })
-                            ]
-                        })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(Box, {
-                    id: panelEditorFormId,
-                    sx: {
-                        flex: 1,
-                        overflowY: 'scroll',
-                        padding: (theme)=>theme.spacing(2)
-                    },
-                    children: /*#__PURE__*/ _jsxs(Grid, {
-                        container: true,
-                        spacing: 2,
+            children: /*#__PURE__*/ _jsxs(PanelEditorProvider, {
+                children: [
+                    /*#__PURE__*/ _jsxs(Box, {
+                        sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            padding: (theme)=>theme.spacing(1, 2),
+                            borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                        },
                         children: [
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    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?.message,
-                                            value: watchedName ?? '',
-                                            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 })=>/*#__PURE__*/ _jsx(TextField, {
-                                            select: true,
-                                            ...field,
-                                            required: true,
-                                            fullWidth: true,
-                                            label: "Group",
-                                            error: !!fieldState.error,
-                                            helperText: fieldState.error?.message,
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                            },
-                                            children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
-                                                    value: panelGroup.id,
-                                                    children: panelGroup.title ?? `Group ${index + 1}`
-                                                }, panelGroup.id))
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 8,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    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?.message,
-                                            value: watchedDescription ?? '',
-                                            onChange: (event)=>{
-                                                field.onChange(event);
-                                                setDescription(event.target.value);
-                                            }
-                                        })
-                                })
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 4,
-                                children: /*#__PURE__*/ _jsx(Controller, {
-                                    control: form.control,
-                                    name: "panelDefinition.spec.plugin.kind",
-                                    render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(PluginKindSelect, {
-                                            ...field,
-                                            pluginTypes: [
-                                                'Panel'
-                                            ],
-                                            required: true,
-                                            fullWidth: true,
-                                            label: "Type",
-                                            disabled: pluginEditor.isLoading,
-                                            error: !!pluginEditor.error || !!fieldState.error,
-                                            helperText: pluginEditor.error?.message ?? fieldState.error?.message,
-                                            value: {
-                                                type: 'Panel',
-                                                kind: watchedPluginKind
-                                            },
-                                            onChange: (event)=>{
-                                                field.onChange(event.kind);
-                                                pluginEditor.onSelectionChange(event);
-                                            }
-                                        })
-                                })
+                            /*#__PURE__*/ _jsxs(Typography, {
+                                variant: "h2",
+                                children: [
+                                    titleAction,
+                                    " Panel"
+                                ]
                             }),
-                            /*#__PURE__*/ _jsxs(Grid, {
-                                item: true,
-                                xs: 12,
+                            /*#__PURE__*/ _jsxs(Stack, {
+                                direction: "row",
+                                spacing: 1,
+                                marginLeft: "auto",
                                 children: [
-                                    /*#__PURE__*/ _jsx(Typography, {
-                                        variant: "h4",
-                                        marginBottom: 1,
-                                        children: "Preview"
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        variant: "contained",
+                                        disabled: !form.formState.isValid,
+                                        onClick: handleSubmit,
+                                        children: submitText
                                     }),
-                                    /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                        FallbackComponent: ErrorAlert,
-                                        children: /*#__PURE__*/ _jsx(PanelPreview, {
-                                            panelDefinition: panelDefinition
-                                        })
+                                    /*#__PURE__*/ _jsx(Button, {
+                                        color: "secondary",
+                                        variant: "outlined",
+                                        onClick: handleCancel,
+                                        children: "Cancel"
                                     })
                                 ]
-                            }),
-                            /*#__PURE__*/ _jsx(Grid, {
-                                item: true,
-                                xs: 12,
-                                children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                    FallbackComponent: ErrorAlert,
-                                    children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
-                                        ref: pluginEditorRef,
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsx(Box, {
+                        id: panelEditorFormId,
+                        sx: {
+                            flex: 1,
+                            overflowY: 'scroll',
+                            padding: (theme)=>theme.spacing(2)
+                        },
+                        children: /*#__PURE__*/ _jsxs(Grid, {
+                            container: true,
+                            spacing: 2,
+                            children: [
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ _jsx(Controller, {
+                                        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?.message,
+                                                value: watchedName ?? '',
+                                                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 })=>/*#__PURE__*/ _jsx(TextField, {
+                                                select: true,
+                                                ...field,
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Group",
+                                                error: !!fieldState.error,
+                                                helperText: fieldState.error?.message,
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                },
+                                                children: panelGroups.map((panelGroup, index)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                                        value: panelGroup.id,
+                                                        children: panelGroup.title ?? `Group ${index + 1}`
+                                                    }, panelGroup.id))
+                                            })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 8,
+                                    children: /*#__PURE__*/ _jsx(Controller, {
+                                        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?.message,
+                                                value: watchedDescription ?? '',
+                                                onChange: (event)=>{
+                                                    field.onChange(event);
+                                                    setDescription(event.target.value);
+                                                }
+                                            })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 4,
+                                    children: /*#__PURE__*/ _jsx(Controller, {
                                         control: form.control,
-                                        panelDefinition: panelDefinition,
-                                        onJSONChange: handlePanelDefinitionChange,
-                                        onQueriesChange: (queries)=>{
-                                            setQueries(queries);
-                                        },
-                                        onPluginSpecChange: (spec)=>{
-                                            pluginEditor.onSpecChange(spec);
-                                        }
+                                        name: "panelDefinition.spec.plugin.kind",
+                                        render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(PluginKindSelect, {
+                                                ...field,
+                                                pluginTypes: [
+                                                    'Panel'
+                                                ],
+                                                required: true,
+                                                fullWidth: true,
+                                                label: "Type",
+                                                disabled: pluginEditor.isLoading,
+                                                error: !!pluginEditor.error || !!fieldState.error,
+                                                helperText: pluginEditor.error?.message ?? fieldState.error?.message,
+                                                value: {
+                                                    type: 'Panel',
+                                                    kind: watchedPluginKind
+                                                },
+                                                onChange: (event)=>{
+                                                    field.onChange(event.kind);
+                                                    pluginEditor.onSelectionChange(event);
+                                                }
+                                            })
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsxs(Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: [
+                                        /*#__PURE__*/ _jsx(Typography, {
+                                            variant: "h4",
+                                            marginBottom: 1,
+                                            children: "Preview"
+                                        }),
+                                        /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                            FallbackComponent: ErrorAlert,
+                                            children: /*#__PURE__*/ _jsx(PanelPreview, {
+                                                panelDefinition: panelDefinition
+                                            })
+                                        })
+                                    ]
+                                }),
+                                /*#__PURE__*/ _jsx(Grid, {
+                                    item: true,
+                                    xs: 12,
+                                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                                        FallbackComponent: ErrorAlert,
+                                        children: /*#__PURE__*/ _jsx(PanelSpecEditor, {
+                                            ref: pluginEditorRef,
+                                            control: form.control,
+                                            panelDefinition: panelDefinition,
+                                            onJSONChange: handlePanelDefinitionChange,
+                                            onQueriesChange: (queries)=>{
+                                                setQueries(queries);
+                                            },
+                                            onPluginSpecChange: (spec)=>{
+                                                pluginEditor.onSpecChange(spec);
+                                            }
+                                        })
                                     })
                                 })
-                            })
-                        ]
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
+                        description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
+                        isOpen: isDiscardDialogOpened,
+                        onCancel: ()=>{
+                            setDiscardDialogOpened(false);
+                        },
+                        onDiscardChanges: ()=>{
+                            setDiscardDialogOpened(false);
+                            onClose();
+                        }
                     })
-                }),
-                /*#__PURE__*/ _jsx(DiscardChangesConfirmationDialog, {
-                    description: "You have unapplied changes in this panel. Are you sure you want to discard these changes? Changes cannot be recovered.",
-                    isOpen: isDiscardDialogOpened,
-                    onCancel: ()=>{
-                        setDiscardDialogOpened(false);
-                    },
-                    onDiscardChanges: ()=>{
-                        setDiscardDialogOpened(false);
-                        onClose();
-                    }
-                })
-            ]
+                ]
+            })
         })
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 { ReactElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, DEFAULT_DASHBOARD_DURATION, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n  PluginEditorRef,\n  TimeRangeProvider,\n  useTimeRangeParams,\n  useInitialTimeRange,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useDashboard, useListPanelGroups } from '../../context';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\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 pluginEditorRef = useRef<PluginEditorRef>(null);\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  const { dashboard } = useDashboard();\n  const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\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    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\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  const { timeRange } = useTimeRangeParams(initialTimeRange);\n\n  const handleSubmit = useCallback(() => {\n    pluginEditorRef.current?.flushChanges?.();\n    form.handleSubmit(processForm)();\n  }, [form, processForm]);\n\n  return (\n    <TimeRangeProvider timeRange={timeRange}>\n      <FormProvider {...form}>\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                    required\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            <Grid item xs={12}>\n              <Typography variant=\"h4\" marginBottom={1}>\n                Preview\n              </Typography>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <PanelPreview panelDefinition={panelDefinition} />\n              </ErrorBoundary>\n            </Grid>\n            <Grid item xs={12}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <PanelSpecEditor\n                  ref={pluginEditorRef}\n                  control={form.control}\n                  panelDefinition={panelDefinition}\n                  onJSONChange={handlePanelDefinitionChange}\n                  onQueriesChange={(queries) => {\n                    setQueries(queries);\n                  }}\n                  onPluginSpecChange={(spec) => {\n                    pluginEditor.onSpecChange(spec);\n                  }}\n                />\n              </ErrorBoundary>\n            </Grid>\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      </FormProvider>\n    </TimeRangeProvider>\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","useRef","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DEFAULT_DASHBOARD_DURATION","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","TimeRangeProvider","useTimeRangeParams","useInitialTimeRange","Controller","FormProvider","useForm","useWatch","zodResolver","useDashboard","useListPanelGroups","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","pluginEditorRef","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","dashboard","dashboardDuration","kind","duration","initialTimeRange","pluginEditor","pluginTypes","value","selection","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","JSON","stringify","getValues","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","timeRange","handleSubmit","current","flushChanges","sx","display","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","required","fullWidth","label","error","helperText","message","event","target","select","map","panelGroup","index","title","isLoading","onSelectionChange","marginBottom","FallbackComponent","ref","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","description","isOpen","onCancel","onDiscardChanges"],"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,SAAuBA,WAAW,EAAEC,SAAS,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAC/E,SAASC,GAAG,EAAEC,MAAM,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,SAAS,EAAEC,UAAU,QAAQ,gBAAgB;AAC1F,SAAiBC,0BAA0B,QAA4C,mBAAmB;AAC1G,SAASC,gCAAgC,EAAEC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACrG,SACEC,gBAAgB,EAChBC,eAAe,EACfC,eAAe,EACfC,cAAc,EACdC,aAAa,EACbC,oBAAoB,EAEpBC,iBAAiB,EACjBC,kBAAkB,EAClBC,mBAAmB,QACd,4BAA4B;AACnC,SAASC,UAAU,EAAEC,YAAY,EAAiBC,OAAO,EAAEC,QAAQ,QAAQ,kBAAkB;AAC7F,SAASC,WAAW,QAAQ,0BAA0B;AACtD,SAASC,YAAY,EAAEC,kBAAkB,QAAQ,gBAAgB;AACjE,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,cAAc,QAAQ,mBAAmB;AASlD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,aAAa,EAAEC,aAAa,EAAEC,MAAM,EAAEC,OAAO,EAAE,GAAGJ;IAC1D,MAAMK,kBAAkBrC,OAAwB;IAChD,MAAMsC,cAAcV;IACpB,MAAM,EAAEW,eAAe,EAAEC,OAAO,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,UAAU,EAAEC,SAAS,EAAEC,kBAAkB,EAAE,GACrGf,eAAeG,cAAcM,eAAe;IAC9C,MAAM,EAAEO,MAAM,EAAE,GAAGP,gBAAgBQ,IAAI;IACvC,MAAM,CAACC,uBAAuBC,uBAAuB,GAAGhD,SAAkB;IAE1E,MAAM,EAAEiD,iBAAiB,EAAE,GAAGhC;IAC9B,MAAMiC,OAAO3B,QAA2B;QACtC4B,UAAU1B,YAAYwB;QACtBG,MAAM;QACNC,eAAerB;IACjB;IAEA,MAAM,EAAEsB,SAAS,EAAE,GAAG5B;IACtB,MAAM6B,oBAAoBD,WAAWE,SAAS,cAAcF,UAAUR,IAAI,CAACW,QAAQ,GAAGjD;IACtF,MAAMkD,mBAAmBtC,oBAAoBmC;IAE7C,oFAAoF;IACpF,MAAMI,eAAe9C,gBAAgB;QACnC+C,aAAa;YAAC;SAAQ;QACtBC,OAAO;YAAEC,WAAW;gBAAEN,MAAMX,OAAOW,IAAI;gBAAEO,MAAM;YAAQ;YAAGjB,MAAMD,OAAOC,IAAI;QAAC;QAC5EkB,UAAU,CAACnB;YACTK,KAAKe,QAAQ,CAAC,+BAA+B;gBAAET,MAAMX,OAAOiB,SAAS,CAACN,IAAI;gBAAEV,MAAMD,OAAOC,IAAI;YAAC;YAC9FH,UAAU;gBACRa,MAAMX,OAAOiB,SAAS,CAACN,IAAI;gBAC3BV,MAAMD,OAAOC,IAAI;YACnB;QACF;QACAoB,yBAAyB,CAACC;YACxBzB,WAAW0B,WAAWD;QACxB;IACF;IAEA,MAAME,cAActD,eAAekB,eAAe;IAClD,MAAMqC,aAAatD,cAAciB,eAAe;IAEhD,MAAMsC,QAAQ/C,SAAS;QAAEgD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAA6B;IACnF3E,UAAU;QACR2C,SAAS8B;IACX,GAAG;QAAC9B;QAAU8B;KAAM;IAEpB,MAAMG,cAAgD7E,YACpD,CAAC8E;QACCzC,OAAOyC;IACT,GACA;QAACzC;KAAO;IAGV,oDAAoD;IACpD,4CAA4C;IAC5C,uDAAuD;IACvD,gDAAgD;IAChD,SAAS0C;QACP,IAAIC,KAAKC,SAAS,CAAC9C,mBAAmB6C,KAAKC,SAAS,CAAC5B,KAAK6B,SAAS,KAAK;YACtE/B,uBAAuB;QACzB,OAAO;YACLb;QACF;IACF;IAEA,MAAM6C,8BAA8B,CAACC;QACnC,MAAMC,eAAgCL,KAAKM,KAAK,CAACF;QACjD,MAAM,EAAEzB,MAAM4B,UAAU,EAAEtC,MAAMuC,UAAU,EAAE,GAAGH,aAAapC,IAAI,CAACD,MAAM;QACvE,6EAA6E;QAC7E,IACEP,gBAAgBQ,IAAI,CAACD,MAAM,CAACW,IAAI,KAAK4B,cACrCP,KAAKC,SAAS,CAACxC,gBAAgBQ,IAAI,CAACD,MAAM,CAACC,IAAI,MAAM+B,KAAKC,SAAS,CAACO,aACpE;YACA1B,aAAa2B,wBAAwB;QACvC;QACA1C,mBAAmBsC;IACrB;IAEA,MAAMK,cAAc/D,SAAS;QAAEgD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAAoC;IAChG,MAAMe,qBAAqBhE,SAAS;QAAEgD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAA2C;IAC9G,MAAMgB,oBAAoBjE,SAAS;QAAEgD,SAAStB,KAAKsB,OAAO;QAAEC,MAAM;IAAmC;IACrG,MAAM,EAAEiB,SAAS,EAAE,GAAGvE,mBAAmBuC;IAEzC,MAAMiC,eAAe9F,YAAY;QAC/BuC,gBAAgBwD,OAAO,EAAEC;QACzB3C,KAAKyC,YAAY,CAACjB;IACpB,GAAG;QAACxB;QAAMwB;KAAY;IAEtB,qBACE,KAACxD;QAAkBwE,WAAWA;kBAC5B,cAAA,MAACpE;YAAc,GAAG4B,IAAI;;8BACpB,MAACjD;oBACC6F,IAAI;wBACFC,SAAS;wBACTC,YAAY;wBACZC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC,GAAG;wBACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACC,OAAO,EAAE;oBAC/D;;sCAEA,MAAC/F;4BAAWgG,SAAQ;;gCAAMlC;gCAAY;;;sCACtC,MAAChE;4BAAMmG,WAAU;4BAAML,SAAS;4BAAGM,YAAW;;8CAC5C,KAACvG;oCAAOqG,SAAQ;oCAAYG,UAAU,CAACxD,KAAKyD,SAAS,CAACC,OAAO;oCAAEC,SAASlB;8CACrErB;;8CAEH,KAACpE;oCAAO4G,OAAM;oCAAYP,SAAQ;oCAAWM,SAASjC;8CAAc;;;;;;8BAKxE,KAAC3E;oBAAI8G,IAAIC;oBAAmBlB,IAAI;wBAAEmB,MAAM;wBAAGC,WAAW;wBAAUjB,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC;oBAAG;8BACnG,cAAA,MAAChG;wBAAKgH,SAAS;wBAAChB,SAAS;;0CACvB,KAAChG;gCAAKiH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAChG;oCACCmD,SAAStB,KAAKsB,OAAO;oCACrBC,MAAK;oCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAClH;4CACE,GAAGiH,KAAK;4CACTE,QAAQ;4CACRC,SAAS;4CACTC,OAAM;4CACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;4CACzBC,YAAYL,WAAWI,KAAK,EAAEE;4CAC9BjE,OAAO0B,eAAe;4CACtBvB,UAAU,CAAC+D;gDACTR,MAAMvD,QAAQ,CAAC+D;gDACfxF,QAAQwF,MAAMC,MAAM,CAACnE,KAAK;4CAC5B;;;;0CAKR,KAAC1D;gCAAKiH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAChG;oCACCmD,SAAStB,KAAKsB,OAAO;oCACrBC,MAAK;oCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAClH;4CACC2H,MAAM;4CACL,GAAGV,KAAK;4CACTE,QAAQ;4CACRC,SAAS;4CACTC,OAAM;4CACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;4CACzBC,YAAYL,WAAWI,KAAK,EAAEE;4CAC9B9D,UAAU,CAAC+D;gDACTR,MAAMvD,QAAQ,CAAC+D;4CACjB;sDAEC1F,YAAY6F,GAAG,CAAC,CAACC,YAAYC,sBAC5B,KAAChI;oDAA6ByD,OAAOsE,WAAWpB,EAAE;8DAC/CoB,WAAWE,KAAK,IAAI,CAAC,MAAM,EAAED,QAAQ,GAAG;mDAD5BD,WAAWpB,EAAE;;;;0CAQtC,KAAC5G;gCAAKiH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAChG;oCACCmD,SAAStB,KAAKsB,OAAO;oCACrBC,MAAK;oCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAClH;4CACE,GAAGiH,KAAK;4CACTG,SAAS;4CACTC,OAAM;4CACNC,OAAO,CAAC,CAACJ,WAAWI,KAAK;4CACzBC,YAAYL,WAAWI,KAAK,EAAEE;4CAC9BjE,OAAO2B,sBAAsB;4CAC7BxB,UAAU,CAAC+D;gDACTR,MAAMvD,QAAQ,CAAC+D;gDACfvF,eAAeuF,MAAMC,MAAM,CAACnE,KAAK;4CACnC;;;;0CAKR,KAAC1D;gCAAKiH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAChG;oCACCmD,SAAStB,KAAKsB,OAAO;oCACrBC,MAAK;oCACL6C,QAAQ,CAAC,EAAEC,KAAK,EAAEC,UAAU,EAAE,iBAC5B,KAAC5G;4CACE,GAAG2G,KAAK;4CACT3D,aAAa;gDAAC;6CAAQ;4CACtB6D,QAAQ;4CACRC,SAAS;4CACTC,OAAM;4CACNjB,UAAU/C,aAAa2E,SAAS;4CAChCV,OAAO,CAAC,CAACjE,aAAaiE,KAAK,IAAI,CAAC,CAACJ,WAAWI,KAAK;4CACjDC,YAAYlE,aAAaiE,KAAK,EAAEE,WAAWN,WAAWI,KAAK,EAAEE;4CAC7DjE,OAAO;gDAAEE,MAAM;gDAASP,MAAMiC;4CAAkB;4CAChDzB,UAAU,CAAC+D;gDACTR,MAAMvD,QAAQ,CAAC+D,MAAMvE,IAAI;gDACzBG,aAAa4E,iBAAiB,CAACR;4CACjC;;;;0CAKR,MAAC5H;gCAAKiH,IAAI;gCAACC,IAAI;;kDACb,KAAC9G;wCAAWgG,SAAQ;wCAAKiC,cAAc;kDAAG;;kDAG1C,KAAC7H;wCAAc8H,mBAAmB/H;kDAChC,cAAA,KAACkB;4CAAaU,iBAAiBA;;;;;0CAGnC,KAACnC;gCAAKiH,IAAI;gCAACC,IAAI;0CACb,cAAA,KAAC1G;oCAAc8H,mBAAmB/H;8CAChC,cAAA,KAACI;wCACC4H,KAAKtG;wCACLoC,SAAStB,KAAKsB,OAAO;wCACrBlC,iBAAiBA;wCACjBqG,cAAc3D;wCACd4D,iBAAiB,CAACC;4CAChBnG,WAAWmG;wCACb;wCACAC,oBAAoB,CAAChG;4CACnBa,aAAaoF,YAAY,CAACjG;wCAC5B;;;;;;;8BAMV,KAACrC;oBACCuI,aAAY;oBACZC,QAAQlG;oBACRmG,UAAU;wBACRlG,uBAAuB;oBACzB;oBACAmG,kBAAkB;wBAChBnG,uBAAuB;wBACvBb;oBACF;;;;;AAKV;AAEA;;CAEC,GACD,OAAO,MAAM6E,oBAAoB,oBAAoB"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelEditorForm.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 { ReactElement, useCallback, useEffect, useRef, useState } from 'react';\nimport { Box, Button, Grid, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { Action, DEFAULT_DASHBOARD_DURATION, PanelDefinition, PanelEditorValues } from '@perses-dev/core';\nimport { DiscardChangesConfirmationDialog, ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport {\n  PluginKindSelect,\n  usePluginEditor,\n  PanelSpecEditor,\n  getTitleAction,\n  getSubmitText,\n  useValidationSchemas,\n  PluginEditorRef,\n  TimeRangeProvider,\n  useTimeRangeParams,\n  useInitialTimeRange,\n} from '@perses-dev/plugin-system';\nimport { Controller, FormProvider, SubmitHandler, useForm, useWatch } from 'react-hook-form';\nimport { zodResolver } from '@hookform/resolvers/zod';\nimport { useDashboard, useListPanelGroups } from '../../context';\nimport { PanelEditorProvider } from '../../context/PanelEditorProvider/PanelEditorProvider';\nimport { PanelPreview } from './PanelPreview';\nimport { usePanelEditor } from './usePanelEditor';\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 pluginEditorRef = useRef<PluginEditorRef>(null);\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  const { dashboard } = useDashboard();\n  const dashboardDuration = dashboard?.kind === 'Dashboard' ? dashboard.spec.duration : DEFAULT_DASHBOARD_DURATION;\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\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    if (JSON.stringify(initialValues) !== JSON.stringify(form.getValues())) {\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  const { timeRange } = useTimeRangeParams(initialTimeRange);\n\n  const handleSubmit = useCallback(() => {\n    pluginEditorRef.current?.flushChanges?.();\n    form.handleSubmit(processForm)();\n  }, [form, processForm]);\n\n  return (\n    <TimeRangeProvider timeRange={timeRange}>\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                      required\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              <Grid item xs={12}>\n                <Typography variant=\"h4\" marginBottom={1}>\n                  Preview\n                </Typography>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <PanelPreview panelDefinition={panelDefinition} />\n                </ErrorBoundary>\n              </Grid>\n              <Grid item xs={12}>\n                <ErrorBoundary FallbackComponent={ErrorAlert}>\n                  <PanelSpecEditor\n                    ref={pluginEditorRef}\n                    control={form.control}\n                    panelDefinition={panelDefinition}\n                    onJSONChange={handlePanelDefinitionChange}\n                    onQueriesChange={(queries) => {\n                      setQueries(queries);\n                    }}\n                    onPluginSpecChange={(spec) => {\n                      pluginEditor.onSpecChange(spec);\n                    }}\n                  />\n                </ErrorBoundary>\n              </Grid>\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    </TimeRangeProvider>\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","useRef","useState","Box","Button","Grid","MenuItem","Stack","TextField","Typography","DEFAULT_DASHBOARD_DURATION","DiscardChangesConfirmationDialog","ErrorAlert","ErrorBoundary","PluginKindSelect","usePluginEditor","PanelSpecEditor","getTitleAction","getSubmitText","useValidationSchemas","TimeRangeProvider","useTimeRangeParams","useInitialTimeRange","Controller","FormProvider","useForm","useWatch","zodResolver","useDashboard","useListPanelGroups","PanelEditorProvider","PanelPreview","usePanelEditor","PanelEditorForm","props","initialValues","initialAction","onSave","onClose","pluginEditorRef","panelGroups","panelDefinition","setName","setDescription","setLinks","setQueries","setPlugin","setPanelDefinition","plugin","spec","isDiscardDialogOpened","setDiscardDialogOpened","panelEditorSchema","form","resolver","mode","defaultValues","dashboard","dashboardDuration","kind","duration","initialTimeRange","pluginEditor","pluginTypes","value","selection","type","onChange","setValue","onHideQueryEditorChange","isHidden","undefined","titleAction","submitText","links","control","name","processForm","data","handleCancel","JSON","stringify","getValues","handlePanelDefinitionChange","nextPanelDefStr","nextPanelDef","parse","pluginKind","pluginSpec","rememberCurrentSpecState","watchedName","watchedDescription","watchedPluginKind","timeRange","handleSubmit","current","flushChanges","sx","display","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","required","fullWidth","label","error","helperText","message","event","target","select","map","panelGroup","index","title","isLoading","onSelectionChange","marginBottom","FallbackComponent","ref","onJSONChange","onQueriesChange","queries","onPluginSpecChange","onSpecChange","description","isOpen","onCancel","onDiscardChanges"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAMrD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,CAoCjH"}
+{"version":3,"file":"PanelPreview.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelPreview.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAsB,MAAM,OAAO,CAAC;AAGzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,wBAAgB,YAAY,CAAC,EAAE,eAAe,EAAE,EAAE,IAAI,CAAC,iBAAiB,EAAE,iBAAiB,CAAC,GAAG,YAAY,GAAG,IAAI,CAyCjH"}

package/dist/components/PanelDrawer/PanelPreview.js

@@ -11,17 +11,20 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { useContext, useRef } from 'react';
 import { Box } from '@mui/material';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { Panel } from '../Panel';
+import { PanelEditorContext } from '../../context';
 const PANEL_PREVIEW_HEIGHT = 300;
 const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
 export function PanelPreview({ panelDefinition }) {
     const boxRef = useRef(null);
     let width = PANEL_PREVIEW_DEFAULT_WIDTH;
+    const panelEditorContext = useContext(PanelEditorContext);
     if (boxRef.current !== null) {
         width = boxRef.current.getBoundingClientRect().width;
+        panelEditorContext?.preview?.setPreviewPanelWidth?.(width);
     }
     const suggestedStepMs = useSuggestedStepMs(width);
     const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { ReactElement, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n  }\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isLoading) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","current","getBoundingClientRect","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"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,SAAuBA,MAAM,QAAQ,QAAQ;AAC7C,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AAEjC,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASV,OAAuB;IACtC,IAAIW,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBV,mBAAmBO;IAE3C,MAAM,EAAEI,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGd,UAAU,SAASM,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIR,gBAAgBS,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,UAAUX,gBAAgBS,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACjB;QAAIwB,KAAKf;QAAQgB,QAAQpB;kBACxB,cAAA,KAACJ;YAAoBmB,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,KAACvB;gBAAMwB,YAAYpB;;;;AAI3B"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelPreview.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 { ReactElement, useContext, useRef } from 'react';\nimport { Box } from '@mui/material';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { PanelEditorValues } from '@perses-dev/core';\nimport { Panel } from '../Panel';\nimport { PanelEditorContext } from '../../context';\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport function PanelPreview({ panelDefinition }: Pick<PanelEditorValues, 'panelDefinition'>): ReactElement | null {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\n    panelEditorContext?.preview?.setPreviewPanelWidth?.(width);\n  }\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin, isLoading } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n  if (isLoading) {\n    return null;\n  }\n\n  if (panelDefinition.spec.plugin.kind === '') {\n    return null;\n  }\n\n  const queries = panelDefinition.spec.queries ?? [];\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs, ...plugin?.queryOptions }}>\n        <Panel definition={panelDefinition} />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n"],"names":["useContext","useRef","Box","DataQueriesProvider","usePlugin","useSuggestedStepMs","Panel","PanelEditorContext","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","PanelPreview","panelDefinition","boxRef","width","panelEditorContext","current","getBoundingClientRect","preview","setPreviewPanelWidth","suggestedStepMs","data","plugin","isLoading","spec","kind","queries","definitions","length","map","query","ref","height","options","queryOptions","definition"],"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,SAAuBA,UAAU,EAAEC,MAAM,QAAQ,QAAQ;AACzD,SAASC,GAAG,QAAQ,gBAAgB;AACpC,SAASC,mBAAmB,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAE/F,SAASC,KAAK,QAAQ,WAAW;AACjC,SAASC,kBAAkB,QAAQ,gBAAgB;AAEnD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAEpC,OAAO,SAASC,aAAa,EAAEC,eAAe,EAA8C;IAC1F,MAAMC,SAASX,OAAuB;IACtC,IAAIY,QAAQJ;IAEZ,MAAMK,qBAAqBd,WAAWO;IAEtC,IAAIK,OAAOG,OAAO,KAAK,MAAM;QAC3BF,QAAQD,OAAOG,OAAO,CAACC,qBAAqB,GAAGH,KAAK;QACpDC,oBAAoBG,SAASC,uBAAuBL;IACtD;IAEA,MAAMM,kBAAkBd,mBAAmBQ;IAE3C,MAAM,EAAEO,MAAMC,MAAM,EAAEC,SAAS,EAAE,GAAGlB,UAAU,SAASO,gBAAgBY,IAAI,CAACF,MAAM,CAACG,IAAI;IACvF,IAAIF,WAAW;QACb,OAAO;IACT;IAEA,IAAIX,gBAAgBY,IAAI,CAACF,MAAM,CAACG,IAAI,KAAK,IAAI;QAC3C,OAAO;IACT;IAEA,MAAMC,UAAUd,gBAAgBY,IAAI,CAACE,OAAO,IAAI,EAAE;IAElD,2DAA2D;IAC3D,MAAMC,cAAcD,QAAQE,MAAM,GAC9BF,QAAQG,GAAG,CAAC,CAACC;QACX,OAAO;YACLL,MAAMK,MAAMN,IAAI,CAACF,MAAM,CAACG,IAAI;YAC5BD,MAAMM,MAAMN,IAAI,CAACF,MAAM,CAACE,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACrB;QAAI4B,KAAKlB;QAAQmB,QAAQvB;kBACxB,cAAA,KAACL;YAAoBuB,aAAaA;YAAaM,SAAS;gBAAEb;gBAAiB,GAAGE,QAAQY,YAAY;YAAC;sBACjG,cAAA,KAAC3B;gBAAM4B,YAAYvB;;;;AAI3B"}

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

@@ -1 +1 @@
-{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAK/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,CA6D/C"}
+{"version":3,"file":"PanelGroupDialog.d.ts","sourceRoot":"","sources":["../../../src/components/PanelGroupDialog/PanelGroupDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAO/C;;GAEG;AACH,wBAAgB,gBAAgB,IAAI,YAAY,CAkD/C"}