@perses-dev/dashboards 0.50.1 → 0.50.3

package/dist/cjs/components/DownloadButton/DownloadButton.js

@@ -21,53 +21,159 @@ Object.defineProperty(exports, "DownloadButton", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
+const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _constants = require("../../constants");
+const _DownloadOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/DownloadOutline"));
+const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
+const _yaml = require("yaml");
 const _context = require("../../context");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
     };
 }
-function DownloadButton({ heightPx }) {
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interop_require_wildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {
+        __proto__: null
+    };
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function DownloadButton() {
     const { dashboard } = (0, _context.useDashboard)();
     const hiddenLinkRef = (0, _react.useRef)(null);
-    const height = heightPx === undefined ? undefined : `${heightPx}px`;
-    const onDownloadButtonClick = ()=>{
-        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
-        // Create blob URL
-        const hiddenLinkUrl = URL.createObjectURL(new Blob([
-            JSON.stringify(dashboard)
-        ], {
-            type: 'application/json'
-        }));
-        // Simulate click
-        hiddenLinkRef.current.href = hiddenLinkUrl;
-        hiddenLinkRef.current.click();
-        // Remove blob URL (for memory management)
-        URL.revokeObjectURL(hiddenLinkUrl);
+    const [anchorEl, setAnchorEl] = _react.default.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
     };
+    const handleItemClick = (format, shape)=>()=>{
+            setAnchorEl(null);
+            let type, content = '';
+            switch(format){
+                case 'json':
+                    type = 'application/json';
+                    content = JSON.stringify(dashboard, null, 2);
+                    break;
+                case 'yaml':
+                    {
+                        type = 'application/yaml';
+                        if (shape === 'cr') {
+                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                            content = (0, _yaml.stringify)({
+                                apiVersion: 'perses.dev/v1alpha1',
+                                kind: 'PersesDashboard',
+                                metadata: {
+                                    labels: {
+                                        'app.kubernetes.io/name': 'perses-dashboard',
+                                        'app.kubernetes.io/instance': name,
+                                        'app.kubernetes.io/part-of': 'perses-operator'
+                                    },
+                                    name
+                                },
+                                namespace: dashboard.metadata.project,
+                                spec: dashboard.spec
+                            });
+                        } else {
+                            content = (0, _yaml.stringify)(dashboard);
+                        }
+                    }
+                    break;
+            }
+            if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+            // Create blob URL
+            const hiddenLinkUrl = URL.createObjectURL(new Blob([
+                content
+            ], {
+                type
+            }));
+            // Simulate click
+            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
+            hiddenLinkRef.current.href = hiddenLinkUrl;
+            hiddenLinkRef.current.click();
+            // Remove blob URL (for memory management)
+            URL.revokeObjectURL(hiddenLinkUrl);
+        };
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
         children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
-                description: _constants.TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
-                    "aria-label": _constants.TOOLTIP_TEXT.downloadDashboard,
-                    onClick: onDownloadButtonClick,
-                    sx: {
-                        height
-                    },
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ToolbarIconButton, {
+                id: "download-dashboard-button",
+                "aria-controls": open ? 'basic-menu' : undefined,
+                "aria-haspopup": "true",
+                "aria-expanded": open ? 'true' : undefined,
+                onClick: handleClick,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DownloadOutline.default, {})
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Menu, {
+                id: "download-dashboard-formats",
+                anchorEl: anchorEl,
+                open: open,
+                hideBackdrop: true,
+                onClose: ()=>setAnchorEl(null),
+                MenuListProps: {
+                    'aria-labelledby': 'download-dashboard-button'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.ClickAwayListener, {
+                        onClickAway: ()=>setAnchorEl(null),
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.MenuList, {
+                            children: [
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('json'),
+                                    children: "JSON"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml'),
+                                    children: "YAML"
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
+                                    onClick: handleItemClick('yaml', 'cr'),
+                                    children: "YAML (CR)"
+                                })
+                            ]
+                        })
+                    })
                 })
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)("a", {
                 ref: hiddenLinkRef,
                 style: {
                     display: 'none'
-                },
-                download: `${dashboard.metadata.name}.json`
+                }
             })
         ]
     });

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

