@perses-dev/dashboards 0.53.0 → 0.54.0-beta.0

package/dist/cjs/components/DashboardLinks/DashboardLinksEditor.js

@@ -0,0 +1,366 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "DashboardLinksEditor", {
+    enumerable: true,
+    get: function() {
+        return DashboardLinksEditor;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _Plus = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Plus"));
+const _TrashCan = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/TrashCan"));
+const _ArrowUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowUp"));
+const _ArrowDown = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ArrowDown"));
+const _Pencil = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/Pencil"));
+const _ChevronUp = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/ChevronUp"));
+const _useimmer = require("use-immer");
+const _components = require("@perses-dev/components");
+const _context = require("../../context");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DEFAULT_LINK = {
+    url: '',
+    name: '',
+    tooltip: '',
+    renderVariables: true,
+    targetBlank: true
+};
+function DashboardLinksEditor({ links: initialLinks, onChange, onCancel }) {
+    const [links, setLinks] = (0, _useimmer.useImmer)(initialLinks);
+    const [expandedIndex, setExpandedIndex] = (0, _react.useState)(null);
+    const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } = (0, _context.useDiscardChangesConfirmationDialog)();
+    const handleCancel = ()=>{
+        if (JSON.stringify(initialLinks) !== JSON.stringify(links)) {
+            openDiscardChangesConfirmationDialog({
+                onDiscardChanges: ()=>{
+                    closeDiscardChangesConfirmationDialog();
+                    onCancel();
+                },
+                onCancel: closeDiscardChangesConfirmationDialog
+            });
+        } else {
+            onCancel();
+        }
+    };
+    const handleAdd = ()=>{
+        setLinks((draft)=>{
+            draft.push({
+                ...DEFAULT_LINK
+            });
+        });
+        setExpandedIndex(links.length);
+    };
+    const handleRemove = (index)=>{
+        setLinks((draft)=>{
+            draft.splice(index, 1);
+        });
+        if (expandedIndex === index) {
+            setExpandedIndex(null);
+        } else if (expandedIndex !== null && expandedIndex > index) {
+            setExpandedIndex(expandedIndex - 1);
+        }
+    };
+    const handleMoveUp = (index)=>{
+        if (index === 0) return;
+        setLinks((draft)=>{
+            const temp = draft[index - 1];
+            if (temp && draft[index]) {
+                draft[index - 1] = draft[index];
+                draft[index] = temp;
+            }
+        });
+        if (expandedIndex === index) {
+            setExpandedIndex(index - 1);
+        } else if (expandedIndex === index - 1) {
+            setExpandedIndex(index);
+        }
+    };
+    const handleMoveDown = (index)=>{
+        if (index >= links.length - 1) return;
+        setLinks((draft)=>{
+            const temp = draft[index + 1];
+            if (temp && draft[index]) {
+                draft[index + 1] = draft[index];
+                draft[index] = temp;
+            }
+        });
+        if (expandedIndex === index) {
+            setExpandedIndex(index + 1);
+        } else if (expandedIndex === index + 1) {
+            setExpandedIndex(index);
+        }
+    };
+    const handleUpdateLink = (index, link)=>{
+        setLinks((draft)=>{
+            draft[index] = link;
+        });
+    };
+    const isValid = links.every((link)=>link.url.trim().length > 0);
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    padding: (theme)=>theme.spacing(1, 2),
+                    borderBottom: (theme)=>`1px solid ${theme.palette.divider}`
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                        variant: "h2",
+                        children: "Edit Dashboard Links"
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        marginLeft: "auto",
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                disabled: !isValid,
+                                variant: "contained",
+                                onClick: ()=>onChange(links),
+                                children: "Apply"
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                                color: "secondary",
+                                variant: "outlined",
+                                onClick: handleCancel,
+                                children: "Cancel"
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                padding: 2,
+                sx: {
+                    overflowY: 'scroll'
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                    spacing: 2,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableContainer, {
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Table, {
+                                size: "small",
+                                sx: {
+                                    tableLayout: 'fixed',
+                                    width: '100%'
+                                },
+                                "aria-label": "table of dashboard links",
+                                children: [
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableHead, {
+                                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                                            children: [
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                    children: "Name"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                    children: "URL"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                    width: 80,
+                                                    children: "New Tab"
+                                                }),
+                                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                                                    align: "right",
+                                                    width: 180,
+                                                    children: "Actions"
+                                                })
+                                            ]
+                                        })
+                                    }),
+                                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableBody, {
+                                        children: links.map((link, index)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(LinkTableRow, {
+                                                link: link,
+                                                index: index,
+                                                isFirst: index === 0,
+                                                isLast: index === links.length - 1,
+                                                isExpanded: expandedIndex === index,
+                                                onToggleExpand: ()=>setExpandedIndex(expandedIndex === index ? null : index),
+                                                onUpdate: (updatedLink)=>handleUpdateLink(index, updatedLink),
+                                                onRemove: ()=>handleRemove(index),
+                                                onMoveUp: ()=>handleMoveUp(index),
+                                                onMoveDown: ()=>handleMoveDown(index)
+                                            }, index))
+                                    })
+                                ]
+                            })
+                        }),
+                        links.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
+                            variant: "body1",
+                            color: "text.secondary",
+                            fontStyle: "italic",
+                            textAlign: "center",
+                            py: 4,
+                            children: "No links defined. Click 'Add Link' to create one."
+                        }),
+                        /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                            variant: "contained",
+                            startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_Plus.default, {}),
+                            onClick: handleAdd,
+                            sx: {
+                                alignSelf: 'flex-start'
+                            },
+                            children: "Add Link"
+                        })
+                    ]
+                })
+            })
+        ]
+    });
+}
+function LinkTableRow({ link, index, isFirst, isLast, isExpanded, onToggleExpand, onUpdate, onRemove, onMoveUp, onMoveDown }) {
+    const displayName = link.name?.trim() || `Link ${index + 1}`;
+    const hasError = link.url.trim().length === 0;
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableRow, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                        component: "th",
+                        scope: "row",
+                        sx: {
+                            fontWeight: 'bold',
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis'
+                        },
+                        children: displayName
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                        sx: {
+                            overflow: 'hidden',
+                            textOverflow: 'ellipsis',
+                            whiteSpace: 'nowrap',
+                            color: hasError ? 'error.main' : undefined
+                        },
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                            description: link.url,
+                            enterDelay: 100,
+                            children: link.url || '(no URL)'
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                        children: link.targetBlank ? 'Yes' : 'No'
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.TableCell, {
+                        align: "right",
+                        sx: {
+                            whiteSpace: 'nowrap'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: onMoveUp,
+                                disabled: isFirst,
+                                "aria-label": "Move link up",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowUp.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: onMoveDown,
+                                disabled: isLast,
+                                "aria-label": "Move link down",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ArrowDown.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: onToggleExpand,
+                                "aria-label": isExpanded ? 'Collapse link editor' : 'Edit link',
+                                children: isExpanded ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_ChevronUp.default, {}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_Pencil.default, {})
+                            }),
+                            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.IconButton, {
+                                onClick: onRemove,
+                                "aria-label": "Remove link",
+                                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TrashCan.default, {})
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableRow, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TableCell, {
+                    colSpan: 4,
+                    sx: {
+                        paddingBottom: 0,
+                        paddingTop: 0,
+                        border: isExpanded ? undefined : 'none'
+                    },
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Collapse, {
+                        in: isExpanded,
+                        timeout: "auto",
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                            sx: {
+                                margin: 2
+                            },
+                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LinkEditorForm, {
+                                mode: "modalEmbedded",
+                                url: {
+                                    value: link.url,
+                                    label: 'URL',
+                                    error: {
+                                        hasError: hasError,
+                                        helperText: hasError ? 'URL is required' : undefined
+                                    },
+                                    placeholder: 'https://example.com/dashboard?var=$variable',
+                                    onChange: (url)=>onUpdate({
+                                            ...link,
+                                            url
+                                        })
+                                },
+                                name: {
+                                    value: link.name ?? '',
+                                    label: 'Display Name',
+                                    onChange: (name)=>onUpdate({
+                                            ...link,
+                                            name
+                                        })
+                                },
+                                tooltip: {
+                                    value: link.tooltip ?? '',
+                                    label: 'Tooltip',
+                                    onChange: (tooltip)=>onUpdate({
+                                            ...link,
+                                            tooltip
+                                        })
+                                },
+                                renderVariables: {
+                                    value: link.renderVariables ?? true,
+                                    label: 'Replace variables in URL',
+                                    onChange: (renderVariables)=>onUpdate({
+                                            ...link,
+                                            renderVariables
+                                        })
+                                },
+                                newTabOpen: {
+                                    value: link.targetBlank ?? true,
+                                    label: 'Open in new tab',
+                                    onChange: (targetBlank)=>onUpdate({
+                                            ...link,
+                                            targetBlank
+                                        })
+                                }
+                            })
+                        })
+                    })
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/DashboardLinks/EditDashboardLinksButton.js

