From 6f3f35e1cd71722e0fcf606662712f563a8cc49b Mon Sep 17 00:00:00 2001
From: Oliver Kieselbach <oliver.kieselbach@outlook.com>
Date: Thu, 6 Aug 2026 15:55:20 +0200
Subject: [PATCH] web: one-click reset to "All tenants (aggregated)" in tenant
 scope selector

While a specific tenant is selected on an aggregated-capable page, an x
button next to the dropdown jumps straight back to the aggregate view
instead of requiring a dropdown roundtrip.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 .../components/TenantScopeSelector.tsx        | 21 ++++++++++++++++++-
 1 file changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx b/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx
index 1cb326cd..154e16fa 100644
--- a/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx
+++ b/src/Web/autopilot-monitor-web/components/TenantScopeSelector.tsx
@@ -18,7 +18,8 @@ export interface TenantSelectorScope {
  * can drop it into a header unconditionally.
  *
  * @param allowAggregated when true, prepends an "All tenants (aggregated)" option (value "")
- *   for the aggregated-capable page variant. Defaults to false (override-only pages).
+ *   for the aggregated-capable page variant, plus a one-click "×" reset back to the aggregate
+ *   while a specific tenant is selected. Defaults to false (override-only pages).
  * @param themed when true, adds dark-mode (`dark:`) variants so the control matches dark-aware
  *   headers (e.g. the SLA page). Defaults to false — most consuming pages are light-only and a
  *   dark selector on their non-themed header would itself be a mismatch.
@@ -42,6 +43,11 @@ export function TenantScopeSelector({
   const selectClass = themed
     ? "text-sm border border-gray-300 dark:border-gray-600 rounded-md px-2 py-1.5 max-w-[220px] sm:max-w-xs bg-white dark:bg-gray-700 text-gray-900 dark:text-white"
     : "text-sm border border-gray-300 rounded-md px-2 py-1.5 max-w-[220px] sm:max-w-xs";
+  const resetClass = themed
+    ? "text-gray-400 hover:text-gray-600 dark:text-gray-500 dark:hover:text-gray-300 transition-colors"
+    : "text-gray-400 hover:text-gray-600 transition-colors";
+
+  const showReset = allowAggregated && !scope.isDelegatedScope && scope.selectedTenantId !== "";
 
   return (
     <div className="flex items-center gap-3">
@@ -61,6 +67,19 @@ export function TenantScopeSelector({
           </option>
         ))}
       </select>
+      {showReset && (
+        <button
+          type="button"
+          onClick={() => scope.setSelectedTenantId("")}
+          className={resetClass}
+          title="Back to all tenants (aggregated)"
+          aria-label="Back to all tenants (aggregated)"
+        >
+          <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      )}
     </div>
   );
 }