Merge pull request #363 from kthcloud/upgrade-react

Upgrade react + migrate to react-oidc-context + general cleanup

Author: Phillezi

.env

@@ -8,4 +8,5 @@ VITE_DNS_URL="https://dns.cloud.cbh.kth.se"
 VITE_MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
 # can be comma separated to add more
 VITE_SERVER_PLATFORM="linux/amd64"
+VITE_DEPLOYMENT_SSH_BASE="deploy.cloud.cbh.kth.se"
 GENERATE_SOURCEMAP=false 

Dockerfile

@@ -49,6 +49,7 @@ ENV DNS_URL="https://dns.cloud.cbh.kth.se"
 ENV MAIA_URL="https://maia.app.cloud.cbh.kth.se/maia"
 # can be comma separated to add more
 ENV SERVER_PLATFORM="linux/amd64"
+ENV DEPLOYMENT_SSH_BASE="deploy.cloud.cbh.kth.se"
 
 EXPOSE 3000
 ENTRYPOINT ["/entrypoint.sh"]

bun.lockb

@@ -17,40 +17,41 @@
     "@emotion/styled": "^11.14.1",
     "@iconify/react": "^4.1.1",
     "@kthcloud/go-deploy-types": "^1.0.25",
-    "@mui/icons-material": "^5.18.0",
+    "@mui/icons-material": "^7.3.9",
     "@mui/lab": "^5.0.0-alpha.177",
-    "@mui/material": "^5.18.0",
+    "@mui/material": "^7.3.9",
     "@mui/material-next": "^6.0.0-alpha.126",
     "@mui/x-tree-view": "^7.29.10",
-    "@react-keycloak/web": "^3.4.0",
-    "@react-three/fiber": "^8.18.0",
+    "@react-three/drei": "^10.7.7",
+    "@react-three/fiber": "^9.5.0",
     "@sanity/eventsource": "^5.0.2",
     "@types/crypto-js": "^4.2.2",
-    "@types/lodash": "^4.17.23",
+    "@types/lodash": "^4.17.24",
     "@types/numeral": "^2.0.5",
     "@types/punycode": "^2.1.4",
     "@types/three": "^0.164.1",
     "apexcharts": "^3.54.1",
-    "bun": "^1.3.9",
+    "bun": "^1.3.10",
     "change-case": "^5.4.4",
     "crypto-js": "^4.2.0",
     "http-status-codes": "^2.3.0",
     "i18next": "^23.16.8",
     "i18next-browser-languagedetector": "^7.2.2",
     "js-base64": "^3.7.8",
-    "keycloak-js": "^24.0.5",
     "lodash": "^4.17.23",
     "million": "latest",
     "notistack": "^3.0.2",
     "numeral": "^2.0.6",
+    "oidc-client-ts": "^3.4.1",
     "punycode": "^2.3.1",
-    "react": "^18.3.1",
+    "react": "^19.2.4",
     "react-apexcharts": "^1.9.0",
     "react-cookie": "^7.2.2",
-    "react-copy-to-clipboard": "^5.1.0",
-    "react-dom": "^18.3.1",
+    "react-copy-to-clipboard": "^5.1.1",
+    "react-dom": "^19.2.4",
     "react-helmet-async": "^2.0.5",
     "react-i18next": "^14.1.3",
+    "react-oidc-context": "^3.3.0",
     "react-router-dom": "^6.30.3",
     "simplebar": "^6.3.3",
     "simplebar-react": "^3.3.2",
