From 20434eba42bdcfc463f071ea58b2d624c42201ef Mon Sep 17 00:00:00 2001
From: Alexander Petric <alpetric@users.noreply.github.com>
Date: Fri, 8 Nov 2024 21:50:36 -0500
Subject: [PATCH]  improve modal loading in critical alert ui (#4679)

* critical alert ui

* updating ui, backend logic

* revert

* type check fix npm

* checking out cli files from main

* moving alert icon

* adding sqlx mock data

* more sqlx changes

* feat(frontend): nodes from flow can be connected directly in expr input through a plug icon (#4652)

* Add flow prop picker

# Conflicts:
#	frontend/src/lib/components/propertyPicker/PropPicker.svelte

* fix unwanted copy

* cleaning

* Fix unset context

* move button and always display input

* fix unwanted proppicker display

* update

* update

* clean all

* clean all

---------

Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>

* replace hide/show with toggle

* adding mutable setting and navigation to settings to configure channels

* merge fix

* ee non ee changees

* auto-acknowledge when muted

* pr comments

* fix bad log

* user inner modal component

* update unaknowledge alerts after acknowledging from modal

* aknowledge -> acknowledge

* format

* immediately check for alerts

* immediately check for alerts

* simplify loading of superadmin/ee

* update modal logic

---------

Co-authored-by: Guilhem <guilhemlemouel@gmail.com>
Co-authored-by: Ruben Fiszel <ruben@rubenfiszel.com>
Co-authored-by: Ruben Fiszel <ruben@windmill.dev>
---
 .../sidebar/CriticalAlertModal.svelte          |  5 ++++-
 .../sidebar/CriticalAlertModalInner.svelte     | 18 ++++--------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
index 9e306ea917..68d7bfbffb 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModal.svelte
@@ -3,6 +3,7 @@
 	import CriticalAlertModalInner from './CriticalAlertModalInner.svelte'
 	import { SettingService } from '$lib/gen'
 	import { sendUserToast } from '$lib/toast'
+	import Modal from '../common/modal/Modal.svelte'
 
 	export let open: boolean = false
 	export let numUnacknowledgedCriticalAlerts: number = 0
@@ -66,4 +67,6 @@
 	}
 </script>
 
-<CriticalAlertModalInner bind:open {updateHasUnacknowledgedCriticalAlerts} />
+<Modal bind:open title="Critical Alerts" cancelText="Close" style="max-width: 66%;">
+	<CriticalAlertModalInner {updateHasUnacknowledgedCriticalAlerts} />
+</Modal>
diff --git a/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte b/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
index f1b6208962..34ff0ffa35 100644
--- a/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
+++ b/frontend/src/lib/components/sidebar/CriticalAlertModalInner.svelte
@@ -1,34 +1,24 @@
 <script lang="ts">
-	import Modal from '../common/modal/Modal.svelte'
 	import Button from '../common/button/Button.svelte'
 	import Toggle from '$lib/components/Toggle.svelte'
 	import { SettingService } from '$lib/gen'
 	import { CheckCircle2, AlertCircle, RefreshCw, CheckSquare2, AlertTriangle } from 'lucide-svelte'
 	import type { CriticalAlert } from '$lib/gen'
-	import { onMount, beforeUpdate } from 'svelte'
+	import { onMount } from 'svelte'
 	import { instanceSettingsSelectedTab } from '$lib/stores'
 	import { goto } from '$app/navigation'
 
-	export let open: boolean = false
 	export let updateHasUnacknowledgedCriticalAlerts: () => void = () => {}
 
 	let alerts: CriticalAlert[] = []
 
 	let isRefreshing = false
-	let previousOpen = open
 	let hasCriticalAlertChannels = false
 
 	$: loading = isRefreshing
 
 	onMount(() => {
-		if (open) refreshAlerts()
-	})
-
-	beforeUpdate(() => {
-		if (open && !previousOpen) {
-			refreshAlerts()
-		}
-		previousOpen = open
+		refreshAlerts()
 	})
 
 	// Pagination
@@ -114,7 +104,7 @@
 	}
 </script>
 
-<Modal bind:open title="Critical Alerts" cancelText="Close" style="max-width: 66%;">
+<div>
 	{#if !hasCriticalAlertChannels}
 		<div class="flex flex-row pb-4">
 			<AlertTriangle color="orange" class="w-6 h-6 mr-2" />
@@ -210,4 +200,4 @@
 	{#if alerts.length === 0}
 		<p class="text-center text-gray-500 mt-4">No critical alerts available.</p>
 	{/if}
-</Modal>
+</div>