@datalayer/core 1.0.21 → 1.0.22

package/lib/components/principal/PrincipalSwitcherMenu.js

@@ -0,0 +1,287 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+import { useEffect, useMemo, useState } from 'react';
+import { ActionList, ActionMenu, Box, Text } from '@primer/react';
+import { OrganizationIcon, PeopleIcon, PersonIcon, } from '@primer/octicons-react';
+import { useCache, useAuthorization } from '../../hooks/index.js';
+import { useCoreStore } from '../../state/index.js';
+import { useIAMStore } from '../../state/substates/index.js';
+import { memberships as fetchMemberships } from '../../api/iam/profile.js';
+import { usePrincipalStore } from '../../hooks/usePrincipalStore.js';
+import { useBillableAccountStore } from '../../hooks/useBillableAccountStore.js';
+import { useSelectedPrincipal } from '../../hooks/useSelectedPrincipal.js';
+import { formatFriendlyHandle } from '../../utils/Handles.js';
+function truncatePrincipalLabel(label, maxChars) {
+    const trimmed = (label || '').trim();
+    if (!trimmed) {
+        return '';
+    }
+    if (trimmed.length <= maxChars) {
+        return trimmed;
+    }
+    return `${trimmed.slice(0, Math.max(0, maxChars - 1))}…`;
+}
+/**
+ * PrincipalSwitcherMenu — the *only* component allowed to write to the
+ * principal store and the billable account store. It keeps both stores in
+ * sync per the rule:
+ *   - selecting a user/org principal → billable account = same user/org
+ *   - selecting a team principal     → billable account = the team's parent org
+ */
+export function PrincipalSwitcherMenu({ maxLabelChars = 48, fullWidth = true, showClosedBorder = true, }) {
+    const { user, token, iamRunUrl } = useIAMStore();
+    const { configuration } = useCoreStore();
+    const { checkIsPlatformAdmin } = useAuthorization();
+    const { useUserOrganizations } = useCache();
+    const organizationsQuery = useUserOrganizations();
+    const organizations = organizationsQuery.data || [];
+    const isOrganizationsLoading = organizationsQuery.isLoading;
+    const isPlatformAdmin = user ? checkIsPlatformAdmin(user) : false;
+    const [teams, setTeams] = useState([]);
+    const [teamsLoading, setTeamsLoading] = useState(false);
+    const selectUserPrincipal = usePrincipalStore(state => state.selectUserPrincipal);
+    const selectOrganizationPrincipal = usePrincipalStore(state => state.selectOrganizationPrincipal);
+    const selectTeamPrincipal = usePrincipalStore(state => state.selectTeamPrincipal);
+    const setBillableAccount = useBillableAccountStore(state => state.setBillableAccount);
+    const { selectedPrincipalKind, selectedPrincipalUid, selectedPrincipalHandle, selectedTeamParentOrganizationHandle, } = useSelectedPrincipal();
+    const personalUid = user?.uid || user?.id || '';
+    const personalHandle = user?.handle || '';
+    const selectUser = (uid, handle) => {
+        selectUserPrincipal(uid, handle);
+        setBillableAccount({ kind: 'user', uid, handle });
+    };
+    const selectOrganization = (uid, handle) => {
+        selectOrganizationPrincipal(uid, handle);
+        setBillableAccount({ kind: 'organization', uid, handle });
+    };
+    const selectTeam = (team, orgHandle) => {
+        if (!team.organizationUid) {
+            return;
+        }
+        selectTeamPrincipal({
+            teamUid: team.uid,
+            teamHandle: team.handle,
+            organizationUid: team.organizationUid,
+            organizationHandle: orgHandle,
+        });
+        setBillableAccount({
+            kind: 'organization',
+            uid: team.organizationUid,
+            handle: orgHandle,
+        });
+    };
+    const getOrganizationUid = (organization) => String(organization?.uid || organization?.id || '');
+    const selectedOrganization = useMemo(() => organizations.find((org) => getOrganizationUid(org) === selectedPrincipalUid), [organizations, selectedPrincipalUid]);
+    const selectedTeam = useMemo(() => teams.find(team => team.uid === selectedPrincipalUid), [teams, selectedPrincipalUid]);
+    useEffect(() => {
+        let cancelled = false;
+        const loadTeams = async () => {
+            if (!token) {
+                setTeams([]);
+                return;
+            }
+            setTeamsLoading(true);
+            try {
+                const baseUrl = iamRunUrl || configuration.iamRunUrl;
+                const response = await fetchMemberships(token, baseUrl);
+                const rawMemberships = Array.isArray(response?.memberships)
+                    ? response.memberships
+                    : [];
+                const mappedTeams = rawMemberships
+                    .filter((membership) => membership?.type === 'team')
+                    .map((membership) => ({
+                    uid: String(membership?.uid || membership?.id || '').trim(),
+                    handle: String(membership?.handle || '').trim(),
+                    organizationUid: String(membership?.organization_uid || '').trim() || undefined,
+                    organizationHandle: String(membership?.organization_handle ||
+                        membership?.organization?.handle ||
+                        '').trim() || undefined,
+                }))
+                    .filter((team) => Boolean(team.uid && team.handle));
+                if (!cancelled) {
+                    setTeams(mappedTeams);
+                }
+            }
+            catch {
+                if (!cancelled) {
+                    setTeams([]);
+                }
+            }
+            finally {
+                if (!cancelled) {
+                    setTeamsLoading(false);
+                }
+            }
+        };
+        void loadTeams();
+        return () => {
+            cancelled = true;
+        };
+    }, [token, iamRunUrl, configuration.iamRunUrl]);
+    useEffect(() => {
+        if (!personalUid || !personalHandle) {
+            return;
+        }
+        if (!selectedPrincipalUid) {
+            selectUser(personalUid, personalHandle);
+            return;
+        }
+        if (selectedPrincipalKind === 'organization' && isOrganizationsLoading) {
+            return;
+        }
+        if (selectedPrincipalKind === 'organization' && !selectedOrganization) {
+            selectUser(personalUid, personalHandle);
+            return;
+        }
+        if (selectedPrincipalKind === 'team' && teamsLoading) {
+            return;
+        }
+        if (selectedPrincipalKind === 'team' && !selectedTeam) {
+            selectUser(personalUid, personalHandle);
+            return;
+        }
+        if (selectedPrincipalKind === 'user' &&
+            selectedPrincipalUid !== personalUid) {
+            selectUser(personalUid, personalHandle);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        personalUid,
+        personalHandle,
+        selectedPrincipalUid,
+        selectedPrincipalKind,
+        isOrganizationsLoading,
+        teamsLoading,
+        selectedOrganization,
+        selectedTeam,
+    ]);
+    const effectiveHandle = selectedPrincipalKind === 'organization'
+        ? selectedOrganization?.handle ||
+            selectedPrincipalHandle ||
+            personalHandle
+        : selectedPrincipalKind === 'team'
+            ? selectedTeam?.handle || selectedPrincipalHandle || personalHandle
+            : personalHandle;
+    const organizationHandleByUid = useMemo(() => {
+        const byUid = new Map();
+        for (const organization of organizations) {
+            const uid = getOrganizationUid(organization);
+            const handle = String(organization?.handle || '').trim();
+            if (uid && handle) {
+                byUid.set(uid, handle);
+            }
+        }
+        return byUid;
+    }, [organizations]);
+    const resolveTeamOrganizationHandle = (team) => {
+        if (!team) {
+            return '';
+        }
+        const directHandle = String(team.organizationHandle || '').trim();
+        if (directHandle) {
+            return directHandle;
+        }
+        const fromOrganizations = team.organizationUid
+            ? organizationHandleByUid.get(team.organizationUid) || ''
+            : '';
+        return fromOrganizations.trim();
+    };
+    const effectiveOrganizationHandle = selectedPrincipalKind === 'team'
+        ? resolveTeamOrganizationHandle(selectedTeam) ||
+            selectedTeamParentOrganizationHandle ||
+            ''
+        : '';
+    const selectedPrincipalLabel = selectedPrincipalKind === 'team'
+        ? `@${formatFriendlyHandle(effectiveOrganizationHandle || personalHandle || 'organization')}/${formatFriendlyHandle(effectiveHandle)}`
+        : `@${formatFriendlyHandle(effectiveHandle)}`;
+    const selectedPrincipalLabelClosed = truncatePrincipalLabel(selectedPrincipalLabel, maxLabelChars);
+    const isCurrentUserPrincipal = selectedPrincipalKind === 'user';
+    const selectedItemSx = {
+        bg: 'accent.subtle',
+        borderColor: 'accent.muted',
+        color: 'accent.fg',
+        fontWeight: 'semibold',
+    };
+    const adminBadgeSx = {
+        ml: 'auto',
+        px: 1,
+        py: '2px',
+        borderRadius: 999,
+        bg: 'attention.subtle',
+        color: 'attention.fg',
+        fontSize: 0,
+        fontWeight: 'semibold',
+        lineHeight: 1.2,
+        textTransform: 'lowercase',
+    };
+    return (_jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Box, { as: "button", type: "button", "aria-label": "Switch principal", sx: {
+                        width: fullWidth ? '100%' : 'auto',
+                        p: 2,
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 2,
+                        bg: showClosedBorder ? 'canvas.subtle' : 'transparent',
+                        border: showClosedBorder ? '1px solid' : 'none',
+                        borderColor: showClosedBorder ? 'border.default' : 'transparent',
+                        borderRadius: 2,
+                        cursor: 'pointer',
+                        textAlign: 'left',
+                    }, children: [_jsx(Box, { sx: {
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                                color: 'fg.muted',
+                                flexShrink: 0,
+                            }, children: selectedPrincipalKind === 'organization' ? (_jsx(OrganizationIcon, { size: 16 })) : selectedPrincipalKind === 'team' ? (_jsx(PeopleIcon, { size: 16 })) : (_jsx(PersonIcon, { size: 16 })) }), _jsx(Box, { sx: { minWidth: 0, flex: 1 }, children: _jsx(Text, { sx: {
+                                    display: 'block',
+                                    color: 'accent.fg',
+                                    fontWeight: 'semibold',
+                                    fontSize: 1,
+                                    whiteSpace: 'nowrap',
+                                    overflow: 'hidden',
+                                    textOverflow: 'ellipsis',
+                                    maxWidth: '100%',
+                                }, children: selectedPrincipalLabelClosed }) }), isPlatformAdmin && isCurrentUserPrincipal ? (_jsx(Box, { sx: {
+                                ml: 'auto',
+                                flexShrink: 0,
+                                display: 'inline-flex',
+                                alignItems: 'center',
+                            }, children: _jsx(Box, { as: "span", sx: adminBadgeSx, children: "admin" }) })) : null] }) }), _jsx(ActionMenu.Overlay, { width: "medium", children: _jsxs(ActionList, { children: [_jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "User" }), _jsxs(ActionList.Item, { disabled: isCurrentUserPrincipal, selected: isCurrentUserPrincipal, sx: isCurrentUserPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                                        if (isCurrentUserPrincipal) {
+                                            return;
+                                        }
+                                        if (personalUid && personalHandle) {
+                                            selectUser(personalUid, personalHandle);
+                                        }
+                                    }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PersonIcon, {}) }), "@", formatFriendlyHandle(personalHandle || 'me'), isPlatformAdmin ? (_jsx(ActionList.TrailingVisual, { children: _jsx(Box, { as: "span", sx: adminBadgeSx, children: "admin" }) })) : null] })] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Organizations" }), organizations.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No organizations" })) : (organizations.map((organization) => {
+                                    const organizationUid = getOrganizationUid(organization);
+                                    const isCurrentOrganizationPrincipal = selectedPrincipalKind === 'organization' &&
+                                        selectedPrincipalUid === organizationUid;
+                                    return (_jsxs(ActionList.Item, { disabled: isCurrentOrganizationPrincipal, selected: isCurrentOrganizationPrincipal, sx: isCurrentOrganizationPrincipal
+                                            ? selectedItemSx
+                                            : undefined, onSelect: () => {
+                                            if (isCurrentOrganizationPrincipal) {
+                                                return;
+                                            }
+                                            if (organizationUid && organization.handle) {
+                                                selectOrganization(organizationUid, organization.handle);
+                                            }
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(OrganizationIcon, {}) }), "@", organization.handle] }, organizationUid));
+                                }))] }), _jsxs(ActionList.Group, { children: [_jsx(ActionList.GroupHeading, { children: "Teams" }), teams.length === 0 ? (_jsx(ActionList.Item, { disabled: true, children: "No teams" })) : (teams.map(team => {
+                                    const isCurrentTeamPrincipal = selectedPrincipalKind === 'team' &&
+                                        selectedPrincipalUid === team.uid;
+                                    const orgHandle = resolveTeamOrganizationHandle(team) ||
+                                        personalHandle ||
+                                        'organization';
+                                    return (_jsxs(ActionList.Item, { disabled: isCurrentTeamPrincipal, selected: isCurrentTeamPrincipal, sx: isCurrentTeamPrincipal ? selectedItemSx : undefined, onSelect: () => {
+                                            if (isCurrentTeamPrincipal) {
+                                                return;
+                                            }
+                                            selectTeam(team, orgHandle);
+                                        }, children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PeopleIcon, {}) }), "@", formatFriendlyHandle(orgHandle), "/", formatFriendlyHandle(team.handle)] }, team.uid));
+                                }))] })] }) })] }));
+}
+export default PrincipalSwitcherMenu;

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