@@ -0,0 +1,81 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "EditDashboardLinksButton", {
+    enumerable: true,
+    get: function() {
+        return EditDashboardLinksButton;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _PencilOutline = /*#__PURE__*/ _interop_require_default(require("mdi-material-ui/PencilOutline"));
+const _components = require("@perses-dev/components");
+const _constants = require("../../constants");
+const _context = require("../../context");
+const _DashboardLinksEditor = require("./DashboardLinksEditor");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+function EditDashboardLinksButton({ variant = 'text', label = 'Links', color = 'primary', fullWidth }) {
+    const [isLinksEditorOpen, setIsLinksEditorOpen] = (0, _react.useState)(false);
+    const links = (0, _context.useDashboardLinks)();
+    const { setLinks } = (0, _context.useDashboardLinksActions)();
+    const openLinksEditor = ()=>{
+        setIsLinksEditorOpen(true);
+    };
+    const closeLinksEditor = ()=>{
+        setIsLinksEditorOpen(false);
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.InfoTooltip, {
+                description: _constants.TOOLTIP_TEXT.editLinks,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
+                    startIcon: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PencilOutline.default, {}),
+                    onClick: openLinksEditor,
+                    "aria-label": _constants.TOOLTIP_TEXT.editLinks,
+                    variant: variant,
+                    color: color,
+                    fullWidth: fullWidth,
+                    sx: _constants.editButtonStyle,
+                    children: label
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Drawer, {
+                isOpen: isLinksEditorOpen,
+                onClose: closeLinksEditor,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
+                "data-testid": "dashboard-links-editor",
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_DashboardLinksEditor.DashboardLinksEditor, {
+                    links: links,
+                    onCancel: closeLinksEditor,
+                    onChange: (updatedLinks)=>{
+                        setLinks?.(updatedLinks);
+                        setIsLinksEditorOpen(false);
+                    }
+                })
+            })
+        ]
+    });
+}

package/dist/cjs/components/DashboardLinks/index.js

@@ -0,0 +1,31 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./EditDashboardLinksButton"), exports);
+_export_star(require("./DashboardLinksEditor"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/DashboardShortcuts/index.js

@@ -0,0 +1,23 @@
+// 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.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "useDashboardShortcuts", {
+    enumerable: true,
+    get: function() {
+        return _useDashboardShortcuts.useDashboardShortcuts;
+    }
+});
+const _useDashboardShortcuts = require("./useDashboardShortcuts");