FRE-366: Add dedicated permissions page with toggle controls
- Add page slot with /permissions route for dedicated permissions management - Add ui.page.register capability - Create PermissionsPage component with agent list and permission toggles - Each agent can be selected to view and toggle their permissions - Maintains existing sidebar and detail tab functionality Co-Authored-By: Paperclip <noreply@paperclip.ing>
This commit is contained in:
@@ -13,7 +13,8 @@ const manifest: PaperclipPluginManifestV1 = {
|
||||
"plugin.state.read",
|
||||
"plugin.state.write",
|
||||
"ui.detailTab.register",
|
||||
"ui.sidebar.register"
|
||||
"ui.sidebar.register",
|
||||
"ui.page.register"
|
||||
],
|
||||
entrypoints: {
|
||||
worker: "./dist/worker.js",
|
||||
@@ -21,6 +22,13 @@ const manifest: PaperclipPluginManifestV1 = {
|
||||
},
|
||||
ui: {
|
||||
slots: [
|
||||
{
|
||||
type: "page",
|
||||
id: "permissions-page",
|
||||
displayName: "Permissions",
|
||||
exportName: "PermissionsPage",
|
||||
routePath: "/permissions"
|
||||
},
|
||||
{
|
||||
type: "detailTab",
|
||||
id: "permissions",
|
||||
|
||||
243
plugin-agent-permissions/src/ui/PermissionsPage.tsx
Normal file
243
plugin-agent-permissions/src/ui/PermissionsPage.tsx
Normal file
@@ -0,0 +1,243 @@
|
||||
import { useState } from "react";
|
||||
import { usePluginData, usePluginAction, useHostContext } from "@paperclipai/plugin-sdk/ui";
|
||||
import type { PluginPageProps } from "@paperclipai/plugin-sdk/ui";
|
||||
import { PERMISSION_KEYS, PERMISSION_LABELS, type PermissionKey } from "../constants";
|
||||
|
||||
interface AgentPermissionsSummary {
|
||||
agentId: string;
|
||||
agentName: string;
|
||||
permissions: Record<PermissionKey, boolean>;
|
||||
}
|
||||
|
||||
export function PermissionsPage(_props: PluginPageProps) {
|
||||
const { companyId } = useHostContext();
|
||||
|
||||
const { data: agentsData, loading, error, refresh } = usePluginData<AgentPermissionsSummary[]>(
|
||||
"all-agents-permissions",
|
||||
companyId ? { companyId, limit: 100 } : {}
|
||||
);
|
||||
|
||||
const togglePermission = usePluginAction("toggle-agent-permission");
|
||||
const [updating, setUpdating] = useState<{ agentId: string; permissionKey: PermissionKey } | null>(null);
|
||||
const [lastError, setLastError] = useState<Error | null>(null);
|
||||
const [selectedAgentId, setSelectedAgentId] = useState<string | null>(null);
|
||||
|
||||
async function handleToggle(agentId: string, permissionKey: PermissionKey, currentEnabled: boolean) {
|
||||
setLastError(null);
|
||||
setUpdating({ agentId, permissionKey });
|
||||
try {
|
||||
await togglePermission({ agentId, permissionKey, enabled: !currentEnabled });
|
||||
await refresh();
|
||||
} catch (err) {
|
||||
const error = err instanceof Error ? err : new Error(String(err));
|
||||
setLastError(error);
|
||||
console.error("Failed to toggle permission:", error);
|
||||
} finally {
|
||||
setUpdating(null);
|
||||
}
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div style={{ padding: "2rem", textAlign: "center" }}>
|
||||
<div style={{ color: "#666" }}>Loading agents and permissions...</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<div role="alert" style={{ padding: "2rem", color: "#c00" }}>
|
||||
<strong>Error:</strong> {error.message}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!agentsData || agentsData.length === 0) {
|
||||
return (
|
||||
<div style={{ padding: "2rem", textAlign: "center" }}>
|
||||
<h2 style={{ marginBottom: "1rem" }}>Agent Permissions</h2>
|
||||
<p style={{ color: "#666" }}>No agents found in this company.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const selectedAgent = selectedAgentId
|
||||
? agentsData.find(a => a.agentId === selectedAgentId)
|
||||
: null;
|
||||
|
||||
return (
|
||||
<div style={{ padding: "1.5rem", maxWidth: "1200px", margin: "0 auto" }}>
|
||||
<header style={{ marginBottom: "2rem" }}>
|
||||
<h1 id="permissions-heading" style={{ fontSize: "1.5rem", fontWeight: 600, marginBottom: "0.5rem" }}>
|
||||
Agent Permissions
|
||||
</h1>
|
||||
<p style={{ color: "#666" }}>
|
||||
Manage what actions each agent can perform within Paperclip.
|
||||
</p>
|
||||
</header>
|
||||
|
||||
{lastError && (
|
||||
<div
|
||||
role="alert"
|
||||
aria-live="polite"
|
||||
style={{
|
||||
padding: "0.75rem",
|
||||
marginBottom: "1rem",
|
||||
backgroundColor: "#fee",
|
||||
border: "1px solid #fcc",
|
||||
borderRadius: "4px",
|
||||
color: "#c00"
|
||||
}}
|
||||
>
|
||||
<strong>Failed to update:</strong> {lastError.message}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div style={{ display: "grid", gridTemplateColumns: "280px 1fr", gap: "1.5rem", minHeight: "500px" }}>
|
||||
<aside>
|
||||
<h2 style={{ fontSize: "0.875rem", fontWeight: 600, marginBottom: "0.75rem", color: "#666" }}>
|
||||
AGENTS ({agentsData.length})
|
||||
</h2>
|
||||
<nav style={{ display: "flex", flexDirection: "column", gap: "0.25rem" }}>
|
||||
{agentsData.map(agent => {
|
||||
const permCount = Object.values(agent.permissions).filter(Boolean).length;
|
||||
const isSelected = selectedAgentId === agent.agentId;
|
||||
|
||||
return (
|
||||
<button
|
||||
key={agent.agentId}
|
||||
onClick={() => setSelectedAgentId(agent.agentId)}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "space-between",
|
||||
padding: "0.625rem 0.75rem",
|
||||
border: "none",
|
||||
borderRadius: "6px",
|
||||
backgroundColor: isSelected ? "var(--primary-bg, #e0e7ff)" : "transparent",
|
||||
color: "inherit",
|
||||
cursor: "pointer",
|
||||
textAlign: "left",
|
||||
fontSize: "0.875rem",
|
||||
transition: "background-color 0.15s"
|
||||
}}
|
||||
>
|
||||
<span style={{ fontWeight: 500, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}>
|
||||
{agent.agentName}
|
||||
</span>
|
||||
{permCount > 0 && (
|
||||
<span style={{
|
||||
fontSize: "0.75rem",
|
||||
backgroundColor: isSelected ? "var(--primary, #6366f1)" : "#e5e7eb",
|
||||
color: isSelected ? "#fff" : "#666",
|
||||
padding: "0.125rem 0.375rem",
|
||||
borderRadius: "999px"
|
||||
}}>
|
||||
{permCount}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<main>
|
||||
{selectedAgent ? (
|
||||
<div style={{
|
||||
border: "1px solid #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
padding: "1.5rem",
|
||||
backgroundColor: "#fff"
|
||||
}}>
|
||||
<div style={{ marginBottom: "1.5rem" }}>
|
||||
<h2 style={{ fontSize: "1.125rem", fontWeight: 600, marginBottom: "0.25rem" }}>
|
||||
{selectedAgent.agentName}
|
||||
</h2>
|
||||
<p style={{ fontSize: "0.875rem", color: "#666" }}>Manage permissions for this agent</p>
|
||||
</div>
|
||||
|
||||
<fieldset style={{ border: "none", padding: 0, margin: 0 }}>
|
||||
<legend style={{ display: "none" }}>Permission toggles for {selectedAgent.agentName}</legend>
|
||||
<div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
|
||||
{PERMISSION_KEYS.map((key) => {
|
||||
const enabled = selectedAgent.permissions[key] ?? false;
|
||||
const isUpdating = updating?.agentId === selectedAgent.agentId && updating?.permissionKey === key;
|
||||
|
||||
return (
|
||||
<label
|
||||
key={key}
|
||||
htmlFor={`perm-${selectedAgent.agentId}-${key}`}
|
||||
style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
gap: "0.75rem",
|
||||
cursor: isUpdating ? "wait" : "pointer",
|
||||
padding: "0.75rem",
|
||||
borderRadius: "6px",
|
||||
backgroundColor: isUpdating ? "#f9fafb" : "#fafafa",
|
||||
border: "1px solid #e5e7eb",
|
||||
transition: "background-color 0.2s"
|
||||
}}
|
||||
>
|
||||
<input
|
||||
id={`perm-${selectedAgent.agentId}-${key}`}
|
||||
type="checkbox"
|
||||
checked={enabled}
|
||||
onChange={() => handleToggle(selectedAgent.agentId, key, enabled)}
|
||||
disabled={updating !== null}
|
||||
aria-describedby={isUpdating ? `loading-${selectedAgent.agentId}-${key}` : undefined}
|
||||
style={{ width: "18px", height: "18px", cursor: isUpdating ? "wait" : "pointer" }}
|
||||
/>
|
||||
<div style={{ flex: 1 }}>
|
||||
<div style={{ fontWeight: 500 }}>{PERMISSION_LABELS[key]}</div>
|
||||
<div style={{ fontSize: "0.75rem", color: "#666" }}>
|
||||
{getPermissionDescription(key)}
|
||||
</div>
|
||||
</div>
|
||||
{isUpdating && (
|
||||
<span
|
||||
id={`loading-${selectedAgent.agentId}-${key}`}
|
||||
style={{ color: "#888", fontSize: "0.75rem" }}
|
||||
role="status"
|
||||
>
|
||||
updating...
|
||||
</span>
|
||||
)}
|
||||
</label>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</fieldset>
|
||||
</div>
|
||||
) : (
|
||||
<div style={{
|
||||
display: "flex",
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
height: "300px",
|
||||
border: "2px dashed #e5e7eb",
|
||||
borderRadius: "8px",
|
||||
color: "#666"
|
||||
}}>
|
||||
Select an agent from the list to manage their permissions
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function getPermissionDescription(key: PermissionKey): string {
|
||||
const descriptions: Record<PermissionKey, string> = {
|
||||
"agents:create": "Allows this agent to create new agents (agent hiring)",
|
||||
"users:invite": "Allows inviting board users to the company",
|
||||
"users:manage_permissions": "Allows managing user permissions",
|
||||
"tasks:assign": "Allows assigning tasks to agents",
|
||||
"tasks:assign_scope": "Scope for task assignment (limits which agents can be assigned)",
|
||||
"joins:approve": "Allows approving join requests"
|
||||
};
|
||||
return descriptions[key];
|
||||
}
|
||||
@@ -1,2 +1,3 @@
|
||||
export { AgentPermissionsTab } from './AgentPermissionsTab';
|
||||
export { PermissionsNav } from './PermissionsNav';
|
||||
export { PermissionsPage } from './PermissionsPage';
|
||||
|
||||
Reference in New Issue
Block a user