Refactor admin dashboard widgets to use forms (#1452)

app/Filament/Admin/Widgets/CanaryWidget.php

@@ -2,15 +2,13 @@
 
 namespace App\Filament\Admin\Widgets;
 
-use Filament\Actions\CreateAction;
+use Filament\Forms\Components\Actions\Action;
-use Filament\Widgets\Widget;
+use Filament\Forms\Components\Placeholder;
+use Filament\Forms\Components\Section;
+use Filament\Forms\Form;
 
-class CanaryWidget extends Widget
+class CanaryWidget extends FormWidget
 {
-    protected static string $view = 'filament.admin.widgets.canary-widget';
-
-    protected static bool $isLazy = false;
-
     protected static ?int $sort = 1;
 
     public static function canView(): bool
@@ -18,15 +16,28 @@ class CanaryWidget extends Widget
         return config('app.version') === 'canary';
     }
 
-    public function getViewData(): array
+    public function form(Form $form): Form
     {
-        return [
+        return $form
-            'actions' => [
+            ->schema([
-                CreateAction::make()
+                Section::make(trans('admin/dashboard.sections.intro-developers.heading'))
+                    ->icon('tabler-code')
+                    ->iconColor('primary')
+                    ->collapsible()
+                    ->collapsed()
+                    ->persistCollapsed()
+                    ->schema([
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-developers.content')),
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-developers.extra_note')),
+                    ])
+                    ->headerActions([
+                        Action::make('issues')
                             ->label(trans('admin/dashboard.sections.intro-developers.button_issues'))
                             ->icon('tabler-brand-github')
                             ->url('https://github.com/pelican-dev/panel/issues', true),
-            ],
+                    ]),
-        ];
+            ]);
     }
 }

app/Filament/Admin/Widgets/FormWidget.php

@@ -0,0 +1,16 @@
+<?php
+
+namespace App\Filament\Admin\Widgets;
+
+use Filament\Forms\Concerns\InteractsWithForms;
+use Filament\Forms\Contracts\HasForms;
+use Filament\Widgets\Widget;
+
+abstract class FormWidget extends Widget implements HasForms
+{
+    use InteractsWithForms;
+
+    protected static bool $isLazy = false;
+
+    protected static string $view = 'filament.admin.widgets.form-widget';
+}

app/Filament/Admin/Widgets/HelpWidget.php

@@ -2,26 +2,34 @@
 
 namespace App\Filament\Admin\Widgets;
 
-use Filament\Actions\CreateAction;
+use Filament\Forms\Components\Actions\Action;
-use Filament\Widgets\Widget;
+use Filament\Forms\Components\Placeholder;
+use Filament\Forms\Components\Section;
+use Filament\Forms\Form;
 
-class HelpWidget extends Widget
+class HelpWidget extends FormWidget
 {
-    protected static string $view = 'filament.admin.widgets.help-widget';
-
-    protected static bool $isLazy = false;
-
     protected static ?int $sort = 4;
 
-    public function getViewData(): array
+    public function form(Form $form): Form
     {
-        return [
+        return $form
-            'actions' => [
+            ->schema([
-                CreateAction::make()
+                Section::make(trans('admin/dashboard.sections.intro-help.heading'))
+                    ->icon('tabler-question-mark')
+                    ->iconColor('info')
+                    ->collapsible()
+                    ->persistCollapsed()
+                    ->schema([
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-help.content')),
+                    ])
+                    ->headerActions([
+                        Action::make('docs')
                             ->label(trans('admin/dashboard.sections.intro-help.button_docs'))
                             ->icon('tabler-speedboat')
                             ->url('https://pelican.dev/docs', true),
-            ],
+                    ]),
-        ];
+            ]);
     }
 }

app/Filament/Admin/Widgets/NoNodesWidget.php

@@ -4,15 +4,13 @@ namespace App\Filament\Admin\Widgets;
 
 use App\Filament\Admin\Resources\NodeResource\Pages\CreateNode;
 use App\Models\Node;
-use Filament\Actions\CreateAction;
+use Filament\Forms\Components\Actions\Action;
-use Filament\Widgets\Widget;
+use Filament\Forms\Components\Placeholder;
+use Filament\Forms\Components\Section;
+use Filament\Forms\Form;
 
-class NoNodesWidget extends Widget
+class NoNodesWidget extends FormWidget
 {
-    protected static string $view = 'filament.admin.widgets.no-nodes-widget';
-
-    protected static bool $isLazy = false;
-
     protected static ?int $sort = 2;
 
     public static function canView(): bool
@@ -20,15 +18,25 @@ class NoNodesWidget extends Widget
         return Node::count() <= 0;
     }
 
