UI - add missing 'No report' copy (#16339)

## Addresses [this missing
copy](https://github.com/fleetdm/fleet/issues/15707#issuecomment-1906595805)

<img width="1109" alt="image"
src="https://github.com/fleetdm/fleet/assets/61553566/a8b8bf17-ec42-401b-ae2c-99b8bbdbd26e">


- [x] Changes file added for user-visible changes in `changes/`
- [x] Added/updated tests
- [x] Manual QA for all new/changed functionality

---------

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>

changes/15707-no-report-state

@@ -0,0 +1,2 @@
+* Added "No report" text when query results for a host are not being saved in Fleet but are being
+sent to a configured log destination.

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

@@ -6,10 +6,10 @@ import { DEFAULT_EMPTY_CELL_VALUE } from "utilities/constants";
 
 interface ITextCellProps {
   value?: string | number | boolean | { timeString: string } | null;
-  formatter?: (val: any) => JSX.Element | string; // string, number, or null
+  formatter?: (val: any) => React.ReactNode; // string, number, or null
   greyed?: boolean;
   classes?: string;
-  emptyCellTooltipText?: JSX.Element | string;
+  emptyCellTooltipText?: React.ReactNode;
 }
 
 const TextCell = ({

frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tests.tsx

@@ -7,7 +7,7 @@ import ReportUpdatedCell from "./ReportUpdatedCell";
 const HUMAN_READABLE_DATETIME_REGEX = /\d{1,2}\/\d{1,2}\/\d\d\d\d, \d{1,2}:\d{1,2}:\d{1,2}\s(A|P)M/;
 
 describe("ReportUpdatedCell component", () => {
-  it("Renders '---' with tooltip and no link when run on an interval with discard data and automations enabled", () => {
+  it("Renders 'No report' with tooltip and no link when run on an interval with discard data and automations enabled", () => {
     render(
       <ReportUpdatedCell
         interval={1000}
@@ -17,7 +17,7 @@ describe("ReportUpdatedCell component", () => {
       />
     );
 
-    expect(screen.getByText(/---/)).toBeInTheDocument();
+    expect(screen.getByText(/No report/)).toBeInTheDocument();
     expect(screen.getByText(/Results from this query/)).toBeInTheDocument();
     expect(screen.queryByText(/View report/)).toBeNull();
   });

frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/ReportUpdatedCell.tsx

@@ -34,15 +34,32 @@ const ReportUpdatedCell = ({
         // query runs, sends results to a logging dest, doesn't cache
         return (
           <TextCell
-            greyed
-            classes={`${baseClass}__value`}
-            emptyCellTooltipText={
-              <>
-                Results from this query are not reported in Fleet.
-                <br />
-                Data is being sent to your log destination.
-              </>
-            }
+            classes={`${baseClass}__value no-report`}
+            formatter={(val) => {
+              const tooltipId = uniqueId();
+              return (
+                <>
+                  <span data-tip data-for={tooltipId}>
+                    {val}
+                  </span>
+                  <ReactTooltip
+                    place="top"
+                    effect="solid"
+                    backgroundColor={COLORS["tooltip-bg"]}
+                    id={tooltipId}
+                  >
+                    {
+                      <>
+                        Results from this query are not reported in Fleet.
+                        <br />
+                        Data is being sent to your log destination.
+                      </>
+                    }
+                  </ReactTooltip>
+                </>
+              );
+            }}
+            value="No report"
           />
         );
       }

frontend/pages/hosts/details/cards/Queries/ReportUpdatedCell/_styles.scss

@@ -1,6 +1,10 @@
 .report-updated-cell {
   @include cell-with-link;
 
+  .no-report {
+    color: $ui-fleet-black-50;
+  }
+
   &__value {
     min-width: initial;
   }