From 89c5fc2f03a08ad7089e3cbba0774564f51da8b7 Mon Sep 17 00:00:00 2001
From: Sebastien Dionne <survivant00@gmail.com>
Date: Sun, 10 Dec 2023 15:12:04 -0500
Subject: [PATCH] Add copy to clipboard icon

---
 packages/bruno-app/package.json               |  1 +
 .../GenerateCodeItem/CodeView/index.js        | 25 +++++++++++++------
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/packages/bruno-app/package.json b/packages/bruno-app/package.json
index 232cd5cfb..013bbf1c1 100644
--- 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/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
index 18734b288..4ec2b8a60 100644
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
+++ b/packages/bruno-app/src/components/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}
+      />
+    </>
   );
 };