Tidy layout of team page

The team page was a bit of a mess:

- invited and active tables didn’t line up
- lots of things were wrapping onto two lines
- the empty fields for when a user didn’t have permissions looked broken

This commit splits each row of the table (not actually a table any more)
onto two lines. First line has the user’s info, second has their
permissions and any associated actions.

app/assets/stylesheets/components/tick-cross.scss

@@ -0,0 +1,46 @@
+%tick-cross {
+  @include core-16;
+  display: inline-block;
+  background-size: 19px 19px;
+  background-repeat: no-repeat;
+  background-position: 0 0;
+  padding: 1px 0 0 25px;
+}
+
+.tick-cross {
+
+  &-tick {
+    @extend %tick-cross;
+    background-image: file-url('tick.png');
+  }
+
+  &-cross {
+    @extend %tick-cross;
+    background-image: file-url('cross-grey.png');
+    color: $secondary-text-colour;
+  }
+
+  &-list {
+
+    @extend %grid-row;
+    margin-top: 5px;
+
+    &-permissions {
+
+      @include grid-column(3/4);
+
+      li {
+        display: inline-block;
+        margin-right: 0.5em;
+      }
+
+    }
+
+    &-edit-link {
+      @include grid-column(1/4);
+      text-align: right;
+    }
+
+  }
+
+}

app/assets/stylesheets/main.scss

@@ -54,11 +54,13 @@ $path: '/static/images/';
 @import 'components/message';
 @import 'components/phone';
 @import 'components/research-mode';
+@import 'components/tick-cross';
 
 @import 'views/job';
 @import 'views/edit-template';
 @import 'views/documenation';
 @import 'views/dashboard';
+@import 'views/users';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/users.scss

@@ -0,0 +1,16 @@
+.user-list {
+
+  @include core-16;
+
+  &-item {
+
+    padding: $gutter-half 0;
+    border-top: 1px solid $border-colour;
+
+    &:last-child {
+      border-bottom: 1px solid $border-colour;
+    }
+
+  }
+
+}

app/templates/components/tick-cross.html

@@ -0,0 +1,15 @@
+{% macro tick_cross(yes, label) %}
+  <li>
+    {% if yes %}
+      <span class="tick-cross-tick">
+        <span class="visually-hidden">Can</span>
+        {{ label}}
+      </span>
+    {% else %}
+      <span class="tick-cross-cross">
+        <span class="visually-hidden">Can’t</span>
+        {{ label}}
+      </span>
+    {% endif %}
+  </li>
+{% endmacro %}

app/templates/views/manage-users.html

@@ -1,6 +1,7 @@
 {% extends "withnav_template.html" %}
 {% from "components/table.html" import list_table, row, field, boolean_field, hidden_field_heading %}
 {% from "components/page-footer.html" import page_footer %}
