standardize a default value for empty cells (#9899)

changes/default-cell-values

@@ -0,0 +1 @@
+* Standardized on a default value for empty cells in the UI.

frontend/components/TableContainer/DataTable/DataTable.tsx

@@ -523,7 +523,7 @@ const DataTable = ({
             ))}
           </thead>
           <tbody>
-            {pageOrRows.map((row: any) => {
+            {pageOrRows.map((row: Row) => {
               prepareRow(row);
 
               const rowStyles = classnames({

frontend/components/TableContainer/DataTable/TextCell/TextCell.tests.tsx

@@ -0,0 +1,26 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
+import TextCell from "./TextCell";
+
+describe("TextCell", () => {
+  it("renders booleans as string", () => {
+    render(<TextCell value={false} />);
+    expect(screen.getByText("false")).toBeInTheDocument();
+  });
+
+  it("renders a default value when `value` is empty", () => {
+    render(<TextCell value={""} />);
+    expect(screen.getByText(DEFAULT_EMPTY_CELL_VALUE)).toBeInTheDocument();
+  });
+
+  it("renders a default value when `value` is empty after formatting", () => {
+    render(<TextCell value={"foo"} formatter={() => ""} />);
+    expect(screen.getByText(DEFAULT_EMPTY_CELL_VALUE)).toBeInTheDocument();
+  });
+
+  it("uses the provided formatter function", () => {
+    render(<TextCell value={"foo"} formatter={() => "bar"} />);
+    expect(screen.getByText("bar")).toBeInTheDocument();
+  });
+});

frontend/components/TableContainer/DataTable/TextCell/TextCell.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface ITextCellProps {
   value: string | number | boolean | { timeString: string };
@@ -20,7 +21,7 @@ const TextCell = ({
   }
   return (
     <span className={`text-cell ${classes} ${greyed && "grey-cell"}`}>
-      {formatter(val)}
+      {formatter(val) || DEFAULT_EMPTY_CELL_VALUE}
     </span>
   );
 };

frontend/pages/hosts/details/cards/Policies/HostPoliciesTable/HostPoliciesTableConfig.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import StatusIndicator from "components/StatusIndicator";
 import Button from "components/buttons/Button";
 import { IHostPolicy } from "interfaces/policy";
-import { PolicyResponse } from "utilities/constants";
+import { PolicyResponse, DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 import ViewAllHostsLink from "components/ViewAllHostsLink";
 
 interface IHeaderProps {
@@ -36,7 +36,7 @@ const getPolicyStatus = (policy: IHostPolicy): string => {
   } else if (policy.response === "fail") {
     return "No";
   }
-  return "---";
+  return DEFAULT_EMPTY_CELL_VALUE;
 };
 
 // NOTE: cellProps come from react-table

frontend/pages/software/ManageSoftwarePage/SoftwareTableConfig.tsx

@@ -7,6 +7,7 @@ import { formatSoftwareType, ISoftware } from "interfaces/software";
 import { IVulnerability } from "interfaces/vulnerability";
 import PATHS from "router/paths";
 import { formatFloatAsPercentage } from "utilities/helpers";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 import Button from "components/buttons/Button";
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell";
@@ -114,7 +115,8 @@ const generateEPSSColumnHeader = () => {
       const vulns = cellProps.cell.value || [];
       const maxProbability = (!!vulns.length && getMaxProbability(vulns)) || 0;
       const displayValue =
-        (maxProbability && formatFloatAsPercentage(maxProbability)) || "---";
+        (maxProbability && formatFloatAsPercentage(maxProbability)) ||
+        DEFAULT_EMPTY_CELL_VALUE;
 
       return (
         <span

frontend/pages/software/SoftwareDetailsPage/components/Vulnerabilities/VulnTableConfig.tsx

@@ -2,6 +2,7 @@ import React from "react";
 
 import { IVulnerability } from "interfaces/vulnerability";
 import { formatFloatAsPercentage } from "utilities/helpers";
+import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 import HeaderCell from "components/TableContainer/DataTable/HeaderCell/HeaderCell";
 import TextCell from "components/TableContainer/DataTable/TextCell";
@@ -42,7 +43,7 @@ interface IDataColumn {
 
 const formatSeverity = (float: number | null) => {
   if (float === null) {
-    return "---";
+    return DEFAULT_EMPTY_CELL_VALUE;
   }
 
   let severity = "";

frontend/utilities/constants.ts

@@ -231,3 +231,5 @@ export const DEFAULT_CREATE_USER_ERRORS = {
 export const EMPTY_AGENT_OPTIONS = {
   config: {},
 };
+
+export const DEFAULT_EMPTY_CELL_VALUE = "---";