From c5ffd58679e48a5b2fa9ee51355a66323766ff86 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 12 Oct 2023 12:13:52 -0700
Subject: [PATCH] Polish report empty states (#14507)

---
 .../QueryDetailsPage/QueryDetailsPage.tsx     |  3 +-
 .../components/NoResults/NoResults.tsx        | 39 +++++++++++++------
 2 files changed, 29 insertions(+), 13 deletions(-)

diff --git a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
index b87d72c5d3..8a1aada3c0 100644
--- a/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
+++ b/frontend/pages/queries/details/QueryDetailsPage/QueryDetailsPage.tsx
@@ -218,7 +218,8 @@ const QueryDetailsPage = ({
             <div className={`${baseClass}__settings`}>
               <div className={`${baseClass}__automations`}>
                 <TooltipWrapper
-                  tipContent={`Query automations let you send data to your log destination on a schedule. When automations are <b>on</b>, data is sent according to a query’s frequency.`}
+                  // TODO - change to JSX after tooltip refactor
+                  tipContent={`Query automations let you send data to your log <br />destination on a schedule. When automations are <b>on</b>, <br />data is sent according to a query’s frequency.`}
                 >
                   Automations:
                 </TooltipWrapper>
diff --git a/frontend/pages/queries/details/components/NoResults/NoResults.tsx b/frontend/pages/queries/details/components/NoResults/NoResults.tsx
index 7c28867cf8..1f105ca493 100644
--- a/frontend/pages/queries/details/components/NoResults/NoResults.tsx
+++ b/frontend/pages/queries/details/components/NoResults/NoResults.tsx
@@ -46,8 +46,12 @@ const NoResults = ({
 
   // Collecting results state only shows if caching is enabled
   if (collectingResults && !disabledCaching) {
-    const collectingResultsInfo = () =>
-      `Fleet is collecting query results. Check back in about ${readableCheckbackTime}.`;
+    const collectingResultsInfo = () => (
+      <>
+        Fleet is collecting query results. <br />
+        Check back in about {readableCheckbackTime}.
+      </>
+    );
 
     return (
       <EmptyTable
@@ -58,7 +62,7 @@ const NoResults = ({
     );
   }
 
-  const noResultsInfo = () => {
+  const getNoResultsInfo = () => {
     // In order of empty page priority
     if (disabledCaching) {
       const tipContent = () => {
@@ -73,23 +77,25 @@ const NoResults = ({
         }
         return "Unknown";
       };
-      return (
+      return [
+        "Nothing to report",
         <>
           Results from this query are{" "}
           <TooltipWrapper tipContent={tipContent()}>
             not reported in Fleet
           </TooltipWrapper>
           .
-        </>
-      );
+        </>,
+      ];
     }
     if (!queryInterval) {
-      return (
+      return [
+        "Nothing to report",
         <>
           This query does not collect data on a schedule. Add <br />a{" "}
           <strong>frequency</strong> or run this as a live query to see results.
-        </>
-      );
+        </>,
+      ];
     }
     // No errors will be reported in V1
     // if (errorsOnly) {
@@ -100,15 +106,24 @@ const NoResults = ({
     //     </>
     //   );
     // }
-    return "This query has returned no data so far.";
+    return [
+      "Nothing to report yet",
+      <>
+        This query has returned no data so far. If you&apos;re <br />
+        expecting to see results, try running a live query to
+        <br />
+        get diagnostics.
+      </>,
+    ];
   };
 
+  const [emptyHeader, emptyDetails] = getNoResultsInfo();
   return (
     <EmptyTable
       className={baseClass}
       iconName="empty-software"
-      header={"Nothing to report yet"}
-      info={noResultsInfo()}
+      header={emptyHeader}
+      info={emptyDetails}
     />
   );
 };