mokhtar
7e0df5fd94
Gates / frontend (push) Successful in 1m22s
Gates / test (push) Successful in 1m54s
Gates / test-aarch64 (push) Successful in 7m57s
Gates / package (push) Successful in 5m29s
Gates / container (push) Successful in 10s
CI / gates (push) Successful in 32m51s
597 lines
17 KiB
TypeScript
597 lines
17 KiB
TypeScript
import { useEffect, useState, type FormEvent } from "react";
|
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
|
import { Link, useNavigate, useSearch } from "@tanstack/react-router";
|
|
import * as stylex from "@stylexjs/stylex";
|
|
import { DEFAULT_GROUP_ID } from "@/lib/defaultGroup";
|
|
import { formatTime } from "@/lib/format";
|
|
import InlineError from "@/lib/InlineError";
|
|
import {
|
|
blocklistsQuery,
|
|
clientsQuery,
|
|
groupCreateMutation,
|
|
groupDeleteMutation,
|
|
groupSourcesQuery,
|
|
groupUpdateMutation,
|
|
groupsQuery,
|
|
ruleCreateMutation,
|
|
ruleDeleteMutation,
|
|
rulesQuery,
|
|
} from "@/lib/queries";
|
|
import type { Blocklist, ConfigStatus, Group, Rule, RuleAction, RuleKind } from "@/lib/types";
|
|
import ConfirmDialog from "@/ui/ConfirmDialog";
|
|
import DefinitionList from "@/ui/DefinitionList";
|
|
import Select from "@/ui/Select";
|
|
import { styles as shared } from "@/ui/styles";
|
|
import { colors } from "@/ui/tokens.stylex";
|
|
import AuthorityGate from "./AuthorityGate";
|
|
import FileModeNote from "./FileModeNote";
|
|
import GroupSourcesEditor from "./GroupSourcesEditor";
|
|
import QueryPanel from "./QueryPanel";
|
|
import { styles as config } from "./styles";
|
|
|
|
const DEFAULT_GROUP_NOTE = "The default group cannot be renamed or deleted.";
|
|
|
|
const KIND_OPTIONS = [
|
|
{ value: "exact", label: "exact" },
|
|
{ value: "wildcard", label: "wildcard" },
|
|
{ value: "regex", label: "regex" },
|
|
];
|
|
|
|
const ACTION_OPTIONS = [
|
|
{ value: "allow", label: "allow" },
|
|
{ value: "block", label: "block" },
|
|
];
|
|
|
|
const styles = stylex.create({
|
|
createForm: {
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
marginBottom: "0.75rem",
|
|
},
|
|
fieldLabel: {
|
|
display: "block",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
fontWeight: 500,
|
|
},
|
|
detailHeading: {
|
|
fontSize: "1.25rem",
|
|
lineHeight: "1.75rem",
|
|
fontWeight: 600,
|
|
},
|
|
controlRow: {
|
|
marginTop: "0.75rem",
|
|
display: "flex",
|
|
flexWrap: "wrap",
|
|
alignItems: "center",
|
|
gap: "0.75rem",
|
|
},
|
|
checkboxLabel: {
|
|
display: "inline-flex",
|
|
alignItems: "center",
|
|
gap: "0.5rem",
|
|
fontSize: "0.875rem",
|
|
lineHeight: "1.25rem",
|
|
},
|
|
spacer: {
|
|
marginLeft: "auto",
|
|
},
|
|
destructive: {
|
|
color: colors.danger,
|
|
},
|
|
ruleForm: {
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "0.75rem",
|
|
marginTop: "1rem",
|
|
maxWidth: "36rem",
|
|
},
|
|
fieldGrid: {
|
|
display: "grid",
|
|
gap: "0.75rem",
|
|
gridTemplateColumns: {
|
|
default: "repeat(1, minmax(0, 1fr))",
|
|
"@media (min-width: 640px)": "repeat(2, minmax(0, 1fr))",
|
|
},
|
|
},
|
|
allow: {
|
|
color: colors.primaryOnSurface,
|
|
},
|
|
block: {
|
|
color: colors.danger,
|
|
},
|
|
pattern: {
|
|
fontWeight: 500,
|
|
},
|
|
});
|
|
|
|
export default function ProtectionGroups() {
|
|
const groups = useQuery(groupsQuery());
|
|
return (
|
|
<AuthorityGate>
|
|
{(status) => (
|
|
<div>
|
|
{status.authority === "managed_file" && <FileModeNote path={status.path} />}
|
|
<QueryPanel query={groups}>
|
|
{(rows) => <GroupsMasterDetail groups={rows} status={status} />}
|
|
</QueryPanel>
|
|
</div>
|
|
)}
|
|
</AuthorityGate>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* Master/detail on one group at a time. The selection is `?group=`, so a view
|
|
* of a group is a link and the browser's back button walks the groups the
|
|
* reader looked at.
|
|
*/
|
|
function GroupsMasterDetail({ groups, status }: { groups: Group[]; status: ConfigStatus }) {
|
|
const search = useSearch({ from: "/shell/configuration/protection" });
|
|
const navigate = useNavigate({ from: "/configuration/protection" });
|
|
|
|
const known = groups.some((group) => group.id === search.group);
|
|
const selectedId = known ? search.group : groups[0]?.id;
|
|
const selected = groups.find((group) => group.id === selectedId);
|
|
|
|
// An id the URL named that no group has — deleted, or hand-typed — falls
|
|
// back to the first group, and the URL is rewritten to say so. `replace`,
|
|
// because a corrected address is not a place the reader chose to be and a
|
|
// back button that returns to it would trap them.
|
|
useEffect(() => {
|
|
if (selectedId === undefined || selectedId === search.group) return;
|
|
void navigate({ search: { tab: search.tab, group: selectedId }, replace: true });
|
|
}, [navigate, search.group, search.tab, selectedId]);
|
|
|
|
const fileMode = status.authority === "managed_file";
|
|
|
|
return (
|
|
<div {...stylex.props(config.split)}>
|
|
<div>
|
|
{!fileMode && <CreateGroupForm />}
|
|
<nav aria-label="Groups" {...stylex.props(styles.controlRow)}>
|
|
<ul {...stylex.props(config.masterList)}>
|
|
{groups.map((group) => (
|
|
<li key={group.id}>
|
|
<Link
|
|
to="/configuration/protection"
|
|
search={{ tab: search.tab, group: group.id }}
|
|
activeOptions={{ includeSearch: true }}
|
|
{...stylex.props(
|
|
config.masterLink,
|
|
group.id === selectedId && config.masterLinkActive,
|
|
shared.focusRing,
|
|
)}
|
|
>
|
|
{group.name}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
{selected === undefined ? (
|
|
<p {...stylex.props(config.empty)}>No groups exist.</p>
|
|
) : fileMode ? (
|
|
<GroupDetailReadOnly group={selected} />
|
|
) : (
|
|
<GroupDetailEditable group={selected} />
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function CreateGroupForm() {
|
|
const queryClient = useQueryClient();
|
|
const create = useMutation(groupCreateMutation(queryClient));
|
|
const [newName, setNewName] = useState("");
|
|
return (
|
|
<>
|
|
<form
|
|
{...stylex.props(styles.createForm)}
|
|
onSubmit={(event: FormEvent) => {
|
|
event.preventDefault();
|
|
const name = newName.trim();
|
|
if (name === "") return;
|
|
create.mutate({ name }, { onSuccess: () => setNewName("") });
|
|
}}
|
|
>
|
|
<label {...stylex.props(styles.fieldLabel)} htmlFor="new-group-name">
|
|
New group
|
|
</label>
|
|
<input
|
|
id="new-group-name"
|
|
type="text"
|
|
value={newName}
|
|
onChange={(event) => setNewName(event.target.value)}
|
|
{...stylex.props(shared.smallInput, shared.focusRing)}
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={create.isPending}
|
|
{...stylex.props(shared.primaryButton, shared.focusRing)}
|
|
>
|
|
Create
|
|
</button>
|
|
</form>
|
|
<InlineError error={create.error} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
function ClientCountLink({ group }: { group: Group }) {
|
|
const clients = useQuery(clientsQuery());
|
|
const count = clients.data?.filter((client) => client.group_id === group.id).length;
|
|
return (
|
|
<p {...stylex.props(config.note)}>
|
|
<Link to="/clients" search={{ group: group.id }} {...stylex.props(shared.focusRing)}>
|
|
{count === undefined
|
|
? "Clients in this group"
|
|
: `${count} client${count === 1 ? "" : "s"} in this group`}
|
|
</Link>
|
|
</p>
|
|
);
|
|
}
|
|
|
|
function GroupDetailReadOnly({ group }: { group: Group }) {
|
|
return (
|
|
<div>
|
|
<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
|
|
<section {...stylex.props(config.panel)}>
|
|
<DefinitionList
|
|
items={[
|
|
{ label: "Name", zonKey: "groups[].name", value: group.name },
|
|
{ label: "Safe search", zonKey: "groups[].safe_search", value: String(group.safe_search) },
|
|
]}
|
|
/>
|
|
</section>
|
|
<GroupSourcesReadOnly group={group} />
|
|
<GroupRules group={group} editable={false} />
|
|
<ClientCountLink group={group} />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GroupSourcesReadOnly({ group }: { group: Group }) {
|
|
const blocklists = useQuery(blocklistsQuery());
|
|
const assigned = useQuery(groupSourcesQuery(group.id));
|
|
return (
|
|
<section {...stylex.props(config.panel)}>
|
|
<h3 {...stylex.props(config.panelHeading)}>
|
|
Assigned sources
|
|
<code {...stylex.props(shared.mono, config.panelKey)}>group_sources</code>
|
|
</h3>
|
|
<QueryPanel query={assigned}>
|
|
{(sourceIds) => (
|
|
<QueryPanel query={blocklists}>
|
|
{(catalogue) => <AssignedSources sourceIds={sourceIds} catalogue={catalogue} />}
|
|
</QueryPanel>
|
|
)}
|
|
</QueryPanel>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function AssignedSources({ sourceIds, catalogue }: { sourceIds: number[]; catalogue: Blocklist[] }) {
|
|
const assigned = catalogue.filter((source) => sourceIds.includes(source.id));
|
|
if (assigned.length === 0) return <p {...stylex.props(config.empty)}>This group is assigned no sources.</p>;
|
|
return (
|
|
<div {...stylex.props(shared.tableWrap)}>
|
|
<table {...stylex.props(config.table)}>
|
|
<thead>
|
|
<tr>
|
|
<th {...stylex.props(shared.th)}>Source</th>
|
|
<th {...stylex.props(shared.th)}>URL</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{assigned.map((source) => (
|
|
<tr key={source.id}>
|
|
<td {...stylex.props(shared.td)}>{source.name}</td>
|
|
<td {...stylex.props(shared.td, shared.mono)}>{source.url}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GroupDetailEditable({ group }: { group: Group }) {
|
|
const queryClient = useQueryClient();
|
|
const blocklists = useQuery(blocklistsQuery());
|
|
const update = useMutation(groupUpdateMutation(queryClient));
|
|
const remove = useMutation(groupDeleteMutation(queryClient));
|
|
const [renaming, setRenaming] = useState(false);
|
|
const [name, setName] = useState(group.name);
|
|
const [confirming, setConfirming] = useState(false);
|
|
const isDefault = group.id === DEFAULT_GROUP_ID;
|
|
|
|
return (
|
|
<div>
|
|
{renaming ? (
|
|
<form
|
|
{...stylex.props(styles.controlRow)}
|
|
onSubmit={(event: FormEvent) => {
|
|
event.preventDefault();
|
|
const trimmed = name.trim();
|
|
if (trimmed === "") return;
|
|
update.mutate(
|
|
{ id: group.id, input: { name: trimmed, safe_search: group.safe_search } },
|
|
{ onSuccess: () => setRenaming(false) },
|
|
);
|
|
}}
|
|
>
|
|
<input
|
|
type="text"
|
|
aria-label={`New name for ${group.name}`}
|
|
value={name}
|
|
onChange={(event) => setName(event.target.value)}
|
|
{...stylex.props(shared.smallInput, shared.focusRing)}
|
|
autoFocus
|
|
/>
|
|
<button
|
|
type="submit"
|
|
disabled={update.isPending}
|
|
{...stylex.props(shared.smallButton, shared.focusRing)}
|
|
>
|
|
Save
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
setName(group.name);
|
|
setRenaming(false);
|
|
}}
|
|
{...stylex.props(shared.smallButton, shared.focusRing)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
</form>
|
|
) : (
|
|
<h2 {...stylex.props(styles.detailHeading)}>{group.name}</h2>
|
|
)}
|
|
|
|
<div {...stylex.props(styles.controlRow)}>
|
|
<label {...stylex.props(styles.checkboxLabel)}>
|
|
<input
|
|
type="checkbox"
|
|
checked={group.safe_search}
|
|
disabled={update.isPending}
|
|
{...stylex.props(shared.focusRing)}
|
|
onChange={(event) =>
|
|
update.mutate({
|
|
id: group.id,
|
|
input: { name: group.name, safe_search: event.target.checked },
|
|
})
|
|
}
|
|
/>
|
|
Safe search
|
|
</label>
|
|
<span {...stylex.props(styles.spacer)}>
|
|
{!renaming && (
|
|
<button
|
|
type="button"
|
|
disabled={isDefault}
|
|
title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
|
|
onClick={() => {
|
|
setName(group.name);
|
|
setRenaming(true);
|
|
}}
|
|
{...stylex.props(shared.smallButton, shared.focusRing)}
|
|
>
|
|
Rename group
|
|
</button>
|
|
)}{" "}
|
|
<button
|
|
type="button"
|
|
disabled={isDefault || remove.isPending}
|
|
title={isDefault ? DEFAULT_GROUP_NOTE : undefined}
|
|
onClick={() => setConfirming(true)}
|
|
{...stylex.props(shared.smallButton, styles.destructive, shared.focusRing)}
|
|
>
|
|
Delete group
|
|
</button>
|
|
</span>
|
|
</div>
|
|
{isDefault && <p {...stylex.props(config.note)}>{DEFAULT_GROUP_NOTE}</p>}
|
|
<InlineError error={update.error ?? remove.error} />
|
|
|
|
<section {...stylex.props(config.panel)}>
|
|
<h3 {...stylex.props(config.panelHeading)}>Assigned sources</h3>
|
|
<QueryPanel query={blocklists}>
|
|
{(catalogue) => <GroupSourcesEditor groupId={group.id} blocklists={catalogue} />}
|
|
</QueryPanel>
|
|
</section>
|
|
|
|
<GroupRules group={group} editable />
|
|
<ClientCountLink group={group} />
|
|
|
|
<ConfirmDialog
|
|
isOpen={confirming}
|
|
title="Delete group"
|
|
message={`Delete group "${group.name}"? Its clients fall back to the default group.`}
|
|
confirmLabel="Delete"
|
|
onConfirm={() => {
|
|
setConfirming(false);
|
|
remove.mutate(group.id);
|
|
}}
|
|
onCancel={() => setConfirming(false)}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
/**
|
|
* The rules that apply to the selected group, and nothing else. Rules are
|
|
* always scoped to a group, so the group-centred page is the only place they
|
|
* need to be read: a flat list of every rule in the household was a list of
|
|
* facts about no particular policy.
|
|
*/
|
|
function GroupRules({ group, editable }: { group: Group; editable: boolean }) {
|
|
const rules = useQuery(rulesQuery());
|
|
return (
|
|
<section {...stylex.props(config.panel)}>
|
|
<h3 {...stylex.props(config.panelHeading)}>
|
|
Rules
|
|
{!editable && <code {...stylex.props(shared.mono, config.panelKey)}>rules</code>}
|
|
</h3>
|
|
<QueryPanel query={rules}>
|
|
{(all) => {
|
|
const scoped = all.filter((rule) => rule.group_id === group.id);
|
|
return (
|
|
<>
|
|
{scoped.length === 0 ? (
|
|
<p {...stylex.props(config.empty)}>No allow or block rules for this group.</p>
|
|
) : (
|
|
<RulesTable rules={scoped} editable={editable} />
|
|
)}
|
|
{editable && <CreateRuleForm group={group} />}
|
|
</>
|
|
);
|
|
}}
|
|
</QueryPanel>
|
|
</section>
|
|
);
|
|
}
|
|
|
|
function RulesTable({ rules, editable }: { rules: Rule[]; editable: boolean }) {
|
|
const queryClient = useQueryClient();
|
|
const remove = useMutation(ruleDeleteMutation(queryClient));
|
|
const [pendingDelete, setPendingDelete] = useState<Rule | null>(null);
|
|
|
|
return (
|
|
<>
|
|
<div {...stylex.props(shared.tableWrap)}>
|
|
<table {...stylex.props(config.table)}>
|
|
<thead>
|
|
<tr>
|
|
<th {...stylex.props(shared.th)}>Pattern</th>
|
|
<th {...stylex.props(shared.th)}>Kind</th>
|
|
<th {...stylex.props(shared.th)}>Action</th>
|
|
<th {...stylex.props(shared.th)}>Created</th>
|
|
{editable && (
|
|
<th {...stylex.props(shared.th)}>
|
|
<span {...stylex.props(shared.srOnly)}>Actions</span>
|
|
</th>
|
|
)}
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rules.map((rule) => (
|
|
<tr key={rule.id}>
|
|
<td {...stylex.props(shared.td, styles.pattern)}>{rule.pattern}</td>
|
|
<td {...stylex.props(shared.td)}>{rule.kind}</td>
|
|
<td {...stylex.props(shared.td)}>
|
|
<span {...stylex.props(rule.action === "allow" ? styles.allow : styles.block)}>
|
|
{rule.action}
|
|
</span>
|
|
</td>
|
|
<td {...stylex.props(shared.td)}>{formatTime(rule.created_at)}</td>
|
|
{editable && (
|
|
<td {...stylex.props(shared.td)}>
|
|
<button
|
|
type="button"
|
|
onClick={() => setPendingDelete(rule)}
|
|
disabled={remove.isPending}
|
|
{...stylex.props(shared.dangerLinkButton, shared.focusRing)}
|
|
>
|
|
Delete
|
|
</button>
|
|
</td>
|
|
)}
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<InlineError error={remove.error} />
|
|
<ConfirmDialog
|
|
isOpen={pendingDelete !== null}
|
|
title="Delete rule"
|
|
message={
|
|
pendingDelete === null
|
|
? ""
|
|
: `Delete the ${pendingDelete.action} rule for "${pendingDelete.pattern}"?`
|
|
}
|
|
confirmLabel="Delete"
|
|
onConfirm={() => {
|
|
if (pendingDelete !== null) remove.mutate(pendingDelete.id);
|
|
setPendingDelete(null);
|
|
}}
|
|
onCancel={() => setPendingDelete(null)}
|
|
/>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function CreateRuleForm({ group }: { group: Group }) {
|
|
const queryClient = useQueryClient();
|
|
const create = useMutation(ruleCreateMutation(queryClient));
|
|
const [pattern, setPattern] = useState("");
|
|
const [kind, setKind] = useState<RuleKind>("exact");
|
|
const [action, setAction] = useState<RuleAction>("block");
|
|
|
|
function onSubmit(event: FormEvent) {
|
|
event.preventDefault();
|
|
// A regex pattern is stored and matched byte for byte, so the UI must not
|
|
// edit it: trimming here would make a UI-created rule differ from the same
|
|
// bytes posted to /api/rules. Name-shaped kinds are normalized server-side,
|
|
// so trimming them only spares a pasted space a 400.
|
|
const sent = kind === "regex" ? pattern : pattern.trim();
|
|
create.mutate({ group_id: group.id, pattern: sent, kind, action }, { onSuccess: () => setPattern("") });
|
|
}
|
|
|
|
return (
|
|
<form onSubmit={onSubmit} {...stylex.props(styles.ruleForm)}>
|
|
<h4 {...stylex.props(styles.fieldLabel)}>Create rule in {group.name}</h4>
|
|
<div>
|
|
<label htmlFor="rule-pattern" {...stylex.props(styles.fieldLabel)}>
|
|
Pattern
|
|
</label>
|
|
<input
|
|
id="rule-pattern"
|
|
type="text"
|
|
required
|
|
value={pattern}
|
|
onChange={(event) => setPattern(event.target.value)}
|
|
placeholder="ads.example.com, *.example.com or ^ad[0-9]+-"
|
|
// A phone keyboard capitalizing the first letter is silent for
|
|
// exact and wildcard (normalized server-side) but fatal for a
|
|
// regex, which matches the lowercase query name byte for byte.
|
|
autoCapitalize="none"
|
|
autoCorrect="off"
|
|
spellCheck={false}
|
|
{...stylex.props(shared.input, shared.focusRing)}
|
|
/>
|
|
</div>
|
|
<div {...stylex.props(styles.fieldGrid)}>
|
|
<Select
|
|
label="Kind"
|
|
value={kind}
|
|
onChange={(value) => setKind(value as RuleKind)}
|
|
options={KIND_OPTIONS}
|
|
/>
|
|
<Select
|
|
label="Action"
|
|
value={action}
|
|
onChange={(value) => setAction(value as RuleAction)}
|
|
options={ACTION_OPTIONS}
|
|
/>
|
|
</div>
|
|
<div>
|
|
<button
|
|
type="submit"
|
|
disabled={create.isPending}
|
|
{...stylex.props(shared.primaryButton, shared.focusRing)}
|
|
>
|
|
{create.isPending ? "Creating…" : "Create rule"}
|
|
</button>
|
|
</div>
|
|
<InlineError error={create.error} />
|
|
</form>
|
|
);
|
|
}
|