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

changelog/26993.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Update PGP display and show error for Generate Operation Token flow with PGP
+```

ui/lib/core/addon/components/choose-pgp-key-form.hbs

@@ -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}}
         data-test-pgp-key-copy
         @container="#shamir-flow-modal"
       />

ui/lib/core/addon/components/shamir/dr-token-flow.hbs

@@ -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}}

ui/tests/helpers/clients.js

@@ -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) {

ui/tests/integration/components/choose-pgp-key-form-test.js

@@ -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);
 
@@ -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'));
   });
 
@@ -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);
   });
 });

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, 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);
@@ -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();