Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Backport UI: improve DR Operation Token flow with PGP (#26993) #27252

Merged
merged 3 commits into from
May 28, 2024
Merged

Backport UI: improve DR Operation Token flow with PGP (#26993) #27252

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
fdfc361
UI: improve DR Operation Token flow with PGP (#26993)
hashishaw May 14, 2024
5091672
remove lint disable
hashishaw May 28, 2024
b7cae69
fix tests with upstream changes
hashishaw May 28, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions changelog/26993.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
```release-note:improvement
ui: Update PGP display and show error for Generate Operation Token flow with PGP
```
1 change: 1 addition & 0 deletions ui/lib/core/addon/components/choose-pgp-key-form.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,7 @@
@textToCopy={{this.pgpKey}}
@color="secondary"
@onError={{(fn (set-flash-message "Clipboard copy failed. The Clipboard API requires a secure context." "danger"))}}
@isTruncated={{true}}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think adding this arg makes things less accessible - is it necessary?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, this was sort of the point of the original -- letting it overflow means the copy button is only clickable if you scroll. The data shown is also something the user already has (they uploaded it) so the contents are less than critical IMO

data-test-pgp-key-copy
@container="#shamir-flow-modal"
/>
Expand Down
1 change: 1 addition & 0 deletions ui/lib/core/addon/components/shamir/dr-token-flow.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@
</p>
</Shamir::Form>
{{else if this.generateWithPGP}}
<MessageError @errors={{this.errors}} />
<ChoosePgpKeyForm
@onCancel={{fn (mut this.generateWithPGP) false}}
@onSubmit={{this.usePgpKey}}
Expand Down
2 changes: 1 addition & 1 deletion ui/tests/helpers/clients.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,7 +120,7 @@ export function overrideResponse(httpStatus, data) {
if (httpStatus === 204) {
return new Response(204, { 'Content-Type': 'application/json' });
}
return new Response(200, { 'Content-Type': 'application/json' }, JSON.stringify(data));
return new Response(httpStatus, { 'Content-Type': 'application/json' }, JSON.stringify(data));
}

export async function dateDropdownSelect(month, year) {
Expand Down
64 changes: 37 additions & 27 deletions ui/tests/integration/components/choose-pgp-key-form-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,17 @@ import { setupRenderingTest } from 'vault/tests/helpers';
import { click, fillIn, render } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';

const CHOOSE_PGP = {
begin: '[data-test-choose-pgp-key-form="begin"]',
description: '[data-test-choose-pgp-key-description]',
toggle: '[data-test-text-toggle]',
useKeyButton: '[data-test-use-pgp-key-button]',
pgpTextArea: '[data-test-pgp-file-textarea]',
confirm: '[data-test-pgp-key-confirm]',
base64Output: '[data-test-pgp-key-copy]',
submit: '[data-test-confirm-pgp-key-submit]',
cancel: '[data-test-use-pgp-key-cancel]',
};
module('Integration | Component | choose-pgp-key-form', function (hooks) {
setupRenderingTest(hooks);

Expand All @@ -22,50 +33,49 @@ module('Integration | Component | choose-pgp-key-form', function (hooks) {
hbs`<ChoosePgpKeyForm @onSubmit={{this.onSubmit}} @onCancel={{this.onCancel}} @formText="my custom form text" @buttonText="Do it" />`
);

assert.dom('[data-test-choose-pgp-key-form="begin"]').exists('PGP key selection form exists');
assert.dom(CHOOSE_PGP.begin).exists('PGP key selection form exists');
assert.dom(CHOOSE_PGP.description).hasText('my custom form text', 'uses custom form text');
await click(CHOOSE_PGP.toggle);
assert.dom(CHOOSE_PGP.useKeyButton).isDisabled('use pgp button is disabled');
await fillIn(CHOOSE_PGP.pgpTextArea, 'base64-pgp-key');
assert.dom(CHOOSE_PGP.useKeyButton).isNotDisabled('use pgp button is no longer disabled');
await click(CHOOSE_PGP.useKeyButton);
assert
.dom('[data-test-choose-pgp-key-description]')
.hasText('my custom form text', 'uses custom form text');
await click('[data-test-text-toggle]');
assert.dom('[data-test-use-pgp-key-button]').isDisabled('use pgp button is disabled');
await fillIn('[data-test-pgp-file-textarea]', 'base64-pgp-key');
assert.dom('[data-test-use-pgp-key-button]').isNotDisabled('use pgp button is no longer disabled');
await click('[data-test-use-pgp-key-button]');
assert
.dom('[data-test-pgp-key-confirm]')
.dom(CHOOSE_PGP.confirm)
.hasText(
'Below is the base-64 encoded PGP Key that will be used. Click the "Do it" button to proceed.',
'Incorporates button text in confirmation'
);
assert.dom('[data-test-pgp-key-copy]').hasText('base64-pgp-key', 'Shows PGP key contents');
assert.dom('[data-test-confirm-pgp-key-submit]').hasText('Do it', 'uses passed buttonText');
await click('[data-test-confirm-pgp-key-submit]');
assert.dom(CHOOSE_PGP.base64Output).hasText('base64-pgp-key', 'Shows PGP key contents');
assert.dom(CHOOSE_PGP.submit).hasText('Do it', 'uses passed buttonText');
await click(CHOOSE_PGP.submit);
});

test('it calls onSubmit correctly', async function (assert) {
const submitSpy = sinon.spy();
this.set('onSubmit', submitSpy);
await render(
hbs`<ChoosePgpKeyForm @onSubmit={{this.onSubmit}} @onCancel={{this.onCancel}} @buttonText="Submit" />`
);

assert.dom('[data-test-choose-pgp-key-form="begin"]').exists('PGP key selection form exists');
assert.dom(CHOOSE_PGP.begin).exists('PGP key selection form exists');
assert
.dom('[data-test-choose-pgp-key-description]')
.dom(CHOOSE_PGP.description)
.hasText('Choose a PGP Key from your computer or paste the contents of one in the form below.');
await click('[data-test-text-toggle]');
assert.dom('[data-test-use-pgp-key-button]').isDisabled('use pgp button is disabled');
await fillIn('[data-test-pgp-file-textarea]', 'base64-pgp-key');
assert.dom('[data-test-use-pgp-key-button]').isNotDisabled('use pgp button is no longer disabled');
await click('[data-test-use-pgp-key-button]');
await click(CHOOSE_PGP.toggle);
assert.dom(CHOOSE_PGP.useKeyButton).isDisabled('use pgp button is disabled');
await fillIn(CHOOSE_PGP.pgpTextArea, 'base64-pgp-key');
assert.dom(CHOOSE_PGP.useKeyButton).isNotDisabled('use pgp button is no longer disabled');
await click(CHOOSE_PGP.useKeyButton);
assert
.dom('[data-test-pgp-key-confirm]')
.dom(CHOOSE_PGP.confirm)
.hasText(
'Below is the base-64 encoded PGP Key that will be used. Click the "Submit" button to proceed.',
'Confirmation text has buttonText'
);
assert.dom('[data-test-pgp-key-copy]').hasText('base64-pgp-key', 'Shows PGP key contents');
assert.dom('[data-test-confirm-pgp-key-submit]').hasText('Submit', 'uses passed buttonText');
await click('[data-test-confirm-pgp-key-submit]');
assert.dom(CHOOSE_PGP.base64Output).hasText('base64-pgp-key', 'Shows PGP key contents');
assert.dom(CHOOSE_PGP.submit).hasText('Submit', 'uses passed buttonText');
await click(CHOOSE_PGP.submit);
assert.ok(submitSpy.calledOnceWith('base64-pgp-key'));
});

Expand All @@ -76,9 +86,9 @@ module('Integration | Component | choose-pgp-key-form', function (hooks) {
hbs`<ChoosePgpKeyForm @onSubmit={{this.onSubmit}} @onCancel={{this.onCancel}} @buttonText="Submit" />`
);

await click('[data-test-text-toggle]');
await fillIn('[data-test-pgp-file-textarea]', 'base64-pgp-key');
await click('[data-test-use-pgp-key-cancel]');
await click(CHOOSE_PGP.toggle);
await fillIn(CHOOSE_PGP.pgpTextArea, 'base64-pgp-key');
await click(CHOOSE_PGP.cancel);
assert.ok(cancelSpy.calledOnce);
});
});
23 changes: 22 additions & 1 deletion ui/tests/integration/components/shamir/dr-token-flow-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,9 +6,11 @@
import sinon from 'sinon';
import { module, test } from 'qunit';
import { setupRenderingTest } from 'vault/tests/helpers';
import { click, fillIn, render } from '@ember/test-helpers';
import { click, fillIn, render, waitFor } from '@ember/test-helpers';
import { hbs } from 'ember-cli-htmlbars';
import { setupMirage } from 'ember-cli-mirage/test-support';
import { overrideResponse } from 'vault/tests/helpers/clients';
import { SELECTORS as GENERAL } from 'vault/tests/helpers/general-selectors';

module('Integration | Component | shamir/dr-token-flow', function (hooks) {
setupRenderingTest(hooks);
Expand Down Expand Up @@ -151,6 +153,25 @@ module('Integration | Component | shamir/dr-token-flow', function (hooks) {
assert.dom('[data-test-dr-token-flow-step="shamir"]').exists('Renders shamir step after PGP key chosen');
});

test('it shows error with pgp key', async function (assert) {
assert.expect(2);
this.server.get('/sys/replication/dr/secondary/generate-operation-token/attempt', function () {
return {};
});
this.server.post('/sys/replication/dr/secondary/generate-operation-token/attempt', () =>
overrideResponse(400, { errors: ['error parsing PGP key'] })
);
await render(hbs`<Shamir::DrTokenFlow @action="generate-dr-operation-token" />`);
await click('[data-test-use-pgp-key-cta]');
assert.dom('[data-test-choose-pgp-key-form="begin"]').exists('PGP form shows');
await click('[data-test-text-toggle]');
await fillIn('[data-test-pgp-file-textarea]', 'some-key-here');
await click('[data-test-use-pgp-key-button]');
await click('[data-test-confirm-pgp-key-submit]');
await waitFor(GENERAL.messageError);
assert.dom(GENERAL.messageError).hasText('Error error parsing PGP key');
});

test('it cancels correctly when generation not started', async function (assert) {
assert.expect(2);
const cancelSpy = sinon.spy();
Expand Down
Loading