feat(ui): Request Panel > Address Bar > Paste curl command into addre…

…ss bar to import it

packages/ui/bundle-size.json

@@ -1,20 +1,20 @@
 {
     "apple-touch-icon.png": 13790,
-    "assets": 5610413,
+    "assets": 5622657,
     "credits.html": 309,
     "css": 3278959,
     "favicon.icns": 358277,
     "favicon.ico": 15086,
     "favicon.png": 32660,
-    "index.html": 1178,
+    "index.html": 1038,
     "manifest.webmanifest": 426,
     "pwa-192x192.png": 14762,
     "pwa-512x512.png": 32943,
     "robots.txt": 23,
     "sw.js": 3241,
     "workbox.xxxxxxxx.js": 14986,
-    "totalSize": 9377053,
-    "totalSizeHuman": "8.94 MB",
-    "totalSizeDiff": 4813,
-    "totalSizeDiffHuman": "4.7 kB"
+    "totalSize": 9389157,
+    "totalSizeHuman": "8.95 MB",
+    "totalSizeDiff": 12104,
+    "totalSizeDiffHuman": "11.82 kB"
 }

packages/ui/package.json

@@ -34,6 +34,7 @@
         "quickjs-emscripten": "^0.20.0",
         "quickjs-emscripten-sync": "^1.2.0",
         "sass": "^1.43.4",
+        "shell-quote": "^1.8.1",
         "vue": "^3.2.41",
         "vue-toast-notification": "^3.0.0",
         "vuex": "^4.0.2"

packages/ui/src/components/RequestPanel.vue

@@ -5,7 +5,7 @@
                 <option v-for="method in methods">{{ method }}</option>
             </select>
             <div class="code-mirror-input-container">
-                <CodeMirrorSingleLine v-model="activeTab.url" placeholder="Enter request URL" :key="'address-bar-' + activeTab._id" @keydown="handleAddressBarKeyDown" />
+                <CodeMirrorSingleLine v-model="activeTab.url" placeholder="Enter request URL" :key="'address-bar-' + activeTab._id" @keydown="handleAddressBarKeyDown" @paste="handleAdressBarPaste" />
             </div>
             <button @click="sendRequest">Send</button>
         </div>
@@ -280,6 +280,7 @@ import CodeMirrorEditor from '@/components/CodeMirrorEditor.vue'
 import RequestPanelTabTitle from '@/components/RequestPanelTabTitle.vue'
 import { emitter } from '@/event-bus'
 import { jsonPrettify } from '../utils/prettify-json'
+import { convertCurlCommandToRestfoxCollection } from '@/helpers'
 
 export default {
     components: {
@@ -329,7 +330,10 @@ export default {
     computed: {
         activeTab() {
             return this.$store.state.activeTab
-        }
+        },
+        activeWorkspace() {
+            return this.$store.state.activeWorkspace
+        },
     },
     watch: {
         activeTab() {
@@ -450,6 +454,24 @@ export default {
                 this.sendRequest()
             }
         },
+        async handleAdressBarPaste(e) {
+            e.preventDefault()
+            e.stopPropagation()
+            const content = e.clipboardData.getData('text/plain').trim()
+            if (content.startsWith('curl')) {
+                if(!confirm(`We've detected that you've pasted a curl command. Do you want to import the curl command into the current request?`)) {
+                    return
+                }
+                const result = await convertCurlCommandToRestfoxCollection(content, this.activeWorkspace._id)
+                if(result.length) {
+                    delete result[0].name
+                    delete result[0]._id
+                    delete result[0]._type
+                    delete result[0].workspaceId
+                    Object.assign(this.activeTab, result[0])
+                }
+            }
+        },
         loadGraphql() {
             if(this.activeTab && this.activeTab.body.mimeType === 'application/graphql') {
                 this.disableGraphqlWatch = true

packages/ui/src/helpers.ts

@@ -6,6 +6,7 @@ import getObjectPathValue from 'lodash.get'
 import setObjectPathValueLodash from 'lodash.set'
 import { HighlightStyle } from '@codemirror/language'
 import { tags } from '@lezer/highlight'
+import { convert as curlConvert } from './parsers/curl'
 
 // From: https://stackoverflow.com/a/67802481/4932305
 export function toTree(array) {
@@ -496,6 +497,12 @@ export function convertInsomniaExportToRestfoxCollection(json, workspaceId) {
                 }
             }
 
+            let parentId = item.parentId
+
+            if(item.parentId === '__WORKSPACE_ID__' && !workspace) {
+                parentId = null
+            }
+
             collection.push({
                 _id: item._id,
                 _type: item._type,
@@ -517,7 +524,7 @@ export function convertInsomniaExportToRestfoxCollection(json, workspaceId) {
                 })) : [],
                 authentication: 'authentication' in item && Object.keys(item.authentication).length > 0 ? item.authentication : { type: 'No Auth' },
                 description: 'description' in item ? item.description : undefined,
-                parentId: item.parentId,
+                parentId,
                 workspaceId
             })
         }
@@ -845,6 +852,17 @@ export async function convertOpenAPIExportToRestfoxCollection(exportString: stri
     return convertInsomniaExportToRestfoxCollection(insomniaExport.data, workspaceId)
 }
 
+export async function convertCurlCommandToRestfoxCollection(curlCommand: string, workspaceId: string) {
+    const insomniaExport = curlConvert(curlCommand)
+    if('body' in insomniaExport[0]) {
+        if('text' in insomniaExport[0].body) {
+            // for some reason we get \\n instead of \n in the text field
+            insomniaExport[0].body.text = insomniaExport[0].body.text.replaceAll('\\n', '\n')
+        }
+    }
+    return convertInsomniaExportToRestfoxCollection({ resources: insomniaExport }, workspaceId)
+}
+
 // From: https://stackoverflow.com/a/66387148/4932305
 export async function fileToJSON(file) {
     return new Promise((resolve, reject) => {