milestone 32: task-shaped configuration, file mode as a rendering, config status api
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
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
This commit is contained in:
@@ -0,0 +1,596 @@
|
||||
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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user