@perses-dev/dashboards 0.0.0-snapshot-panel-actions-520389b → 0.0.0-snapshot-ts-panel-actions-90e9ef0

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

@@ -25,8 +25,8 @@ const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 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");
+const _serializeDashboard = require("./serializeDashboard");
 function _interop_require_default(obj) {
     return obj && obj.__esModule ? obj : {
         default: obj
@@ -83,43 +83,13 @@ function DownloadButton() {
     };
     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;
-            }
+            const { contentType, content } = (0, _serializeDashboard.serializeDashboard)(dashboard, format, shape);
             if (!hiddenLinkRef || !hiddenLinkRef.current) return;
             // Create blob URL
             const hiddenLinkUrl = URL.createObjectURL(new Blob([
                 content
             ], {
-                type
+                type: contentType
             }));
             // Simulate click
             hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;

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

@@ -0,0 +1,64 @@
+// Copyright 2023 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "serializeDashboard", {
+    enumerable: true,
+    get: function() {
+        return serializeDashboard;
+    }
+});
+const _yaml = require("yaml");
+function serializeYaml(dashboard, shape) {
+    let content;
+    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
+        }, {
+            schema: 'yaml-1.1'
+        });
+    } else {
+        content = (0, _yaml.stringify)(dashboard, {
+            schema: 'yaml-1.1'
+        });
+    }
+    return {
+        contentType: 'application/yaml',
+        content
+    };
+}
+function serializeDashboard(dashboard, format, shape) {
+    switch(format){
+        case 'json':
+            return {
+                contentType: 'application/json',
+                content: JSON.stringify(dashboard, null, 2)
+            };
+        case 'yaml':
+            return serializeYaml(dashboard, shape);
+    }
+}

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

@@ -33,41 +33,8 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-// Function to extract project name from URL (kept as fallback)
-const extractProjectNameFromUrl = ()=>{
-    try {
-        if (process.env.NODE_ENV === 'test') {
-            return 'test-project';
-        }
-        if (typeof window !== 'undefined' && (window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
-            const urlPath = window.location.pathname;
-            if (urlPath === '/' || urlPath === '') {
-                return 'dev-project';
-            }
-        }
-        const urlPath = window.location.pathname;
-        // Split the path and look for the project name after "/projects/"
-        const pathSegments = urlPath.split('/').filter((segment)=>segment.length > 0);
-        const projectsIndex = pathSegments.findIndex((segment)=>segment === 'projects');
-        if (projectsIndex !== -1 && projectsIndex + 1 < pathSegments.length) {
-            const projectName = pathSegments[projectsIndex + 1];
-            if (projectName && projectName.trim().length > 0) {
-                return projectName;
-            }
-        }
-        // Fallback: try to extract from URL parameters
-        const urlParams = new URLSearchParams(window.location.search);
-        const projectParam = urlParams.get('project');
-        if (projectParam && projectParam.trim().length > 0) {
-            return projectParam;
-        }
-        return 'unknown-project';
-    } catch  {
-        return 'unknown-project';
-    }
-};
 const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
-    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, projectName: providedProjectName, ...others } = props;
+    const { definition, readHandlers, editHandlers, onMouseEnter, onMouseLeave, sx, panelOptions, panelGroupItemId, ...others } = props;
     // Make sure we have an ID we can use for aria attributes
     const generatedPanelId = (0, _components.useId)('Panel');
     const headerId = `${generatedPanelId}-header`;
@@ -87,29 +54,6 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
     ]);
     const chartsTheme = (0, _components.useChartsTheme)();
     const { queryResults } = (0, _pluginsystem.useDataQueriesContext)();
-    // Use provided project name or extract from URL as fallback
-    const projectName = (0, _react.useMemo)(()=>{
-        return providedProjectName || extractProjectNameFromUrl();
-    }, [
-        providedProjectName
-    ]);
-    const panelPropsForActions = (0, _react.useMemo)(()=>{
-        return {
-            spec: definition.spec.plugin.spec,
-            queryResults: queryResults.map((query)=>({
-                    definition: query.definition,
-                    data: query.data
-                })),
-            contentDimensions,
-            definition,
-            projectName
-        };
-    }, [
-        definition,
-        contentDimensions,
-        queryResults,
-        projectName
-    ]);
     const handleMouseEnter = (e)=>{
         onMouseEnter?.(e);
     };
@@ -144,12 +88,9 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 title: definition.spec.display.name,
                 description: definition.spec.display.description,
                 queryResults: queryResults,
