Show component group status alongside the open incident count

resources/views/components/component-group.blade.php

@@ -12,16 +12,21 @@
             {{ $componentGroup->name }}
         </h2>
 
-        @if ($showComponentGroupStatus)
-            @php($groupStatus = $componentGroup->worstComponentStatus())
-            <span class="shrink-0 text-sm font-semibold tracking-tight {{ $groupStatus->getTextColorClasses() }}">
-                {{ $groupStatus->getLabel() }}
-            </span>
-        @else
-            <span class="shrink-0 text-sm font-semibold tracking-tight text-zinc-600 dark:text-zinc-300">
-                {{ trans_choice('cachet::component_group.incident_count', $componentGroup->openIncidentCount()) }}
-            </span>
-        @endif
+        @php($groupStatus = $componentGroup->worstComponentStatus())
+        @php($openIncidentCount = $componentGroup->openIncidentCount())
+        @php($showGroupStatusLabel = $showComponentGroupStatus || $openIncidentCount === 0)
+        <span class="flex shrink-0 items-center gap-2 text-sm font-semibold tracking-tight {{ $groupStatus->getTextColorClasses() }}">
+            @if ($showGroupStatusLabel)
+                <span>{{ $groupStatus->getLabel() }}</span>
+            @endif
+
+            @if ($openIncidentCount > 0)
+                @if ($showGroupStatusLabel)
+                    <span aria-hidden="true" class="text-zinc-400 dark:text-zinc-500">&middot;</span>
+                @endif
+                <span>{{ trans_choice('cachet::component_group.incident_count', $openIncidentCount) }}</span>
+            @endif
+        </span>
     </button>
 
     <div x-disclosure:panel x-collapse class="border-t border-zinc-900/10 dark:border-white/15">

tests/Feature/StatusPage/StatusPageTest.php

@@ -179,7 +179,80 @@
     expect($page)
         ->toContain('Core services')
         ->toContain('1 Incident')
-        ->not->toMatch('/Core services\s*<\\/h2>\s*<span[^>]*>\s*Major outage\s*<\\/span>/');
+        ->not->toMatch('/Core services\s*<\\/h2>\s*<span[^>]*>\s*<span>Major outage<\\/span>/');
+});
+
+it('shows the component group status alongside the open incident count', function () {
+    $group = ComponentGroup::factory()->create(['name' => 'Core services']);
+    $component = Component::factory()->create([
+        'component_group_id' => $group->id,
+        'status' => ComponentStatusEnum::major_outage,
+    ]);
+    $incident = Incident::factory()->create(['status' => IncidentStatusEnum::investigating]);
+    $incident->components()->attach($component->id);
+
+    $page = $this->get(route('cachet.status-page'))
+        ->assertOk()
+        ->getContent();
+
+    expect($page)
+        ->toContain('Core services')
+        ->toMatch('/Core services\s*<\\/h2>\s*<span[^>]*>\s*<span>Major outage<\\/span>\s*<span[^>]*>&middot;<\\/span>\s*<span>1 Incident<\\/span>/');
+});
+
+it('does not show a zero incident count on component groups', function () {
+    ComponentGroup::factory()
+        ->has(Component::factory(['status' => ComponentStatusEnum::operational]))
+        ->create(['name' => 'Core services']);
+
+    $page = $this->get(route('cachet.status-page'))
+        ->assertOk()
+        ->getContent();
+
+    expect($page)
+        ->toContain('Core services')
+        ->toContain('Operational')
+        ->not->toContain('0 Incident');
+});
+
+it('falls back to the group status when statuses are hidden and there are no open incidents', function () {
+    $settings = app(AppSettings::class);
+    $settings->show_component_group_status = false;
+    $settings->save();
+
+    ComponentGroup::factory()
+        ->has(Component::factory(['status' => ComponentStatusEnum::operational]))
+        ->create(['name' => 'Core services']);
+
+    $page = $this->get(route('cachet.status-page'))
+        ->assertOk()
+        ->getContent();
+
+    expect($page)
+        ->toMatch('/Core services\s*<\\/h2>\s*<span[^>]*>\s*<span>Operational<\\/span>/')
+        ->not->toContain('0 Incident');
+});
+
+it('colours the incident count by the worst component status when group statuses are hidden', function () {
+    $settings = app(AppSettings::class);
+    $settings->show_component_group_status = false;
+    $settings->save();
+
+    $group = ComponentGroup::factory()->create(['name' => 'Core services']);
+    $component = Component::factory()->create([
+        'component_group_id' => $group->id,
+        'status' => ComponentStatusEnum::major_outage,
+    ]);
+    $incident = Incident::factory()->create(['status' => IncidentStatusEnum::investigating]);
+    $incident->components()->attach($component->id);
+
+    $page = $this->get(route('cachet.status-page'))
+        ->assertOk()
+        ->getContent();
+
+    expect($page)
+        ->toMatch('/<span class="[^"]*'.preg_quote(ComponentStatusEnum::major_outage->getTextColorClasses(), '/').'[^"]*">\s*<span>1 Incident<\/span>/')
+        ->not->toMatch('/Core services\s*<\\/h2>\s*<span[^>]*>\s*<span>Major outage<\\/span>/');
 });
 
 it('can display component tags', function () {