570 lines
20 KiB
TypeScript
570 lines
20 KiB
TypeScript
import React, { useState, useEffect, useMemo, useCallback, useRef } from 'react';
|
|
import { useSpaceStore } from '../../stores/spaceStore';
|
|
import { permissionsToString, stringToPermissions } from '../../utils/permissions';
|
|
import { OverrideEntry, type PermissionDef } from './OverrideEntry';
|
|
import type { Role, MemberWithUser } from '@backspace/shared';
|
|
|
|
export interface Override {
|
|
targetType: string;
|
|
targetId: string;
|
|
allow: string;
|
|
deny: string;
|
|
}
|
|
|
|
export interface PermissionsEditorProps {
|
|
entityId: string;
|
|
spaceId: string;
|
|
instanceOrigin?: string;
|
|
permDefs: PermissionDef[];
|
|
getOverrides: () => Promise<Override[]>;
|
|
putOverride: (data: { targetType: string; targetId: string; allow: string; deny: string }) => Promise<unknown>;
|
|
deleteOverride: (targetType: string, targetId: string) => Promise<unknown>;
|
|
}
|
|
|
|
export function PermissionsEditor({
|
|
entityId,
|
|
spaceId,
|
|
instanceOrigin,
|
|
permDefs,
|
|
getOverrides,
|
|
putOverride,
|
|
deleteOverride,
|
|
}: PermissionsEditorProps) {
|
|
const roles = useSpaceStore((s) => s.roles);
|
|
const members = useSpaceStore((s) => s.members);
|
|
|
|
// Fetched overrides
|
|
const [overrides, setOverrides] = useState<Override[]>([]);
|
|
const [fetchError, setFetchError] = useState('');
|
|
|
|
// Draft state: keyed by "role:id" or "member:id"
|
|
const [draftOverrides, setDraftOverrides] = useState<Map<string, { allow: bigint; deny: bigint }>>(new Map());
|
|
const [pendingRemovals, setPendingRemovals] = useState<Set<string>>(new Set());
|
|
const [newOverrides, setNewOverrides] = useState<Map<string, { targetType: string; targetId: string; allow: bigint; deny: bigint }>>(new Map());
|
|
const [saving, setSaving] = useState(false);
|
|
const [saveError, setSaveError] = useState('');
|
|
|
|
// Add role/member dropdown state
|
|
const [showAddRole, setShowAddRole] = useState(false);
|
|
const [showAddMember, setShowAddMember] = useState(false);
|
|
const [memberSearch, setMemberSearch] = useState('');
|
|
|
|
// Refs + click-outside/Escape for dropdown menus
|
|
const roleDropdownRef = useRef<HTMLDivElement>(null);
|
|
const memberDropdownRef = useRef<HTMLDivElement>(null);
|
|
|
|
// Stable ref for the getOverrides callback to avoid re-fetch loops
|
|
const getOverridesRef = useRef(getOverrides);
|
|
getOverridesRef.current = getOverrides;
|
|
|
|
// Fetch overrides on mount and when entityId changes
|
|
const fetchOverrides = useCallback(() => {
|
|
setFetchError('');
|
|
getOverridesRef.current()
|
|
.then((data: Override[]) => {
|
|
setOverrides(data);
|
|
})
|
|
.catch((err: Error) => {
|
|
setFetchError(err.message || 'Failed to load overrides');
|
|
});
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
fetchOverrides();
|
|
}, [entityId, fetchOverrides]);
|
|
|
|
// Reset draft state when entityId changes
|
|
useEffect(() => {
|
|
setDraftOverrides(new Map());
|
|
setNewOverrides(new Map());
|
|
setPendingRemovals(new Set());
|
|
setSaveError('');
|
|
}, [entityId]);
|
|
|
|
useEffect(() => {
|
|
if (!showAddRole) return;
|
|
const handleMouseDown = (e: MouseEvent) => {
|
|
if (roleDropdownRef.current && !roleDropdownRef.current.contains(e.target as Node)) {
|
|
setShowAddRole(false);
|
|
}
|
|
};
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') setShowAddRole(false);
|
|
};
|
|
document.addEventListener('mousedown', handleMouseDown);
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleMouseDown);
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [showAddRole]);
|
|
|
|
useEffect(() => {
|
|
if (!showAddMember) return;
|
|
const handleMouseDown = (e: MouseEvent) => {
|
|
if (memberDropdownRef.current && !memberDropdownRef.current.contains(e.target as Node)) {
|
|
setShowAddMember(false);
|
|
setMemberSearch('');
|
|
}
|
|
};
|
|
const handleKeyDown = (e: KeyboardEvent) => {
|
|
if (e.key === 'Escape') {
|
|
setShowAddMember(false);
|
|
setMemberSearch('');
|
|
}
|
|
};
|
|
document.addEventListener('mousedown', handleMouseDown);
|
|
document.addEventListener('keydown', handleKeyDown);
|
|
return () => {
|
|
document.removeEventListener('mousedown', handleMouseDown);
|
|
document.removeEventListener('keydown', handleKeyDown);
|
|
};
|
|
}, [showAddMember]);
|
|
|
|
// Build map of existing overrides keyed by "role:id" or "member:id"
|
|
const existingOverrideMap = useMemo(() => {
|
|
const map = new Map<string, Override>();
|
|
for (const o of overrides) {
|
|
map.set(`${o.targetType}:${o.targetId}`, o);
|
|
}
|
|
return map;
|
|
}, [overrides]);
|
|
|
|
// Roles that already have overrides
|
|
const existingRoleIds = useMemo(() => {
|
|
const set = new Set<string>();
|
|
for (const o of overrides) {
|
|
if (o.targetType === 'role') set.add(o.targetId);
|
|
}
|
|
for (const [key] of newOverrides) {
|
|
if (key.startsWith('role:')) set.add(key.slice(5));
|
|
}
|
|
return set;
|
|
}, [overrides, newOverrides]);
|
|
|
|
// Members that already have overrides
|
|
const existingMemberIds = useMemo(() => {
|
|
const set = new Set<string>();
|
|
for (const o of overrides) {
|
|
if (o.targetType === 'member') set.add(o.targetId);
|
|
}
|
|
for (const [key] of newOverrides) {
|
|
if (key.startsWith('member:')) set.add(key.slice(7));
|
|
}
|
|
return set;
|
|
}, [overrides, newOverrides]);
|
|
|
|
// Available roles to add (not already in overrides)
|
|
const availableRoles = useMemo(() =>
|
|
roles.filter(r => !existingRoleIds.has(r.id) && !pendingRemovals.has(`role:${r.id}`)),
|
|
[roles, existingRoleIds, pendingRemovals]);
|
|
|
|
// Available members to add (not already in overrides), filtered by search
|
|
const availableMembers = useMemo(() => {
|
|
const filtered = members.filter(m =>
|
|
!existingMemberIds.has(m.userId) &&
|
|
!pendingRemovals.has(`member:${m.userId}`)
|
|
);
|
|
if (!memberSearch.trim()) return filtered.slice(0, 20);
|
|
const q = memberSearch.toLowerCase();
|
|
return filtered.filter(m =>
|
|
m.user.username.toLowerCase().includes(q) ||
|
|
(m.user.displayName?.toLowerCase().includes(q))
|
|
).slice(0, 20);
|
|
}, [members, existingMemberIds, pendingRemovals, memberSearch]);
|
|
|
|
// Get effective allow/deny for a key — considers drafts, new overrides, and originals
|
|
const getEffective = useCallback((key: string): { allow: bigint; deny: bigint } => {
|
|
if (newOverrides.has(key)) {
|
|
const n = newOverrides.get(key)!;
|
|
return { allow: n.allow, deny: n.deny };
|
|
}
|
|
if (draftOverrides.has(key)) return draftOverrides.get(key)!;
|
|
const orig = existingOverrideMap.get(key);
|
|
if (orig) return { allow: stringToPermissions(orig.allow), deny: stringToPermissions(orig.deny) };
|
|
return { allow: 0n, deny: 0n };
|
|
}, [draftOverrides, newOverrides, existingOverrideMap]);
|
|
|
|
// Update handler for an override entry
|
|
const handleChange = useCallback((key: string, allow: bigint, deny: bigint) => {
|
|
if (newOverrides.has(key)) {
|
|
setNewOverrides(prev => {
|
|
const next = new Map(prev);
|
|
const entry = next.get(key)!;
|
|
next.set(key, { ...entry, allow, deny });
|
|
return next;
|
|
});
|
|
} else {
|
|
setDraftOverrides(prev => {
|
|
const next = new Map(prev);
|
|
next.set(key, { allow, deny });
|
|
return next;
|
|
});
|
|
}
|
|
}, [newOverrides]);
|
|
|
|
// Remove handler
|
|
const handleRemove = useCallback((key: string) => {
|
|
if (newOverrides.has(key)) {
|
|
setNewOverrides(prev => {
|
|
const next = new Map(prev);
|
|
next.delete(key);
|
|
return next;
|
|
});
|
|
} else {
|
|
setPendingRemovals(prev => {
|
|
const next = new Set(prev);
|
|
next.add(key);
|
|
return next;
|
|
});
|
|
// Remove from drafts too
|
|
setDraftOverrides(prev => {
|
|
const next = new Map(prev);
|
|
next.delete(key);
|
|
return next;
|
|
});
|
|
}
|
|
}, [newOverrides]);
|
|
|
|
// Add role override
|
|
const handleAddRole = useCallback((roleId: string) => {
|
|
const key = `role:${roleId}`;
|
|
setNewOverrides(prev => {
|
|
const next = new Map(prev);
|
|
next.set(key, { targetType: 'role', targetId: roleId, allow: 0n, deny: 0n });
|
|
return next;
|
|
});
|
|
// If it was pending removal, unmark it
|
|
setPendingRemovals(prev => {
|
|
const next = new Set(prev);
|
|
next.delete(key);
|
|
return next;
|
|
});
|
|
setShowAddRole(false);
|
|
}, []);
|
|
|
|
// Add member override
|
|
const handleAddMember = useCallback((userId: string) => {
|
|
const key = `member:${userId}`;
|
|
setNewOverrides(prev => {
|
|
const next = new Map(prev);
|
|
next.set(key, { targetType: 'member', targetId: userId, allow: 0n, deny: 0n });
|
|
return next;
|
|
});
|
|
setPendingRemovals(prev => {
|
|
const next = new Set(prev);
|
|
next.delete(key);
|
|
return next;
|
|
});
|
|
setShowAddMember(false);
|
|
setMemberSearch('');
|
|
}, []);
|
|
|
|
const hasChanges = draftOverrides.size > 0 || newOverrides.size > 0 || pendingRemovals.size > 0;
|
|
|
|
const handleDiscard = useCallback(() => {
|
|
setDraftOverrides(new Map());
|
|
setNewOverrides(new Map());
|
|
setPendingRemovals(new Set());
|
|
setSaveError('');
|
|
}, []);
|
|
|
|
const handleSave = useCallback(async () => {
|
|
setSaving(true);
|
|
setSaveError('');
|
|
|
|
try {
|
|
const promises: Promise<unknown>[] = [];
|
|
|
|
// Delete removed overrides
|
|
for (const key of pendingRemovals) {
|
|
const parts = key.split(':');
|
|
promises.push(deleteOverride(parts[0]!, parts[1]!));
|
|
}
|
|
|
|
// Update modified existing overrides
|
|
for (const [key, { allow, deny }] of draftOverrides) {
|
|
if (pendingRemovals.has(key)) continue;
|
|
const parts = key.split(':');
|
|
promises.push(putOverride({
|
|
targetType: parts[0]!,
|
|
targetId: parts[1]!,
|
|
allow: permissionsToString(allow),
|
|
deny: permissionsToString(deny),
|
|
}));
|
|
}
|
|
|
|
// Create new overrides
|
|
for (const [, { targetType, targetId, allow, deny }] of newOverrides) {
|
|
promises.push(putOverride({
|
|
targetType,
|
|
targetId,
|
|
allow: permissionsToString(allow),
|
|
deny: permissionsToString(deny),
|
|
}));
|
|
}
|
|
|
|
const results = await Promise.allSettled(promises);
|
|
const failures = results.filter(r => r.status === 'rejected');
|
|
if (failures.length > 0) {
|
|
const first = failures[0] as PromiseRejectedResult;
|
|
setSaveError(first.reason?.message || `${failures.length} override(s) failed to save`);
|
|
}
|
|
|
|
// Reset draft state and re-fetch overrides
|
|
setDraftOverrides(new Map());
|
|
setNewOverrides(new Map());
|
|
setPendingRemovals(new Set());
|
|
fetchOverrides();
|
|
} catch (err) {
|
|
setSaveError(err instanceof Error ? err.message : 'Failed to save overrides');
|
|
} finally {
|
|
setSaving(false);
|
|
}
|
|
}, [draftOverrides, newOverrides, pendingRemovals, deleteOverride, putOverride, fetchOverrides]);
|
|
|
|
// Build ordered lists of role and member overrides
|
|
const roleOverrides = useMemo(() => {
|
|
const items: { key: string; role: Role; isNew: boolean }[] = [];
|
|
|
|
// Existing overrides (excluding pending removals)
|
|
for (const o of overrides) {
|
|
if (o.targetType !== 'role') continue;
|
|
const key = `role:${o.targetId}`;
|
|
if (pendingRemovals.has(key)) continue;
|
|
const role = roles.find(r => r.id === o.targetId);
|
|
if (!role) continue;
|
|
items.push({ key, role, isNew: false });
|
|
}
|
|
|
|
// New overrides
|
|
for (const [key, entry] of newOverrides) {
|
|
if (!key.startsWith('role:')) continue;
|
|
const role = roles.find(r => r.id === entry.targetId);
|
|
if (!role) continue;
|
|
if (items.some(i => i.key === key)) continue;
|
|
items.push({ key, role, isNew: true });
|
|
}
|
|
|
|
// Sort: @everyone first, then by position
|
|
items.sort((a, b) => {
|
|
if (a.role.id === spaceId) return -1;
|
|
if (b.role.id === spaceId) return 1;
|
|
return (a.role.position ?? 0) - (b.role.position ?? 0);
|
|
});
|
|
|
|
return items;
|
|
}, [overrides, newOverrides, pendingRemovals, roles, spaceId]);
|
|
|
|
const memberOverrides = useMemo(() => {
|
|
const items: { key: string; member: MemberWithUser; isNew: boolean }[] = [];
|
|
|
|
for (const o of overrides) {
|
|
if (o.targetType !== 'member') continue;
|
|
const key = `member:${o.targetId}`;
|
|
if (pendingRemovals.has(key)) continue;
|
|
const member = members.find(m => m.userId === o.targetId);
|
|
if (!member) continue;
|
|
items.push({ key, member, isNew: false });
|
|
}
|
|
|
|
for (const [key, entry] of newOverrides) {
|
|
if (!key.startsWith('member:')) continue;
|
|
const member = members.find(m => m.userId === entry.targetId);
|
|
if (!member) continue;
|
|
if (items.some(i => i.key === key)) continue;
|
|
items.push({ key, member, isNew: true });
|
|
}
|
|
|
|
return items;
|
|
}, [overrides, newOverrides, pendingRemovals, members]);
|
|
|
|
return (
|
|
<div className="space-y-4 relative pb-14">
|
|
{/* Fetch error */}
|
|
{fetchError && (
|
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
|
|
{fetchError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Role Overrides */}
|
|
<div>
|
|
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
|
Role Overrides
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{roleOverrides.map(({ key, role }) => {
|
|
const eff = getEffective(key);
|
|
return (
|
|
<OverrideEntry
|
|
key={key}
|
|
label={role.name}
|
|
color={role.color}
|
|
permDefs={permDefs}
|
|
allow={eff.allow}
|
|
deny={eff.deny}
|
|
onChange={(a, d) => handleChange(key, a, d)}
|
|
onRemove={() => handleRemove(key)}
|
|
isEveryone={role.id === spaceId}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Add Role */}
|
|
<div className="mt-2 relative">
|
|
{!showAddRole ? (
|
|
<button
|
|
onClick={() => setShowAddRole(true)}
|
|
className="flex items-center gap-1.5 text-[13px] text-txt-tertiary hover:text-txt-secondary transition-colors"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
|
</svg>
|
|
Add Role
|
|
</button>
|
|
) : (
|
|
<div ref={roleDropdownRef} className="glass rounded-lg overflow-hidden">
|
|
<div className="p-1.5 max-h-48 overflow-y-auto scrollbar-thin">
|
|
{availableRoles.length === 0 ? (
|
|
<div className="px-2.5 py-1.5 text-xs text-txt-muted">No more roles to add</div>
|
|
) : (
|
|
availableRoles.map(role => (
|
|
<button
|
|
key={role.id}
|
|
onClick={() => handleAddRole(role.id)}
|
|
className="w-full flex items-center gap-2 px-2.5 py-1.5 text-sm text-txt-secondary hover:text-txt-primary hover:bg-interactive-hover rounded transition-colors"
|
|
>
|
|
<span
|
|
className="w-2.5 h-2.5 rounded-full flex-shrink-0"
|
|
style={{ backgroundColor: role.color || '#b9bbbe' }}
|
|
/>
|
|
{role.name}
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
<div className="border-t border-white/[0.04] p-1.5">
|
|
<button
|
|
onClick={() => setShowAddRole(false)}
|
|
className="w-full text-xs text-txt-muted hover:text-txt-tertiary px-2.5 py-1 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Member Overrides */}
|
|
<div>
|
|
<div className="text-[11px] font-semibold text-txt-tertiary uppercase tracking-wider mb-2">
|
|
Member Overrides
|
|
</div>
|
|
<div className="space-y-1.5">
|
|
{memberOverrides.map(({ key, member }) => {
|
|
const eff = getEffective(key);
|
|
return (
|
|
<OverrideEntry
|
|
key={key}
|
|
label={member.user.displayName ?? member.user.username}
|
|
permDefs={permDefs}
|
|
allow={eff.allow}
|
|
deny={eff.deny}
|
|
onChange={(a, d) => handleChange(key, a, d)}
|
|
onRemove={() => handleRemove(key)}
|
|
/>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
{/* Add Member */}
|
|
<div className="mt-2 relative">
|
|
{!showAddMember ? (
|
|
<button
|
|
onClick={() => setShowAddMember(true)}
|
|
className="flex items-center gap-1.5 text-[13px] text-txt-tertiary hover:text-txt-secondary transition-colors"
|
|
>
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="currentColor">
|
|
<path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
|
|
</svg>
|
|
Add Member
|
|
</button>
|
|
) : (
|
|
<div ref={memberDropdownRef} className="glass rounded-lg overflow-hidden">
|
|
<div className="p-1.5">
|
|
<input
|
|
type="text"
|
|
value={memberSearch}
|
|
onChange={(e) => setMemberSearch(e.target.value)}
|
|
placeholder="Search members..."
|
|
className="input-search w-full mb-1"
|
|
autoFocus
|
|
/>
|
|
</div>
|
|
<div className="px-1.5 max-h-48 overflow-y-auto scrollbar-thin">
|
|
{availableMembers.length === 0 ? (
|
|
<div className="px-2.5 py-1.5 text-xs text-txt-muted">No members found</div>
|
|
) : (
|
|
availableMembers.map(member => (
|
|
<button
|
|
key={member.userId}
|
|
onClick={() => handleAddMember(member.userId)}
|
|
className="w-full flex items-center gap-2 px-2.5 py-1.5 text-sm text-txt-secondary hover:text-txt-primary hover:bg-interactive-hover rounded transition-colors"
|
|
>
|
|
<span className="truncate">{member.user.displayName ?? member.user.username}</span>
|
|
{member.user.displayName && (
|
|
<span className="text-txt-muted text-xs truncate">@{member.user.username}</span>
|
|
)}
|
|
</button>
|
|
))
|
|
)}
|
|
</div>
|
|
<div className="border-t border-white/[0.04] p-1.5">
|
|
<button
|
|
onClick={() => { setShowAddMember(false); setMemberSearch(''); }}
|
|
className="w-full text-xs text-txt-muted hover:text-txt-tertiary px-2.5 py-1 transition-colors"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Error */}
|
|
{saveError && (
|
|
<div className="p-2 bg-accent-rose/10 border border-accent-rose/30 rounded text-txt-danger text-sm">
|
|
{saveError}
|
|
</div>
|
|
)}
|
|
|
|
{/* Save/Discard pill */}
|
|
{hasChanges && (
|
|
<div className="sticky bottom-0 z-10 pointer-events-none">
|
|
<div className="flex justify-center pt-3 pb-1">
|
|
<div className="glass-bubble rounded-full px-4 py-2 flex items-center gap-2 pointer-events-auto animate-slide-up">
|
|
<button
|
|
onClick={handleDiscard}
|
|
className="px-3 py-1 text-sm text-txt-tertiary hover:text-txt-secondary transition-colors"
|
|
>
|
|
Discard
|
|
</button>
|
|
<button
|
|
onClick={handleSave}
|
|
disabled={saving}
|
|
className="px-3 py-1.5 bg-accent-primary hover:bg-accent-primary/80 text-white text-sm font-medium rounded-full transition-colors disabled:opacity-50"
|
|
>
|
|
{saving ? 'Saving...' : 'Save'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|