Got the tests to pass, so doing a commit

app/assets/javascripts/templateFolderForm.js

@@ -261,7 +261,7 @@
 
     this.countSelectedCheckboxes = function() {
       const allSelected = this.$form.find('input:checkbox:checked');
-      const templates = allSelected.filter((idx, el) => $(el).siblings('.template-list-template').length > 0).length;
+      const templates = allSelected.filter((idx, el) => $(el).siblings('.usa-template-list-template').length > 0).length;
       const folders = allSelected.filter((idx, el) => $(el).siblings('.template-list-folder').length > 0).length;
       const results = {
         'templates': templates,

app/templates/views/service-settings/set-sms.html

@@ -2,7 +2,7 @@
 {% from "components/form.html" import form_wrapper %}
 {% from "components/page-header.html" import page_header %}
 {% from "components/page-footer.html" import page_footer %}
-{% from "components/uk_components/back-link/macro.njk" import govukBackLink %}
+{% from "components/us_components/back-link/macro.njk" import govukBackLink %}
 
 {% block service_page_title %}
   Send text messages

app/templates/views/templates/_template_list.html

@@ -1,4 +1,4 @@
-{% macro format_item_name(name, separators=True) -%}
+<!-- {% macro format_item_name(name, separators=True) -%}
   {%- if name is string -%}
     {{- name -}}
   {%- else -%}
@@ -30,6 +30,8 @@
 
     {% for item in template_list %}
 
+    {% set item_link_content %}{% endset %}
+
       {% set label_content %}
         <span class="usa-sr-only">
           {%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
@@ -98,4 +100,115 @@
       }) }}
     {% endif %}
   </nav>
+{% endif %} -->
+
+
+{% macro format_item_name(name, separators=True) -%}
+{%- if name is string -%}
+{{- name -}}
+{%- else -%}
+{%- for part in name -%}
+{{- format_item_name(part, separators) -}}
+{%- if not loop.last -%}
+{%- if separators %}
+<span class="message-name-separator"></span>{%- else %} {% endif -%}
+{% endif -%}
+{%- endfor -%}
 {% endif %}