-                panelPluginKind: definition.spec.plugin.kind,
                 readHandlers: readHandlers,
                 editHandlers: editHandlers,
                 links: definition.spec.links,
-                projectName: projectName,
-                panelProps: panelPropsForActions,
                 sx: {
                     paddingX: `${chartsTheme.container.padding.default}px`
                 }
@@ -171,7 +112,8 @@ const Panel = /*#__PURE__*/ (0, _react.memo)(function Panel(props) {
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
                     FallbackComponent: _components.ErrorAlert,
                     resetKeys: [
-                        definition.spec
+                        definition.spec,
+                        queryResults
                     ],
                     children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelContent.PanelContent, {
                         definition: definition,

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

@@ -24,7 +24,6 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _components = require("@perses-dev/components");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _ArrowCollapse = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowCollapse"));
 const _ArrowExpand = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowExpand"));
 const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
@@ -48,72 +47,7 @@ const ConditionalBox = (0, _material.styled)(_material.Box)({
     flexGrow: 1,
     justifyContent: 'flex-end'
 });
-const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults, panelPluginKind, projectName: _propsProjectName, panelProps })=>{
-    const { isFetching, errors } = (0, _pluginsystem.useDataQueriesContext)();
-    const { getPlugin } = (0, _pluginsystem.usePluginRegistry)();
-    const [pluginActions, setPluginActions] = (0, _react.useState)([]);
-    (0, _react.useEffect)(()=>{
-        let cancelled = false;
-        const loadPluginActions = async ()=>{
-            if (!panelPluginKind || !panelProps) {
-                if (!cancelled) {
-                    setPluginActions([]);
-                }
-                return;
-            }
-            try {
-                // Add defensive check for getPlugin availability
-                if (!getPlugin || typeof getPlugin !== 'function') {
-                    if (!cancelled) {
-                        setPluginActions([]);
-                    }
-                    return;
-                }
-                const plugin = await getPlugin('Panel', panelPluginKind);
-                if (cancelled) return;
-                // More defensive checking for plugin and actions
-                if (!plugin || typeof plugin !== 'object' || !plugin.actions || !Array.isArray(plugin.actions) || plugin.actions.length === 0) {
-                    if (!cancelled) {
-                        setPluginActions([]);
-                    }
-                    return;
-                }
-                // Render plugin actions in header location
-                const headerActions = plugin.actions.filter((action)=>!action.location || action.location === 'header').map((action, index)=>{
-                    const ActionComponent = action.component;
-                    try {
-                        // eslint-disable-next-line @typescript-eslint/no-explicit-any
-                        return /*#__PURE__*/ (0, _jsxruntime.jsx)(ActionComponent, {
-                            ...panelProps
-                        }, `plugin-action-${index}`);
-                    } catch (error) {
-                        console.warn(`Failed to render plugin action ${index}:`, error);
-                        return null;
-                    }
-                }).filter((item)=>Boolean(item));
-                if (!cancelled) {
-                    setPluginActions(headerActions);
-                }
-            } catch (error) {
-                if (!cancelled) {
-                    console.warn('Failed to load plugin actions:', error);
-                    setPluginActions([]);
-                }
-            }
-        };
-        // Use setTimeout to defer the async operation to the next tick
-        const timeoutId = setTimeout(()=>{
-            loadPluginActions();
-        }, 0);
-        return ()=>{
-            cancelled = true;
-            clearTimeout(timeoutId);
-        };
-    }, [
-        panelPluginKind,
-        panelProps,
-        getPlugin
-    ]);
+const PanelActions = ({ editHandlers, readHandlers, extra, title, description, descriptionTooltipId, links, queryResults })=>{
     const descriptionAction = (0, _react.useMemo)(()=>{
         if (description && description.trim().length > 0) {
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -144,23 +78,19 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     });
     const extraActions = editHandlers === undefined && extra;
     const queryStateIndicator = (0, _react.useMemo)(()=>{
-        const hasData = queryResults && queryResults.series && queryResults.series.length > 0;
+        const hasData = queryResults.some((q)=>q.data);
+        const isFetching = queryResults.some((q)=>q.isFetching);
+        const queryErrors = queryResults.filter((q)=>q.error);
         if (isFetching && hasData) {
+            // If the panel has no data, the panel content will show the loading overlay.
+            // Therefore, show the circular loading indicator only in case the panel doesn't display the loading overlay already.
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CircularProgress, {
                 "aria-label": "loading",
                 size: "1.125rem"
             });
-        }
-        const validErrors = (errors || []).filter((error)=>error !== null);
-        if (validErrors.length > 0) {
-            const errorTexts = validErrors.map((e)=>{
-                if (typeof e === 'string') return e;
-                if (e && typeof e === 'object') {
-                    const errorObj = e;
-                    return errorObj.message ?? errorObj.toString?.() ?? 'Unknown error';
-                }
-                return 'Unknown error';
-            }).join('\n');
+        } else if (queryErrors.length > 0) {
+            const errorTexts = queryErrors.map((q)=>q.error).map((e)=>e?.message ?? e?.toString() ?? 'Unknown error') // eslint-disable-line @typescript-eslint/no-explicit-any
+            .join('\n');
             return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
                 description: errorTexts,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_HeaderIconButton.HeaderIconButton, {
@@ -173,9 +103,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             });
         }
     }, [
-        queryResults,
-        isFetching,
-        errors
+        queryResults
     ]);
     const readActions = (0, _react.useMemo)(()=>{
         if (readHandlers !== undefined) {
@@ -200,6 +128,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
     ]);
     const editActions = (0, _react.useMemo)(()=>{
         if (editHandlers !== undefined) {
+            // If there are edit handlers, always just show the edit buttons
             return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
@@ -222,6 +151,8 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ContentCopy.default, {
                                 fontSize: "inherit",
                                 sx: {
+                                    // Shrink this icon a little bit to look more consistent
+                                    // with the other icons in the header.
                                     transform: 'scale(0.925)'
                                 }
                             })
@@ -311,7 +242,6 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                                     editActions
                                 ]
                             }),
-                            pluginActions,
                             moveAction
                         ]
                     })
