UI: Fix copy button not working for non-string masked values (#25269)

* Fix masked input copy button for non-strings

* add changelog

changelog/25269.txt

@@ -0,0 +1,3 @@
+```release-note:bug
+ui: Fix copy button not working on masked input when value is not a string
+```

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

@@ -39,9 +39,9 @@
     <Hds::Copy::Button
       @text="Copy"
       @isIconOnly={{true}}
-      @textToCopy={{@value}}
+      @textToCopy={{this.copyValue}}
       class="transparent has-padding-xxs"
-      data-test-copy-button={{or @value true}}
+      data-test-copy-button={{or this.copyValue true}}
     />
   {{/if}}
   {{#if @allowDownload}}

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

@@ -71,4 +71,11 @@ export default class MaskedInputComponent extends Component {
   @action toggleStringifyDownload(event) {
     this.stringifyDownload = event.target.checked;
   }
+
+  get copyValue() {
+    // Value must be a string to be copied
+    if (typeof this.args.value === 'string') return this.args.value;
+    if (typeof this.args.value === 'object') return JSON.stringify(this.args.value);
+    return this.args.value.toString();
+  }
 }

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

@@ -46,8 +46,13 @@ module('Integration | Component | masked input', function (hooks) {
   });
 
   test('it renders a copy button when allowCopy is true', async function (assert) {
-    await render(hbs`<MaskedInput @allowCopy={{true}} />`);
+    this.set('value', { some: 'object' });
+    await render(hbs`<MaskedInput @allowCopy={{true}} @value={{this.value}} />`);
     assert.ok(component.copyButtonIsPresent);
+    await click('[data-test-copy-icon]');
+    assert
+      .dom('flight-icon-clipboard-checked')
+      .exists('clicking copy icon copies value to clipboard', 'copy is successful when value is an object');
   });
 
   test('it renders a download button when allowDownload is true', async function (assert) {
@@ -56,8 +61,6 @@ module('Integration | Component | masked input', function (hooks) {
 
     await click('[data-test-download-icon]');
     assert.ok(component.downloadButtonIsPresent, 'clicking download icon opens modal with download button');
-
-    assert;
   });
 
   test('it shortens all outputs when displayOnly and masked', async function (assert) {