Show affected components on the incident page

resources/lang/en/incident.php

@@ -13,6 +13,7 @@
     'edit_button' => 'Edit Incident',
     'new_button' => 'New Incident',
     'no_incidents_reported' => 'No incidents reported.',
+    'affected_components_header' => 'Affected Components',
     'timeline' => [
         'past_incidents_header' => 'Past Incidents',
         'recent_incidents_header' => 'Recent Incidents',

resources/views/status-page/incident.blade.php

@@ -4,6 +4,22 @@
     <div class="container mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8 flex flex-col space-y-6">
         <x-cachet::status-bar />
 
+        @if ($incident->components->isNotEmpty())
+            <div class="group relative overflow-hidden rounded-lg bg-white shadow-sm ring-1 ring-zinc-900/10 dark:bg-zinc-900 dark:ring-white/15">
+                <div class="pointer-events-none absolute inset-x-0 top-0 h-px bg-gradient-to-r from-transparent via-accent/40 to-transparent" aria-hidden="true"></div>
+
+                <h2 class="bg-zinc-50 px-4 py-3 text-lg font-semibold tracking-tight text-zinc-700 dark:bg-zinc-800/50 dark:text-zinc-200 sm:px-6 sm:py-4">
+                    {{ __('cachet::incident.affected_components_header') }}
+                </h2>
+
+                <ul class="divide-y divide-zinc-900/10 border-t border-zinc-900/10 dark:divide-white/15 dark:border-white/15">
+                    @foreach ($incident->components as $component)
+                        <x-cachet::component :component="$component" />
+                    @endforeach
+                </ul>
+            </div>
+        @endif
+
         <div class="flex flex-col gap-6">
             <div class="flex flex-col gap-14 w-full">
                 <x-cachet::incident :date="$incident->timestamp" :incidents="[$incident]" />

tests/Feature/StatusPage/IncidentPageTest.php

@@ -0,0 +1,26 @@
+<?php
+
+use Cachet\Enums\ComponentStatusEnum;
+use Cachet\Models\Component;
+use Cachet\Models\Incident;
+
+it('shows the affected components on the incident page', function () {
+    $component = Component::factory()->create(['name' => 'API']);
+    $incident = Incident::factory()->create();
+    $incident->components()->attach($component, [
+        'component_status' => ComponentStatusEnum::performance_issues->value,
+    ]);
+
+    $this->get(route('cachet.status-page.incident', $incident))
+        ->assertOk()
+        ->assertSee(__('cachet::incident.affected_components_header'))
+        ->assertSee('API');
+});
+
+it('does not show the affected components box when none are attached', function () {
+    $incident = Incident::factory()->create();
+
+    $this->get(route('cachet.status-page.incident', $incident))
+        ->assertOk()
+        ->assertDontSee(__('cachet::incident.affected_components_header'));
+});