@@ -339,7 +269,6 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
-                            pluginActions,
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(OverflowMenu, {
                                 title: title,
                                 children: editActions
@@ -351,6 +280,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(ConditionalBox, {
                 sx: (theme)=>({
+                        // flip the logic here; if the browser (or jsdom) does not support container queries, always show all icons
                         display: 'flex',
                         [theme.containerQueries(_constants.HEADER_ACTIONS_CONTAINER_NAME).down(_constants.HEADER_MEDIUM_WIDTH)]: {
                             display: 'none'
@@ -372,7 +302,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
                             extraActions,
                             " ",
                             readActions,
-                            pluginActions,
+                            " ",
                             editActions,
                             " ",
                             moveAction
@@ -385,7 +315,7 @@ const PanelActions = ({ editHandlers, readHandlers, extra, title, description, d
 };
 const OverflowMenu = ({ children, title })=>{
     const [anchorPosition, setAnchorPosition] = (0, _react.useState)();
-    // do not show overflow menu if there is no content
+    // do not show overflow menu if there is no content (for example, edit actions are hidden)
     const hasContent = /*#__PURE__*/ (0, _react.isValidElement)(children) || Array.isArray(children) && children.some(_react.isValidElement);
     if (!hasContent) {
         return undefined;

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

@@ -24,53 +24,13 @@ const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
-const _react = require("react");
 const _constants = require("../../constants");
 const _PanelActions = require("./PanelActions");
-function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, panelPluginKind, projectName, panelProps, ...rest }) {
+function PanelHeader({ id, title: rawTitle, description: rawDescription, links, queryResults, readHandlers, editHandlers, sx, extra, ...rest }) {
     const titleElementId = `${id}-title`;
     const descriptionTooltipId = `${id}-description`;
     const title = (0, _pluginsystem.useReplaceVariablesInString)(rawTitle);
     const description = (0, _pluginsystem.useReplaceVariablesInString)(rawDescription);
-    const timeSeriesDataForExport = (0, _react.useMemo)(()=>{
-        // Collect all series from all queries
-        const allSeries = [];
-        let timeRange = undefined;
-        let stepMs = undefined;
-        let metadata = undefined;
-        queryResults.forEach((query)=>{
-            if (query.data && 'series' in query.data) {
-                const timeSeriesData = query.data;
-                // Collect series from this query
-                if (timeSeriesData.series && timeSeriesData.series.length > 0) {
-                    allSeries.push(...timeSeriesData.series);
-                    // Use the first query's metadata/timeRange/stepMs as the base
-                    if (!timeRange && timeSeriesData.timeRange) {
-                        timeRange = timeSeriesData.timeRange;
-                    }
-                    if (!stepMs && timeSeriesData.stepMs) {
-                        stepMs = timeSeriesData.stepMs;
-                    }
-                    if (!metadata && timeSeriesData.metadata) {
-                        metadata = timeSeriesData.metadata;
-                    }
-                }
-            }
-        });
-        // If we found series, create a combined TimeSeriesData object
-        if (allSeries.length > 0) {
-            const combinedData = {
-                series: allSeries,
-                timeRange,
-                stepMs,
-                metadata
-            };
-            return combinedData;
-        }
-        return undefined;
-    }, [
-        queryResults
-    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.CardHeader, {
         id: id,
         component: "header",
@@ -99,14 +59,10 @@ function PanelHeader({ id, title: rawTitle, description: rawDescription, links,
                     description: description,
                     descriptionTooltipId: descriptionTooltipId,
                     links: links,
-                    queryResults: timeSeriesDataForExport,
-                    panelPluginKind: panelPluginKind,
+                    queryResults: queryResults,
                     readHandlers: readHandlers,
                     editHandlers: editHandlers,
-                    extra: extra,
-                    projectName: projectName,
-                    // ========== ADDED: Pass panel props for actions ==========
-                    panelProps: panelProps
+                    extra: extra
                 })
             ]
         }),

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":"AAgBA,OAAc,EAAE,YAAY,EAAU,MAAM,OAAO,CAAC;AAKpD,wBAAgB,cAAc,IAAI,YAAY,CAgG7C"}
+{"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,CA+D7C"}

package/dist/components/DownloadButton/DownloadButton.js

@@ -15,8 +15,8 @@ import { ClickAwayListener, Menu, MenuItem, MenuList } from '@mui/material';
 import { ToolbarIconButton } from '@perses-dev/components';
 import DownloadIcon from 'mdi-material-ui/DownloadOutline';
 import React, { useRef } from 'react';
-import { stringify } from 'yaml';
 import { useDashboard } from '../../context';
+import { serializeDashboard } from './serializeDashboard';
 // Button that enables downloading the dashboard as a JSON file
 export function DownloadButton() {
     const { dashboard } = useDashboard();
@@ -28,43 +28,13 @@ export function DownloadButton() {
     };
     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;
-            }
+            const { contentType, content } = serializeDashboard(dashboard, format, shape);
             if (!hiddenLinkRef || !hiddenLinkRef.current) return;
             // Create blob URL
             const hiddenLinkUrl = URL.createObjectURL(new Blob([
                 content
             ], {
-                type
+                type: contentType
             }));
             // Simulate click
             hiddenLinkRef.current.download = `${dashboard.metadata.name}${shape === 'cr' ? '-cr' : ''}.${format}`;

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 { 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":"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"}
+{"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 { useDashboard } from '../../context';\nimport { serializeDashboard } from './serializeDashboard';\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    const { contentType, content } = serializeDashboard(dashboard, format, shape);\n\n    if (!hiddenLinkRef || !hiddenLinkRef.current) return;\n    // Create blob URL\n    const hiddenLinkUrl = URL.createObjectURL(new Blob([content], { type: contentType }));\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","useDashboard","serializeDashboard","DownloadButton","dashboard","hiddenLinkRef","anchorEl","setAnchorEl","useState","open","Boolean","handleClick","event","currentTarget","handleItemClick","format","shape","contentType","content","current","hiddenLinkUrl","URL","createObjectURL","Blob","type","download","metadata","name","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,YAAY,QAAQ,gBAAgB;AAC7C,SAASC,kBAAkB,QAAQ,uBAAuB;AAE1D,+DAA+D;AAC/D,OAAO,SAASC;IACd,MAAM,EAAEC,SAAS,EAAE,GAAGH;IACtB,MAAMI,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,MAAM,EAAEU,WAAW,EAAEC,OAAO,EAAE,GAAGhB,mBAAmBE,WAAWW,QAAQC;YAEvE,IAAI,CAACX,iBAAiB,CAACA,cAAcc,OAAO,EAAE;YAC9C,kBAAkB;YAClB,MAAMC,gBAAgBC,IAAIC,eAAe,CAAC,IAAIC,KAAK;gBAACL;aAAQ,EAAE;gBAAEM,MAAMP;YAAY;YAClF,iBAAiB;YACjBZ,cAAcc,OAAO,CAACM,QAAQ,GAAG,GAAGrB,UAAUsB,QAAQ,CAACC,IAAI,GAAGX,UAAU,OAAO,QAAQ,GAAG,CAAC,EAAED,QAAQ;YACrGV,cAAcc,OAAO,CAACS,IAAI,GAAGR;YAC7Bf,cAAcc,OAAO,CAACU,KAAK;YAC3B,0CAA0C;YAC1CR,IAAIS,eAAe,CAACV;QACtB;IAEA,qBACE;;0BACE,KAACvB;gBACCkC,IAAG;gBACHC,iBAAevB,OAAO,eAAewB;gBACrCC,iBAAc;gBACdC,iBAAe1B,OAAO,SAASwB;gBAC/BG,SAASzB;0BAET,cAAA,KAACb;;0BAGH,KAACJ;gBACCqC,IAAG;gBACHzB,UAAUA;gBACVG,MAAMA;gBACN4B,cAAc;gBACdC,SAAS,IAAM/B,YAAY;gBAC3BgC,eAAe;oBACb,mBAAmB;gBACrB;0BAEA,cAAA,KAACC;8BACC,cAAA,KAAC/C;wBAAkBgD,aAAa,IAAMlC,YAAY;kCAChD,cAAA,MAACX;;8CACC,KAACD;oCAASyC,SAAStB,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASyC,SAAStB,gBAAgB;8CAAS;;8CAC5C,KAACnB;oCAASyC,SAAStB,gBAAgB,QAAQ;8CAAO;;;;;;;0BAS1D,KAAC4B;gBAAEC,KAAKtC;gBAAeuC,OAAO;oBAAEC,SAAS;gBAAO;;;;AAGtD"}

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

@@ -0,0 +1,8 @@
+import { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';
+type SerializedDashboard = {
+    contentType: string;
+    content: string;
+};
+export declare function serializeDashboard(dashboard: DashboardResource | EphemeralDashboardResource, format: 'json' | 'yaml', shape?: 'cr'): SerializedDashboard;
+export {};
+//# sourceMappingURL=serializeDashboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"serializeDashboard.d.ts","sourceRoot":"","sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,MAAM,kBAAkB,CAAC;AAGjF,KAAK,mBAAmB,GAAG;IACzB,WAAW,EAAE,MAAM,CAAC;IACpB,OAAO,EAAE,MAAM,CAAC;CACjB,CAAC;AA+BF,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,iBAAiB,GAAG,0BAA0B,EACzD,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,KAAK,CAAC,EAAE,IAAI,GACX,mBAAmB,CAOrB"}

package/dist/components/DownloadButton/serializeDashboard.js

@@ -0,0 +1,56 @@
+// Copyright 2023 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 { stringify } from 'yaml';
+function serializeYaml(dashboard, shape) {
+    let content;
+    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
+        }, {
+            schema: 'yaml-1.1'
+        });
+    } else {
+        content = stringify(dashboard, {
+            schema: 'yaml-1.1'
+        });
+    }
+    return {
+        contentType: 'application/yaml',
+        content
+    };
+}
+export function serializeDashboard(dashboard, format, shape) {
+    switch(format){
+        case 'json':
+            return {
+                contentType: 'application/json',
+                content: JSON.stringify(dashboard, null, 2)
+            };
+        case 'yaml':
+            return serializeYaml(dashboard, shape);
+    }
+}
+
+//# sourceMappingURL=serializeDashboard.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/DownloadButton/serializeDashboard.ts"],"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 { DashboardResource, EphemeralDashboardResource } from '@perses-dev/core';\nimport { stringify } from 'yaml';\n\ntype SerializedDashboard = {\n  contentType: string;\n  content: string;\n};\n\nfunction serializeYaml(dashboard: DashboardResource | EphemeralDashboardResource, shape?: 'cr'): SerializedDashboard {\n  let content: string;\n\n  if (shape === 'cr') {\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 {\n    content = stringify(dashboard, { schema: 'yaml-1.1' });\n  }\n\n  return { contentType: 'application/yaml', content };\n}\n\nexport function serializeDashboard(\n  dashboard: DashboardResource | EphemeralDashboardResource,\n  format: 'json' | 'yaml',\n  shape?: 'cr'\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","contentType","serializeDashboard","format","JSON"],"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;AAGjC,SAASA,SAAS,QAAQ,OAAO;AAOjC,SAASC,cAAcC,SAAyD,EAAEC,KAAY;IAC5F,IAAIC;IAEJ,IAAID,UAAU,MAAM;QAClB,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;QACLX,UAAUJ,UAAUE,WAAW;YAAEa,QAAQ;QAAW;IACtD;IAEA,OAAO;QAAEC,aAAa;QAAoBZ;IAAQ;AACpD;AAEA,OAAO,SAASa,mBACdf,SAAyD,EACzDgB,MAAuB,EACvBf,KAAY;IAEZ,OAAQe;QACN,KAAK;YACH,OAAO;gBAAEF,aAAa;gBAAoBZ,SAASe,KAAKnB,SAAS,CAACE,WAAW,MAAM;YAAG;QACxF,KAAK;YACH,OAAOD,cAAcC,WAAWC;IACpC;AACF"}