RSDEV-279 Additional subsample count label (#60)

This change adds an additional label on the subsample form informing the user of how many siblings the subsample has.

Currently, the subsamples quantity field provides a link to the search for all of the parent sample's subsamples, with a link text that specifies the number of subsamples minus one -- the number of siblings the subsample has. Given that the quantity field is in the details section, it may appear below the fold when the vertical dimension of the viewport is low or it may not be visible due to the details section being collapsed.

This change duplicates this label by adding it to the overview section's parent sample field also, where it is more likely to be seen at first glance.

Author: rlamacraft

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

@@ -162,12 +162,19 @@ function QuantityField<
                           );
                       }}
                     >
-                      There {parentSample.subSamplesCount === 2 ? "is" : "are"}{" "}
-                      {parentSample.subSamplesCount - 1} other{" "}
-                      {parentSample.subSamplesCount === 2
-                        ? parentSample.subSampleAlias.alias
-                        : parentSample.subSampleAlias.plural}
-                      .
+                      {parentSample.subSamplesCount === 1 ? (
+                        `The parent sample only has one ${parentSample.subSampleAlias.alias}.`
+                      ) : (
+                        <>
+                          There{" "}
+                          {parentSample.subSamplesCount === 2 ? "is" : "are"}{" "}
+                          {parentSample.subSamplesCount - 1} other{" "}
+                          {parentSample.subSamplesCount === 2
+                            ? parentSample.subSampleAlias.alias
+                            : parentSample.subSampleAlias.plural}
+                          .
+                        </>
+                      )}
                     </Link>
                   </Typography>
                 )}

src/main/webapp/ui/src/Inventory/components/Fields/Sample.js

@@ -6,6 +6,9 @@ import { type Sample } from "../../../stores/definitions/Sample";
 import { RecordLink } from "../RecordLink";
 import FormField from "../../../components/Inputs/FormField";
 import Box from "@mui/material/Box";
+import Link from "@mui/material/Link";
+import Typography from "@mui/material/Typography";
+import NavigateContext from "../../../stores/contexts/Navigate";
 
 export default function SampleField<
   Fields: {
@@ -15,16 +18,47 @@ export default function SampleField<
   FieldOwner: HasUneditableFields<Fields>
 >({ fieldOwner }: {| fieldOwner: FieldOwner |}): Node {
   const sample = fieldOwner.fieldValues.sample;
+  const { useNavigate } = React.useContext(NavigateContext);
+  const navigate = useNavigate();
 
   return (
     <FormField
       value={void 0}
       label="Parent Sample"
       disabled
       renderInput={() => (
-        <Box>
-          <RecordLink record={sample} />
-        </Box>
+        <>
+          <Box>
+            <RecordLink record={sample} />
+          </Box>
+          {sample.globalId && (
+            <Typography variant="caption">
+              <Link
+                href={`/inventory/search?parentGlobalId=${sample.globalId}`}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (sample.globalId)
+                    navigate(
+                      `/inventory/search?parentGlobalId=${sample.globalId}`
+                    );
+                }}
+              >
+                {sample.subSamplesCount === 1 ? (
+                  `The parent sample only has one ${sample.subSampleAlias.alias}.`
+                ) : (
+                  <>
+                    There {sample.subSamplesCount === 2 ? "is" : "are"}{" "}
+                    {sample.subSamplesCount - 1} other{" "}
+                    {sample.subSamplesCount === 2
+                      ? sample.subSampleAlias.alias
+                      : sample.subSampleAlias.plural}
+                    .
+                  </>
+                )}
+              </Link>
+            </Typography>
+          )}
+        </>
       )}
     />
   );