@datalayer/core 1.1.59 → 1.1.60

package/lib/components/avatars/UserAvatar.d.ts

@@ -16,7 +16,15 @@ export type UserAvatarProps = {
     fallbackBackground?: string;
     /** Optional icon foreground color override for the default avatar. */
     fallbackForeground?: string;
+    /**
+     * Whether a ring is drawn around the avatar.
+     *
+     * Off by default: an avatar sits on its own in most places, and a ring
+     * there is one more line for nothing. On, it gives the avatar an edge of
+     * its own against a background of the same colour — a profile page, a card.
+     */
+    ring?: boolean;
     className?: string;
 };
-export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, className, }: UserAvatarProps) => JSX.Element;
+export declare const UserAvatar: ({ avatarUrl, avatarIcon, size, square, iconSize, fallbackBackground, fallbackForeground, ring, className, }: UserAvatarProps) => JSX.Element;
 export default UserAvatar;

package/lib/components/avatars/UserAvatar.js

@@ -28,8 +28,18 @@ export function hasRealAvatar(url) {
     }
     return true;
 }
-export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, className, }) => {
+export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, iconSize, fallbackBackground, fallbackForeground, ring = false, className, }) => {
     const palette = useColorPalette();
+    /*
+     * The ring, as a shadow rather than a border.
+     *
+     * A border would take from the size asked for — the avatar is laid out
+     * against others of the same measure — so it is drawn just outside the
+     * edge instead, following whatever shape the avatar has.
+     */
+    const ringSx = ring
+        ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
+        : undefined;
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {
@@ -42,10 +52,11 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, i
                 justifyContent: 'center',
                 bg: fallbackBackground || 'accent.subtle',
                 '--datalayer-icon-fg': fallbackForeground || palette.primary,
+                ...ringSx,
             }, children: _jsx(SelectedIcon, { size: iconSize ?? Math.round(size * 0.62), themed: true, colormode: true }) }));
     }
     if (hasRealAvatar(avatarUrl)) {
-        return _jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size });
+        return (_jsx(DLAvatar, { className: className, square: square, src: avatarUrl, size: size, sx: ringSx }));
     }
     const resolvedIconSize = iconSize ?? Math.round(size * 0.48);
     return (_jsx(Box, { className: className, sx: {
@@ -57,6 +68,7 @@ export const UserAvatar = ({ avatarUrl, avatarIcon, size = 100, square = true, i
             alignItems: 'center',
             justifyContent: 'center',
             '--datalayer-icon-fg': fallbackForeground || palette.primary,
+            ...ringSx,
         }, children: _jsx(AlienIcon, { size: resolvedIconSize, themed: true, colormode: true }) }));
 };
 export default UserAvatar;

package/lib/components/collaboration/LiveEditorCollaborators.js

@@ -35,10 +35,22 @@ function collaboratorOfState(clientId, state) {
     if (!user) {
         return undefined;
     }
+    // Not a person: the presence of the collaboration service itself — the
+    // spacer joins its own rooms, wearing an `agent` field.
+    if (user.agent) {
+        return undefined;
+    }
     const name = user.display_name || user.displayName || user.name || user.username || '';
     if (!name) {
         return undefined;
     }
+    // Nobody either: the seed identity of a Jupyter Server that does not
+    // authenticate its users — "Anonymous Hegemone" and kin. A face for it
+    // would be one avatar too many, wearing the default fallback, next to the
+    // real identity written over it a moment later.
+    if (user.anonymous === true || /^anonymous(\s|$)/i.test(name)) {
+        return undefined;
+    }
     return {
         id: String(user.uid ?? user.id ?? user.username ?? clientId),
         name,

package/lib/components/labels/StatusLabels.d.ts

@@ -39,4 +39,13 @@ export declare function AdminLabel(props?: StatusLabelProps): JSX.Element;
  * The one that is taken when none is chosen — the default space of an account.
  */
 export declare function DefaultLabel(props?: StatusLabelProps): JSX.Element;
+/**
+ * Something announced and not there yet.
+ *
+ * A tone of its own, and deliberately not the accent an alpha wears: one says
+ * "you may try this, it may bite", the other "there is nothing to try". Read
+ * side by side in a navigation, two labels of one colour say the same thing
+ * about two entries that mean different things.
+ */
+export declare function SoonLabel(props?: StatusLabelProps): JSX.Element;
 export default StatusLabel;

package/lib/components/labels/StatusLabels.js

@@ -33,7 +33,24 @@ export function StatusLabel(props) {
     return (_jsx(Label, { variant: "secondary", size: size, sx: {
             textTransform: 'lowercase',
             lineHeight: 1.2,
-            ...TONES[tone],
+            /*
+             * The tone, under a doubled selector.
+             *
+             * Primer ships `NavList` and `ActionList` as CSS modules, and the
+             * colour they set on the contents of an item ties with the one Emotion
+             * generates for `sx` — so the same label came out in the colour of the
+             * navigation in one place and in its own colour in another, depending
+             * on which stylesheet happened to come last. `&&` raises the
+             * specificity enough that the tone always lands, wherever the label is
+             * put.
+             */
+            '&&': {
+                ...TONES[tone],
+                // The navigation of Primer colours the contents of its items, and
+                // its stylesheet is loaded after ours: a doubled selector was not
+                // enough on its own, so the colour of the tone is stated as final.
+                color: `${TONES[tone].color} !important`,
+            },
             ...sx,
         }, children: children }));
 }
@@ -58,4 +75,16 @@ export function DefaultLabel(props = {}) {
     const { children = 'default', ...rest } = props;
     return (_jsx(StatusLabel, { tone: "accent", ...rest, children: children }));
 }
+/**
+ * Something announced and not there yet.
+ *
+ * A tone of its own, and deliberately not the accent an alpha wears: one says
+ * "you may try this, it may bite", the other "there is nothing to try". Read
+ * side by side in a navigation, two labels of one colour say the same thing
+ * about two entries that mean different things.
+ */
+export function SoonLabel(props = {}) {
+    const { children = 'soon', ...rest } = props;
+    return (_jsx(StatusLabel, { tone: "neutral", ...rest, children: children }));
+}
 export default StatusLabel;

package/lib/components/principal/PrincipalAvatar.d.ts

@@ -7,7 +7,14 @@ export type PrincipalAvatarProps = {
     alt?: string;
     size?: number;
     square?: boolean;
+    /**
+     * Whether a ring is drawn around the avatar.
+     *
+     * Off by default, and the same option `UserAvatar` carries — a public
+     * profile wants the edge, a menu entry does not.
+     */
+    ring?: boolean;
     className?: string;
 };
-export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, className, }: PrincipalAvatarProps): JSX.Element;
+export declare function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size, square, ring, className, }: PrincipalAvatarProps): JSX.Element;
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalAvatar.js