@@ -0,0 +1,7 @@
+export * from './Principal';
+export * from './PrincipalAvatar';
+export * from './PrincipalBadge';
+export * from './PrincipalBanner';
+export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay';
+export type { PrincipalDetailsOverlayProps } from './PrincipalDetailsOverlay';
+export * from './PrincipalSwitcherMenu';

package/lib/components/principal/index.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2023-2025 Datalayer, Inc.
+ * Distributed under the terms of the Modified BSD License.
+ */
+export * from './Principal.js';
+export * from './PrincipalAvatar.js';
+export * from './PrincipalBadge.js';
+export * from './PrincipalBanner.js';
+export { buildPrincipalProfilePath, PrincipalDetailsOverlay, } from './PrincipalDetailsOverlay.js';
+export * from './PrincipalSwitcherMenu.js';

package/lib/components/sharing/ShareAccessComponent.d.ts

@@ -0,0 +1,18 @@
+export type ItemAccessLevel = 'view' | 'update' | 'execute';
+type PrincipalKind = 'user' | 'team' | 'organization';
+export type ShareAccessComponentProps = {
+    isOpen: boolean;
+    requestUrl?: string;
+    resourceLabel: string;
+    resourceName?: string;
+    resourceDescription?: string;
+    onSharingAccessRestrictedChange?: (restricted: boolean, message?: string) => void;
+    defaultAccessLevel?: ItemAccessLevel;
+    principalKinds?: readonly PrincipalKind[];
+    displayMode?: 'dialog' | 'inline';
+    onClose: () => void;
+};
+export declare function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, onSharingAccessRestrictedChange, defaultAccessLevel, principalKinds, displayMode, onClose, }: ShareAccessComponentProps): JSX.Element | null;
+export default ShareAccessComponent;
+export declare const ShareAccessDialog: typeof ShareAccessComponent;
+export type ShareAccessDialogProps = ShareAccessComponentProps;