@datalayer/core 1.0.25 → 1.1.43

package/lib/components/sharing/ShareAccessComponent.js

@@ -4,7 +4,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
  * Distributed under the terms of the Modified BSD License.
  */
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { KeyIcon, PersonIcon, OrganizationIcon, PeopleIcon, } from '@primer/octicons-react';
+import { ChevronDownIcon, ChevronUpIcon, KeyIcon, PersonIcon, OrganizationIcon, PeopleIcon, } from '@primer/octicons-react';
 import { Box } from '@datalayer/primer-addons';
 import { ActionList, ActionMenu, Button, Dialog, Label, Spinner, Text, TextInput, } from '@primer/react';
 import { useToast } from '../../hooks/index.js';
@@ -16,7 +16,7 @@ import { PrincipalBadge } from '../principal/PrincipalBadge.js';
 // ---------------------------------------------------------------------------
 const ACCESS_LEVELS = ['view', 'update', 'execute'];
 const DEFAULT_PRINCIPAL_KINDS = [
-    'user',
+    'personal',
     'team',
     'organization',
 ];
@@ -44,7 +44,7 @@ function normalizePrincipalKind(kindRaw) {
     if (kind === 'organization' || kind === 'org') {
         return 'organization';
     }
-    return 'user';
+    return 'personal';
 }
 function toTitleCase(value) {
     if (!value) {
@@ -78,7 +78,30 @@ function ensurePrincipalDisplayName(kind, ...candidates) {
             return candidate.trim();
         }
     }
-    return kind === 'organization' ? 'Organization' : 'Principal';
+    if (kind === 'organization') {
+        return 'Organization';
+    }
+    if (kind === 'team') {
+        return 'Team';
+    }
+    return 'Principal';
+}
+function formatPrincipalHandle(kind, handle, accountHandle) {
+    const normalizedHandle = String(handle || '').trim();
+    const normalizedAccountHandle = String(accountHandle || '').trim();
+    if (!normalizedHandle) {
+        return '';
+    }
+    if (kind === 'team') {
+        if (normalizedHandle.includes('/')) {
+            return `@${normalizedHandle}`;
+        }
+        if (normalizedAccountHandle) {
+            return `@${normalizedAccountHandle}/${normalizedHandle}`;
+        }
+        return `@${normalizedHandle}`;
+    }
+    return `@${normalizedHandle}`;
 }
 function isSharingAuthorizationMessage(message) {
     const normalized = (message || '').trim().toLowerCase();
@@ -139,7 +162,7 @@ function extractOwnerPrincipals(payload) {
         if (typeof entry === 'string') {
             const uid = entry.trim();
             return uid
-                ? { kind: 'user', uid, handle: uid, displayName: uid }
+                ? { kind: 'personal', uid, handle: uid, displayName: uid }
                 : null;
         }
         const uid = pickFirstString(entry?.uid, entry?.owner_uid, entry?.id);
@@ -169,7 +192,7 @@ function extractOwnerPrincipals(payload) {
         }
         const normalizedUid = uid.trim();
         return {
-            kind: 'user',
+            kind: 'personal',
             uid: normalizedUid,
             handle: normalizedUid,
             displayName: normalizedUid,
@@ -201,7 +224,7 @@ function emptyAccessByLevel() {
     };
 }
 function bucketFor(kind) {
-    return kind === 'user'
+    return kind === 'personal'
         ? 'userUids'
         : kind === 'team'
             ? 'teamUids'
@@ -255,7 +278,7 @@ function buildAclEntries(state, principalKinds) {
         }
     };
     for (const level of ACCESS_LEVELS) {
-        state[level].userUids.forEach(uid => upsert('user', uid, level));
+        state[level].userUids.forEach(uid => upsert('personal', uid, level));
         state[level].teamUids.forEach(uid => upsert('team', uid, level));
         state[level].organizationUids.forEach(uid => upsert('organization', uid, level));
     }
@@ -315,11 +338,11 @@ function OwnerPrincipalRow({ ownerPrincipal, cache, showAvatarSkeleton = false,
         : '';
     const resolvedHandle = safeCachedHandle || safeOwnerHandle || ownerPrincipal.accountHandle;
     const resolvedAccountHandle = entry.accountHandle || ownerPrincipal.accountHandle;
-    const resolvedDisplayName = ensurePrincipalDisplayName(ownerPrincipal.kind, ownerPrincipal.displayName, entry.displayName, resolvedHandle, ownerPrincipal.handle, ownerPrincipal.accountHandle, ownerPrincipal.uid);
+    const resolvedDisplayName = ensurePrincipalDisplayName(ownerPrincipal.kind, ownerPrincipal.displayName, entry.displayName, formatPrincipalHandle(ownerPrincipal.kind, resolvedHandle, resolvedAccountHandle), resolvedHandle, ownerPrincipal.handle, ownerPrincipal.accountHandle, ownerPrincipal.uid);
     const resolvedAvatarUrl = ownerPrincipal.avatarUrl || entry.avatarUrl;
     const resolvedOrigin = ownerPrincipal.origin ||
         entry.origin ||
-        (ownerPrincipal.kind === 'user' ? 'Datalayer' : undefined);
+        (ownerPrincipal.kind === 'personal' ? 'Datalayer' : undefined);
     return (_jsx(Box, { sx: {
             display: 'inline-flex',
             alignItems: 'center',
@@ -333,14 +356,14 @@ function OwnerPrincipalRow({ ownerPrincipal, cache, showAvatarSkeleton = false,
                 accountHandle: resolvedAccountHandle,
                 avatarUrl: resolvedAvatarUrl,
                 origin: resolvedOrigin,
-            }, showPrincipalLabel: false, showApplyingToText: false, showOriginLabel: ownerPrincipal.kind === 'user', isAdmin: isPlatformAdmin, sx: { px: 0, py: 0, border: 'none', bg: 'transparent' } })) }));
+            }, showPrincipalLabel: false, showApplyingToText: false, showOriginLabel: ownerPrincipal.kind === 'personal', isAdmin: isPlatformAdmin, sx: { px: 0, py: 0, border: 'none', bg: 'transparent' } })) }));
 }
 function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatformAdmin, }) {
     const cached = cache[principalKey(entry.kind, entry.uid)] || {};
     const cachedHandle = cached.handle;
     const safeCachedHandle = cachedHandle && cachedHandle !== entry.uid ? cachedHandle : '';
     const resolvedHandle = safeCachedHandle || cached.accountHandle;
-    const resolvedDisplayName = ensurePrincipalDisplayName(entry.kind, cached.displayName, resolvedHandle, entry.uid);
+    const resolvedDisplayName = ensurePrincipalDisplayName(entry.kind, cached.displayName, formatPrincipalHandle(entry.kind, resolvedHandle, cached.accountHandle), resolvedHandle, entry.uid);
     return (_jsx(Box, { sx: {
             display: 'inline-flex',
             alignItems: 'center',
@@ -354,12 +377,12 @@ function AccessPrincipalRow({ entry, cache, showAvatarSkeleton = false, isPlatfo
                 accountHandle: cached.accountHandle,
                 avatarUrl: cached.avatarUrl,
                 origin: cached.origin || 'Datalayer',
-            }, showPrincipalLabel: false, showApplyingToText: false, showOriginLabel: entry.kind === 'user', isAdmin: isPlatformAdmin, sx: { px: 0, py: 0, border: 'none', bg: 'transparent' } })) }));
+            }, showPrincipalLabel: false, showApplyingToText: false, showOriginLabel: entry.kind === 'personal', isAdmin: isPlatformAdmin, sx: { px: 0, py: 0, border: 'none', bg: 'transparent' } })) }));
 }
 // ---------------------------------------------------------------------------
 // Main component.
 // ---------------------------------------------------------------------------
