UI: add message when copy fails (#25479)

* Add flash message when copy fails for copy button

* Add flash message when copy fails for copy snippet

* changelog

* Fix config-ssh onError

changelog/25479.txt

@@ -0,0 +1,3 @@
+```release-note:improvement
+ui: add error message when copy action fails
+```

ui/app/components/policy-form.hbs

@@ -59,6 +59,9 @@
               @text="Copy"
               @isIconOnly={{true}}
               @textToCopy={{@model.policy}}
+              @onError={{(fn
+                (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+              )}}
               class="transparent"
               data-test-copy-button
             />

ui/app/components/sidebar/user-menu.hbs

@@ -53,7 +53,12 @@
                 @isFullWidth={{true}}
                 @container="#container"
                 class="in-dropdown link is-flex-start"
-                {{on "click" (fn (set-flash-message "Token copied!"))}}
+                @onSuccess={{(fn (set-flash-message "Token copied!"))}}
+                @onError={{(fn
+                  (set-flash-message
+                    "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger"
+                  )
+                )}}
                 data-test-copy-button={{this.auth.currentToken}}
               />
             </li>

ui/app/templates/components/configure-ssh-secret.hbs

@@ -23,7 +23,14 @@
   </div>
   <div class="field is-grouped-split box is-fullwidth is-bottomless">
     <Hds::ButtonSet>
-      <Hds::Copy::Button @text="Copy" @textToCopy={{@model.publicKey}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy"
+        @textToCopy={{@model.publicKey}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
       <ConfirmAction
         @buttonText="Delete"
         @buttonColor="secondary"

ui/app/templates/components/console/log-json.hbs

@@ -16,6 +16,9 @@
     @text="Copy"
     @isIconOnly={{true}}
     @textToCopy={{stringify this.content}}
+    @onError={{(fn
+      (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+    )}}
     class="transparent icon-grey-500 top-right-absolute"
   />
 </div>

ui/app/templates/components/console/log-list.hbs

@@ -15,6 +15,9 @@
     @text="Copy"
     @isIconOnly={{true}}
     @textToCopy={{multi-line-join this.list}}
+    @onError={{(fn
+      (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+    )}}
     class="transparent icon-grey-500 top-right-absolute"
   />
 </div>

ui/app/templates/components/console/log-object.hbs

@@ -9,6 +9,9 @@
     @text="Copy"
     @isIconOnly={{true}}
     @textToCopy={{this.columns}}
+    @onError={{(fn
+      (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+    )}}
     class="transparent icon-grey-500 top-right-absolute"
   />
 </div>

ui/app/templates/components/console/log-text.hbs

@@ -9,6 +9,9 @@
     @text="Copy"
     @isIconOnly={{true}}
     @textToCopy={{@content}}
+    @onError={{(fn
+      (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+    )}}
     class="transparent icon-grey-500 top-right-absolute"
   />
 </div>

ui/app/templates/components/control-group-success.hbs

@@ -29,6 +29,9 @@
           @text="Copy"
           @isIconOnly={{true}}
           @textToCopy={{stringify this.unwrapData}}
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
           class="transparent top-right-absolute"
         />
       </div>

ui/app/templates/components/control-group.hbs

@@ -53,6 +53,9 @@
             @text="Copy"
             @isIconOnly={{true}}
             @textToCopy={{this.model.id}}
+            @onError={{(fn
+              (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+            )}}
             class="transparent top-right-absolute"
           />
           <div class="message-body">
@@ -95,7 +98,14 @@
         We’ve saved your request token, but you may want to copy it just in case:
       </p>
       <div>
-        <Hds::Copy::Snippet data-test-token-value @textToCopy={{this.controlGroupResponse.token}} @color="secondary" />
+        <Hds::Copy::Snippet
+          data-test-token-value
+          @textToCopy={{this.controlGroupResponse.token}}
+          @color="secondary"
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
+        />
       </div>
     </div>
   {{/if}}

ui/app/templates/components/generate-credentials.hbs

@@ -81,11 +81,25 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <Hds::Copy::Button @text="Copy credentials" @textToCopy={{this.model.toCreds}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy credentials"
+        @textToCopy={{this.model.toCreds}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
     </div>
     {{#if this.model.leaseId}}
       <div class="control">
-        <Hds::Copy::Button @text="Copy Lease ID" @textToCopy={{this.model.leaseId}} class="secondary" />
+        <Hds::Copy::Button
+          @text="Copy Lease ID"
+          @textToCopy={{this.model.leaseId}}
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
+          class="secondary"
+        />
       </div>
     {{/if}}
     <div class="control">

ui/app/templates/components/tool-hash.hbs

@@ -22,7 +22,14 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <Hds::Copy::Button @text="Copy" @textToCopy={{@sum}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy"
+        @textToCopy={{@sum}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
     </div>
     <div class="control">
       <Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} data-test-tools-back={{true}} />

ui/app/templates/components/tool-random.hbs

@@ -18,7 +18,14 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <Hds::Copy::Button @text="Copy" @textToCopy={{@random_bytes}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy"
+        @textToCopy={{@random_bytes}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
     </div>
     <div class="control">
       <Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />

ui/app/templates/components/tool-rewrap.hbs

@@ -29,7 +29,14 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <Hds::Copy::Button @text="Copy" @textToCopy={{@rewrap_token}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy"
+        @textToCopy={{@rewrap_token}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
     </div>
     <div class="control">
       <Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />

ui/app/templates/components/tool-unwrap.hbs

@@ -43,7 +43,14 @@
     </T.Panel>
   </Hds::Tabs>
   <Hds::ButtonSet class="has-top-padding-m">
-    <Hds::Copy::Button @text="Copy unwrapped data" @textToCopy={{stringify @unwrap_data}} class="primary" />
+    <Hds::Copy::Button
+      @text="Copy unwrapped data"
+      @textToCopy={{stringify @unwrap_data}}
+      @onError={{(fn
+        (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+      )}}
+      class="primary"
+    />
     <Hds::Button {{on "click" this.onClear}} @color="secondary" @text="Back" />
   </Hds::ButtonSet>
 {{else}}

ui/app/templates/components/tool-wrap.hbs

@@ -29,7 +29,14 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <Hds::Copy::Button @text="Copy" @textToCopy={{@token}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy"
+        @textToCopy={{@token}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
     </div>
     <div class="control">
       <Hds::Button @text="Back" @color="secondary" {{on "click" this.onClear}} />

ui/app/templates/components/transit-key-action/datakey.hbs

@@ -86,10 +86,20 @@
           @textToCopy={{@plaintext}}
           @color="secondary"
           @container="#transit-datakey-modal"
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
         />
       {{/if}}
       <h2 class="has-text-weight-semibold is-6">Ciphertext</h2>
-      <Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" @container="#transit-datakey-modal" />
+      <Hds::Copy::Snippet
+        @textToCopy={{@ciphertext}}
+        @color="secondary"
+        @container="#transit-datakey-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+      />
     </M.Body>
     <M.Footer as |F|>
       <Hds::Button @text="Close" {{on "click" F.close}} />

ui/app/templates/components/transit-key-action/decrypt.hbs

@@ -65,6 +65,9 @@
         @textToCopy={{@plaintext}}
         @color="secondary"
         @container="#transit-decrypt-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
         data-test-encrypted-value="plaintext"
       />
     </M.Body>

ui/app/templates/components/transit-key-action/encrypt.hbs

@@ -78,6 +78,9 @@
         @textToCopy={{@ciphertext}}
         @color="secondary"
         @container="#transit-encrypt-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
         data-test-encrypted-value="ciphertext"
       />
     </M.Body>

ui/app/templates/components/transit-key-action/export.hbs

@@ -76,6 +76,9 @@
           @textToCopy={{@wrappedToken}}
           @color="secondary"
           @container="#transit-export-modal"
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
           data-test-encrypted-value="export"
         />
       {{else}}
@@ -88,6 +91,9 @@
             @isIconOnly={{true}}
             @textToCopy={{stringify @keys}}
             @container="#transit-export-modal"
+            @onError={{(fn
+              (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+            )}}
             class="transparent top-right-absolute"
           />
         </div>

ui/app/templates/components/transit-key-action/hmac.hbs

@@ -60,6 +60,9 @@
         @textToCopy={{@hmac}}
         @color="secondary"
         @container="#transit-hmac-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
         data-test-encrypted-value="hmac"
       />
     </M.Body>

ui/app/templates/components/transit-key-action/rewrap.hbs

@@ -68,7 +68,14 @@
     </M.Header>
     <M.Body>
       <h2 class="title is-6">Ciphertext</h2>
-      <Hds::Copy::Snippet @textToCopy={{@ciphertext}} @color="secondary" @container="#transit-rewrap-modal" />
+      <Hds::Copy::Snippet
+        @textToCopy={{@ciphertext}}
+        @color="secondary"
+        @container="#transit-rewrap-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+      />
     </M.Body>
     <M.Footer as |F|>
       <Hds::Button @text="Close" {{on "click" F.close}} />

ui/app/templates/components/transit-key-action/sign.hbs

@@ -129,6 +129,9 @@
         @textToCopy={{@signature}}
         @color="secondary"
         @container="#transit-sign-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
         data-test-encrypted-value="signature"
       />
     </M.Body>

ui/app/templates/vault/cluster/secrets/backend/sign.hbs

@@ -47,11 +47,25 @@
   </div>
   <div class="field is-grouped box is-fullwidth is-bottomless">
     <div class="control">
-      <Hds::Copy::Button @text="Copy key" @textToCopy={{this.model.signedKey}} class="primary" />
+      <Hds::Copy::Button
+        @text="Copy key"
+        @textToCopy={{this.model.signedKey}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        class="primary"
+      />
     </div>
     {{#if this.model.leaseId}}
       <div class="control">
-        <Hds::Copy::Button @text="Copy lease ID" @textToCopy={{this.model.leaseId}} class="secondary" />
+        <Hds::Copy::Button
+          @text="Copy lease ID"
+          @textToCopy={{this.model.leaseId}}
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
+          class="secondary"
+        />
       </div>
     {{/if}}
     <div class="control">

ui/lib/core/addon/components/certificate-card.hbs

@@ -25,6 +25,9 @@
       @text="Copy"
       @isIconOnly={{true}}
       @textToCopy={{this.copyValue}}
+      @onError={{(fn
+        (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+      )}}
       class="transparent"
       data-test-copy-button={{or this.copyValue true}}
     />

ui/lib/core/addon/components/choose-pgp-key-form.hbs

@@ -26,6 +26,9 @@
         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")
+        )}}
         data-test-pgp-key-copy
         @container="#shamir-flow-modal"
       />

ui/lib/core/addon/components/copy-secret-dropdown.hbs

@@ -17,6 +17,9 @@
             @text="Copy JSON"
             @textToCopy={{@clipboardText}}
             @isFullWidth={{true}}
+            @onError={{(fn
+              (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+            )}}
             class="in-dropdown link is-flex-start"
             {{on "click" (action (set-flash-message "JSON Copied!"))}}
             data-test-copy-button={{@clipboardText}}

ui/lib/core/addon/components/info-table-row.hbs

@@ -40,6 +40,9 @@
           @text="Copy"
           @isIconOnly={{true}}
           @textToCopy={{@value}}
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
           class="transparent has-padding-xxs"
           data-test-copy-button={{@value}}
         />
@@ -94,6 +97,11 @@
                       @text="Copy"
                       @isIconOnly={{true}}
                       @textToCopy={{@tooltipText}}
+                      @onError={{(fn
+                        (set-flash-message
+                          "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger"
+                        )
+                      )}}
                       class="transparent white-icon"
                       data-test-tooltip-copy={{@tooltipText}}
                     />

ui/lib/core/addon/components/json-editor.hbs

@@ -39,6 +39,9 @@
             @text="Copy"
             @isIconOnly={{true}}
             @textToCopy={{@value}}
+            @onError={{(fn
+              (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+            )}}
             class="transparent"
             data-test-copy-button={{@value}}
           />

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

@@ -40,6 +40,9 @@
       @text="Copy"
       @isIconOnly={{true}}
       @textToCopy={{this.copyValue}}
+      @onError={{(fn
+        (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+      )}}
       class="transparent has-padding-xxs"
       data-test-copy-button={{or this.copyValue true}}
     />

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

@@ -15,7 +15,14 @@
       <p class="help has-text-grey has-bottom-margin-xs">
         This is a one-time token that will be used to generate the operation token. Please save it.
       </p>
-      <Hds::Copy::Snippet @textToCopy={{this.encodedToken}} @container="#shamir-flow-modal" data-test-shamir-encoded-token />
+      <Hds::Copy::Snippet
+        @textToCopy={{this.encodedToken}}
+        @container="#shamir-flow-modal"
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
+        data-test-shamir-encoded-token
+      />
     </div>
     {{#if this.otp}}
       <div class="has-bottom-margin-xl">
@@ -25,7 +32,13 @@
         <p class="help has-text-grey has-bottom-margin-xs">
           This OTP will be used to decode the generated operation token. Please save it.
         </p>
-        <Hds::Copy::Snippet @textToCopy={{this.otp}} @container="#shamir-flow-modal" />
+        <Hds::Copy::Snippet
+          @textToCopy={{this.otp}}
+          @container="#shamir-flow-modal"
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
+        />
       </div>
     {{/if}}
     <div class="has-bottom-margin-xl">

ui/lib/core/addon/components/shamir/form.hbs

@@ -21,7 +21,15 @@
           <h4 class="hds-alert__title hds-font-weight-semibold">
             One Time Password (otp)
           </h4>
-          <Hds::Copy::Snippet data-test-otp @textToCopy={{@otp}} @color="secondary" @container="#shamir-flow-modal" />
+          <Hds::Copy::Snippet
+            data-test-otp
+            @textToCopy={{@otp}}
+            @color="secondary"
+            @container="#shamir-flow-modal"
+            @onError={{(fn
+              (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+            )}}
+          />
         </A.Description>
       </Hds::Alert>
     {{/if}}

ui/lib/kmip/addon/templates/credentials/show.hbs

@@ -32,6 +32,9 @@
     <Hds::Copy::Button
       @text="Copy certificate"
       @textToCopy={{this.model.certificate}}
+      @onError={{(fn
+        (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+      )}}
       class="toolbar-link is-flex-center"
       data-test-copy-button
     />

ui/lib/kv/addon/components/page/secret/paths.hbs

@@ -25,6 +25,9 @@
         @text="Copy"
         @isIconOnly={{true}}
         @textToCopy={{path.snippet}}
+        @onError={{(fn
+          (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+        )}}
         data-test-copy-button={{path.snippet}}
         class="transparent"
       />

ui/lib/replication/addon/templates/mode/secondaries/add.hbs

@@ -89,6 +89,9 @@
           @textToCopy={{this.token}}
           class="primary"
           @container=".hds-modal"
+          @onError={{(fn
+            (set-flash-message "Clipboard copy failed. Please make sure the browser Clipboard API is allowed." "danger")
+          )}}
           {{on "click" (action "onCopy")}}
         />
         <Hds::Button