templates: Add toolbar for apps in app.html

Changes to the app.html layout, mainly:

- A new panel is created to hold action buttons. Closes #1698.

- Launch button is now shown in the panel alongside "Client Apps".

- Run Diagnostics button is moved into this panel as well. Closes #1690.

- Disable 'Launch web client' button when app is disabled. Closes #1718.

Reviewed-by: James Valleroy <jvalleroy@mailbox.org>

plinth/templates/app.html

@@ -57,21 +57,7 @@
     </p>
   {% endif %}
 
-  {% if clients|length == 1 %}
+  {% include "toolbar.html" with clients=clients enabled=is_enabled diagnostics_module_name=diagnostics_module_name %}
-    {% with clients|first|lookup:'platforms' as platforms %}
-      {% if platforms|length == 1 and platforms|first|lookup:'type' == 'web' %}
-        {% block launch_button %}
-          <p>
-            <a href='{{ platforms|first|lookup:"url" }}'
-               target='_blank' class='btn btn-primary'>
-              {% trans "Launch web client" %}</a>
-          </p>
-        {% endblock %}
-      {% endif %}
-    {% endwith %}
-  {% else %}
-    {% include "clients.html" with clients=clients enabled=is_enabled %}
-  {% endif %}
 
   {% block subsubmenu %}
     {% if subsubmenu %}
@@ -100,12 +86,6 @@
     {% endif %}
   {% endblock %}
 
-  {% block diagnostics %}
-    {% if diagnostics_module_name %}
-      {% include "diagnostics_button.html" with module=diagnostics_module_name enabled=is_enabled %}
-    {% endif %}
-  {% endblock %}
-
   {% include "internal-zone.html" %}
 
   {% include "port-forwarding-info.html" with service_name=name %}

plinth/templates/clients.html

@@ -22,14 +22,6 @@
 {% load static %}
 
 {% if clients  %}
-  <p>
-    <button type="button" class="btn btn-default collapsed collapsible-button"
-            data-toggle="collapse" data-target="#clients">
-      <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
-      {% trans "Client Apps" %}
-    </button>
-  </p>
-
   <div id="clients" class="collapse">
     <table id="clients" class="table table-striped">
 
@@ -44,7 +36,7 @@
                 <td>{{ client.name }}</td>
                 <td>
                   <a target="_blank" rel="noopener noreferrer"
-                     class="btn btn-default" role="button"
+                     class="btn btn-default" role="button" data-turbolinks="false"
                      {% if not enabled %} disabled="disabled"
                      {% else %} href="{{ platform.url }}"
                      {% endif %}>

plinth/templates/setup.html

@@ -50,7 +50,7 @@
     </p>
   {% endif %}
 
-  {% include "clients.html" with clients=setup_helper.module.clients %}
+  {% include "toolbar.html" with clients=setup_helper.module.clients %}
 
   {% if setup_state == 'up-to-date' %}
 

plinth/templates/toolbar.html

@@ -0,0 +1,96 @@
+{% comment %}
+#
+# This file is part of FreedomBox.
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as
+# published by the Free Software Foundation, either version 3 of the
+# License, or (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <http://www.gnu.org/licenses/>.
+#
+{% endcomment %}
+
+{% load bootstrap %}
+{% load i18n %}
+{% load plinth_extras %}
+{% load static %}
+
+{% block toolbar %}
+  {% if clients %}
+    <div class="toolbar toolbar-default">
+      <div class="toolbar-heading">
+        <section class="toolbar-title">
+
+          {% if clients|get_self_hosted_web_apps|length == 1 and clients|length == 1 %}
+
+            <a
+              {% if enabled %}
+                href='{{ clients|get_self_hosted_web_apps|first|lookup:"url" }}'
+              {% endif %}
+              target='_blank'
+            >
+              <button
+                role="button"
+                type="button"
+                class="btn btn-primary"
+                {% if not enabled %}
+                  disabled="disabled"
+                {% endif %}
+              >
+                {% trans "Launch web client" %}
+              </button>
+            </a>
+
+          {% elif clients|get_self_hosted_web_apps|length == 1 %}
+            <button type="button" class="btn btn-default collapsed collapsible-button"
+                  data-toggle="collapse" data-target="#clients">
+              <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+              {% trans "Client Apps" %}
+            </button>
+            <a
+              {% if enabled %}
+                href='{{ clients|get_self_hosted_web_apps|first|lookup:"url" }}'
+              {% endif %}
+              target='_blank'
+            >
+              <button
+                role="button"
+                type="button"
+                class="btn btn-primary"
+                {% if not enabled %}
+                  disabled="disabled"
+                {% endif %}
+              >
+                {% trans "Launch web client" %}
+              </button>
+            </a>
+          {% else %}
+            <button type="button" class="btn btn-default collapsed collapsible-button"
+                  data-toggle="collapse" data-target="#clients">
+              <span class="fa fa-chevron-right fa-fw" aria-hidden="true"></span>
+              {% trans "Client Apps" %}
+            </button>
+          {% endif %}
+
+          {% block diagnostics %}
+            {% if diagnostics_module_name %}
+              {% include "diagnostics_button.html" with module=diagnostics_module_name enabled=is_enabled %}
+            {% endif %}
+          {% endblock %}
+    
+        </section>
+      </div>
+      <div class="toolbar-body">
+        {% include "clients.html" with clients=clients enabled=is_enabled %}
+      </div>
+    </div>
+
+  {% endif %}
+{% endblock toolbar %}

plinth/templatetags/plinth_extras.py

@@ -16,6 +16,7 @@
 #
 
 import os
+from urllib.parse import urlparse
 
 from django import template
 
@@ -73,3 +74,32 @@ def clients_of_type(clients, client_type):
 def lookup(dictionary, key):
     """Get the value in the dictionary at given key"""
     return dictionary[key]
+
+
+@register.filter(name='is_relative_url')
+def is_relative_url(url):
+    """Check if the given link is relative or not"""
+    parsed_url = urlparse(url)
+    return not parsed_url.netloc
+
+
+@register.filter(name='get_self_hosted_web_apps')
+def get_self_hosted_web_apps(clients):
+    """Get a list of self hosted web apps"""
+    clients_with_web_platforms = list(
+        filter(
+            lambda c: len(
+                list(filter(lambda p: p['type'] == 'web', c['platforms']))),
+            clients))
+    clients_with_self_hosted_apps = list(
+        filter(
+            lambda c: len(
+                list(
+                    filter(lambda p: is_relative_url(p['url']), c['platforms'])
+                )), clients_with_web_platforms))
+    mapped_list = list(
+        map(
+            lambda c: list(filter(lambda p: p['type'] == 'web', c['platforms'])
+                           ), clients_with_self_hosted_apps))
+
+    return [elm for clnt in mapped_list for elm in clnt]

static/themes/default/css/plinth.css

@@ -513,3 +513,25 @@ a.menu_link_active {
 .header-bar .app-toggle-container, .header-bar h2 {
     margin: auto 0;
 }
+.toolbar, .panel-heading {
+    border: none;
+}
+
+.toolbar-heading {
+    padding: 10px 0;
+}
+
+.toolbar-title > :not(:first-child) {
+    margin-left: 10px;
+}
+
+.toolbar-body {
+    min-height: 0;
+    padding: 0;
+    margin: 0;
+    overflow: auto;
+}
+
+.toolbar-body #clients.table {
+    margin-bottom: 0;
+}