Merge pull request #122 from DiamondLightSource/minimal-session-selector

Add minimal session selector component

Author: yousefmoazzam

frontend/unified/src/App.tsx

@@ -1,4 +1,5 @@
 import { Box, Divider, Grid2 as Grid, Stack, Typography } from "@mui/material";
+import { SessionSelector } from "./components/SessionSelector";
 
 const VERTICAL_SPACING = 2;
 const HORIZONTAL_SPACING = 2;
@@ -9,11 +10,7 @@ export const App: React.FC = () => {
       <Grid container spacing={HORIZONTAL_SPACING} columns={2}>
         <Stack spacing={VERTICAL_SPACING}>
           <Typography variant="h5">Session</Typography>
-          <PlaceholderComponent
-            placeholderText="Session selector component placeholder"
-            height={100}
-            width={500}
-          />
+          <SessionSelector />
           <Divider sx={{ width: "100%" }} />
           <Typography variant="h5">Scan</Typography>
           <PlaceholderComponent

frontend/unified/src/components/SessionSelector.tsx

@@ -0,0 +1,66 @@
+import {
+  Chip,
+  TextField,
+  ToggleButton,
+  ToggleButtonGroup,
+  Stack,
+} from "@mui/material";
+import { useState } from "react";
+
+enum SessionSelectionMode {
+  Latest = "Latest",
+  Custom = "Custom",
+}
+
+export const SessionSelector: React.FC = () => {
+  // TODO: initial value based on fetching latest session associated with logged-in user
+  const [session] = useState<string>("latest-session");
+  // TODO: initial value based on the initial session
+  const [beamline] = useState<string>("Beamline: depends-on-session");
+  const [sessionSelectionMode, setSessionSelectionMode] =
+    useState<SessionSelectionMode>(SessionSelectionMode.Latest);
+  const [textInputValue, setTextInputValue] = useState<string>("");
+
+  return (
+    <Stack direction="row" spacing={2} alignItems={"center"}>
+      <ToggleButtonGroup
+        exclusive
+        value={sessionSelectionMode}
+        onChange={(_, toggleButtonLabel: string) => {
+          if (toggleButtonLabel === SessionSelectionMode.Latest) {
+            setSessionSelectionMode(SessionSelectionMode.Latest);
+          } else if (toggleButtonLabel === SessionSelectionMode.Custom) {
+            setSessionSelectionMode(SessionSelectionMode.Custom);
+          }
+        }}
+      >
+        <ToggleButton
+          sx={{ textTransform: "none" }}
+          value={SessionSelectionMode.Latest}
+        >
+          {SessionSelectionMode.Latest}
+        </ToggleButton>
+        <ToggleButton
+          sx={{ textTransform: "none" }}
+          value={SessionSelectionMode.Custom}
+        >
+          {SessionSelectionMode.Custom}
+        </ToggleButton>
+      </ToggleButtonGroup>
+      <TextField
+        variant="outlined"
+        label="Session"
+        disabled={sessionSelectionMode === SessionSelectionMode.Latest}
+        value={
+          sessionSelectionMode === SessionSelectionMode.Latest
+            ? session
+            : textInputValue
+        }
+        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+          setTextInputValue(e.currentTarget.value);
+        }}
+      />
+      <Chip label={beamline} variant="outlined" color="primary"></Chip>
+    </Stack>
+  );
+};