fix: resolve uncloseable database restore modal (#7345)

app/Livewire/ActivityMonitor.php

@@ -10,7 +10,7 @@ class ActivityMonitor extends Component
 {
     public ?string $header = null;
 
-    public $activityId;
+    public $activityId = null;
 
     public $eventToDispatch = 'activityFinished';
 
@@ -49,9 +49,24 @@ public function newMonitorActivity($activityId, $eventToDispatch = 'activityFini
 
     public function hydrateActivity()
     {
+        if ($this->activityId === null) {
+            $this->activity = null;
+
+            return;
+        }
+
         $this->activity = Activity::find($this->activityId);
     }
 
+    public function updatedActivityId($value)
+    {
+        if ($value) {
+            $this->hydrateActivity();
+            $this->isPollingActive = true;
+            self::$eventDispatched = false;
+        }
+    }
+
     public function polling()
     {
         $this->hydrateActivity();

app/Livewire/Project/Database/Import.php

@@ -133,6 +133,8 @@ private function validateServerPath(string $path): bool
 
     public string $customLocation = '';
 
+    public ?int $activityId = null;
+
     public string $postgresqlRestoreCommand = 'pg_restore -U $POSTGRES_USER -d $POSTGRES_DB';
 
     public string $mysqlRestoreCommand = 'mysql -u $MYSQL_USER -p$MYSQL_PASSWORD $MYSQL_DATABASE';
@@ -156,9 +158,15 @@ public function getListeners()
 
         return [
             "echo-private:user.{$userId},DatabaseStatusChanged" => '$refresh',
+            'slideOverClosed' => 'resetActivityId',
         ];
     }
 
+    public function resetActivityId()
+    {
+        $this->activityId = null;
+    }
+
     public function mount()
     {
         $this->parameters = get_route_parameters();
@@ -327,6 +335,9 @@ public function runImport()
                     'serverId' => $this->server->id,
                 ]);
 
+                // Track the activity ID
+                $this->activityId = $activity->id;
+
                 // Dispatch activity to the monitor and open slide-over
                 $this->dispatch('activityMonitor', $activity->id);
                 $this->dispatch('databaserestore');
@@ -548,6 +559,9 @@ public function restoreFromS3()
                 'serverId' => $this->server->id,
             ]);
 
+            // Track the activity ID
+            $this->activityId = $activity->id;
+
             // Dispatch activity to the monitor and open slide-over
             $this->dispatch('activityMonitor', $activity->id);
             $this->dispatch('databaserestore');

resources/views/components/slide-over.blade.php

@@ -1,7 +1,13 @@
 @props(['closeWithX' => false, 'fullScreen' => false])
 <div x-data="{
     slideOverOpen: false
-}" {{ $attributes->merge(['class' => 'relative w-auto h-auto']) }}>
+}"
+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