darkhelm/notifications-admin
1
0
Fork 0
mirror of https://github.com/GSA/notifications-admin.git synced 2026-08-01 20:29:49 -04:00
Code Issues Packages Projects Releases Wiki Activity

rename api key component to copy_to_clipboard

Browse Source 
does what it says on the tin, and is also consistent with prior art:
https://components.publishing.service.gov.uk/component-guide/copy_to_clipboard
This commit is contained in:
Leo Hemsted
2021-08-27 17:32:06 +01:00
parent 4921e6d46e
commit 85f6881a56
14 changed files with 100 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
app/assets/javascripts/apiKey.js → app/assets/javascripts/copyToClipboard.js
View File

@@ -3,33 +3,33 @@
if (!document.queryCommandSupported('copy')) return;
Modules.ApiKey = function() {
Modules.CopyToClipboard = function() {
const states = {
'keyVisible': (options) => `
<span class="api-key__key">
${options.keyLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.key}
'valueVisible': (options) => `
<span class="copy-to-clipboard__value">
${options.valueLabel ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${options.value}
</span>
<span class="api-key__notice govuk-visually-hidden" aria-live="assertive">
<span class="copy-to-clipboard__notice govuk-visually-hidden" aria-live="assertive">
${options.onload ? '' : options.thing + ' returned to page, press button to copy to clipboard'}
</span>
<button class="govuk-button govuk-button--secondary api-key__button--copy">
<button class="govuk-button govuk-button--secondary copy-to-clipboard__button--copy">
Copy ${options.thing} to clipboard${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
</button>
`,
'keyCopied': (options) => `
<span class="api-key__notice" aria-live="assertive">
'valueCopied': (options) => `
<span class="copy-to-clipboard__notice" aria-live="assertive">
<span class="govuk-visually-hidden">${options.thing} </span>Copied to clipboard<span class="govuk-visually-hidden">, press button to show in page</span>
</span>
<button class="govuk-button govuk-button--secondary api-key__button--show">
<button class="govuk-button govuk-button--secondary copy-to-clipboard__button--show">
Show ${options.thing}${options.name ? '<span class="govuk-visually-hidden"> for ' + options.name + '</span>' : ''}
</button>
`
};
this.getRangeFromElement = function (keyElement) {
this.getRangeFromElement = function (copyableElement) {
const range = document.createRange();
const childNodes = Array.prototype.slice.call(keyElement.childNodes);
const childNodes = Array.prototype.slice.call(copyableElement.childNodes);
let prefixIndex = -1;
childNodes.forEach((el, idx) => {
@@ -38,15 +38,15 @@
}
});
range.selectNodeContents(keyElement);
if (prefixIndex !== -1) { range.setStart(keyElement, prefixIndex + 1); }
range.selectNodeContents(copyableElement);
if (prefixIndex !== -1) { range.setStart(copyableElement, prefixIndex + 1); }
return range;
};
this.copyKey = function(keyElement, callback) {
this.copyValueToClipboard = function(copyableElement, callback) {
var selection = window.getSelection ? window.getSelection() : document.selection,
range = this.getRangeFromElement(keyElement);
range = this.getRangeFromElement(copyableElement);
selection.removeAllRanges();
selection.addRange(range);
@@ -59,36 +59,36 @@
const $component = $(component),
stateOptions = {
key: $component.data('key'),
value: $component.data('value'),
thing: $component.data('thing')
},
name = $component.data('name');
// if the name is distinct from the thing:
// - it will be used in the rendering
// - the key won't be identified by a heading so needs its own label
// - the value won't be identified by a heading so needs its own label
if (name !== stateOptions.thing) {
stateOptions.name = name;
stateOptions.keyLabel = true;
stateOptions.valueLabel = true;
}
$component
.addClass('api-key')
.addClass('copy-to-clipboard')
.css('min-height', $component.height())
.html(states.keyVisible($.extend({ 'onload': true }, stateOptions)))
.html(states.valueVisible($.extend({ 'onload': true }, stateOptions)))
.on(
'click', '.api-key__button--copy', () =>
this.copyKey(
$('.api-key__key', component)[0], () =>
'click', '.copy-to-clipboard__button--copy', () =>
this.copyValueToClipboard(
$('.copy-to-clipboard__value', component)[0], () =>
$component
.html(states.keyCopied(stateOptions))
.html(states.valueCopied(stateOptions))
.find('.govuk-button').focus()
)
)
.on(
'click', '.api-key__button--show', () =>
'click', '.copy-to-clipboard__button--show', () =>
$component
.html(states.keyVisible(stateOptions))
.html(states.valueVisible(stateOptions))
.find('.govuk-button').focus()
);

2
app/assets/stylesheets/components/api-key.scss → app/assets/stylesheets/components/copy-to-clipboard.scss
View File

@@ -1,4 +1,4 @@
.api-key {
.copy-to-clipboard {
position: relative;
padding-bottom: 38px; // height of button

2
app/assets/stylesheets/main.scss
View File

@@ -50,7 +50,7 @@ $path: '/static/images/';
@import 'components/file-upload';
@import 'components/browse-list';
@import 'components/email-message';
@import 'components/api-key';
@import 'components/copy-to-clipboard';
@import 'components/vendor/previous-next-navigation';
@import 'components/radios';
@import 'components/checkboxes';

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

@@ -1,13 +0,0 @@
{% macro api_key(key, name, thing="API key") %}
{% if name|lower == thing|lower %}
<h2 class="api-key__name">
{{ name }}
</h2>
{% endif %}
<div data-module="api-key" data-key="{{ key }}" data-thing="{{ thing }}" data-name="{{ name }}">
<span class="api-key__key">
{% if name|lower != thing|lower %}<span class="govuk-visually-hidden">{{ thing }}: </span>{% endif %}{{ key }}
</span>
<span class="api-key__notice" aria-live="assertive"></span>
</div>
{% endmacro %}

13
app/templates/components/copy-to-clipboard.html Normal file
View File

@@ -0,0 +1,13 @@
{% macro copy_to_clipboard(value, name, thing) %}
{% if name|lower == thing|lower %}
<h2 class="copy-to-clipboard__name">
{{ name }}
</h2>
{% endif %}
<div data-module="copy-to-clipboard" data-value="{{ value }}" data-thing="{{ thing }}" data-name="{{ name }}">
<span class="copy-to-clipboard__value">
{% if name|lower != thing|lower %}<span class="govuk-visually-hidden">{{ thing }}: </span>{% endif %}{{ value }}
</span>
<span class="copy-to-clipboard__notice" aria-live="assertive"></span>
</div>
{% endmacro %}

4
app/templates/views/api/keys/show.html
View File

@@ -1,6 +1,6 @@
{% extends "withnav_template.html" %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/api-key.html" import api_key %}
{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
{% block service_page_title %}
New API key
@@ -22,7 +22,7 @@
<div class="bottom-gutter-2">
{{ api_key(
{{ copy_to_clipboard(
'{}-{}-{}'.format(key_name, service_id, secret),
name='API key',
thing='API key'

4
app/templates/views/service-settings/email_reply_to.html
View File

@@ -1,5 +1,5 @@
{% extends "withnav_template.html" %}
{% from "components/api-key.html" import api_key %}
{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
{% from "components/page-header.html" import page_header %}
{% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
{% from "components/button/macro.njk" import govukButton %}
@@ -46,7 +46,7 @@
<div class="govuk-grid-row">
<div class="govuk-grid-column-full">
{% if current_service.count_email_reply_to_addresses > 1 %}
{{ api_key(item.id, name=item.email_address, thing="ID") }}
{{ copy_to_clipboard(item.id, name=item.email_address, thing="ID") }}
{% endif %}
</div>
</div>

4
app/templates/views/service-settings/letter-contact-details.html
View File

@@ -1,5 +1,5 @@
{% extends "withnav_template.html" %}
{% from "components/api-key.html" import api_key %}
{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
{% from "components/page-header.html" import page_header %}
{% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context %}
{% from "components/button/macro.njk" import govukButton %}
@@ -59,7 +59,7 @@
</div>
{% if letter_contact_details|length > 1 %}
{% set first_line_of_contact_block = item.contact_block|normalise_lines|first %}
{{ api_key(item.id, name=first_line_of_contact_block, thing="ID") }}
{{ copy_to_clipboard(item.id, name=first_line_of_contact_block, thing="ID") }}
{% endif %}
</div>
{% endfor %}

4
app/templates/views/service-settings/sms-senders.html
View File

@@ -1,5 +1,5 @@
{% extends "withnav_template.html" %}
{% from "components/api-key.html" import api_key %}
{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
{% from "components/page-header.html" import page_header %}
{% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context%}
{% from "components/button/macro.njk" import govukButton %}
@@ -46,7 +46,7 @@
</div>
</div>
{% if current_service.count_sms_senders > 1 %}
{{ api_key(item.id, name=item.sms_sender, thing="ID") }}
{{ copy_to_clipboard(item.id, name=item.sms_sender, thing="ID") }}
{% endif %}
</div>
{% endfor %}

4
app/templates/views/templates/template.html
View File

@@ -2,7 +2,7 @@
{% from "components/banner.html" import banner_wrapper %}
{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/api-key.html" import api_key %}
{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
{% from "components/button/macro.njk" import govukButton %}
{% block service_page_title %}
@@ -47,7 +47,7 @@
{% if template.template_type != 'broadcast' %}
<div class="bottom-gutter-1-2">
{{ api_key(template.id, name="Template ID", thing='template ID') }}
{{ copy_to_clipboard(template.id, name="Template ID", thing='template ID') }}
</div>
{% endif %}

2
gulpfile.js
View File

@@ -163,7 +163,7 @@ const javascripts = () => {
paths.src + 'javascripts/cookieMessage.js',
paths.src + 'javascripts/cookieSettings.js',
paths.src + 'javascripts/stick-to-window-when-scrolling.js',
paths.src + 'javascripts/apiKey.js',
paths.src + 'javascripts/copyToClipboard.js',
paths.src + 'javascripts/autofocus.js',
paths.src + 'javascripts/enhancedTextbox.js',
paths.src + 'javascripts/fileUpload.js',

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

@@ -283,7 +283,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.copy-to-clipboard__value').text.strip() == (
'some_default_key_name_12-{}-{}'.format(SERVICE_ONE_ID, fake_uuid)
)

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

@@ -975,7 +975,7 @@ def test_should_show_template_id_on_template_page(
template_id=fake_uuid,
_test_page_title=False,
)
assert fake_uuid in page.select('.api-key__key')[0].text
assert fake_uuid in page.select('.copy-to-clipboard__value')[0].text
def test_should_hide_template_id_for_broadcast_templates(
@@ -990,7 +990,7 @@ def test_should_hide_template_id_for_broadcast_templates(
template_id=fake_uuid,
_test_page_title=False,
)
assert not page.select('.api-key__key')
assert not page.select('.copy-to-clipboard__value')
def test_should_show_sms_template_with_downgraded_unicode_characters(

90
tests/javascripts/apiKey.test.js → tests/javascripts/copyToClipboard.test.js
View File

@@ -9,7 +9,7 @@ afterAll(() => {
});
describe('API key', () => {
describe('copy to clipboard', () => {
let apiKey = '00000000-0000-0000-0000-000000000000';
let thing;
@@ -21,14 +21,14 @@ describe('API key', () => {
// set up DOM
document.body.innerHTML =`
<h2 class="api-key__name">
<h2 class="copy-to-clipboard__name">
${options.thing}
</h2>
<div data-module="api-key" data-key="${apiKey}" data-thing="${options.thing}" data-name="${options.name}">
<span class="api-key__key" aria-live="assertive">
<div data-module="copy-to-clipboard" data-value="${apiKey}" data-thing="${options.thing}" data-name="${options.name}">
<span class="copy-to-clipboard__value" aria-live="assertive">
${(options.name === options.thing) ? '<span class="govuk-visually-hidden">' + options.thing + ': </span>' : ''}${apiKey}
</span>
<span class="api-key__notice" aria-live="assertive"></span>
<span class="copy-to-clipboard__notice" aria-live="assertive"></span>
</div>`;
};
@@ -58,11 +58,11 @@ describe('API key', () => {
// fake support for the copy command not being available
document.queryCommandSupported = jest.fn(command => false);
require('../../app/assets/javascripts/apiKey.js');
require('../../app/assets/javascripts/copyToClipboard.js');
setUpDOM({ 'thing': 'API key', 'name': 'API key' });
setUpDOM({ 'thing': 'Some Thing', 'name': 'Some Thing' });
component = document.querySelector('[data-module=api-key]');
component = document.querySelector('[data-module=copy-to-clipboard]');
// start the module
window.GOVUK.modules.start();
@@ -83,7 +83,7 @@ describe('API key', () => {
// force module require to not come from cache
jest.resetModules();
require('../../app/assets/javascripts/apiKey.js');
require('../../app/assets/javascripts/copyToClipboard.js');
});
@@ -97,13 +97,13 @@ describe('API key', () => {
beforeEach(() => {
setUpDOM({ 'thing': 'API key', 'name': 'API key' });
setUpDOM({ 'thing': 'Some Thing', 'name': 'Some Thing' });
component = document.querySelector('[data-module=api-key]');
component = document.querySelector('[data-module=copy-to-clipboard]');
// set default style for component height (queried by jQuery before checking DOM APIs)
const stylesheet = document.createElement('style');
stylesheet.innerHTML = '[data-module=api-key] { height: auto; }'; // set to browser default
stylesheet.innerHTML = '[data-module=copy-to-clipboard] { height: auto; }'; // set to browser default
document.getElementsByTagName('head')[0].appendChild(stylesheet);
componentHeightOnLoad = 50;
@@ -126,15 +126,15 @@ describe('API key', () => {
});
test("It should add a button for copying the key to the clipboard", () => {
test("It should add a button for copying the thing to the clipboard", () => {
expect(component.querySelector('button')).not.toBeNull();
});
test("It should add the 'api-key' class", () => {
test("It should add the 'copy-to-clipboard' class", () => {
expect(component.classList.contains('api-key')).toBe(true);
expect(component.classList.contains('copy-to-clipboard')).toBe(true);
});
@@ -162,7 +162,7 @@ describe('API key', () => {
// different, it will be one of others called the same 'thing'.
setUpDOM({ 'thing': 'ID', 'name': 'Default' });
component = document.querySelector('[data-module=api-key]');
component = document.querySelector('[data-module=copy-to-clipboard]');
// start the module
window.GOVUK.modules.start();
@@ -173,9 +173,9 @@ describe('API key', () => {
// and so needs some prefix text to label it
test("The id should have a hidden prefix to label what it is", () => {
const keyPrefix = component.querySelector('.api-key__key .govuk-visually-hidden');
expect(keyPrefix).not.toBeNull();
expect(keyPrefix.textContent).toEqual('ID: ');
const value = component.querySelector('.copy-to-clipboard__value .govuk-visually-hidden');
expect(value).not.toBeNull();
expect(value.textContent).toEqual('ID: ');
});
@@ -196,9 +196,9 @@ describe('API key', () => {
// The heading is added if 'thing' (what the id is) has the same value as 'name'
// (its specific identifier on the page) because this means it can assume it is
// the only one of its type there
setUpDOM({ 'thing': 'API key', 'name': 'API key' });
setUpDOM({ 'thing': 'Some Thing', 'name': 'Some Thing' });
component = document.querySelector('[data-module=api-key]');
component = document.querySelector('[data-module=copy-to-clipboard]');
// start the module
window.GOVUK.modules.start();
@@ -207,9 +207,9 @@ describe('API key', () => {
test("Its button and id shouldn't have extra hidden text to identify them", () => {
const keyPrefix = component.querySelector('.api-key__key .govuk-visually-hidden');
const value = component.querySelector('.copy-to-clipboard__value .govuk-visually-hidden');
const buttonSuffix = component.querySelector('button .govuk-visually-hidden');
expect(keyPrefix).toBeNull();
expect(value).toBeNull();
expect(buttonSuffix).toBeNull();
})
@@ -218,7 +218,7 @@ describe('API key', () => {
});
describe("If you click the 'Copy API key to clipboard' button", () => {
describe("If you click the 'Copy Some Thing to clipboard' button", () => {
describe("For all variations of the initial HTML", () => {
@@ -226,13 +226,13 @@ describe('API key', () => {
beforeEach(() => {
setUpDOM({ 'thing': 'API key', 'name': 'API key' });
setUpDOM({ 'thing': 'Some Thing', 'name': 'Some Thing' });
// start the module
window.GOVUK.modules.start();
component = document.querySelector('[data-module=api-key]');
keyEl = component.querySelector('.api-key__key');
component = document.querySelector('[data-module=copy-to-clipboard]');
keyEl = component.querySelector('.copy-to-clipboard__value');
helpers.triggerEvent(component.querySelector('button'), 'click');
@@ -240,7 +240,7 @@ describe('API key', () => {
test("The live-region should be shown and its text should confirm the copy action", () => {
const liveRegion = component.querySelector('.api-key__notice');
const liveRegion = component.querySelector('.copy-to-clipboard__notice');
expect(liveRegion.classList.contains('govuk-visually-hidden')).toBe(false);
expect(liveRegion.textContent.trim()).toEqual(
@@ -253,31 +253,31 @@ describe('API key', () => {
// lower priority than the live-region
test("The live-region should contain some hidden text giving context to the statement shown", () => {
const liveRegionHiddenText = component.querySelectorAll('.api-key__notice .govuk-visually-hidden');
const liveRegionHiddenText = component.querySelectorAll('.copy-to-clipboard__notice .govuk-visually-hidden');
expect(liveRegionHiddenText.length).toEqual(2);
expect(liveRegionHiddenText[0].textContent).toEqual('API key ');
expect(liveRegionHiddenText[0].textContent).toEqual('Some Thing ');
expect(liveRegionHiddenText[1].textContent).toEqual(', press button to show in page');
});
test("It should swap the button for one to show the API key", () => {
test("It should swap the button for one to show the Some Thing", () => {
expect(component.querySelector('button').textContent.trim()).toEqual(
expect.stringContaining('Show API key')
expect.stringContaining('Show Some Thing')
);
});
test("It should remove the id from the page", () => {
expect(component.querySelector('.api-key__key')).toBeNull();
expect(component.querySelector('.copy-to-clipboard__value')).toBeNull();
});
test("It should copy the key to the clipboard", () => {
test("It should copy the thing to the clipboard", () => {
// it should make a selection (a range) from the contents of the element containing the API key
// it should make a selection (a range) from the contents of the element containing the Some Thing
expect(rangeMock.selectNodeContents.mock.calls[0]).toEqual([keyEl]);
// that selection (a range) should be added to that for the page (a selection)
@@ -293,7 +293,7 @@ describe('API key', () => {
});
describe("If you then click the 'Show API key'", () => {
describe("If you then click the 'Show Some Thing'", () => {
beforeEach(() => {
@@ -301,16 +301,16 @@ describe('API key', () => {
});
test("It should change the text to show the API key", () => {
test("It should change the text to show the Some Thing", () => {
expect(component.querySelector('.api-key__key')).not.toBeNull();
expect(component.querySelector('.copy-to-clipboard__value')).not.toBeNull();
});
test("It should swap the button for one to copy the key to the clipboard", () => {
test("It should swap the button for one to copy the thing to the clipboard", () => {
expect(component.querySelector('button').textContent.trim()).toEqual(
expect.stringContaining('Copy API key to clipboard')
expect.stringContaining('Copy Some Thing to clipboard')
);
})
@@ -330,7 +330,7 @@ describe('API key', () => {
// start the module
window.GOVUK.modules.start();
component = document.querySelector('[data-module=api-key]');
component = document.querySelector('[data-module=copy-to-clipboard]');
helpers.triggerEvent(component.querySelector('button'), 'click');
@@ -368,12 +368,12 @@ describe('API key', () => {
// The heading is added if 'thing' (what the id is) has the same value as 'name'
// (its specific identifier on the page) because this means it can assume it is
// the only one of its type there
setUpDOM({ 'thing': 'API key', 'name': 'API key' });
setUpDOM({ 'thing': 'Some Thing', 'name': 'Some Thing' });
// start the module
window.GOVUK.modules.start();
component = document.querySelector('[data-module=api-key]');
component = document.querySelector('[data-module=copy-to-clipboard]');
helpers.triggerEvent(component.querySelector('button'), 'click');
@@ -381,9 +381,9 @@ describe('API key', () => {
test("Its button and id shouldn't have extra hidden text to identify them", () => {
const keyPrefix = component.querySelector('.api-key__key .govuk-visually-hidden');
const prefix = component.querySelector('.copy-to-clipboard__value .govuk-visually-hidden');
const buttonSuffix = component.querySelector('button .govuk-visually-hidden');
expect(keyPrefix).toBeNull();
expect(prefix).toBeNull();
expect(buttonSuffix).toBeNull();
})