Styling packs list in Manage Query sidebar (#856)

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>
   );
 };

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>
             );
           })}

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;
+    }
   }
 }

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>

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;
+    }
+  }
 }