i15-1: make bluesky buttons log-in dependent

apps/i15-1/package.json

@@ -11,10 +11,12 @@
   "dependencies": {
     "@atlas/blueapi": "workspace:*",
     "@atlas/blueapi-query": "workspace:*",
-    "@diamondlightsource/sci-react-ui": "^0.2.0",
+    "@diamondlightsource/sci-react-ui": "^0.4.0",
     "@mui/icons-material": "^6.5.0",
     "@mui/material": "<7.0.0",
-    "@tanstack/react-query": "^5.90.21"
+    "@tanstack/react-query": "^5.90.21",
+    "axios": "^1.13.4",
+    "react-error-boundary": "^6.0.0"
   },
   "devDependencies": {
     "@atlas/vitest-conf": "workspace:*",

apps/i15-1/src/components/RunPlanButton.tsx

@@ -3,6 +3,7 @@ import { useState } from "react";
 
 import { useSetActiveTask, useSubmitTask } from "@atlas/blueapi-query";
 import type { TaskRequest } from "@atlas/blueapi";
+import { useUserAuth } from "../context/userAuth/useUserAuth";
 
 type RunPlanButtonProps = {
   name: string;
@@ -17,13 +18,14 @@ const RunPlanButton = ({
   instrumentSession,
   buttonText = "Run",
 }: RunPlanButtonProps) => {
-
+  const user = useUserAuth();
+
   const submitTask = useSubmitTask();
   const startTask = useSetActiveTask();
   const submitAndRunTask = async (task: TaskRequest) => {
     await submitTask
       .mutateAsync(task)
-      .then(response => startTask.mutateAsync(response.task_id));
+      .then((response) => startTask.mutateAsync(response.task_id));
   };
 
   const [loading, setLoading] = useState<boolean>(false);
@@ -38,12 +40,19 @@ const RunPlanButton = ({
     setLoading(false);
   };
 
+  const isButtonDisabled = () => {
+    const disable =
+      user.person == null || user.person == undefined ? true : false;
+    return disable;
+  };
+
   return (
     <Button
       variant="contained"
       loading={loading}
       sx={{ width: "150px" }}
       onClick={handleClick}
+      disabled={isButtonDisabled()}
     >
       {buttonText}
     </Button>

apps/i15-1/src/components/WaffleNavbar.tsx

@@ -5,9 +5,16 @@ import {
   Navbar,
   NavLink,
   NavLinks,
+  User,
 } from "@diamondlightsource/sci-react-ui";
+import { useUserAuth } from "../context/userAuth/useUserAuth";
 
 function WaffleNavbar() {
+  const user = useUserAuth();
+
+  const handleLogIn = () => window.location.assign("/oauth2/sign_in");
+  const handleLogOut = () => window.location.assign("/oauth2/sign_out");
+
   return (
     <Navbar
       logo="theme"
@@ -32,6 +39,16 @@ function WaffleNavbar() {
       }
       rightSlot={
         <Box sx={{ marginLeft: 4 }}>
+          <User
+            onLogin={handleLogIn}
+            onLogout={handleLogOut}
+            user={
+              user.person == null || user.person == undefined
+                ? null
+                : { fedid: user.person }
+            }
+            colour="white"
+          />
           <ColourSchemeButton />
         </Box>
       }

apps/i15-1/src/context/userAuth/UserAuthContext.ts

@@ -0,0 +1,6 @@
+import { createContext } from "react";
+import { type UserAuthStatus } from "./authUtils";
+
+const userDefault: UserAuthStatus = {person: null, person_status: "PENDING"};
+
+export const UserAuthContext = createContext<UserAuthStatus>(userDefault);

apps/i15-1/src/context/userAuth/UserAuthProvider.tsx

@@ -0,0 +1,58 @@
+import { type ReactNode } from "react";
+import { UserAuthContext } from "./UserAuthContext";
+import { getUser, type UserAuthStatus } from "./authUtils";
+import { useQuery } from "@tanstack/react-query";
+import type { AxiosError } from "axios";
+
+export const UserAuthProvider = ({ children }: { children: ReactNode }) => {
+  const query = useQuery({
+    queryKey: ["user"],
+    queryFn: getUser,
+    retry: (failureCount, error: AxiosError) => {
+      if ("status" in error && (error.status == 401 || error.status == 403)) {
+        //dont retry 401/403
+        return false;
+      }
+
+      return failureCount < 2;
+    },
+  });
+
+  //undefined if pending
+  let response: UserAuthStatus = {
+    person: null,
+    person_status: "PENDING",
+  };
+
+  if (query.isError) {
+    if (query.error.status == 401) {
+      response = {
+        person: null,
+        person_status: "UNAUTHORIZED",
+      };
+    } else if (query.error.status == 403) {
+      response = {
+        person: null,
+        person_status: "FORBIDDEN",
+      };
+    } else {
+      response = {
+        person: null,
+        person_status: "ERROR",
+      };
+    }
+  } else {
+    if (query.data) {
+      response = {
+        person: query.data.preferredUsername,
+        person_status: "OK",
+      };
+    }
+  }
+
+  return (
+    <UserAuthContext.Provider value={response}>
+      {children}
+    </UserAuthContext.Provider>
+  );
+};

apps/i15-1/src/context/userAuth/authUtils.ts

@@ -0,0 +1,22 @@
+import axios, { type AxiosResponse } from "axios";
+
+const userUrl = "oauth2/userinfo";
+
+export type Person = {
+  identifier: string;
+  accepted_orca_eula: boolean;
+};
+
+export type UserName = {
+  preferredUsername: string;
+};
+
+export type UserAuthStatus = {
+  person: string | null | undefined;
+  person_status: "PENDING" | "UNAUTHORIZED" | "FORBIDDEN" | "OK" | "ERROR";
+};
+
+export const getUser = async () => {
+  const { data } = await axios.get<UserName, AxiosResponse<UserName>>(userUrl);
+  return data;
+};

apps/i15-1/src/context/userAuth/useUserAuth.ts

@@ -0,0 +1,12 @@
+import { UserAuthContext } from "./UserAuthContext"
+import { useContext } from "react"
+
+export const useUserAuth = () => {
+    const context = useContext(UserAuthContext);
+    if (!context) {
+        throw new Error(
+            "No user context found, is your component without UserAuthProvider?"
+        );
+    }
+    return context;
+}

apps/i15-1/src/main.tsx

@@ -17,6 +17,7 @@ declare global {
 
 import { createApi } from "@atlas/blueapi";
 import { BlueapiProvider } from "@atlas/blueapi-query";
+import { UserAuthProvider } from "./context/userAuth/UserAuthProvider.tsx";
 
 async function enableMocking() {
   if (import.meta.env.DEV) {
@@ -51,9 +52,11 @@ enableMocking().then(() => {
       <StrictMode>
         <ThemeProvider theme={DiamondTheme} defaultMode="light">
           <QueryClientProvider client={queryClient}>
-            <BlueapiProvider api={api}>
-              <RouterProvider router={router} />
-            </BlueapiProvider>
+            <UserAuthProvider>
+              <BlueapiProvider api={api}>
+                <RouterProvider router={router} />
+              </BlueapiProvider>
+            </UserAuthProvider>
           </QueryClientProvider>
         </ThemeProvider>
       </StrictMode>

apps/i15-1/src/mocks/handlers.ts

@@ -1,4 +1,4 @@
-import { http, HttpResponse, graphql } from "msw";
+import { http, HttpResponse } from "msw";
 
 const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
 
@@ -18,4 +18,8 @@ export const handlers = [
   http.put("/api/worker/state", () => {
     return HttpResponse.json("IDLE");
   }),
+
+  http.get("/oauth2/userinfo", () => {
+    return HttpResponse.json({ preferredUsername: "abc123456" });
+  }),
 ];

apps/i15-1/src/mocks/node.ts

@@ -0,0 +1,4 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers.js";
+
+export const server = setupServer(...handlers);

apps/i15-1/src/routes/Fallback.tsx

@@ -0,0 +1,14 @@
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import { Box, Typography } from "@mui/material";
+
+
+export function AuthFallbackScreen() {
+  return (
+    <Box alignContent={"center"}>
+      <ErrorOutlineIcon color="error" fontSize="large" />
+      <Typography component="h1" variant="h4">
+        Something went wrong with authentication!
+      </Typography>
+    </Box>
+  );
+}

helm/templates/configmap.yaml

@@ -9,4 +9,7 @@ data:
     cookie_samesite = "lax"
     cookie_expire = "168h"
     cookie_refresh = "45s"
-    cookie_name = "{{ include "oauth2-proxy.fullname" . }}-cookie"
+    cookie_name = "{{ include "oauth2-proxy.fullname" . }}-cookie"
+    skip_auth_routes = ["GET=^/$","GET=^/assets",]
+    api_routes = ["^/oauth2", "^/api"]
+    skip_provider_button = true

helm/values.yaml

@@ -38,10 +38,10 @@ oauth2-proxy:
   config:
     existingSecret: ui-keycloak-secret
     existingConfig: oauth2-proxy-config
-  
+
   alphaConfig:
     enabled: true
     existingSecret: ui-oauth2-alpha-secret
-  
+
   service:
-    portNumber: 4180
+    portNumber: 4180