Merge pull request #1200 from survivant/feature/-feature/1198-copy-to…

…-clipboard-codegen-main Add copy to clipboard icon
usebruno · Dec 14, 2023 · ee2d7a1 · ee2d7a1
2 parents 8ddec6b + f8ff305
commit ee2d7a1
Show file tree

Hide file tree

Showing 4 changed files with 169 additions and 20 deletions.
diff --git a/package-lock.json b/package-lock.json
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/.../Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js b/.../Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
@@ -0,0 +1,20 @@
+import styled from 'styled-components';
+
+const StyledWrapper = styled.div`
+  position: relative;
+
+  .copy-to-clipboard {
+    position: absolute;
+    cursor: pointer;
+    top: 0px;
+    right: 0px;
+    z-index: 10;
+    opacity: 0.5;
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+`;
+
+export default StyledWrapper;
diff --git a/...mponents/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js b/...mponents/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/index.js
@@ -2,8 +2,12 @@ import CodeEditor from 'components/CodeEditor/index';
 import get from 'lodash/get';
 import { HTTPSnippet } from 'httpsnippet';
 import { useTheme } from 'providers/Theme/index';
+import StyledWrapper from './StyledWrapper';
 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 { IconCopy } from '@tabler/icons';
 
 const CodeView = ({ language, item }) => {
   const { storedTheme } = useTheme();
@@ -20,13 +24,24 @@ const CodeView = ({ language, item }) => {
   }
 
   return (
-    <CodeEditor
-      readOnly
-      value={snippet}
-      font={get(preferences, 'font.codeFont', 'default')}
-      theme={storedTheme}
-      mode={lang}
-    />
+    <>
+      <StyledWrapper>
+        <CopyToClipboard
+          className="copy-to-clipboard"
+          text={snippet}
+          onCopy={() => toast.success('Copied to clipboard!')}
+        >
+          <IconCopy size={25} strokeWidth={1.5} />
+        </CopyToClipboard>
+        <CodeEditor
+          readOnly
+          value={snippet}
+          font={get(preferences, 'font.codeFont', 'default')}
+          theme={storedTheme}
+          mode={lang}
+        />
+      </StyledWrapper>
+    </>
   );
 };