Make the empty folder state more useful

Currently if there’s nothing in a folder you just get an empty page.
This looks a bit broken, or like the page hasn’t finished loading.

This commit adds a message to the page to show that it’s intentionally
blank.

The message is contextual based on type of template, because there might
be templates in the current folder, even if you can’t see them at the
moment (because you’re filtering).

app/assets/stylesheets/components/message.scss

@@ -54,6 +54,11 @@
 
   }
 
+  &-empty {
+    color: $secondary-text-colour;
+    padding: $gutter-half 0 $gutter-one-third 0;
+  }
+
 }
 
 .folder-heading {

app/models/service.py

@@ -133,7 +133,10 @@ class Service():
 
     @property
     def has_templates(self):
-        return len(self.all_templates) > 0
+        return bool(self.all_templates)
+
+    def has_folders(self):
+        return bool(self.all_template_folders)
 
     @property
     def has_multiple_template_types(self):

app/templates/views/templates/_template_list.html

@@ -1,44 +1,50 @@
 {% from "components/checkbox.html" import unlabelled_checkbox %}
-{% from "components/message-count-label.html" import folder_contents_count %}
+{% from "components/message-count-label.html" import folder_contents_count, message_count_label %}
 
-<nav id=template-list>
-  {% for template_folder in template_folders %}
-    <div class="template-list-item {% if can_manage_folders %}template-list-item-with-checkbox{% endif %}">
-      {% if can_manage_folders %}
-        {{ unlabelled_checkbox(
-          id='templates-or-folder-{}'.format(template_folder.id),
-          name='templates_and_folders',
-          value=template_folder.id,
-        ) }}
-      {% endif %}
-      <h2 class="message-name template-list-folder">
-        <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=template_folder.id) }}">
-          {{ template_folder.name }}
-        </a>
-      </h2>
-      <p class="message-type">
-        {{ folder_contents_count(
-          current_service.get_template_folders(template_type, template_folder.id)|length,
-          current_service.get_templates(template_type, template_folder.id)|length,
-        ) }}
-      </p>
-    </div>
-  {% endfor %}
-  {% for template in templates %}
-    <div class="template-list-item {% if can_manage_folders %}template-list-item-with-checkbox{% endif %}">
-      {% if can_manage_folders %}
-        {{ unlabelled_checkbox(
-          id='templates-or-folder-{}'.format(template.id),
-          name='templates_and_folders',
-          value=template.id,
-        ) }}
-      {% endif %}
-      <h2 class="message-name">
-        <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=template.id) }}">{{ template.name }}</a>
-      </h2>
-      <p class="message-type">
-        {{ message_count_label(1, template.template_type, suffix='')|capitalize }} template
-      </p>
-    </div>
-  {% endfor %}
-</nav>
+{% if service_has_templates_or_folders and not templates and not template_folders %}
+  <p class="template-list-empty">
+    No {{ message_count_label(1, template_type, suffix='') }} templates in this folder
+  </p>
+{% else %}
+  <nav id=template-list>
+    {% for template_folder in template_folders %}
+      <div class="template-list-item {% if can_manage_folders %}template-list-item-with-checkbox{% endif %}">
+        {% if can_manage_folders %}
+          {{ unlabelled_checkbox(
+            id='templates-or-folder-{}'.format(template_folder.id),
+            name='templates_and_folders',
+            value=template_folder.id,
+          ) }}
+        {% endif %}
+        <h2 class="message-name template-list-folder">
+          <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=template_folder.id) }}">
+            {{ template_folder.name }}
+          </a>
+        </h2>
+        <p class="message-type">
+          {{ folder_contents_count(
+            current_service.get_template_folders(template_type, template_folder.id)|length,
+            current_service.get_templates(template_type, template_folder.id)|length,
+          ) }}
+        </p>
+      </div>
+    {% endfor %}
+    {% for template in templates %}
+      <div class="template-list-item {% if can_manage_folders %}template-list-item-with-checkbox{% endif %}">
+        {% if can_manage_folders %}
+          {{ unlabelled_checkbox(
+            id='templates-or-folder-{}'.format(template.id),
+            name='templates_and_folders',
+            value=template.id,
+          ) }}
+        {% endif %}
+        <h2 class="message-name">
+          <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=template.id) }}">{{ template.name }}</a>
+        </h2>
+        <p class="message-type">
+          {{ message_count_label(1, template.template_type, suffix='')|capitalize }} template
+        </p>
+      </div>
+    {% endfor %}
+  </nav>
+{% endif %}

app/templates/views/templates/choose.html

@@ -77,7 +77,12 @@
 
     {% if can_manage_folders %}
       <form method="post">
