updating branch

.github/workflows/_frontend_code.yml

@@ -9,7 +9,7 @@ on:
       - main
 
 jobs:
-  lint:
+  checks:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repository code
@@ -27,3 +27,7 @@ jobs:
       - name: Check Formatting of TypeScript Code
         working-directory: frontend
         run: npm run format:check
+
+      - name: Run Tests
+        working-directory: frontend
+        run: npm run test

README.md

@@ -19,6 +19,8 @@ VITE_KEYCLOAK_URL = "https://identity-test.diamond.ac.uk"
 VITE_KEYCLOAK_REALM = "dls"
 VITE_KEYCLOAK_CLIENT_ID = "ImagingHubDev"
 VITE_KEYCLOAK_SCOPE = "openid profile posix-uid email"
+VITE_GRAPHQL_HTTP_ENDPOINT = "https://graph-nightly.diamond.ac.uk/graphql"
+VITE_GRAPHQL_WS_ENDPOINT = "wss://graph-nightly.diamond.ac.uk/graphql/ws"
 ```
 
 #### Install dependencies and generate code from GraphQL schema

backend/requirements.txt

@@ -5,11 +5,11 @@ certifi==2024.12.14
 click==8.1.8
 dnspython==2.7.0
 email_validator==2.2.0
-fastapi==0.115.6
+fastapi==0.137.2
 fastapi-cli==0.0.7
-h11==0.14.0
+h11==0.16.0
 httomolib
-httpcore==1.0.7
+httpcore==1.0.9
 httptools==0.6.4
 httpx==0.28.1
 idna==3.10
@@ -22,12 +22,12 @@ mdurl==0.1.2
 networkx==3.4.2
 numpy==2.2.2
 packaging==24.2
-pillow==11.1.0
+pillow==12.3.0
 pydantic==2.10.5
 pydantic_core==2.27.2
 Pygments==2.19.1
 python-dotenv==1.0.1
-python-multipart==0.0.20
+python-multipart==0.0.31
 PyWavelets==1.9.0
 PyYAML==6.0.2
 rich==13.9.4
@@ -36,11 +36,10 @@ scikit-image==0.25.0
 scipy==1.15.1
 shellingham==1.5.4
 sniffio==1.3.1
-starlette==0.41.3
+starlette==1.3.1
 tifffile==2025.1.10
 typer==0.15.1
 typing_extensions==4.12.2
 uvicorn==0.34.0
 uvloop==0.21.0
 watchfiles==1.0.4
-Pillow>=10.0.0

frontend/.env.production

@@ -3,3 +3,5 @@ VITE_KEYCLOAK_URL = "https://identity.diamond.ac.uk"
 VITE_KEYCLOAK_REALM = "dls"
 VITE_KEYCLOAK_CLIENT_ID = "ImagingHub"
 VITE_KEYCLOAK_SCOPE = "openid profile posix-uid email"
+VITE_GRAPHQL_HTTP_ENDPOINT = "https://graph.diamond.ac.uk/graphql"
+VITE_GRAPHQL_WS_ENDPOINT = "wss://graph.diamond.ac.uk/graphql/ws"

frontend/dashboard/src/App.tsx

@@ -4,7 +4,7 @@ import {
   CardContent,
   Container,
   Divider,
-  Grid2,
+  Grid,
   Typography,
 } from "@mui/material";
 import { Link } from "react-router-dom";
@@ -38,7 +38,7 @@ const Dashboard: React.FC = () => {
         <Typography fontSize={30} display="flex" justifyContent="center">
           ImagingHub
         </Typography>
-        <Grid2 display="flex">
+        <Grid display="flex">
           <AppCard
             name="Tomography"
             desc="Web app for HTTomo"
@@ -50,7 +50,7 @@ const Dashboard: React.FC = () => {
             desc="ePSIC workflow submission"
             linkTarget="ePSIC"
           />
-        </Grid2>
+        </Grid>
       </Container>
     </>
   );

frontend/ePSIC/src/App.tsx

@@ -1,9 +1,11 @@
 import { WorkflowForm } from "./components/workflows/WorkflowForm";
+import { ResourceForm } from "../../shared_components/ResourceForm";
 
 export const App: React.FC = () => {
   return (
     <>
       <WorkflowForm />
+      <ResourceForm />
     </>
   );
 };

frontend/ePSIC/src/components/workflows/WorkflowForm.tsx

@@ -60,67 +60,65 @@ export const WorkflowForm: FC = () => {
   );
 
   return (
-    <Grid container justifyContent="center" spacing={1}>
-      <Grid size={3}>
-        <Typography variant="h4">ePSIC Workflows</Typography>
+    <Stack>
+      <Typography variant="h4">ePSIC Workflows</Typography>
 
-        <form
-          onSubmit={(e) => {
-            e.preventDefault();
-            openLink();
-          }}
-        >
-          <Stack direction="column" spacing={2}>
-            <InputLabel size="small" id="workflow-select-label">
-              Workflow
-            </InputLabel>
-            <Grid>
-              <Select
-                labelId="workflow-select-label"
-                label="Workflow"
-                variant="outlined"
-                size="small"
-                name="workflow"
-                value={data.workflow}
-                onChange={(e: SelectChangeEvent<string>) =>
-                  setData((prev) => ({ ...prev, workflow: e.target.value }))
-                }
-              >
-                {workflowOptions.map((opt) => (
-                  <MenuItem key={opt.value} value={opt.value}>
-                    {opt.label}
-                  </MenuItem>
-                ))}
-              </Select>
-              <Tooltip title={option.desc}>
-                <IconButton>
-                  <InfoIcon />
-                </IconButton>
-              </Tooltip>
-            </Grid>
-            <TextField
-              name="visit"
-              label="Visit"
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          openLink();
+        }}
+      >
+        <Stack direction="column" spacing={2}>
+          <InputLabel size="small" id="workflow-select-label">
+            Workflow
+          </InputLabel>
+          <Grid>
+            <Select
+              labelId="workflow-select-label"
+              label="Workflow"
               variant="outlined"
               size="small"
-              placeholder="Visit"
-              type="text"
-              value={data.visit}
-              onChange={(e: ChangeEvent<HTMLInputElement>) => {
-                const value = e.target.value;
-                setData((prev) => ({ ...prev, visit: value }));
-              }}
-              helperText={visitMatch ? "" : "Expected format: xx12345-1"}
-              error={!visitMatch}
-            />
+              name="workflow"
+              value={data.workflow}
+              onChange={(e: SelectChangeEvent<string>) =>
+                setData((prev) => ({ ...prev, workflow: e.target.value }))
+              }
+            >
+              {workflowOptions.map((opt) => (
+                <MenuItem key={opt.value} value={opt.value}>
+                  {opt.label}
+                </MenuItem>
+              ))}
+            </Select>
+            <Tooltip title={option.desc}>
+              <IconButton>
+                <InfoIcon />
+              </IconButton>
+            </Tooltip>
+          </Grid>
+          <TextField
+            name="visit"
+            label="Visit"
+            variant="outlined"
+            size="small"
+            placeholder="Visit"
+            type="text"
+            value={data.visit}
+            onChange={(e: ChangeEvent<HTMLInputElement>) => {
+              const value = e.target.value;
+              setData((prev) => ({ ...prev, visit: value }));
+            }}
+            helperText={visitMatch ? "" : "Expected format: xx12345-1"}
+            error={!visitMatch}
+          />
 
-            <Button variant="contained" type="submit" disabled={!visitMatch}>
-              Submit
-            </Button>
-          </Stack>
-        </form>
-      </Grid>
-    </Grid>
+          <Button variant="contained" type="submit" disabled={!visitMatch}>
+            Submit
+          </Button>
+        </Stack>
+      </form>
+    </Stack>
   );
 };
 

frontend/i14/src/components/workflows/OptionSelect.tsx

@@ -0,0 +1,51 @@
+import React, { FC } from "react";
+import {
+  FormControl,
+  InputLabel,
+  Select,
+  IconButton,
+  Tooltip,
+  Grid,
+} from "@mui/material";
+import InfoIcon from "@mui/icons-material/Info";
+import type { SelectChangeEvent } from "@mui/material/Select";
+import type { Option } from "../../types/workflowFields";
+
+type Props = {
+  label: string;
+  value: string;
+  options: Option[];
+  onChange: (e: SelectChangeEvent<string>) => void;
+};
+
+const OptionSelect: FC<Props> = ({ label, value, options, onChange }) => {
+  const selected = options.find((o) => o.value === value);
+
+  return (
+    <FormControl>
+      <InputLabel shrink>{label}</InputLabel>
+      <Grid>
+        <Select
+          native
+          label={label}
+          size="small"
+          value={value}
+          onChange={onChange}
+        >
+          {options.map((opt) => (
+            <option key={opt.value} value={opt.value}>
+              {opt.label}
+            </option>
+          ))}
+        </Select>
+        <Tooltip title={selected?.desc ?? ""}>
+          <IconButton>
+            <InfoIcon />
+          </IconButton>
+        </Tooltip>
+      </Grid>
+    </FormControl>
+  );
+};
+
+export default OptionSelect;