From 5324ac3bd93f6255ee04da05324917cd63d51b48 Mon Sep 17 00:00:00 2001
From: Andras Bacsai <5845193+andrasbacsai@users.noreply.github.com>
Date: Sun, 2 Nov 2025 16:57:00 +0100
Subject: [PATCH] fix: conditionally render activity monitors to prevent output
 conflicts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add currentActivityId property to track the active process
- Replace event dispatching with property assignment for cleaner state management
- S3 download monitor only renders during download and is removed when complete
- Database restore monitor only renders during restore operation
- Both monitors now share the same activity-monitor component instance with proper lifecycle management
- When user starts restore after S3 download, S3 monitor is removed from DOM
- Fixes issue where S3 download and database restore showed identical output

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 app/Livewire/Project/Database/Import.php      |  9 ++--
 .../project/database/import.blade.php         | 42 ++++++++++---------
 2 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/app/Livewire/Project/Database/Import.php b/app/Livewire/Project/Database/Import.php
index fe30b6f67..d69316a59 100644
--- a/app/Livewire/Project/Database/Import.php
+++ b/app/Livewire/Project/Database/Import.php
@@ -68,6 +68,8 @@ class Import extends Component
 
     public bool $s3DownloadInProgress = false;
 
+    public ?int $currentActivityId = null;
+
     public function getListeners()
     {
         $userId = Auth::id();
@@ -263,7 +265,7 @@ public function runImport()
                     'container' => $this->container,
                     'serverId' => $this->server->id,
                 ]);
-                $this->dispatch('activityMonitor', $activity->id);
+                $this->currentActivityId = $activity->id;
             }
         } catch (\Throwable $e) {
             return handleError($e, $this);
@@ -403,8 +405,8 @@ public function downloadFromS3()
 
             $this->s3DownloadedFile = $downloadPath;
             $this->filename = $downloadPath;
+            $this->currentActivityId = $activity->id;
 
-            $this->dispatch('activityMonitor', $activity->id);
             $this->dispatch('info', 'Downloading file from S3. This may take a few minutes for large backups...');
         } catch (\Throwable $e) {
             $this->s3DownloadInProgress = false;
@@ -486,7 +488,7 @@ public function restoreFromS3()
                     's3DownloadedFile' => $this->s3DownloadedFile,
                     'resourceUuid' => $this->resource->uuid,
                 ]);
-                $this->dispatch('activityMonitor', $activity->id);
+                $this->currentActivityId = $activity->id;
             }
         } catch (\Throwable $e) {
             return handleError($e, $this);
@@ -516,6 +518,7 @@ public function cancelS3Download()
         // Reset S3 download state
         $this->s3DownloadedFile = null;
         $this->s3DownloadInProgress = false;
+        $this->currentActivityId = null;
         $this->filename = null;
     }
 }
diff --git a/resources/views/livewire/project/database/import.blade.php b/resources/views/livewire/project/database/import.blade.php
index be5b0f00a..49f51af5a 100644
--- a/resources/views/livewire/project/database/import.blade.php
+++ b/resources/views/livewire/project/database/import.blade.php
@@ -147,23 +147,25 @@
                         </div>
                     </div>
 
-                    <div x-show="s3DownloadInProgress" class="pt-2">
-                        <div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
-                            backups.</div>
-                        <livewire:activity-monitor header="S3 Download Progress" :showWaiting="false" />
-                    </div>
-
-                    <div x-show="s3DownloadedFile && !s3DownloadInProgress" class="pt-2">
-                        <div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
-                        <div class="flex gap-2 pt-2">
-                            <x-forms.button class="w-full" wire:click='restoreFromS3'>
-                                Restore Database from S3
-                            </x-forms.button>
-                            <x-forms.button class="w-full" wire:click='cancelS3Download'>
-                                Cancel
-                            </x-forms.button>
+                    @if ($s3DownloadInProgress)
+                        <div class="pt-2">
+                            <div class="text-sm text-warning">Downloading from S3... This may take a few minutes for large
+                                backups.</div>
+                            <livewire:activity-monitor :activityId="$currentActivityId" header="S3 Download Progress" :showWaiting="false" />
                         </div>
-                    </div>
+                    @elseif ($s3DownloadedFile)
+                        <div class="pt-2">
+                            <div class="text-sm text-success">File downloaded successfully and ready for restore.</div>
+                            <div class="flex gap-2 pt-2">
+                                <x-forms.button class="w-full" wire:click='restoreFromS3'>
+                                    Restore Database from S3
+                                </x-forms.button>
+                                <x-forms.button class="w-full" wire:click='cancelS3Download'>
+                                    Cancel
+                                </x-forms.button>
+                            </div>
+                        </div>
+                    @endif
                 </div>
             @endif
 
@@ -172,9 +174,11 @@
                 <div>Location: <span x-text="filename ?? 'N/A'"></span> <span x-text="filesize">/ </span></div>
                 <x-forms.button class="w-full my-4" wire:click='runImport'>Restore Backup</x-forms.button>
             </div>
-            <div class="container w-full mx-auto" x-show="$wire.importRunning">
-                <livewire:activity-monitor header="Database Restore Output" :showWaiting="false" />
-            </div>
+            @if ($importRunning)
+                <div class="container w-full mx-auto">
+                    <livewire:activity-monitor :activityId="$currentActivityId" header="Database Restore Output" :showWaiting="false" />
+                </div>
+            @endif
         @else
             <div>Database must be running to restore a backup.</div>
         @endif