Add copy to clipboard icon

usebruno · Dec 10, 2023 · 89c5fc2 · 89c5fc2
1 parent 8ddec6b
commit 89c5fc2
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 7 deletions.
diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
@@ -55,6 +55,7 @@
     "qs": "^6.11.0",
     "query-string": "^7.0.1",
     "react": "18.2.0",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-dnd": "^16.0.1",
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "18.2.0",

diff --git a/...mponents/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/...mponents/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
@@ -4,6 +4,10 @@ import { HTTPSnippet } from 'httpsnippet';
 import { useTheme } from 'providers/Theme/index';
 import { buildHarRequest } from 'utils/codegenerator/har';
 import { useSelector } from 'react-redux';
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+import toast from 'react-hot-toast';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCopy } from '@fortawesome/free-solid-svg-icons';
 
 const CodeView = ({ language, item }) => {
   const { storedTheme } = useTheme();
@@ -20,13 +24,20 @@ const CodeView = ({ language, item }) => {
   }
 
   return (
-    <CodeEditor
-      readOnly
-      value={snippet}
-      font={get(preferences, 'font.codeFont', 'default')}
-      theme={storedTheme}
-      mode={lang}
-    />
+    <>
+      <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <CopyToClipboard text={snippet} onCopy={() => toast.success('Copied to clipboard!')}>
+          <FontAwesomeIcon icon={faCopy} style={{ cursor: 'pointer' }} />
+        </CopyToClipboard>
+      </div>
+      <CodeEditor
+        readOnly
+        value={snippet}
+        font={get(preferences, 'font.codeFont', 'default')}
+        theme={storedTheme}
+        mode={lang}
+      />
+    </>
   );
 };