@datalayer/core 1.2.18 → 1.2.19

package/lib/views/profile/UserBadge.js

@@ -15,7 +15,8 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * @module views/profile
  */
 import { useState, useRef, useCallback, useEffect } from 'react';
-import { Box, Text } from '@primer/react';
+import { Box } from '@datalayer/primer-addons';
+import { Text } from '@primer/react';
 import { parseJwtPayload, getDatalayerJwtUser, getDatalayerDisplayName, } from '../../utils/Jwt.js';
 import { getRelativeTime } from '../../utils/Date.js';
 // ── Component ─────────────────────────────────────────────────────
@@ -64,7 +65,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
         expiredNotifiedForTokenRef.current = token;
         onTokenExpired();
     }, [expired, onTokenExpired, open, token]);
-    return (_jsxs(Box, { sx: { position: 'relative' }, onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
+    return (_jsxs(Box, { position: "relative", onMouseEnter: handleEnter, onMouseLeave: handleLeave, children: [_jsx(Text, { sx: {
                     fontSize: 1,
                     color: triggerColor,
                     cursor: 'default',
@@ -72,63 +73,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                     borderColor: 'border.muted',
                     pb: '1px',
                     userSelect: 'none',
-                }, children: displayName }), open && claims && (_jsxs(Box, { sx: {
-                    position: 'absolute',
-                    top: 'calc(100% + 4px)',
-                    right: 0,
-                    zIndex: 100,
-                    width: '400px',
-                    bg: 'canvas.overlay',
-                    border: '1px solid',
-                    borderColor: 'border.default',
-                    borderRadius: 2,
-                    boxShadow: 'shadow.large',
-                    overflow: 'hidden',
-                }, children: [_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            bg: 'canvas.inset',
-                            borderBottom: '1px solid',
-                            borderColor: 'border.default',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'space-between',
-                            gap: 2,
-                        }, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', sx: {
-                                    appearance: 'none',
-                                    border: '1px solid',
-                                    borderColor: 'border.default',
-                                    borderRadius: 1,
-                                    bg: 'canvas.default',
-                                    color: 'fg.default',
-                                    fontSize: 1,
-                                    lineHeight: 1,
-                                    width: '20px',
-                                    height: '20px',
-                                    display: 'inline-flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'center',
-                                    cursor: 'pointer',
-                                    p: 0,
-                                    '&:hover': {
-                                        bg: 'canvas.subtle',
-                                    },
-                                }, children: expanded ? '−' : '+' }))] }), claims.user && (_jsx(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: _jsxs(Box, { sx: {
-                                display: 'grid',
-                                gridTemplateColumns: '90px 1fr',
-                                gap: 1,
-                                fontSize: 0,
-                            }, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsxs(Box, { sx: {
-                                        display: 'flex',
-                                        alignItems: 'center',
-                                        gap: 2,
-                                        minWidth: 0,
-                                    }, children: [_jsx(Text, { sx: {
+                }, children: displayName }), open && claims && (_jsxs(Box, { position: "absolute", top: "calc(100% + 4px)", right: 0, zIndex: 100, width: "400px", bg: "canvas.overlay", border: "1px solid", borderColor: "border.default", borderRadius: 2, boxShadow: "shadow.large", overflow: "hidden", children: [_jsxs(Box, { px: 3, py: 2, bg: "canvas.inset", borderBottom: "1px solid", borderColor: "border.default", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 2, children: [_jsx(Text, { sx: { fontWeight: 'bold', fontSize: 1 }, children: popoverDisplayName || 'User' }), variant === 'small' && showExpandToggle && (_jsx(Box, { as: "button", type: "button", onClick: () => setExpanded(v => !v), "aria-label": expanded ? 'Hide full JWT claims' : 'Show full JWT claims', "aria-expanded": expanded, title: expanded ? 'Hide full JWT claims' : 'Show full JWT claims', appearance: "none", border: "1px solid", borderColor: "border.default", borderRadius: 1, bg: "canvas.default", color: "fg.default", fontSize: 1, lineHeight: 1, width: "20px", height: "20px", display: "inline-flex", alignItems: "center", justifyContent: "center", cursor: "pointer", p: 0, hover: { bg: 'canvas.subtle' }, children: expanded ? '−' : '+' }))] }), claims.user && (_jsx(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: _jsxs(Box, { display: "grid", gridTemplateColumns: "90px 1fr", gap: 1, fontSize: 0, children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "First name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.firstName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Last name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.lastName }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Display name" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: getDatalayerDisplayName(claims.user, claims.user.handle) }), claims.user.email && (_jsxs(_Fragment, { children: [_jsx(Text, { sx: { color: 'fg.muted' }, children: "Email" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.email })] })), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Handle" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: claims.user.handle }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "UID" }), _jsx(Text, { sx: { fontFamily: 'mono', wordBreak: 'break-all' }, children: claims.user.uid }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Issued" }), _jsx(Text, { sx: { fontFamily: 'mono' }, children: new Date(claims.iat * 1000).toISOString() }), _jsx(Text, { sx: { color: 'fg.muted' }, children: "Expires" }), _jsxs(Box, { display: "flex", alignItems: "center", gap: 2, minWidth: 0, children: [_jsx(Text, { sx: {
                                                 fontFamily: 'mono',
                                                 overflow: 'hidden',
                                                 textOverflow: 'ellipsis',
@@ -153,44 +98,7 @@ export const UserBadge = ({ token, variant = 'full', showExpandToggle = true, ex
                                                 : warning
                                                     ? 'attention.muted'
                                                     : 'success.muted';
-                                            return (_jsx(Box, { sx: {
-                                                    flexShrink: 0,
-                                                    fontSize: 0,
-                                                    px: 1,
-                                                    py: '1px',
-                                                    bg,
-                                                    color: fg,
-                                                    borderRadius: 1,
-                                                    border: '1px solid',
-                                                    borderColor: border,
-                                                    whiteSpace: 'nowrap',
-                                                }, children: getRelativeTime(expDate) }));
-                                        })()] })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderBottom: '1px solid',
-                            borderColor: 'border.muted',
-                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "Roles" }), _jsx(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 1 }, children: (claims.user?.roles ?? claims.roles ?? []).map(r => (_jsx(Box, { sx: {
-                                        fontSize: 0,
-                                        fontFamily: 'mono',
-                                        px: 1,
-                                        py: '1px',
-                                        bg: 'accent.subtle',
-                                        color: 'accent.fg',
-                                        borderRadius: 1,
-                                        border: '1px solid',
-                                        borderColor: 'accent.muted',
-                                    }, children: r }, r))) })] })), (variant === 'full' || expanded) && (_jsx(Box, { as: "pre", sx: {
-                            m: 0,
-                            px: 3,
-                            py: 2,
-                            fontFamily: 'mono',
-                            fontSize: 0,
-                            color: 'fg.default',
-                            bg: 'canvas.inset',
-                            overflow: 'auto',
-                            maxHeight: '220px',
-                            whiteSpace: 'pre',
-                        }, children: JSON.stringify(claims, null, 2) }))] }))] }));
+                                            return (_jsx(Box, { flexShrink: 0, fontSize: 0, px: 1, py: "1px", bg: bg, color: fg, borderRadius: 1, border: "1px solid", borderColor: border, whiteSpace: "nowrap", children: getRelativeTime(expDate) }));
+                                        })()] })] }) })), (claims.user?.roles ?? claims.roles ?? []).length > 0 && (_jsxs(Box, { px: 3, py: 2, borderBottom: "1px solid", borderColor: "border.muted", children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted', display: 'block', mb: 1 }, children: "Roles" }), _jsx(Box, { display: "flex", flexWrap: "wrap", gap: 1, children: (claims.user?.roles ?? claims.roles ?? []).map(r => (_jsx(Box, { fontSize: 0, fontFamily: "mono", px: 1, py: "1px", bg: "accent.subtle", color: "accent.fg", borderRadius: 1, border: "1px solid", borderColor: "accent.muted", children: r }, r))) })] })), (variant === 'full' || expanded) && (_jsx(Box, { as: "pre", m: 0, px: 3, py: 2, fontFamily: "mono", fontSize: 0, color: "fg.default", bg: "canvas.inset", overflow: "auto", maxHeight: "220px", whiteSpace: "pre", children: JSON.stringify(claims, null, 2) }))] }))] }));
 };
 export default UserBadge;

package/lib/views/secrets/SecretEdit.js

@@ -131,20 +131,11 @@ export const SecretEdit = ({ secretsListRoute = '/settings/secrets', } = {}) =>
     };
     return (_jsxs(_Fragment, { children: [_jsx(PageHeader, { children: _jsx(Heading, { sx: { fontSize: 3 }, children: "Secret" }) }), _jsxs(Box, { display: "flex", children: [_jsxs(Box, { children: [_jsx(BoringAvatar, { displayName: secret?.name, size: 100, style: { paddingRight: 10 } }), _jsx(Text, { as: "h2", sx: { paddingTop: 3 }, children: secret?.name }), _jsx(Box, { mt: 3, children: _jsx(Label, { size: "large", children: secret?.variant }) })] }), _jsxs(Box, { ml: 10, children: [_jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 5 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(TextInput, { placeholder: "Value", monospace: true, size: "large", contrast: !passwordVisible, disabled: !passwordVisible, onChange: secretValueChanged, type: passwordVisible ? 'text' : 'password', value: formValues.value, trailingAction: _jsx(TextInput.Action, { onClick: () => {
                                                         setPasswordVisible(!passwordVisible);
-                                                    }, icon: passwordVisible ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisible ? 'Hide secret' : 'Reveal secret', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Box, { sx: { marginTop: 3 }, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: submitUpdate, children: "Update secret" }) })] }), _jsxs(Box, { sx: { marginTop: 3 }, children: [_jsx(Heading, { as: "h2", sx: {
+                                                    }, icon: passwordVisible ? EyeClosedIcon : EyeIcon, "aria-label": passwordVisible ? 'Hide secret' : 'Reveal secret', sx: { color: 'var(--fgColor-muted)' } }), sx: { overflow: 'visible' } }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Box, { marginTop: 3, children: _jsx(Button, { variant: "primary", disabled: !validationResult.name || !validationResult.description, onClick: submitUpdate, children: "Update secret" }) })] }), _jsxs(Box, { marginTop: 3, children: [_jsx(Heading, { as: "h2", sx: {
                                             fontSize: 4,
                                             fontWeight: 'normal',
                                             color: 'danger.fg',
                                             mb: 2,
-                                        }, children: "Danger zone" }), _jsxs(Box, { sx: {
-                                            border: '1px solid',
-                                            borderColor: 'danger.emphasis',
-                                            borderRadius: 2,
-                                            p: 3,
-                                            display: 'flex',
-                                            alignItems: 'center',
-                                            justifyContent: 'space-between',
-                                            gap: 3,
-                                        }, children: [_jsxs(Box, { sx: { display: 'grid', gap: 1 }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the secret name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: secretNameConfirmChanged }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: submitDelete, children: "Delete secret" })] })] })] })] })] }));
+                                        }, children: "Danger zone" }), _jsxs(Box, { border: "1px solid", borderColor: "danger.emphasis", borderRadius: 2, p: 3, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 3, children: [_jsxs(Box, { display: "grid", gap: 1, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 'bold', color: 'danger.fg' }, children: "Confirm the secret name to delete" }), _jsx(FormControl, { children: _jsx(TextInput, { block: true, value: formValues.nameConfirm, onChange: secretNameConfirmChanged }) }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "This operation is not reversible." })] }), _jsx(Button, { variant: "danger", disabled: !validationResult.nameConfirm, onClick: submitDelete, children: "Delete secret" })] })] })] })] })] }));
 };
 export default SecretEdit;

