Remove ember-cli-clipboard (#3098)

* chore: 🤖 replace CopyButton usage with Hds::Copy::Button

* chore: 🤖 remove ember-cli-clipboard

* test: 💍 fix test by stubbing writeText

The hds copy button uses the browser clipboard api. The writeText
api can fail if the window is not active. This does not happen in
practice because the window has to be active to be clicked by the
user. But in tests with synthetic triggers this can fail.

Stubbing the writeText method is also how hds tests their
component:
https://github.com/hashicorp/design-system/blob/990981b5741f9a6bf28d100c330b7865ba74e506/showcase/tests/integration/components/hds/copy/button/index-test.gts#L20

Author: hashicc

addons/rose/addon/components/rose/code-editor/toolbar/index.hbs

@@ -21,14 +21,11 @@
         data-test-code-editor-toolbar-menu-divider
       ></div>
     {{/if}}
-    <CopyButton
-      @text={{@copyText}}
+    <Hds::Copy::Button
+      @text='Copy code'
+      @textToCopy={{@copyText}}
       @onSuccess={{this.copied}}
-      class='rose-code-editor-toolbar__copy-button'
       data-test-code-editor-toolbar-copy-button
-    >
-      <Hds::Icon @name={{this.copyIconType}} @isInline={{true}} />
-      Copy code
-    </CopyButton>
+    />
   </div>
 </div>

addons/rose/addon/components/rose/code-editor/toolbar/index.js

@@ -4,27 +4,11 @@
  */
 
 import Component from '@glimmer/component';
-import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
-import { later } from '@ember/runloop';
-
-export const COPY_ICON_TYPE = 'clipboard-copy';
-export const COPIED_ICON_TYPE = 'clipboard-checked';
 
 export default class RoseCodeEditorToolbarComponent extends Component {
-  @tracked copyIconType = COPY_ICON_TYPE;
-
   @action
   copied() {
-    let { onCopy } = this.args;
-    let originalIconType = this.copyIconType;
-
-    this.copyIconType = COPIED_ICON_TYPE;
-
-    if (onCopy) {
-      onCopy();
-    }
-    // eslint-disable-next-line ember/no-runloop
-    later(() => (this.copyIconType = originalIconType), 1000);
+    this.args.onCopy?.();
   }
 }

addons/rose/app/styles/rose/components/code-editor/_index.scss

@@ -67,19 +67,4 @@
       height: sizing.rems(xl);
     }
   }
-
-  &__copy-button {
-    border: none;
-    background-color: inherit;
-    cursor: pointer;
-    color: var(--ui-gray-starker-2);
-    margin-right: sizing.rems(xs);
-    margin-left: sizing.rems(s);
-    height: sizing.rems(xl);
-    white-space: nowrap;
-
-    .hds-icon {
-      vertical-align: top;
-    }
-  }
 }

addons/rose/package.json

@@ -37,7 +37,6 @@
     "codemirror": "5.65.7",
     "ember-auto-import": "^2.10.0",
     "ember-cli-babel": "^8.2.0",
-    "ember-cli-clipboard": "^1.2.1",
     "ember-cli-htmlbars": "^6.3.0",
     "ember-cli-sass": "^11.0.1",
     "ember-focus-trap": "^1.0.1",
@@ -87,6 +86,7 @@
     "prettier": "^3.3.3",
     "qunit": "^2.22.0",
     "qunit-dom": "^3.2.1",
+    "sinon": "^19.0.2",
     "stylelint": "^15.11.0",
     "stylelint-config-prettier-scss": "^0.0.1",
     "stylelint-config-standard-scss": "^11.0.0",

addons/rose/tests/integration/components/rose/code-editor/toolbar-test.js

@@ -7,6 +7,7 @@ import { module, test } from 'qunit';
 import { setupRenderingTest } from 'ember-qunit';
 import { click, render } from '@ember/test-helpers';
 import { hbs } from 'ember-cli-htmlbars';
+import sinon from 'sinon';
 
 module('Integration | Component | rose/code-editor/toolbar', function (hooks) {
   setupRenderingTest(hooks);
@@ -43,6 +44,9 @@ module('Integration | Component | rose/code-editor/toolbar', function (hooks) {
   });
 
   test('it calls onCopy callback', async function (assert) {
+    // `writeText` could fail if the document is not in focus which is common during test runs
+    sinon.stub(window.navigator.clipboard, 'writeText').resolves();
+
     const onCopy = () => {
       this.set('called', true);
     };
@@ -53,8 +57,9 @@ module('Integration | Component | rose/code-editor/toolbar', function (hooks) {
     assert.dom(toolbarSelector).isVisible();
     assert.dom(copyButtonSelector).isVisible();
     assert.dom(menuDividerSelector).doesNotExist();
-
     await click(copyButtonSelector);
     assert.true(this.called);
+
+    sinon.restore();
   });
 });