[Bug] fix copy as curl (#1472)

* [Bug] fix copy as curl Copy as curl doesn't work in Dev Tools console due to usage of a deprecated method: https://developer.mozilla.org/en-US/docs/Web/API/Document/queryCommandSupported#browser_compatibility Issue Resolved: #1471 Signed-off-by: Kawika Avilla <[email protected]> * Adds browser compatibility comment Signed-off-by: Bishoy Boktor <[email protected]> Co-authored-by: Bishoy Boktor <[email protected]>
opensearch-project · Apr 21, 2022 · 376ba8c · 376ba8c
1 parent b7ca138
commit 376ba8c
Showing 1 changed file with 18 additions and 10 deletions.
diff --git a/src/plugins/console/public/application/components/console_menu.tsx b/src/plugins/console/public/application/components/console_menu.tsx
@@ -64,8 +64,8 @@ export class ConsoleMenu extends Component<Props, State> {
     });
   };
 
-  copyAsCurl() {
-    this.copyText(this.state.curlCode);
+  async copyAsCurl() {
+    await this.copyText(this.state.curlCode);
     const { addNotification } = this.props;
     if (addNotification) {
       addNotification({
@@ -76,13 +76,20 @@ export class ConsoleMenu extends Component<Props, State> {
     }
   }
 
-  copyText(text: string) {
-    const textField = document.createElement('textarea');
-    textField.innerText = text;
-    document.body.appendChild(textField);
-    textField.select();
-    document.execCommand('copy');
-    textField.remove();
+  async copyText(text: string) {
+    if (window.navigator?.clipboard) {
+      /**
+       * Browser Compatibility Chart
+       *
+       * Chrome: 66
+       * Edge: 79
+       * Firefox: 63
+       * Opera: 53
+       * Internet Explorer: Not supported
+       *
+       */
+      await window.navigator.clipboard.writeText(text);
+    }
   }
 
   onButtonClick = () => {
@@ -130,7 +137,8 @@ export class ConsoleMenu extends Component<Props, State> {
       <EuiContextMenuItem
         key="Copy as cURL"
         id="ConCopyAsCurl"
-        disabled={!document.queryCommandSupported('copy')}
+        data-test-subj="copyAsCurl"
+        disabled={!window.navigator?.clipboard}
         onClick={() => {
           this.closePopover();
           this.copyAsCurl();