refactor: improve cloud-init script UX and remove description field

Changes:
1. Remove description field from cloud-init scripts
   - Updated migration to remove description column
   - Updated model to remove description from fillable array

2. Redesign script name input layout
   - Move script name input next to checkbox (always visible)
   - Remove conditional rendering - input always shown
   - Use placeholder instead of label for cleaner look

3. Fix dropdown type error
   - Replace wire:change event with wire:model.live
   - Use updatedSelectedCloudInitScriptId() lifecycle hook
   - Add "disabled" attribute to placeholder option
   - Properly handle empty string vs null in type casting

4. Improve validation
   - Require both script content AND name for saving
   - Remove description validation rule
   - Add selected_cloud_init_script_id validation

5. Auto-populate name when loading saved script
   - When user selects saved script, auto-fill the name field

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Andras Bacsai 2025-10-11 11:16:28 +02:00
parent e4bf8ab337
commit 6c0840d4e0
4 changed files with 15 additions and 23 deletions

View file

@ -69,7 +69,7 @@ class ByHetzner extends Component
public ?string $cloud_init_script_name = null;
public ?string $cloud_init_script_description = null;
public ?int $selected_cloud_init_script_id = null;
#[Locked]
public Collection $saved_cloud_init_scripts;
@ -155,8 +155,8 @@ protected function rules(): array
'enable_ipv6' => 'required|boolean',
'cloud_init_script' => 'nullable|string',
'save_cloud_init_script' => 'boolean',
'cloud_init_script_name' => 'required_if:save_cloud_init_script,true|nullable|string|max:255',
'cloud_init_script_description' => 'nullable|string',
'cloud_init_script_name' => 'nullable|string|max:255',
'selected_cloud_init_script_id' => 'nullable|integer|exists:cloud_init_scripts,id',
]);
}
@ -394,11 +394,12 @@ public function updatedSelectedImage($value)
ray('Image selected', $value);
}
public function loadCloudInitScript(?int $scriptId)
public function updatedSelectedCloudInitScriptId($value)
{
if ($scriptId) {
$script = CloudInitScript::ownedByCurrentTeam()->findOrFail($scriptId);
if ($value) {
$script = CloudInitScript::ownedByCurrentTeam()->findOrFail($value);
$this->cloud_init_script = $script->script;
$this->cloud_init_script_name = $script->name;
}
}
@ -496,14 +497,13 @@ public function submit()
}
// Save cloud-init script if requested
if ($this->save_cloud_init_script && ! empty($this->cloud_init_script)) {
if ($this->save_cloud_init_script && ! empty($this->cloud_init_script) && ! empty($this->cloud_init_script_name)) {
$this->authorize('create', CloudInitScript::class);
CloudInitScript::create([
'team_id' => currentTeam()->id,
'name' => $this->cloud_init_script_name,
'script' => $this->cloud_init_script,
'description' => $this->cloud_init_script_description,
]);
}

View file

@ -10,7 +10,6 @@ class CloudInitScript extends Model
'team_id',
'name',
'script',
'description',
];
protected function casts(): array

View file

@ -16,7 +16,6 @@ public function up(): void
$table->foreignId('team_id')->constrained()->onDelete('cascade');
$table->string('name');
$table->text('script'); // Encrypted in the model
$table->text('description')->nullable();
$table->timestamps();
$table->index('team_id');

View file

@ -160,9 +160,9 @@ class="p-4 border border-yellow-500 dark:border-yellow-600 rounded bg-yellow-50
<div class="flex justify-between items-center">
<label class="text-sm font-medium">Cloud-Init Script (Optional)</label>
@if ($saved_cloud_init_scripts->count() > 0)
<x-forms.select id="load_script" wire:change="loadCloudInitScript($event.target.value)"
<x-forms.select wire:model.live="selected_cloud_init_script_id"
label="" helper="">
<option value="">Load saved script...</option>
<option value="" disabled>Load saved script...</option>
@foreach ($saved_cloud_init_scripts as $script)
<option value="{{ $script->id }}">{{ $script->name }}</option>
@endforeach
@ -173,17 +173,11 @@ class="p-4 border border-yellow-500 dark:border-yellow-600 rounded bg-yellow-50
helper="Add a cloud-init script to run when the server is created. See Hetzner's documentation for details."
rows="8" />
<div class="flex flex-col gap-2">
<x-forms.checkbox id="save_cloud_init_script" label="Save this script for later use"
helper="Save this cloud-init script to your team's library for reuse" />
@if ($save_cloud_init_script)
<div class="flex flex-col gap-2 ml-6">
<x-forms.input id="cloud_init_script_name" label="Script Name" required />
<x-forms.textarea id="cloud_init_script_description" label="Description (Optional)"
rows="2" />
</div>
@endif
<div class="flex items-center gap-2">
<x-forms.checkbox id="save_cloud_init_script" label="Save this script for later use" />
<div class="flex-1">
<x-forms.input id="cloud_init_script_name" label="" placeholder="Script name..." />
</div>
</div>
</div>