darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-02-05 10:53:28 -05:00
Code Issues Packages Projects Releases Wiki Activity

Make the flow of using templates better

Browse Source 
For users who:
- want to send messages from a template
- want to edit templates

For developers:
- who need to get the ID of a template

This commit mainly cleans up the choose template page so there are less
options, and the options that are there are less wordy.

This means:
- moving ‘send yourself a test’ onto the send messages page, and making
  it button
- stripping a lot of stuff out of the ‘send from API’ page, so it’s more
  obvious what the template ID is
This commit is contained in:
Chris Hill-Scott
2016-04-18 11:10:47 +01:00
parent ddec619913
commit 27ad1532e4
20 changed files with 102 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
app/assets/javascripts/apiKey.js
View File

@@ -6,13 +6,13 @@
Modules.ApiKey = function() {
const states = {
'keyVisible': key => `
'keyVisible': (key, thing) => `
<span class="api-key-key">${key}</span>
<input type='button' class='api-key-button-copy' value='Copy API key to clipboard' />
<input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
`,
'keyCopied': `
'keyCopied': thing => `
<span class="api-key-key">Copied to clipboard</span>
<input type='button' class='api-key-button-show' value='Show API key' />
<input type='button' class='api-key-button-show' value='Show ${thing}' />
`
};
@@ -30,21 +30,22 @@
this.start = function(component) {
const $component = $(component),
key = $component.data('key');
key = $component.data('key'),
thing = $component.data('thing');
$component
.html(states.keyVisible(key))
.html(states.keyVisible(key, thing))
.attr('aria-live', 'polite')
.on(
'click', '.api-key-button-copy', () =>
this.copyKey(
$('.api-key-key', component)[0], () =>
$component.html(states.keyCopied)
$component.html(states.keyCopied(thing))
)
)
.on(
'click', '.api-key-button-show', () =>
$component.html(states.keyVisible(key))
$component.html(states.keyVisible(key, thing))
);
};

2
app/assets/javascripts/highlightTags.js
View File

@@ -25,7 +25,7 @@
this.initialHeight = this.$textbox.height();
this.$backgroundMaskForeground.css({
'width': this.$textbox.width(),
'width': this.$textbox.outerWidth(),
'border-width': this.$textbox.css('border-width')
});

8
app/assets/stylesheets/app.scss
View File

@@ -97,6 +97,10 @@ td {
margin-bottom: 20px;
}
.heading-medium {
margin-top: $gutter;
}
#footer {
.footer-categories {
@@ -132,3 +136,7 @@ a[rel='external'] {
.hint {
color: $secondary-text-colour;
}
.button {
padding: 0.3em 0.6em 0.2em 0.6em;
}

5
app/assets/stylesheets/components/api-key.scss
View File

@@ -11,10 +11,7 @@
margin-bottom: 10px;
}
&-button-show {
@include button($grey-3);
}
&-button-show,
&-button-copy {
@include button($grey-3);
}

16
app/assets/stylesheets/components/email-message.scss
View File

@@ -1,4 +1,5 @@
$white-50-opaque: rgba($white, 0.5);
$button-bottom-border-colour: rgba(0, 0, 0, 0.17);
.email-message {
@@ -63,7 +64,7 @@ $white-50-opaque: rgba($white, 0.5);
position: absolute;
left: 50%;
bottom: -18px;
height: 25px;
height: 27px;
display: inline-block;
padding: 0;
margin: 0 0 0 -30px;
@@ -75,23 +76,20 @@ $white-50-opaque: rgba($white, 0.5);
cursor: pointer;
width: 60px;
text-decoration: none;
background: $grey-1;
color: $white;
background: $grey-3;
color: $text-colour;
border-style: solid;
border-width: 3px;
border-color: $white;
border-radius: 6px;
box-shadow: 0 0 0 1px $white-50-opaque;
box-shadow: inset 0 -2px 0 $button-bottom-border-colour, 0 0 0 1px $white-50-opaque;
&:hover {
background: $link-hover-colour;
background: $grey-2;
}
&:focus,
&:active {
background: $yellow;
border-color: $white;
color: $text-colour;
border-color: $yellow;
outline: none;
}

1
app/assets/stylesheets/components/page-footer.scss
View File

@@ -5,7 +5,6 @@
&-back-link {
@include button($grey-1);
display: inline-block;
padding: 0.52632em 0.78947em 0.26316em 0.78947em;
margin-left: 10px;
}

5
app/assets/stylesheets/components/pill.scss
View File

@@ -2,7 +2,8 @@
display: flex;
a, span {
a,
span {
display: block;
padding: 10px;
flex-grow: 1;
@@ -38,4 +39,4 @@
border: 1px solid $grey-1;
color: $text-colour;
}
}
}

8
app/assets/stylesheets/components/secondary-button.scss Normal file
View File

@@ -0,0 +1,8 @@
.secondary-button {
@include button($grey-1);
padding: 0.3em 0.1em 0.2em 0.1em;
width: 100%;
padding-left: 0;
padding-right: 0;
text-align: center;
}

3
app/assets/stylesheets/components/sms-message.scss
View File

@@ -52,6 +52,7 @@
.sms-message-use-links {
@include copy-19;
margin-top: -5px;
a {
display: block;
@@ -68,7 +69,7 @@
.sms-message-use-links-with-title {
@extend %sms-message-use-links;
margin-top: 52px;
margin-top: 55px;
}
.sms-message-from {

3
app/assets/stylesheets/components/table.scss
View File

@@ -112,13 +112,12 @@
@include core-16;
color: $secondary-text-colour;
margin-top: -20px;
margin-bottom: $gutter * 1.5;
margin-bottom: $gutter * 1.3333;
border-bottom: 1px solid $border-colour;
padding-bottom: 10px;
text-align: center;
}
a.table-show-more-link {
@include bold-16;
color: $link-colour;
}

1
app/assets/stylesheets/main.scss
View File

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

13
app/main/views/send.py
View File

@@ -183,19 +183,16 @@ def send_message_to_self(service_id, template_id):
@user_has_permissions('manage_api_keys')
def send_from_api(service_id, template_id):
template = Template(
service_api_client.get_service_template(service_id, template_id)['data']
service_api_client.get_service_template(service_id, template_id)['data'],
prefix=current_service['name']
)
payload = {
"to": current_user.mobile_number,
"template": template.id,
"personalisation": {
placeholder: "{} 1".format(placeholder) for placeholder in template.placeholders
}
personalisation = {
placeholder: "..." for placeholder in template.placeholders
}
return render_template(
'views/send-from-api.html',
template=template,
payload=json.dumps(payload, indent=4)
personalisation=json.dumps(personalisation, indent=4) if personalisation else None
)

4
app/templates/components/api-key.html
View File

@@ -1,8 +1,8 @@
{% macro api_key(key, name) %}
{% macro api_key(key, name, thing="API key") %}
<h2 class="api-key-name">
{{ name }}
</h2>
<div data-module="api-key" data-key="{{ key }}">
<div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}">
<span class="api-key-key">{{ key }}</span>
</div>
{% endmacro %}

4
app/templates/components/sms-message.html
View File

@@ -1,6 +1,4 @@
{% macro sms_message(
body, recipient=None, name=None, id=None, edit_link=None, from=None
) %}
{% macro sms_message(body, recipient=None, name=None, id=None, edit_link=None, from=None) %}
{% if name %}
<h3 class="sms-message-name">
{% if edit_link %}

55
app/templates/views/send-from-api.html
View File

@@ -1,6 +1,7 @@
{% extends "withnav_template.html" %}
{% from "components/email-message.html" import email_message %}
{% from "components/sms-message.html" import sms_message %}
{% from "components/api-key.html" import api_key %}
{% block page_title %}
API integration – GOV.UK Notify
@@ -9,50 +10,32 @@
{% block maincolumn_content %}
<h1 class="heading-large">
API integration
API info
</h1>
<div class="grid-row">
<div class="column-three-quarters">
{% if 'email' == template.template_type %}
{{ email_message(
template.subject,
template.formatted_as_markup,
) }}
{% elif 'sms' == template.template_type %}
{% if 'email' == template.template_type %}
{{ email_message(
template.formatted_subject_as_markup,
template.formatted_as_markup,
) }}
{% elif 'sms' == template.template_type %}
<div class="grid-row">
<div class="column-two-thirds">
{{ sms_message(
template.formatted_as_markup,
) }}
{% endif %}
<p>
You can send this message from your existing apps or systems by
connecting them to GOV.UK Notify.
</p>
<p>
You’ll need to work with a developer to do this.
</p>
</div>
</div>
{% endif %}
<div class="bottom-gutter">
{{ api_key(template.id, name="Template ID", thing='template ID') }}
</div>
<h3 class="heading-small">
Example payload for this template
</h3>
{{payload|syntax_highlight_json}}
<h3 class="heading-small">
Endpoint
</h3>
<div class="highlight" style="background: #f8f8f8">
<pre style="line-height: 125%">
{{- 'POST https://api.notifications.service.gov.uk/notifications/{}'.format(
template.template_type
) -}}
</pre>
</div>
{% if personalisation %}
<h2 class="heading-small">Personalisation (all fields are required)</h2>
{{ personalisation|syntax_highlight_json }}
{% endif %}
<p>
<br />See the <a href="{{ url_for(".documentation") }}">developer documentation</a> for full details.

36
app/templates/views/send.html
View File

@@ -11,32 +11,34 @@
{% block maincolumn_content %}
<h1 class="heading-large">Send from a CSV file</h1>
{% if 'sms' == template.template_type %}
<div class="grid-row">
<div class="column-two-thirds">
<h1 class="heading-large">Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}</h1>
<div class="grid-row">
<div class="column-two-thirds">
{% if 'sms' == template.template_type %}
{{ sms_message(template.formatted_as_markup) }}
</div>
{% elif 'email' == template.template_type %}
{{ email_message(
template.formatted_subject_as_markup,
template.formatted_as_markup
) }}
{% endif %}
</div>
{% elif 'email' == template.template_type %}
{{ email_message(
template.formatted_subject_as_markup,
template.formatted_as_markup,
from_address='{}@notifications.service.gov.uk'.format(current_service.email_from),
from_name=current_service.name
) }}
{% endif %}
<div class="column-one-third">
<a href="{{ url_for(".send_message_to_self", service_id=current_service.id, template_id=template.id) }}" class='secondary-button'>Send yourself a test</a>
</div>
</div>
<h2 class="heading-medium">
You need
Make a CSV file with
{{ template.placeholders|length + 1 }}
{% if template.placeholders %}
columns
columns,
{% else %}
column
column,
{% endif %}
in your file, like this:
like this:
</h2>
{% call(item, row_number) list_table(

15
app/templates/views/templates/_template.html
View File

@@ -10,22 +10,21 @@
) }}
{% elif 'sms' == template.template_type %}
{{ sms_message(
template.formatted_as_markup,
name=template.name if show_title else None
) }}
template.formatted_as_markup,
name=template.name if show_title else None
) }}
{% endif %}
</div>
<div class="column-one-third">
<div class="sms-message-use-links{% if show_title %}-with-title{% endif %}">
{% if current_user.has_permissions(permissions=['send_texts', 'send_emails', 'send_letters']) %}
<a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}">Send from a CSV file</a>
<a href="{{ url_for(".send_message_to_self", service_id=current_service.id, template_id=template.id) }}">Send yourself a test</a>
{% endif %}
{% if current_user.has_permissions(permissions=['manage_api_keys']) %}
<a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API integration</a>
<a href="{{ url_for(".send_messages", service_id=current_service.id, template_id=template.id) }}">
Send {{ 'text messages' if 'sms' == template.template_type else 'emails' }}
</a>
{% endif %}
{% if current_user.has_permissions(permissions=['manage_templates'], admin_override=True) %}
<a href="{{ url_for(".edit_service_template", service_id=current_service.id, template_id=template.id) }}">Edit template</a>
{% endif %}
<a href="{{ url_for(".send_from_api", service_id=current_service.id, template_id=template.id) }}">API info</a>
</div>
</div>

