Refactor IncidentUpdateStatus badge component

Author: jbrooksuk

resources/views/components/incident-update-status.blade.php

@@ -5,8 +5,12 @@
             shades: [200, 900],
         ),
     ]),
-]) }}>
+])->merge(['title' => $title]) }}>
     <div class="absolute -left-[calc(28px+10px+13px)] top-4 flex h-7 w-7 items-center justify-center rounded-full bg-custom-200 dark:text-zinc-900">
-        @svg($icon, 'h-5 w-5')
+        @if ($icon)
+        @svg($icon, 'size-5')
+        @else
+        <x-heroicon-m-flag class="size-4" />
+        @endif
     </div>
 </div>

resources/views/components/incident.blade.php

@@ -56,14 +56,14 @@
                     <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $update->formattedMessage() !!}</div>
                 </div>
                 @endforeach
-                    <div class="relative py-4" x-data="{ timestamp: new Date(@js($incident->created_at)) }">
-                        <x-cachet::incident-update-status :status="$incident->status" />
+                <div class="relative py-4" x-data="{ timestamp: new Date(@js($incident->created_at)) }">
+                    <x-cachet::incident-update-status />
 
-                        <span class="text-xs text-zinc-500 dark:text-zinc-400">
-                            {{ $incident->created_at->diffForHumans() }} — <time datetime="{{ $incident->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
-                        </span>
-                        <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $incident->formattedMessage() !!}</div>
-                    </div>
+                    <span class="text-xs text-zinc-500 dark:text-zinc-400">
+                        {{ $incident->created_at->diffForHumans() }} — <time datetime="{{ $incident->created_at->toW3cString() }}" x-text="timestamp.toLocaleString()"></time>
+                    </span>
+                    <div class="prose-sm md:prose prose-zinc dark:prose-invert prose-a:text-primary-500 prose-a:underline prose-p:leading-normal">{!! $incident->formattedMessage() !!}</div>
+                </div>
             </div>
         </div>
     </div>

src/Enums/IncidentStatusEnum.php

@@ -39,6 +39,7 @@ public function getLabel(): string
             self::identified => __('Identified'),
             self::watching => __('Watching'),
             self::fixed => __('Fixed'),
+            default => __('Reported'),
         };
     }
 
@@ -56,9 +57,9 @@ public function getColor(): string|array|null
     {
         return match ($this) {
             self::investigating => 'warning',
-            self::identified => 'gray',
             self::watching => 'info',
             self::fixed => 'success',
+            default => 'gray',
         };
     }
 }

src/View/Components/IncidentUpdateStatus.php

@@ -3,7 +3,6 @@
 namespace Cachet\View\Components;
 
 use Cachet\Enums\IncidentStatusEnum;
-use Cachet\Models\IncidentUpdate;
 use Closure;
 use Illuminate\Contracts\View\View;
 use Illuminate\View\Component;
@@ -13,7 +12,7 @@ class IncidentUpdateStatus extends Component
     /**
      * Create a new component instance.
      */
-    public function __construct(public IncidentStatusEnum $status)
+    public function __construct(public readonly ?IncidentStatusEnum $status = null)
     {
         //
     }
@@ -24,8 +23,9 @@ public function __construct(public IncidentStatusEnum $status)
     public function render(): View|Closure|string
     {
         return view('cachet::components.incident-update-status', [
-            'color' => $this->status->getColor(),
-            'icon' => $this->status->getIcon(),
+            'title' => $this->status?->getLabel(),
+            'color' => $this->status?->getColor() ?? 'gray',
+            'icon' => $this->status?->getIcon(),
         ]);
     }
 }