/* ──────────────────────────────────────────────────────────────────────
capability-grid.jsx — perms v2 (feedback b030cab9)
──────────────────────────────────────────────────────────────────────
Apple-style toggle grid for the Invite + User-detail flows. Capabilities
are grouped by category (Campaigns, Species, Displays/Zones, …). Toggles
the inviter doesn't hold are greyed and disabled with a hover tooltip
("You don't have this capability, so you can't grant it.") — the funnel.
The component is data-driven: it fetches /api/capabilities on mount and
accepts a controlled `value` (array of cap ids) + onChange.
Templates are loaded from /api/capabilities/templates and shown in a
dropdown at the top. Picking a template fills all toggles from that set;
"Save as template" persists the current selection as an org-scoped
template (or platform-default if the caller is aquaos_admin).
────────────────────────────────────────────────────────────────────── */
/* Tiny ARIA-correct switch — matches the visual language of the existing
chunky permission toggles in users.jsx but is locked to a single binary
value (atomic capabilities are pure on/off, no none/view/edit/approve
ladder). Disabled state shows a half-opacity track + tooltip on hover. */
function CapToggle({ id, checked, disabled, onChange, label, helper, disabledReason }) {
const [hover, setHover] = useState(false);
const trackBg = checked
? 'var(--aq-accent)'
: 'color-mix(in srgb, var(--aq-text-faint) 30%, transparent)';
return (
);
}
/* The grid itself.
Props:
value - array of capability ids the form currently has selected
onChange(arr) - controlled change handler
forRole - optional role string. If set, "Reset to role default"
button restores the role baseline (capped by granter).
hideTemplates - hide the templates picker (e.g. detail page)
hideSaveAs - hide the "Save as template" button
compact - tighter padding for inline use in the invite modal
*/
function CapabilityGrid({
value, onChange, forRole, hideTemplates, hideSaveAs, compact,
}) {
const [catalogue, setCatalogue] = useState(null);
const [granterCaps, setGranterCaps] = useState([]);
const [callerRole, setCallerRole] = useState(null);
const [roleDefaults, setRoleDefaults] = useState({});
const [templates, setTemplates] = useState([]);
const [loading, setLoading] = useState(true);
const [err, setErr] = useState(null);
/* Load catalogue + caller's effective set + visible templates in parallel.
The catalogue rarely changes so it's safe to cache for the session, but
we re-fetch on mount for now — premature optimisation otherwise. */
useEffect(() => {
let cancelled = false;
setLoading(true);
Promise.all([
apiFetch('/api/capabilities'),
apiFetch('/api/capabilities/templates'),
]).then(([catRes, tplRes]) => {
if (cancelled) return;
setCatalogue(catRes.catalogue || []);
setGranterCaps(catRes.caller_capabilities || []);
setCallerRole(catRes.caller_role || null);
setRoleDefaults(catRes.role_defaults || {});
setTemplates(tplRes.templates || []);
setLoading(false);
}).catch((e) => {
if (cancelled) return;
setErr(e.message);
setLoading(false);
});
return () => { cancelled = true; };
}, []);
/* When the parent passes a new role (e.g. inviter changed the role badge),
pre-fill the grid with the role baseline capped by the granter. We only
do this if the value is currently empty — never clobber explicit edits. */
useEffect(() => {
if (!forRole || !roleDefaults || !roleDefaults[forRole]) return;
if (Array.isArray(value) && value.length > 0) return;
const baseline = roleDefaults[forRole] || [];
const granterSet = new Set(granterCaps);
const capped = (callerRole === 'aquaos_admin')
? baseline.slice()
: baseline.filter(c => granterSet.has(c));
onChange(capped);
}, [forRole, roleDefaults, granterCaps, callerRole]); // eslint-disable-line
const granterSet = useMemo(() => new Set(granterCaps), [granterCaps]);
const isAquaOSAdmin = callerRole === 'aquaos_admin';
const grouped = useMemo(() => {
if (!catalogue) return [];
const byCat = new Map();
for (const c of catalogue) {
if (!byCat.has(c.category)) byCat.set(c.category, []);
byCat.get(c.category).push(c);
}
return Array.from(byCat.entries()); // [[category, caps[]], …]
}, [catalogue]);
function toggle(id, on) {
const set = new Set(value || []);
if (on) set.add(id); else set.delete(id);
onChange(Array.from(set));
}
function applyTemplate(tplId) {
if (!tplId) return;
const tpl = templates.find(t => t.id === tplId);
if (!tpl) return;
/* Templates are stored uncapped (the funnel is enforced at write time
on the server side), so cap on apply for the UI to feel honest. */
const capped = isAquaOSAdmin
? (tpl.capabilities || []).slice()
: (tpl.capabilities || []).filter(c => granterSet.has(c));
onChange(capped);
}
function resetToRoleDefault() {
if (!forRole || !roleDefaults[forRole]) return;
const baseline = roleDefaults[forRole];
const capped = isAquaOSAdmin
? baseline.slice()
: baseline.filter(c => granterSet.has(c));
onChange(capped);
}
/* Save current selection as a new template. Prompts for a name, then POSTs
to /api/capabilities/templates. We use prompt() for now — proper modal
can come later, but the affordance is in the toolbar. */
async function saveAsTemplate() {
const name = (window.prompt('Template name', forRole ? `${forRole} (custom)` : 'Custom set') || '').trim();
if (!name) return;
try {
const res = await apiFetch('/api/capabilities/templates', {
method: 'POST',
body: JSON.stringify({ name, capabilities: value || [] }),
});
setTemplates((t) => [...t, res]);
window.toast && window.toast.success(`Template "${name}" saved`);
} catch (e) {
window.toast && window.toast.error(e.message);
}
}
if (loading) {
return
{/* Capability groups */}
{grouped.map(([category, caps]) => (
{category}
{caps.map((cap, i) => {
const held = isAquaOSAdmin || granterSet.has(cap.id);
return (
{i > 0 && }
toggle(cap.id, on)}
label={cap.label}
helper={cap.description}
disabledReason="You don't have this capability, so you can't grant it."
/>
);
})}
))}
);
}
/* Expose globally so other files (users.jsx, capability-templates.jsx, app.jsx)
can mount it. The CMS uses a single global namespace because the codebase
compiles JSX in-browser and has no module system. */
window.CapabilityGrid = CapabilityGrid;
window.CapToggle = CapToggle;