@@ -60,15 +61,16 @@
   },
   "devDependencies": {
     "@faker-js/faker": "^8.4.1",
-    "@types/bun": "^1.3.9",
+    "@types/bun": "^1.3.10",
     "@types/react": "^18.3.28",
     "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-dom": "^18.3.7",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@vitejs/plugin-react": "^4.7.0",
     "@vitejs/plugin-react-swc": "^3.11.0",
-    "eslint": "^9.39.2",
+    "babel-plugin-react-compiler": "^1.0.0",
+    "eslint": "^9.39.4",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-react-refresh": "^0.4.26",

package.json

@@ -1,6 +1,7 @@
 // keycloak
-import { AuthContextWrapperProvider } from "./contexts/AuthContextWrapper";
-import { keycloak } from "./keycloak";
+import { oidcConfig } from "./keycloak";
+import { AuthProvider } from "react-oidc-context";
+
 // routes
 import Router from "./Router";
 // theme
@@ -18,7 +19,7 @@ import { AdminResourceContextProvider } from "./contexts/AdminResourceContext";
 
 export default function App() {
   return (
-    <AuthContextWrapperProvider authClient={keycloak}>
+    <AuthProvider {...oidcConfig}>
       <AlertContextProvider>
         <ResourceContextProvider>
           <AdminResourceContextProvider>
@@ -48,6 +49,6 @@ export default function App() {
           </AdminResourceContextProvider>
         </ResourceContextProvider>
       </AlertContextProvider>
-    </AuthContextWrapperProvider>
+    </AuthProvider>
   );
 }

public/static/models/Brain.glb

@@ -18,6 +18,7 @@ import Onboarding from "./pages/onboarding";
 import Inbox from "./pages/inbox/Inbox";
 import Teams from "./pages/teams/Teams";
 import { GPU } from "./pages/gpu/GPU";
+import Callback from "./components/Callback";
 
 export default function Router() {
   return useRoutes([
@@ -28,6 +29,7 @@ export default function Router() {
         { path: "/", element: <Landing /> },
         { path: "/status", element: <Status /> },
         { path: "tiers", element: <Tiers /> },
+        { path: "oauth2/callback", element: <Callback /> },
         {
           path: "deploy",
           element: (

public/static/models/brain.glb

@@ -0,0 +1,80 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "react-oidc-context";
+
+import {
+  Box,
+  Button,
+  CircularProgress,
+  Paper,
+  Typography,
+} from "@mui/material";
+import Page from "./Page";
+
+export default function Callback() {
+  const navigate = useNavigate();
+  const auth = useAuth();
+
+  useEffect(() => {
+    if (!auth.isLoading) {
+      if (auth.isAuthenticated) {
+        // Clean up the URL
+        const url = new URL(window.location.href);
+        url.searchParams.delete("code");
+        url.searchParams.delete("state");
+        window.history.replaceState({}, document.title, url.pathname);
+
+        // Redirect to /deploy
+        navigate("/deploy", { replace: true });
+      }
+    }
+  }, [auth.isLoading, auth.isAuthenticated, navigate]);
+
+  if (auth.isLoading) {
+    return (
+      <Page>
+        <Box component="div" sx={{ minHeight: "100vh" }}>
+          <CircularProgress />
+          <Typography mt={2} variant="h6">
+            Authenticating...
+          </Typography>
+        </Box>
+      </Page>
+    );
+  }
+
+  if (auth.error) {
+    return (
+      <Page>
+        <Box
+          display="flex"
+          justifyContent="center"
+          alignItems="center"
+          height="100vh"
+        >
+          <Paper
+            elevation={3}
+            sx={{ padding: 4, textAlign: "center", maxWidth: 400 }}
+          >
+            <Typography variant="h5" color="error" gutterBottom>
+              Authentication Failed
+            </Typography>
+            <Typography variant="body1" sx={{ wordBreak: "break-word" }}>
+              {auth.error?.message || "Unknown error occurred during login."}
+            </Typography>
+            <Button
+              variant="contained"
+              color="primary"
+              sx={{ mt: 2 }}
+              onClick={() => auth.signinRedirect()}
+            >
+              Try Again
+            </Button>
+          </Paper>
+        </Box>
+      </Page>
+    );
+  }
+
+  return null;
+}

src/App.tsx

@@ -58,16 +58,16 @@ const LoadingPage = () => {
           direction="column"
           alignItems="center"
           justifyContent="center"
-          style={{ minHeight: "100vh" }}
+          sx={{ minHeight: "100vh", textAlign: "center" }}
         >
-          <Grid item xs={3} m={1}>
+          <Grid size={{ xs: 3 }} m={1}>
             <CircularProgress />
           </Grid>
-          <Grid item xs={3} m={1}>
+          <Grid size={{ xs: 3 }} m={1}>
             <div>{getLoadingMessage()}</div>
           </Grid>
           {connectionError && retryIn > 0 && (
-            <Grid item xs={3} m={1}>
+            <Grid size={{ xs: 3 }} m={1}>
               <div>{`${t("retrying-in")} ${retryIn} ${t("seconds")}`}</div>
             </Grid>
           )}