fix: 1142 improve frontend consistency (#1170)

Author: craigyu

frontend/src/__test__/components/SpatialCheckbox.test.tsx

@@ -23,7 +23,7 @@ describe("SpatialCheckbox", () => {
 
     // Check if the checkbox is in the document
     const button = screen.getByRole("button", {
-      name: /click to view this opening's map activity/i,
+      name: /Click to view this opening on the map/i,
     });
     expect(button).toBeInTheDocument();
   });
@@ -38,7 +38,7 @@ describe("SpatialCheckbox", () => {
     );
 
     const button = screen.getByRole("button", {
-      name: /click to view this opening's map activity/i,
+      name: /Click to view this opening on the map/i,
     });
     expect(button).toHaveClass("spatial-checkbox-checked");
   });
@@ -53,7 +53,7 @@ describe("SpatialCheckbox", () => {
     );
 
     const button = screen.getByRole("button", {
-      name: /click to view this opening's map activity/i,
+      name: /Click to view this opening on the map/i,
     });
 
     // Simulate a click on the button

frontend/src/components/OpeningDetails/OpeningForestCover/ForestCoverExpandedRow/ForestManagement/LayerTable.tsx

@@ -5,7 +5,7 @@ import {
   TableHead, TableHeader, TableRow
 } from "@carbon/react";
 import { TreeFallRisk } from "@carbon/icons-react";
-import { NOT_APPLICABLE, PLACE_HOLDER, UNIQUE_CHARACTERS_UNICODE } from "@/constants";
+import { PLACE_HOLDER, UNIQUE_CHARACTERS_UNICODE } from "@/constants";
 import { OpeningForestCoverDamageDto, OpeningForestCoverLayerDto } from "@/services/OpenApi";
 import { codeDescriptionToDisplayText } from "@/utils/multiSelectUtils";
 import { DamageAgentTableHeader, LayerTableHeaders } from "./constants";
@@ -112,10 +112,10 @@ const LayerTable = ({ layer }: LayerTableProps) => {
                 {/* Stems */}
                 <TableCell className="default-table-cell">
                   <ul className="cell-content-list">
-                    <li>Total stems: {layer.totalStems ? `${layer.totalStems} (st/ha)` : NOT_APPLICABLE}</li>
-                    <li>Total well spaced: {layer.totalWellSpaced ? `${layer.totalWellSpaced} (st/ha)` : NOT_APPLICABLE}</li>
-                    <li>Well spaced: {layer.wellSpaced ? `${layer.wellSpaced} (st/ha)` : NOT_APPLICABLE}</li>
-                    <li>Free growing: {layer.freeGrowing ? `${layer.freeGrowing} (st/ha)` : NOT_APPLICABLE}</li>
+                    <li>Total stems: {layer.totalStems ? `${layer.totalStems} (st/ha)` : PLACE_HOLDER}</li>
+                    <li>Total well spaced: {layer.totalWellSpaced ? `${layer.totalWellSpaced} (st/ha)` : PLACE_HOLDER}</li>
+                    <li>Well spaced: {layer.wellSpaced ? `${layer.wellSpaced} (st/ha)` : PLACE_HOLDER}</li>
+                    <li>Free growing: {layer.freeGrowing ? `${layer.freeGrowing} (st/ha)` : PLACE_HOLDER}</li>
                   </ul>
                 </TableCell>
               </TableRow>
@@ -174,7 +174,11 @@ const LayerTable = ({ layer }: LayerTableProps) => {
               </Column>
             </>
           )
-          : null
+          : (
+            <Column sm={4} md={8} lg={16}>
+              <p>No damage agent data available for this layer.</p>
+            </Column>
+          )
       }
 
     </Grid>

frontend/src/components/OpeningDetails/OpeningForestCover/index.tsx

@@ -13,7 +13,7 @@ import {
   Modal
 } from "@carbon/react";
 import { CropGrowth, DiamondOutline, Layers, Popup, Search } from "@carbon/icons-react";
-import { NOT_APPLICABLE, PLACE_HOLDER } from "@/constants";
+import { PLACE_HOLDER } from "@/constants";
 import TableSkeleton from "@/components/TableSkeleton";
 import EmptySection from "@/components/EmptySection";
 import { StockingStatusTag } from "@/components/Tags";
@@ -155,10 +155,10 @@ const OpeningForestCover = ({
           <div className="opening-forest-cover-cell-multiple-lines">
             <span>Polygon ID: {row.polygonId}</span>
             <span>
-              Standard unit: {row.standardUnitId ?? NOT_APPLICABLE}
+              Standard unit: {row.standardUnitId ?? PLACE_HOLDER}
             </span>
             <span>
-              Unmapped area: {row.unmappedArea.code ? codeDescriptionToDisplayText(row.unmappedArea) : NOT_APPLICABLE}
+              Unmapped area: {row.unmappedArea.code ? codeDescriptionToDisplayText(row.unmappedArea) : PLACE_HOLDER}
             </span>
           </div>
         );
@@ -226,12 +226,12 @@ const OpeningForestCover = ({
                     <span>Species: {displayText}</span>
                   </DefinitionTooltip>
                 )
-                : `Species: ${NOT_APPLICABLE}`
+                : `Species: ${PLACE_HOLDER}`
             }
-            <span>Total: {row.inventoryLayer.total !== null ? `${row.inventoryLayer.total} (st/ha)` : NOT_APPLICABLE}</span>
-            <span>Total well spaced: {row.inventoryLayer.totalWellSpaced !== null ? `${row.inventoryLayer.totalWellSpaced} (st/ha)` : NOT_APPLICABLE}</span>
-            <span>Well spaced: {row.inventoryLayer.wellSpaced !== null ? `${row.inventoryLayer.wellSpaced} (st/ha)` : NOT_APPLICABLE}</span>
-            <span>Free growing: {row.inventoryLayer.freeGrowing !== null ? `${row.inventoryLayer.freeGrowing} (st/ha)` : NOT_APPLICABLE}</span>
+            <span>Total: {row.inventoryLayer.total !== null ? `${row.inventoryLayer.total} (st/ha)` : PLACE_HOLDER}</span>
+            <span>Total well spaced: {row.inventoryLayer.totalWellSpaced !== null ? `${row.inventoryLayer.totalWellSpaced} (st/ha)` : PLACE_HOLDER}</span>
+            <span>Well spaced: {row.inventoryLayer.wellSpaced !== null ? `${row.inventoryLayer.wellSpaced} (st/ha)` : PLACE_HOLDER}</span>
+            <span>Free growing: {row.inventoryLayer.freeGrowing !== null ? `${row.inventoryLayer.freeGrowing} (st/ha)` : PLACE_HOLDER}</span>
           </div>
         );
       }
