Add a "No Packs Available" message (#988)

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

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