15
app/templates/views/templates/template.html
View File

@@ -14,15 +14,14 @@
<h1 class="heading-large">{{ template.name }}</h1>
<div class="grid-row">
{% include 'views/templates/_template.html' %}
{% with show_title=False %}
{% include 'views/templates/_template.html' %}
{% endwith %}
</div>
<p>
<a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template.template_type) }}">
All
{{ 'email' if 'email' == template.template_type else 'text message' }}
templates
</a>
</p>
{{ page_footer(
secondary_link=url_for('.choose_template', service_id=current_service.id, template_type=template.template_type),
secondary_link_text='All {} templates'.format('email' if 'email' == template.template_type else 'text message')
) }}
{% endblock %}

2
docs/index.md
View File

@@ -158,7 +158,7 @@ where:
* `to` is the phone number (required)
* `template` is the template ID to send (required)
**Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates**, click on **Edit template** and recover the template id from the url eg `/templates/<templateID>/edit`
**Note:** Access the template ID from the [GOV.UK Notify](https://www.notifications.service.gov.uk/) web application: go to **Text message templates** or **Email templates** and click on **API info**.
* `personalisation` (optional) specifies the values for the placeholders in your templates

4
tests/app/main/views/test_send.py
View File

@@ -419,10 +419,6 @@ def test_route_choose_template_send_messages_permissions(mocker,
"main.send_messages",
service_id=service_one['id'],
template_id=template_id) in page
assert url_for(
"main.send_message_to_self",
service_id=service_one['id'],
template_id=template_id) in page
assert url_for(
"main.edit_service_template",
service_id=service_one['id'],