/admin/plugins: Show some text if nothing is display otherwise

src/static/css/admin.css

@@ -141,6 +141,15 @@ td, th {
   display: inline-block; /*make this fill the whole cell*/
 }
 
+.messages * {
+  text-align: center;
+  display: none;
+}
+
+.messages .fetching {
+  display: block;
+}
+
 .progress {
   position: absolute;
   top: 0; left: 0; bottom:0; right:0;

src/static/js/admin/plugins.js

@@ -87,6 +87,7 @@ $(document).ready(function () {
       $row.remove().appendTo('#installed-plugins')
       socket.emit("install", plugin);
       installed.progress.show(plugin, 'Installing')
+      $(".installed-results .nothing-installed").hide()
     });
 
     // uninstall
@@ -126,6 +127,8 @@ $(document).ready(function () {
 
   socket.on('results:search', function (data) {
     if(!data.results.length) search.end = true;
+    $(".search-results .nothing-found").hide()
+    $(".search-results .fetching").hide()
     
     console.log('got search results', data)
 
@@ -143,11 +146,18 @@ $(document).ready(function () {
     // re-render search results
     var searchWidget = $(".search-results");
     searchWidget.find(".results *").remove();
-    displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
+    if(search.results.length > 0) {
+      displayPluginList(search.results, searchWidget.find(".results"), searchWidget.find(".template tr"))
+    }else {
+      $(".search-results .nothing-found").show()
+    }
     $('#search-progress').hide()
   });
 
   socket.on('results:installed', function (data) {
+    $(".installed-results .nothing-installed").hide()
+    $(".installed-results .fetching").hide()
+
     installed.list = data.installed
     sortPluginList(installed.list, 'name', /*ASC?*/true);
 
@@ -156,11 +166,16 @@ $(document).ready(function () {
       return plugin.name != 'ep_etherpad-lite'
     })
 
-    // remove all installed plugins (leave all plugins that are still being installed)
+    // remove all installed plugins (leave plugins that are still being installed)
     installed.list.forEach(function(plugin) {
       $('#installed-plugins .'+plugin.name).remove()
     })
-    displayPluginList(installed.list, $("#installed-plugins"), $("#installed-plugin-template"));
+
+    if(installed.list.length > 0) {
+      displayPluginList(installed.list, $("#installed-plugins"), $("#installed-plugin-template"));
+    }else {
+      $(".installed-results .nothing-installed").show()
+    }
   });
   
   socket.on('results:updatable', function(data) {

src/templates/admin/plugins.html

@@ -32,7 +32,7 @@
 
       <div class="innerwrapper">
         <h2>Installed plugins</h2>
-        <table>
+        <table class="installed-results">
           <thead>
             <tr>
               <th>Name</th>
@@ -56,6 +56,12 @@
           </tbody>
           <tbody id="installed-plugins">
           </tbody>
+          <tbody>
+              <tr><td></td><td class="messages">
+                <p class="nothing-installed">You haven't installed any plugins yet.</p>
+                <p class="fetching">Fetching installed plugins...</p>
+              </td><td></td></tr>
+            </tbody>
         </table>
 
         <div class="paged listing search-results">
@@ -91,9 +97,11 @@
             <tbody class="results">
             </tbody>
             <tbody>
-              <tr><td>
+              <tr><td></td><td class="messages">
-                <div id="search-progress" class="progress"><img src="../static/img/loading.gif"/></div>
+                <div class="search-progress" class="progress"><img src="../static/img/loading.gif"/></div>
-              </td></tr>
+                <p class="nothing-found">No plugins found.</p>
+                <p class="fetching">Fetching catalogue...</p>
+              </td><td></td></tr>
             </tbody>
           </table>
         </div>