Merge pull request #2525 from hashicorp/hds-3840/clipboard-polyfill

`hds-clipboard`: added `clipboard-polyfill` to support non-secure environments

Author: shleewhite

.changeset/soft-pets-hear.md

@@ -0,0 +1,5 @@
+---
+"@hashicorp/design-system-components": minor
+---
+
+`hds-clipboard`: added `clipboard-polyfill` to support product usage in non-secure environments. This impacts `Copy::Button`, `Copy::Snippet`, `CodeBlock`, and `MaskedInput`.

packages/components/package.json

@@ -42,6 +42,7 @@
     "@floating-ui/dom": "^1.6.3",
     "@hashicorp/design-system-tokens": "^2.2.1",
     "@hashicorp/flight-icons": "^3.7.0",
+    "clipboard-polyfill": "^4.1.0",
     "decorator-transforms": "^1.1.0",
     "ember-a11y-refocus": "^4.1.3",
     "ember-cli-sass": "^11.0.1",

packages/components/src/modifiers/hds-clipboard.ts

@@ -117,17 +117,27 @@ export const writeTextToClipboard = async (
       // DEBUG uncomment this for easy debugging
       // console.log('success', textToCopy);
       return true;
-    } catch (error) {
-      // clipboard write failed
-      // this probably never happens (see comment above) or happens only for very old browsers that don't for which `navigator.clipboard` is undefined
-      warn(
-        `copy action failed, please check your browser‘s permissions: ${JSON.stringify(
-          error
-        )}`,
-        {
-          id: 'hds-clipboard.write-text-to-clipboard.catch-error',
+    } catch {
+      // if it is not a secure context, use the polyfill
+      // to test that this works in a non-secure context, access the port through your IP address (ie. XXX.XXX.X.XXX:4200/)
+      if (!navigator.clipboard) {
+        try {
+          const clipboard = await import('clipboard-polyfill');
+          await clipboard.writeText(textToCopy);
+          return true;
+        } catch (error) {
+          warn(
+            `copy action failed, unable to use clipboard-polyfill: ${JSON.stringify(
+              error
+            )}`,
+            {
+              id: 'hds-clipboard.write-text-to-clipboard.catch-error',
+            }
+          );
+          return false;
         }
-      );
+      }
+
       return false;
     }
   } else {

yarn.lock

@@ -4257,6 +4257,7 @@ __metadata:
     "@typescript-eslint/eslint-plugin": "npm:^8.5.0"
     "@typescript-eslint/parser": "npm:^8.5.0"
     babel-plugin-ember-template-compilation: "npm:^2.2.4"
+    clipboard-polyfill: "npm:^4.1.0"
     concurrently: "npm:^8.2.2"
     decorator-transforms: "npm:^1.1.0"
     ember-a11y-refocus: "npm:^4.1.3"
@@ -10418,6 +10419,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"clipboard-polyfill@npm:^4.1.0":
+  version: 4.1.0
+  resolution: "clipboard-polyfill@npm:4.1.0"
+  checksum: 10/083a91203e9fc628acb356243f14f36912875d92dc9235ebb20fa954dc9feaa23048de9f5d59e5db9497c1d58a6b5827391c1ce3a09c4c03eff39914c60209b1
+  languageName: node
+  linkType: hard
+
 "clipboard@npm:^2.0.11":
   version: 2.0.11
   resolution: "clipboard@npm:2.0.11"