Show an example of a CSV on the ‘send’ page

This should help:
- understanding of what the CSV should contain
- understanding what ‘download example’ will do

app/main/views/send.py

@@ -49,15 +49,17 @@ def get_page_headings(template_type):
     }[template_type]
 
 
-def get_example_csv_rows(template):
+def get_example_csv_rows(template, number_of_rows=2):
     return [
         [
             {
                 'email': current_user.email_address,
                 'sms': current_user.mobile_number
             }[template.template_type]
-        ] + _get_fake_personalisation(template.placeholders, i)
-        for i in range(1, 3)
+        ] + [
+            "{} {}".format(header, i) for header in template.placeholders
+        ]
+        for i in range(1, number_of_rows + 1)
     ]
 
 
@@ -135,6 +137,7 @@ def send_messages(service_id, template_id):
         'views/send.html',
         template=template,
         recipient_column=first_column_heading[template.template_type],
+        example=get_example_csv_rows(template),
         form=form,
         service=service,
         service_id=service_id
@@ -144,7 +147,7 @@ def send_messages(service_id, template_id):
 @main.route("/services/<service_id>/send/<template_id>.csv", methods=['GET'])
 @login_required
 @user_has_permissions('send_texts', 'send_emails', 'send_letters', 'manage_templates', any_=True)
-def get_example_csv(service_id, template_id):
+def get_example_csv(service_id, template_id, number_of_rows=2):
     template = Template(service_api_client.get_service_template(service_id, template_id)['data'])
     with io.StringIO() as output:
         writer = csv.writer(output)
@@ -153,7 +156,7 @@ def get_example_csv(service_id, template_id):
                 [first_column_heading[template.template_type]] +
                 list(template.placeholders)
             ] +
-            get_example_csv_rows(template)
+            get_example_csv_rows(template, number_of_rows=number_of_rows)
         )
         return output.getvalue(), 200, {'Content-Type': 'text/csv; charset=utf-8'}
 
@@ -164,25 +167,10 @@ def get_example_csv(service_id, template_id):
 def send_message_to_self(service_id, template_id):
     template = Template(service_api_client.get_service_template(service_id, template_id)['data'])
 
-    with io.StringIO() as output:
-        writer = csv.writer(output)
-        writer.writerow(
-            [first_column_heading[template.template_type]] +
-            list(template.placeholders)
-        )
-        if template.template_type == 'sms':
-            writer.writerow(
-                [current_user.mobile_number] + _get_fake_personalisation(template.placeholders, 1)
-            )
-        if template.template_type == 'email':
-            writer.writerow(
-                [current_user.email_address] + _get_fake_personalisation(template.placeholders, 1)
-            )
-
-        filedata = {
-            'file_name': 'Test run',
-            'data': output.getvalue()
-        }
+    filedata = {
+        'file_name': 'Test run',
+        'data': get_example_csv(service_id, template_id, number_of_rows=1)[0]
+    }
 
     upload_id = str(uuid.uuid4())
 
@@ -302,9 +290,3 @@ def start_job(service_id, upload_id):
     return redirect(
         url_for('main.view_job', service_id=service_id, job_id=upload_id)
     )
-
-
-def _get_fake_personalisation(placeholders, index):
-    return [
-        "{} {}".format(header, index) for header in placeholders
-    ]

app/templates/views/send.html

@@ -3,7 +3,7 @@
 {% from "components/email-message.html" import email_message %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/file-upload.html" import file_upload %}
-{% from "components/table.html" import list_table, field %}
+{% from "components/table.html" import list_table, text_field %}
 
 {% block page_title %}
   Send text messages – GOV.UK Notify
@@ -11,7 +11,7 @@
 
 {% block maincolumn_content %}
 
-  <h1 class="heading-large">Send from a CSV file</h1>
+  <h1 class="heading-large">Send a batch</h1>
 
   {% if 'sms' == template.template_type %}
     <div class="grid-row">
@@ -28,28 +28,33 @@
     ) }}
   {% endif %}
 
-  <div class="grid-row">
-    <div class="column-two-thirds">
-      <p>
-        You need
-        {{ template.placeholders|length + 1 }}
-        {% if template.placeholders %}
-          columns
-        {% else %}
-          column
-        {% endif %}
-        in your file:
-      </p>
-      <p class="bottom-gutter-2-3">
-        <span class='placeholder'>{{ recipient_column }}</span>
-        {{ template.placeholders_as_markup|join(" ") }}
-      </p>
-      <p>
-        <a href="{{ url_for('.get_example_csv', service_id=service_id, template_id=template.id) }}">Download an example</a>
-      </p>
-    </div>
-  </div>
+  <p>
+    You need
+    {{ template.placeholders|length + 1 }}
+    {% if template.placeholders %}
+      columns
+    {% else %}
+      column
+    {% endif %}
+    in your file, like this:
+  </p>
+
+  {% call(item) list_table(
+    example,
+    caption="Example",
+    caption_visible=False,
+    field_headings=[recipient_column] + template.placeholders|list
+  ) %}
+    {% for column in item %}
+      {{ text_field(column) }}
+    {% endfor %}
+  {% endcall %}
+
+  <p class="bottom-gutter">
+    <a href="{{ url_for('.get_example_csv', service_id=service_id, template_id=template.id) }}">Download this example</a>
+  </p>
+
 
   {{file_upload(form.file, button_text='Upload your CSV file')}}
 
-{% endblock %}
+{% endblock %}