alex/manage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Authentik access widgets

Browse Source
This commit is contained in:
Developer
2026-07-14 21:41:24 +00:00
parent 4562a9dfca
commit 17976eab80
21 changed files with 1082 additions and 214 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/service-tabs/ApplicationsTab.tsx
+80
View File
@@ -0,0 +1,80 @@
/** ApplicationsTab — read-only Authentik application directory. */
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAuthentikApplications } from "../../hooks/useAuthentik";
import type { ServiceInstance } from "../../types";
export function ApplicationsTab({ instance }: { instance: ServiceInstance }) {
const { data, isLoading } = useAuthentikApplications(instance.id);
const applications = data?.items ?? [];
return (
<div className="flex flex-col gap-3">
<Alert>
<AlertDescription>
Application metadata only; providers, outposts, policies, and
effective access evaluation are not shown.
</AlertDescription>
</Alert>
{data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : null}
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Application</TableHead>
<TableHead>Slug</TableHead>
<TableHead>Launch URL</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading && applications.length === 0 ? (
<TableRow>
<TableCell colSpan={3}>
<Skeleton className="h-5 w-full" />
</TableCell>
</TableRow>
) : null}
{!isLoading && applications.length === 0 ? (
<TableRow>
<TableCell colSpan={3} className="text-muted-foreground">
No applications found.
</TableCell>
</TableRow>
) : null}
{applications.map((application) => (
<TableRow
key={application.id || application.slug || application.name}
>
<TableCell className="font-medium">
{application.name}
</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">
{application.slug || "—"}
</TableCell>
<TableCell className="max-w-sm truncate text-muted-foreground">
{application.launch_url || "—"}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data && data.total > applications.length ? (
<p className="text-sm text-muted-foreground">
Showing the first {applications.length} of {data.total} applications.
</p>
) : null}
</div>
);
}
frontend/src/pages/service-tabs/GroupsTab.tsx
+66
View File
@@ -0,0 +1,66 @@
/** GroupsTab — read-only Authentik group directory. */
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Skeleton } from "@/components/ui/skeleton";
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "@/components/ui/table";
import { useAuthentikGroups } from "../../hooks/useAuthentik";
import type { ServiceInstance } from "../../types";
export function GroupsTab({ instance }: { instance: ServiceInstance }) {
const { data, isLoading } = useAuthentikGroups(instance.id);
const groups = data?.items ?? [];
return (
<div className="flex flex-col gap-3">
{data?.error ? (
<Alert variant="destructive">
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : null}
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Group</TableHead>
<TableHead>ID</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading && groups.length === 0 ? (
<TableRow>
<TableCell colSpan={2}>
<Skeleton className="h-5 w-full" />
</TableCell>
</TableRow>
) : null}
{!isLoading && groups.length === 0 ? (
<TableRow>
<TableCell colSpan={2} className="text-muted-foreground">
No groups found.
</TableCell>
</TableRow>
) : null}
{groups.map((group) => (
<TableRow key={group.id}>
<TableCell className="font-medium">{group.name}</TableCell>
<TableCell className="font-mono text-xs text-muted-foreground">
{group.id}
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{data && data.total > groups.length ? (
<p className="text-sm text-muted-foreground">
Showing the first {groups.length} of {data.total} groups.
</p>
) : null}
</div>
);
}
frontend/src/pages/service-tabs/UsersTab.tsx
+67 -39
View File
@@ -1,4 +1,4 @@
/** UsersTab — Authentik user directory for the Authentik service page. */
/** UsersTab — Authentik access metadata, not an effective-permissions calculation. */
import { useState } from "react";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
@@ -13,7 +13,7 @@ import {
TableRow,
} from "@/components/ui/table";
import type { ServiceInstance } from "../../types";
import { useAuthentikUsers } from "../../hooks/useAuthentik";
import { useAuthentikAccessSummary } from "../../hooks/useAuthentik";
const PAGE_SIZE = 25;
@@ -21,14 +21,11 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
const [search, setSearch] = useState("");
const [page, setPage] = useState(1);
const [committedSearch, setCommittedSearch] = useState("");
const { data, isLoading } = useAuthentikUsers(instance.id, {
const { data, isLoading } = useAuthentikAccessSummary(instance.id, {
search: committedSearch,
page,
page_size: PAGE_SIZE,
});
const error = data?.error;
const users = data?.items ?? [];
const total = data?.total ?? 0;
const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
@@ -40,19 +37,25 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
return (
<div className="flex flex-col gap-3">
{error ? (
<Alert>
<AlertDescription>
Shows Authentik group membership and explicit staff/superuser flags.
This is access metadata, not a complete effective-authorization
calculation.
</AlertDescription>
</Alert>
{data?.error ? (
<Alert variant="destructive">
<AlertDescription>{error}</AlertDescription>
<AlertDescription>{data.error}</AlertDescription>
</Alert>
) : null}
<div className="flex items-center gap-2">
<Input
placeholder="Search users…"
value={search}
onChange={(e) => setSearch(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") handleSearch();
onChange={(event) => setSearch(event.target.value)}
onKeyDown={(event) => {
if (event.key === "Enter") handleSearch();
}}
className="max-w-xs"
/>
@@ -60,52 +63,75 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
Search
</Button>
</div>
<div className="rounded-lg border">
<Table>
<TableHeader>
<TableRow>
<TableHead>Name</TableHead>
<TableHead>Username</TableHead>
<TableHead>Email</TableHead>
<TableHead className="w-24">Status</TableHead>
<TableHead>Groups</TableHead>
<TableHead>Privileges</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{isLoading && users.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-muted-foreground">
<TableCell colSpan={5} className="text-muted-foreground">
Loading…
</TableCell>
</TableRow>
) : users.length === 0 ? (
) : null}
{!isLoading && users.length === 0 ? (
<TableRow>
<TableCell colSpan={4} className="text-muted-foreground">
<TableCell colSpan={5} className="text-muted-foreground">
No users found.
</TableCell>
</TableRow>
) : (
users.map((user) => (
<TableRow key={user.pk}>
<TableCell className="font-medium">
{user.name || "—"}
</TableCell>
<TableCell>{user.username}</TableCell>
<TableCell className="text-muted-foreground">
{user.email || "—"}
</TableCell>
<TableCell>
<Badge variant={user.is_active ? "default" : "secondary"}>
{user.is_active ? "Active" : "Inactive"}
</Badge>
</TableCell>
</TableRow>
))
)}
) : null}
{users.map((user) => (
<TableRow key={user.id || user.username}>
<TableCell className="font-medium">
{user.name || "—"}
</TableCell>
<TableCell>{user.username || "—"}</TableCell>
<TableCell>
<div className="flex max-w-sm flex-wrap gap-1">
{user.groups.length ? (
user.groups.map((group) => (
<Badge
key={group.id}
variant={group.known ? "secondary" : "destructive"}
>
{group.name}
</Badge>
))
) : (
<span className="text-muted-foreground">None</span>
)}
</div>
</TableCell>
<TableCell>
<div className="flex flex-wrap gap-1">
{user.is_superuser ? (
<Badge variant="destructive">Superuser</Badge>
) : null}
{user.is_staff ? <Badge>Staff</Badge> : null}
{!user.is_superuser && !user.is_staff ? (
<span className="text-muted-foreground">None</span>
) : null}
</div>
</TableCell>
<TableCell>
<Badge variant={user.is_active ? "default" : "secondary"}>
{user.is_active ? "Active" : "Inactive"}
</Badge>
</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
{total > 0 ? (
<div className="flex items-center justify-between text-sm text-muted-foreground">
<span>
@@ -115,7 +141,7 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
<Button
variant="outline"
size="sm"
onClick={() => setPage((p) => Math.max(1, p - 1))}
onClick={() => setPage((current) => Math.max(1, current - 1))}
disabled={page <= 1}
>
Previous
@@ -123,7 +149,9 @@ export function UsersTab({ instance }: { instance: ServiceInstance }) {
<Button
variant="outline"
size="sm"
onClick={() => setPage((p) => Math.min(totalPages, p + 1))}
onClick={() =>
setPage((current) => Math.min(totalPages, current + 1))
}
disabled={page >= totalPages}
>
Next
frontend/src/pages/service-tabs/__tests__/UsersTab.test.tsx
+17 -7
View File
@@ -15,22 +15,28 @@ const instance: ServiceInstance = {
};
vi.mock("../../../hooks/useAuthentik", () => ({
useAuthentikUsers: vi.fn(() => ({
useAuthentikAccessSummary: vi.fn(() => ({
data: {
items: [
{
pk: 1,
id: "1",
username: "alice",
name: "Alice",
email: "alice@example.com",
is_active: true,
is_superuser: true,
is_staff: false,
groups: [{ id: "admins", name: "Admins", known: true }],
},
{
pk: 2,
id: "2",
username: "bob",
name: "Bob",
email: "bob@example.com",
is_active: false,
is_superuser: false,
is_staff: true,
groups: [{ id: "gone", name: "Unknown group (gone)", known: false }],
},
],
total: 2,
@@ -42,13 +48,17 @@ vi.mock("../../../hooks/useAuthentik", () => ({
}));
describe("UsersTab", () => {
it("renders the directory table with users", () => {
it("renders group membership and explicit privilege metadata", () => {
render(<UsersTab instance={instance} />);
expect(screen.getByText("Alice")).toBeInTheDocument();
expect(screen.getByText("bob")).toBeInTheDocument();
expect(screen.getByText("alice@example.com")).toBeInTheDocument();
expect(screen.getByText("Active")).toBeInTheDocument();
expect(screen.getByText("Inactive")).toBeInTheDocument();
expect(screen.getByText("Admins")).toBeInTheDocument();
expect(screen.getByText("Unknown group (gone)")).toBeInTheDocument();
expect(screen.getByText("Superuser")).toBeInTheDocument();
expect(screen.getByText("Staff")).toBeInTheDocument();
expect(
screen.getByText(/not a complete effective-authorization calculation/i),
).toBeInTheDocument();
});
it("renders search input and pagination", () => {
frontend/src/pages/service-tabs/index.ts
+4
View File
@@ -15,6 +15,8 @@ import { FilesTab } from "./FilesTab";
import { ActionsTab } from "./ActionsTab";
import { JobsTab } from "./JobsTab";
import { UsersTab } from "./UsersTab";
import { GroupsTab } from "./GroupsTab";
import { ApplicationsTab } from "./ApplicationsTab";
import { MessagingTab } from "./MessagingTab";
import { QbittorrentTab } from "./QbittorrentTab";
@@ -52,6 +54,8 @@ export function serviceContentTabs(serviceType: string): ContentTab[] {
case "authentik":
return [
{ label: "Users", Component: UsersTab },
{ label: "Groups", Component: GroupsTab },
{ label: "Applications", Component: ApplicationsTab },
{ label: "Messaging", Component: MessagingTab },
];
case "alertmanager":