feat: import cURL on paste (#2037)

* feat: import cURL on paste

* feat: import cURL on paste

* feat: pasting cURL command on url field does not paste it in

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-app/components/http/ImportCurl.vue

@@ -11,6 +11,7 @@
     <template #footer>
       <span class="flex">
         <ButtonPrimary
+          ref="importButton"
           :label="`${t('import.title')}`"
           @click.native="handleImport"
         />
@@ -24,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from "@nuxtjs/composition-api"
+import { ref, watch } from "@nuxtjs/composition-api"
 import {
   HoppRESTHeader,
   HoppRESTParam,
@@ -43,6 +44,8 @@ const curl = ref("")
 
 const curlEditor = ref<any | null>(null)
 
+const props = defineProps<{ show: boolean; text: string }>()
+
 useCodemirror(curlEditor, curl, {
   extendedEditorConfig: {
     mode: "application/x-sh",
@@ -53,7 +56,15 @@ useCodemirror(curlEditor, curl, {
   environmentHighlights: false,
 })
 
-defineProps<{ show: boolean }>()
+watch(
+  () => props.show,
+  () => {
+    if (props.show) {
+      curl.value = props.text.toString()
+    }
+  },
+  { immediate: false }
+)
 
 const emit = defineEmits<{
   (e: "hide-modal"): void

packages/hoppscotch-app/components/http/Request.vue

@@ -52,6 +52,7 @@
             focus-visible:bg-transparent
           "
           @enter="newSendRequest()"
+          @paste="onPasteUrl($event)"
         />
       </div>
     </div>
@@ -196,6 +197,7 @@
       </span>
     </div>
     <HttpImportCurl
+      :text="curlText"
       :show="showCurlImportModal"
       @hide-modal="showCurlImportModal = false"
     />
@@ -267,6 +269,7 @@ const nuxt = useNuxt()
 const { subscribeToStream } = useStreamSubscriber()
 
 const newEndpoint = useStream(restEndpoint$, "", setRESTEndpoint)
+const curlText = ref("")
 const newMethod = useStream(restMethod$, "", updateRESTMethod)
 
 const loading = ref(false)
@@ -342,6 +345,27 @@ const newSendRequest = async () => {
   }
 }
 
+const onPasteUrl = (e: { event: ClipboardEvent; previousValue: string }) => {
+  if (!e) return
+
+  const clipboardData = e.event.clipboardData
+
+  const pastedData = clipboardData?.getData("Text")
+
+  if (!pastedData) return
+
+  if (isCURL(pastedData)) {
+    e.event.preventDefault()
+    showCurlImportModal.value = true
+    curlText.value = pastedData
+    newEndpoint.value = e.previousValue
+  }
+}
+
+function isCURL(curl: string) {
+  return curl.includes("curl ")
+}
+
 const cancelRequest = () => {
   loading.value = false
   updateRESTResponse(null)

packages/hoppscotch-app/components/smart/EnvInput.vue

@@ -16,6 +16,7 @@
       @keyup="$emit('keyup', $event)"
       @click="$emit('click', $event)"
       @keydown="$emit('keydown', $event)"
+      @paste="handlePaste"
     ></div>
   </div>
 </template>
@@ -113,6 +114,9 @@ export default defineComponent({
   },
 
   methods: {
+    handlePaste(ev) {
+      this.$emit("paste", { event: ev, previousValue: this.internalValue })
+    },
     handleChange() {
       this.debouncedHandler = debounce(function () {
         if (this.internalValue !== this.$refs.editor.textContent) {

packages/hoppscotch-app/helpers/curlparser.ts

@@ -69,6 +69,11 @@ const parseCurlCommand = (curlCommand: string) => {
     curlCommand = curlCommand.replace(/\\/gi, "")
     curlCommand = curlCommand.replace(/\n/g, "")
   }
+  // replace string for insomnia
+  curlCommand = curlCommand.replace(/--request /, "-X ")
+  curlCommand = curlCommand.replace(/--header /, "-H ")
+  curlCommand = curlCommand.replace(/--url /, " ")
+
   // yargs parses -XPOST as separate arguments. just prescreen for it.
   curlCommand = curlCommand.replace(/ -XPOST/, " -X POST")
   curlCommand = curlCommand.replace(/ -XGET/, " -X GET")