Make server name and server address clickable (and copyable) (#1395)

app/Filament/Server/Components/SmallStatBlock.php

@@ -2,43 +2,27 @@
 
 namespace App\Filament\Server\Components;
 
+use Closure;
+use Filament\Support\Concerns\EvaluatesClosures;
 use Filament\Widgets\StatsOverviewWidget\Stat;
-use Illuminate\Contracts\Support\Htmlable;
 use Illuminate\Contracts\View\View;
 
 class SmallStatBlock extends Stat
 {
-    protected string|Htmlable $label;
+    use EvaluatesClosures;
 
-    protected $value;
+    protected bool|Closure $copyOnClick = false;
 
-    public function label(string|Htmlable $label): static
+    public function copyOnClick(bool|Closure $copyOnClick = true): static
     {
-        $this->label = $label;
+        $this->copyOnClick = $copyOnClick;
 
         return $this;
     }
 
-    public function value($value): static
+    public function shouldCopyOnClick(): bool
     {
-        $this->value = $value;
+        return $this->evaluate($this->copyOnClick);
-
-        return $this;
-    }
-
-    public function getLabel(): string|Htmlable
-    {
-        return $this->label;
-    }
-
-    public function getValue()
-    {
-        return value($this->value);
-    }
-
-    public function toHtml(): string
-    {
-        return $this->render()->render();
     }
 
     public function render(): View

app/Filament/Server/Components/StatBlock.php

@@ -1,48 +0,0 @@
-<?php
-
-namespace App\Filament\Server\Components;
-
-use Filament\Widgets\StatsOverviewWidget\Stat;
-use Illuminate\Contracts\Support\Htmlable;
-use Illuminate\Contracts\View\View;
-
-class StatBlock extends Stat
-{
-    protected string|Htmlable $label;
-
-    protected $value;
-
-    public function label(string|Htmlable $label): static
-    {
-        $this->label = $label;
-
-        return $this;
-    }
-
-    public function value($value): static
-    {
-        $this->value = $value;
-
-        return $this;
-    }
-
-    public function getLabel(): string|Htmlable
-    {
-        return $this->label;
-    }
-
-    public function getValue()
-    {
-        return value($this->value);
-    }
-
-    public function toHtml(): string
-    {
-        return $this->render()->render();
-    }
-
-    public function render(): View
-    {
-        return view('filament.components.server-data-block', $this->data());
-    }
-}

app/Filament/Server/Widgets/ServerOverview.php

@@ -6,8 +6,10 @@ use App\Enums\ContainerStatus;
 use App\Filament\Server\Components\SmallStatBlock;
 use App\Models\Server;
 use Carbon\CarbonInterface;
+use Filament\Notifications\Notification;
 use Filament\Widgets\StatsOverviewWidget;
 use Illuminate\Support\Number;
+use Livewire\Attributes\On;
 
 class ServerOverview extends StatsOverviewWidget
 {
@@ -19,14 +21,10 @@ class ServerOverview extends StatsOverviewWidget
     {
         return [
             SmallStatBlock::make('Name', $this->server->name)
-                ->extraAttributes([
+                ->copyOnClick(fn () => request()->isSecure()),
-                    'class' => 'overflow-x-auto',
-                ]),
             SmallStatBlock::make('Status', $this->status()),
             SmallStatBlock::make('Address', $this->server->allocation->address)
-                ->extraAttributes([
+                ->copyOnClick(fn () => request()->isSecure()),
-                    'class' => 'overflow-x-auto',
-                ]),
             SmallStatBlock::make('CPU', $this->cpuUsage()),
             SmallStatBlock::make('Memory', $this->memoryUsage()),
             SmallStatBlock::make('Disk', $this->diskUsage()),
@@ -93,4 +91,16 @@ class ServerOverview extends StatsOverviewWidget
 
         return $used . ($this->server->disk > 0 ? ' / ' . $total : ' / ∞');
     }
+
+    #[On('copyClick')]
+    public function copyClick(string $value): void
+    {
+        $this->js("window.navigator.clipboard.writeText('{$value}');");
+
+        Notification::make()
+            ->title('Copied to clipboard')
+            ->body($value)
+            ->success()
+            ->send();
+    }
 }

resources/views/filament/components/server-data-block.blade.php

@@ -1,10 +0,0 @@
-<div class="fi-wi-stats-overview-stat relative rounded-lg bg-white p-4 shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
-    <div class="grid grid-flow-row">
-        <span class="text-sm font-medium text-gray-500 dark:text-gray-400">
-            {{ $getLabel() }}
-        </span>
-        <div class="text-xl font-semibold text-gray-950 dark:text-white">
-            {{ $getValue() }}
-        </div>
-    </div>
-</div>

resources/views/filament/components/server-small-data-block.blade.php

@@ -1,9 +1,14 @@
-<div
+<div class="fi-small-stat-block grid grid-flow-row w-full p-3 rounded-lg bg-white shadow-sm overflow-hidden overflow-x-auto ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
-    class="grid grid-flow-row w-full p-3 rounded-lg bg-white shadow-sm overflow-hidden ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10">
+@if ($shouldCopyOnClick())
+    <span class="cursor-pointer" wire:click="copyClick('{{ $getValue() }}')">
+@else
     <span>
+@endif
         <span class="text-md font-medium text-gray-500 dark:text-gray-400">
             {{ $getLabel() }}
         </span>
-        <span class="text-md font-semibold">{{ $getValue() }}</span>
+        <span class="text-md font-semibold">
+            {{ $getValue() }}
+        </span>
     </span>
 </div>