Merge pull request #3311 from alphagov/revert-3295-restyle-template-stats

Revert "Restyle template statistics and received text messages"

app/assets/stylesheets/components/banner.scss

@@ -137,58 +137,3 @@
   }
 
 }
-
-.banner-dashboard {
-
-  $baseline-shift: 5px;
-
-  display: block; // for browsers that don't support flexbox
-  display: flex;
-  align-items: baseline;
-  flex-wrap: wrap;
-  padding: ($gutter-half - 1px) 0 ($gutter-half + 1px) 0;
-  border-top: 1px solid $border-colour;
-  border-bottom: 1px solid $border-colour;
-  margin-bottom: $gutter;
-  text-decoration: none;
-
-  &:focus {
-    border-top: 1px solid transparent;
-    border-bottom: 1px solid transparent;    
-  }
-
-  &-count,
-  &-meta {
-    float: left; // for browsers that don't support flexbox
-  }
-
-  &-count {
-    @include govuk-font(36, $weight: bold);
-    padding-right: 8px;
-    position: relative;
-    // remove the top of the extra line-height this introduces
-    top: $baseline-shift;
-    margin-top: -$baseline-shift;
-    flex: 0 1 0.85ch;
-  }
-
-  &-count-label {
-    @include govuk-font(24, $weight: bold);
-    text-decoration: underline;
-    padding-right: govuk-spacing(6);
-    margin: 10px 0px 5px; // 10px includes 5px extra to counter the -5px margin-top on the count item
-    flex: 2 1 auto;
-  }
-
-  &-meta {
-    @include govuk-font(19);
-    float: right;
-    text-align: right;
-    flex: initial;
-  }
-
-  & + .banner-dashboard {
-    margin-top: -$gutter;
-    border-top: none;
-  }
-}

app/assets/stylesheets/components/show-more.scss

@@ -4,7 +4,7 @@
   @include core-16;
   display: block;
   padding: 0 0;
-  margin: $gutter-half 0 $gutter-half 0;
+  margin: $gutter-half 0 $gutter 0;
   text-align: center;
   border-top: 1px solid $border-colour;
 
@@ -34,8 +34,7 @@
 
 }
 
-.show-more-no-border {
+.show-more-empty {
   @extend %show-more;
-  border-top: 1px solid transparent;
+  margin-top: -10px;
-  margin-top: -5px;
 }

app/assets/stylesheets/components/table.scss

@@ -51,66 +51,6 @@
 
 }
 
