Populate instrument session via graph

src/RelayEnvironment.ts

@@ -6,7 +6,7 @@ import {
   type FetchFunction,
 } from "relay-runtime";
 
-const HTTP_ENDPOINT = "/api/workflows";
+const HTTP_ENDPOINT = "/api/graphql";
 const fetchFn: FetchFunction = async (request, variables) => {
   const resp = await fetch(HTTP_ENDPOINT, {
     method: "POST",

src/components/InstrumentSessionSelection/InstrumentSession.tsx

@@ -0,0 +1,46 @@
+import { visitToText, type Visit } from "@diamondlightsource/sci-react-ui";
+import { useLazyLoadQuery } from "react-relay/hooks";
+import { graphql } from "relay-runtime";
+import type { InstrumentSessionQuery as InstrumentSessionQueryType } from "./__generated__/InstrumentSessionQuery.graphql";
+
+const instrumentSessionQuery = graphql`
+  query InstrumentSessionQuery($instrumentName: String!) {
+    instrument(instrumentName: $instrumentName) {
+      instrumentSessions {
+        instrumentSessionNumber
+        proposal {
+          proposalCategory
+          proposalNumber
+        }
+      }
+    }
+  }
+`;
+
+function GetInstrumentSessions() {
+  const data = useLazyLoadQuery<InstrumentSessionQueryType>(
+    instrumentSessionQuery,
+    { instrumentName: "ViSR" },
+  );
+
+  const sessionListLen = data.instrument?.instrumentSessions.length ?? 1;
+  const sessionsList = [];
+
+  for (let i = 0; i < sessionListLen; i++) {
+    const visit: Visit = {
+      proposalCode:
+        data.instrument?.instrumentSessions[
+          i
+        ].proposal?.proposalCategory?.toLowerCase() ?? "cm",
+      proposalNumber:
+        data.instrument?.instrumentSessions[i].proposal?.proposalNumber ??
+        12345,
+      number:
+        data.instrument?.instrumentSessions[i].instrumentSessionNumber ?? 1,
+    };
+    sessionsList.push(visitToText(visit));
+  }
+  return sessionsList;
+}
+
+export default GetInstrumentSessions;

src/components/InstrumentSessionSelection/InstrumentSessionView.tsx

@@ -0,0 +1,93 @@
+import { useState } from "react";
+import { visitToText, VisitInput } from "@diamondlightsource/sci-react-ui";
+import { useInstrumentSession } from "../../context/instrumentSession/useInstrumentSession";
+import {
+  Divider,
+  List,
+  ListItemButton,
+  ListItemText,
+  Menu,
+  MenuItem,
+} from "@mui/material";
+
+function InstrumentSessionView({ sessionsList }: { sessionsList: string[] }) {
+  const { instrumentSession, setInstrumentSession } = useInstrumentSession();
+
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
+  const [selectedIndex, setSelectedIndex] = useState(1);
+  const open = Boolean(anchorEl);
+  const handleClickListItem = (event: React.MouseEvent<HTMLElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleMenuItemClick = (
+    event: React.MouseEvent<HTMLElement>,
+    index: number,
+  ) => {
+    setSelectedIndex(index);
+    setAnchorEl(null);
+    setInstrumentSession(event.currentTarget.textContent ?? "");
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <div>
+      <List component="nav" aria-label="Instrument sessions">
+        <ListItemButton
+          id="lock-button"
+          aria-haspopup="listbox"
+          aria-controls="is-menu"
+          aria-label="instrument session"
+          aria-expanded={open ? "true" : undefined}
+          onClick={handleClickListItem}
+        >
+          <ListItemText
+            primary="Instrument Session"
+            secondary={instrumentSession}
+          />
+        </ListItemButton>
+      </List>
+      <Menu
+        id="is-menu"
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        slotProps={{
+          list: {
+            "aria-labelledby": "lock-button",
+            role: "listbox",
+          },
+        }}
+      >
+        <MenuItem selected={true} onKeyDown={e => e.stopPropagation()}>
+          <VisitInput
+            visit={{
+              number: 1,
+              proposalCode: "cm",
+              proposalNumber: 12345,
+            }}
+            onSubmit={visit => {
+              setInstrumentSession(visitToText(visit));
+              setAnchorEl(null);
+            }}
+          />
+        </MenuItem>
+        <Divider />
+        {sessionsList.map((option, index) => (
+          <MenuItem
+            key={option}
+            selected={index === selectedIndex}
+            onClick={event => handleMenuItemClick(event, index)}
+          >
+            {option}
+          </MenuItem>
+        ))}
+      </Menu>
+    </div>
+  );
+}
+
+export default InstrumentSessionView;

src/context/instrumentSession/InstrumentSessionProvider.tsx

@@ -5,7 +5,7 @@ const STORAGE_KEY = "instrument-session-id";
 
 export const InstrumentSessionProvider = ({
   children,
-  defaultSessionId = "0-0",
+  defaultSessionId = "cm40661-6",
 }: {
   children: ReactNode;
   defaultSessionId?: string;

src/main.tsx

@@ -55,7 +55,7 @@ const router = createBrowserRouter([
 enableMocking().then(() => {
   createRoot(document.getElementById("root")!).render(
     <RelayEnvironmentProvider environment={RelayEnvironment}>
-      <InstrumentSessionProvider defaultSessionId="cm40661-1">
+      <InstrumentSessionProvider>
         <StrictMode>
           <ThemeProvider theme={DiamondTheme} defaultMode="light">
             <RouterProvider router={router} />

src/mocks/handlers.ts

@@ -1,12 +1,18 @@
 import { http, HttpResponse } from "msw";
 import workflowsResponse from "./workflows-response.json";
 import plansResponse from "./plans-response.json";
+import instrumentSessionsResponse from "./instrumentSessions-response.json";
 
 const fakeTaskId = "7304e8e0-81c6-4978-9a9d-9046ab79ce3c";
 
 export const handlers = [
-  http.post("/api/workflows", () => {
-    return HttpResponse.json(workflowsResponse);
+  http.post("/api/graphql", request => {
+    const referrer = request.request.referrer;
+    if (referrer.search("workflows") > 0) {
+      return HttpResponse.json(workflowsResponse);
+    } else {
+      return HttpResponse.json(instrumentSessionsResponse);
+    }
   }),
 
   http.get("/api/plans", () => {