package/lib/views/secrets/SecretNew.js

@@ -93,7 +93,7 @@ export const SecretNew = ({ secretsListRoute = '/settings/secrets', } = {}) => {
             },
         });
     };
-    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", sx: { gap: 3 }, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
+    return (_jsxs(Box, { children: [_jsx(PageHeader, { children: _jsx(PageHeader.TitleArea, { variant: "large", children: _jsx(PageHeader.Title, { children: "New Secret" }) }) }), _jsx(Box, { display: "grid", gridTemplateColumns: "1fr 1fr", gap: 3, children: _jsx(Box, { children: _jsxs(Box, { sx: { label: { marginTop: 2 } }, children: [_jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Secret type" }), _jsxs(Select, { name: "type", value: formValues.variant, onChange: secretVariantChanged, children: [_jsx(Select.Option, { value: "generic", children: "Generic" }), _jsx(Select.Option, { value: "password", children: "Password" }), _jsx(Select.Option, { value: "key", children: "Key" }), _jsx(Select.Option, { value: "token", children: "Token" })] }), _jsx(FormControl.Caption, { children: "Pick the most appropriate secret type." })] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Name" }), _jsx(TextInput, { block: true, value: formValues.name, onChange: secretNameChanged, autoFocus: true }), _jsx(FormControl.Caption, { children: "Hint: The secret name is a short name that identifies in a unique way your secret." }), validationResult.name === false && (_jsx(FormControl.Validation, { variant: "error", children: "Name length must be between 2 and 32 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Description" }), _jsx(Textarea, { block: true, value: formValues.description, onChange: secretDescriptionChanged, rows: 3 }), validationResult.description === false && (_jsx(FormControl.Validation, { variant: "error", children: "Description must have more than 2 characters." }))] }), _jsxs(FormControl, { required: true, children: [_jsx(FormControl.Label, { children: "Value" }), _jsx(Textarea, { block: true, value: formValues.value, onChange: secretValueChanged, rows: 5 }), validationResult.value === false && (_jsx(FormControl.Validation, { variant: "error", children: "Value must have more than 1 and less than 4096 characters." }))] }), _jsx(Button, { variant: "primary", disabled: !validationResult.value ||
                                     !validationResult.name ||
                                     !validationResult.description, sx: { marginTop: 2 }, onClick: e => {
                                     e.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@datalayer/core",
-    "version": "1.2.18",
+    "version": "1.2.19",
     "type": "module",
     "workspaces": [
         ".",