[Admin UI] Adopt HDS::Copy::Snippet (#2141)

* refactor: 💡 Adopt HDS copy snippet

Adopt HDS copy snippet and delete usage of Copyable custom component
within Admin UI.

ui/admin/app/components/auth-methods/auth-method/accounts/account/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='account' @iconSize='large' />
 </h2>
 <p>{{t 'resources.account.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/auth-methods/auth-method/header/index.hbs

@@ -13,10 +13,4 @@
   <DocLink @doc='auth-method' @iconSize='large' />
 </h2>
 <p>{{t 'resources.auth-method.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/auth-methods/auth-method/managed-groups/managed-group/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='managed-groups' @iconSize='large' />
 </h2>
 <p>{{t 'resources.managed-group.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/copyable/index.hbs

@@ -1,35 +0,0 @@
-{{!
-  Copyright (c) HashiCorp, Inc.
-  SPDX-License-Identifier: MPL-2.0
-}}
-
-<span
-  id={{this.id}}
-  class='copyable'
-  {{did-insert this.register}}
-  {{will-destroy this.tearDown}}
->
-
-  {{#if this.copied}}
-    <mark class='copyable-content'>
-      {{yield}}
-    </mark>
-  {{else}}
-    <span class='copyable-content'>
-      {{yield}}
-    </span>
-  {{/if}}
-
-  {{#if this.isClipboardLibrarySupported}}
-    <Rose::Button
-      id={{this.copyableButtonId}}
-      aria-describedby={{this.id}}
-      class='copyable-button'
-      @style='ghost'
-      @iconOnly={{if this.copied this.successIcon this.actionIcon}}
-      title={{if this.copied this.successText this.actionText}}
-    >
-      {{this.actionText}}
-    </Rose::Button>
-  {{/if}}
-</span>

ui/admin/app/components/copyable/index.js

@@ -1,68 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import Component from '@glimmer/component';
-import ClipboardJS from 'clipboard';
-import { action } from '@ember/object';
-import { generateComponentID } from 'rose/utilities/component-auto-id';
-import { tracked } from '@glimmer/tracking';
-import { later } from '@ember/runloop';
-
-export default class CopyableComponent extends Component {
-  // =attributes
-
-  id = generateComponentID();
-  copyableButtonId = `copyable-button-${this.id}`;
-
-  actionIcon = 'flight-icons/svg/clipboard-copy-16';
-  successIcon = 'flight-icons/svg/clipboard-checked-16';
-  actionText = this.args.buttonText;
-  successText = this.args.acknowledgeText;
-
-  @tracked copied = false;
-
-  clipboard = null;
-
-  confirmCopy() {
-    this.copied = true;
-    later(() => (this.copied = false), 1000);
-  }
-
-  /**
-   * Checks for ClipboardJS support.
-   * @return {boolean}
-   */
-  get isClipboardLibrarySupported() {
-    return ClipboardJS.isSupported();
-  }
-
-  // =actions
-
-  /**
-   * Initialize ClipboardJS library and register for it's events.
-   */
-  @action
-  register() {
-    this.tearDown();
-    /* istanbul ignore next */
-    this.clipboard = new ClipboardJS(`#${this.copyableButtonId}`, {
-      text: () => this.args.text,
-    });
-    /* istanbul ignore next */
-    this.clipboard.on('success', (clipboardEvent) => {
-      clipboardEvent.clearSelection();
-      this.confirmCopy();
-    });
-  }
-
-  /**
-   * Destroy ClipboardJS library instance and cancel icon timer.
-   */
-  @action
-  tearDown() {
-    this.clipboard?.destroy();
-    this.clipboard = null;
-  }
-}

ui/admin/app/components/credential-stores/credential-store/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='credential-store' @iconSize='large' />
 </h2>
 <p>{{t 'resources.credential-store.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/groups/group/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='group' @iconSize='large' />
 </h2>
 <p>{{t 'resources.group.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='host-catalog' @iconSize='large' />
 </h2>
 <p>{{t 'resources.host-catalog.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='host-set' @iconSize='large' />
 </h2>
 <p>{{t 'resources.host-set.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/host-sets/host-set/hosts/host/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='host' @iconSize='large' />
 </h2>
 <p>{{t 'resources.host.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/host-catalogs/host-catalog/hosts/host/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='host' @iconSize='large' />
 </h2>
 <p>{{t 'resources.host.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/roles/role/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='role' @iconSize='large' />
 </h2>
 <p>{{t 'resources.role.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/targets/target/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='target' @iconSize='large' />
 </h2>
 <p>{{t 'resources.target.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/components/users/user/header/index.hbs

@@ -8,10 +8,4 @@
   <DocLink @doc='user' @iconSize='large' />
 </h2>
 <p>{{t 'resources.user.description'}}</p>
-<Copyable
-  @text={{@model.id}}
-  @buttonText={{t 'actions.copy-to-clipboard'}}
-  @acknowledgeText={{t 'states.copied'}}
->
-  <code>{{@model.id}}</code>
-</Copyable>
+<Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />

ui/admin/app/styles/app.scss

@@ -174,33 +174,6 @@
   }
 }
 
-.copyable {
-  white-space: nowrap;
-
-  .copyable-button {
-    margin: 0;
-    padding: 0 sizing.rems(xxs);
-    position: relative;
-    top: -2px;
-  }
-
-  mark {
-    animation: fade-background 0.75s linear;
-    background-color: transparent;
-    color: inherit;
-
-    @keyframes fade-background {
-      0% {
-        background-color: var(--action-subtler-1);
-      }
-
-      100% {
-        background-color: transparent;
-      }
-    }
-  }
-}
-
 [class*='session-status-'] {
   color: var(--ui-gray-subtler-2);
 }
@@ -284,29 +257,7 @@
       }
 
       .create-resources-item-controller-copyable {
-        display: flex;
-        flex-direction: column;
-        flex-wrap: wrap;
-        justify-content: center;
-        border: sizing.rems(xxxxs) solid var(--ui-gray-subtler-2);
-        border-radius: sizing.rems(xxxs);
-        color: var(--action);
-        height: (sizing.rems(xs) * 5);
         margin: sizing.rems(xxs) 0 sizing.rems(l) 0;
-
-        .copyable {
-          display: flex;
-          justify-content: space-between;
-          padding: sizing.rems(s);
-
-          span {
-            display: flex;
-          }
-        }
-
-        .copyable-button {
-          top: 0; // This is to override a negative top declared above
-        }
       }
 
       .image-container > svg {

ui/admin/app/templates/authentication-error.hbs

@@ -10,13 +10,7 @@
     <Rose::Notification @style='error' @heading={{t 'auth.titles.flow-error'}}>
       {{t 'auth.descriptions.flow-error'}}
       <br />
-      <Copyable
-        @text={{@model}}
-        @buttonText={{t 'actions.copy-error-detail-to-clipboard'}}
-        @acknowledgeText={{t 'states.copied'}}
-      >
-        {{t 'actions.copy-error-detail-to-clipboard'}}
-      </Copyable>
+      <Hds::Copy::Snippet @textToCopy={{@model}} @color='secondary' />
     </Rose::Notification>
   </Rose::Layout::Centered>
 </main>

ui/admin/app/templates/onboarding/success.hbs

@@ -54,13 +54,7 @@
               'onboarding.success.descriptions.controller'
             }}</span>
           <div class='create-resources-item-controller-copyable'>
-            <Copyable
-              @text={{this.model.clusterUrl}}
-              @buttonText={{t 'actions.copy-to-clipboard'}}
-              @acknowledgeText={{t 'states.copied'}}
-            >
-              <code>{{this.model.clusterUrl}}</code>
-            </Copyable>
+            <Hds::Copy::Snippet @textToCopy={{this.model.clusterUrl}} />
           </div>
 
           <Image @name='targets' />

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/account/set-password.hbs

@@ -18,13 +18,7 @@
   <page.header>
     <h2>{{t 'resources.account.title'}}</h2>
     <p>{{t 'resources.account.messages.set-password.description'}}</p>
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   <page.navigation>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/accounts/index.hbs

@@ -69,13 +69,10 @@
                 <Hds::Badge @text={{B.data.type}} />
               </B.Td>
               <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{B.data.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
               </B.Td>
             </B.Tr>
           </:body>
@@ -154,13 +151,10 @@
                 <Hds::Badge @text={{B.data.type}} />
               </B.Td>
               <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{B.data.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
               </B.Td>
             </B.Tr>
           </:body>

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/index.hbs

@@ -51,13 +51,10 @@
               <B.Td>{{B.data.description}}</B.Td>
               <B.Td><Hds::Badge @text={{B.data.type}} /></B.Td>
               <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{B.data.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
               </B.Td>
             </B.Tr>
           </:body>
@@ -91,13 +88,10 @@
               <B.Td>{{B.data.description}}</B.Td>
               <B.Td><Hds::Badge @text={{B.data.type}} /></B.Td>
               <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{B.data.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
               </B.Td>
               <B.Td>
                 {{truncate-list 'actions.more' B.data.group_names 3}}

ui/admin/app/templates/scopes/scope/auth-methods/auth-method/managed-groups/managed-group/members.hbs

@@ -61,13 +61,10 @@
               <B.Td>{{B.data.full_name}}</B.Td>
               <B.Td><Hds::Badge @text={{B.data.type}} /></B.Td>
               <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{B.data.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
               </B.Td>
             </B.Tr>
           </:body>

ui/admin/app/templates/scopes/scope/auth-methods/index.hbs

@@ -146,13 +146,10 @@
               />
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               {{#if B.data.isPrimary}}

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credential-libraries/credential-library/index.hbs

@@ -15,13 +15,7 @@
       <DocLink @doc='credential-library' @iconSize='large' />
     </h2>
     <p>{{t 'resources.credential-library.description'}}</p>
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   <page.navigation>

ui/admin/app/templates/scopes/scope/credential-stores/credential-store/credentials/credential/index.hbs

@@ -15,13 +15,7 @@
       <DocLink @doc='credential' @iconSize='large' />
     </h2>
     <p>{{t 'resources.credential.description'}}</p>
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   <page.navigation>

ui/admin/app/templates/scopes/scope/edit.hbs

@@ -41,13 +41,7 @@
       </h2>
       <p>{{t 'resources.project.description'}}</p>
     {{/if}}
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   {{#if (can 'read model' @model)}}

ui/admin/app/templates/scopes/scope/groups/group/members.hbs

@@ -54,13 +54,10 @@
               </span>
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               <ScopeBadge @scope={{B.data.scopeModel}} />

ui/admin/app/templates/scopes/scope/groups/index.hbs

@@ -52,13 +52,10 @@
               <p>{{B.data.description}}</p>
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
           </B.Tr>
         </:body>

ui/admin/app/templates/scopes/scope/host-catalogs/host-catalog/hosts/index.hbs

@@ -52,13 +52,10 @@
               <HostCatalogTypeBadge @model={{B.data}} />
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <Hds::Text::Code>{{B.data.id}}</Hds::Text::Code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               <Hds::Text::Code>{{B.data.address}}</Hds::Text::Code>

ui/admin/app/templates/scopes/scope/roles/index.hbs

@@ -54,13 +54,10 @@
               <p>{{B.data.description}}</p>
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
           </B.Tr>
         </:body>

ui/admin/app/templates/scopes/scope/roles/role/grants.hbs

@@ -21,13 +21,7 @@
       <DocLink @doc='role' @iconSize='large' />
     </h2>
     <p>{{t 'resources.role.grant.description'}}</p>
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   <page.actions>

ui/admin/app/templates/scopes/scope/roles/role/principals.hbs

@@ -21,13 +21,7 @@
       <DocLink @doc='role' @iconSize='large' />
     </h2>
     <p>{{t 'resources.role.principal.description'}}</p>
-    <Copyable
-      @text={{@model.role.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.role.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.role.id}} @color='secondary' />
   </page.header>
 
   <page.actions>
@@ -65,13 +59,10 @@
               {{/if}}
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               <PrincipalTypeBadge @model={{B.data}} />

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/channel.hbs

@@ -26,13 +26,10 @@
         @model.channelRecording
       }}
     </h2>
-    <Copyable
-      @text={{@model.channelRecording.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.channelRecording.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet
+      @textToCopy={{@model.channelRecording.id}}
+      @color='secondary'
+    />
   </page.header>
 
   <page.body>
@@ -142,13 +139,10 @@
               @color='boundary'
               @text={{t 'resources.session-recording.title'}}
             >
-              <Copyable
-                @text={{@model.sessionRecording.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{@model.sessionRecording.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{@model.sessionRecording.id}}
+                @color='secondary'
+              />
             </list.Item>
             {{! Connection Recording ID }}
             <list.Item
@@ -156,13 +150,10 @@
               @color='boundary'
               @text={{t 'resources.session-recording.connection.title'}}
             >
-              <Copyable
-                @text={{@model.channelRecording.connection_recording.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{@model.channelRecording.connection_recording.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{@model.channelRecording.connection_recording.id}}
+                @color='secondary'
+              />
             </list.Item>
           </LinkListPanel>
         </div>

ui/admin/app/templates/scopes/scope/session-recordings/session-recording/channels-by-connection/index.hbs

@@ -88,13 +88,10 @@
                     connection
                   }}
                 </p>
-                <Copyable
-                  @text={{connection.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{connection.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{connection.id}}
+                  @color='secondary'
+                />
               </div>
               {{#if connection.channel_recordings}}
                 <Hds::Table
@@ -156,13 +153,10 @@
                         </Rose::MetadataList>
                       </B.Td>
                       <B.Td>
-                        <Copyable
-                          @text={{B.data.id}}
-                          @buttonText={{t 'actions.copy-to-clipboard'}}
-                          @acknowledgeText={{t 'states.copied'}}
-                        >
-                          <code>{{B.data.id}}</code>
-                        </Copyable>
+                        <Hds::Copy::Snippet
+                          @textToCopy={{B.data.id}}
+                          @color='secondary'
+                        />
                       </B.Td>
                       <B.Td align='right'>
                         {{#if (can 'play channel-recording' B.data)}}
@@ -350,13 +344,10 @@
                 @color='boundary'
                 @text={{t 'resources.session-recording.title'}}
               >
-                <Copyable
-                  @text={{@model.sessionRecording.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{@model.sessionRecording.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{@model.sessionRecording.id}}
+                  @color='secondary'
+                />
               </list.Item>
             </LinkListPanel>
           </div>

ui/admin/app/templates/scopes/scope/sessions/index.hbs

@@ -90,13 +90,10 @@
                 @name='flight-icons/svg/entry-point-16'
                 @size='medium'
               />
-              <Copyable
-                @text={{B.data.session.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <Hds::Text::Code>{{B.data.session.id}}</Hds::Text::Code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.session.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               <Hds::Text::Code>{{B.data.user.id}}</Hds::Text::Code>

ui/admin/app/templates/scopes/scope/storage-buckets/index.hbs

@@ -58,13 +58,10 @@
               {{/if}}
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               {{#if B.data.isAWS}}

ui/admin/app/templates/scopes/scope/storage-buckets/storage-bucket/index.hbs

@@ -13,13 +13,7 @@
       {{t 'resources.storage-bucket.title'}}
       <DocLink @doc='storage-bucket' @iconSize='large' />
     </h2>
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   <page.navigation>

ui/admin/app/templates/scopes/scope/targets/index.hbs

@@ -66,13 +66,10 @@
                 {{/if}}
               </B.Td>
               <B.Td>
-                <Copyable
-                  @text={{B.data.id}}
-                  @buttonText={{t 'actions.copy-to-clipboard'}}
-                  @acknowledgeText={{t 'states.copied'}}
-                >
-                  <code>{{B.data.id}}</code>
-                </Copyable>
+                <Hds::Copy::Snippet
+                  @textToCopy={{B.data.id}}
+                  @color='secondary'
+                />
               </B.Td>
             </B.Tr>
           {{else}}
@@ -99,13 +96,10 @@
                   {{/if}}
                 </B.Td>
                 <B.Td>
-                  <Copyable
-                    @text={{B.data.id}}
-                    @buttonText={{t 'actions.copy-to-clipboard'}}
-                    @acknowledgeText={{t 'states.copied'}}
-                  >
-                    <code>{{B.data.id}}</code>
-                  </Copyable>
+                  <Hds::Copy::Snippet
+                    @textToCopy={{B.data.id}}
+                    @color='secondary'
+                  />
                 </B.Td>
               </B.Tr>
             {{/if}}

ui/admin/app/templates/scopes/scope/targets/target/brokered-credential-sources.hbs

@@ -69,13 +69,10 @@
               <CredSourceTypeBadge @model={{B.data}} />
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               {{#if (can 'removeCredentialSources target' @model)}}

ui/admin/app/templates/scopes/scope/targets/target/host-sources.hbs

@@ -59,13 +59,10 @@
               <HostCatalogTypeBadge @model={{B.data.model}} />
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.model.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.model.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.model.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               {{#if (can 'removeHostSources target' @model)}}

ui/admin/app/templates/scopes/scope/targets/target/injected-application-credential-sources.hbs

@@ -73,13 +73,10 @@
               <CredSourceTypeBadge @model={{B.data}} />
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
               {{#if (can 'removeCredentialSources target' @model)}}

ui/admin/app/templates/scopes/scope/users/index.hbs

@@ -57,13 +57,10 @@
               <p>{{B.data.description}}</p>
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
           </B.Tr>
         </:body>

ui/admin/app/templates/scopes/scope/users/user/accounts.hbs

@@ -60,13 +60,10 @@
               />
             </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
             <B.Td>
 

ui/admin/app/templates/scopes/scope/workers/index.hbs

@@ -136,13 +136,10 @@
             <B.Td>{{B.data.release_version}}</B.Td>
             <B.Td>{{B.data.address}} </B.Td>
             <B.Td>
-              <Copyable
-                @text={{B.data.id}}
-                @buttonText={{t 'actions.copy-to-clipboard'}}
-                @acknowledgeText={{t 'states.copied'}}
-              >
-                <code>{{B.data.id}}</code>
-              </Copyable>
+              <Hds::Copy::Snippet
+                @textToCopy={{B.data.id}}
+                @color='secondary'
+              />
             </B.Td>
           </B.Tr>
         </:body>

ui/admin/app/templates/scopes/scope/workers/worker/index.hbs

@@ -15,13 +15,7 @@
       <DocLink @doc='worker' @iconSize='large' />
     </h2>
     <p>{{t 'resources.worker.description'}}</p>
-    <Copyable
-      @text={{@model.id}}
-      @buttonText={{t 'actions.copy-to-clipboard'}}
-      @acknowledgeText={{t 'states.copied'}}
-    >
-      <code>{{@model.id}}</code>
-    </Copyable>
+    <Hds::Copy::Snippet @textToCopy={{@model.id}} @color='secondary' />
   </page.header>
 
   <page.navigation>

ui/admin/ember-cli-build.js

@@ -39,13 +39,6 @@ module.exports = function (defaults) {
     },
   });
 
-  // Only import when in development or test mode
-  if (app.env.match(/(development)|(test)/i)) {
-    app.import('node_modules/clipboard/dist/clipboard.js');
-  } else {
-    app.import('node_modules/clipboard/dist/clipboard.min.js');
-  }
-
   // Use `app.import` to add additional libraries to the generated
   // output files.
   //

ui/admin/package.json

@@ -63,7 +63,6 @@
     "@playwright/test": "^1.30.0",
     "babel-loader": "^8.2.5",
     "broccoli-asset-rev": "^3.0.0",
-    "clipboard": "^2.0.8",
     "concurrently": "^8.0.1",
     "core": "*",
     "doctoc": "^2.2.0",

ui/admin/tests/acceptance/onboarding/success-test.js

@@ -32,8 +32,11 @@ module('Acceptance | onboarding | success', function (hooks) {
   test('check the controller url is copyable', async function (assert) {
     const origin = window.location.origin;
     await visit(urls.success);
-    assert.dom('.copyable-content').isVisible();
-    assert.strictEqual(find('.copyable-content').textContent.trim(), origin);
+    assert.dom('.hds-copy-snippet__text').isVisible();
+    assert.strictEqual(
+      find('.hds-copy-snippet__text').textContent.trim(),
+      origin,
+    );
   });
 
   test('fill the onboarding form and redirect user to target detail when done is clicked', async function (assert) {

ui/admin/tests/integration/components/copyable-test.js

@@ -1,25 +0,0 @@
-/**
- * Copyright (c) HashiCorp, Inc.
- * SPDX-License-Identifier: MPL-2.0
- */
-
-import { module, test } from 'qunit';
-import { setupRenderingTest } from 'ember-qunit';
-import { render, find } from '@ember/test-helpers';
-import { hbs } from 'ember-cli-htmlbars';
-
-module('Integration | Component | copyable', function (hooks) {
-  setupRenderingTest(hooks);
-
-  test('it renders', async function (assert) {
-    this.set('actionText', 'text');
-
-    await render(
-      hbs`<Copyable @buttonText="Copy me" @text="foo">{{this.actionText}}</Copyable>`,
-    );
-
-    assert.ok(find('.copyable'));
-    assert.strictEqual(find('.copyable-content').textContent.trim(), 'text');
-    assert.strictEqual(find('.copyable-button').textContent.trim(), 'Copy me');
-  });
-});