-.template-statistics-table {
-
-  .table {
-    table-layout: fixed;
-  }
-
-  .table-heading {
-    @include core-19;
-    margin: 0 0 10px 0;
-  }
-
-  .table-field-heading-first {
-    width: 52.5%;
-  }
-
-  .table-row {
-    th {
-      display: table-cell;
-      width: 52.5%;
-      font-weight: normal;
-
-      .hint,
-      p {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-    }
-  }
-
-  &-template-name {
-
-    @include bold-24;
-    display: block;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    padding: 10px 0 32px 0;
-    margin: -10px 0 -32px 0;
-
-    &:focus {
-
-      color: $text-colour;
-
-      & + .template-statistics-table-hint {
-        color: $text-colour;
-      }
-
-    }
-
-  }
-
-  &-hint {
-    @include core-19;
-    color: $secondary-text-colour;
-    pointer-events: none;
-  }
-
-}
-
 .settings-table {
 
   table {

app/assets/stylesheets/views/dashboard.scss

@@ -1,7 +1,15 @@
 .dashboard {
 
-  th {
+  table {
-    font-weight: normal;
+    th {
+      @include core-19;
+      border-bottom: 0;
+    }
+
+    td {
+      @include core-19;
+      border: 0;
+    }
   }
 
   > .heading-medium:first-of-type {
@@ -26,17 +34,15 @@
   color: $text-colour;
   text-align: left;
 
-  &-bar {
+  span {
-    @include bold-27;
     box-sizing: border-box;
     display: inline-block;
     overflow: visible;
     background: $panel-colour;
     color: $black;
-    padding: 10px 6px 8px 0;
+    padding: 5px 5px 2px 5px;
-    text-indent: 12px;
+    text-indent: -2px;
-    text-align: right;
+    margin: 3px 0 5px 0;
-    margin: 2px 0 1px 0;
     transition: width 0.6s ease-in-out;
   }
 
@@ -78,6 +84,19 @@
   color: $error-colour;
 }
 
+.template-usage-table {
+
+  border-top: 1px solid $border-colour;
+  border-bottom: 1px solid $border-colour;
+  margin-top: 10px;
+  margin-bottom: $gutter * 1.3333;
+
+  .table {
+    margin-bottom: 5px;
+  }
+
+}
+
 .align-with-message-body {
   display: block;
   margin-top: $gutter * 5 / 6;

app/main/views/dashboard.py

@@ -280,8 +280,15 @@ def get_dashboard_partials(service_id):
     all_statistics = template_statistics_client.get_template_statistics_for_service(service_id, limit_days=7)
     template_statistics = aggregate_template_usage(all_statistics)
     stats = aggregate_notifications_stats(all_statistics)
+    column_width, max_notifiction_count = get_column_properties(3)
 
     dashboard_totals = get_dashboard_totals(stats),
+    highest_notification_count = max(
+        sum(
+            value[key] for key in {'requested', 'failed', 'delivered'}
+        )
+        for key, value in dashboard_totals[0].items()
+    )
     free_sms_allowance = billing_api_client.get_free_sms_fragment_limit_for_year(
         current_service.id,
         get_current_financial_year(),
@@ -305,6 +312,10 @@ def get_dashboard_partials(service_id):
             'views/dashboard/_totals.html',
             service_id=service_id,
             statistics=dashboard_totals[0],
+            column_width=column_width,
+            smaller_font_size=(
+                highest_notification_count > max_notifiction_count
+            ),
         ),
         'template-statistics': render_template(
             'views/dashboard/template-statistics.html',
@@ -319,6 +330,7 @@ def get_dashboard_partials(service_id):
         ),
         'usage': render_template(
             'views/dashboard/_usage.html',
+            column_width=column_width,
             **calculate_usage(yearly_usage, free_sms_allowance),
         ),
     }
@@ -493,3 +505,10 @@ def get_tuples_of_financial_years(
         )
         for year in range(start, end + 1)
     )
+
+
+def get_column_properties(number_of_columns):
+    return {
+        2: ('column-half', 999999999),
+        3: ('column-third', 99999),
+    }.get(number_of_columns)

app/templates/components/show-more.html

@@ -1,6 +1,7 @@
-{% macro show_more(url, label, with_border=True) %}
+{% macro show_more(url=None, label=None) %}
-  <a
+  {% if url and label %}
-    href="{{ url }}"
+    <a href="{{ url }}" class="show-more"><span>{{ label }}</span></a>
-    class="show-more{% if not with_border %}-no-border{% endif %}"
+  {% else %}
-  ><span>{{ label }}</span></a>
+    <span class="show-more-empty"></span>
+  {% endif %}
 {% endmacro %}

app/templates/components/table.html

@@ -188,8 +188,11 @@
 ) %}
   {% call field(align='right') %}
     <span {% if id %}id="{{ id }}"{% endif %} class="spark-bar">
-      <span class="spark-bar-bar" style="width: {{ count / max_count * 100 }}%">
+      <span style="width: {{ count / max_count * 100 }}%">
-        {{ '{:,.0f}'.format(count) }}
+        {{ big_number(
+          count,
+          smallest=True
+        ) }}
       </span>
     </span>
   {% endcall %}

app/templates/views/dashboard/_inbox.html

@@ -1,20 +1,21 @@
 {% from "components/big-number.html" import big_number, big_number_with_status %}
-{% from "components/message-count-label.html" import message_count_label %}
 
 <div class="ajax-block">
   {% if inbound_sms_summary != None %}
-    <a id="total-received" class="govuk-link govuk-link--no-visited-state banner-dashboard" href="{{ url_for('.inbox', service_id=current_service.id) }}">
+    <div id="total-received" class="big-number-meta-wrapper">
-      <span class="banner-dashboard-count">
+      {{
-        {{ inbound_sms_summary.count|format_thousands }}
+        big_number_with_status(
-      </span>
+          inbound_sms_summary.count,
-      <span class="banner-dashboard-count-label">
+          'text messages received',
-        {{ message_count_label(inbound_sms_summary.count, 'sms', suffix='received') }}
+          link=url_for('.inbox', service_id=current_service.id),
-      </span>
+          show_failures=False
-      {% if inbound_sms_summary.most_recent %}
+        )
-        <span class="banner-dashboard-meta">
+      }}
+      <div class="big-number-meta">
+        {% if inbound_sms_summary.most_recent %}
           latest message {{ inbound_sms_summary.most_recent | format_delta }}
-        </span>
+        {% endif %}
-      {% endif %}
+      </div>
-    </a>
+    </div>
   {% endif %}
 </div>

app/templates/views/dashboard/_totals.html

@@ -3,7 +3,7 @@
 
 <div class="ajax-block-container">
   <div class="grid-row">
-    <div id="total-email" class="column-third">
+    <div id="total-email" class="{{column_width}}">
       {{ big_number_with_status(
         statistics['email']['requested'],
         message_count_label(statistics['email']['requested'], 'email', suffix='sent'),
@@ -12,10 +12,10 @@
         statistics['email']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='email', status='failed'),
         link=url_for(".view_notifications", service_id=service_id, message_type='email', status='sending,delivered,failed'),
-        smaller=True,
+        smaller=smaller_font_size
       ) }}
     </div>
-    <div id="total-sms" class="column-third">
+    <div id="total-sms" class="{{column_width}}">
       {{ big_number_with_status(
         statistics['sms']['requested'],
         message_count_label(statistics['sms']['requested'], 'sms', suffix='sent'),
@@ -24,10 +24,10 @@
         statistics['sms']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='failed'),
         link=url_for(".view_notifications", service_id=service_id, message_type='sms', status='sending,delivered,failed'),
-        smaller=True,
+        smaller=smaller_font_size
       ) }}
     </div>
-    <div id="total-letters" class="column-third">
+    <div id="total-letters" class="{{column_width}}">
       {{ big_number_with_status(
         statistics['letter']['requested'],
         message_count_label(statistics['letter']['requested'], 'letter', suffix='sent'),
@@ -36,7 +36,7 @@
         statistics['letter']['show_warning'],
         failure_link=url_for(".view_notifications", service_id=service_id, message_type='letter', status='failed'),
         link=url_for(".view_notifications", service_id=service_id, message_type='letter', status=''),
-        smaller=True,
+        smaller=smaller_font_size
       ) }}
     </div>
   </div>

app/templates/views/dashboard/_upcoming.html

@@ -36,6 +36,7 @@
           ) }}
         {% endcall %}
       {% endcall %}
