fix(backups): default S3 storage for backup schedules

Show the S3 storage selector even when S3 backups are disabled, save
storage changes immediately, and improve responsive confirmation buttons.
This commit is contained in:
Andras Bacsai committed 2026-07-02 12:47:54 +02:00
1 parent 76d429fb74
commit 74f4d04f53
5 files changed
+121 -40

No files matched your search

@@ -132,10 +132,10 @@
@class([
'relative h-auto',
'w-full' => $buttonFullWidth,
'w-auto' => ! $buttonFullWidth,
'w-full sm:w-auto' => ! $buttonFullWidth,
])>
@if (isset($trigger))
<div @click="modalOpen=true">
<div class="w-full" @click="modalOpen=true">
{{ $trigger }}
</div>
@elseif ($customButton)
@@ -1,7 +1,7 @@
<form wire:submit="submit">
<div class="flex flex-col gap-3 pb-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex flex-col gap-3 pb-4 sm:flex-row sm:items-center">
<h2>Scheduled Backup</h2>
<div class="grid grid-cols-1 gap-2 min-[420px]:grid-cols-2 sm:flex sm:flex-wrap sm:justify-end">
<div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
<x-forms.button type="submit" class="w-full sm:w-auto">
Save
</x-forms.button>
@@ -9,16 +9,19 @@
<x-forms.button wire:click='backupNow' class="w-full sm:w-auto">Backup Now</x-forms.button>
@endif
@if ($backup->database_id !== 0)
<div class="min-[420px]:col-span-2 sm:col-span-1">
<x-modal-confirmation title="Confirm Backup Schedule Deletion?"
buttonTitle="Delete Backups and Schedule" buttonFullWidth isErrorButton submitAction="delete"
<div class="w-full sm:w-auto">
<x-modal-confirmation title="Confirm Backup Schedule Deletion?" isErrorButton submitAction="delete"
:checkboxes="$checkboxes" :actions="[
'The selected backup schedule will be deleted.',
'Scheduled backups for this database will be stopped (if this is the only backup schedule for this database).',
]"
confirmationText="{{ $backup->database->name }}"
confirmationLabel="Please confirm the execution of the actions by entering the Database Name of the scheduled backups below"
shortConfirmationLabel="Database Name" />
shortConfirmationLabel="Database Name">
<x-slot:trigger>
<x-forms.button isError class="w-full sm:w-auto">Delete Backups and Schedule</x-forms.button>
</x-slot:trigger>
</x-modal-confirmation>
</div>
@endif
</div>
@@ -39,16 +42,27 @@
helper="When enabled, backup files will be deleted from local storage immediately after uploading to S3. This requires S3 backup to be enabled." />
@endif
</div>
@if ($saveS3)
<div class="w-full max-w-md pb-6">
<x-forms.select id="s3StorageId" label="S3 Storage" required>
<option value="default" disabled>Select a S3 storage</option>
<div class="w-full max-w-md pb-6">
<div class="flex gap-1 items-center mb-1 text-sm font-medium">
<span>S3 Storage</span>
@if (!$saveS3)
<span class="text-xs font-normal text-warning">(currently disabled)</span>
@endif
@if ($saveS3)
<x-highlighted text="*" />
@endif
</div>
<x-forms.select id="s3StorageId" wire:model.live="s3StorageId" :required="$saveS3"
:disabled="$availableS3Storages->isEmpty()">
@if ($availableS3Storages->isEmpty())
<option value="">No S3 storage available</option>
@else
@foreach ($availableS3Storages as $s3)
<option value="{{ $s3->id }}">{{ $s3->name }}</option>
@endforeach
</x-forms.select>
</div>
@endif
@endif
</x-forms.select>
</div>
<div class="flex flex-col gap-2">
<h3>Settings</h3>
<div class="flex gap-2 flex-col ">
@@ -1,6 +1,6 @@
<div wire:init='refreshBackupExecutions'>
@isset($backup)
<div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between">
<div class="flex flex-col gap-3 py-4 sm:flex-row sm:flex-wrap sm:items-center">
<h3 class="py-0">Executions <span class="text-xs">({{ $executions_count }})</span></h3>
@if ($executions_count > 0)
<div class="flex items-center gap-2">
@@ -21,14 +21,18 @@
</x-forms.button>
</div>
@endif
<div class="grid grid-cols-1 gap-2 min-[420px]:grid-cols-2 sm:flex sm:flex-wrap sm:justify-end">
<div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap">
<x-forms.button wire:click='cleanupFailed' class="w-full sm:w-auto">Cleanup Failed Backups</x-forms.button>
<x-modal-confirmation title="Cleanup Deleted Backup Entries?" buttonTitle="Cleanup Deleted" isErrorButton
buttonFullWidth submitAction="cleanupDeleted()"
<x-modal-confirmation title="Cleanup Deleted Backup Entries?" isErrorButton
submitAction="cleanupDeleted()"
:actions="['This will permanently delete all backup execution entries that are marked as deleted from local storage.', 'This only removes database entries, not actual backup files.']"
confirmationText="cleanup deleted backups"
confirmationLabel="Please confirm by typing 'cleanup deleted backups' below"
shortConfirmationLabel="Confirmation" />
shortConfirmationLabel="Confirmation">
<x-slot:trigger>
<x-forms.button isError class="w-full sm:w-auto">Cleanup Deleted</x-forms.button>
</x-slot:trigger>
</x-modal-confirmation>
</div>
</div>
<div @if (!$skip) wire:poll.5000ms="refreshBackupExecutions" @endif
@@ -156,9 +160,9 @@
<pre class="whitespace-pre-wrap text-sm">{{ data_get($execution, 'message') }}</pre>
</div>
@endif
<div class="flex flex-col gap-2 mt-4 min-[420px]:flex-row min-[420px]:flex-wrap">
<div class="grid grid-cols-2 gap-2 mt-4 sm:flex sm:flex-wrap">
@if (data_get($execution, 'status') === 'success')
<x-forms.button class="w-full dark:hover:bg-coolgray-400 min-[420px]:w-auto"
<x-forms.button class="w-full dark:hover:bg-coolgray-400 sm:w-auto"
x-on:click="download_file('{{ data_get($execution, 'id') }}')">Download</x-forms.button>
@endif
@php
@@ -177,11 +181,15 @@
$deleteActions[] = 'This backup execution record will be deleted.';
}
@endphp
<x-modal-confirmation title="Confirm Backup Deletion?" buttonTitle="Delete" isErrorButton
<x-modal-confirmation title="Confirm Backup Deletion?" isErrorButton
submitAction="deleteBackup({{ data_get($execution, 'id') }})" :checkboxes="$executionCheckboxes"
:actions="$deleteActions" confirmationText="{{ data_get($execution, 'filename') }}"
confirmationLabel="Please confirm the execution of the actions by entering the Backup Filename below"
shortConfirmationLabel="Backup Filename" 1 />
shortConfirmationLabel="Backup Filename">
<x-slot:trigger>
<x-forms.button isError class="w-full sm:w-auto">Delete</x-forms.button>
</x-slot:trigger>
</x-modal-confirmation>
</div>
</div>
@empty