SW-6450 Add biomass observation detail view

src/constants.ts

@@ -90,6 +90,7 @@ export enum APP_PATHS {
   OBSERVATION_DETAILS = '/observations/:plantingSiteId/results/:observationId',
   OBSERVATION_PLANTING_ZONE_DETAILS = '/observations/:plantingSiteId/results/:observationId/zone/:plantingZoneId',
   OBSERVATION_MONITORING_PLOT_DETAILS = '/observations/:plantingSiteId/results/:observationId/zone/:plantingZoneId/plot/:monitoringPlotId',
+  OBSERVATION_BIOMASS_MEASSUREMENTS_DETAILS = '/observations/:plantingSiteId/results/:observationId/biomassMeassurements/:monitoringPlotId',
   OPT_IN = '/opt-in',
   ORGANIZATION_EDIT = '/organization/edit',
   ORGANIZATION = '/organization',

src/scenes/ObservationsRouter/BiomassMeasurement.tsx

@@ -11,6 +11,8 @@ import { useAppSelector } from 'src/redux/store';
 import strings from 'src/strings';
 import { PlantingSite } from 'src/types/Tracking';
 
+import BiomassMeasurementRenderer from './BiomassMeasurementRenderer';
+
 export type BiomassMeasurementProps = {
   selectedPlantingSite?: PlantingSite;
 };
@@ -35,7 +37,7 @@ export default function BiomassMeasurement({ selectedPlantingSite }: BiomassMeas
   const columns = (): TableColumnType[] => {
     return [
       {
-        key: 'plotNumber',
+        key: 'monitoringPlotNumber',
         name: strings.PLOT,
         type: 'string',
       },
@@ -81,6 +83,7 @@ export default function BiomassMeasurement({ selectedPlantingSite }: BiomassMeas
             columns={columns}
             rows={adHocObservationsResults || []}
             orderBy='startDate'
+            Renderer={BiomassMeasurementRenderer}
           />
         ) : (
           <EmptyStateContent

src/scenes/ObservationsRouter/BiomassMeasurementRenderer.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+import Link from 'src/components/common/Link';
+import CellRenderer, { TableRowType } from 'src/components/common/table/TableCellRenderer';
+import { RendererProps } from 'src/components/common/table/types';
+import { APP_PATHS } from 'src/constants';
+
+export default function BiomassMeasurementRenderer(props: RendererProps<TableRowType>): JSX.Element {
+  const { column, row, value, index } = props;
+
+  const textStyles = {
+    fontSize: '16px',
+    '& > p': {
+      fontSize: '16px',
+    },
+  };
+
+  const createLinkToPlot = (iValue: React.ReactNode | unknown[]) => {
+    const biomassPlotUrl = APP_PATHS.OBSERVATION_BIOMASS_MEASSUREMENTS_DETAILS;
+
+    const to = biomassPlotUrl
+      .replace(':monitoringPlotId', row.adHocPlot?.monitoringPlotId?.toString())
+      .replace(':observationId', row.observationId?.toString())
+      .replace(':plantingSiteId', row.plantingSiteId?.toString());
+
+    return (
+      <Link fontSize='16px' to={to}>
+        {iValue as React.ReactNode}
+      </Link>
+    );
+  };
+
+  if (column.key === 'monitoringPlotNumber') {
+    return (
+      <CellRenderer
+        index={index}
+        column={column}
+        value={createLinkToPlot(row.adHocPlot.monitoringPlotNumber)}
+        row={row}
+        sx={textStyles}
+        title={value as string}
+      />
+    );
+  }
+
+  return <CellRenderer {...props} sx={textStyles} />;
+}