Add prettier formatting

server/ui/.prettierignore

@@ -0,0 +1 @@
+src/routeTree.gen.ts

server/ui/.prettierrc.json

@@ -0,0 +1,3 @@
+{
+  "singleQuote": false
+}

server/ui/eslint.config.js

@@ -1,37 +1,52 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import react from 'eslint-plugin-react'
+import js from "@eslint/js";
+import globals from "globals";
+import reactHooks from "eslint-plugin-react-hooks";
+import reactRefresh from "eslint-plugin-react-refresh";
+import tseslint from "typescript-eslint";
+import react from "eslint-plugin-react";
+import prettierRecommended from "eslint-plugin-prettier/recommended";
 
 export default tseslint.config(
-  { ignores: ['dist'] },
+  { ignores: ["dist"] },
   {
-    extends: [js.configs.recommended, ...tseslint.configs.recommendedTypeChecked, ...tseslint.configs.stylisticTypeChecked],
-    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommendedTypeChecked,
+      ...tseslint.configs.stylisticTypeChecked,
+      prettierRecommended,
+    ],
+    files: ["**/*.{ts,tsx}"],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
       parserOptions: {
-        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        project: ["./tsconfig.node.json", "./tsconfig.app.json"],
         tsconfigRootDir: import.meta.dirname,
       },
     },
     plugins: {
-      'react-hooks': reactHooks,
-      'react-refresh': reactRefresh,
-      react
+      "react-hooks": reactHooks,
+      "react-refresh": reactRefresh,
+      react,
     },
     rules: {
       ...reactHooks.configs.recommended.rules,
-      'react-refresh/only-export-components': [
-        'warn',
+      "react-refresh/only-export-components": [
+        "warn",
         { allowConstantExport: true },
       ],
       ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
+      ...react.configs["jsx-runtime"].rules,
+      "prettier/prettier": [
+        "warn",
+        {
+          semi: false,
+          singleQuote: false,
+          trailingComma: "es5",
+        },
+      ],
     },
-    settings: { react: { version: '18.3' } },
+    settings: { react: { version: "18.3" } },
+    ignores: ["src/routeTree.gen.ts"],
   },
-)
+);

server/ui/package.json

@@ -7,7 +7,9 @@
     "dev": "vite --host",
     "build": "tsc -b && vite build",
     "lint": "eslint .",
-    "preview": "vite preview"
+    "preview": "vite preview",
+    "format:check": "prettier --check './**/*.{ts,tsx,js,json}'",
+    "format:fix": "prettier --write './**/*.{ts,tsx,js,json}'"
   },
   "dependencies": {
     "@patternfly/patternfly": "^6.1.0",
@@ -29,10 +31,13 @@
     "@types/react-dom": "^18.3.5",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "eslint": "^9.17.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-prettier": "^5.2.3",
     "eslint-plugin-react": "^7.37.4",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.16",
     "globals": "^15.14.0",
+    "prettier": "^3.4.2",
     "typescript": "~5.6.2",
     "typescript-eslint": "^8.18.2",
     "vite": "^6.0.5"

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

@@ -1,26 +1,26 @@
 import * as React from "react";
-import {AlertProps} from "@patternfly/react-core";
+import { AlertProps } from "@patternfly/react-core";
 
 export interface INotification {
-    title: string;
-    variant: AlertProps["variant"];
-    message?: React.ReactNode;
-    hideCloseButton?: boolean;
-    timeout?: number | boolean;
+  title: string;
+  variant: AlertProps["variant"];
+  message?: React.ReactNode;
+  hideCloseButton?: boolean;
+  timeout?: number | boolean;
 }
 
 export interface INotificationsProvider {
-    children: React.ReactNode;
+  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;
 
 export const NotificationsContext = React.createContext<INotificationsContext>(
-    appContextDefaultValue
+  appContextDefaultValue,
 );

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

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