From 7e75683f32e756c57f0ae88a2153b4ee187302f2 Mon Sep 17 00:00:00 2001
From: Alex Freska <alex.freska@gmail.com>
Date: Thu, 9 Jan 2025 16:27:56 -0500
Subject: [PATCH] fix(hostd): alerts list not showing

---
 .changeset/fifty-dogs-study.md                    |  5 +++++
 .changeset/strange-ravens-joke.md                 |  5 +++++
 apps/hostd-e2e/src/fixtures/navigate.ts           | 10 ++++++++++
 apps/hostd-e2e/src/specs/volumes.spec.ts          |  5 ++++-
 libs/design-system/src/app/AlertsDialog/index.tsx |  5 ++---
 5 files changed, 26 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/fifty-dogs-study.md
 create mode 100644 .changeset/strange-ravens-joke.md

diff --git a/.changeset/fifty-dogs-study.md b/.changeset/fifty-dogs-study.md
new file mode 100644
index 000000000..d64391f05
--- /dev/null
+++ b/.changeset/fifty-dogs-study.md
@@ -0,0 +1,5 @@
+---
+'hostd': patch
+---
+
+Fixed an issue where the list of alerts was not showing.
diff --git a/.changeset/strange-ravens-joke.md b/.changeset/strange-ravens-joke.md
new file mode 100644
index 000000000..0289b5904
--- /dev/null
+++ b/.changeset/strange-ravens-joke.md
@@ -0,0 +1,5 @@
+---
+'@siafoundation/design-system': patch
+---
+
+Fixed an issue where AlertDialog was using the incorrect dataset loaded state.
diff --git a/apps/hostd-e2e/src/fixtures/navigate.ts b/apps/hostd-e2e/src/fixtures/navigate.ts
index 6c169d5a6..f2e7caed1 100644
--- a/apps/hostd-e2e/src/fixtures/navigate.ts
+++ b/apps/hostd-e2e/src/fixtures/navigate.ts
@@ -44,3 +44,13 @@ export const navigateToContracts = step(
     ).toBeVisible()
   }
 )
+
+export const openAlertsDialog = step(
+  'open alerts dialog',
+  async (page: Page) => {
+    await page.getByTestId('sidenav').getByLabel('Alerts').click()
+    const dialog = page.getByRole('dialog')
+    await expect(dialog.getByText('Alerts')).toBeVisible()
+    return dialog
+  }
+)
diff --git a/apps/hostd-e2e/src/specs/volumes.spec.ts b/apps/hostd-e2e/src/specs/volumes.spec.ts
index f99c95335..d97f277cb 100644
--- a/apps/hostd-e2e/src/specs/volumes.spec.ts
+++ b/apps/hostd-e2e/src/specs/volumes.spec.ts
@@ -1,5 +1,5 @@
 import { expect, test } from '@playwright/test'
-import { navigateToVolumes } from '../fixtures/navigate'
+import { navigateToVolumes, openAlertsDialog } from '../fixtures/navigate'
 import {
   createVolume,
   deleteVolume,
@@ -31,6 +31,9 @@ test('can create and delete a volume', async ({ page }) => {
   const name = 'my-new-volume'
   await navigateToVolumes({ page })
   await createVolume(page, name, dirPath)
+  const dialog = await openAlertsDialog(page)
+  await expect(dialog.getByText('Volume initialized')).toBeVisible()
+  await dialog.getByLabel('close').click()
   await deleteVolume(page, name, dirPath)
 })
 
diff --git a/libs/design-system/src/app/AlertsDialog/index.tsx b/libs/design-system/src/app/AlertsDialog/index.tsx
index c066bf7f3..59245d0d3 100644
--- a/libs/design-system/src/app/AlertsDialog/index.tsx
+++ b/libs/design-system/src/app/AlertsDialog/index.tsx
@@ -57,8 +57,7 @@ export function AlertsDialog({
       alerts.data?.filter((a) => (filter ? a.severity === filter : true)) || [],
     [alerts.data, filter]
   )
-
-  // Sort keys by dataFieldOrder, then alphabetically
+  // Sort keys by dataFieldOrder, then alphabetically.
   const getOrderedKeys = useCallback(
     (obj: Record<string, unknown>) => {
       const orderedKeys = Object.keys(obj).sort((a, b) => {
@@ -164,7 +163,7 @@ export function AlertsDialog({
           </div>
         )}
         {loadingState === 'loading' && <EntityListSkeleton />}
-        {!loadingState && (
+        {loadingState === 'loaded' && (
           <div className="flex flex-col">
             {dataset.length ? (
               dataset.map((a) => (