(airavata) branch master updated: add resource error catching for frontend (#528)

[lahirujayathilake]

This is an automated email from the ASF dual-hosted git repository.

lahirujayathilake pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/airavata.git


The following commit(s) were added to refs/heads/master by this push:
     new abfa8d0d40 add resource error catching for frontend (#528)
abfa8d0d40 is described below

commit abfa8d0d4036dc996bb709f76dc59f87ceb2841a
Author: Ganning Xu <gannin...@gmail.com>
AuthorDate: Sun Jun 22 07:13:39 2025 -0700

    add resource error catching for frontend (#528)
---
 .../src/components/resources/ResourceDetails.tsx   | 31 +++++++++++++++++-----
 1 file changed, 25 insertions(+), 6 deletions(-)

diff --git 
a/modules/research-framework/portal/src/components/resources/ResourceDetails.tsx
 
b/modules/research-framework/portal/src/components/resources/ResourceDetails.tsx
index ae94b7bdd6..fdb3c4a350 100644
--- 
a/modules/research-framework/portal/src/components/resources/ResourceDetails.tsx
+++ 
b/modules/research-framework/portal/src/components/resources/ResourceDetails.tsx
@@ -23,6 +23,7 @@ import {
   Badge,
   Box,
   Button,
+  Center,
   Container,
   Heading,
   HStack,
@@ -52,6 +53,7 @@ import {RepositorySpecificDetails} from 
"../repositories/RepositorySpecificDetai
 import {CONTROLLER} from "@/lib/controller";
 import {DatasetSpecificDetails} from "../datasets/DatasetSpecificDetails";
 import {ResourceOptions} from "@/components/resources/ResourceOptions.tsx";
+import {toaster} from "@/components/ui/toaster.tsx";
 
 async function getResource(id: string) {
   const response = await api.get(`${CONTROLLER.resources}/public/${id}`);
@@ -61,6 +63,7 @@ async function getResource(id: string) {
 const ResourceDetails = () => {
   const {id} = useParams();
   const [resource, setResource] = useState<Resource | null>(null);
+  const [loading, setLoading] = useState(false);
   const navigate = useNavigate();
   const {state} = useLocation();
 
@@ -68,16 +71,33 @@ const ResourceDetails = () => {
     if (!id) return;
 
     async function getData() {
-      // @ts-expect-error This is fine
-      const r = await getResource(id);
-
-      setResource(r);
+      try {
+        setLoading(true);
+        const r = await getResource(id || "INVALID");
+        setResource(r);
+      } catch {
+        toaster.create({
+          title: "Resource not found",
+          description: `id: ${id}`,
+          type: "error"
+        })
+      } finally {
+        setLoading(false);
+      }
     }
 
     getData();
   }, [id, state]);
 
-  if (!resource) return <Spinner/>;
+  if (loading) {
+    return (
+        <Center my={8}>
+          <Spinner/>
+        </Center>
+    );
+  } else if (!resource) {
+    return null;
+  }
 
   const validImage = isValidImaage(resource.headerImage);
 
@@ -87,7 +107,6 @@ const ResourceDetails = () => {
     )
   }
 
-
   return (
       <>
         <Container maxW="breakpoint-lg" mx="auto" p={4} mt={16}>