71 lines
2.5 KiB
TypeScript
71 lines
2.5 KiB
TypeScript
import { usePluginData, useHostContext } from "@paperclipai/plugin-sdk/ui";
|
|
import type { PluginSidebarProps } from "@paperclipai/plugin-sdk/ui";
|
|
import { SIDEBAR_PREVIEW_LIMIT, type PermissionKey } from "../constants";
|
|
|
|
interface AgentPermissionsSummary {
|
|
agentId: string;
|
|
agentName: string;
|
|
permissions: Record<PermissionKey, boolean>;
|
|
}
|
|
|
|
export function PermissionsNav(_props: PluginSidebarProps) {
|
|
const { companyId } = useHostContext();
|
|
const { data: agentsData, loading, error } = usePluginData<AgentPermissionsSummary[]>(
|
|
"all-agents-permissions",
|
|
companyId ? { companyId } : undefined
|
|
);
|
|
|
|
if (loading) return (
|
|
<div role="status" style={{ padding: "1rem" }}>
|
|
Loading permissions...
|
|
</div>
|
|
);
|
|
if (error) return (
|
|
<div role="alert" style={{ padding: "1rem", color: "#c00" }}>
|
|
<strong>Error:</strong> {error.message}
|
|
</div>
|
|
);
|
|
if (!agentsData || agentsData.length === 0) {
|
|
return (
|
|
<div style={{ padding: "1rem" }}>
|
|
<h3 style={{ fontSize: "1rem", fontWeight: 600, marginBottom: "0.5rem" }}>Permissions</h3>
|
|
<p style={{ color: "#666", fontSize: "0.875rem" }}>No agents found</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const agentsWithPermissions = agentsData.filter(a =>
|
|
Object.values(a.permissions).some(v => v)
|
|
);
|
|
|
|
return (
|
|
<div style={{ padding: "1rem" }}>
|
|
<h3 id="permissions-nav-heading" style={{ fontSize: "1rem", fontWeight: 600, marginBottom: "0.75rem" }}>Permissions</h3>
|
|
<p aria-labelledby="permissions-nav-heading" style={{ color: "#666", fontSize: "0.75rem", marginBottom: "1rem" }}>
|
|
{agentsWithPermissions.length} agent(s) with custom permissions
|
|
</p>
|
|
<ul style={{ display: "flex", flexDirection: "column", gap: "0.5rem", padding: 0, margin: 0, listStyle: "none" }}>
|
|
{agentsData.slice(0, SIDEBAR_PREVIEW_LIMIT).map(agent => {
|
|
const permCount = Object.values(agent.permissions).filter(Boolean).length;
|
|
return (
|
|
<li
|
|
key={agent.agentId}
|
|
style={{
|
|
fontSize: "0.875rem",
|
|
padding: "0.5rem",
|
|
backgroundColor: "#f9f9f9",
|
|
borderRadius: "4px"
|
|
}}
|
|
>
|
|
<div style={{ fontWeight: 500 }}>{agent.agentName}</div>
|
|
<div style={{ color: "#888", fontSize: "0.75rem" }}>
|
|
{permCount} permission(s) granted
|
|
</div>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|