mirror of
https://github.com/rcourtman/Pulse.git
synced 2026-09-10 02:25:56 +00:00
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:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user