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:
parent
e4bf8ab337
commit
6c0840d4e0
4 changed files with 15 additions and 23 deletions
|
|
@ -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,
|
||||
]);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,7 +10,6 @@ class CloudInitScript extends Model
|
|||
'team_id',
|
||||
'name',
|
||||
'script',
|
||||
'description',
|
||||
];
|
||||
|
||||
protected function casts(): array
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue