added empty cta to playlist page + hid playlist table when empty (#12841)

* added empty cta to playlist page + hid playlist table when empty

* implemented the empty-list-cta component

* removed extra protip, changed messaging

public/app/features/playlist/partials/playlists.html

 <page-header model="ctrl.navModel"></page-header>
 
 <div class="page-container page-body">
+  <div ng-if="ctrl.playlists.length > 0">
     <div class="page-action-bar">
       <div class="page-action-bar__spacer"></div>
       <a class="btn btn-success pull-right" href="playlists/create">
@@ -11,8 +12,12 @@
 
     <table class="filter-table">
       <thead>
-      <th><strong>Name</strong></th>
-      <th><strong>Start url</strong></th>
+        <th>
+          <strong>Name</strong>
+        </th>
+        <th>
+          <strong>Start url</strong>
+        </th>
         <th style="width: 78px"></th>
         <th style="width: 78px"></th>
         <th style="width: 25px"></th>
@@ -21,7 +26,7 @@
         <td>
           <a href="playlists/edit/{{playlist.id}}">{{playlist.name}}</a>
         </td>
-      <td >
+        <td>
           <a href="playlists/play/{{playlist.id}}">playlists/play/{{playlist.id}}</a>
         </td>
         <td class="text-center">
@@ -43,5 +48,19 @@
         </td>
       </tr>
     </table>
+  </div>
+
+  <div ng-if="ctrl.playlists.length === 0">
+    <empty-list-cta model="{
+      title: 'There are no playlists created yet',
+      buttonIcon: 'fa fa-plus',
+      buttonLink: 'playlists/create',
+      buttonTitle: ' Create Playlist',
+      proTip: 'You can run the playlist in Kiosk Mode.',
+      proTipLink: 'http://docs.grafana.org/reference/playlist/',
+      proTipLinkTitle: 'Learn more',
+      proTipTarget: '_blank'
+    }" />
+  </div>
 
 </div>