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>
This commit is contained in:
Oliver Kieselbach
2026-08-06 15:55:20 +02:00
parent ca22be5cd0
commit 6f3f35e1cd
@@ -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>
);
}