From d1a259f4c07faacb41304cc1d6773dbfe9ebf3f1 Mon Sep 17 00:00:00 2001
From: Kyle Knight <kyle@kolide.co>
Date: Tue, 17 Jan 2017 15:13:59 -0600
Subject: [PATCH] Add a "No Packs Available" message (#988)

---
 .../components/packs/PacksList/PacksList.jsx  | 21 +++++++++++++++++--
 .../components/packs/PacksList/_styles.scss   |  7 ++++++-
 2 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/frontend/components/packs/PacksList/PacksList.jsx b/frontend/components/packs/PacksList/PacksList.jsx
index 9384dc27d0..6bf9aced55 100644
--- a/frontend/components/packs/PacksList/PacksList.jsx
+++ b/frontend/components/packs/PacksList/PacksList.jsx
@@ -26,6 +26,22 @@ class PacksList extends Component {
     selectedPack: {},
   };
 
+  renderHelpText = () => {
+    const { packs } = this.props;
+
+    if (packs.length) {
+      return false;
+    }
+
+    return (
+      <tr className={`${baseClass}__empty-table`}>
+        <td colSpan={6}>
+          <p>No packs available. Try creating one.</p>
+        </td>
+      </tr>
+    );
+  }
+
   renderPack = (pack) => {
     const { checkedPackIDs, onCheckPack, onSelectPack, selectedPack } = this.props;
     const checked = includes(checkedPackIDs, pack.id);
@@ -45,7 +61,7 @@ class PacksList extends Component {
 
   render () {
     const { allPacksChecked, className, onCheckAllPacks, packs } = this.props;
-    const { renderPack } = this;
+    const { renderPack, renderHelpText } = this;
     const tableClassName = classnames(baseClass, className);
 
     return (
@@ -68,7 +84,8 @@ class PacksList extends Component {
           </tr>
         </thead>
         <tbody>
-          {packs.map(pack => renderPack(pack))}
+          {renderHelpText()}
+          {!!packs.length && packs.map(pack => renderPack(pack))}
         </tbody>
       </table>
     );
diff --git a/frontend/components/packs/PacksList/_styles.scss b/frontend/components/packs/PacksList/_styles.scss
index 4c64deed0b..9a2f6fed5c 100644
--- a/frontend/components/packs/PacksList/_styles.scss
+++ b/frontend/components/packs/PacksList/_styles.scss
@@ -3,7 +3,6 @@
   border-radius: 3px;
   box-shadow: inset 0 0 8px 0 rgba(0, 0, 0, 0.12);
   margin-top: 20px;
-  opacity: 0.8;
 
   thead {
     background-color: $bg-medium;
@@ -34,4 +33,10 @@
   &__select-all {
     margin-bottom: 0;
   }
+
+  &__empty-table {
+    text-align: center;
+    font-size: 18px;
+    color: $text-ultradark;
+  }
 }