Backport KV Download Value Stringify Toggle (#23747) to 1.14 (#23769)

* KV Download Value Stringify Toggle (#23747)

* adds stringify toggle to masked-input download modal

* updates stringify toggle copy and adds a test

* adds changelog entry

* removes extra test from backport for masked input

* adds modal wormhole to test

changelog/23747.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: Adds toggle to KV secrets engine value download modal to optionally stringify value in downloaded file
+```

ui/lib/core/addon/components/masked-input.hbs

@@ -62,13 +62,26 @@
     <section class="modal-card-body">
       This download is
       <strong>unencrypted</strong>. Are you sure you want to download this secret data as plaintext?
+
+      <div class="has-top-margin-m">
+        <Hds::Form::Toggle::Field
+          checked={{this.stringifyDownload}}
+          {{on "change" this.toggleStringifyDownload}}
+          data-test-stringify-toggle
+          as |F|
+        >
+          <F.Label>Stringify secret value</F.Label>
+          <F.HelperText>Preserve formatting for JSON values.</F.HelperText>
+        </Hds::Form::Toggle::Field>
+      </div>
     </section>
+
     <footer class="modal-card-foot modal-card-foot-outlined">
       <DownloadButton
         class="button is-primary"
         @filename={{or @name "secret-value"}}
         @data={{@value}}
-        @stringify={{true}}
+        @stringify={{this.stringifyDownload}}
         aria-label="Download secret value"
         @onSuccess={{fn (mut this.modalOpen) false}}
       >

ui/lib/core/addon/components/masked-input.js

@@ -35,6 +35,7 @@ export default class MaskedInputComponent extends Component {
   textareaId = 'textarea-' + guidFor(this);
   @tracked showValue = false;
   @tracked modalOpen = false;
+  @tracked stringifyDownload = false;
 
   constructor() {
     super(...arguments);
@@ -62,7 +63,12 @@ export default class MaskedInputComponent extends Component {
       this.args.onKeyUp(name, value);
     }
   }
+
   @action toggleMask() {
     this.showValue = !this.showValue;
   }
+
+  @action toggleStringifyDownload(event) {
+    this.stringifyDownload = event.target.checked;
+  }
 }

ui/tests/integration/components/masked-input-test.js

@@ -102,4 +102,38 @@ module('Integration | Component | masked input', function (hooks) {
     const unMaskedValue = document.querySelector('.masked-value').value;
     assert.strictEqual(unMaskedValue, this.value);
   });
+
+  test('it should render stringify toggle in download modal', async function (assert) {
+    assert.expect(3);
+
+    // this looks wonky but need a new line in there to test stringify adding escape character
+    this.value = `bar
+`;
+
+    const downloadStub = sinon.stub(this.owner.lookup('service:download'), 'miscExtension');
+    downloadStub.callsFake((fileName, value) => {
+      const firstCall = downloadStub.callCount === 1;
+      const assertVal = firstCall ? this.value : JSON.stringify(this.value);
+      assert.strictEqual(assertVal, value, `Value is ${firstCall ? 'not ' : ''}stringified`);
+      return true;
+    });
+
+    await render(hbs`
+      <div id="modal-wormhole"></div>
+      <MaskedInput
+        @name="key"
+        @value={{this.value}}
+        @displayOnly={{true}}
+        @allowDownload={{true}}
+      />
+    `);
+
+    await click('[data-test-download-icon]');
+    assert.dom('[data-test-stringify-toggle]').isNotChecked('Stringify toggle off as default');
+    await click('[data-test-download-button]');
+
+    await click('[data-test-download-icon]');
+    await click('[data-test-stringify-toggle]');
+    await click('[data-test-download-button]');
+  });
 });