addon web Copy as cURL

addon/web/client/package.json

@@ -11,6 +11,8 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "bootstrap": "^4.6.0",
+    "copy-to-clipboard": "^3.3.1",
+    "fetch-to-curl": "^0.5.2",
     "react": "^17.0.2",
     "react-bootstrap": "^1.5.2",
     "react-dom": "^17.0.2",

addon/web/client/src/components/ViewFlow.tsx

@@ -1,4 +1,7 @@
 import React from 'react'
+import Button from 'react-bootstrap/Button'
+import fetchToCurl from 'fetch-to-curl'
+import copy from 'copy-to-clipboard'
 import JSONPretty from 'react-json-pretty'
 import { Flow, IResponse } from '../message'
 import { isTextBody } from '../utils'
@@ -95,6 +98,19 @@ class ViewFlow extends React.Component<Iprops, IState> {
           {
             !(flowTab === 'Headers') ? null :
               <div>
+                <p><Button size="sm" onClick={() => {
+                  const curl = fetchToCurl({
+                    url: flow.request.url,
+                    method: flow.request.method,
+                    headers: Object.keys(flow.request.header).reduce((obj: any, key: string) => {
+                      obj[key] = flow.request.header[key][0]
+                      return obj
+                    }, {}),
+                    body: flow.requestBody(),
+                  })
+                  copy(curl)
+                }}>Copy as cURL</Button></p>
+
                 <div className="header-block">
                   <p>General</p>
                   <div className="header-block-content">

addon/web/client/yarn.lock

@@ -3564,6 +3564,13 @@ copy-descriptor@^0.1.0:
   resolved "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz"
   integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40=
 
+copy-to-clipboard@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae"
+  integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==
+  dependencies:
+    toggle-selection "^1.0.6"
+
 core-js-compat@^3.6.2, core-js-compat@^3.8.0:
   version "3.9.0"
   resolved "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.9.0.tgz"
@@ -5022,6 +5029,11 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fetch-to-curl@^0.5.2:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/fetch-to-curl/-/fetch-to-curl-0.5.2.tgz#9f007ecb3547edeffee49394ff076727dc56d603"
+  integrity sha512-ygmvsJlU+V4GE91lflkRNAJ956xm5MFl6QukIyxkd6yojTxr6gjp4BsYh7hYXlwVw+ffnMlAIXOTWsWJdk017Q==
+
 figgy-pudding@^3.5.1:
   version "3.5.2"
   resolved "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.2.tgz"
@@ -10742,6 +10754,11 @@ to-regex@^3.0.1, to-regex@^3.0.2:
     regex-not "^1.0.2"
     safe-regex "^1.1.0"
 
+toggle-selection@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32"
+  integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI=
+
 toidentifier@1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz"