@perses-dev/dashboards 0.54.0-beta.5 → 0.54.0-beta.7

package/dist/components/Annotations/EditAnnotationsButton.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// Copyright 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 { useState } from 'react';
+import { Button } from '@mui/material';
+import PencilIcon from 'mdi-material-ui/PencilOutline';
+import { Drawer, InfoTooltip } from '@perses-dev/components';
+import { TOOLTIP_TEXT, editButtonStyle } from '../../constants';
+import { useAnnotationActions, useAnnotationSpecs } from '../../context';
+import { AnnotationEditor } from './AnnotationsEditor';
+export function EditAnnotationsButton({ variant = 'text', label = 'Annotations', color = 'primary', fullWidth }) {
+    const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = useState(false);
+    const annotationSpecs = useAnnotationSpecs();
+    const { setAnnotationSpecs } = useAnnotationActions();
+    const openAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(true);
+    };
+    const closeAnnotationEditor = ()=>{
+        setIsAnnotationEditorOpen(false);
+    };
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx(InfoTooltip, {
+                description: TOOLTIP_TEXT.editAnnotations,
+                children: /*#__PURE__*/ _jsx(Button, {
+                    startIcon: /*#__PURE__*/ _jsx(PencilIcon, {}),
+                    onClick: openAnnotationEditor,
+                    "aria-label": TOOLTIP_TEXT.editAnnotations,
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: editButtonStyle,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ _jsx(Drawer, {
+                isOpen: isAnnotationEditorOpen,
+                onClose: closeAnnotationEditor,
+                slotProps: {
+                    paper: {
+                        sx: {
+                            width: '50%'
+                        }
+                    }
+                },
+                "data-testid": "annotation-editor",
+                children: /*#__PURE__*/ _jsx(AnnotationEditor, {
+                    annotationSpecs: annotationSpecs,
+                    onCancel: closeAnnotationEditor,
+                    onChange: (annotations)=>{
+                        setAnnotationSpecs(annotations);
+                        setIsAnnotationEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=EditAnnotationsButton.js.map

package/dist/components/Annotations/EditAnnotationsButton.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/Annotations/EditAnnotationsButton.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { Button, ButtonProps } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport { Drawer, InfoTooltip } from '@perses-dev/components';\nimport { AnnotationSpec } from '@perses-dev/spec';\nimport { TOOLTIP_TEXT, editButtonStyle } from '../../constants';\nimport { useAnnotationActions, useAnnotationSpecs } from '../../context';\nimport { AnnotationEditor } from './AnnotationsEditor';\n\nexport interface EditAnnotationsButtonProps extends Pick<ButtonProps, 'fullWidth'> {\n  /**\n   * The variant to use to display the button.\n   */\n  variant?: 'text' | 'outlined';\n\n  /**\n   * The color to use to display the button.\n   */\n  color?: 'primary' | 'secondary';\n\n  /**\n   * The label used inside the button.\n   */\n  label?: string;\n}\n\nexport function EditAnnotationsButton({\n  variant = 'text',\n  label = 'Annotations',\n  color = 'primary',\n  fullWidth,\n}: EditAnnotationsButtonProps): ReactElement {\n  const [isAnnotationEditorOpen, setIsAnnotationEditorOpen] = useState(false);\n  const annotationSpecs: AnnotationSpec[] = useAnnotationSpecs();\n  const { setAnnotationSpecs } = useAnnotationActions();\n\n  const openAnnotationEditor = (): void => {\n    setIsAnnotationEditorOpen(true);\n  };\n\n  const closeAnnotationEditor = (): void => {\n    setIsAnnotationEditorOpen(false);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.editAnnotations}>\n        <Button\n          startIcon={<PencilIcon />}\n          onClick={openAnnotationEditor}\n          aria-label={TOOLTIP_TEXT.editAnnotations}\n          variant={variant}\n          color={color}\n          fullWidth={fullWidth}\n          sx={editButtonStyle}\n        >\n          {label}\n        </Button>\n      </InfoTooltip>\n      <Drawer\n        isOpen={isAnnotationEditorOpen}\n        onClose={closeAnnotationEditor}\n        slotProps={{ paper: { sx: { width: '50%' } } }}\n        data-testid=\"annotation-editor\"\n      >\n        <AnnotationEditor\n          annotationSpecs={annotationSpecs}\n          onCancel={closeAnnotationEditor}\n          onChange={(annotations: AnnotationSpec[]) => {\n            setAnnotationSpecs(annotations);\n            setIsAnnotationEditorOpen(false);\n          }}\n        />\n      </Drawer>\n    </>\n  );\n}\n"],"names":["useState","Button","PencilIcon","Drawer","InfoTooltip","TOOLTIP_TEXT","editButtonStyle","useAnnotationActions","useAnnotationSpecs","AnnotationEditor","EditAnnotationsButton","variant","label","color","fullWidth","isAnnotationEditorOpen","setIsAnnotationEditorOpen","annotationSpecs","setAnnotationSpecs","openAnnotationEditor","closeAnnotationEditor","description","editAnnotations","startIcon","onClick","aria-label","sx","isOpen","onClose","slotProps","paper","width","data-testid","onCancel","onChange","annotations"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAuBA,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,MAAM,QAAqB,gBAAgB;AACpD,OAAOC,gBAAgB,gCAAgC;AACvD,SAASC,MAAM,EAAEC,WAAW,QAAQ,yBAAyB;AAE7D,SAASC,YAAY,EAAEC,eAAe,QAAQ,kBAAkB;AAChE,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,gBAAgB;AACzE,SAASC,gBAAgB,QAAQ,sBAAsB;AAmBvD,OAAO,SAASC,sBAAsB,EACpCC,UAAU,MAAM,EAChBC,QAAQ,aAAa,EACrBC,QAAQ,SAAS,EACjBC,SAAS,EACkB;IAC3B,MAAM,CAACC,wBAAwBC,0BAA0B,GAAGhB,SAAS;IACrE,MAAMiB,kBAAoCT;IAC1C,MAAM,EAAEU,kBAAkB,EAAE,GAAGX;IAE/B,MAAMY,uBAAuB;QAC3BH,0BAA0B;IAC5B;IAEA,MAAMI,wBAAwB;QAC5BJ,0BAA0B;IAC5B;IAEA,qBACE;;0BACE,KAACZ;gBAAYiB,aAAahB,aAAaiB,eAAe;0BACpD,cAAA,KAACrB;oBACCsB,yBAAW,KAACrB;oBACZsB,SAASL;oBACTM,cAAYpB,aAAaiB,eAAe;oBACxCX,SAASA;oBACTE,OAAOA;oBACPC,WAAWA;oBACXY,IAAIpB;8BAEHM;;;0BAGL,KAACT;gBACCwB,QAAQZ;gBACRa,SAASR;gBACTS,WAAW;oBAAEC,OAAO;wBAAEJ,IAAI;4BAAEK,OAAO;wBAAM;oBAAE;gBAAE;gBAC7CC,eAAY;0BAEZ,cAAA,KAACvB;oBACCQ,iBAAiBA;oBACjBgB,UAAUb;oBACVc,UAAU,CAACC;wBACTjB,mBAAmBiB;wBACnBnB,0BAA0B;oBAC5B;;;;;AAKV"}

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -6,6 +6,7 @@ export interface DashboardToolbarProps {
     initialVariableIsSticky?: boolean;
     isReadonly: boolean;
     isVariableEnabled: boolean;
+    isAnnotationEnabled: boolean;
     isDatasourceEnabled: boolean;
     isLinksEnabled?: boolean;
     onEditButtonClick: () => void;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAahF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YAyG/D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAchF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YA2G/D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -24,10 +24,11 @@ import { EditButton } from '../EditButton';
 import { EditJsonButton } from '../EditJsonButton';
 import { SaveDashboardButton } from '../SaveDashboardButton';
 import { DashboardStickyToolbar } from '../DashboardStickyToolbar';
+import { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';
 import { EditDashboardLinksButton } from '../DashboardLinks';
 import { LinksDisplay } from '../LinksDisplay';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = useEditMode();
     const { timeZone, setTimeZone } = useTimeZoneParams('local');
     const dashboardLinks = useDashboardLinks();
@@ -81,6 +82,7 @@ export const DashboardToolbar = (props)=>{
                                     ml: 1,
                                     whiteSpace: "nowrap",
                                     children: [
+                                        isAnnotationEnabled && /*#__PURE__*/ _jsx(EditAnnotationsButton, {}),
                                         isVariableEnabled && /*#__PURE__*/ _jsx(EditVariablesButton, {}),
                                         isDatasourceEnabled && /*#__PURE__*/ _jsx(EditDatasourcesButton, {}),
                                         isLinksEnabled && /*#__PURE__*/ _jsx(EditDashboardLinksButton, {}),

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isDatasourceEnabled","isLinksEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isAnnotationEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isAnnotationEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isAnnotationEnabled && <EditAnnotationsButton />}\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditAnnotationsButton","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isAnnotationEnabled","isDatasourceEnabled","isLinksEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}

package/dist/components/Datasources/DatasourceEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA8BA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAK/C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Jf"}
+{"version":3,"file":"DatasourceEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"names":[],"mappings":"AA6BA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAK/C,wBAAgB,gBAAgB,CAAC,KAAK,EAAE;IACtC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,CAAC;IAC5C,QAAQ,EAAE,CAAC,WAAW,EAAE,MAAM,CAAC,MAAM,EAAE,cAAc,CAAC,KAAK,IAAI,CAAC;IAChE,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CA4Jf"}

package/dist/components/Datasources/DatasourceEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/spec';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { DatasourceDefinition } from '@perses-dev/client';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { DatasourceSpec } from '@perses-dev/spec';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { Action, DatasourceDefinition } from '@perses-dev/client';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}

package/dist/components/DownloadButton/serializeDashboard.d.ts

@@ -1,4 +1,4 @@
-import { DashboardResource } from '../../model/DashboardResource';
+import { DashboardResource } from '@perses-dev/client';
 type SerializedDashboard = {
     contentType: string;
     content: string;

package/dist/components/DownloadButton/serializeDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAE,MAAM,+BAA+B,CAAC;AAKlE,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAoDF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,GACpC,mBAAmB,CAOrB"}
+{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAMvD,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AAoDF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,EAC5B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,aAAa,GAAG,aAAa,GACpC,mBAAmB,CAOrB"}

package/dist/components/DownloadButton/serializeDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { stringify } from 'yaml';\nimport { DashboardResource } from '../../model/DashboardResource';\n\n//TODO: Although the previous comment suggests the metadata not should not be used, I keep them. Need to be discussed.\n// Check git history to find prev comment\n\ntype SerializedDashboard = {\n  contentType: string;\n  content: string;\n};\n\nfunction serializeYaml(dashboard: DashboardResource, shape?: 'cr-v1alpha1' | 'cr-v1alpha2'): SerializedDashboard {\n  let content: string;\n\n  if (shape === 'cr-v1alpha1') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha1',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: dashboard.spec,\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else if (shape === 'cr-v1alpha2') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha2',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: {\n          config: dashboard.spec,\n        },\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else {\n    content = stringify(dashboard, { schema: 'yaml-1.1' });\n  }\n\n  return { contentType: 'application/yaml', content };\n}\n\nexport function serializeDashboard(\n  dashboard: DashboardResource,\n  format: 'json' | 'yaml',\n  shape?: 'cr-v1alpha1' | 'cr-v1alpha2'\n): SerializedDashboard {\n  switch (format) {\n    case 'json':\n      return { contentType: 'application/json', content: JSON.stringify(dashboard, null, 2) };\n    case 'yaml':\n      return serializeYaml(dashboard, shape);\n  }\n}\n"],"names":["stringify","serializeYaml","dashboard","shape","content","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","schema","config","contentType","serializeDashboard","format","JSON"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,SAAS,QAAQ,OAAO;AAWjC,SAASC,cAAcC,SAA4B,EAAEC,KAAqC;IACxF,IAAIC;IAEJ,IAAID,UAAU,eAAe;QAC3B,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAMZ,UAAUY,IAAI;QACtB,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO,IAAIZ,UAAU,eAAe;QAClC,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAM;gBACJE,QAAQd,UAAUY,IAAI;YACxB;QACF,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO;QACLX,UAAUJ,UAAUE,WAAW;YAAEa,QAAQ;QAAW;IACtD;IAEA,OAAO;QAAEE,aAAa;QAAoBb;IAAQ;AACpD;AAEA,OAAO,SAASc,mBACdhB,SAA4B,EAC5BiB,MAAuB,EACvBhB,KAAqC;IAErC,OAAQgB;QACN,KAAK;YACH,OAAO;gBAAEF,aAAa;gBAAoBb,SAASgB,KAAKpB,SAAS,CAACE,WAAW,MAAM;YAAG;QACxF,KAAK;YACH,OAAOD,cAAcC,WAAWC;IACpC;AACF"}
+{"version":3,"sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DashboardResource } from '@perses-dev/client';\nimport { stringify } from 'yaml';\n\n//TODO: Although the previous comment suggests the metadata not should not be used, I keep them. Need to be discussed.\n// Check git history to find prev comment\n\ntype SerializedDashboard = {\n  contentType: string;\n  content: string;\n};\n\nfunction serializeYaml(dashboard: DashboardResource, shape?: 'cr-v1alpha1' | 'cr-v1alpha2'): SerializedDashboard {\n  let content: string;\n\n  if (shape === 'cr-v1alpha1') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha1',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: dashboard.spec,\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else if (shape === 'cr-v1alpha2') {\n    const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n    content = stringify(\n      {\n        apiVersion: 'perses.dev/v1alpha2',\n        kind: 'PersesDashboard',\n        metadata: {\n          labels: {\n            'app.kubernetes.io/name': 'perses-dashboard',\n            'app.kubernetes.io/instance': name,\n            'app.kubernetes.io/part-of': 'perses-operator',\n          },\n          name,\n          namespace: dashboard.metadata.project,\n        },\n        spec: {\n          config: dashboard.spec,\n        },\n      },\n      { schema: 'yaml-1.1' }\n    );\n  } else {\n    content = stringify(dashboard, { schema: 'yaml-1.1' });\n  }\n\n  return { contentType: 'application/yaml', content };\n}\n\nexport function serializeDashboard(\n  dashboard: DashboardResource,\n  format: 'json' | 'yaml',\n  shape?: 'cr-v1alpha1' | 'cr-v1alpha2'\n): SerializedDashboard {\n  switch (format) {\n    case 'json':\n      return { contentType: 'application/json', content: JSON.stringify(dashboard, null, 2) };\n    case 'yaml':\n      return serializeYaml(dashboard, shape);\n  }\n}\n"],"names":["stringify","serializeYaml","dashboard","shape","content","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","schema","config","contentType","serializeDashboard","format","JSON"],"mappings":"AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,SAAS,QAAQ,OAAO;AAUjC,SAASC,cAAcC,SAA4B,EAAEC,KAAqC;IACxF,IAAIC;IAEJ,IAAID,UAAU,eAAe;QAC3B,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAMZ,UAAUY,IAAI;QACtB,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO,IAAIZ,UAAU,eAAe;QAClC,MAAME,OAAOH,UAAUI,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;QAC1EJ,UAAUJ,UACR;YACES,YAAY;YACZC,MAAM;YACNJ,UAAU;gBACRK,QAAQ;oBACN,0BAA0B;oBAC1B,8BAA8BN;oBAC9B,6BAA6B;gBAC/B;gBACAA;gBACAO,WAAWV,UAAUI,QAAQ,CAACO,OAAO;YACvC;YACAC,MAAM;gBACJE,QAAQd,UAAUY,IAAI;YACxB;QACF,GACA;YAAEC,QAAQ;QAAW;IAEzB,OAAO;QACLX,UAAUJ,UAAUE,WAAW;YAAEa,QAAQ;QAAW;IACtD;IAEA,OAAO;QAAEE,aAAa;QAAoBb;IAAQ;AACpD;AAEA,OAAO,SAASc,mBACdhB,SAA4B,EAC5BiB,MAAuB,EACvBhB,KAAqC;IAErC,OAAQgB;QACN,KAAK;YACH,OAAO;gBAAEF,aAAa;gBAAoBb,SAASgB,KAAKpB,SAAS,CAACE,WAAW,MAAM;YAAG;QACxF,KAAK;YACH,OAAOD,cAAcC,WAAWC;IACpC;AACF"}

package/dist/components/LeaveDialog/LeaveDialog.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
 import type { BlockerFunction } from '@remix-run/router';
-import { DashboardResource } from '../../model';
+import { DashboardResource } from '@perses-dev/client';
 export interface LeaveDialogProps {
     isBlocked: BlockerFunction | boolean;
     message: string;

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

@@ -1 +1 @@
-{"version":3,"file":"LeaveDialog.d.ts","sourceRoot":"","sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAQhD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,YAAY,CA4B7E;AAKD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACxC,OAAO,EAAE,iBAAiB,CAAC;CAC5B,GAAG,SAAS,CAYZ"}
+{"version":3,"file":"LeaveDialog.d.ts","sourceRoot":"","sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAa,MAAM,OAAO,CAAC;AAG3D,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACzD,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAQvD,MAAM,WAAW,gBAAgB;IAC/B,SAAS,EAAE,eAAe,GAAG,OAAO,CAAC;IACrC,OAAO,EAAE,MAAM,CAAC;CACjB;AAMD,wBAAgB,MAAM,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,EAAE,gBAAgB,GAAG,YAAY,CA4B7E;AAKD,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,OAAO,GACR,EAAE;IACD,QAAQ,EAAE,iBAAiB,GAAG,SAAS,CAAC;IACxC,OAAO,EAAE,iBAAiB,CAAC;CAC5B,GAAG,SAAS,CAYZ"}

package/dist/components/LeaveDialog/LeaveDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useEffect } from 'react';\nimport { useBlocker } from 'react-router-dom';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport type { BlockerFunction } from '@remix-run/router';\nimport { DashboardResource } from '../../model';\n\nconst handleRouteChange = (event: BeforeUnloadEvent): string => {\n  event.preventDefault();\n  event.returnValue = ''; // Required for Chrome\n  return ''; // Required for other browsers\n};\n\nexport interface LeaveDialogProps {\n  isBlocked: BlockerFunction | boolean;\n  message: string;\n}\n\n/*\n * Prompt component uses the useBlocker hook to block react-router navigation when there are unsaved changes.\n * It also listens to the beforeunload event to show a browser confirmation dialog when the user tries to close the tab, refresh the page or change url manually.\n */\nexport function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement {\n  const blocker = useBlocker(isBlocked);\n  const isBlockedState = blocker.state === 'blocked';\n  const isProceedingState = blocker.state === 'proceeding';\n\n  useEffect(() => {\n    if (isBlocked) {\n      window.addEventListener('beforeunload', handleRouteChange);\n    } else {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    }\n\n    return (): void => {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    };\n  }, [blocker, isBlocked, isBlockedState]);\n\n  const handleDiscardChanges = (): void => blocker.proceed?.();\n  const handleCancel = (): void => blocker.reset?.();\n\n  return (\n    <DiscardChangesConfirmationDialog\n      description={message}\n      isOpen={isBlockedState || isProceedingState}\n      onDiscardChanges={handleDiscardChanges}\n      onCancel={handleCancel}\n    />\n  );\n}\n\n/*\n * LeaveDialog prompts the user with a confirmation dialog when they attempt to leave the page with unsaved changes.\n */\nexport function LeaveDialog({\n  original,\n  current,\n}: {\n  original: DashboardResource | undefined;\n  current: DashboardResource;\n}): ReactNode {\n  const handleIsBlocked: BlockerFunction = (ctx) => {\n    if (JSON.stringify(original) !== JSON.stringify(current)) {\n      // Only block navigation if the pathname is changing (=> ignore search params changes)\n      if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  return <Prompt isBlocked={handleIsBlocked} message=\"You have unsaved changes, are you sure you want to leave?\" />;\n}\n"],"names":["useEffect","useBlocker","DiscardChangesConfirmationDialog","handleRouteChange","event","preventDefault","returnValue","Prompt","isBlocked","message","blocker","isBlockedState","state","isProceedingState","window","addEventListener","removeEventListener","handleDiscardChanges","proceed","handleCancel","reset","description","isOpen","onDiscardChanges","onCancel","LeaveDialog","original","current","handleIsBlocked","ctx","JSON","stringify","currentLocation","pathname","nextLocation"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAkCA,SAAS,QAAQ,QAAQ;AAC3D,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,gCAAgC,QAAQ,yBAAyB;AAI1E,MAAMC,oBAAoB,CAACC;IACzBA,MAAMC,cAAc;IACpBD,MAAME,WAAW,GAAG,IAAI,sBAAsB;IAC9C,OAAO,IAAI,8BAA8B;AAC3C;AAOA;;;CAGC,GACD,OAAO,SAASC,OAAO,EAAEC,SAAS,EAAEC,OAAO,EAAoB;IAC7D,MAAMC,UAAUT,WAAWO;IAC3B,MAAMG,iBAAiBD,QAAQE,KAAK,KAAK;IACzC,MAAMC,oBAAoBH,QAAQE,KAAK,KAAK;IAE5CZ,UAAU;QACR,IAAIQ,WAAW;YACbM,OAAOC,gBAAgB,CAAC,gBAAgBZ;QAC1C,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;QAEA,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;IACF,GAAG;QAACO;QAASF;QAAWG;KAAe;IAEvC,MAAMM,uBAAuB,IAAYP,QAAQQ,OAAO;IACxD,MAAMC,eAAe,IAAYT,QAAQU,KAAK;IAE9C,qBACE,KAAClB;QACCmB,aAAaZ;QACba,QAAQX,kBAAkBE;QAC1BU,kBAAkBN;QAClBO,UAAUL;;AAGhB;AAEA;;CAEC,GACD,OAAO,SAASM,YAAY,EAC1BC,QAAQ,EACRC,OAAO,EAIR;IACC,MAAMC,kBAAmC,CAACC;QACxC,IAAIC,KAAKC,SAAS,CAACL,cAAcI,KAAKC,SAAS,CAACJ,UAAU;YACxD,sFAAsF;YACtF,IAAIE,IAAIG,eAAe,CAACC,QAAQ,KAAKJ,IAAIK,YAAY,CAACD,QAAQ,EAAE;gBAC9D,OAAO;YACT;QACF;QACA,OAAO;IACT;IAEA,qBAAO,KAAC1B;QAAOC,WAAWoB;QAAiBnB,SAAQ;;AACrD"}
+{"version":3,"sources":["../../../src/components/LeaveDialog/LeaveDialog.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, ReactNode, useEffect } from 'react';\nimport { useBlocker } from 'react-router-dom';\nimport { DiscardChangesConfirmationDialog } from '@perses-dev/components';\nimport type { BlockerFunction } from '@remix-run/router';\nimport { DashboardResource } from '@perses-dev/client';\n\nconst handleRouteChange = (event: BeforeUnloadEvent): string => {\n  event.preventDefault();\n  event.returnValue = ''; // Required for Chrome\n  return ''; // Required for other browsers\n};\n\nexport interface LeaveDialogProps {\n  isBlocked: BlockerFunction | boolean;\n  message: string;\n}\n\n/*\n * Prompt component uses the useBlocker hook to block react-router navigation when there are unsaved changes.\n * It also listens to the beforeunload event to show a browser confirmation dialog when the user tries to close the tab, refresh the page or change url manually.\n */\nexport function Prompt({ isBlocked, message }: LeaveDialogProps): ReactElement {\n  const blocker = useBlocker(isBlocked);\n  const isBlockedState = blocker.state === 'blocked';\n  const isProceedingState = blocker.state === 'proceeding';\n\n  useEffect(() => {\n    if (isBlocked) {\n      window.addEventListener('beforeunload', handleRouteChange);\n    } else {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    }\n\n    return (): void => {\n      window.removeEventListener('beforeunload', handleRouteChange);\n    };\n  }, [blocker, isBlocked, isBlockedState]);\n\n  const handleDiscardChanges = (): void => blocker.proceed?.();\n  const handleCancel = (): void => blocker.reset?.();\n\n  return (\n    <DiscardChangesConfirmationDialog\n      description={message}\n      isOpen={isBlockedState || isProceedingState}\n      onDiscardChanges={handleDiscardChanges}\n      onCancel={handleCancel}\n    />\n  );\n}\n\n/*\n * LeaveDialog prompts the user with a confirmation dialog when they attempt to leave the page with unsaved changes.\n */\nexport function LeaveDialog({\n  original,\n  current,\n}: {\n  original: DashboardResource | undefined;\n  current: DashboardResource;\n}): ReactNode {\n  const handleIsBlocked: BlockerFunction = (ctx) => {\n    if (JSON.stringify(original) !== JSON.stringify(current)) {\n      // Only block navigation if the pathname is changing (=> ignore search params changes)\n      if (ctx.currentLocation.pathname !== ctx.nextLocation.pathname) {\n        return true;\n      }\n    }\n    return false;\n  };\n\n  return <Prompt isBlocked={handleIsBlocked} message=\"You have unsaved changes, are you sure you want to leave?\" />;\n}\n"],"names":["useEffect","useBlocker","DiscardChangesConfirmationDialog","handleRouteChange","event","preventDefault","returnValue","Prompt","isBlocked","message","blocker","isBlockedState","state","isProceedingState","window","addEventListener","removeEventListener","handleDiscardChanges","proceed","handleCancel","reset","description","isOpen","onDiscardChanges","onCancel","LeaveDialog","original","current","handleIsBlocked","ctx","JSON","stringify","currentLocation","pathname","nextLocation"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAAkCA,SAAS,QAAQ,QAAQ;AAC3D,SAASC,UAAU,QAAQ,mBAAmB;AAC9C,SAASC,gCAAgC,QAAQ,yBAAyB;AAI1E,MAAMC,oBAAoB,CAACC;IACzBA,MAAMC,cAAc;IACpBD,MAAME,WAAW,GAAG,IAAI,sBAAsB;IAC9C,OAAO,IAAI,8BAA8B;AAC3C;AAOA;;;CAGC,GACD,OAAO,SAASC,OAAO,EAAEC,SAAS,EAAEC,OAAO,EAAoB;IAC7D,MAAMC,UAAUT,WAAWO;IAC3B,MAAMG,iBAAiBD,QAAQE,KAAK,KAAK;IACzC,MAAMC,oBAAoBH,QAAQE,KAAK,KAAK;IAE5CZ,UAAU;QACR,IAAIQ,WAAW;YACbM,OAAOC,gBAAgB,CAAC,gBAAgBZ;QAC1C,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;QAEA,OAAO;YACLW,OAAOE,mBAAmB,CAAC,gBAAgBb;QAC7C;IACF,GAAG;QAACO;QAASF;QAAWG;KAAe;IAEvC,MAAMM,uBAAuB,IAAYP,QAAQQ,OAAO;IACxD,MAAMC,eAAe,IAAYT,QAAQU,KAAK;IAE9C,qBACE,KAAClB;QACCmB,aAAaZ;QACba,QAAQX,kBAAkBE;QAC1BU,kBAAkBN;QAClBO,UAAUL;;AAGhB;AAEA;;CAEC,GACD,OAAO,SAASM,YAAY,EAC1BC,QAAQ,EACRC,OAAO,EAIR;IACC,MAAMC,kBAAmC,CAACC;QACxC,IAAIC,KAAKC,SAAS,CAACL,cAAcI,KAAKC,SAAS,CAACJ,UAAU;YACxD,sFAAsF;YACtF,IAAIE,IAAIG,eAAe,CAACC,QAAQ,KAAKJ,IAAIK,YAAY,CAACD,QAAQ,EAAE;gBAC9D,OAAO;YACT;QACF;QACA,OAAO;IACT;IAEA,qBAAO,KAAC1B;QAAOC,WAAWoB;QAAiBnB,SAAQ;;AACrD"}

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { PanelEditorValues } from '@perses-dev/spec';
-import { Action } from '@perses-dev/components';
+import { Action } from '@perses-dev/client';
 export interface PanelEditorFormProps {
     initialValues: PanelEditorValues;
     initialAction: Action;

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

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

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

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

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

@@ -1 +1 @@
-{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAwBxD,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWjF,OAAO,EAIL,aAAa,EAEd,MAAM,2BAA2B,CAAC;AAEnC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAwB5E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAsVf;AAmED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}
+{"version":3,"file":"VariableEditor.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAwBxD,OAAO,EAAE,yBAAyB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAWjF,OAAO,EAIL,aAAa,EAEd,MAAM,2BAA2B,CAAC;AAGnC,OAAO,EAAE,0BAA0B,EAAE,MAAM,gCAAgC,CAAC;AAwB5E,wBAAgB,cAAc,CAAC,KAAK,EAAE;IACpC,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,2BAA2B,EAAE,0BAA0B,EAAE,CAAC;IAC1D,0BAA0B,EAAE,yBAAyB,EAAE,CAAC;IACxD,QAAQ,EAAE,CAAC,mBAAmB,EAAE,kBAAkB,EAAE,KAAK,IAAI,CAAC;IAC9D,QAAQ,EAAE,MAAM,IAAI,CAAC;CACtB,GAAG,YAAY,CAuVf;AAmED,wBAAgB,YAAY,CAAC,KAAK,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,aAAa,GAAG,SAAS,CAAA;CAAE,GAAG,YAAY,CAoBpG"}

package/dist/components/Variables/VariableEditor.js

@@ -60,7 +60,7 @@ export function VariableEditor(props) {
         externalVariableDefinitions,
         variableDefinitions
     ]);
-    const currentEditingVariableDefinition = typeof variableEditIdx === 'number' && variableDefinitions[variableEditIdx];
+    const currentEditingVariableDefinition = variableEditIdx !== null ? variableDefinitions[variableEditIdx] : undefined;
     const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = useDiscardChangesConfirmationDialog();
     const handleCancel = ()=>{
         if (JSON.stringify(props.variableDefinitions) !== JSON.stringify(variableDefinitions)) {
@@ -143,7 +143,7 @@ export function VariableEditor(props) {
     };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorFormWithContext, {
+            variableEditIdx !== null && currentEditingVariableDefinition && /*#__PURE__*/ _jsx(VariableEditorFormWithContext, {
                 variableDefinitions: variableDefinitions,
                 externalVariableDefinitions: externalVariableDefinitions,
                 builtinVariableDefinitions: builtinVariableDefinitions,