-        {% with templates=templates, template_folders=template_folders %}
+        {% with
+          templates=templates,
+          template_folders=template_folders,
+          service_has_templates_or_folders=(current_service.has_templates or current_service.has_folders),
+          template_type=template_type
+        %}
           {% include 'views/templates/_template_list.html' %}
         {% endwith %}
         {% with templates=templates, template_folders=template_folders, templates_and_folders_form=templates_and_folders_form %}
@@ -85,7 +90,12 @@
         {% endwith %}
       </form>
     {% else %}
-      {% with templates=templates, template_folders=template_folders %}
+      {% with
+        templates=templates,
+        template_folders=template_folders,
+        service_has_templates_or_folders=(current_service.has_templates or current_service.has_folders),
+        template_type=template_type
+      %}
         {% include 'views/templates/_template_list.html' %}
       {% endwith %}
     {% endif %}

tests/app/main/views/test_template_folders.py

@@ -8,6 +8,7 @@ from tests.conftest import SERVICE_ONE_ID, normalize_spaces
 PARENT_FOLDER_ID = '7e979e79-d970-43a5-ac69-b625a8d147b0'
 CHILD_FOLDER_ID = '92ee1ee0-e4ee-4dcc-b1a7-a5da9ebcfa2b'
 GRANDCHILD_FOLDER_ID = 'fafe723f-1d39-4a10-865f-e551e03d8886'
+FOLDER_TWO_ID = 'bbbb222b-2b22-2b22-222b-b222b22b2222'
 
 
 def _folder(name, folder_id=None, parent=None):
@@ -105,7 +106,8 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
         'expected_parent_link_args,'
         'extra_args,'
         'expected_nav_links,'
-        'expected_items'
+        'expected_items, '
+        'expected_empty_message '
     ),
     [
         (
@@ -123,7 +125,8 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
                 'email_template_two Email template',
                 'letter_template_one Letter template',
                 'letter_template_two Letter template',
-            ]
+            ],
+            None,
         ),
         (
             'Templates – service one – GOV.UK Notify',
@@ -136,6 +139,7 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
                 'sms_template_one Text message template',
                 'sms_template_two Text message template',
             ],
+            None,
         ),
         (
             'folder_one – Templates – service one – GOV.UK Notify',
@@ -147,6 +151,7 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
                 'folder_one_one 1 template, 1 folder',
                 'folder_one_two Empty',
             ],
+            None,
         ),
         (
             'folder_one – Templates – service one – GOV.UK Notify',
@@ -157,6 +162,7 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
             [
                 'folder_one_one 1 folder',
             ],
+            None,
         ),
         (
             'folder_one – Templates – service one – GOV.UK Notify',
@@ -165,6 +171,7 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
             {'template_type': 'email', 'template_folder_id': PARENT_FOLDER_ID},
             ['All', 'Text message', 'Letter'],
             [],
+            'No email templates in this folder',
         ),
         (
             'folder_one_one – folder_one – service one – GOV.UK Notify',
@@ -176,6 +183,7 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
                 'folder_one_one_one 1 template',
                 'letter_template_nested Letter template',
             ],
+            None,
         ),
         (
             'folder_one_one_one – folder_one_one – service one – GOV.UK Notify',
@@ -186,6 +194,16 @@ def test_post_add_template_folder_page(client_request, service_one, mocker, pare
             [
                 'sms_template_nested Text message template',
             ],
+            None,
+        ),
+        (
+            'folder_two – Templates – service one – GOV.UK Notify',
+            'Templates / folder_two',
+            {'template_type': 'all'},
+            {'template_folder_id': FOLDER_TWO_ID},
+            ['Text message', 'Email', 'Letter'],
+            [],
+            'No templates in this folder',
         ),
     ]
 )
@@ -202,9 +220,10 @@ def test_should_show_templates_folder_page(
     extra_args,
     expected_nav_links,
     expected_items,
+    expected_empty_message,
 ):
     mock_get_template_folders.return_value = [
-        _folder('folder_two'),
+        _folder('folder_two', FOLDER_TWO_ID),
         _folder('folder_one', PARENT_FOLDER_ID),
         _folder('folder_one_two', parent=PARENT_FOLDER_ID),
         _folder('folder_one_one', CHILD_FOLDER_ID, parent=PARENT_FOLDER_ID),
@@ -260,6 +279,13 @@ def test_should_show_templates_folder_page(
     for index, expected_item in enumerate(expected_items):
         assert normalize_spaces(page_items[index].text) == expected_item
 
+    if expected_empty_message:
+        assert normalize_spaces(page.select_one('.template-list-empty').text) == (
+            expected_empty_message
+        )
+    else:
+        assert not page.select('.template-list-empty')
+
     mock_get_service_templates.assert_called_once_with(SERVICE_ONE_ID)