-export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
+export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resourceName, resourceDescription: _resourceDescription, expanded = false, onSharingAccessRestrictedChange, defaultAccessLevel = 'view', principalKinds = DEFAULT_PRINCIPAL_KINDS, displayMode = 'dialog', onClose, }) {
     void _resourceDescription;
     const { token, user } = useIAMStore();
     const { configuration } = useCoreStore();
@@ -368,6 +391,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     // ----- State -----
     const [isLoading, setIsLoading] = useState(false);
     const [isSaving, setIsSaving] = useState(false);
+    const [isExpanded, setIsExpanded] = useState(expanded);
     const [selectedAccessLevel, setSelectedAccessLevel] = useState(defaultAccessLevel);
     const [access, setAccess] = useState(emptyAccessByLevel());
     const [ownerPrincipals, setOwnerPrincipals] = useState([]);
@@ -409,8 +433,8 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     ]);
     // ----- Derived -----
     const canRequest = Boolean(requestUrl && token);
-    const canSearchPrincipals = Boolean(configuration?.iamRunUrl && token);
-    const iamRunUrl = configuration?.iamRunUrl;
+    const canSearchPrincipals = Boolean(configuration?.iamUrl && token);
+    const iamUrl = configuration?.iamUrl;
     const principalKindsSet = useMemo(() => new Set(principalKinds), [principalKinds]);
     const principalKindsKey = useMemo(() => [...principalKinds].sort().join('|'), [principalKinds]);
     const aclEntries = useMemo(() => buildAclEntries(access, principalKinds), [access, principalKinds]);
