From 369bc906937f408d3801686674e7dfb7e8348ead Mon Sep 17 00:00:00 2001
From: Dario Faccin <35623244+dariofaccin@users.noreply.github.com>
Date: Wed, 18 Dec 2024 12:27:58 +0100
Subject: [PATCH] fix: improve error messages when UPF/gnB lists are empty
 (#692)

Signed-off-by: Dario Faccin <dario.faccin@canonical.com>
---
 components/NetworkSliceModal.tsx | 20 ++++++++++++--------
 1 file changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/NetworkSliceModal.tsx b/components/NetworkSliceModal.tsx
index 9597547..a2183bf 100644
--- a/components/NetworkSliceModal.tsx
+++ b/components/NetworkSliceModal.tsx
@@ -124,7 +124,7 @@ const NetworkSliceModal = ({ networkSlice, toggleModal }: NetworkSliceModalProps
     },
   });
 
-  const { data: upfList = [], isLoading: isUpfLoading } = useQuery({
+  const { data: upfList = [], isLoading: isUpfLoading, isError: isUpfError } = useQuery({
     queryKey: [queryKeys.upfList, auth.user?.authToken],
     queryFn: () => getUpfList(auth.user ? auth.user.authToken : ""),
     enabled: auth.user ? true : false,
@@ -132,14 +132,16 @@ const NetworkSliceModal = ({ networkSlice, toggleModal }: NetworkSliceModalProps
 
   useEffect(() => {
     const checkUpfList = async () => {
-      if (!isUpfLoading && upfList.length === 0) {
-        setUpfApiError("Failed to retrieve the list of UPFs from the server.");
+      if (isUpfError) {
+        setUpfApiError("Failed to retrieve the list of UPFs from the server.")
+      } else if (!isUpfLoading && upfList.length === 0) {
+        setUpfApiError("No available UPF. Please add at least one UPF.");
       }
     };
     checkUpfList();
-  }, [isUpfLoading, upfList]);
+  }, [isUpfLoading, isUpfError, upfList]);
 
-  const { data: gnbList = [], isLoading: isGnbLoading } = useQuery({
+  const { data: gnbList = [], isLoading: isGnbLoading, isError: isGnbError } = useQuery({
     queryKey: [queryKeys.gnbList, auth.user?.authToken],
     queryFn: () => getGnbList(auth.user ? auth.user.authToken : ""),
     enabled: auth.user ? true : false,
@@ -147,12 +149,14 @@ const NetworkSliceModal = ({ networkSlice, toggleModal }: NetworkSliceModalProps
 
   useEffect(() => {
     const checkGnbList = async () => {
-      if (!isGnbLoading && gnbList.length === 0) {
-        setGnbApiError("Failed to retrieve the list of GNBs from the server.");
+      if (isGnbError) {
+        setGnbApiError("Failed to retrieve the list of GNBs from the server.")
+      } else if (!isGnbLoading && gnbList.length === 0) {
+        setGnbApiError("No available GNB. Please add at least one GNB.");
       }
     };
     checkGnbList();
-  }, [isGnbLoading, gnbList]);
+  }, [isGnbLoading, isGnbError, gnbList]);
 
   const handleUpfChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
     const upf = upfList.find(