Merge pull request #1200 from survivant/feature/-feature/1198-copy-to-clipboard-codegen-main

Add copy to clipboard icon
2026-06-28 07:04:10 +00:00 · 2023-12-15 00:20:13 +05:30
parent 8ddec6bf0c f8ff305cf4
commit ee2d7a187a
4 changed files with 169 additions and 20 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -2360,15 +2360,21 @@
      }
    },
    "node_modules/@babel/runtime": {
-      "version": "7.20.7",
-      "license": "MIT",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
      "dependencies": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
      },
      "engines": {
        "node": ">=6.9.0"
      }
    },
+    "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
+      "version": "0.14.0",
+      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+    },
    "node_modules/@babel/template": {
      "version": "7.20.7",
      "license": "MIT",
@@ -7331,6 +7337,22 @@
        "node": ">=0.10"
      }
    },
+    "node_modules/date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.21.0"
+      },
+      "engines": {
+        "node": ">=0.11"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/date-fns"
+      }
+    },
    "node_modules/date-now": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -14214,6 +14236,18 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "dependencies": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "react": "^15.3.0 || 16 || 17 || 18"
+      }
+    },
    "node_modules/react-dnd": {
      "version": "16.0.1",
      "license": "MIT",
@@ -14548,6 +14582,7 @@
    },
    "node_modules/regenerator-runtime": {
      "version": "0.13.11",
+      "dev": true,
      "license": "MIT"
    },
    "node_modules/regenerator-transform": {
@@ -14990,8 +15025,9 @@
      }
    },
    "node_modules/rxjs": {
-      "version": "7.8.0",
-      "license": "Apache-2.0",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
      "dependencies": {
        "tslib": "^2.1.0"
      }
@@ -15279,6 +15315,15 @@
        "node": ">=8"
      }
    },
+    "node_modules/shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
    "node_modules/side-channel": {
      "version": "1.0.4",
      "license": "MIT",
@@ -15455,6 +15500,12 @@
        "source-map": "^0.6.0"
      }
    },
+    "node_modules/spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
    "node_modules/spdx-correct": {
      "version": "3.1.1",
      "dev": true,
@@ -16400,6 +16451,15 @@
      "version": "0.0.3",
      "license": "MIT"
    },
+    "node_modules/tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true,
+      "bin": {
+        "tree-kill": "cli.js"
+      }
+    },
    "node_modules/truncate-utf8-bytes": {
      "version": "1.0.2",
      "dev": true,
@@ -17323,8 +17383,9 @@
      }
    },
    "node_modules/yargs": {
-      "version": "17.6.2",
-      "license": "MIT",
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
      "dependencies": {
        "cliui": "^8.0.1",
        "escalade": "^3.1.1",
@@ -17429,6 +17490,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",
@@ -17670,7 +17732,7 @@
    },
    "packages/bruno-electron": {
      "name": "bruno",
-      "version": "v1.3.0",
+      "version": "v1.4.0",
      "dependencies": {
        "@aws-sdk/credential-providers": "^3.425.0",
        "@usebruno/js": "0.9.3",
@@ -19718,9 +19780,18 @@
      }
    },
    "@babel/runtime": {
-      "version": "7.20.7",
+      "version": "7.23.5",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.5.tgz",
+      "integrity": "sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==",
      "requires": {
-        "regenerator-runtime": "^0.13.11"
+        "regenerator-runtime": "^0.14.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.14.0",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
+          "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
+        }
      }
    },
    "@babel/template": {
@@ -21697,6 +21768,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",
@@ -23722,6 +23794,15 @@
        "assert-plus": "^1.0.0"
      }
    },
+    "date-fns": {
+      "version": "2.30.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz",
+      "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.21.0"
+      }
+    },
    "date-now": {
      "version": "0.1.4",
      "resolved": "https://registry.npmjs.org/date-now/-/date-now-0.1.4.tgz",
@@ -28106,6 +28187,15 @@
        "loose-envify": "^1.1.0"
      }
    },
+    "react-copy-to-clipboard": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.1.0.tgz",
+      "integrity": "sha512-k61RsNgAayIJNoy9yDsYzDe/yAZAzEbEgcz3DZMhF686LEyukcE1hzurxe85JandPUG+yTfGVFzuEw3xt8WP/A==",
+      "requires": {
+        "copy-to-clipboard": "^3.3.1",
+        "prop-types": "^15.8.1"
+      }
+    },
    "react-dnd": {
      "version": "16.0.1",
      "requires": {
@@ -28326,7 +28416,8 @@
      }
    },
    "regenerator-runtime": {
-      "version": "0.13.11"
+      "version": "0.13.11",
+      "dev": true
    },
    "regenerator-transform": {
      "version": "0.15.1",
@@ -28621,7 +28712,9 @@
      }
    },
    "rxjs": {
-      "version": "7.8.0",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-7.8.1.tgz",
+      "integrity": "sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==",
      "requires": {
        "tslib": "^2.1.0"
      },
@@ -28813,6 +28906,12 @@
      "version": "3.0.0",
      "dev": true
    },
+    "shell-quote": {
+      "version": "1.8.1",
+      "resolved": "https://registry.npmjs.org/shell-quote/-/shell-quote-1.8.1.tgz",
+      "integrity": "sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==",
+      "dev": true
+    },
    "side-channel": {
      "version": "1.0.4",
      "requires": {
@@ -28932,6 +29031,12 @@
        "source-map": "^0.6.0"
      }
    },
+    "spawn-command": {
+      "version": "0.0.2",
+      "resolved": "https://registry.npmjs.org/spawn-command/-/spawn-command-0.0.2.tgz",
+      "integrity": "sha512-zC8zGoGkmc8J9ndvml8Xksr1Amk9qBujgbF0JAIWO7kXr43w0h/0GJNM/Vustixu+YE8N/MTrQ7N31FvHUACxQ==",
+      "dev": true
+    },
    "spdx-correct": {
      "version": "3.1.1",
      "dev": true,
@@ -29567,6 +29672,12 @@
    "tr46": {
      "version": "0.0.3"
    },
+    "tree-kill": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/tree-kill/-/tree-kill-1.2.2.tgz",
+      "integrity": "sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==",
+      "dev": true
+    },
    "truncate-utf8-bytes": {
      "version": "1.0.2",
      "dev": true,
@@ -30141,7 +30252,9 @@
      "version": "1.10.2"
    },
    "yargs": {
-      "version": "17.6.2",
+      "version": "17.7.2",
+      "resolved": "https://registry.npmjs.org/yargs/-/yargs-17.7.2.tgz",
+      "integrity": "sha512-7dSzzRQ++CKnNI/krKnYRV7JKKPUXMEh61soaHKg9mrWEhzFWhFnxPxGl+69cD1Ou63C13NUPCnmIcrvqCuM6w==",
      "requires": {
        "cliui": "^8.0.1",
        "escalade": "^3.1.1",
--- 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",
--- a/packages/bruno-app/src/components/Sidebar/Collections/Collection/CollectionItem/GenerateCodeItem/CodeView/StyledWrapper.js
+++ b/packages/bruno-app/src/components/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;
--- 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
@@ -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>
+    </>
  );
 };