Files
notifications-admin/app/templates/views/api/index.html
Tom Byers d13db305c1 Convert <details> on API page to macro HTML
The GOV.UK Frontend details component macro
  wraps its `<summary>` text in a `<span>`.

  We put a `<h3>` in the `<summary>` (actually valid
  use, based on the spec) so this breaks when the
  `<span>` wraps it.

  This converts the existing `<details>` tag to use
  all the class names the macro creates, but with
  all the `<summary>` contents in the `<h3>`.

  Also adds font-smoothing to the messages on the
  API page. This was previously set globally for
  all fonts in the GOV.UK Template CSS but is now
  just set for the New Transport 'nta' font.
  Included because the messages use the monospace
  font so don't have it by default.
2019-12-17 10:26:16 +00:00

101 lines
4.0 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
{% extends "withnav_template.html" %}
{% from "components/table.html" import list_table, field, hidden_field_heading %}
{% from "components/api-key.html" import api_key %}
{% from "components/banner.html" import banner_wrapper %}
{% from "components/message-count-label.html" import message_count_label %}
{% block service_page_title %}
API integration
{% endblock %}
{% block maincolumn_content %}
<h1 class="heading-medium bottom-gutter-3-2">
API integration
</h1>
<nav class="grid-row bottom-gutter-1-2">
<div class="column-one-third">
<a class="pill-separate-item" href="{{ url_for('.api_keys', service_id=current_service.id) }}">API keys</a>
</div>
<div class="column-one-third">
<a class="pill-separate-item" href="{{ url_for('.whitelist', service_id=current_service.id) }}">Whitelist</a>
</div>
<div class="column-one-third">
<a class="pill-separate-item" href="{{ url_for(callbacks_link, service_id=current_service.id) }}">Callbacks</a>
</div>
</nav>
<div class="grid-row">
<div class="column-half">
<h2 class="heading-small">
Message log
</h2>
</div>
<div class="column-half align-with-heading-copy-right">
<a href="{{ url_for('.api_integration', service_id=current_service.id) }}">Refresh</a>
</div>
</div>
<div class="api-notifications">
{% if not api_notifications.notifications %}
<div class="api-notifications-item">
<p class="api-notifications-item__meta">
When you send messages via the API theyll appear here.
</p>
<p class="api-notifications-item__meta">
Notify deletes messages after 7 days.
</p>
</div>
{% endif %}
{% for notification in api_notifications.notifications %}
<details class="api-notifications-item govuk-details govuk-!-margin-bottom-0" data-module="govuk-details">
<summary class="govuk-details__summary govuk-clearfix api-notifications-item__heading">
<h3>
<span class="govuk-details__summary-text">
{{ notification.to }}
</span>
<span class="govuk-grid-row api-notifications-item__meta">
<span class="govuk-grid-column-one-half api-notifications-item__meta-key">
{{notification.key_name}}
</span>
<span class="govuk-grid-column-one-half api-notifications-item__meta-time">
<time class="timeago" datetime="{{ notification.created_at }}">
{{ notification.created_at|format_delta }}
</time>
</span>
</span>
</h3>
</summary>
<div class="govuk-details__text api-notifications-item__data govuk-!-padding-top-0">
<dl id="notification-{{ notification.id }}">
{% for key in [
'id', 'client_reference', 'notification_type', 'created_at', 'updated_at', 'sent_at', 'status'
] %}
{% if notification[key] %}
<dt class="api-notifications-item__data-name">{{ key }}:</dt>
<dd class="api-notifications-item__data-value">{{ notification[key] }}</dd>
{% endif %}
{% endfor %}
{% if notification.status not in ('pending-virus-check', 'virus-scan-failed') %}
<a class="api-notifications-item__view" href="{{ url_for('.view_notification', service_id=current_service.id, notification_id=notification.id) }}">View {{ message_count_label(1, notification.template.template_type, suffix='') }}</a>
{% endif %}
</dl>
</div>
</details>
{% endfor %}
{% if api_notifications.notifications %}
<div class="api-notifications-item">
{% if api_notifications.notifications|length == 50 %}
<p class="api-notifications-item__meta">
Only showing the first 50 messages.
</p>
{% endif %}
<p class="api-notifications-item__meta">
Notify deletes messages after 7 days.
</p>
</div>
{% endif %}
</div>
{% endblock %}