Refactor AlertBanner to be ViewComponent (#1555)

app/Filament/Server/Resources/FileResource/Pages/EditFiles.php

@@ -133,7 +133,7 @@ class EditFiles extends Page
                                 try {
                                     return $this->getDaemonFileRepository()->getContent($this->path, config('panel.files.max_edit_size'));
                                 } catch (FileSizeTooLargeException) {
-                                    AlertBanner::make()
+                                    AlertBanner::make('file_too_large')
                                         ->title('<code>' . basename($this->path) . '</code> is too large!')
                                         ->body('Max is ' . convert_bytes_to_readable(config('panel.files.max_edit_size')))
                                         ->danger()
@@ -142,7 +142,7 @@ class EditFiles extends Page
 
                                     $this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
                                 } catch (FileNotFoundException) {
-                                    AlertBanner::make()
+                                    AlertBanner::make('file_not_found')
                                         ->title('<code>' . basename($this->path) . '</code> not found!')
                                         ->danger()
                                         ->closable()
@@ -150,7 +150,7 @@ class EditFiles extends Page
 
                                     $this->redirect(ListFiles::getUrl(['path' => dirname($this->path)]));
                                 } catch (FileNotEditableException) {
-                                    AlertBanner::make()
+                                    AlertBanner::make('file_is_directory')
                                         ->title('<code>' . basename($this->path) . '</code> is a directory')
                                         ->danger()
                                         ->closable()
@@ -184,15 +184,6 @@ class EditFiles extends Page
                 ->info()
                 ->closable()
                 ->send();
-
-            try {
-                $this->getDaemonFileRepository()->getDirectory('/');
-            } catch (ConnectionException) {
-                AlertBanner::make('node_connection_error')
-                    ->title('Could not connect to the node!')
-                    ->danger()
-                    ->send();
-            }
         }
     }
 

app/Filament/Server/Resources/FileResource/Pages/ListFiles.php

