fix: better 404 handling for model and system (should no longer crash…

… the frontend)

app/src/App.js

@@ -13,7 +13,7 @@ import { getAuthToken } from "./api/gram/util/authToken";
 import "./App.css";
 import AdminPage from "./components/admin/AdminPage";
 import { ModalManager } from "./components/elements/modal/ModalManager";
-import ErrorPage from "./components/error-page";
+import { ErrorPage } from "./components/elements/ErrorPage";
 import Home from "./components/home/Home";
 import { Login } from "./components/login/Login";
 import { LoginCallback } from "./components/login/LoginCallback";

app/src/components/elements/ErrorLine.js

@@ -0,0 +1,6 @@
+import React from "react";
+import "./ErrorLine.css";
+
+export function ErrorLine({ message }) {
+  return <div className="error-line">{message}</div>;
+}

app/src/components/elements/ErrorPage.js

@@ -0,0 +1,20 @@
+import React from "react";
+import "./ErrorPage.css";
+import { useTitle } from "../../hooks/useTitle";
+
+const desc = {
+  404: "The page you are looking for does not exist",
+  403: "You are not allowed to access this resource",
+  500: "Something went terribly wrong. Try checking browser console for errors",
+};
+
+export function ErrorPage({ code }) {
+  useTitle("Page not found");
+
+  return (
+    <div id="error-page">
+      <p className="big">{code.toString()}</p>
+      <p className="desc">{desc[code.toString()]}</p>
+    </div>
+  );
+}

app/src/components/elements/list/ModelList.js

@@ -1,5 +1,4 @@
 import React from "react";
-import ErrorLine from "../../error-line";
 import Loading from "../../loading";
 import {
   Card,
@@ -12,6 +11,7 @@ import { Link } from "react-router-dom";
 import { SystemName } from "../../reviews/SystemName";
 import { DateLabel } from "../DateLabel";
 import { ModelComplianceBadge } from "../ModelComplianceBadge";
+import { ErrorLine } from "../ErrorLine";
 
 export function ModelList({
   models = [],

app/src/components/model/Model.js

@@ -18,12 +18,13 @@ import { PERMISSIONS } from "./constants";
 import "./Model.css";
 import { LeftPanel } from "./panels/left/LeftPanel";
 import { RightPanel } from "./panels/right/RightPanel";
+import { ErrorPage } from "../elements/ErrorPage";
 
 export function Model() {
   const dispatch = useDispatch();
 
   const { id } = useParams("/model/:id");
-  const { data: model } = useGetModelQuery(id);
+  const { data: model, isError, error } = useGetModelQuery(id);
 
   useEffect(() => {
     model && dispatch(loadModel(model));
@@ -50,11 +51,10 @@ export function Model() {
 
   // if write permission sync model changes (patch component) to the backend
   useModelSync();
-  // useEffect(() => {
-  //   if (id && writeAllowed) {
-  //     return store.subscribe(useModelSyncListener(store, dispatch));
-  //   }
-  // }, [store, id, writeAllowed]);
+
+  if (isError) {
+    return <ErrorPage code={error.originalStatus} />;
+  }
 
   if (model?.id !== id) return <LoadingPage isLoading={true} />;
 

app/src/components/model/New.js

@@ -6,7 +6,6 @@ import {
   useListModelsQuery,
 } from "../../api/gram/model";
 import { useGetSystemQuery } from "../../api/gram/system";
-import ErrorLine from "../error-line";
 import Loading from "../loading";
 import "./New.css";
 import InputLabel from "@mui/material/InputLabel";
@@ -17,6 +16,7 @@ import Select from "@mui/material/Select";
 import TextField from "@mui/material/TextField";
 import Button from "@mui/material/Button";
 import Divider from "@mui/material/Divider";
+import { ErrorLine } from "../elements/ErrorLine";
 
 export function NewWizard() {
   const [version, setVersion] = useState(

app/src/components/model/panels/left/SystemProperties.js

@@ -1,7 +1,7 @@
 import { Card, CardContent, Skeleton, Typography } from "@mui/material";
 import { uniqueId } from "lodash";
 import { useGetSystemPropertiesQuery } from "../../../../api/gram/system-properties";
-import ErrorLine from "../../../error-line";
+import { ErrorLine } from "../../../elements/ErrorLine";
 
 export function SystemProperties({ modelId }) {
   const {

app/src/components/system/System.js

@@ -8,7 +8,7 @@ import {
 } from "../../api/gram/system";
 import { useTitle } from "../../hooks/useTitle";
 import { ModelList } from "../elements/list/ModelList";
-import ErrorPage from "../error-page";
+import { ErrorPage } from "../elements/ErrorPage";
 import Loading from "../loading";
 import { PERMISSIONS } from "../model/constants";
 import "./System.css";
@@ -19,15 +19,20 @@ export function System() {
 
   const { data: permissions, isLoading: isLoadingPermissions } =
     useGetSystemPermissionsQuery({ systemId });
-  const { data: system, isLoading: isLoadingSystem } = useGetSystemQuery({
+  const {
+    data: system,
+    isLoading: isLoadingSystem,
+    isError,
+    error,
+  } = useGetSystemQuery({
     systemId,
   });
   const { data: models, isLoading: isLoadingModels } = useListModelsQuery({
     filter: "system",
     systemId,
   });
 
-  useTitle(isLoadingSystem ? "Loading..." : "System: " + system.displayName);
+  useTitle(isLoadingSystem ? "Loading..." : "System: " + system?.displayName);
 
   if (isLoadingPermissions || isLoadingSystem) {
     return (
@@ -38,6 +43,10 @@ export function System() {
     );
   }
 
+  if (isError) {
+    return <ErrorPage code={error.originalStatus} />;
+  }
+
   if (!permissions.includes(PERMISSIONS.READ)) {
     return <ErrorPage code={403} />;
   }