@@ -258,11 +258,11 @@ const OpeningForestCover = ({
                     <span>Species: {displayText}</span>
                   </DefinitionTooltip>
                 )
-                : `Species: ${NOT_APPLICABLE}`
+                : `Species: ${PLACE_HOLDER}`
             }
-            <span>Total well spaced: {row.silvicultureLayer.totalWellSpaced !== null ? `${row.silvicultureLayer.totalWellSpaced} (st/ha)` : NOT_APPLICABLE}</span>
-            <span>Well spaced: {row.silvicultureLayer.wellSpaced !== null ? `${row.silvicultureLayer.wellSpaced} (st/ha)` : NOT_APPLICABLE}</span>
-            <span>Free growing: {row.silvicultureLayer.freeGrowing !== null ? `${row.silvicultureLayer.freeGrowing} (st/ha)` : NOT_APPLICABLE}</span>
+            <span>Total well spaced: {row.silvicultureLayer.totalWellSpaced !== null ? `${row.silvicultureLayer.totalWellSpaced} (st/ha)` : PLACE_HOLDER}</span>
+            <span>Well spaced: {row.silvicultureLayer.wellSpaced !== null ? `${row.silvicultureLayer.wellSpaced} (st/ha)` : PLACE_HOLDER}</span>
+            <span>Free growing: {row.silvicultureLayer.freeGrowing !== null ? `${row.silvicultureLayer.freeGrowing} (st/ha)` : PLACE_HOLDER}</span>
           </div>
         );
       }

frontend/src/components/SpatialCheckbox/index.tsx

@@ -20,7 +20,7 @@ const SpatialCheckbox: React.FC<SpatialCheckboxProps> = ({
     hasIconOnly
     renderIcon={selectedRows.includes(rowId) ? LocationFilled : Location}
     onClick={() => handleRowSelection(rowId)}
-    iconDescription="Click to view this opening's map activity"
+    iconDescription="Click to view this opening on the map"
     tooltipPosition="right"
     kind="ghost"
     size="sm"

frontend/src/constants/index.ts

@@ -35,8 +35,6 @@ export enum UNIQUE_CHARACTERS_UNICODE {
   PIPE = "\u007C",
 };
 
-export const NOT_APPLICABLE = "N/A" as const;
-
 export const REDIRECT_KEY = "postLoginRedirect" as const;
 
 export const SELECTED_CLIENT_KEY = 'SELECTED_CLIENT' as const;

frontend/src/utils/StringUtils.ts

@@ -1,4 +1,4 @@
-import { NOT_APPLICABLE } from "@/constants";
+import { PLACE_HOLDER } from "@/constants";
 
 /**
  * Converts a string to kebab-case format by replacing spaces with hyphens
@@ -35,6 +35,6 @@ export const renderLabelValueWithUnit = (
     value: string | number | null | undefined,
     unit: string
 ): string => {
-    const display = value ? `${value} ${unit}` : NOT_APPLICABLE;
+    const display = value ? `${value} ${unit}` : PLACE_HOLDER;
     return `${label}: ${display}`;
 };