fix: avoid es connections when it is not installed

Author: OliverDudgeon

src/components/EventStream.tsx renamed to src/components/eventStream/EventStream.tsx

@@ -9,17 +9,20 @@ import {
 import { useAtom } from "jotai";
 import { useSnackbar } from "notistack";
 
-import { useASAuthorizationStatus } from "../hooks/useIsAuthorized";
-import { getMessageFromEvent, protoBlobToText } from "../protobuf/protobuf";
-import { eventStreamEnabledAtom } from "../state/eventStream";
-import { EventMessage } from "./eventMessages/EventMessage";
+import { useASAuthorizationStatus } from "../../hooks/useIsAuthorized";
+import { getMessageFromEvent, protoBlobToText } from "../../protobuf/protobuf";
+import { eventStreamEnabledAtom } from "../../state/eventStream";
+import { EventMessage } from "../eventMessages/EventMessage";
+import { useIsEventStreamInstalled } from "./useIsEventStreamInstalled";
 
 export const EventStream = () => {
+  const isEventStreamInstalled = useIsEventStreamInstalled();
   const [location, setLocation] = useState<string | null>(null);
   const { enqueueSnackbar } = useSnackbar();
   const asRole = useASAuthorizationStatus();
+
   const { data, error: streamError } = useGetEventStream({
-    query: { select: (data) => data.location, enabled: !!asRole },
+    query: { select: (data) => data.location, enabled: !!asRole && isEventStreamInstalled },
   });
   const { mutate: createEventStream } = useCreateEventStream({
     mutation: {

src/components/eventStream/EventStreamToggle.tsx

@@ -0,0 +1,29 @@
+/**
+ * EventStreamToggle renders a switch to enable or disable the event stream (alpha feature).
+ */
+
+import { FormControlLabel, Switch } from "@mui/material";
+import { useAtom } from "jotai";
+
+import { eventStreamEnabledAtom } from "../../state/eventStream";
+import { useIsEventStreamInstalled } from "./useIsEventStreamInstalled";
+
+export const EventStreamToggle = () => {
+  const isEventStreamInstalled = useIsEventStreamInstalled();
+
+  const [eventStreamEnabled, setEventStreamEnabled] = useAtom(eventStreamEnabledAtom);
+  return (
+    <FormControlLabel
+      control={
+        <Switch
+          checked={eventStreamEnabled}
+          color="primary"
+          disabled={!isEventStreamInstalled}
+          onChange={(_, checked) => setEventStreamEnabled(checked)}
+        />
+      }
+      label={`Event stream ${isEventStreamInstalled ? "(alpha)" : "(not available)"}`}
+      sx={{ mb: 2 }}
+    />
+  );
+};

src/components/eventStream/useIsEventStreamInstalled.ts

@@ -0,0 +1,9 @@
+import { EventStreamVersionGetResponseProtocol } from "@squonk/account-server-client";
+import { useGetEventStreamVersion } from "@squonk/account-server-client/event-stream";
+
+export const useIsEventStreamInstalled = () => {
+  const { data: protocol } = useGetEventStreamVersion({
+    query: { select: (data) => data.protocol },
+  });
+  return protocol === EventStreamVersionGetResponseProtocol.WEBSOCKET;
+};

src/layouts/navigation/UserMenuContent.tsx

@@ -1,31 +1,21 @@
 import { Person as PersonIcon } from "@mui/icons-material";
-import {
-  Alert,
-  Box,
-  Chip,
-  FormControlLabel,
-  Switch,
-  Typography,
-  useMediaQuery,
-  useTheme,
-} from "@mui/material";
-import { useAtom } from "jotai";
+import { Alert, Box, Chip, Typography, useMediaQuery, useTheme } from "@mui/material";
 
 import { AuthButton } from "../../components/auth/AuthButton";
 import { CenterLoader } from "../../components/CenterLoader";
 import { Chips } from "../../components/Chips";
 import { ColourSchemeSelection } from "../../components/ColourSchemeSelection";
+import { EventStreamToggle } from "../../components/eventStream/EventStreamToggle";
 import { useASAuthorizationStatus, useDMAuthorizationStatus } from "../../hooks/useIsAuthorized";
 import { useKeycloakUser } from "../../hooks/useKeycloakUser";
-import { eventStreamEnabledAtom } from "../../state/eventStream";
 
 /**
  * Content of the user menu
  */
 export const UserMenuContent = () => {
   const theme = useTheme();
   const biggerThanMd = useMediaQuery(theme.breakpoints.up("md"));
-  const [eventStreamEnabled, setEventStreamEnabled] = useAtom(eventStreamEnabledAtom);
+  // Removed eventStreamEnabledAtom usage, now handled in EventStreamToggle
 
   return (
     <Box sx={{ textAlign: biggerThanMd ? "center" : undefined }}>
@@ -34,17 +24,7 @@ export const UserMenuContent = () => {
       </Typography>
       <UserMenuContentInner />
       <ColourSchemeSelection />
-      <FormControlLabel
-        control={
-          <Switch
-            checked={eventStreamEnabled}
-            color="primary"
-            onChange={(_, checked) => setEventStreamEnabled(checked)}
-          />
-        }
-        label="Event stream (alpha)"
-        sx={{ mb: 2 }}
-      />
+      <EventStreamToggle />
     </Box>
   );
 };

src/pages/_app.tsx

@@ -17,7 +17,7 @@ import Head from "next/head";
 import { ConfiguredSnackbarProvider } from "../components/app/ConfiguredSnackbarProvider";
 import { ThemeProviders } from "../components/app/ThemeProviders";
 import { TopLevelHooks } from "../components/app/TopLevelHooks";
-import { EventStream } from "../components/EventStream";
+import { EventStream } from "../components/eventStream/EventStream";
 import { openSansFont } from "../constants/fonts";
 import { AS_API_URL, DM_API_URL } from "../constants/proxies";
 import { MDXComponentProvider } from "../context/MDXComponentProvider";