@@ -430,7 +430,7 @@ class ListFiles extends ListRecords
                             ->property('file', join_paths($path, $data['name']))
                             ->log();
                     } catch (FileExistsException) {
-                        AlertBanner::make()
+                        AlertBanner::make('file_already_exists')
                             ->title('<code>' . $path . '</code> already exists!')
                             ->danger()
                             ->closable()
@@ -471,7 +471,7 @@ class ListFiles extends ListRecords
                             ->log();
                     } catch (FileExistsException) {
                         $path = join_paths($this->path, $data['name']);
-                        AlertBanner::make()
+                        AlertBanner::make('folder_already_exists')
                             ->title('<code>' . $path . '</code> already exists!')
                             ->danger()
                             ->closable()

app/Livewire/AlertBanner.php

@@ -4,25 +4,32 @@ namespace App\Livewire;
 
 use Closure;
 use Filament\Notifications\Concerns;
-use Filament\Support\Concerns\EvaluatesClosures;
+use Filament\Support\Components\ViewComponent;
-use Illuminate\Support\Str;
+use Illuminate\Contracts\Support\Arrayable;
-use Livewire\Wireable;
 
-final class AlertBanner implements Wireable
+final class AlertBanner extends ViewComponent implements Arrayable
 {
     use Concerns\HasBody;
     use Concerns\HasIcon;
     use Concerns\HasId;
     use Concerns\HasStatus;
     use Concerns\HasTitle;
-    use EvaluatesClosures;
 
     protected bool|Closure $closable = false;
 
-    public static function make(?string $id = null): AlertBanner
+    protected string $view = 'livewire.alerts.alert-banner';
+
+    protected string $viewIdentifier = 'alert-banner';
+
+    public function __construct(string $id)
     {
-        $static = new self();
+        $this->id($id);
-        $static->id($id ?? Str::orderedUuid());
+    }
+
+    public static function make(string $id): AlertBanner
+    {
+        $static = new self($id);
+        $static->configure();
 
         return $static;
     }
@@ -30,7 +37,7 @@ final class AlertBanner implements Wireable
     /**
      * @return array{id: string, title: ?string, body: ?string, status: ?string, icon: ?string, closeable: bool}
      */
-    public function toLivewire(): array
+    public function toArray(): array
     {
         return [
             'id' => $this->getId(),
@@ -42,15 +49,18 @@ final class AlertBanner implements Wireable
         ];
     }
 
-    public static function fromLivewire(mixed $value): AlertBanner
+    /**
+     * @param  array{id: string, title: ?string, body: ?string, status: ?string, icon: ?string, closeable: bool}  $data
+     */
+    public static function fromArray(array $data): AlertBanner
     {
-        $static = AlertBanner::make($value['id']);
+        $static = AlertBanner::make($data['id']);
 
-        $static->title($value['title']);
+        $static->title($data['title']);
-        $static->body($value['body']);
+        $static->body($data['body']);
-        $static->status($value['status']);
+        $static->status($data['status']);
-        $static->icon($value['icon']);
+        $static->icon($data['icon']);
-        $static->closable($value['closeable']);
+        $static->closable($data['closeable']);
 
         return $static;
     }
@@ -69,7 +79,7 @@ final class AlertBanner implements Wireable
 
     public function send(): AlertBanner
     {
-        session()->push('alert-banners', $this->toLivewire());
+        session()->push('alert-banners', $this->toArray());
 
         return $this;
     }

app/Livewire/AlertBannerContainer.php

@@ -2,18 +2,18 @@
 
 namespace App\Livewire;
 
+use Filament\Notifications\Collection;
 use Illuminate\Contracts\View\View;
 use Livewire\Attributes\On;
 use Livewire\Component;
 
 class AlertBannerContainer extends Component
 {
-    /** @var array<AlertBanner> */
+    public Collection $alertBanners;
-    public array $alertBanners;
 
     public function mount(): void
     {
-        $this->alertBanners = [];
+        $this->alertBanners = new Collection();
         $this->pullFromSession();
     }
 
@@ -21,15 +21,16 @@ class AlertBannerContainer extends Component
     public function pullFromSession(): void
     {
         foreach (session()->pull('alert-banners', []) as $alertBanner) {
-            $alertBanner = AlertBanner::fromLivewire($alertBanner);
+            $alertBanner = AlertBanner::fromArray($alertBanner);
-            $this->alertBanners[$alertBanner->getId()] = $alertBanner;
+            $this->alertBanners->put($alertBanner->getId(), $alertBanner);
         }
     }
 
     public function remove(string $id): void
     {
-        $alertBanners = &$this->alertBanners;
+        if ($this->alertBanners->has($id)) {
-        unset($alertBanners[$id]);
+            $this->alertBanners->forget($id);
+        }
     }
 
     public function render(): View

app/Models/File.php

@@ -194,7 +194,7 @@ class File extends Model
                 $message = str('Node connection failed');
             }
 
-            AlertBanner::make()
+            AlertBanner::make('files_node_error')
                 ->title('Could not load files!')
                 ->body($message->toString())
                 ->danger()

resources/views/livewire/alerts/alert-banner-container.blade.php

@@ -1,5 +1,5 @@
 <div id="alert-banner-container" class="flex flex-col gap-4">
-    @foreach (array_values($alertBanners) as $alertBanner)
+    @foreach ($alertBanners as $alertBanner)
-        @include('livewire.alerts.alert-banner', ['alertBanner' => $alertBanner])
+        {{ $alertBanner }}
     @endforeach
 </div>

resources/views/livewire/alerts/alert-banner.blade.php

@@ -1,14 +1,12 @@
-@props(['alertBanner'])
-
 @php
-    $icon = $alertBanner->getIcon();
+    $icon = $getIcon();
-    $title = $alertBanner->getTitle();
+    $title = $getTitle();
-    $body = $alertBanner->getBody();
+    $body = $getBody();
 @endphp
 
-<div class="{{$alertBanner->getColorClasses()}} flex p-4 mt-3 rounded-xl shadow-lg bg-white dark:bg-gray-900 ring-1 ring-gray-950/5 dark:ring-white/10">
+<div class="{{$getColorClasses()}} flex p-4 mt-3 rounded-xl shadow-lg bg-white dark:bg-gray-900 ring-1 ring-gray-950/5 dark:ring-white/10">
     @if (filled($icon))
-        <x-filament::icon :icon="$icon" class="h-8 w-8 mr-2" color="{{$alertBanner->getStatus()}}" />
+        <x-filament::icon :icon="$icon" class="h-8 w-8 mr-2" color="{{$getStatus()}}" />
     @endif
 
     <div class="flex flex-col flex-grow">
@@ -21,7 +19,7 @@
         @endif
     </div>
 
-    @if ($alertBanner->isCloseable())
+    @if ($isCloseable())
-        <x-filament::icon-button color="gray" icon="tabler-x" wire:click="remove('{{$alertBanner->getID()}}')" />
+        <x-filament::icon-button color="gray" icon="tabler-x" wire:click="remove('{{$getID()}}')" />
     @endif
 </div>