feat(server): describe server role options in listbox dropdown

Add optional per-option description support to the listbox component,
rendered as muted text below the option label.

Use it on the server role selector (new server and server settings) to
explain each role, and note that GitHub Actions runners require the
"Builds only" role in helper texts and the runners empty state.
This commit is contained in:
Andras Bacsai
2026-10-01 14:47:49 +02:00
parent 72e874e6e1
commit 77ea9b3da7
4 changed files with 20 additions and 12 deletions
@@ -4,7 +4,7 @@
'label' => null,
'helper' => null,
'required' => false,
'options' => [], // list of ['value' => ..., 'label' => ..., 'disabled' => bool]
'options' => [], // list of ['value' => ..., 'label' => ..., 'description' => ?string, 'disabled' => bool]
'placeholder' => 'Select…',
'emptyText' => 'No options available.',
'live' => false,
@@ -163,7 +163,11 @@
<button type="button" class="listbox-option" role="option"
:class="{ 'listbox-option-disabled': option.disabled }"
:aria-selected="String(option.value) === String(value)" @click="choose(option)">
<span class="truncate" x-text="option.label"></span>
<span class="flex min-w-0 flex-col">
<span class="truncate" x-text="option.label"></span>
<span x-show="option.description" x-text="option.description"
class="text-xs whitespace-normal text-neutral-500 dark:text-fg-dim"></span>
</span>
<svg x-show="String(option.value) === String(value)" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"
class="size-3.5 shrink-0">
@@ -198,7 +202,11 @@
<button type="button" class="listbox-option" role="option"
:class="{ 'listbox-option-disabled': option.disabled }"
:aria-selected="String(option.value) === String(value)" @click="choose(option)">
<span class="truncate" x-text="option.label"></span>
<span class="flex min-w-0 flex-col">
<span class="truncate" x-text="option.label"></span>
<span x-show="option.description" x-text="option.description"
class="text-xs whitespace-normal text-neutral-500 dark:text-fg-dim"></span>
</span>
<svg x-show="String(option.value) === String(value)" xmlns="http://www.w3.org/2000/svg"
fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"
class="size-3.5 shrink-0">
@@ -22,7 +22,7 @@
</a>
</x-slot:actions>
<x-empty size="sm" title="This server is not enabled for builds"
description="GitHub Actions runners only run on servers with the Build role. Change the server role in the General settings."
description="GitHub Actions runners only run on servers with the Builds only role. Change the server role in the General settings."
icon-name="play-circle" />
</x-application.settings-section>
@elseif ($this->githubApps->isEmpty())
@@ -84,11 +84,11 @@
<x-forms.input type="number" id="port" label="Port" required />
</div>
<x-forms.listbox id="server_role"
helper="Choose whether this server runs deployments, application builds, or both."
helper="Choose whether this server runs deployments, application builds, or both. GitHub Actions runners need the Builds only role."
label="Server role" :options="[
['value' => 'deployment', 'label' => 'Deployments only'],
['value' => 'build', 'label' => 'Builds only'],
['value' => 'both', 'label' => 'Deployments and builds'],
['value' => 'deployment', 'label' => 'Deployments only', 'description' => 'Runs your resources. Images are built on a build server.'],
['value' => 'build', 'label' => 'Builds only', 'description' => 'Builds images for other servers. Required for GitHub Actions runners.'],
['value' => 'both', 'label' => 'Deployments and builds', 'description' => 'Builds and runs your resources on this server.'],
]" />
</x-forms.collapsible>
</x-application.settings-section>
@@ -238,11 +238,11 @@
<div class="mt-4 border-t border-neutral-200 pt-4 dark:border-white/[0.08]">
<x-forms.listbox canGate="update" :canResource="$server" id="serverRole"
label="Server role" onChange="requestServerRoleChange"
helper="Builds can use large amounts of CPU and memory. Deployments on the same server can become slow or unreachable during a build."
helper="Builds can use large amounts of CPU and memory. Deployments on the same server can become slow or unreachable during a build. GitHub Actions runners need the Builds only role."
:disabled="$isValidating" :options="[
['value' => 'deployment', 'label' => 'Deployments only'],
['value' => 'build', 'label' => 'Builds only'],
['value' => 'both', 'label' => 'Deployments and builds'],
['value' => 'deployment', 'label' => 'Deployments only', 'description' => 'Runs your resources. Images are built on a build server.'],
['value' => 'build', 'label' => 'Builds only', 'description' => 'Builds images for other servers. Required for GitHub Actions runners.'],
['value' => 'both', 'label' => 'Deployments and builds', 'description' => 'Builds and runs your resources on this server.'],
]" />
</div>
@endif