@@ -10,8 +10,13 @@ import { getPrincipalAvatarIcon } from './PrincipalAppearance.js';
 function getFallbackIconSize(size) {
     return Math.max(12, Math.round(size * 0.62));
 }
-export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, square = false, className, }) {
+export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, square = false, ring = false, className, }) {
     const SelectedIcon = getPrincipalAvatarIcon(avatarIcon);
+    // Outside the edge rather than a border, so the avatar keeps the size it
+    // was asked for — see `UserAvatar`, which draws its ring the same way.
+    const ringSx = ring
+        ? { boxShadow: '0 0 0 1px var(--borderColor-default, currentColor)' }
+        : undefined;
     if (SelectedIcon) {
         return (_jsx(Box, { className: className, sx: {
                 width: size,
@@ -21,10 +26,11 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, s
                 justifyContent: 'center',
                 overflow: 'hidden',
                 borderRadius: square ? 2 : '50%',
+                ...ringSx,
             }, "aria-label": alt || `${kind} avatar`, children: _jsx(SelectedIcon, { size: size, themed: true, colormode: true }) }));
     }
     if (kind === 'personal') {
-        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, size: size, square: square, iconSize: getFallbackIconSize(size), className: className }));
+        return (_jsx(UserAvatar, { avatarUrl: avatarUrl, avatarIcon: avatarIcon, size: size, square: square, iconSize: getFallbackIconSize(size), ring: ring, className: className }));
     }
     const iconSize = getFallbackIconSize(size);
     const borderRadius = square ? 2 : '50%';
@@ -39,6 +45,7 @@ export function PrincipalAvatar({ kind, avatarUrl, avatarIcon, alt, size = 20, s
             borderRadius,
             border: '1px solid',
             borderColor: 'border.default',
+            ...ringSx,
         }, "aria-label": alt || (kind === 'team' ? 'Team' : 'Organization'), children: _jsx(Icon, { size: iconSize }) }));
 }
 export default PrincipalAvatar;

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -9,6 +9,7 @@ import { OrganizationIcon, PeopleIcon, PersonIcon, TriangleDownIcon, } from '@pr
 import { useCache, useAuthorization } from '../../hooks/index.js';
 import { useCoreStore } from '../../state/index.js';
 import { useIAMStore } from '../../state/substates/index.js';
+import { UserAvatar } from '../avatars/index.js';
 import { memberships as fetchMemberships } from '../../api/iam/profile.js';
 import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
 import { useBillingEntityStore } from '../../hooks/useBillingEntityStore.js';
@@ -284,7 +285,7 @@ export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, sh
                                             if (personalUid && personalHandle) {
                                                 selectUser(personalUid, personalHandle);
                                             }
-                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), _jsxs(Box, { as: "span", sx: {
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(UserAvatar, { avatarUrl: user?.avatarUrl, avatarIcon: user?.avatarIcon, size: 16, square: false, ring: true }) }), _jsxs(Box, { as: "span", sx: {
                                                     display: 'block',
                                                     minWidth: 0,
                                                     overflow: 'hidden',

package/lib/hooks/useUser.js

@@ -15,6 +15,28 @@ const isOnPublicPath = () => {
     }
     return isPublicPath(window.location?.pathname || '');
 };
+/**
+ * Whether these views are running inside JupyterLab.
+ *
+ * Read from the configuration JupyterLab writes into its own page, so nothing
+ * has to be imported from it: this module is used by the web application as
+ * well, which has no such configuration.
+ */
+const isInsideJupyterLab = () => {
+    if (typeof document === 'undefined') {
+        return false;
+    }
+    const config = document.getElementById('jupyter-config-data');
+    if (!config) {
+        return false;
+    }
+    try {
+        return JSON.parse(config.textContent || '{}').appName === 'JupyterLab';
+    }
+    catch {
+        return false;
+    }
+};
 export const useUser = (role) => {
     const { user } = useIAMStore();
     if (role) {
@@ -22,6 +44,10 @@ export const useUser = (role) => {
             if (isOnPublicPath()) {
                 return user;
             }
+            if (isInsideJupyterLab()) {
+                // Same reason as below: the router of these views answers this.
+                return user;
+            }
             console.warn(`User should have role ${role.handle} - Forcing navigation to login page...`);
             window.location.href = LOGIN_HREF;
             throw new Error(`User should have role ${role.handle}`);
@@ -31,6 +57,22 @@ export const useUser = (role) => {
         if (isOnPublicPath()) {
             return user;
         }
+        /*
+         * Inside JupyterLab, nobody leaves the page.
+         *
+         * `/login` is a page of the web application, at the root of the origin —
+         * and the origin of a JupyterLab is the Jupyter Server, which serves
+         * something else entirely there. Signing out of a view thus threw the user
+         * out of JupyterLab and onto a page of the server, which is not even a
+         * sign-in form.
+         *
+         * The views of Datalayer carry their own sign-in route under the base of
+         * JupyterLab, and their router shows it as soon as there is no user — so
+         * the way to reach it is to let that render, not to navigate away from it.
+         */
+        if (isInsideJupyterLab()) {
+            return user;
+        }
         console.warn('No user found... Forcing navigation to /login');
         window.location.href = LOGIN_HREF;
     }

package/lib/views/datasources/Datasources.js

@@ -63,6 +63,6 @@ export const Datasources = ({ newDatasourceRoute = '/new/datasource', datasource
                             gap: 3,
                             flexWrap: 'wrap',
                             mb: 4,
-                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind, showInlineLoadingIndicator: showInlineLoadingIndicator })] }) }) }));
+                        }, children: [_jsxs(Box, { children: [_jsx(Heading, { as: "h2", sx: { fontSize: 3, mb: 1 }, children: "Datasources" }), _jsx(Text, { sx: { color: 'fg.muted', fontSize: 1 }, children: "Configure external data providers available to your workspaces and agents." })] }), _jsx(Button, { size: "small", variant: "primary", leadingVisual: DatabaseIcon, onClick: e => navigate(newDatasourceRoute, e), children: "New Datasource" })] }), _jsx(DatasourcesTable, { datasourcesListRoute: datasourcesListRoute, principalUid: principalUid, principalKind: principalKind, showInlineLoadingIndicator: showInlineLoadingIndicator })] }) }) }));
 };
 export default Datasources;

package/package.json

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