From 6f0fb864d7d0b0edac8410a2c3f135b06a5c5ac0 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Wed, 11 Jan 2017 18:31:23 -0600
Subject: [PATCH] Styling packs list in Manage Query sidebar (#856)

---
 .../PackDetailsSidePanel.jsx                  |  2 +-
 .../ScheduledQueriesSection.jsx               |  3 ++-
 .../PackDetailsSidePanel/_styles.scss         | 10 +++++---
 .../QueryDetailsSidePanel.jsx                 | 13 +++++-----
 .../QueryDetailsSidePanel/_styles.scss        | 24 +++++++++++++++++++
 5 files changed, 41 insertions(+), 11 deletions(-)

diff --git a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
index 471c4c6c5e..5de7383ef9 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/PackDetailsSidePanel.jsx
@@ -18,7 +18,7 @@ const Description = ({ pack }) => {
   return (
     <div>
       <p className={`${baseClass}__section-label`}>Description</p>
-      <p className={`${baseClass}__description`}>{pack.description}</p>
+      <p className={`${baseClass}__description`}>{pack.description || <em>No description available</em>}</p>
     </div>
   );
 };
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
index 80732ebf69..0b74dcb8d2 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
+++ b/frontend/components/side_panels/PackDetailsSidePanel/ScheduledQueriesSection.jsx
@@ -1,5 +1,6 @@
 import React, { Component, PropTypes } from 'react';
 import { take } from 'lodash';
+import { Link } from 'react-router';
 
 import Button from 'components/buttons/Button';
 import Icon from 'components/icons/Icon';
@@ -61,7 +62,7 @@ class ScheduledQueriesSection extends Component {
             return (
               <li key={`scheduled-query-${scheduledQuery.id}`}>
                 <Icon className={`${baseClass}__query-icon`} name="query" />
-                <span className={`${baseClass}__query-name`}>{scheduledQuery.name}</span>
+                <Link to={`/queries/${scheduledQuery.id}`} className={`${baseClass}__query-name`}>{scheduledQuery.name}</Link>
               </li>
             );
           })}
diff --git a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
index 76ab353db5..fd6035a37c 100644
--- a/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/PackDetailsSidePanel/_styles.scss
@@ -64,8 +64,12 @@
 
   &__query-name {
     @include ellipsis(240px);
-    color: $text-medium;
-    font-size: 16px;
-    vertical-align: bottom;
+    font-size: 14px;
+    vertical-align: middle;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
   }
 }
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
index 8a3e6a36a2..592823e439 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/QueryDetailsSidePanel.jsx
@@ -1,4 +1,5 @@
 import React, { Component, PropTypes } from 'react';
+import { Link } from 'react-router';
 
 import Button from 'components/buttons/Button';
 import Icon from 'components/icons/Icon';
@@ -30,16 +31,16 @@ class QueryDetailsSidePanel extends Component {
     }
 
     return (
-      <div>
+      <ul className={`${baseClass}__packs`}>
         {packs.map((pack) => {
           return (
-            <div key={`query-side-panel-pack-${pack.id}`}>
+            <li className={`${baseClass}__pack-item`} key={`query-side-panel-pack-${pack.id}`}>
               <Icon name="packs" />
-              <span>{pack.name}</span>
-            </div>
+              <Link to={`/packs/${pack.id}`} className={`${baseClass}__pack-name`}>{pack.name}</Link>
+            </li>
           );
         })}
-      </div>
+      </ul>
     );
   }
 
@@ -62,7 +63,7 @@ class QueryDetailsSidePanel extends Component {
           wrapEnabled
         />
         <h2>Description</h2>
-        <p className={`${baseClass}__description`}>{description}</p>
+        <p className={`${baseClass}__description`}>{description || <em>No description available</em>}</p>
         <h2>Packs</h2>
         {renderPacks()}
       </SecondarySidePanelContainer>
diff --git a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
index a762107e2b..bafc5b01a4 100644
--- a/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
+++ b/frontend/components/side_panels/QueryDetailsSidePanel/_styles.scss
@@ -41,4 +41,28 @@
   .button {
     width: 100%;
   }
+
+  &__packs {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  &__pack-item {
+    .kolidecon {
+      margin-right: 12px;
+      color: $text-medium;
+    }
+  }
+
+  &__pack-name {
+    @include ellipsis(240px);
+    text-decoration: none;
+    font-size: 14px;
+    vertical-align: middle;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
 }