UI: improve DR Operation Token flow with PGP

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

@@ -19,19 +19,22 @@
           )
         }}
       </p>
-      <h4 class="has-text-weight-bold is-size-7 has-bottom-padding-m is-fullwidth">
-        {{concat "PGP Key " this.pgpKeyFile.filename}}
-      </h4>
-      <Hds::Copy::Snippet
+      <Hds::CodeBlock
         class="has-bottom-margin-s"
-        @textToCopy={{this.pgpKey}}
-        @color="secondary"
-        @onError={{(fn
-          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
-        )}}
+        @isStandalone={{true}}
+        @hasLineNumbers={{false}}
+        @hasCopyButton={{true}}
+        @value={{this.pgpKey}}
         data-test-pgp-key-copy
-        @container="#shamir-flow-modal"
-      />
+        as |CB|
+      >
+        <CB.Title>
+          Base64 encoded PGP Key
+        </CB.Title>
+        <CB.Description>
+          Contents of PGP Key "{{this.pgpKeyFile.filename}}"
+        </CB.Description>
+      </Hds::CodeBlock>
     </div>
     <Hds::ButtonSet>
       <Hds::Button

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

@@ -96,6 +96,7 @@
     </p>
   </Shamir::Form>
 {{else if this.generateWithPGP}}
+  <MessageError @errors={{this.errors}} />
   <ChoosePgpKeyForm
     @onCancel={{fn (mut this.generateWithPGP) false}}
     @onSubmit={{this.usePgpKey}}

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] pre',
+  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

@@ -9,6 +9,8 @@ import { setupRenderingTest } from 'vault/tests/helpers';
 import { click, fillIn, find, render, 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,24 @@ module('Integration | Component | shamir/dr-token-flow', function (hooks) {
     );
   });
 
+  test('it shows error with pgp key', async function (assert) {
+    assert.expect(3);
+    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, ['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]');
+    assert.dom(GENERAL.messageError).hasText('error parsing PGP key');
+  });
+
   test('it cancels correctly when generation not started', async function (assert) {
     assert.expect(2);
     const cancelSpy = sinon.spy();