Generally I prefer confirmation pages to the flash message thing
(they’re harder to miss). So this commit adds one.
It also adds some logic to this page, so that, depending what the user
has told us about the thing they’ve submitted, we can tell them how
quickly to expect a response.
TL;DR, as much as possible we should work out how to prioritise tickets
and not put that burden on the user. However, there are some cases where
we can’t.
In business hours all tickets are high priority, ie we will at least
acknowledge them within 30 mins.
If we are not in business hours then we need to know if a ticket is
serious enough to get someone out of bed. Only the user can tell us
this, but we can give them some examples to help them decide.
In addition, out-of-hours tickets are only a priority if the user has
live services. Normally we can determine this and do the
priority-setting in the background.
If they can’t log in then we can’t determine what services they have. So
in this case they will need to use the emergency email address, which
only users with live services will have.
The logic for this gets fairly complex. It might be to easier to
understand what’s going on by walking through the test cases, which are
a bit more declarative.
N.B. Deskpro’s ‘urgency’ is descending, eg 10 is the most urgent and 1
is the least.
If a user is logged in then we already know their name and email
address. So there’s no need for them to fill them again on the support
form.
One concern we might have about this is the user not realising we’re
doing this, and the feedback form looking like a bit of a black hole.
So we’re replaying their email address on this page to reassure them
that:
- we know who they are
- and that they’ll get a reply
The kind of communications we’re getting at the moment can broadly be
broken down into:
- problems
- questions and feedback
We will need to triage problems differently, because they could
potentially be urgent/severe/emergency/P1/whatever language we use.
Questions or feedback will never be P1.
Two reasons for making the user categorise their tickets themselves:
- Outside of hours we can’t get someone out of bed in order to decide if
a ticket is a problem or just feedback
- We can tailor the subsequent pages to whether it’s a problem or
feedback (eg showing a link to the status page if the user is having
a problem)
This commit let’s users make the choice with a pair of radio buttons.
It also cleans up a bunch of the tests and parameterizes them so we’re
testing the flow for both ticket types.
Our support process is about to get more fully fledged so we’ll need
an index page to route people properly.
We reckon that users will also want to know what the support process is,
so let’s explain it on this page.
PEP8 was renamed to pycodestyle; this issue explains why:
PyCQA/pycodestyle#466
This commit changes our tests to use pycodestyle instead of pep8.
No changes to our code were required as a result.
The url was not being properly formed, missing the tempalte_id, meaning the back button on the page did not work.
This fixes that, includes a check of the url for the back button.
Problem: it wasn’t saying ‘phone number’ or ‘email address’
Why: we renamed `Recipients.recipient_column_header` to
`Recipients.recipient_column_headers`, and made it return a list, not
a string.
The fix: take the first item of the list, and use that to decide whether
it’s phone numbers or email addresses that you’re not allowed to send
to.
N.B. This won’t work for letters, but we don’t know how trial mode is
going to work for letters anyway.
This copies what the other GaaP components will be doing for their
product pages.
The SASS and HTML is taken from here:
f05ca1fb71/source/stylesheets/modules/_breadcrumbs.scss
Only changes I’ve made are:
- making the file paths work with our build pipeline
Changes to our code to accomodate this are:
- putting the padding on the product page `<h1>` not its container
- moving the hero image accordingly so that it lines up
- making the `<main>` element on the product page into an anchor so that
the breadcrumb can link to it – screenreader will then announce the
link as “GOV.UK Notify, same page”
The ticks and crosses on the team page are served bigger than actual
size (128×128px). They are then resized using CSS3 `background-size`
to their displayed size (19px).
The reason for doing this is so they display crisply on retina screens.
IE8 doesn’t support `background-size` (see
http://caniuse.com/#feat=background-img-opts). This means that the ticks
and crosses get show at their original size (way too big).
This commit adds resized versions of the ticks and crosses which are
then served to these older browsers only.
We grey-out the non-current step in the tour so the user knows whether
they’re at step 1, 2, or 3.
This is done using CSS opacity.
IE8 doesn’t support the standard CSS opacity syntax. But it does support
the weird, old, Microsoft-specific `filter:` syntax. So this commit:
- makes the greying out a class rather than an inline style, to reduce
duplication
- adds the filter syntax so the greying out works in IE8
The layout of the totals on the dashboard was getting horizontally
squashed on older versions of IE.
This was something to do with the `grid-row` CSS class no longer being
applied when AJAX updated the page. Grid columns don’t work properly
unless they’re contained in a grid row.
This commit wraps the `div` with `grid-row` in another `div`. Not
totally sure why this works, but it’s something to do with how the
DiffDOM algorithm is working. Seems like the simpler the diff it has to
compute, the better chance it has of not messing things up.
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.
We use flexbox to lay out the counts of sending/delivered/failed on the
activity and job pages. flexbox makes the best use of the space when
the numbers can be significantly different widths (eg 0 sending, 5000
delivered).
Flexbox was only supported from IE 11 onwards [1]. And since we were
setting the `display` property of the individual numbers to `block` they
were rendering one-per-line on browsers that don’t support flexbox.
This commit changes these items to be floated and a predefined width. In
browsers that support it, flexbox seems to override these hard-coded
widths. It’s not quite as good as the flexbox solution because:
- it doesn’t adjust the widths in the nice way that flexbox does
- it’s hard-coded to expect 4 items (we don’t have this component with
any other number of items at the moment, so it won’t actually break
anything)
But it’s pretty much OK because:
- it’s a lot better than the before
- IE 8 and 9 combined only make up 5% of our users, and this will be a
declining number
- polyfilling flexbox would mean using Javascript, and we don’t serve
working Javacript to IE 8 users anyway
1. http://caniuse.com/#feat=flexbox