@@ -530,7 +554,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                         handle: owner.handle || owner.uid,
                         avatarUrl: owner.avatarUrl,
                         accountHandle: owner.accountHandle,
-                        origin: owner.kind === 'user' ? owner.origin : undefined,
+                        origin: owner.kind === 'personal' ? owner.origin : undefined,
                     });
                 });
                 setAccess(hydrated);
@@ -568,14 +592,14 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     ]);
     // ----- Fetch shareable principals on open -----
     useEffect(() => {
-        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+        if (!isOpen || !canSearchPrincipals || !iamUrl || !token) {
             return;
         }
         let cancelled = false;
         const run = async () => {
             setIsLoadingShareable(true);
             try {
-                const response = await fetch(`${iamRunUrl}/api/iam/v1/principals/shareable`, {
+                const response = await fetch(`${iamUrl}/api/iam/v1/principals/shareable`, {
                     method: 'GET',
                     headers: {
                         'Content-Type': 'application/json',
@@ -618,11 +642,13 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                 setShareablePrincipals(mapped);
                 mapped.forEach(principal => {
                     mergePrincipalCacheEntry(principal.kind, principal.uid, {
-                        displayName: principal.name || principal.handle,
+                        displayName: principal.name ||
+                            formatPrincipalHandle(principal.kind, principal.handle, principal.organizationHandle || undefined) ||
+                            principal.handle,
                         handle: principal.handle,
                         avatarUrl: principal.avatarUrl || undefined,
                         accountHandle: principal.organizationHandle || undefined,
-                        origin: principal.kind === 'user' ? 'Datalayer' : undefined,
+                        origin: principal.kind === 'personal' ? 'Datalayer' : undefined,
                     });
                 });
             }
@@ -645,7 +671,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         return () => {
             cancelled = true;
         };
-    }, [isOpen, canSearchPrincipals, iamRunUrl, token, mergePrincipalCacheEntry]);
+    }, [isOpen, canSearchPrincipals, iamUrl, token, mergePrincipalCacheEntry]);
     // ----- Debounce search query -----
     useEffect(() => {
         const timeout = window.setTimeout(() => {
@@ -657,7 +683,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     }, [searchQuery]);
     // ----- Run search against /principals/search -----
     useEffect(() => {
-        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+        if (!isOpen || !canSearchPrincipals || !iamUrl || !token) {
             setSearchResults([]);
             return;
         }
@@ -678,7 +704,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                 let response;
                 let payload;
                 try {
-                    response = await fetch(`${iamRunUrl}/api/iam/v1/principals/search`, {
+                    response = await fetch(`${iamUrl}/api/iam/v1/principals/search`, {
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json',
@@ -726,7 +752,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                     const origin = normalizeUserOrigin(pickFirstString(entry?.origin, entry?.origin_s, entry?.origin_t));
                     const avatarUrl = pickFirstString(entry?.avatar_url_s, entry?.avatarUrl, entry?.avatar_url);
                     return {
-                        kind: 'user',
+                        kind: 'personal',
                         uid,
                         handle: handle || uid,
                         displayName: displayName || handle || uid,
@@ -746,7 +772,10 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                         kind: 'team',
                         uid,
                         handle: handle || uid,
-                        displayName: pickFirstString(entry?.name_t, entry?.name) || handle || uid,
+                        displayName: pickFirstString(entry?.name_t, entry?.name) ||
+                            formatPrincipalHandle('team', handle || uid, pickFirstString(entry?.organization_handle_s, entry?.organizationHandle, entry?.organization_handle) || undefined) ||
+                            handle ||
+                            uid,
                         accountHandle: pickFirstString(entry?.organization_handle_s, entry?.organizationHandle, entry?.organization_handle) || undefined,
                     };
                 })
@@ -762,7 +791,10 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                         kind: 'organization',
                         uid,
                         handle: handle || uid,
-                        displayName: pickFirstString(entry?.name_t, entry?.name) || handle || uid,
+                        displayName: pickFirstString(entry?.name_t, entry?.name) ||
+                            formatPrincipalHandle('organization', handle || uid) ||
+                            handle ||
+                            uid,
                     };
                 })
                     .filter(Boolean);
@@ -777,7 +809,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                         handle: result.handle,
                         avatarUrl: result.avatarUrl,
                         accountHandle: result.accountHandle,
-                        origin: result.kind === 'user' ? result.origin : undefined,
+                        origin: result.kind === 'personal' ? result.origin : undefined,
                     });
                 });
                 setSearchResults(filtered);
@@ -805,7 +837,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     }, [
         isOpen,
         canSearchPrincipals,
-        iamRunUrl,
+        iamUrl,
         token,
         normalizedDebouncedSearch,
         principalKindsKey,
@@ -815,16 +847,16 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     ]);
     // ----- Hydrate ACL user uids in bulk -----
     useEffect(() => {
-        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+        if (!isOpen || !canSearchPrincipals || !iamUrl || !token) {
             return;
         }
         const userUids = Array.from(new Set([
             ...aclEntries
-                .filter(e => e.kind === 'user')
+                .filter(e => e.kind === 'personal')
                 .map(e => e.uid)
                 .filter(Boolean),
             ...ownerPrincipals
-                .filter(o => o.kind === 'user')
+                .filter(o => o.kind === 'personal')
                 .map(o => o.uid)
                 .filter(Boolean),
         ]));
@@ -832,7 +864,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
             if (!uid || userHydrationMissesRef.current.has(uid)) {
                 return false;
             }
-            const cached = principalCache[principalKey('user', uid)] || {};
+            const cached = principalCache[principalKey('personal', uid)] || {};
             return (!cached.displayName ||
                 !cached.avatarUrl ||
                 !cached.origin ||
@@ -849,7 +881,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                 return acc;
             }, {}));
             try {
-                const response = await fetch(`${iamRunUrl}/api/iam/v1/users/bulk`, {
+                const response = await fetch(`${iamUrl}/api/iam/v1/users/bulk`, {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -881,7 +913,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                         handle;
                     const avatarUrl = pickFirstString(entry?.avatar_url_s, entry?.avatarUrl, entry?.avatar_url);
                     const origin = normalizeUserOrigin(pickFirstString(entry?.origin, entry?.origin_s, entry?.origin_t));
-                    mergePrincipalCacheEntry('user', uid, {
+                    mergePrincipalCacheEntry('personal', uid, {
                         displayName,
                         handle,
                         avatarUrl: avatarUrl || undefined,
@@ -910,7 +942,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     }, [
         isOpen,
         canSearchPrincipals,
-        iamRunUrl,
+        iamUrl,
         token,
         aclEntries,
         ownerPrincipals,
@@ -919,7 +951,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     ]);
     // ----- Hydrate ACL team uids individually -----
     useEffect(() => {
-        if (!isOpen || !canSearchPrincipals || !iamRunUrl || !token) {
+        if (!isOpen || !canSearchPrincipals || !iamUrl || !token) {
             return;
         }
         const unknownTeams = aclEntries.filter(entry => {
@@ -935,7 +967,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         let cancelled = false;
         void Promise.all(unknownTeams.map(async (entry) => {
             try {
-                const response = await fetch(`${iamRunUrl}/api/iam/v1/teams/${encodeURIComponent(entry.uid)}`, {
+                const response = await fetch(`${iamUrl}/api/iam/v1/teams/${encodeURIComponent(entry.uid)}`, {
                     method: 'GET',
                     headers: {
                         'Content-Type': 'application/json',
@@ -969,7 +1001,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     }, [
         isOpen,
         canSearchPrincipals,
-        iamRunUrl,
+        iamUrl,
         token,
         aclEntries,
         principalCache,
@@ -1125,12 +1157,17 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
     const groupedShareable = useMemo(() => {
         const filtered = shareablePrincipals.filter(p => principalKindsSet.has(p.kind));
         const selfUid = pickFirstString(user?.uid);
-        const self = filtered.filter(p => p.kind === 'user' && p.uid === selfUid);
-        const otherUsers = filtered.filter(p => p.kind === 'user' && p.uid !== selfUid);
+        const self = filtered.filter(p => p.kind === 'personal' && p.uid === selfUid);
+        const otherUsers = filtered.filter(p => p.kind === 'personal' && p.uid !== selfUid);
         const orgs = filtered.filter(p => p.kind === 'organization');
         const teams = filtered.filter(p => p.kind === 'team');
         return { self, otherUsers, orgs, teams };
     }, [shareablePrincipals, principalKindsSet, user?.uid]);
+    useEffect(() => {
+        if (isOpen) {
+            setIsExpanded(expanded);
+        }
+    }, [isOpen, expanded]);
     if (!isOpen) {
         return null;
     }
@@ -1143,7 +1180,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
         const alreadyAdded = hasPrincipal(access, selectedAccessLevel, principal.kind, principal.uid);
         const cached = principalCache[principalKey(principal.kind, principal.uid)] || {};
         const displayName = principal.name || cached.displayName || principal.handle || principal.uid;
-        const Icon = principal.kind === 'user'
+        const Icon = principal.kind === 'personal'
             ? PersonIcon
             : principal.kind === 'organization'
                 ? OrganizationIcon
@@ -1182,7 +1219,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                                         alignItems: 'center',
                                         gap: 1,
                                         flexWrap: 'wrap',
-                                    }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: displayName }), principal.kind === 'user' &&
+                                    }, children: [_jsx(Text, { sx: { fontWeight: 'semibold' }, children: displayName }), principal.kind === 'personal' &&
                                             user?.uid &&
                                             principal.uid === user.uid && (_jsx(Label, { size: "small", variant: "accent", children: "You" }))] }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: ["@", principal.handle, principal.kind === 'team' && principal.organizationHandle && (_jsxs(Text, { as: "span", sx: { color: 'fg.muted' }, children: [' · ', "org @", principal.organizationHandle] }))] })] })] }), _jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(Icon, { size: 14 }), alreadyAdded ? (_jsx(Label, { size: "small", variant: "success", children: "Added" })) : (_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Add" }))] })] }, principalKey(principal.kind, principal.uid)));
     };
@@ -1225,7 +1262,7 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                             alignItems: 'flex-start',
                             justifyContent: 'space-between',
                             gap: 2,
-                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), _jsxs(Box, { sx: {
+                        }, children: [_jsx(Box, { sx: { display: 'grid', gap: 1 }, children: _jsxs(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: ["Share ", resourceName || `this ${resourceLabel.toLowerCase()}`, ". Pick a principal below \u2014 they will be granted the selected access level."] }) }), _jsxs(ActionMenu, { children: [_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(ActionMenu.Anchor, { children: _jsxs(Button, { variant: "default", size: "small", leadingVisual: KeyIcon, disabled: isSaving || isReadOnly, children: ["Access: ", ACCESS_LEVEL_LABELS[selectedAccessLevel]] }) }), _jsx(Button, { variant: "invisible", size: "small", leadingVisual: isExpanded ? ChevronUpIcon : ChevronDownIcon, onClick: () => setIsExpanded(previous => !previous), "aria-label": isExpanded ? 'Shrink sharing details' : 'Expand sharing details', children: isExpanded ? 'Shrink details' : 'Expand details' })] }), _jsx(ActionMenu.Overlay, { width: "small", children: _jsx(ActionList, { selectionVariant: "single", children: ACCESS_LEVELS.map(level => (_jsx(ActionList.Item, { selected: selectedAccessLevel === level, onSelect: () => setSelectedAccessLevel(level), children: ACCESS_LEVEL_LABELS[level] }, level))) }) })] })] }), !isExpanded && (_jsxs(Box, { sx: {
                             px: 3,
                             py: 2,
                             borderRadius: 2,
@@ -1235,118 +1272,128 @@ export function ShareAccessComponent({ isOpen, requestUrl, resourceLabel, resour
                             bg: 'canvas.default',
                             display: 'grid',
                             gap: 1,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner" }), ownerPrincipals.length > 0 ? (_jsx(Box, { sx: { display: 'grid' }, children: ownerPrincipals.map((ownerPrincipal, index) => (_jsx(Box, { sx: {
-                                        py: 1,
-                                        borderTopWidth: index === 0 ? 0 : 1,
-                                        borderTopStyle: 'solid',
-                                        borderColor: 'border.subtle',
-                                    }, children: _jsx(OwnerPrincipalRow, { ownerPrincipal: ownerPrincipal, cache: principalCache, showAvatarSkeleton: ownerPrincipal.kind === 'user' &&
-                                            Boolean(hydratingUserUids[ownerPrincipal.uid]), isPlatformAdmin: isPlatformAdmin }) }, principalKey(ownerPrincipal.kind, ownerPrincipal.uid)))) })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner information is not available." }))] }), _jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderRadius: 2,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.default',
-                            display: 'grid',
-                            gap: 2,
-                        }, children: [_jsxs(Box, { sx: {
-                                    display: 'flex',
-                                    alignItems: 'center',
-                                    justifyContent: 'space-between',
-                                    gap: 2,
-                                }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&
-                                groupedShareable.self.length === 0 &&
-                                groupedShareable.otherUsers.length === 0 &&
-                                groupedShareable.orgs.length === 0 &&
-                                groupedShareable.teams.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals available to share with." })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [renderShareableGroup('You', groupedShareable.self), renderShareableGroup('Other users', groupedShareable.otherUsers), renderShareableGroup('Your organizations', groupedShareable.orgs), renderShareableGroup('Your teams', groupedShareable.teams)] }))] }), _jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderRadius: 2,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.subtle',
-                            bg: 'canvas.subtle',
-                            display: 'grid',
-                            gap: 1,
-                        }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Or search for any user, team, or organization" }), _jsxs(Box, { sx: { position: 'relative' }, ref: searchContainerRef, children: [_jsx(TextInput, { ref: searchInputRef, block: true, value: searchQuery, onChange: e => {
-                                            const next = e.target.value;
-                                            setSearchQuery(next);
-                                            setIsSearchOverlayOpen(next.trim().length > 0);
-                                        }, onFocus: () => {
-                                            if (searchQuery.trim().length > 0) {
-                                                setIsSearchOverlayOpen(true);
-                                            }
-                                        }, onKeyDown: e => {
-                                            if (e.key === 'Escape') {
-                                                e.preventDefault();
-                                                setIsSearchOverlayOpen(false);
-                                            }
-                                        }, placeholder: "Search by handle, name, or email", "aria-label": "Search principals", disabled: isSaving }), canShowSearchResults && (_jsx(Box, { sx: {
-                                            position: 'absolute',
-                                            top: 'calc(100% + 8px)',
-                                            left: 0,
-                                            right: 0,
-                                            zIndex: 100,
-                                            borderWidth: 1,
-                                            borderStyle: 'solid',
-                                            borderColor: 'border.default',
-                                            borderRadius: 2,
-                                            maxHeight: '220px',
-                                            overflowY: 'auto',
-                                            bg: 'canvas.overlay',
-                                            boxShadow: 'shadow.medium',
-                                        }, children: isSearching ? (_jsxs(Box, { sx: {
-                                                px: 3,
-                                                py: 2,
-                                                display: 'inline-flex',
-                                                alignItems: 'center',
-                                                gap: 2,
-                                            }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Searching\u2026" })] })) : searchResults.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals found." }) })) : (_jsx(ActionList, { children: searchResults.map(result => (_jsxs(ActionList.Item, { onSelect: () => handleSearchResultSelect(result), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PrincipalAvatar, { kind: result.kind, avatarUrl: result.avatarUrl, alt: result.displayName, size: 18 }) }), _jsxs(Box, { sx: {
-                                                            display: 'inline-flex',
-                                                            alignItems: 'center',
-                                                            gap: 1,
-                                                            flexWrap: 'wrap',
-                                                        }, children: [_jsx(Text, { children: result.displayName }), result.kind === 'user' && (_jsx(Label, { size: "small", variant: "secondary", children: result.origin ||
-                                                                    principalCache[principalKey('user', result.uid)]
-                                                                        ?.origin ||
-                                                                    'Datalayer' }))] }), _jsxs(ActionList.Description, { variant: "block", children: ["@", result.handle] })] }, principalKey(result.kind, result.uid)))) })) }))] })] }), _jsxs(Box, { sx: {
-                            px: 3,
-                            py: 2,
-                            borderRadius: 2,
-                            borderWidth: 1,
-                            borderStyle: 'solid',
-                            borderColor: 'border.default',
-                            bg: 'canvas.default',
-                            display: 'grid',
-                            gap: 1,
-                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Access Control List (ACL)" }), _jsx(Box, { sx: {
+                        }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Sharing details are collapsed." }), _jsxs(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: [aclEntries.length, " principal", aclEntries.length === 1 ? '' : 's', " currently granted access."] })] })), isExpanded && (_jsxs(_Fragment, { children: [_jsxs(Box, { sx: {
+                                    px: 3,
+                                    py: 2,
+                                    borderRadius: 2,
                                     borderWidth: 1,
                                     borderStyle: 'solid',
                                     borderColor: 'border.default',
+                                    bg: 'canvas.default',
+                                    display: 'grid',
+                                    gap: 1,
+                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner" }), ownerPrincipals.length > 0 ? (_jsx(Box, { sx: { display: 'grid' }, children: ownerPrincipals.map((ownerPrincipal, index) => (_jsx(Box, { sx: {
+                                                py: 1,
+                                                borderTopWidth: index === 0 ? 0 : 1,
+                                                borderTopStyle: 'solid',
+                                                borderColor: 'border.subtle',
+                                            }, children: _jsx(OwnerPrincipalRow, { ownerPrincipal: ownerPrincipal, cache: principalCache, showAvatarSkeleton: ownerPrincipal.kind === 'personal' &&
+                                                    Boolean(hydratingUserUids[ownerPrincipal.uid]), isPlatformAdmin: isPlatformAdmin }) }, principalKey(ownerPrincipal.kind, ownerPrincipal.uid)))) })) : (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Owner information is not available." }))] }), _jsxs(Box, { sx: {
+                                    px: 3,
+                                    py: 2,
                                     borderRadius: 2,
-                                    maxHeight: '220px',
-                                    overflowY: 'auto',
-                                    bg: 'canvas.subtle',
-                                }, children: aclEntries.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals shared yet." }) })) : (_jsx(Box, { sx: { display: 'grid' }, children: aclEntries.map(entry => (_jsxs(Box, { sx: {
-                                            px: 3,
-                                            py: 2,
+                                    borderWidth: 1,
+                                    borderStyle: 'solid',
+                                    borderColor: 'border.default',
+                                    bg: 'canvas.default',
+                                    display: 'grid',
+                                    gap: 2,
+                                }, children: [_jsxs(Box, { sx: {
                                             display: 'flex',
                                             alignItems: 'center',
                                             justifyContent: 'space-between',
                                             gap: 2,
-                                            borderTopWidth: 1,
-                                            borderTopStyle: 'solid',
-                                            borderColor: 'border.subtle',
-                                            '&:first-of-type': { borderTop: 'none' },
-                                        }, children: [_jsx(AccessPrincipalRow, { entry: entry, cache: principalCache, showAvatarSkeleton: entry.kind === 'user' &&
-                                                    Boolean(hydratingUserUids[entry.uid]), isPlatformAdmin: isPlatformAdmin }), _jsx(Box, { sx: {
+                                        }, children: [_jsx(Text, { sx: { fontSize: 1, fontWeight: 600 }, children: "Share with\u2026" }), isLoadingShareable && (_jsxs(Box, { sx: { display: 'inline-flex', alignItems: 'center', gap: 1 }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Loading\u2026" })] }))] }), !isLoadingShareable &&
+                                        groupedShareable.self.length === 0 &&
+                                        groupedShareable.otherUsers.length === 0 &&
+                                        groupedShareable.orgs.length === 0 &&
+                                        groupedShareable.teams.length === 0 ? (_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals available to share with." })) : (_jsxs(Box, { sx: { display: 'grid', gap: 2 }, children: [renderShareableGroup('You', groupedShareable.self), renderShareableGroup('Other users', groupedShareable.otherUsers), renderShareableGroup('Your organizations', groupedShareable.orgs), renderShareableGroup('Your teams', groupedShareable.teams)] }))] }), _jsxs(Box, { sx: {
+                                    px: 3,
+                                    py: 2,
+                                    borderRadius: 2,
+                                    borderWidth: 1,
+                                    borderStyle: 'solid',
+                                    borderColor: 'border.subtle',
+                                    bg: 'canvas.subtle',
+                                    display: 'grid',
+                                    gap: 1,
+                                }, children: [_jsx(Text, { sx: { fontSize: 0, color: 'fg.muted' }, children: "Or search for any user, team, or organization" }), _jsxs(Box, { sx: { position: 'relative' }, ref: searchContainerRef, children: [_jsx(TextInput, { ref: searchInputRef, block: true, value: searchQuery, onChange: e => {
+                                                    const next = e.target.value;
+                                                    setSearchQuery(next);
+                                                    setIsSearchOverlayOpen(next.trim().length > 0);
+                                                }, onFocus: () => {
+                                                    if (searchQuery.trim().length > 0) {
+                                                        setIsSearchOverlayOpen(true);
+                                                    }
+                                                }, onKeyDown: e => {
+                                                    if (e.key === 'Escape') {
+                                                        e.preventDefault();
+                                                        setIsSearchOverlayOpen(false);
+                                                    }
+                                                }, placeholder: "Search by handle, name, or email", "aria-label": "Search principals", disabled: isSaving }), canShowSearchResults && (_jsx(Box, { sx: {
+                                                    position: 'absolute',
+                                                    top: 'calc(100% + 8px)',
+                                                    left: 0,
+                                                    right: 0,
+                                                    zIndex: 100,
+                                                    borderWidth: 1,
+                                                    borderStyle: 'solid',
+                                                    borderColor: 'border.default',
+                                                    borderRadius: 2,
+                                                    maxHeight: '220px',
+                                                    overflowY: 'auto',
+                                                    bg: 'canvas.overlay',
+                                                    boxShadow: 'shadow.medium',
+                                                }, children: isSearching ? (_jsxs(Box, { sx: {
+                                                        px: 3,
+                                                        py: 2,
+                                                        display: 'inline-flex',
+                                                        alignItems: 'center',
+                                                        gap: 2,
+                                                    }, children: [_jsx(Spinner, { size: "small" }), _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Searching\u2026" })] })) : searchResults.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals found." }) })) : (_jsx(ActionList, { children: searchResults.map(result => (_jsxs(ActionList.Item, { onSelect: () => handleSearchResultSelect(result), children: [_jsx(ActionList.LeadingVisual, { children: _jsx(PrincipalAvatar, { kind: result.kind, avatarUrl: result.avatarUrl, alt: result.displayName, size: 18 }) }), _jsxs(Box, { sx: {
+                                                                    display: 'inline-flex',
+                                                                    alignItems: 'center',
+                                                                    gap: 1,
+                                                                    flexWrap: 'wrap',
+                                                                }, children: [_jsx(Text, { children: result.displayName }), result.kind === 'personal' && (_jsx(Label, { size: "small", variant: "secondary", children: result.origin ||
+                                                                            principalCache[principalKey('personal', result.uid)]
+                                                                                ?.origin ||
+                                                                            'Datalayer' }))] }), _jsxs(ActionList.Description, { variant: "block", children: ["@", result.handle] })] }, principalKey(result.kind, result.uid)))) })) }))] })] }), _jsxs(Box, { sx: {
+                                    px: 3,
+                                    py: 2,
+                                    borderRadius: 2,
+                                    borderWidth: 1,
+                                    borderStyle: 'solid',
+                                    borderColor: 'border.default',
+                                    bg: 'canvas.default',
+                                    display: 'grid',
+                                    gap: 1,
+                                }, children: [_jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "Access Control List (ACL)" }), _jsx(Box, { sx: {
+                                            borderWidth: 1,
+                                            borderStyle: 'solid',
+                                            borderColor: 'border.default',
+                                            borderRadius: 2,
+                                            maxHeight: '220px',
+                                            overflowY: 'auto',
+                                            bg: 'canvas.subtle',
+                                        }, children: aclEntries.length === 0 ? (_jsx(Box, { sx: { px: 3, py: 2 }, children: _jsx(Text, { sx: { fontSize: 1, color: 'fg.muted' }, children: "No principals shared yet." }) })) : (_jsx(Box, { sx: { display: 'grid' }, children: aclEntries.map(entry => (_jsxs(Box, { sx: {
+                                                    px: 3,
+                                                    py: 2,
                                                     display: 'flex',
-                                                    flexWrap: 'wrap',
-                                                    gap: 1,
-                                                    justifyContent: 'flex-end',
-                                                }, children: entry.levels.map(level => (_jsx(Label, { size: "small", variant: "secondary", children: ACCESS_LEVEL_LABELS[level] }, level))) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => removePrincipal(entry.kind, entry.uid), disabled: isSaving, children: "Remove" })] }, principalKey(entry.kind, entry.uid)))) })) })] })] }), _jsxs(Box, { sx: {
+                                                    alignItems: 'center',
+                                                    justifyContent: 'space-between',
+                                                    gap: 2,
+                                                    borderTopWidth: 1,
+                                                    borderTopStyle: 'solid',
+                                                    borderColor: 'border.subtle',
+                                                    '&:first-of-type': { borderTop: 'none' },
+                                                }, children: [_jsx(AccessPrincipalRow, { entry: entry, cache: principalCache, showAvatarSkeleton: entry.kind === 'personal' &&
+                                                            Boolean(hydratingUserUids[entry.uid]), isPlatformAdmin: isPlatformAdmin }), _jsx(Box, { sx: {
+                                                            display: 'flex',
+                                                            flexWrap: 'wrap',
+                                                            gap: 1,
+                                                            justifyContent: 'flex-end',
+                                                        }, children: entry.levels.map(level => (_jsx(Label, { size: "small", variant: "secondary", children: ACCESS_LEVEL_LABELS[level] }, level))) }), _jsx(Button, { size: "small", variant: "invisible", onClick: () => removePrincipal(entry.kind, entry.uid), disabled: isSaving, children: "Remove" })] }, principalKey(entry.kind, entry.uid)))) })) })] })] }))] }), _jsxs(Box, { sx: {
                     display: 'flex',
                     justifyContent: 'flex-end',
                     alignItems: 'center',