From 600fb401d6eacb8228022a845109610008fb4ea1 Mon Sep 17 00:00:00 2001
From: Jacob Shandling <61553566+jacobshandling@users.noreply.github.com>
Date: Thu, 12 Oct 2023 14:52:27 -0700
Subject: [PATCH] Match no results tooltip text to Figma (#14516)

## Addresses [Reed's comment in
Slack](https://fleetdm.slack.com/archives/C01EZVBHFHU/p1697144038116529)
<img width="655" alt="Screenshot 2023-10-12 at 2 45 51 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/b48621a6-092a-4623-91f5-03d7749733f6">
<img width="655" alt="Screenshot 2023-10-12 at 2 47 47 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/e7844ecd-a2d8-4122-ae3e-35a4a62f45c6">
<img width="655" alt="Screenshot 2023-10-12 at 2 47 32 PM"
src="https://github.com/fleetdm/fleet/assets/61553566/2932fe4a-6b5c-4d09-9a96-1d88c39808e9">

Co-authored-by: Jacob Shandling <jacob@fleetdm.com>
---
 .../queries/details/components/NoResults/NoResults.tsx | 10 +++++++---
 .../queries/details/components/NoResults/_styles.scss  |  9 +++++++++
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 frontend/pages/queries/details/components/NoResults/_styles.scss

diff --git a/frontend/pages/queries/details/components/NoResults/NoResults.tsx b/frontend/pages/queries/details/components/NoResults/NoResults.tsx
index 1f105ca493..c3f07b6de1 100644
--- a/frontend/pages/queries/details/components/NoResults/NoResults.tsx
+++ b/frontend/pages/queries/details/components/NoResults/NoResults.tsx
@@ -66,14 +66,18 @@ const NoResults = ({
     // In order of empty page priority
     if (disabledCaching) {
       const tipContent = () => {
+        // TODO - change to JSX with refactor tooltipwrapper merge
         if (disabledCachingGlobally) {
-          return "The following setting prevents saving this query's results in Fleet:<ul><li>Query reports are globally disabled in organization settings.</li></ul>";
+          return `<div>The following setting prevents saving this query's results in Fleet:</div>\
+             <div>&nbsp; • Query reports are globally disabled in organization settings.</div>`;
         }
         if (discardDataEnabled) {
-          return "The following setting prevents saving this query's results in Fleet:<ul><li>This query has Discard data enabled.</li></ul>";
+          return `<div>The following setting prevents saving this query's results in Fleet:</div>\
+         <div>&nbsp; • This query has <b>Discard data</b> enabled.</div>`;
         }
         if (!loggingSnapshot) {
-          return "The following setting prevents saving this query's results in Fleet:<ul><li>The logging setting for this query is not Snapshot.</li></ul>";
+          return `<div>The following setting prevents saving this query's results in Fleet:</div>\
+          <div>&nbsp; • The logging setting for this query is not <b>Snapshot</b>.</div>`;
         }
         return "Unknown";
       };
diff --git a/frontend/pages/queries/details/components/NoResults/_styles.scss b/frontend/pages/queries/details/components/NoResults/_styles.scss
new file mode 100644
index 0000000000..09fad9f2c0
--- /dev/null
+++ b/frontend/pages/queries/details/components/NoResults/_styles.scss
@@ -0,0 +1,9 @@
+.no-results {
+  .component__tooltip-wrapper {
+    &__tip-text {
+      display: flex;
+      flex-direction: column;
+      gap: $pad-xsmall;
+    }
+  }
+}