From 518e5f4087d7b705b8dac53de18dd54f1ffe2fda Mon Sep 17 00:00:00 2001
From: Eric <eashaw@sailsjs.com>
Date: Fri, 7 Jun 2024 18:12:27 -0500
Subject: [PATCH] Website: Update links to queries in query library  (#19604)

Closes: #19228

Changes:
- Removed the click event from the cards on the /queries page and
updated them to be links.
---
 website/assets/styles/pages/query-library.less |  4 ++++
 website/views/pages/query-library.ejs          | 11 ++++++-----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/website/assets/styles/pages/query-library.less b/website/assets/styles/pages/query-library.less
index a6d883789e..6584078dd2 100644
--- a/website/assets/styles/pages/query-library.less
+++ b/website/assets/styles/pages/query-library.less
@@ -67,6 +67,7 @@
     padding: 2px 8px;
     border-radius: 20px;
     background-color: #E2E4EA;
+    color: #515774;
   }
 
   [purpose='selected-tag'] {
@@ -199,6 +200,7 @@
   .description {
     padding: 0px 30px 0px 30px;
     p {
+      color: #515774;
       font-size: 16px;
       line-height: 25px;
     }
@@ -263,6 +265,7 @@
     box-shadow: none;
     border: none;
     border-radius: 8px;
+    color: #515774;
     &:hover {
       .query-card {
         background-color: #F8F7FF;
@@ -271,6 +274,7 @@
         border-radius: 8px;
         cursor: pointer;
       }
+      text-decoration: none;
     }
   }
 
diff --git a/website/views/pages/query-library.ejs b/website/views/pages/query-library.ejs
index 59172d0798..14f54ec040 100644
--- a/website/views/pages/query-library.ejs
+++ b/website/views/pages/query-library.ejs
@@ -98,15 +98,15 @@
         </div>
         <div class="category__informational">
           <div v-for="query of queriesList">
-            <div class="card results" @click="clickCard(query.slug)">
+            <a class="card results" :href="'/queries/'+query.slug">
               <div class="card-body">
                 <div class="row justify-content-between align-items-center query-card">
                   <div class="col-12">
                     <div class="d-flex flex-row align-items-center flex-wrap">
                       <h5 class="card-title m-0 mb-1 mr-2">{{query.name}}</h5>
-                      <a purpose="critical-badge" class="mr-2" v-if="query.critical">Critical</a>
-                      <a purpose="requires-mdm-badge" class="mr-2" v-if="query.requiresMdm">Requires MDM</a>
-                      <span class="mr-2 my-sm-0 my-1 text-nowrap d-inline-flex" purpose="query-tag" v-for="tag in query.tags" @click.stop="clickSelectTag(tag)">{{tag}}</span>
+                      <span purpose="critical-badge" class="mr-2" v-if="query.critical">Critical</span>
+                      <span purpose="requires-mdm-badge" class="mr-2" v-if="query.requiresMdm">Requires MDM</span>
+                      <span class="mr-2 my-sm-0 my-1 text-nowrap d-inline-flex" purpose="query-tag" v-for="tag in query.tags" @click.stop.prevent="clickSelectTag(tag)">{{tag}}</span>
                     </div>
                   </div>
                   <div class="col-sm-9 col-md-9">
@@ -141,7 +141,8 @@
                 </div>
               </div>
               <div class="divider"></div>
-            </div>
+
+            </a>
           </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>