-    public function getViewData(): array
+    public function form(Form $form): Form
     {
-        return [
+        return $form
-            'actions' => [
+            ->schema([
-                CreateAction::make()
+                Section::make(trans('admin/dashboard.sections.intro-first-node.heading'))
+                    ->icon('tabler-server-2')
+                    ->iconColor('primary')
+                    ->collapsible()
+                    ->persistCollapsed()
+                    ->schema([
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-first-node.content')),
+                    ])
+                    ->headerActions([
+                        Action::make('create-node')
                             ->label(trans('admin/dashboard.sections.intro-first-node.button_label'))
                             ->icon('tabler-server-2')
                             ->url(CreateNode::getUrl()),
-            ],
+                    ]),
-        ];
+            ]);
     }
 }

app/Filament/Admin/Widgets/SupportWidget.php

@@ -2,27 +2,37 @@
 
 namespace App\Filament\Admin\Widgets;
 
-use Filament\Actions\CreateAction;
+use Filament\Forms\Components\Actions\Action;
-use Filament\Widgets\Widget;
+use Filament\Forms\Components\Placeholder;
+use Filament\Forms\Components\Section;
+use Filament\Forms\Form;
 
-class SupportWidget extends Widget
+class SupportWidget extends FormWidget
 {
-    protected static string $view = 'filament.admin.widgets.support-widget';
-
-    protected static bool $isLazy = false;
-
     protected static ?int $sort = 3;
 
-    public function getViewData(): array
+    public function form(Form $form): Form
     {
-        return [
+        return $form
-            'actions' => [
+            ->schema([
-                CreateAction::make()
+                Section::make(trans('admin/dashboard.sections.intro-support.heading'))
+                    ->icon('tabler-heart-filled')
+                    ->iconColor('danger')
+                    ->collapsible()
+                    ->persistCollapsed()
+                    ->schema([
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-support.content')),
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-support.extra_note')),
+                    ])
+                    ->headerActions([
+                        Action::make('donate')
                             ->label(trans('admin/dashboard.sections.intro-support.button_donate'))
                             ->icon('tabler-cash')
                             ->url('https://pelican.dev/donate', true)
                             ->color('success'),
-            ],
+                    ]),
-        ];
+            ]);
     }
 }

app/Filament/Admin/Widgets/UpdateWidget.php

@@ -3,15 +3,13 @@
 namespace App\Filament\Admin\Widgets;
 
 use App\Services\Helpers\SoftwareVersionService;
-use Filament\Actions\CreateAction;
+use Filament\Forms\Components\Actions\Action;
-use Filament\Widgets\Widget;
+use Filament\Forms\Components\Placeholder;
+use Filament\Forms\Components\Section;
+use Filament\Forms\Form;
 
-class UpdateWidget extends Widget
+class UpdateWidget extends FormWidget
 {
-    protected static string $view = 'filament.admin.widgets.update-widget';
-
-    protected static bool $isLazy = false;
-
     protected static ?int $sort = 0;
 
     private SoftwareVersionService $softwareVersionService;
@@ -21,19 +19,34 @@ class UpdateWidget extends Widget
         $this->softwareVersionService = $softwareVersionService;
     }
 
-    public function getViewData(): array
+    public function form(Form $form): Form
     {
-        return [
+        $isLatest = $this->softwareVersionService->isLatestPanel();
-            'version' => $this->softwareVersionService->currentPanelVersion(),
+
-            'latestVersion' => $this->softwareVersionService->latestPanelVersion(),
+        return $form
-            'isLatest' => $this->softwareVersionService->isLatestPanel(),
+            ->schema([
-            'actions' => [
+                $isLatest
-                CreateAction::make()
+                ? Section::make(trans('admin/dashboard.sections.intro-no-update.heading'))
+                    ->icon('tabler-checkbox')
+                    ->iconColor('success')
+                    ->schema([
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-no-update.content', ['version' => $this->softwareVersionService->currentPanelVersion()])),
+                    ])
+                : Section::make(trans('admin/dashboard.sections.intro-update-available.heading'))
+                    ->icon('tabler-info-circle')
+                    ->iconColor('warning')
+                    ->schema([
+                        Placeholder::make('')
+                            ->content(trans('admin/dashboard.sections.intro-update-available.content', ['latestVersion' => $this->softwareVersionService->latestPanelVersion()])),
+                    ])
+                    ->headerActions([
+                        Action::make('update')
                             ->label(trans('admin/dashboard.sections.intro-update-available.heading'))
                             ->icon('tabler-clipboard-text')
                             ->url('https://pelican.dev/docs/panel/update', true)
                             ->color('warning'),
-            ],
+                    ]),
-        ];
+            ]);
     }
 }