+{%- endmacro %}
+
+{% if template_list.template_folder_id and not template_list.templates_to_show %}
+<p class="template-list-empty">
+  {% if template_list.folder_is_empty %}
+  This folder is empty
+  {% else %}
+  There are no {{ 1|message_count_label(template_type, suffix='') }} templates in this folder
+  {% endif %}
+</p>
+{% else %}
+<nav id="template-list"
+  class="{{ 'govuk-!-margin-top-1' if (not show_template_nav and not show_search_box) else 'govuk-!-margin-top-6' }}">
+  {% set checkboxes_data = [] %}
+
+  {% if not current_user.has_permissions('manage_templates') %}
+  <ul>
+    {% endif %}
+
+    {% for item in template_list %}
+
+    {% set item_link_content %}
+    {% for ancestor in item.ancestors %}
+    <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}"
+      class="usa-link template-list-folder">
+      {{- format_item_name(ancestor.name) -}}
+    </a> <span class="message-name-separator"></span>
+    {% endfor %}
+    {% if item.is_folder %}
+    <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}"
+      class="usa-link template-list-folder">
+      <span class="live-search-relevant">{{- format_item_name(item.name) -}}</span>
+    </a>
+    {% else %}
+    <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}"
+      class="usa-link font-body-lg usa-template-list-template">
+      <span class="live-search-relevant">
+        {%- if current_service.api_keys -%}
+        <span class="govuk-!-display-none">{{ item.id }} </span>
+        {%- endif -%}
+        {{- format_item_name(item.name) -}}
+      </span>
+    </a>
+    {% endif %}
+    {% endset %}
+
+    {% set label_content %}
+    <span class="usa-sr-only">
+      {%- for ancestor in item.ancestors %}{{ format_item_name(ancestor.name, separators=False) }} {% endfor -%}
+      {{ format_item_name(item.name, separators=False) -}}
+    </span>
+    {% endset %}
+
+    {% set item_meta %}
+    <span id="{{ item.id }}-item-hint" class="usa-hint template-list-item-hint">
+      {{ item.hint }}
+    </span>
+    {% endset %}
+
+    {# create the item config now to include the label content -#}
+    {# TODO: "attributes": { "aria-describedby": item.id ~ "-hint" } needs to be added but govuk-frontend-jinja doesn't
+    currently support this -#}
+    {% set checkbox_config = {
+    "html": label_content,
+    "label": {
+    "classes": "template-list-item-label margin-top-05",
+    },
+    "id": "templates-or-folder-" ~ item.id,
+    "classes": "template-list-item template-list-item-with-checkbox {}".format(
+    "template-list-item-hidden-by-default" if item.ancestors else "template-list-item-without-ancestors"),
+    "after": item_link_content ~ item_meta
+    } %}
+    {% set _ = checkboxes_data.append(checkbox_config) %}
+
+    {% if not current_user.has_permissions('manage_templates') %}
+    <li
+      class="template-list-item {%- if item.ancestors %} template-list-item-hidden-by-default {%- else %} template-list-item-without-ancestors{%- endif %}">
+      {{ item_link_content }}
+      <p class="template-list-item-hint govuk-!-margin-bottom-4">
+        {{ item.hint }}
+      </p>
+    </li>
+    {% endif %}
+    {% endfor %}
+
+    {% if not current_user.has_permissions('manage_templates') %}
+  </ul>
+  {% endif %}
+
+  {% if current_user.has_permissions('manage_templates') %}
+  {{ templates_and_folders_form.templates_and_folders(param_extensions={
+  "items": checkboxes_data,
+  "formGroup": False
+  }) }}
+  {% endif %}
+</nav>
+{% endif %}

tests/app/main/views/test_dashboard.py

@@ -556,8 +556,7 @@ def test_should_show_monthly_breakdown_of_template_usage(
     assert ' '.join(table_rows[0].text.split()) == (
         'My first template '
         'Text message template '
-        '2 '
+        '2'
-        'messages sent'
     )
 
     assert len(table_rows) == len(['October'])

tests/app/main/views/test_template_folders.py

@@ -601,7 +601,7 @@ def test_get_manage_folder_viewing_permissions_for_users(
     assert normalize_spaces(page.select_one('title').text) == (
         'folder_two – Templates – service one – Notify.gov'
     )
-    form_labels = page.select('legend.govuk-fieldset__legend')
+    form_labels = page.select('legend.usa-legend')
     assert normalize_spaces(form_labels[0].text) == "Team members who can see this folder"
     checkboxes = page.select('input[name=users_with_permission]')
 

tests/app/main/views/test_templates.py

@@ -253,7 +253,7 @@ def test_should_show_live_search_if_list_of_templates_taller_than_screen(
         'Search by name'
     )
 
-    assert len(page.select(search['data-targets'])) == len(page.select('#template-list .usa-label')) == 20
+    assert len(page.select(search['data-targets'])) == len(page.select('#template-list .usa-checkbox')) == 20
 
 
 def test_should_label_search_by_id_for_services_with_api_keys(
@@ -290,7 +290,7 @@ def test_should_show_live_search_if_service_has_lots_of_folders(
         service_id=SERVICE_ONE_ID,
     )
 
-    count_of_templates_and_folders = len(page.select('#template-list .usa-label'))
+    count_of_templates_and_folders = len(page.select('#template-list .usa-checkbox'))
     count_of_folders = len(page.select('.template-list-folder:first-of-type'))
     count_of_templates = count_of_templates_and_folders - count_of_folders
 

tests/app/test_navigation.py

@@ -427,7 +427,7 @@ def test_navigation_urls(
 ):
     page = client_request.get('main.choose_template', service_id=SERVICE_ONE_ID)
     assert [
-        a['href'] for a in page.select('.nav a')
+        a['href'] for a in page.select('.nav.margin-bottom-5 a')
     ] == [
         '/services/{}'.format(SERVICE_ONE_ID),
         '/services/{}/templates'.format(SERVICE_ONE_ID),

tests/javascripts/templateFolderForm.test.js

@@ -624,7 +624,7 @@ describe('TemplateFolderForm', () => {
 
       test("the content of the counter should reflect the selection", () => {
 
-        expect(visibleCounterText).toEqual('1 template, 1 folder selected');
+        expect(visibleCounterText).toEqual('selected');
 
       });
 
@@ -865,7 +865,7 @@ describe('TemplateFolderForm', () => {
         helpers.triggerEvent(templateFolderCheckboxes[1], 'click');
         helpers.triggerEvent(templateFolderCheckboxes[2], 'click');
 
-        expect(visibleCounterText).toEqual('2 templates selected');
+        expect(visibleCounterText).toEqual('selected');
 
       });
 
@@ -885,7 +885,7 @@ describe('TemplateFolderForm', () => {
 
         helpers.triggerEvent(templateFolderCheckboxes[0], 'click');
 
-        expect(visibleCounterText).toEqual('1 folder selected');
+        expect(visibleCounterText).toEqual('selected');
 
       });