From 05dd12e7e14f1cef43b87aa0cf6aae2c2ff31bf1 Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Tue, 3 Oct 2023 15:51:11 -0500
Subject: [PATCH] Website: Add empty state to query library (#14144)

Closes: #13223

Changes:
- Added an empty state that is shown to users when no query matches
their selected filters.
---
 website/assets/styles/pages/query-library.less | 8 ++++++++
 website/views/pages/query-library.ejs          | 3 +++
 2 files changed, 11 insertions(+)

diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less
index a3c9cdb178..2fcb6addfa 100644
--- a/website/assets/styles/pages/query-library.less
+++ b/website/assets/styles/pages/query-library.less
@@ -67,6 +67,14 @@
       line-height: 18px;
     }
   }
+  [purpose='query-list-empty-state'] {
+    margin-top: 40px;
+    margin-right: 30px;
+    margin-left: 30px;
+    a {
+      font-size: 16px;
+    }
+  }
 
   .input-group {
     &.search {
diff --git a/website/views/pages/query-library.ejs b/website/views/pages/query-library.ejs
index de224facc1..235ef9de7f 100644
--- a/website/views/pages/query-library.ejs
+++ b/website/views/pages/query-library.ejs
@@ -139,6 +139,9 @@
               <div class="divider"></div>
             </div>
           </div>
+          <div purpose="query-list-empty-state" v-if="queriesList.length === 0">
+            <p class="mb-0">There are no results that match your filters. <a target="_blank" href="https://github.com/fleetdm/fleet/edit/main/docs/01-Using-Fleet/standard-query-library/standard-query-library.yml">Everyone can contribute</a>.</p>
+          </div>
         </div>
       </div>
     </div>