Merge branch 'refactor/codegen' into refactor/ui

components/http/CodegenModal.vue

@@ -86,32 +86,46 @@
   </SmartModal>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import { codegens } from "~/helpers/codegen/codegen"
+import { getRESTRequest } from "~/newstore/RESTSession"
+import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
+import { getCurrentEnvironment } from "~/newstore/environments"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
-    requestCode: { type: String, default: null },
     requestTypeProp: { type: String, default: "curl" },
   },
   data() {
     return {
       codegens,
       copyIcon: "content_copy",
+      request: getRESTRequest(),
     }
   },
   computed: {
     requestType: {
-      get() {
+      get(): string {
         return this.requestTypeProp
       },
-      set(val) {
+      set(val: string) {
         this.$emit("set-request-type", val)
       },
     },
   },
+  watch: {
+    show(goingToShow) {
+      if (goingToShow) {
+        this.request = getRESTRequest()
+      }
+    },
+  },
   methods: {
+    requestCode() {
+      return getEffectiveRESTRequest(this.request, getCurrentEnvironment())
+    },
     hideModal() {
       this.$emit("hide-modal")
     },
@@ -119,15 +133,16 @@ export default {
       this.$emit("handle-import")
     },
     copyRequestCode() {
-      this.$refs.generatedCode.editor.selectAll()
-      this.$refs.generatedCode.editor.focus()
+      ;(this.$refs.generatedCode as any).editor
+        .selectAll()(this.$refs.generatedCode as any)
+        .editor.focus()
       document.execCommand("copy")
       this.copyIcon = "done"
-      this.$toast.success(this.$t("copied_to_clipboard"), {
+      this.$toast.success(this.$t("copied_to_clipboard").toString(), {
         icon: "done",
       })
       setTimeout(() => (this.copyIcon = "content_copy"), 1000)
     },
   },
-}
+})
 </script>

components/http/ImportCurl.vue

@@ -9,6 +9,7 @@
     <template #body>
       <textarea
         id="import-curl"
+        v-model="curl"
         class="textarea"
         autofocus
         rows="8"
@@ -24,18 +25,97 @@
   </SmartModal>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import parseCurlCommand from "~/helpers/curlparser"
+import {
+  HoppRESTHeader,
+  HoppRESTParam,
+  makeRESTRequest,
+} from "~/helpers/types/HoppRESTRequest"
+import { setRESTRequest } from "~/newstore/RESTSession"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
+  emits: ["hide-modal"],
+  data() {
+    return {
+      curl: "",
+    }
+  },
   methods: {
     hideModal() {
       this.$emit("hide-modal")
     },
     handleImport() {
-      this.$emit("handle-import")
+      const text = this.curl
+      try {
+        const parsedCurl = parseCurlCommand(text)
+        const { origin, pathname } = new URL(
+          parsedCurl.url.replace(/"/g, "").replace(/'/g, "")
+        )
+        const endpoint = origin + pathname
+        const headers: HoppRESTHeader[] = []
+        const params: HoppRESTParam[] = []
+        if (parsedCurl.query) {
+          for (const key of Object.keys(parsedCurl.query)) {
+            const val = parsedCurl.query[key]!
+
+            if (Array.isArray(val)) {
+              val.forEach((value) => {
+                params.push({
+                  key,
+                  value,
+                  active: true,
+                })
+              })
+            } else {
+              params.push({
+                key,
+                value: val!,
+                active: true,
+              })
+            }
+          }
+        }
+        if (parsedCurl.headers) {
+          for (const key of Object.keys(parsedCurl.headers)) {
+            headers.push({
+              key,
+              value: parsedCurl.headers[key],
+              active: true,
+            })
+          }
+        }
+        const method = parsedCurl.method.toUpperCase()
+        // let rawInput = false
+        // let rawParams: any | null = null
+
+        // if (parsedCurl.data) {
+        //   rawInput = true
+        //   rawParams = parsedCurl.data
+        // }
+
+        this.showCurlImportModal = false
+
+        setRESTRequest(
+          makeRESTRequest({
+            endpoint,
+            method,
+            params,
+            headers,
+          })
+        )
+      } catch (error) {
+        this.showCurlImportModal = false
+        this.$toast.error(this.$t("curl_invalid_format").toString(), {
+          icon: "error",
+        })
+      }
+      this.hideModal()
     },
   },
-}
+})
 </script>

components/http/Request.vue

@@ -174,6 +174,14 @@
         </tippy>
       </span>
     </div>
+    <HttpImportCurl
+      :show="showCurlImportModal"
+      @hide-modal="showCurlImportModal = false"
+    />
+    <HttpCodegenModal
+      :show="showCodegenModal"
+      @hide-modal="showCodegenModal = false"
+    />
   </div>
 </template>