@@ -44,6 +44,12 @@ function PanelEditorForm(props) {
     const { panelDefinition, setName, setDescription, setLinks, setQueries, setPlugin, setPanelDefinition } = (0, _usePanelEditor.usePanelEditor)(initialValues.panelDefinition);
     const { plugin } = panelDefinition.spec;
     const [isDiscardDialogOpened, setDiscardDialogOpened] = (0, _react.useState)(false);
+    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
+    const form = (0, _reacthookform.useForm)({
+        resolver: (0, _zod.zodResolver)(panelEditorSchema),
+        mode: 'onBlur',
+        defaultValues: initialValues
+    });
     // Use common plugin editor logic even though we've split the inputs up in this form
     const pluginEditor = (0, _pluginsystem.usePluginEditor)({
         pluginTypes: [
@@ -72,12 +78,6 @@ function PanelEditorForm(props) {
     });
     const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
     const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
-    const { panelEditorSchema } = (0, _pluginsystem.useValidationSchemas)();
-    const form = (0, _reacthookform.useForm)({
-        resolver: (0, _zod.zodResolver)(panelEditorSchema),
-        mode: 'onBlur',
-        defaultValues: initialValues
-    });
     const links = (0, _reacthookform.useWatch)({
         control: form.control,
         name: 'panelDefinition.spec.links'
@@ -111,6 +111,18 @@ function PanelEditorForm(props) {
         }
         setPanelDefinition(nextPanelDef);
     };
+    const watchedName = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.display.name'
+    });
+    const watchedDescription = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.display.description'
+    });
+    const watchedPluginKind = (0, _reacthookform.useWatch)({
+        control: form.control,
+        name: 'panelDefinition.spec.plugin.kind'
+    });
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_reacthookform.FormProvider, {
         ...form,
         children: [
@@ -169,7 +181,6 @@ function PanelEditorForm(props) {
                                 name: "panelDefinition.spec.display.name",
                                 render: ({ field, fieldState })=>{
                                     var _fieldState_error;
-                                    var _field_value;
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         required: true,
@@ -177,7 +188,7 @@ function PanelEditorForm(props) {
                                         label: "Name",
                                         error: !!fieldState.error,
                                         helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        value: watchedName !== null && watchedName !== void 0 ? watchedName : '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setName(event.target.value);
@@ -224,14 +235,13 @@ function PanelEditorForm(props) {
                                 name: "panelDefinition.spec.display.description",
                                 render: ({ field, fieldState })=>{
                                     var _fieldState_error;
-                                    var _field_value;
                                     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                                         ...field,
                                         fullWidth: true,
                                         label: "Description",
                                         error: !!fieldState.error,
                                         helperText: (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
-                                        value: (_field_value = field.value) !== null && _field_value !== void 0 ? _field_value : '',
+                                        value: watchedDescription !== null && watchedDescription !== void 0 ? watchedDescription : '',
                                         onChange: (event)=>{
                                             field.onChange(event);
                                             setDescription(event.target.value);
@@ -262,7 +272,7 @@ function PanelEditorForm(props) {
                                         helperText: (_pluginEditor_error_message = (_pluginEditor_error = pluginEditor.error) === null || _pluginEditor_error === void 0 ? void 0 : _pluginEditor_error.message) !== null && _pluginEditor_error_message !== void 0 ? _pluginEditor_error_message : (_fieldState_error = fieldState.error) === null || _fieldState_error === void 0 ? void 0 : _fieldState_error.message,
                                         value: {
                                             type: 'Panel',
-                                            kind: field.value
+                                            kind: watchedPluginKind
                                         },
                                         onChange: (event)=>{
                                             field.onChange(event.kind);

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

@@ -219,6 +219,8 @@ function ListVariable({ name, source }) {
     const { setVariableValue, setVariableLoading, setVariableOptions } = (0, _context.useVariableDefinitionActions)();
     const { selectedOptions, value, loading, options, viewOptions } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
     const [inputWidth, setInputWidth] = (0, _react.useState)(_constants.MIN_VARIABLE_WIDTH);
+    // Used for multiple value variables, it will not clear variable input when selecting an option
+    const [inputValue, setInputValue] = (0, _react.useState)('');
     var _definition_spec_display_name;
     const title = (_definition_spec_display_name = definition === null || definition === void 0 ? void 0 : (_definition_spec_display = definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
@@ -270,7 +272,8 @@ function ListVariable({ name, source }) {
                 renderInput: (params)=>{
                     return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
-                        label: title
+                        label: title,
+                        onChange: (e)=>setInputValue(e.target.value)
                     }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
                         ...params,
                         label: title,
@@ -295,11 +298,17 @@ function ListVariable({ name, source }) {
                         setVariableValue(name, variableOptionToVariableValue(value), source);
                     }
                 },
+                inputValue: allowMultiple ? inputValue : undefined,
                 onInputChange: (_, newInputValue)=>{
                     if (!allowMultiple) {
                         setInputWidth(getWidthPx(newInputValue, 'list'));
                     }
                 },
+                onBlur: ()=>{
+                    if (allowMultiple) {
+                        setInputValue('');
+                    }
+                },
                 options: viewOptions
             }),
             loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})

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

@@ -32,7 +32,6 @@ const TOOLTIP_TEXT = {
     // Toolbar buttons
     addPanel: 'Add panel',
     addGroup: 'Add panel group',
-    downloadDashboard: 'Download JSON',
     editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',

package/dist/cjs/context/VariableProvider/VariableProvider.js

@@ -52,6 +52,7 @@ const _zustand = require("zustand");
 const _traditional = require("zustand/traditional");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
+const _shallow = require("zustand/shallow");
 const _immer1 = /*#__PURE__*/ _interop_require_default(require("immer"));
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
@@ -126,7 +127,7 @@ function useVariableDefinitionAndState(name, source) {
 }
 function useVariableDefinitionActions() {
     const store = useVariableDefinitionStoreCtx();
-    return (0, _zustand.useStore)(store, (s)=>{
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
         return {
             setVariableValue: s.setVariableValue,
             setVariableLoading: s.setVariableLoading,
@@ -135,7 +136,7 @@ function useVariableDefinitionActions() {
             setVariableDefaultValues: s.setVariableDefaultValues,
             getSavedVariablesStatus: s.getSavedVariablesStatus
         };
-    });
+    }, _shallow.shallow);
 }
 function useVariableDefinitions() {
     const store = useVariableDefinitionStoreCtx();
@@ -372,10 +373,10 @@ function createVariableDefinitionStore({ initialVariableDefinitions = [], extern
     return store; // TODO: @Gladorme check if we can avoid this cast
 }
 function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
-    const [store] = (0, _react.useState)(createVariableDefinitionStore({
-        initialVariableDefinitions,
-        externalVariableDefinitions
-    }));
+    const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({
+            initialVariableDefinitions,
+            externalVariableDefinitions
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
@@ -387,11 +388,11 @@ function VariableProvider({ children, initialVariableDefinitions = [], externalV
 function VariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions: builtinVariables = [] }) {
     const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
     const queryParams = (0, _queryparams.useVariableQueryParams)(allVariableDefs);
-    const [store] = (0, _react.useState)(createVariableDefinitionStore({
-        initialVariableDefinitions,
-        externalVariableDefinitions,
-        queryParams
-    }));
+    const [store] = (0, _react.useState)(()=>createVariableDefinitionStore({
+            initialVariableDefinitions,
+            externalVariableDefinitions,
+            queryParams
+        }));
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {

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

@@ -1,7 +1,3 @@
 import { ReactElement } from 'react';
-interface DownloadButtonProps {
-    heightPx?: number;
-}
-export declare function DownloadButton({ heightPx }: DownloadButtonProps): ReactElement;
-export {};
+export declare function DownloadButton(): ReactElement;
 //# sourceMappingURL=DownloadButton.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAM7C,UAAU,mBAAmB;IAE3B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAGD,wBAAgB,cAAc,CAAC,EAAE,QAAQ,EAAE,EAAE,mBAAmB,GAAG,YAAY,CAiC9E"}
+{"version":3,"file":"DownloadButton.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,CAgG7C"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -11,49 +11,114 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useRef } from 'react';
+import { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';
+import { ToolbarIconButton } from '@perses-dev/components';
 import DownloadIcon from 'mdi-material-ui/DownloadOutline';
-import { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';
-import { TOOLTIP_TEXT } from '../../constants';
+import React, { useRef } from 'react';
+import { stringify } from 'yaml';
 import { useDashboard } from '../../context';
 // Button that enables downloading the dashboard as a JSON file
-export function DownloadButton({ heightPx }) {
+export function DownloadButton() {
     const { dashboard } = useDashboard();
     const hiddenLinkRef = useRef(null);
-    const height = heightPx === undefined ? undefined : `${heightPx}px`;
-    const onDownloadButtonClick = ()=>{
-        if (!hiddenLinkRef || !hiddenLinkRef.current) return;
-        // Create blob URL
-        const hiddenLinkUrl = URL.createObjectURL(new Blob([
-            JSON.stringify(dashboard)
-        ], {
-            type: 'application/json'
-        }));
-        // Simulate click
-        hiddenLinkRef.current.href = hiddenLinkUrl;
-        hiddenLinkRef.current.click();
-        // Remove blob URL (for memory management)
-        URL.revokeObjectURL(hiddenLinkUrl);
+    const [anchorEl, setAnchorEl] = React.useState(null);
+    const open = Boolean(anchorEl);
+    const handleClick = (event)=>{
+        setAnchorEl(event.currentTarget);
     };
+    const handleItemClick = (format, shape)=>()=>{
+            setAnchorEl(null);
+            let type, content = '';
+            switch(format){
+                case 'json':
+                    type = 'application/json';
+                    content = JSON.stringify(dashboard, null, 2);
+                    break;
+                case 'yaml':
+                    {
+                        type = 'application/yaml';
+                        if (shape === 'cr') {
+                            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');
+                            content = stringify({
+                                apiVersion: 'perses.dev/v1alpha1',
+                                kind: 'PersesDashboard',
+                                metadata: {
+                                    labels: {
+                                        'app.kubernetes.io/name': 'perses-dashboard',
+                                        'app.kubernetes.io/instance': name,
+                                        'app.kubernetes.io/part-of': 'perses-operator'
+                                    },
+                                    name
+                                },
+                                namespace: dashboard.metadata.project,
+                                spec: dashboard.spec
+                            });
+                        } else {
+                            content = stringify(dashboard);
+                        }
+                    }
+                    break;
+            }
+            if (!hiddenLinkRef || !hiddenLinkRef.current) return;
+            // Create blob URL
+            const hiddenLinkUrl = URL.createObjectURL(new Blob([
+                content
+            ], {
+                type
+            }));
+            // Simulate click
+            hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;
+            hiddenLinkRef.current.href = hiddenLinkUrl;
+            hiddenLinkRef.current.click();
+            // Remove blob URL (for memory management)
+            URL.revokeObjectURL(hiddenLinkUrl);
+        };
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
-            /*#__PURE__*/ _jsx(InfoTooltip, {
-                description: TOOLTIP_TEXT.downloadDashboard,
-                children: /*#__PURE__*/ _jsx(ToolbarIconButton, {
-                    "aria-label": TOOLTIP_TEXT.downloadDashboard,
-                    onClick: onDownloadButtonClick,
-                    sx: {
-                        height
-                    },
-                    children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            /*#__PURE__*/ _jsx(ToolbarIconButton, {
+                id: "download-dashboard-button",
+                "aria-controls": open ? 'basic-menu' : undefined,
+                "aria-haspopup": "true",
+                "aria-expanded": open ? 'true' : undefined,
+                onClick: handleClick,
+                children: /*#__PURE__*/ _jsx(DownloadIcon, {})
+            }),
+            /*#__PURE__*/ _jsx(Menu, {
+                id: "download-dashboard-formats",
+                anchorEl: anchorEl,
+                open: open,
+                hideBackdrop: true,
+                onClose: ()=>setAnchorEl(null),
+                MenuListProps: {
+                    'aria-labelledby': 'download-dashboard-button'
+                },
+                children: /*#__PURE__*/ _jsx("div", {
+                    children: /*#__PURE__*/ _jsx(ClickAwayListener, {
+                        onClickAway: ()=>setAnchorEl(null),
+                        children: /*#__PURE__*/ _jsxs(MenuList, {
+                            children: [
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    onClick: handleItemClick('json'),
+                                    children: "JSON"
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    onClick: handleItemClick('yaml'),
+                                    children: "YAML"
+                                }),
+                                /*#__PURE__*/ _jsx(MenuItem, {
+                                    onClick: handleItemClick('yaml', 'cr'),
+                                    children: "YAML (CR)"
+                                })
+                            ]
+                        })
+                    })
                 })
             }),
             /*#__PURE__*/ _jsx("a", {
                 ref: hiddenLinkRef,
                 style: {
                     display: 'none'
-                },
-                download: `${dashboard.metadata.name}.json`
+                }
             })
         ]
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useRef } from 'react';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport { InfoTooltip, ToolbarIconButton } from '@perses-dev/components';\nimport { TOOLTIP_TEXT } from '../../constants';\nimport { useDashboard } from '../../context';\n\ninterface DownloadButtonProps {\n  // The button look best at heights >= 28 pixels\n  heightPx?: number;\n}\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton({ heightPx }: DownloadButtonProps): ReactElement {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n  const height = heightPx === undefined ? undefined : `${heightPx}px`;\n\n  const onDownloadButtonClick = (): void => {\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(\n      new Blob([JSON.stringify(dashboard)], {\n        type: 'application/json',\n      })\n    );\n    // Simulate click\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <InfoTooltip description={TOOLTIP_TEXT.downloadDashboard}>\n        <ToolbarIconButton aria-label={TOOLTIP_TEXT.downloadDashboard} onClick={onDownloadButtonClick} sx={{ height }}>\n          <DownloadIcon />\n        </ToolbarIconButton>\n      </InfoTooltip>\n      {/* Hidden link to download the dashboard as a JSON file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} download={`${dashboard.metadata.name}.json`} />\n    </>\n  );\n}\n"],"names":["useRef","DownloadIcon","InfoTooltip","ToolbarIconButton","TOOLTIP_TEXT","useDashboard","DownloadButton","heightPx","dashboard","hiddenLinkRef","height","undefined","onDownloadButtonClick","current","hiddenLinkUrl","URL","createObjectURL","Blob","JSON","stringify","type","href","click","revokeObjectURL","description","downloadDashboard","aria-label","onClick","sx","a","ref","style","display","download","metadata","name"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAAuBA,MAAM,QAAQ,QAAQ;AAC7C,OAAOC,kBAAkB,kCAAkC;AAC3D,SAASC,WAAW,EAAEC,iBAAiB,QAAQ,yBAAyB;AACxE,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,YAAY,QAAQ,gBAAgB;AAO7C,+DAA+D;AAC/D,OAAO,SAASC,eAAe,EAAEC,QAAQ,EAAuB;IAC9D,MAAM,EAAEC,SAAS,EAAE,GAAGH;IACtB,MAAMI,gBAAgBT,OAA0B;IAChD,MAAMU,SAASH,aAAaI,YAAYA,YAAY,CAAC,EAAEJ,SAAS,EAAE,CAAC;IAEnE,MAAMK,wBAAwB;QAC5B,IAAI,CAACH,iBAAiB,CAACA,cAAcI,OAAO,EAAE;QAC9C,kBAAkB;QAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CACvC,IAAIC,KAAK;YAACC,KAAKC,SAAS,CAACX;SAAW,EAAE;YACpCY,MAAM;QACR;QAEF,iBAAiB;QACjBX,cAAcI,OAAO,CAACQ,IAAI,GAAGP;QAC7BL,cAAcI,OAAO,CAACS,KAAK;QAC3B,0CAA0C;QAC1CP,IAAIQ,eAAe,CAACT;IACtB;IAEA,qBACE;;0BACE,KAACZ;gBAAYsB,aAAapB,aAAaqB,iBAAiB;0BACtD,cAAA,KAACtB;oBAAkBuB,cAAYtB,aAAaqB,iBAAiB;oBAAEE,SAASf;oBAAuBgB,IAAI;wBAAElB;oBAAO;8BAC1G,cAAA,KAACT;;;0BAML,KAAC4B;gBAAEC,KAAKrB;gBAAesB,OAAO;oBAAEC,SAAS;gBAAO;gBAAGC,UAAU,CAAC,EAAEzB,UAAU0B,QAAQ,CAACC,IAAI,CAAC,KAAK,CAAC;;;;AAGpG"}
+{"version":3,"sources":["../../../src/components/DownloadButton/DownloadButton.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';\nimport { ToolbarIconButton } from '@perses-dev/components';\nimport DownloadIcon from 'mdi-material-ui/DownloadOutline';\nimport React, { ReactElement, useRef } from 'react';\nimport { stringify } from 'yaml';\nimport { useDashboard } from '../../context';\n\n// Button that enables downloading the dashboard as a JSON file\nexport function DownloadButton(): ReactElement {\n  const { dashboard } = useDashboard();\n  const hiddenLinkRef = useRef<HTMLAnchorElement>(null);\n  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);\n  const open = Boolean(anchorEl);\n  const handleClick = (event: React.MouseEvent<HTMLButtonElement>): void => {\n    setAnchorEl(event.currentTarget);\n  };\n  const handleItemClick = (format: 'json' | 'yaml', shape?: 'cr') => (): void => {\n    setAnchorEl(null);\n\n    let type,\n      content = '';\n\n    switch (format) {\n      case 'json':\n        type = 'application/json';\n        content = JSON.stringify(dashboard, null, 2);\n        break;\n      case 'yaml':\n        {\n          type = 'application/yaml';\n\n          if (shape === 'cr') {\n            const name = dashboard.metadata.name.toLowerCase().replace(/[^a-z0-9-]/g, '-');\n            content = stringify({\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              },\n              namespace: dashboard.metadata.project,\n              spec: dashboard.spec,\n            });\n          } else {\n            content = stringify(dashboard);\n          }\n        }\n        break;\n    }\n\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(new Blob([content], { type }));\n    // Simulate click\n    hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;\n    hiddenLinkRef.current.href = hiddenLinkUrl;\n    hiddenLinkRef.current.click();\n    // Remove blob URL (for memory management)\n    URL.revokeObjectURL(hiddenLinkUrl);\n  };\n\n  return (\n    <>\n      <ToolbarIconButton\n        id=\"download-dashboard-button\"\n        aria-controls={open ? 'basic-menu' : undefined}\n        aria-haspopup=\"true\"\n        aria-expanded={open ? 'true' : undefined}\n        onClick={handleClick}\n      >\n        <DownloadIcon />\n      </ToolbarIconButton>\n\n      <Menu\n        id=\"download-dashboard-formats\"\n        anchorEl={anchorEl}\n        open={open}\n        hideBackdrop={true}\n        onClose={() => setAnchorEl(null)}\n        MenuListProps={{\n          'aria-labelledby': 'download-dashboard-button',\n        }}\n      >\n        <div>\n          <ClickAwayListener onClickAway={() => setAnchorEl(null)}>\n            <MenuList>\n              <MenuItem onClick={handleItemClick('json')}>JSON</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml')}>YAML</MenuItem>\n              <MenuItem onClick={handleItemClick('yaml', 'cr')}>YAML (CR)</MenuItem>\n            </MenuList>\n          </ClickAwayListener>\n        </div>\n      </Menu>\n\n      {/* Hidden link to download the dashboard as a JSON or YAML file */}\n      {/* eslint-disable jsx-a11y/anchor-has-content */}\n      {/* eslint-disable jsx-a11y/anchor-is-valid  */}\n      <a ref={hiddenLinkRef} style={{ display: 'none' }} />\n    </>\n  );\n}\n"],"names":["ClickAwayListener","Menu","MenuItem","MenuList","ToolbarIconButton","DownloadIcon","React","useRef","stringify","useDashboard","DownloadButton","dashboard","hiddenLinkRef","anchorEl","setAnchorEl","useState","open","Boolean","handleClick","event","currentTarget","handleItemClick","format","shape","type","content","JSON","name","metadata","toLowerCase","replace","apiVersion","kind","labels","namespace","project","spec","current","hiddenLinkUrl","URL","createObjectURL","Blob","download","href","click","revokeObjectURL","id","aria-controls","undefined","aria-haspopup","aria-expanded","onClick","hideBackdrop","onClose","MenuListProps","div","onClickAway","a","ref","style","display"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,iBAAiB,EAAEC,IAAI,EAAEC,QAAQ,EAAEC,QAAQ,QAAQ,gBAAgB;AAC5E,SAASC,iBAAiB,QAAQ,yBAAyB;AAC3D,OAAOC,kBAAkB,kCAAkC;AAC3D,OAAOC,SAAuBC,MAAM,QAAQ,QAAQ;AACpD,SAASC,SAAS,QAAQ,OAAO;AACjC,SAASC,YAAY,QAAQ,gBAAgB;AAE7C,+DAA+D;AAC/D,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGF;IACtB,MAAMG,gBAAgBL,OAA0B;IAChD,MAAM,CAACM,UAAUC,YAAY,GAAGR,MAAMS,QAAQ,CAAqB;IACnE,MAAMC,OAAOC,QAAQJ;IACrB,MAAMK,cAAc,CAACC;QACnBL,YAAYK,MAAMC,aAAa;IACjC;IACA,MAAMC,kBAAkB,CAACC,QAAyBC,QAAiB;YACjET,YAAY;YAEZ,IAAIU,MACFC,UAAU;YAEZ,OAAQH;gBACN,KAAK;oBACHE,OAAO;oBACPC,UAAUC,KAAKlB,SAAS,CAACG,WAAW,MAAM;oBAC1C;gBACF,KAAK;oBACH;wBACEa,OAAO;wBAEP,IAAID,UAAU,MAAM;4BAClB,MAAMI,OAAOhB,UAAUiB,QAAQ,CAACD,IAAI,CAACE,WAAW,GAAGC,OAAO,CAAC,eAAe;4BAC1EL,UAAUjB,UAAU;gCAClBuB,YAAY;gCACZC,MAAM;gCACNJ,UAAU;oCACRK,QAAQ;wCACN,0BAA0B;wCAC1B,8BAA8BN;wCAC9B,6BAA6B;oCAC/B;oCACAA;gCACF;gCACAO,WAAWvB,UAAUiB,QAAQ,CAACO,OAAO;gCACrCC,MAAMzB,UAAUyB,IAAI;4BACtB;wBACF,OAAO;4BACLX,UAAUjB,UAAUG;wBACtB;oBACF;oBACA;YACJ;YAEA,IAAI,CAACC,iBAAiB,CAACA,cAAcyB,OAAO,EAAE;YAC9C,kBAAkB;YAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CAAC,IAAIC,KAAK;gBAAChB;aAAQ,EAAE;gBAAED;YAAK;YACrE,iBAAiB;YACjBZ,cAAcyB,OAAO,CAACK,QAAQ,GAAG,CAAC,EAAE/B,UAAUiB,QAAQ,CAACD,IAAI,CAAC,EAAEJ,UAAU,OAAO,QAAQ,GAAG,CAAC,EAAED,OAAO,CAAC;YACrGV,cAAcyB,OAAO,CAACM,IAAI,GAAGL;YAC7B1B,cAAcyB,OAAO,CAACO,KAAK;YAC3B,0CAA0C;YAC1CL,IAAIM,eAAe,CAACP;QACtB;IAEA,qBACE;;0BACE,KAAClC;gBACC0C,IAAG;gBACHC,iBAAe/B,OAAO,eAAegC;gBACrCC,iBAAc;gBACdC,iBAAelC,OAAO,SAASgC;gBAC/BG,SAASjC;0BAET,cAAA,KAACb;;0BAGH,KAACJ;gBACC6C,IAAG;gBACHjC,UAAUA;gBACVG,MAAMA;gBACNoC,cAAc;gBACdC,SAAS,IAAMvC,YAAY;gBAC3BwC,eAAe;oBACb,mBAAmB;gBACrB;0BAEA,cAAA,KAACC;8BACC,cAAA,KAACvD;wBAAkBwD,aAAa,IAAM1C,YAAY;kCAChD,cAAA,MAACX;;8CACC,KAACD;oCAASiD,SAAS9B,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASiD,SAAS9B,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASiD,SAAS9B,gBAAgB,QAAQ;8CAAO;;;;;;;0BAS1D,KAACoC;gBAAEC,KAAK9C;gBAAe+C,OAAO;oBAAEC,SAAS;gBAAO;;;;AAGtD"}

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,EAAuB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA0NzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}
+{"version":3,"file":"PanelEditorForm.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAuB,MAAM,OAAO,CAAC;AAE1D,OAAO,EAAE,MAAM,EAAmB,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAgB9E,MAAM,WAAW,oBAAoB;IACnC,aAAa,EAAE,iBAAiB,CAAC;IACjC,aAAa,EAAE,MAAM,CAAC;IACtB,MAAM,EAAE,CAAC,MAAM,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA8NzE;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,sBAAsB,CAAC"}