Sometimes when setting up a service you might have a few very similar
templates, in which only a small amount of content. Or you might even
have a few of services, which are used by different teams but have
similar templates.
Copy and pasting, especially from one service to another, is a pain.
This commit makes it easier by allowing users to copy an existing
template when choosing to add a new one, instead of starting from
scratch.
If someone has no permissions but needs permissions the thing they’re
probably going to need is to send a message or edit a template.
The place they will probably come to is the place where the buttons
would be – users with these permissions are finding the thing they need
to do on this page.
So this commit adds a line to this page which (hopefully) makes it clear
they’re in the right place, but need to go and speak to someone.
Letters is now a mature enough feature that we should:
- be raising awareness amongst our users that it’s a thing we offer
- not have letters be a surprise to anyone creating a Notify account for
the first time
Shouldn’t be merged until:
- [ ] https://github.com/alphagov/notifications-api/pull/1600
In user research, we’ve seen users copy/pasting the contents of the
inbound SMS page into a spreadsheet, in order to keep a record of the
messages they receive. They even went as far as to write a macro which
fixed the errors caused by copying and pasting.
It would be much easier if we just gave them the data already in a
spreadsheet format. Which is what this commit does.
One caveat is that, because spreadsheets can contain executable code (ie
formulas), and because we’re populating the spreadsheet with
user-submitted data (albeit via SMS) we need to be careful about
injection attacks.
The details of how these attacks work are detailed here (interesting
reading): http://georgemauer.net/2017/10/07/csv-injection.html
The mitigation is to not allow characters which initialise a formula
at the start of the cell.
It’s a confusing proposition to have two features which are almost
identical. Even differentiating between them in the template menu would
be tricky.
I think the better thing to do is rename the whole feature to ‘send
one-off message’.
Then if someone wants to use there own phone number or email address,
give them a quick shortcut to doing that, once they’re in the flow.
In the background this reuses the ‘send yourself a test’ code, but
the user is never aware that they’re going through a different route
to send an individual message. So the proposition stays nice and clean.
The textbox we use for editing letters is the same size as that for
email and text messages.
This is problematic because:
- it feels quite cramped – letters will often be longer than emails or
text messages
- it has a narrower line length than the printed letters (which is a
constant, unlike for emails and text messages)
The printed letters have a line length of 137.5mm and a font size of
12.5pt.
137.5mm = 5.41 inches = 389.7pt line length
389.7pt/12.5pt = 31.8em
So we could make the box 31.8em wide, but then it wouldn’t align to our
grid.
Our grid splits the page into quarters initially because this is how
wide the navigation is. So this means that we can use grid units of
1/multiples of four, eg 1/4, 1/8, 1/12, 1/16, etc. But the smaller the
denominator, the less effective the grid will be – it gets closer to no
grid at all.
After having a play around, 5/8 of the page looks closest to 31.8em.
Since the main column of the page is 3/4, we set a column of 5/6 width
inside that, which equals 5/8 of the total page.
Like the template ID this is an infrequently-used action on a template
and doesn’t belong at the same level as ‘Upload recipients’ or
‘Send yourself’ a test. We don’t think it’s information that’s useful to
working out which template you want to interact with, so it shouldn’t be
on the choose template page any more.
We have a bunch of helper classes (bottom gutter) which are used to
vertically separate components on the page.
This vertical spacing might get ignored if one of these containers
contains floated items. This is because:
> elements that contain floated items don't take those floated items
> into account in calculating their height
– https://css-tricks.com/containers-dont-clear-floats/
GOV.UK Frontend toolkit has a shim to prevent this from happening.
d15e738b92/stylesheets/_shims.scss (L38-L55)
So this commit uses that shim to make the spacing consistent in older
and newer browsers, irrespective of whether floats are being applied.
This hasn’t been a problem because we’re not using a lot of `float` in
Notify. But we are using it now to work around some other
inconsistencies in old browsers.
The yellow banner didn’t make this information much more noticeable,
and it made some people miss the request to go live link because it
wasn’t blue.
This commit brings the design back to where it was as of this PR:
https://github.com/alphagov/notifications-admin/pull/904
Now that we’ve removed simulated notifications from the dashboard and
activity pages they’re not visible anywhere in the app.
While they should’t be visible to non-technical users, developers have
a real need for Notify to confirm that their code is doing what they
expect. This is needed especially when they’re just getting started with
Notify.
There’s no way of seeing this info from the API either, because a key
can only get notifications created with a key of that type.
It doesn’t make sense to make this a ‘mode’ of the dashboard or activity
because the information about notifications that developers need is
also different. So this commit adds up to 50 of the most recent
notifications sent via the API to the page that developers use as their
‘home’ page.
This also lets us explain the 7 days thing to developers via the
empty slate state of this area of the page.
The previous text on this page around trial mode was a bit of a
mouthful. Also it only really made sense if you already knew what trial
mode was.
This commit tries to make it really explicit:
- that you’re in trial mode
- what it means to be in trial mode (copied from the trial mode page)
- where you go to not be in trial mode
_The code for this is quite hacky and light on tests. But I’d really like to get
it in the app for the research tomorrow to see how well the feature works._
This commit changes the tour from being a set of static screens to some help
which guides you through the process of sending your first test message.
The theory behind this is that what users are really struggling with is the
concept of a variable, rather than the relationship between the placeholders and
the column headers. And like learning to program, the best way to learn is by
taking an example and modifying it to your own needs.
This means that when someone adds their first service we set them up an
example email template and an example text message template. Then there is a
guided, three step process where _all_ the user can do is send a test message to
themselves.
Once the message is sent, the user still has the example templates which they
can edit, rather than having to remember what they’re supposed to be doing.
Takes the number of emails and SMS fragments sent from:
https://github.com/alphagov/notifications-api/pull/273
Using these numbers it’s possible to show:
- how much of your allowance is left
- or how much you have spent
For now the allowance and rates are hard coded.
Only for users that have manage service.
We should (and do) keep exact copies of SCSS files that have come from
elsewhere so that we can easily upgrade them. But sometimes they don’t
always pass our linting rules, or throw a lot of warnings, which is
noisy.
This commit:
- moves such files into their own subdirectory
- tells SCSS Lint to ignore files in this directory
When the first heading on the page is inside a grid row, it doesn’t
vertically align properly with the navigation. This is because it
isn’t targeted by the selector that does this for pages without
an initial grid row.
This commit:
- adds an extra selector to target these headings
- makes the ‘add new thing’ buttons maintain their alignment with
the page heading
This commit adds two new sections to the dashboard
1. A banner telling you about trial mode, including a count of how many messages
you have left today, which is a restriction of trial mode
2. Panels with counts of how many emails and text messages have been sent in a
day, plus the failure rates for each
It does **not**:
- link through to any further information about what trial mode is (coming
later)
- link through to pages for the failure rates (coming later)
- change the ‘recent jobs’ section to ‘recent notifications’
On the send messages and manage team pages we have big green buttons for
adding/inviting a new template or team member.
On the add template page it was at the bottom, and often got missed.
On the manage team page it was at the top, but maybe too prominent because it’s
big and green.
This commit tries putting it in the top right of the page instead (except when
the template page is empty, in which case it’s unchanged).
This commit adds some guidance on the ‘Add recipients’ page about what should
be in the CSV file. The guidance is contextual to the template, and based on
the problems that we saw users having yesterday.
This commit adds a new page, which appears after a user enters the name for
their new service. It shows how the service name will appear in emails and
text messages.
This means that the new service is not created until after they have confirmed
that the name is appropriate in context.
This has also involved:
- visual changes to the ‘email template’ pattern, which wasn’t very refined
before
- removing a bunch of words from the enter service name page, because most users
don’t read them, and we reckon that showing a preview is a better way of
getting them to understand what is meant by service name
Still to do:
- validating the the generated email address for a service is unique (on the
API) side
- having the API return the generated email address, rather than determining it
in the admin app
This page is exactly the same as the page for adding your first service, save
the heading text.
So all this commit does is:
- set up two routes (`/add-service`, `/add-service/first`) for each of the two
journeys and change the existing journeys to use the `/add-service/first`
route
- add logic to show different heading text depending on the journey
- add a link to the new (`/add-service`) route in the service chooser dropdown
