tiennm99/coolify
1
0
Fork 0
mirror of https://github.com/tiennm99/coolify.git synced 2026-08-20 02:27:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): show loading state on compose validate button

Browse Source 
Disable the Validate control and show a spinner until validateCompose
finishes, then clear state via compose-validate-finished.
This commit is contained in:
Andras Bacsai
2026-08-07 18:05:51 +02:00
parent a37f1369c8
commit 968ea69e7d
3 changed files with 13 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/livewire/project/service/edit-compose.blade.php
+1 -1
View File
@@ -1,6 +1,6 @@
<div x-data="{ raw: true, showNormalTextarea: false }"
@compose-preview-toggle.window="raw = !raw"
@compose-validate.window="$wire.validateCompose()"
@compose-validate.window="$wire.validateCompose().finally(() => $dispatch('compose-validate-finished'))"
@compose-save.window="$wire.saveEditedCompose()"
class="flex min-h-0 flex-col gap-3">
<x-callout type="info" title="Volume names">
resources/views/livewire/project/service/stack-form.blade.php
+7 -2
View File
@@ -12,7 +12,8 @@
<x-modal-input buttonTitle="Edit Compose file" title="Docker Compose" :closeOutside="false"
:isLarge="true">
<x-slot:headerActions>
<div x-data="{ preview: false, saving: false }"
<div x-data="{ preview: false, validating: false, saving: false }"
@compose-validate-finished.window="validating = false"
@compose-save-finished.window="saving = false" class="flex items-center gap-2">
<x-forms.button
@click="preview = !preview; $dispatch('compose-preview-toggle')">
@@ -20,7 +21,11 @@
<span x-text="preview ? 'Back to source Compose' : 'Preview generated Compose'"></span>
</x-forms.button>
@if (blank($service->service_type))
<x-forms.button @click="$dispatch('compose-validate')">Validate</x-forms.button>
<x-forms.button @click="validating = true; $dispatch('compose-validate')"
x-bind:disabled="validating">
<x-loading-on-button x-show="validating" x-cloak />
Validate
</x-forms.button>
@endif
<x-forms.button @click="saving = true; $dispatch('compose-save')"
x-bind:disabled="saving" isHighlighted>
tests/Feature/ComposeEditorLayoutTest.php
+5
View File
@@ -13,6 +13,10 @@ it('uses the large modal treatment for the compose editor', function () {
->toContain("\$dispatch('compose-preview-toggle')")
->toContain("\$dispatch('compose-save')")
->toContain('@compose-save-finished.window="saving = false"')
->toContain('@compose-validate-finished.window="validating = false"')
->toContain('@click="validating = true; $dispatch(\'compose-validate\')"')
->toContain('x-bind:disabled="validating"')
->toContain('<x-loading-on-button x-show="validating" x-cloak />')
->toContain('<x-loading-on-button x-show="saving" x-cloak />')
->toContain('x-bind:disabled="saving"')
->not->toContain('name="refresh"')
@@ -36,6 +40,7 @@ it('renders the compose editor with clear guidance settings and actions', functi
->toContain('min-h-[24rem]')
->toContain('@compose-preview-toggle.window')
->toContain('@compose-save.window')
->toContain('@compose-validate.window="$wire.validateCompose().finally(() => $dispatch(\'compose-validate-finished\'))"')
->not->toContain("finally(() => \$dispatch('compose-save-finished'))")
->not->toContain('sticky bottom-0')
->not->toContain('Cancel')