Start separating common components so they're reusable

Author: noemifrisina

src/components/ReadOnlyInputs.tsx

@@ -0,0 +1,19 @@
+import { Grid2 } from "@mui/material";
+import { RoPvBox } from "../pv/PvComponent";
+
+type RoPvAddress = {
+  visit: string;
+  detector: string;
+};
+
+/**
+ * A couple of read-only boxes showing what the visit and detector in use are.
+ */
+export function ReadOnlyInputs(props: RoPvAddress) {
+  return (
+    <Grid2 size={12}>
+      <RoPvBox label="Visit" pv={props.visit} />
+      <RoPvBox label="Detector in use" pv={props.detector} />
+    </Grid2>
+  );
+}

src/routes/Extruder.tsx

@@ -1,4 +1,5 @@
 import { Box, Typography, useTheme } from "@mui/material";
+import { ReadOnlyInputs } from "../components/ReadOnlyInputs";
 
 export function Extruder() {
   const theme = useTheme();
@@ -14,6 +15,10 @@ export function Extruder() {
       >
         Extruder Data Collection Setup
       </Typography>
+      <ReadOnlyInputs
+        visit="ca://BL24I-MO-IOC-13:GP1"
+        detector="ca://BL24I-MO-IOC-13:GP15"
+      />
     </Box>
   );
 }

src/routes/FixedTarget.tsx

@@ -1,5 +1,6 @@
 import { Box, Typography, useTheme } from "@mui/material";
 import { ParamsPanel } from "../screens/CollectionPanel";
+import { ReadOnlyInputs } from "../components/ReadOnlyInputs";
 
 export function FixedTarget() {
   const theme = useTheme();
@@ -15,6 +16,10 @@ export function FixedTarget() {
       >
         Fixed Target Data Collection Setup
       </Typography>
+      <ReadOnlyInputs
+        visit="ca://BL24I-MO-IOC-13:GP100"
+        detector="ca://BL24I-MO-IOC-13:GP101"
+      />
       <ParamsPanel />
     </Box>
   );

src/screens/CollectionPanel.tsx

@@ -9,34 +9,12 @@ import {
   TextField,
   Tooltip,
 } from "@mui/material";
-import { PvComponent } from "../pv/PvComponent";
 import React from "react";
 import { PumpProbeOptions } from "../components/FixedTarget/PumpProbeComponents";
 import { MapView } from "../components/FixedTarget/FixedTargetMapComponents";
 import { chipTypes, MapTypes, pumpProbeMode } from "../components/params";
-import { forceString } from "../pv/util";
 import { AbortButton, RunPlanButton } from "../blueapi/BlueapiComponents";
 
-/**
- * A couple of read-only boxes showing what the visit and detector in use are.
- */
-function FixedInputs() {
-  return (
-    <Grid2 size={12}>
-      <PvComponent
-        label="Visit"
-        pv="ca://ME14E-MO-IOC-01:GP100"
-        transformValue={forceString}
-      />
-      <PvComponent
-        label="Detector in use"
-        pv="ca://ME14E-MO-IOC-01:GP101"
-        transformValue={forceString}
-      />
-    </Grid2>
-  );
-}
-
 type ParametersProps = {
   subDir: string;
   chipName: string;
@@ -111,7 +89,6 @@ function CollectionInput() {
   return (
     <Box sx={{ flexGrow: 1 }}>
       <Grid2 container spacing={2}>
-        <FixedInputs />
         <Grid2 size={4.5}>
           <Stack direction={"column"} spacing={1} alignItems={"center"}>
             <Tooltip