Allow filter links to be used in combination

Means you can see, for example emails that have failed.

Means adding:
- logic to generate links which can have a type parameter, a status
  parameter, or both
- a ‘pill’ UI component for seeing which filters you currently have
  applied
- some logic to change the page title based on which filters you have
  applied

app/assets/stylesheets/components/pill.scss

@@ -0,0 +1,41 @@
+.pill {
+
+  display: flex;
+
+  a, span {
+    display: block;
+    padding: 10px;  
+    flex-grow: 1;
+    text-align: center;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &:last-child {
+      margin-right: 0;
+    }
+
+  }
+
+  a {
+    background: $panel-colour;
+    color: $link-colour;
+    border: 1px solid $panel-colour;
+    position: relative;
+
+    &:hover {
+      color: $text-colour;
+    }
+
+    &:active,
+    &:focus {
+      z-index: 10;
+    }
+  }
+
+  span {
+    border: 1px solid $grey-1;
+    color: $text-colour;
+  }
+}

app/assets/stylesheets/components/table.scss

@@ -79,10 +79,6 @@
 
   p {
     margin: 0 0 5px 0;
-
-    a {
-      text-decoration: none;
-    }
   }
 
 }

app/assets/stylesheets/main.scss

@@ -48,6 +48,7 @@ $path: '/static/images/';
 @import 'components/email-message';
 @import 'components/api-key';
 @import 'components/vendor/previous-next-navigation';
+@import 'components/pill';
 
 @import 'views/job';
 @import 'views/edit-template';

app/main/views/jobs.py

@@ -7,7 +7,8 @@ from flask import (
     render_template,
     abort,
     jsonify,
-    request
+    request,
+    url_for
 )
 from flask_login import login_required
 from werkzeug.datastructures import MultiDict
@@ -150,7 +151,31 @@ def view_notifications(service_id):
         page=page,
         prev_page=prev_page,
         next_page=next_page,
-        request_args=request.args
+        request_args=request.args,
+        type_filters=[
+            [item[0], item[1], url_for(
+                '.view_notifications',
+                service_id=current_service['id'],
+                template_type=item[1],
+                status=request.args.get('status', '')
+            )] for item in [
+                ['Emails', 'email'],
+                ['Text messages', 'sms'],
+                ['Both', '']
+            ]
+        ],
+        status_filters=[
+            [item[0], item[1], url_for(
+                '.view_notifications',
+                service_id=current_service['id'],
+                template_type=request.args.get('template_type', ''),
+                status=item[1]
+            )] for item in [
+                ['Successful', 'sent,delivered'],
+                ['Failed', 'failed,complaint,bounce'],
+                ['Both', '']
+            ]
+        ]
     )
 
 

app/templates/components/pill.html

@@ -0,0 +1,16 @@
+{% macro pill(
+  title,
+  items=[],
+  current_value=None
+) %}
+  <nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
+    <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
+    {% for label, option, link in items %}
+      {% if current_value == option %}
+        <span aria-hidden="true">{{ label }}</span>
+      {% else %}
+        <a href="{{ link }}">{{ label }}</a>
+      {% endif %}
+    {% endfor %}
+  </nav>
+{% endmacro %}

app/templates/views/notifications.html

@@ -1,6 +1,8 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, field, text_field, link_field, right_aligned_field_heading, hidden_field_heading %}
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
+{% from "components/page-footer.html" import page_footer %}
+{% from "components/pill.html" import pill %}
 
 {% block page_title %}
   Activity – GOV.UK Notify
@@ -8,18 +10,58 @@
 
 {% block maincolumn_content %}
 
-    <h1 class="heading-large">Activity</h1>
-    <p>
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, page=1) }}">All messages</a>
-    </p>
-    <p>
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, type="sms", page=1) }}">Text messages</a>&emsp;
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, type="email", page=1) }}">Email messages</a>
-    </p>
-    <p>
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['delivered'], page=1) }}">Successful messages</a>&emsp;
-      <a href="{{ url_for(".view_notifications", service_id=current_service.id, status=['failed'], page=1) }}">Failed messages</a>
-    </p>
+  <h1 class="heading-large">
+
+    {%- if (request_args.get('template_type', '') == '') and (request_args.get('status', '') == '') -%}
+
+      Activity
+
+    {%- else -%}
+
+      {% if request_args.get('status') != '' %}
+        {% for label, option, _ in status_filters %}
+          {% if request_args.get('status') == option %}
+            {{ label }}
+          {% endif %}
+        {% endfor %}
+      {% endif %}
+
+      {% if request_args.get('template_type') == '' %}
+        emails and text messages
+      {% else %}
+
+        {% for template_label, template_option, _ in type_filters %}
+          {% if request_args.get('template_type') == template_option %}
+            {% if request_args.get('status', '') == '' %}
+              {{ template_label }}
+            {% else %}
+              {{ template_label | lower }}
+            {% endif %}
+          {% endif %}
+        {% endfor %}
+
+      {% endif %}
+
+    {%- endif -%}
+
+  </h1>
+  
+  <div class='grid-row bottom-gutter'>
+    <div class='column-half'>
+      {{ pill(
+        'Type',
+        type_filters,
+        request_args.get('template_type', '')
+      ) }}
+    </div>
+    <div class='column-half'>
+      {{ pill(
+        'Status',
+        status_filters,
+        request_args.get('status', '')
+      ) }}
+    </div>
+  </div>
 
   {% call(item, row_number) list_table(
     notifications,