swarm-ui: say when the hive or permission list failed to load, and name the permissions group
This commit is contained in:
parent
8c67ac01fe
commit
46a6fc36d8
2 changed files with 25 additions and 8 deletions
|
|
@ -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>
|
||||||
|
|
|
||||||
|
|
@ -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>
|
||||||
);
|
);
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue