mirror of
https://github.com/okieselbach/AutopilotMonitor.git
synced 2026-10-24 04:32:32 +00:00
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:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user