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

Update buttons on api key pages to govuk-frontend buttons

Browse Source
This commit is contained in:
Katie Smith
2020-02-06 14:47:47 +00:00
parent 485d25b120
commit 0d0b71af63
6 changed files with 19 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -7,12 +7,12 @@
const states = {
'keyVisible': (key, thing) => `
<span class="api-key-key">${key}</span>
<input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' />
<span class="api-key__key">${key}</span>
<input type='button' class='govuk-button govuk-button--secondary api-key__button--copy' value='Copy ${thing} to clipboard' />
`,
'keyCopied': thing => `
<span class="api-key-key">Copied to clipboard</span>
<input type='button' class='api-key-button-show' value='Show ${thing}' />
<span class="api-key__key">Copied to clipboard</span>
<input type='button' class='govuk-button govuk-button--secondary api-key__button--show' value='Show ${thing}' />
`
};
@@ -39,14 +39,14 @@
.html(states.keyVisible(key, thing))
.attr('aria-live', 'polite')
.on(
'click', '.api-key-button-copy', () =>
'click', '.api-key__button--copy', () =>
this.copyKey(
$('.api-key-key', component)[0], () =>
$('.api-key__key', component)[0], () =>
$component.html(states.keyCopied(thing))
)
)
.on(
'click', '.api-key-button-show', () =>
'click', '.api-key__button--show', () =>
$component.html(states.keyVisible(key, thing))
);

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

@@ -4,22 +4,21 @@
padding-bottom: 38px; // height of button
display: flex;
&-name {
&__name {
@include bold-19;
margin-bottom: 5px;
}
&-key {
&__key {
font-family: monospace;
display: block;
padding: 0 0 10px 0;
margin: auto 0;
}
&-button-show,
&-button-copy {
&__button--show,
&__button--copy {
@include button($grey-3);
position: absolute;
bottom: 2px;

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

@@ -1,10 +1,10 @@
{% macro api_key(key, name=None, thing="API key") %}
{% if name %}
<h2 class="api-key-name">
<h2 class="api-key__name">
{{ name }}
</h2>
{% endif %}
<div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive">
<span class="api-key-key">{{ key }}</span>
<span class="api-key__key">{{ key }}</span>
</div>
{% endmacro %}

2
tests/app/main/views/test_api_integration.py
View File

@@ -269,7 +269,7 @@ def test_should_create_api_key_with_type_normal(
_expected_status=200,
)
assert page.select_one('span.api-key-key').text.strip() == (
assert page.select_one('span.api-key__key').text.strip() == (
'some_default_key_name_12-{}-{}'.format(SERVICE_ONE_ID, fake_uuid)
)

2
tests/app/main/views/test_templates.py
View File

@@ -686,7 +686,7 @@ def test_should_show_template_id_on_template_page(
template_id=fake_uuid,
_test_page_title=False,
)
assert page.select('.api-key-key')[0].text == fake_uuid
assert page.select('.api-key__key')[0].text == fake_uuid
def test_should_show_sms_template_with_downgraded_unicode_characters(

8
tests/javascripts/apiKey.test.js
View File

@@ -36,11 +36,11 @@ describe('API key', () => {
// set up DOM
document.body.innerHTML =`
<h2 class="api-key-name">
<h2 class="api-key__name">
${thing}
</h2>
<div data-module="api-key" data-key="${apiKey}" data-thing="${thing}" aria-live="assertive">
<span class="api-key-key">${apiKey}</span>
<span class="api-key__key">${apiKey}</span>
</div>`;
component = document.querySelector('[data-module=api-key]');
@@ -72,11 +72,11 @@ describe('API key', () => {
// set up DOM
document.body.innerHTML =`
<h2 class="api-key-name">
<h2 class="api-key__name">
${thing}
</h2>
<div data-module="api-key" data-key="${apiKey}" data-thing="${thing}" aria-live="assertive">
<span class="api-key-key">${apiKey}</span>
<span class="api-key__key">${apiKey}</span>
</div>`;
component = document.querySelector('[data-module=api-key]');