From 225500ad28c9115941c2d7eaa86393e6aeb00efa Mon Sep 17 00:00:00 2001
From: RachelElysia <71795832+RachelElysia@users.noreply.github.com>
Date: Mon, 7 Jun 2021 14:44:02 -0400
Subject: [PATCH] Empty query message (#989)

* Add link to standard query library
* Style and external link icon
---
 .../components/queries/QueriesList/QueriesList.jsx  | 12 +++++++++++-
 .../components/queries/QueriesList/_styles.scss     | 13 +++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/components/queries/QueriesList/QueriesList.jsx b/frontend/components/queries/QueriesList/QueriesList.jsx
index 286098220b..472b94ca31 100644
--- a/frontend/components/queries/QueriesList/QueriesList.jsx
+++ b/frontend/components/queries/QueriesList/QueriesList.jsx
@@ -4,6 +4,7 @@ import classnames from "classnames";
 import { includes, sortBy, size } from "lodash";
 
 import queryInterface from "interfaces/query";
+import FleetIcon from "components/icons/FleetIcon";
 import Checkbox from "components/forms/fields/Checkbox";
 import QueriesListRow from "components/queries/QueriesList/QueriesListRow";
 
@@ -83,7 +84,16 @@ class QueriesList extends Component {
     return (
       <tr>
         <td colSpan={6}>
-          <p>No queries available. Try creating one.</p>
+          <p>
+            No queries available. Try creating one or get started by&nbsp;
+            <a
+              href="https://fleetdm.com/queries"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              importing standard queries <FleetIcon name="external-link" />
+            </a>
+          </p>
         </td>
       </tr>
     );
diff --git a/frontend/components/queries/QueriesList/_styles.scss b/frontend/components/queries/QueriesList/_styles.scss
index 88685d5acd..38c3178223 100644
--- a/frontend/components/queries/QueriesList/_styles.scss
+++ b/frontend/components/queries/QueriesList/_styles.scss
@@ -6,6 +6,19 @@
   margin-top: $pad-medium;
   overflow: scroll;
 
+  a {
+    font-size: $x-small;
+    color: $core-vibrant-blue;
+    font-weight: $bold;
+    text-decoration: none;
+
+    img {
+      width: 12px;
+      height: 12px;
+      margin-left: 7px;
+    }
+  }
+
   &__table {
     border-collapse: collapse;
     width: 100%;