rosslh/coolify
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: improve cloud-init scripts UI styling and behavior

Browse source 
Fix multiple UI/UX issues with cloud-init scripts management:

1. Fix card styling - Remove purple box background, use simple border
   - Changed from .box class to inline flex/border styling
   - Matches cloud provider tokens styling pattern

2. Remove script preview section
   - Preview was taking too much space and looked cluttered
   - Users can edit to see full script content

3. Make edit modal full width
   - Added fullWidth attribute to x-modal-input component
   - Provides better editing experience for long scripts

4. Fix fields clearing after update
   - Fields were being reset even in edit mode
   - Now only reset fields when creating new script
   - Edit mode preserves values after save

🤖 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 13:30:44 +02:00
parent 5463f4d496
commit 6c5adce633
2 changed files with 30 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
app/Livewire/Security/CloudInitScriptForm.php
View file

@ -78,7 +78,11 @@ public function save()
$message = 'Cloud-init script created successfully.'; $message = 'Cloud-init script created successfully.';
} }
$this->reset(['name', 'script', 'scriptId']); // Only reset fields if creating (not editing)
if (! $this->scriptId) {
$this->reset(['name', 'script']);
}
$this->dispatch('scriptSaved'); $this->dispatch('scriptSaved');
$this->dispatch('success', $message); $this->dispatch('success', $message);

57
resources/views/livewire/security/cloud-init-scripts.blade.php
View file

@ -12,42 +12,35 @@
<div class="grid gap-4 lg:grid-cols-2"> <div class="grid gap-4 lg:grid-cols-2">
@forelse ($scripts as $script) @forelse ($scripts as $script)
<div wire:key="script-{{ $script->id }}" class="box group"> <div wire:key="script-{{ $script->id }}"
<div class="flex flex-col gap-2 mx-6"> class="flex flex-col gap-1 p-2 border dark:border-coolgray-200 hover:no-underline">
<div class="flex justify-between items-start"> <div class="flex justify-between items-center">
<div class="flex-1"> <div class="flex-1">
<div class="box-title">{{ $script->name }}</div> <div class="font-bold dark:text-white">{{ $script->name }}</div>
<div class="text-xs text-neutral-500 dark:text-neutral-400"> <div class="text-xs text-neutral-500 dark:text-neutral-400">
Created {{ $script->created_at->diffForHumans() }} Created {{ $script->created_at->diffForHumans() }}
</div>
</div> </div>
</div> </div>
</div>
<div class="mt-2"> <div class="flex gap-2 mt-2">
<div class="text-xs text-neutral-500 dark:text-neutral-400 mb-1">Script Preview:</div> @can('update', $script)
<pre <x-modal-input buttonTitle="Edit" title="Edit Cloud-Init Script" fullWidth>
class="p-2 text-xs rounded bg-neutral-100 dark:bg-coolgray-100 overflow-x-auto max-h-32 overflow-y-auto">{{ Str::limit($script->script, 200) }}</pre> <livewire:security.cloud-init-script-form :scriptId="$script->id"
</div> wire:key="edit-{{ $script->id }}" />
</x-modal-input>
@endcan
<div class="flex gap-2 mt-2"> @can('delete', $script)
@can('update', $script) <x-modal-confirmation title="Confirm Script Deletion?" isErrorButton buttonTitle="Delete"
<x-modal-input buttonTitle="Edit" title="Edit Cloud-Init Script"> submitAction="deleteScript({{ $script->id }})" :actions="[
<livewire:security.cloud-init-script-form :scriptId="$script->id" 'This cloud-init script will be permanently deleted.',
wire:key="edit-{{ $script->id }}" /> 'This action cannot be undone.',
</x-modal-input> ]" confirmationText="{{ $script->name }}"
@endcan confirmationLabel="Please confirm the deletion by entering the script name below"
shortConfirmationLabel="Script Name" :confirmWithPassword="false"
@can('delete', $script) step2ButtonText="Delete Script" />
<x-modal-confirmation title="Confirm Script Deletion?" isErrorButton buttonTitle="Delete" @endcan
submitAction="deleteScript({{ $script->id }})" :actions="[
'This cloud-init script will be permanently deleted.',
'This action cannot be undone.',
]" confirmationText="{{ $script->name }}"
confirmationLabel="Please confirm the deletion by entering the script name below"
shortConfirmationLabel="Script Name" :confirmWithPassword="false"
step2ButtonText="Delete Script" />
@endcan
</div>
</div> </div>
</div> </div>
@empty @empty