+      {{ show_more() }}
     </div>
   {% endif %}
 </div>

app/templates/views/dashboard/_usage.html

@@ -1,12 +1,12 @@
 {% from "components/big-number.html" import big_number %}
 
 <div class='grid-row ajax-block-container'>
-  <div class='column-third'>
+  <div class='{{ column_width }}'>
     <div class="keyline-block">
       {{ big_number("Unlimited", 'free email allowance', smaller=True) }}
     </div>
   </div>
-  <div class='column-third'>
+  <div class='{{ column_width }}'>
     <div class="keyline-block">
       {% if sms_chargeable %}
         {{ big_number(
@@ -20,7 +20,7 @@
       {% endif %}
     </div>
   </div>
-  <div class='column-third'>
+  <div class='{{ column_width }}'>
     <div class="keyline-block">
       {{ big_number(
         letter_cost,

app/templates/views/dashboard/all-template-statistics.html

@@ -28,7 +28,7 @@
           No messages sent
         </p>
       {% else %}
-        <div class='template-statistics-table'>
+        <div class='dashboard-table template-usage-table'>
           {% call(item, row_number) list_table(
             month.templates_used,
             caption=month.name,
@@ -41,8 +41,8 @@
             field_headings_visible=False
           ) %}
             {% call row_heading() %}
-              <a class="template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
+              <a class="file-list-filename" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}">{{ item.name }}</a>
-              <span class="template-statistics-table-hint">
+              <span class="file-list-hint">
                 {{ message_count_label(1, item.type, suffix='template')|capitalize }}
               </span>
             {% endcall %}

app/templates/views/dashboard/template-statistics.html

@@ -6,41 +6,39 @@
 
 <div class="ajax-block-container">
   {% if template_statistics|length > 1 %}
-    <div class='template-statistics-table'>
+    <div class='dashboard-table'>
       {% call(item, row_number) list_table(
         template_statistics,
-        caption="By template",
+        caption="Templates used",
-        caption_visible=True,
+        caption_visible=False,
         empty_message='',
         field_headings=[
           'Template',
           'Messages sent'
         ],
-        field_headings_visible=False
+        field_headings_visible=True
       ) %}
 
         {% call row_heading() %}
           {% if item.is_precompiled_letter %}
-          <span class="template-statistics-table-template-name">
+          <span class="file-list-filename">
           Provided as PDF
           </span>
-          <span class="template-statistics-table-hint">
+          <span class="file-list-hint">
             Letter
           </span>
           {% else %}
-          <a class="template-statistics-table-template-name" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
+          <a class="file-list-filename" href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template_id) }}">{{ item.template_name }}</a>
-          <span class="template-statistics-table-hint">
+          <span class="file-list-hint">
             {{ message_count_label(1, item.template_type, suffix='template')|capitalize }}
           </span>
           {% endif %}
         {% endcall %}
-
         {{ spark_bar_field(item.count, most_used_template_count, id=item.template_id) }}
       {% endcall %}
       {{ show_more(
         url_for('.template_usage', service_id=current_service.id),
-        'See templates used by month',
+        'See templates used by month'
-        with_border=False
       ) }}
     </div>
   {% endif %}

tests/app/main/views/test_dashboard.py

@@ -222,11 +222,11 @@ def test_inbound_messages_shows_count_of_messages_when_there_are_messages(
         'main.service_dashboard',
         service_id=SERVICE_ONE_ID,
     )
-    banner = page.select_one('a.banner-dashboard')
+
     assert normalize_spaces(
-        banner.text
+        page.select('.big-number-meta-wrapper')[0].text
-    ) == '9,999 text messages received latest message just now'
+    ) == '99 text messages received latest message just now'
-    assert banner['href'] == url_for(
+    assert page.select('.big-number-meta-wrapper a')[0]['href'] == url_for(
         'main.inbox', service_id=SERVICE_ONE_ID
     )
 
@@ -248,9 +248,9 @@ def test_inbound_messages_shows_count_of_messages_when_there_are_no_messages(
         'main.service_dashboard',
         service_id=SERVICE_ONE_ID,
     )
-    banner = page.select_one('a.banner-dashboard')
+
-    assert normalize_spaces(banner.text) == '0 text messages received'
+    assert normalize_spaces(page.select('.big-number-meta-wrapper')[0].text) == '0 text messages received'
-    assert banner['href'] == url_for(
+    assert page.select('.big-number-meta-wrapper a')[0]['href'] == url_for(
         'main.inbox', service_id=SERVICE_ONE_ID
     )
 
@@ -553,7 +553,7 @@ def test_should_not_show_recent_templates_on_dashboard_if_only_one_template_used
     expected_count = stats[0]['count']
     assert expected_count == 50
     assert normalize_spaces(
-        page.select_one('#total-sms .big-number-smaller').text
+        page.select_one('#total-sms .big-number').text
     ) == (
         '{} text messages sent'.format(expected_count)
     )
@@ -713,13 +713,14 @@ def test_should_show_upcoming_jobs_on_dashboard(
     ['email', 'sms'],
     ['email', 'sms', 'letter'],
 ))
-@pytest.mark.parametrize('totals', [
+@pytest.mark.parametrize('totals, big_number_class', [
     (
         {
             'email': {'requested': 0, 'delivered': 0, 'failed': 0},
             'sms': {'requested': 99999, 'delivered': 0, 'failed': 0},
             'letter': {'requested': 99999, 'delivered': 0, 'failed': 0}
         },
+        '.big-number',
     ),
     (
         {
@@ -727,6 +728,7 @@ def test_should_show_upcoming_jobs_on_dashboard(
             'sms': {'requested': 0, 'delivered': 0, 'failed': 0},
             'letter': {'requested': 100000, 'delivered': 0, 'failed': 0},
         },
+        '.big-number-smaller',
     ),
 ])
 def test_correct_font_size_for_big_numbers(
@@ -741,6 +743,7 @@ def test_correct_font_size_for_big_numbers(
     service_one,
     permissions,
     totals,
+    big_number_class,
 ):
 
     service_one['permissions'] = permissions
@@ -755,12 +758,11 @@ def test_correct_font_size_for_big_numbers(
         service_id=service_one['id'],
     )
 
-    assert (
+    assert len(page.select_one('[data-key=totals]').select('.column-third')) == 3
-        len(page.select_one('[data-key=totals]').select('.column-third'))
+    assert len(page.select_one('[data-key=usage]').select('.column-third')) == 3
-    ) == (
+
-        len(page.select_one('[data-key=usage]').select('.column-third'))
+    assert len(
-    ) == (
+        page.select('.big-number-with-status {}'.format(big_number_class))
-        len(page.select('.big-number-with-status .big-number-smaller'))
     ) == 3
 
 

tests/conftest.py

@@ -1960,7 +1960,7 @@ def mock_get_inbound_sms_summary(mocker):
         service_id,
     ):
         return {
-            'count': 9999,
+            'count': 99,
             'most_recent': datetime.utcnow().isoformat()
         }