RSDEV-282 By default, hide all but the most recent two notes on subsamples

src/main/webapp/ui/src/Inventory/Subsample/Fields/Notes/NoteItem.js

@@ -9,14 +9,34 @@ import TextField from "../../../../components/Inputs/TextField";
 import { type Note } from "../../../../stores/models/SubSampleModel";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
+import { styled, darken } from "@mui/material/styles";
+import { chipClasses } from "@mui/material/Chip";
 
 type NoteItemArgs = {|
   note: Note,
 |};
 
+const CustomListItem = styled(ListItem)(({ theme }) => ({
+  borderLeft: `4px solid ${theme.palette.record.subSample.bg}`,
+  backgroundColor: theme.palette.hover.tableRow,
+  color: darken(theme.palette.record.subSample.bg, 0.9),
+  padding: theme.spacing(0, 1),
+  marginBottom: theme.spacing(1),
+  "& p": {
+    marginBlockStart: theme.spacing(0.25),
+    marginBlockEnd: theme.spacing(0.25),
+    marginLeft: theme.spacing(2),
+    fontSize: "0.85rem",
+  },
+  [`& .${chipClasses.root}`]: {
+    background: "transparent",
+    border: `2px solid ${theme.palette.record.subSample.bg}`,
+  },
+}));
+
 export default function NoteItem({ note }: NoteItemArgs): Node {
   return (
-    <ListItem alignItems="flex-start" divider>
+    <CustomListItem alignItems="flex-start">
       <ListItemText
         disableTypography
         primary={
@@ -37,6 +57,6 @@ export default function NoteItem({ note }: NoteItemArgs): Node {
           <TextField value={note.content} disabled={true} variant="standard" />
         }
       />
-    </ListItem>
+    </CustomListItem>
   );
 }

src/main/webapp/ui/src/Inventory/Subsample/Fields/Notes/Notes.js

@@ -22,10 +22,10 @@ function Notes({
   return (
     <FormControl>
       {!hideLabel && <FormLabel>Notes</FormLabel>}
-      {record.isFieldVisible("notes") && <NotesList record={record} />}
-      {record.isFieldVisible("notes") && (
+      {record.isFieldEditable("notes") && record.isFieldVisible("notes") && (
         <NewNote record={record} onErrorStateChange={onErrorStateChange} />
       )}
+      {record.isFieldVisible("notes") && <NotesList record={record} />}
     </FormControl>
   );
 }

src/main/webapp/ui/src/Inventory/Subsample/Fields/Notes/NotesList.js

@@ -5,21 +5,43 @@ import { observer } from "mobx-react-lite";
 import NoteItem from "./NoteItem";
 import List from "@mui/material/List";
 import SubSampleModel from "../../../../stores/models/SubSampleModel";
+import Button from "@mui/material/Button";
+import Collapse from "@mui/material/Collapse";
+import Divider from "@mui/material/Divider";
 
 type NotesListArgs = {|
   record: SubSampleModel,
 |};
 
 function NotesList({ record }: NotesListArgs): Node {
+  const [firstNote, secondNote, ...restOfNotes] = record.notes.toReversed();
+  const [open, setOpen] = React.useState(false);
+
+  if (record.loading) return null;
+  if (record.notes.length === 0) return null;
+
   return (
-    !record.loading &&
-    record.notes.length > 0 && (
-      <List disablePadding>
-        {record.notes.map((note, i) => (
-          <NoteItem key={i} note={note} />
+    <List disablePadding sx={{ mt: 1 }}>
+      {firstNote && <NoteItem key={0} note={firstNote} />}
+      {secondNote && <NoteItem key={1} note={secondNote} />}
+      {restOfNotes.length > 0 && (
+        <Divider textAlign="center" sx={{ backgroundColor: "white", mb: 1 }}>
+          <Button
+            size="small"
+            onClick={() => {
+              setOpen(!open);
+            }}
+          >
+            {open ? "Show fewer" : "Show more"}
+          </Button>
+        </Divider>
+      )}
+      <Collapse in={open}>
+        {restOfNotes.map((note, i) => (
+          <NoteItem key={i + 2} note={note} />
         ))}
-      </List>
-    )
+      </Collapse>
+    </List>
   );
 }