resources/views/filament/admin/widgets/canary-widget.blade.php

@@ -1,19 +0,0 @@
-<x-filament-widgets::widget>
-    <x-filament::section
-        icon="tabler-code"
-        icon-color="primary"
-        id="intro-developers"
-        collapsible
-        persist-collapsed
-        collapsed
-        :header-actions="$actions"
-    >
-        <x-slot name="heading">{{ trans('admin/dashboard.sections.intro-developers.heading') }}</x-slot>
-
-        <p>{{ trans('admin/dashboard.sections.intro-developers.content') }}</p>
-
-        <p><br /></p>
-
-        <p>{{ trans('admin/dashboard.sections.intro-developers.extra_note') }}</p>
-    </x-filament::section>
-</x-filament-widgets::widget>

resources/views/filament/admin/widgets/form-widget.blade.php

@@ -0,0 +1,3 @@
+<x-filament-widgets::widget>
+    {{ $this->form }}
+</x-filament-widgets::widget>

resources/views/filament/admin/widgets/help-widget.blade.php

@@ -1,14 +0,0 @@
-<x-filament-widgets::widget>
-    <x-filament::section
-        icon="tabler-question-mark"
-        icon-color="info"
-        id="intro-help"
-        collapsible
-        persist-collapsed
-        :header-actions="$actions"
-    >
-        <x-slot name="heading">{{ trans('admin/dashboard.sections.intro-help.heading') }}</x-slot>
-        
-        <p>{{ trans('admin/dashboard.sections.intro-help.content') }}</p>
-    </x-filament::section>
-</x-filament-widgets::widget>

resources/views/filament/admin/widgets/no-nodes-widget.blade.php

@@ -1,14 +0,0 @@
-<x-filament-widgets::widget>
-    <x-filament::section
-        icon="tabler-server-2"
-        icon-color="primary"
-        id="intro-first-node"
-        collapsible
-        persist-collapsed
-        :header-actions="$actions"
-    >
-        <x-slot name="heading">{{ trans('admin/dashboard.sections.intro-first-node.heading') }}</x-slot>
-
-        <p>{{ trans('admin/dashboard.sections.intro-first-node.content') }}</p>
-    </x-filament::section>
-</x-filament-widgets::widget>

resources/views/filament/admin/widgets/support-widget.blade.php

@@ -1,18 +0,0 @@
-<x-filament-widgets::widget>
-    <x-filament::section
-        icon="tabler-heart-filled"
-        icon-color="danger"
-        id="intro-support"
-        collapsible
-        persist-collapsed
-        :header-actions="$actions"
-    >
-        <x-slot name="heading">{{ trans('admin/dashboard.sections.intro-support.heading') }}</x-slot>
-
-        <p>{{ trans('admin/dashboard.sections.intro-support.content') }}</p>
-
-        <p><br /></p>
-
-        <p>{{ trans('admin/dashboard.sections.intro-support.extra_note') }}</p>
-    </x-filament::section>
-</x-filament-widgets::widget>

resources/views/filament/admin/widgets/update-widget.blade.php

@@ -1,25 +0,0 @@
-<x-filament-widgets::widget>
-    @if (!$isLatest)
-        <x-filament::section
-            icon="tabler-info-circle"
-            icon-color="warning"
-            id="intro-update-available"
-            :header-actions="$actions"
-        >
-            <x-slot name="heading">{{ trans('admin/dashboard.sections.intro-update-available.heading') }}</x-slot>
-
-            <p>{{ trans('admin/dashboard.sections.intro-update-available.content', ['latestVersion' => $latestVersion]) }}</p>
-
-        </x-filament::section>
-    @else
-        <x-filament::section
-            icon="tabler-checkbox"
-            icon-color="success"
-            id="intro-no-update"
-        >
-            <x-slot name="heading">{{ trans('admin/dashboard.sections.intro-no-update.heading') }}</x-slot>
-
-            <p>{{ trans('admin/dashboard.sections.intro-no-update.content', ['version' => $version]) }}</p>
-        </x-filament::section>
-    @endif
-</x-filament-widgets::widget>