From 469ecf0c598836b4a7a2fc8d94d9fee9ce979a22 Mon Sep 17 00:00:00 2001 From: Chelsea Shaw <82459713+hashishaw@users.noreply.github.com> Date: Tue, 14 May 2024 12:03:58 -0500 Subject: [PATCH] UI: improve DR Operation Token flow with PGP (#26993) --- changelog/26993.txt | 3 + .../addon/components/choose-pgp-key-form.hbs | 1 + .../addon/components/shamir/dr-token-flow.hbs | 1 + .../components/choose-pgp-key-form-test.js | 64 +++++++++++-------- .../components/shamir/dr-token-flow-test.js | 23 ++++++- 5 files changed, 64 insertions(+), 28 deletions(-) create mode 100644 changelog/26993.txt diff --git a/changelog/26993.txt b/changelog/26993.txt new file mode 100644 index 0000000000..35acaa79a8 --- /dev/null +++ b/changelog/26993.txt @@ -0,0 +1,3 @@ +```release-note:improvement +ui: Update PGP display and show error for Generate Operation Token flow with PGP +``` \ No newline at end of file diff --git a/ui/lib/core/addon/components/choose-pgp-key-form.hbs b/ui/lib/core/addon/components/choose-pgp-key-form.hbs index a799ca7360..15edbc9469 100644 --- a/ui/lib/core/addon/components/choose-pgp-key-form.hbs +++ b/ui/lib/core/addon/components/choose-pgp-key-form.hbs @@ -29,6 +29,7 @@ @onError={{(fn (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger") )}} + @isTruncated={{true}} data-test-pgp-key-copy @container="#shamir-flow-modal" /> diff --git a/ui/lib/core/addon/components/shamir/dr-token-flow.hbs b/ui/lib/core/addon/components/shamir/dr-token-flow.hbs index e9b4af6193..7b4b9c301c 100644 --- a/ui/lib/core/addon/components/shamir/dr-token-flow.hbs +++ b/ui/lib/core/addon/components/shamir/dr-token-flow.hbs @@ -96,6 +96,7 @@

{{else if this.generateWithPGP}} + ` ); - 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); @@ -48,24 +58,24 @@ module('Integration | Component | choose-pgp-key-form', function (hooks) { hbs`` ); - 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')); }); @@ -76,9 +86,9 @@ module('Integration | Component | choose-pgp-key-form', function (hooks) { hbs`` ); - 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); }); }); diff --git a/ui/tests/integration/components/shamir/dr-token-flow-test.js b/ui/tests/integration/components/shamir/dr-token-flow-test.js index b3a3032e83..75e370a182 100644 --- a/ui/tests/integration/components/shamir/dr-token-flow-test.js +++ b/ui/tests/integration/components/shamir/dr-token-flow-test.js @@ -6,9 +6,11 @@ import sinon from 'sinon'; import { module, test } from 'qunit'; import { setupRenderingTest } from 'vault/tests/helpers'; -import { click, fillIn, find, render, waitUntil } from '@ember/test-helpers'; +import { click, fillIn, find, render, waitFor, waitUntil } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; import { setupMirage } from 'ember-cli-mirage/test-support'; +import { overrideResponse } from 'vault/tests/helpers/stubs'; +import { GENERAL } from 'vault/tests/helpers/general-selectors'; module('Integration | Component | shamir/dr-token-flow', function (hooks) { setupRenderingTest(hooks); @@ -167,6 +169,25 @@ module('Integration | Component | shamir/dr-token-flow', function (hooks) { ); }); + 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``); + 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();