set up router

server/ui/package.json

@@ -17,12 +17,14 @@
     "@tanstack/react-query": "^5.66.0",
     "@tanstack/react-query-devtools": "^5.66.0",
     "@tanstack/react-router": "^1.99.0",
+    "@tanstack/router-devtools": "^1.99.0",
     "axios": "^1.7.9",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",
+    "@tanstack/router-plugin": "^1.99.0",
     "@types/react": "^18.3.18",
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.5.0",

server/ui/src/app/components/Notifications.tsx

@@ -25,7 +25,7 @@ export const Notifications: React.FunctionComponent = () => {
                 />
               ),
             })}
-            timeout={notification.timeout ? notification.timeout : 4000}
+            timeout={notification.timeout ?? 4000}
           >
             {notification.message}
           </Alert>

server/ui/src/app/components/NotificationsContext.tsx

@@ -1,66 +1,26 @@
 import * as React from "react";
-import { AlertProps } from "@patternfly/react-core";
-
-export type INotification = {
-  title: string;
-  variant: AlertProps["variant"];
-  message?: React.ReactNode;
-  hideCloseButton?: boolean;
-  timeout?: number | boolean;
-};
+import {AlertProps} from "@patternfly/react-core";
+
+export interface INotification {
+    title: string;
+    variant: AlertProps["variant"];
+    message?: React.ReactNode;
+    hideCloseButton?: boolean;
+    timeout?: number | boolean;
+}
 
-interface INotificationsProvider {
-  children: React.ReactNode;
+export interface INotificationsProvider {
+    children: React.ReactNode;
 }
 
 interface INotificationsContext {
-  pushNotification: (notification: INotification) => void;
-  dismissNotification: (key: string) => void;
-  notifications: INotification[];
+    pushNotification: (notification: INotification) => void;
+    dismissNotification: (key: string) => void;
+    notifications: INotification[];
 }
 
 const appContextDefaultValue = {} as INotificationsContext;
 
-const notificationDefault: Pick<INotification, "hideCloseButton"> = {
-  hideCloseButton: false,
-};
-
 export const NotificationsContext = React.createContext<INotificationsContext>(
-  appContextDefaultValue
+    appContextDefaultValue
 );
-
-export const NotificationsProvider: React.FunctionComponent<
-  INotificationsProvider
-> = ({ children }: INotificationsProvider) => {
-  const [notifications, setNotifications] = React.useState<INotification[]>([]);
-
-  const pushNotification = (
-    notification: INotification,
-    clearNotificationDelay?: number
-  ) => {
-    setNotifications([
-      ...notifications,
-      { ...notificationDefault, ...notification },
-    ]);
-    setTimeout(() => setNotifications([]), clearNotificationDelay || 10000);
-  };
-
-  const dismissNotification = (title: string) => {
-    const remainingNotifications = notifications.filter(
-      (n) => n.title !== title
-    );
-    setNotifications(remainingNotifications);
-  };
-
-  return (
-    <NotificationsContext.Provider
-      value={{
-        pushNotification,
-        dismissNotification,
-        notifications,
-      }}
-    >
-      {children}
-    </NotificationsContext.Provider>
-  );
-};

server/ui/src/app/components/NotificationsProvider.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import {INotification, INotificationsProvider, NotificationsContext} from "./NotificationsContext.tsx";
+
+const notificationDefault: Pick<INotification, "hideCloseButton"> = {
+    hideCloseButton: false,
+};
+
+export const NotificationsProvider: React.FunctionComponent<
+    INotificationsProvider
+> = ({children}: INotificationsProvider) => {
+    const [notifications, setNotifications] = React.useState<INotification[]>([]);
+
+    const pushNotification = (
+        notification: INotification,
+        clearNotificationDelay?: number
+    ) => {
+        setNotifications([
+            ...notifications,
+            {...notificationDefault, ...notification},
+        ]);
+        setTimeout(() => setNotifications([]), clearNotificationDelay ?? 10000);
+    };
+
+    const dismissNotification = (title: string) => {
+        const remainingNotifications = notifications.filter(
+            (n) => n.title !== title
+        );
+        setNotifications(remainingNotifications);
+    };
+
+    return (
+        <NotificationsContext.Provider
+            value={{
+                pushNotification,
+                dismissNotification,
+                notifications,
+            }}
+        >
+            {children}
+        </NotificationsContext.Provider>
+    );
+};