Watch
0
0
Fork
You've already forked hyperhive
0

swarm-ui: say when the hive or permission list failed to load, and name the permissions group

This commit is contained in:
iris 2026-10-21 20:58:54 +02:00 • committed by mara
commit 46a6fc36d8
2 changed files with 25 additions and 8 deletions

View file

@ -309,7 +309,9 @@ export function CreateAgentForm({
disabled={!hivesReady} disabled={!hivesReady}
placeholder={ placeholder={
!hives !hives
? "loading…" ? hivesError
? "could not load hives"
: "loading…"
: hives.length === 0 : hives.length === 0
? "no hives configured" ? "no hives configured"
: "select a hive" : "select a hive"
@ -340,8 +342,8 @@ export function CreateAgentForm({
)} )}
</> </>
)} )}
<FormField label="permissions" htmlFor="agent-permissions"> <FormField label="permissions" labelId="agent-permissions-label">
<div id="agent-permissions"> <div role="group" aria-labelledby="agent-permissions-label">
{catalogue ? ( {catalogue ? (
<MultiselectFilterOptions <MultiselectFilterOptions
options={catalogue.all} options={catalogue.all}
@ -349,7 +351,9 @@ export function CreateAgentForm({
onToggle={(v) => setSelected((s) => togglePermission(s, v))} onToggle={(v) => setSelected((s) => togglePermission(s, v))}
/> />
) : ( ) : (
<span>loading…</span> <span>
{catalogueError ? "could not load permissions" : "loading…"}
</span>
)} )}
</div> </div>
</FormField> </FormField>

View file

@ -4,23 +4,36 @@
// don't each reinvent the label/spacing chrome; a bare labelled `<div>` // don't each reinvent the label/spacing chrome; a bare labelled `<div>`
// wrapper has no independent identity worth a `/components` entry of // wrapper has no independent identity worth a `/components` entry of
// its own. // its own.
//
// A control a `<label for>` can name (input, select, textarea) passes
// `htmlFor`. A group of controls (a checkbox set) has no single element to
// point at: it passes `labelId` instead and puts `role="group"` with
// `aria-labelledby` on the group.
import type { ComponentChildren } from "preact"; import type { ComponentChildren } from "preact";
import "./FormField.css"; import "./FormField.css";
export function FormField({ export function FormField({
label, label,
htmlFor, htmlFor,
labelId,
children, children,
}: { }: {
label: string; label: string;
htmlFor: string; htmlFor?: string;
labelId?: string;
children: ComponentChildren; children: ComponentChildren;
}) { }) {
return ( return (
<div class="ui-form-field"> <div class="ui-form-field">
<label class="ui-form-field-label" for={htmlFor}> {htmlFor !== undefined ? (
{label} <label class="ui-form-field-label" for={htmlFor}>
</label> {label}
</label>
) : (
<span class="ui-form-field-label" id={labelId}>
{label}
</span>
)}
{children} {children}
</div> </div>
); );