aa18c48823
Fixes the "Snapshot missing on Livewire component" error that occurs when toggling the "Backup includes all databases" checkbox during MariaDB database import operations. Root Cause: - ActivityMonitor component was initialized without proper lifecycle hooks - When parent Import component re-rendered (via checkbox toggle), the ActivityMonitor's Livewire snapshot became stale - Missing null checks caused errors when querying with undefined activityId - No state cleanup when slide-over closed, causing issues on subsequent opens Changes: - Add updatedActivityId() lifecycle hook to ActivityMonitor for proper hydration - Add defensive null check in hydrateActivity() to prevent query errors - Track activityId in Import component for state management - Add slideOverClosed event dispatch in slide-over component - Add event listener in Import component to reset activityId on close Testing: - Manually verify checkbox toggle doesn't trigger popup - Verify actual restore operations work correctly - Test both file-based and S3-based restore methods - Ensure X button properly closes the modal - Verify no console errors or Livewire warnings 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
3.6 KiB
PHP
60 lines
3.6 KiB
PHP
@props(['closeWithX' => false, 'fullScreen' => false])
|
|
<div x-data="{
|
|
slideOverOpen: false
|
|
}"
|
|
x-init="$watch('slideOverOpen', value => {
|
|
if (!value) {
|
|
$dispatch('slideOverClosed')
|
|
}
|
|
})"
|
|
{{ $attributes->merge(['class' => 'relative w-auto h-auto']) }}>
|
|
{{ $slot }}
|
|
<template x-teleport="body">
|
|
<div x-show="slideOverOpen" @if (!$closeWithX) @keydown.window.escape="slideOverOpen=false" @endif
|
|
class="relative z-99 ">
|
|
<div x-show="slideOverOpen" @if (!$closeWithX) @click="slideOverOpen = false" @endif
|
|
class="fixed inset-0 dark:bg-black/60 backdrop-blur-xs"></div>
|
|
<div class="fixed inset-0 overflow-hidden">
|
|
<div class="absolute inset-0 overflow-hidden ">
|
|
<div class="fixed inset-y-0 right-0 flex max-w-full pl-10">
|
|
<div x-show="slideOverOpen"
|
|
@if (!$closeWithX) @click.away="slideOverOpen = false" @endif
|
|
x-transition:enter="transform transition ease-in-out duration-100 sm:duration-300"
|
|
x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0"
|
|
x-transition:leave="transform transition ease-in-out duration-100 sm:duration-300"
|
|
x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full"
|
|
@class([
|
|
'max-w-xl w-screen' => !$fullScreen,
|
|
'max-w-4xl w-screen' => $fullScreen,
|
|
])>
|
|
<div
|
|
class="flex flex-col h-full py-6 overflow-hidden border-l shadow-lg bg-neutral-50 dark:bg-base dark:border-neutral-800 border-neutral-200">
|
|
<div class="px-4 pb-4 sm:px-5">
|
|
<div class="flex items-start justify-between pb-1">
|
|
<h2 class="text-2xl leading-6" id="slide-over-title">
|
|
{{ $title }}</h2>
|
|
<div class="flex items-center h-auto ml-3">
|
|
<button @click="slideOverOpen=false"
|
|
class="absolute top-0 right-0 z-30 flex items-center justify-center px-3 py-2 mt-4 mr-2 space-x-1 text-xs font-normal border-none rounded-sm">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none"
|
|
viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round"
|
|
d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="relative flex-1 px-4 mt-5 overflow-auto sm:px-5 scrollbar">
|
|
<div class="absolute inset-0 px-4 sm:px-5">
|
|
{{ $content }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|