darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-25 00:33:58 -04: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 = { const states = {
'keyVisible': (key, thing) => ` 'keyVisible': (key, thing) => `
<span class="api-key-key">${key}</span> <span class="api-key__key">${key}</span>
<input type='button' class='api-key-button-copy' value='Copy ${thing} to clipboard' /> <input type='button' class='govuk-button govuk-button--secondary api-key__button--copy' value='Copy ${thing} to clipboard' />
`, `,
'keyCopied': thing => ` 'keyCopied': thing => `
<span class="api-key-key">Copied to clipboard</span> <span class="api-key__key">Copied to clipboard</span>
<input type='button' class='api-key-button-show' value='Show ${thing}' /> <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)) .html(states.keyVisible(key, thing))
.attr('aria-live', 'polite') .attr('aria-live', 'polite')
.on( .on(
'click', '.api-key-button-copy', () => 'click', '.api-key__button--copy', () =>
this.copyKey( this.copyKey(
$('.api-key-key', component)[0], () => $('.api-key__key', component)[0], () =>
$component.html(states.keyCopied(thing)) $component.html(states.keyCopied(thing))
) )
) )
.on( .on(
'click', '.api-key-button-show', () => 'click', '.api-key__button--show', () =>
$component.html(states.keyVisible(key, thing)) $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 padding-bottom: 38px; // height of button
display: flex; display: flex;
&-name { &__name {
@include bold-19; @include bold-19;
margin-bottom: 5px; margin-bottom: 5px;
} }
&-key { &__key {
font-family: monospace; font-family: monospace;
display: block; display: block;
padding: 0 0 10px 0; padding: 0 0 10px 0;
margin: auto 0; margin: auto 0;
} }
&-button-show, &__button--show,
&-button-copy { &__button--copy {
@include button($grey-3);
position: absolute; position: absolute;
bottom: 2px; bottom: 2px;

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

@@ -1,10 +1,10 @@
{% macro api_key(key, name=None, thing="API key") %} {% macro api_key(key, name=None, thing="API key") %}
{% if name %} {% if name %}
<h2 class="api-key-name"> <h2 class="api-key__name">
{{ name }} {{ name }}
</h2> </h2>
{% endif %} {% endif %}
<div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" aria-live="assertive"> <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> </div>
{% endmacro %} {% 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, _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) '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, template_id=fake_uuid,
_test_page_title=False, _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( 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 // set up DOM
document.body.innerHTML =` document.body.innerHTML =`
<h2 class="api-key-name"> <h2 class="api-key__name">
${thing} ${thing}
</h2> </h2>
<div data-module="api-key" data-key="${apiKey}" data-thing="${thing}" aria-live="assertive"> <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>`; </div>`;
component = document.querySelector('[data-module=api-key]'); component = document.querySelector('[data-module=api-key]');
@@ -72,11 +72,11 @@ describe('API key', () => {
// set up DOM // set up DOM
document.body.innerHTML =` document.body.innerHTML =`
<h2 class="api-key-name"> <h2 class="api-key__name">
${thing} ${thing}
</h2> </h2>
<div data-module="api-key" data-key="${apiKey}" data-thing="${thing}" aria-live="assertive"> <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>`; </div>`;
component = document.querySelector('[data-module=api-key]'); component = document.querySelector('[data-module=api-key]');