fix(alerts): allow configuration access when alerts are disabled

Users should be able to configure alert thresholds, notifications, and
schedules regardless of whether alert notifications are enabled. The
enable/disable toggle only controls whether notifications are sent,
not whether users can access the configuration.

Previously, when alerts were in 'pending_review' or 'snoozed' state,
all configuration tabs were disabled, forcing users to the Overview
tab only.

Fixes #1101
This commit is contained in:
rcourtman
2026-01-12 21:09:26 +00:00
parent 5bbe581355
commit 0cc295066c
+30 -49
View File
@@ -1937,9 +1937,7 @@ export function Alerts() {
</Card>
</Show>
<div class={`transition-opacity ${isAlertsActive() ? 'opacity-100' : 'opacity-50 pointer-events-none'
}`}>
<div>
<Card padding="none" class="relative lg:flex overflow-hidden">
<div
class={`hidden lg:flex lg:flex-col ${sidebarCollapsed() ? 'w-16' : 'w-72'} ${sidebarCollapsed() ? 'lg:min-w-[4rem] lg:max-w-[4rem] lg:basis-[4rem]' : 'lg:min-w-[18rem] lg:max-w-[18rem] lg:basis-[18rem]'} relative border-b border-gray-200 dark:border-gray-700 lg:border-b-0 lg:border-r lg:border-gray-200 dark:lg:border-gray-700 lg:align-top flex-shrink-0 transition-all duration-200`}
@@ -2002,32 +2000,23 @@ export function Alerts() {
</Show>
<div class="space-y-1.5">
<For each={group.items}>
{(item) => {
const disabled = () => item.id !== 'overview' && !isAlertsActive();
return (
<button
type="button"
aria-current={activeTab() === item.id ? 'page' : undefined}
disabled={disabled()}
class={`flex w-full items-center ${sidebarCollapsed() ? 'justify-center' : 'gap-2.5'} rounded-md ${sidebarCollapsed() ? 'px-2 py-2.5' : 'px-3 py-2'} text-sm font-medium transition-colors ${disabled()
? 'opacity-60 cursor-not-allowed text-gray-400 dark:text-gray-600'
: activeTab() === item.id
? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-200'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700/60 dark:hover:text-gray-100'
}`}
onClick={() => {
if (disabled()) return;
handleTabChange(item.id);
}}
title={sidebarCollapsed() ? item.label : undefined}
>
{item.icon}
<Show when={!sidebarCollapsed()}>
<span class="truncate">{item.label}</span>
</Show>
</button>
);
}}
{(item) => (
<button
type="button"
aria-current={activeTab() === item.id ? 'page' : undefined}
class={`flex w-full items-center ${sidebarCollapsed() ? 'justify-center' : 'gap-2.5'} rounded-md ${sidebarCollapsed() ? 'px-2 py-2.5' : 'px-3 py-2'} text-sm font-medium transition-colors ${activeTab() === item.id
? 'bg-blue-50 text-blue-600 dark:bg-blue-900/30 dark:text-blue-200'
: 'text-gray-600 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-300 dark:hover:bg-gray-700/60 dark:hover:text-gray-100'
}`}
onClick={() => handleTabChange(item.id)}
title={sidebarCollapsed() ? item.label : undefined}
>
{item.icon}
<Show when={!sidebarCollapsed()}>
<span class="truncate">{item.label}</span>
</Show>
</button>
)}
</For>
</div>
</div>
@@ -2046,26 +2035,18 @@ export function Alerts() {
style="-webkit-overflow-scrolling: touch;"
>
<For each={flatTabs}>
{(tab) => {
const disabled = () => tab.id !== 'overview' && !isAlertsActive();
return (
<button
type="button"
class={`px-3 py-1.5 sm:px-4 sm:py-2 text-[11px] sm:text-xs font-medium rounded-md transition-all whitespace-nowrap ${activeTab() === tab.id
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
} ${disabled() ? 'opacity-50 cursor-not-allowed pointer-events-none' : ''}`}
disabled={disabled()}
onClick={() => {
if (disabled()) return;
handleTabChange(tab.id);
}}
title={disabled() ? 'Activate alerts to configure' : undefined}
>
{tab.label}
</button>
);
}}
{(tab) => (
<button
type="button"
class={`px-3 py-1.5 sm:px-4 sm:py-2 text-[11px] sm:text-xs font-medium rounded-md transition-all whitespace-nowrap ${activeTab() === tab.id
? 'bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 shadow-sm'
: 'text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100'
}`}
onClick={() => handleTabChange(tab.id)}
>
{tab.label}
</button>
)}
</For>
</div>
</div>