+{% from "components/tick-cross.html" import tick_cross %}
 
 {% set table_options = {
   'field_headings': [
@@ -29,49 +30,82 @@ Manage users – GOV.UK Notify
     {% endif %}
   </div>
 
-  {% call(item, row_number) list_table(
+  <h2 class="heading-medium">
-    users, caption='Active', **table_options
+    Active
-  ) %}
+  </h2>
-    {% call field() %}
+  <div class="user-list">
-      {{ item.name }}
+    {% for user in users %}
-      {%- if item.email_address == current_user.email_address -%}
+      <div class="user-list-item">
-        &ensp;<span class="hint">(you)</span>
+        <h3>
-      {% endif %}
+          {{ user.name }}&ensp;<span class="hint">
-    {% endcall %}
+            {%- if user.email_address == current_user.email_address -%}
-    {{ boolean_field(item.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters'])) }}
+              (you)
-    {{ boolean_field(item.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings'])) }}
+            {% endif %}
-    {{ boolean_field(item.has_permissions(permissions=['manage_api_keys'])) }}
+          </span>
-    {% call field(align='right') %}
+        </h3>
-      {% if current_user.has_permissions(['manage_users']) %}
+        <ul class="tick-cross-list">
-        {% if current_user.id != item.id %}
+          <div class="tick-cross-list-permissions">
-          <a href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=item.id)}}">Edit</a>
+            {{ tick_cross(
-        {% endif %}
+              user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']),
-      {% endif %}
+              'Send messages'
-    {% endcall %}
+            ) }}
-  {% endcall %}
+            {{ tick_cross(
+              user.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings']),
+              'Manage service'
+            ) }}
+            {{ tick_cross(
+              user.has_permissions(permissions=['manage_api_keys']),
+              'Access API keys'
+            ) }}
+          </div>
+          {% if current_user.has_permissions(['manage_users']) %}
+            {% if current_user.id != user.id %}
+              <li class="tick-cross-list-edit-link">
+                <a href="{{ url_for('.edit_user_permissions', service_id=current_service.id, user_id=user.id)}}">Edit permissions</a>
+              </li>
+            {% endif %}
+          {% endif %}
+        </ul>
+      </div>
+    {% endfor %}
+  </div>
 
   {% if invited_users %}
-    {% call(item, row_number) list_table(
+    <h2 class="heading-medium">
-      invited_users, caption='Invited', **table_options
+      Invited
-    ) %}
+    </h2>
-      {% call field() %}
+    <div class="user-list">
-        {{ item.email_address }}
+      {% for user in invited_users %}
-      {% endcall %}
+        <div class="user-list-item">
-      {{ boolean_field(item.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters'])) }}
+          <h3>
-      {{ boolean_field(item.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings'])) }}
+            {{ user.email_address }}
-      {{ boolean_field(item.has_permissions(permissions=['manage_api_keys'])) }}
+          </h3>
-      {% if item.status == 'pending' %}
+          <ul class="tick-cross-list">
-        {% call field(align='right') %}
+            <div class="tick-cross-list-permissions">
-          {% if current_user.has_permissions(['manage_users']) %}
+              {{ tick_cross(
-            <a href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=item.id)}}">Cancel invitation</a>
+                user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']),
-          {% endif %}
+                'Send messages'
-        {% endcall %}
+              ) }}
-      {% else %}
+              {{ tick_cross(
-        {% call field() %}
+                user.has_permissions(permissions=['manage_users', 'manage_templates', 'manage_settings']),
-          {{ item.status }}
+                'Manage service'
-        {% endcall %}
+              ) }}
-      {% endif %}
+              {{ tick_cross(
-    {% endcall %}
+                user.has_permissions(permissions=['manage_api_keys']),
+                'Access API keys'
+              ) }}
+            </div>
+            <li class="tick-cross-list-edit-link">
+              {% if user.status == 'pending' and current_user.has_permissions(['manage_users']) %}
+                <a href="{{ url_for('.cancel_invited_user', service_id=current_service.id, invited_user_id=user.id)}}">Cancel invitation</a>
+              {% else %}
+                {{ user.status|title }}
+              {% endif %}
+            </li>
+          </ul>
+        </div>
+      {% endfor %}
+    </div>
   {% endif %}
 
 {% endblock %}

tests/app/main/views/test_manage_users.py

@@ -205,10 +205,9 @@ def test_manage_users_shows_invited_user(app_,
             assert response.status_code == 200
             page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
             assert page.h1.string.strip() == 'Team members'
-            invites_table = page.find_all('table')[1]
+            invited_users_list = page.find_all('div', {'class': 'user-list'})[1]
-            cols = invites_table.find_all('td')
+            assert invited_users_list.find_all('h3')[0].text.strip() == 'invited_user@test.gov.uk'
-            assert cols[0].text.strip() == 'invited_user@test.gov.uk'
+            assert invited_users_list.find_all('a')[0].text.strip() == 'Cancel invitation'
-            assert cols[4].text.strip() == 'Cancel invitation'
 
 
 def test_manage_users_does_not_show_accepted_invite(app_,
@@ -232,8 +231,8 @@ def test_manage_users_does_not_show_accepted_invite(app_,
             assert response.status_code == 200
             page = BeautifulSoup(response.data.decode('utf-8'), 'html.parser')
             assert page.h1.string.strip() == 'Team members'
-            tables = page.find_all('table')
+            user_lists = page.find_all('div', {'class': 'user-list'})
-            assert len(tables) == 1
+            assert len(user_lists) == 1
             assert not page.find(text='invited_user@test.gov.uk')