From 6ebfb1f109bee9a85638d6eb3a5aa94e198185b1 Mon Sep 17 00:00:00 2001
From: liyasthomas <liyascthomas@gmail.com>
Date: Sun, 18 Jul 2021 10:03:52 +0530
Subject: [PATCH] feat: init codegen state

---
 components/http/CodegenModal.vue           |  33 ++--
 components/http/ImportCurl.vue             |  88 ++++++++++-
 components/http/Request.vue                |   8 +
 helpers/codegen/{codegen.js => codegen.ts} |  26 +++-
 helpers/{curlparser.js => curlparser.ts}   | 114 +++++++-------
 helpers/types/HoppRESTRequest.ts           |   9 ++
 helpers/utils/EffectiveURL.ts              |  37 +++--
 newstore/RESTSession.ts                    |   4 +
 nuxt.config.js                             |   2 +
 package-lock.json                          | 166 ++++++++++++++++++++-
 package.json                               |   2 +
 pages/index.vue                            |  92 ------------
 12 files changed, 405 insertions(+), 176 deletions(-)
 rename helpers/codegen/{codegen.js => codegen.ts} (79%)
 rename helpers/{curlparser.js => curlparser.ts} (72%)

diff --git a/components/http/CodegenModal.vue b/components/http/CodegenModal.vue
index 85b76dff3..008441ed7 100644
--- a/components/http/CodegenModal.vue
+++ b/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>
diff --git a/components/http/ImportCurl.vue b/components/http/ImportCurl.vue
index 281ce3475..3035a3a3d 100644
--- a/components/http/ImportCurl.vue
+++ b/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>
diff --git a/components/http/Request.vue b/components/http/Request.vue
index ccdfd11ca..f4b9fcf8f 100644
--- a/components/http/Request.vue
+++ b/components/http/Request.vue
@@ -169,6 +169,14 @@
         </tippy>
       </span>
     </div>
+    <HttpImportCurl
+      :show="showCurlImportModal"
+      @hide-modal="showCurlImportModal = false"
+    />
+    <HttpCodegenModal
+      :show="showCodegenModal"
+      @hide-modal="showCodegenModal = false"
+    />
   </div>
 </template>
 
diff --git a/helpers/codegen/codegen.js b/helpers/codegen/codegen.ts
similarity index 79%
rename from helpers/codegen/codegen.js
rename to helpers/codegen/codegen.ts
index 7adc0ba51..220d8934a 100644
--- a/helpers/codegen/codegen.js
+++ b/helpers/codegen/codegen.ts
@@ -1,3 +1,4 @@
+import { HoppRESTHeader, HoppRESTParam } from "../types/HoppRESTRequest"
 import { CLibcurlCodegen } from "./generators/c-libcurl"
 import { CsRestsharpCodegen } from "./generators/cs-restsharp"
 import { CurlCodegen } from "./generators/curl"
@@ -54,7 +55,30 @@ export const codegens = [
   ShellWgetCodegen,
 ]
 
-export function generateCodeWithGenerator(codegenID, context) {
+export type HoppCodegenContext = {
+  name: string
+  method: string
+  uri: string
+  url: string
+  pathName: string
+  auth: any // TODO: Change this
+  httpUser: string | null
+  httpPassword: string | null
+  bearerToken: string | null
+  headers: HoppRESTHeader[]
+  params: HoppRESTParam[]
+  bodyParams: any // TODO: Change this
+  rawParams: string | null
+  rawInput: boolean
+  rawRequestBody: any
+  contentType: string
+  queryString: string
+}
+
+export function generateCodeWithGenerator(
+  codegenID: string,
+  context: HoppCodegenContext
+) {
   if (codegenID) {
     const gen = codegens.find(({ id }) => id === codegenID)
     return gen ? gen.generator(context) : ""
diff --git a/helpers/curlparser.js b/helpers/curlparser.ts
similarity index 72%
rename from helpers/curlparser.js
rename to helpers/curlparser.ts
index d4fdae12b..31a46d274 100644
--- a/helpers/curlparser.js
+++ b/helpers/curlparser.ts
@@ -8,7 +8,7 @@ import parser from "yargs-parser"
  * output this: 'msg1=value1&msg2=value2'
  * @param dataArguments
  */
-const joinDataArguments = (dataArguments) => {
+const joinDataArguments = (dataArguments: string[]) => {
   let data = ""
   dataArguments.forEach((argument, i) => {
     if (i === 0) {
@@ -20,7 +20,49 @@ const joinDataArguments = (dataArguments) => {
   return data
 }
 
-const parseCurlCommand = (curlCommand) => {
+const parseDataFromArguments = (parsedArguments: any) => {
+  if (parsedArguments.data) {
+    return {
+      data: Array.isArray(parsedArguments.data)
+        ? joinDataArguments(parsedArguments.data)
+        : parsedArguments.data,
+      dataArray: Array.isArray(parsedArguments.data)
+        ? parsedArguments.data
+        : null,
+      isDataBinary: false,
+    }
+  } else if (parsedArguments["data-binary"]) {
+    return {
+      data: Array.isArray(parsedArguments["data-binary"])
+        ? joinDataArguments(parsedArguments["data-binary"])
+        : parsedArguments["data-binary"],
+      dataArray: Array.isArray(parsedArguments["data-binary"])
+        ? parsedArguments["data-binary"]
+        : null,
+      isDataBinary: true,
+    }
+  } else if (parsedArguments.d) {
+    return {
+      data: Array.isArray(parsedArguments.d)
+        ? joinDataArguments(parsedArguments.d)
+        : parsedArguments.d,
+      dataArray: Array.isArray(parsedArguments.d) ? parsedArguments.d : null,
+      isDataBinary: false,
+    }
+  } else if (parsedArguments["data-ascii"]) {
+    return {
+      data: Array.isArray(parsedArguments["data-ascii"])
+        ? joinDataArguments(parsedArguments["data-ascii"])
+        : parsedArguments["data-ascii"],
+      dataArray: Array.isArray(parsedArguments["data-ascii"])
+        ? parsedArguments["data-ascii"]
+        : null,
+      isDataBinary: false,
+    }
+  }
+}
+
+const parseCurlCommand = (curlCommand: string) => {
   const newlineFound = /\\/gi.test(curlCommand)
   if (newlineFound) {
     // remove '\' and newlines
@@ -47,9 +89,9 @@ const parseCurlCommand = (curlCommand) => {
       }
     }
   }
-  let headers
+  let headers: any
 
-  const parseHeaders = (headerFieldName) => {
+  const parseHeaders = (headerFieldName: string) => {
     if (parsedArguments[headerFieldName]) {
       if (!headers) {
         headers = {}
@@ -57,7 +99,7 @@ const parseCurlCommand = (curlCommand) => {
       if (!Array.isArray(parsedArguments[headerFieldName])) {
         parsedArguments[headerFieldName] = [parsedArguments[headerFieldName]]
       }
-      parsedArguments[headerFieldName].forEach((header) => {
+      parsedArguments[headerFieldName].forEach((header: string) => {
         if (header.includes("Cookie")) {
           // stupid javascript tricks: closure
           cookieString = header
@@ -91,13 +133,12 @@ const parseCurlCommand = (curlCommand) => {
   if (parsedArguments.cookie) {
     cookieString = parsedArguments.cookie
   }
-  let multipartUploads
+  const multipartUploads: Record<string, string> = {}
   if (parsedArguments.F) {
-    multipartUploads = {}
     if (!Array.isArray(parsedArguments.F)) {
       parsedArguments.F = [parsedArguments.F]
     }
-    parsedArguments.F.forEach((multipartArgument) => {
+    parsedArguments.F.forEach((multipartArgument: string) => {
       // input looks like key=value. value could be json or a file path prepended with an @
       const [key, value] = multipartArgument.split("=", 2)
       multipartUploads[key] = value
@@ -105,7 +146,7 @@ const parseCurlCommand = (curlCommand) => {
   }
   if (cookieString) {
     const cookieParseOptions = {
-      decode: (s) => s,
+      decode: (s: any) => s,
     }
     // separate out cookie headers into separate data structure
     // note: cookie is case insensitive
@@ -169,7 +210,7 @@ const parseCurlCommand = (curlCommand) => {
       delete parsedArguments[option]
     }
   }
-  const query = querystring.parse(urlObject.query, null, null, {
+  const query = querystring.parse(urlObject.query!, null as any, null as any, {
     maxKeys: 10000,
   })
 
@@ -177,51 +218,18 @@ const parseCurlCommand = (curlCommand) => {
   const request = {
     url,
     urlWithoutQuery: URL.format(urlObject),
-  }
-  if (compressed) {
-    request.compressed = true
+    compressed,
+    query,
+    headers,
+    method,
+    cookies,
+    cookieString: cookieString?.replace("Cookie: ", ""),
+    multipartUploads,
+    ...parseDataFromArguments(parsedArguments),
+    auth: parsedArguments.u,
+    user: parsedArguments.user,
   }
 
-  if (Object.keys(query).length > 0) {
-    request.query = query
-  }
-  if (headers) {
-    request.headers = headers
-  }
-  request.method = method
-
-  if (cookies) {
-    request.cookies = cookies
-    request.cookieString = cookieString.replace("Cookie: ", "")
-  }
-  if (multipartUploads) {
-    request.multipartUploads = multipartUploads
-  }
-  if (parsedArguments.data) {
-    request.data = parsedArguments.data
-  } else if (parsedArguments["data-binary"]) {
-    request.data = parsedArguments["data-binary"]
-    request.isDataBinary = true
-  } else if (parsedArguments.d) {
-    request.data = parsedArguments.d
-  } else if (parsedArguments["data-ascii"]) {
-    request.data = parsedArguments["data-ascii"]
-  }
-
-  if (parsedArguments.u) {
-    request.auth = parsedArguments.u
-  }
-  if (parsedArguments.user) {
-    request.auth = parsedArguments.user
-  }
-  if (Array.isArray(request.data)) {
-    request.dataArray = request.data
-    request.data = joinDataArguments(request.data)
-  }
-
-  if (parsedArguments.k || parsedArguments.insecure) {
-    request.insecure = true
-  }
   return request
 }
 
diff --git a/helpers/types/HoppRESTRequest.ts b/helpers/types/HoppRESTRequest.ts
index 9555df4e4..b104b1dbf 100644
--- a/helpers/types/HoppRESTRequest.ts
+++ b/helpers/types/HoppRESTRequest.ts
@@ -21,6 +21,15 @@ export interface HoppRESTRequest {
   headers: HoppRESTHeader[]
 }
 
+export function makeRESTRequest(
+  x: Omit<HoppRESTRequest, "v">
+): HoppRESTRequest {
+  return {
+    ...x,
+    v: RESTReqSchemaVersion,
+  }
+}
+
 export function isHoppRESTRequest(x: any): x is HoppRESTRequest {
   return x && typeof x === "object" && "v" in x
 }
diff --git a/helpers/utils/EffectiveURL.ts b/helpers/utils/EffectiveURL.ts
index aa1b8ef83..f7eb29ed6 100644
--- a/helpers/utils/EffectiveURL.ts
+++ b/helpers/utils/EffectiveURL.ts
@@ -13,6 +13,30 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
   effectiveFinalHeaders: { key: string; value: string }[]
 }
 
+/**
+ * Outputs an executable request format with environment variables applied
+ *
+ * @param request The request to source from
+ * @param environment The environment to apply
+ *
+ * @returns An object with extra fields defining a complete request
+ */
+export function getEffectiveRESTRequest(
+  request: HoppRESTRequest,
+  _environment: Environment
+) {
+  // TODO: Change this
+  return {
+    ...request,
+    effectiveFinalURL: request.endpoint,
+    effectiveFinalHeaders: request.headers.filter(
+      (x) =>
+        x.key !== "" && // Remove empty keys
+        x.active // Only active
+    ),
+  }
+}
+
 /**
  * Creates an Observable Stream that emits HoppRESTRequests whenever
  * the input streams emit a value
@@ -27,17 +51,8 @@ export function getEffectiveRESTRequestStream(
   environment$: Observable<Environment>
 ): Observable<EffectiveHoppRESTRequest> {
   return combineLatest([request$, environment$]).pipe(
-    map(([request, _env]) => {
-      // TODO: Change this
-      return {
-        ...request,
-        effectiveFinalURL: request.endpoint,
-        effectiveFinalHeaders: request.headers.filter(
-          (x) =>
-            x.key !== "" && // Remove empty keys
-            x.active // Only active
-        ),
-      }
+    map(([request, env]) => {
+      return getEffectiveRESTRequest(request, env)
     })
   )
 }
diff --git a/newstore/RESTSession.ts b/newstore/RESTSession.ts
index e9b4a46c8..c2b40038e 100644
--- a/newstore/RESTSession.ts
+++ b/newstore/RESTSession.ts
@@ -304,6 +304,10 @@ const dispatchers = defineDispatchers({
 
 const restSessionStore = new DispatchingStore(defaultRESTSession, dispatchers)
 
+export function getRESTRequest() {
+  return restSessionStore.subject$.value.request
+}
+
 export function setRESTRequest(req: HoppRESTRequest) {
   restSessionStore.dispatch({
     dispatcher: "setRequest",
diff --git a/nuxt.config.js b/nuxt.config.js
index 560273d8e..e4fc2d681 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -127,6 +127,8 @@ export default {
     "@nuxt/typescript-build",
     // https://github.com/nuxt-community/dotenv-module
     "@nuxtjs/dotenv",
+    // https://github.com/nuxt-community/composition-api
+    "@nuxtjs/composition-api/module",
   ],
 
   // Modules (https://go.nuxtjs.dev/config-modules)
diff --git a/package-lock.json b/package-lock.json
index ba4f29f5c..66d9a5601 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "dependencies": {
         "@apollo/client": "^3.3.21",
         "@nuxtjs/axios": "^5.13.6",
+        "@nuxtjs/composition-api": "^0.24.7",
         "@nuxtjs/gtm": "^2.4.0",
         "@nuxtjs/robots": "^2.5.0",
         "@nuxtjs/sitemap": "^2.4.0",
@@ -63,6 +64,7 @@
         "@nuxtjs/stylelint-module": "^4.0.0",
         "@nuxtjs/svg": "^0.1.12",
         "@testing-library/jest-dom": "^5.14.1",
+        "@types/cookie": "^0.4.1",
         "@types/lodash": "^4.14.171",
         "@vue/test-utils": "^1.2.1",
         "babel-core": "^7.0.0-bridge.0",
@@ -5338,6 +5340,63 @@
       "integrity": "sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ==",
       "dev": true
     },
+    "node_modules/@nuxtjs/composition-api": {
+      "version": "0.24.7",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.24.7.tgz",
+      "integrity": "sha512-q633RvsCi3veuGzTSkP/+a55Fn9EZS1APV2GJrdjajnBKKOMNPIXlAC8xAWGcsHE73/Cgf9DfGURQhcFvERRJA==",
+      "dependencies": {
+        "@vue/composition-api": "1.0.0-rc.14",
+        "defu": "^5.0.0",
+        "estree-walker": "^2.0.2",
+        "fs-extra": "^9.1.0",
+        "magic-string": "^0.25.7",
+        "ufo": "^0.7.7",
+        "upath": "^2.0.1"
+      },
+      "peerDependencies": {
+        "@nuxt/vue-app": "^2.15",
+        "nuxt": "^2.15",
+        "vue": "^2"
+      }
+    },
+    "node_modules/@nuxtjs/composition-api/node_modules/defu": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/defu/-/defu-5.0.0.tgz",
+      "integrity": "sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ=="
+    },
+    "node_modules/@nuxtjs/composition-api/node_modules/fs-extra": {
+      "version": "9.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+      "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+      "dependencies": {
+        "at-least-node": "^1.0.0",
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@nuxtjs/composition-api/node_modules/jsonfile": {
+      "version": "6.1.0",
+      "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+      "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+      "dependencies": {
+        "universalify": "^2.0.0"
+      },
+      "optionalDependencies": {
+        "graceful-fs": "^4.1.6"
+      }
+    },
+    "node_modules/@nuxtjs/composition-api/node_modules/universalify": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+      "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ==",
+      "engines": {
+        "node": ">= 10.0.0"
+      }
+    },
     "node_modules/@nuxtjs/dotenv": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/dotenv/-/dotenv-1.4.1.tgz",
@@ -6961,6 +7020,12 @@
       "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.3.tgz",
       "integrity": "sha512-P1bffQfhD3O4LW0ioENXUhZ9OIa0Zn+P7M+pWgkCKaT53wVLSq0mrKksCID/FGHpFhRSxRGhgrQmfhRuzwtKdg=="
     },
+    "node_modules/@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "dev": true
+    },
     "node_modules/@types/cookies": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.6.tgz",
@@ -7778,6 +7843,22 @@
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-2.1.2.tgz",
       "integrity": "sha1-HBH5IY8HYImkfdUS+TxmmaaoHVI="
     },
+    "node_modules/@vue/composition-api": {
+      "version": "1.0.0-rc.14",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.14.tgz",
+      "integrity": "sha512-WKbOiy1zk8loM7ma88fOH0yacOEfMIQb0IZJEq561A+4C8GvLSqVSLT5K1iBVkzzJ07Pha8ntbeWSUQlBhRDKg==",
+      "dependencies": {
+        "tslib": "^2.3.0"
+      },
+      "peerDependencies": {
+        "vue": ">= 2.5 < 3"
+      }
+    },
+    "node_modules/@vue/composition-api/node_modules/tslib": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+      "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+    },
     "node_modules/@vue/test-utils": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.2.1.tgz",
@@ -14312,6 +14393,11 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -21046,7 +21132,6 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
-      "dev": true,
       "dependencies": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -26450,8 +26535,7 @@
     "node_modules/sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
     "node_modules/spdx-correct": {
       "version": "3.1.1",
@@ -35864,6 +35948,52 @@
         }
       }
     },
+    "@nuxtjs/composition-api": {
+      "version": "0.24.7",
+      "resolved": "https://registry.npmjs.org/@nuxtjs/composition-api/-/composition-api-0.24.7.tgz",
+      "integrity": "sha512-q633RvsCi3veuGzTSkP/+a55Fn9EZS1APV2GJrdjajnBKKOMNPIXlAC8xAWGcsHE73/Cgf9DfGURQhcFvERRJA==",
+      "requires": {
+        "@vue/composition-api": "1.0.0-rc.14",
+        "defu": "^5.0.0",
+        "estree-walker": "^2.0.2",
+        "fs-extra": "^9.1.0",
+        "magic-string": "^0.25.7",
+        "ufo": "^0.7.7",
+        "upath": "^2.0.1"
+      },
+      "dependencies": {
+        "defu": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/defu/-/defu-5.0.0.tgz",
+          "integrity": "sha512-VHg73EDeRXlu7oYWRmmrNp/nl7QkdXUxkQQKig0Zk8daNmm84AbGoC8Be6/VVLJEKxn12hR0UBmz8O+xQiAPKQ=="
+        },
+        "fs-extra": {
+          "version": "9.1.0",
+          "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz",
+          "integrity": "sha512-hcg3ZmepS30/7BSFqRvoo3DOMQu7IjqxO5nCDt+zM9XWjb33Wg7ziNT+Qvqbuc3+gWpzO02JubVyk2G4Zvo1OQ==",
+          "requires": {
+            "at-least-node": "^1.0.0",
+            "graceful-fs": "^4.2.0",
+            "jsonfile": "^6.0.1",
+            "universalify": "^2.0.0"
+          }
+        },
+        "jsonfile": {
+          "version": "6.1.0",
+          "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz",
+          "integrity": "sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==",
+          "requires": {
+            "graceful-fs": "^4.1.6",
+            "universalify": "^2.0.0"
+          }
+        },
+        "universalify": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/universalify/-/universalify-2.0.0.tgz",
+          "integrity": "sha512-hAZsKq7Yy11Zu1DE0OzWjw7nnLZmJZYTDZZyEFHZdUhV8FkH5MCfoU1XMaxXovpyW5nq5scPqq0ZDP9Zyl04oQ=="
+        }
+      }
+    },
     "@nuxtjs/dotenv": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/@nuxtjs/dotenv/-/dotenv-1.4.1.tgz",
@@ -37241,6 +37371,12 @@
       "resolved": "https://registry.npmjs.org/@types/content-disposition/-/content-disposition-0.5.3.tgz",
       "integrity": "sha512-P1bffQfhD3O4LW0ioENXUhZ9OIa0Zn+P7M+pWgkCKaT53wVLSq0mrKksCID/FGHpFhRSxRGhgrQmfhRuzwtKdg=="
     },
+    "@types/cookie": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@types/cookie/-/cookie-0.4.1.tgz",
+      "integrity": "sha512-XW/Aa8APYr6jSVVA1y/DEIZX0/GMKLEVekNG727R8cs56ahETkRAy/3DR7+fJyh7oUgGwNQaRfXCun0+KbWY7Q==",
+      "dev": true
+    },
     "@types/cookies": {
       "version": "0.7.6",
       "resolved": "https://registry.npmjs.org/@types/cookies/-/cookies-0.7.6.tgz",
@@ -38024,6 +38160,21 @@
         }
       }
     },
+    "@vue/composition-api": {
+      "version": "1.0.0-rc.14",
+      "resolved": "https://registry.npmjs.org/@vue/composition-api/-/composition-api-1.0.0-rc.14.tgz",
+      "integrity": "sha512-WKbOiy1zk8loM7ma88fOH0yacOEfMIQb0IZJEq561A+4C8GvLSqVSLT5K1iBVkzzJ07Pha8ntbeWSUQlBhRDKg==",
+      "requires": {
+        "tslib": "^2.3.0"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.0",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz",
+          "integrity": "sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg=="
+        }
+      }
+    },
     "@vue/test-utils": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/@vue/test-utils/-/test-utils-1.2.1.tgz",
@@ -43602,6 +43753,11 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw=="
     },
+    "estree-walker": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
+      "integrity": "sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w=="
+    },
     "esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -49143,7 +49299,6 @@
       "version": "0.25.7",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.25.7.tgz",
       "integrity": "sha512-4CrMT5DOHTDk4HYDlzmwu4FVCcIYI8gauveasrdCu2IKIFOJ3f0v/8MDGJCDL9oD2ppz/Av1b0Nj345H9M+XIA==",
-      "dev": true,
       "requires": {
         "sourcemap-codec": "^1.4.4"
       }
@@ -53676,8 +53831,7 @@
     "sourcemap-codec": {
       "version": "1.4.8",
       "resolved": "https://registry.npmjs.org/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz",
-      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
-      "dev": true
+      "integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA=="
     },
     "spdx-correct": {
       "version": "3.1.1",
diff --git a/package.json b/package.json
index 7776d6483..d6ac8ca1d 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
   "dependencies": {
     "@apollo/client": "^3.3.21",
     "@nuxtjs/axios": "^5.13.6",
+    "@nuxtjs/composition-api": "^0.24.7",
     "@nuxtjs/gtm": "^2.4.0",
     "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",
@@ -79,6 +80,7 @@
     "@nuxtjs/stylelint-module": "^4.0.0",
     "@nuxtjs/svg": "^0.1.12",
     "@testing-library/jest-dom": "^5.14.1",
+    "@types/cookie": "^0.4.1",
     "@types/lodash": "^4.14.171",
     "@vue/test-utils": "^1.2.1",
     "babel-core": "^7.0.0-bridge.0",
diff --git a/pages/index.vue b/pages/index.vue
index 493b06c1a..7069932cb 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -448,20 +448,6 @@
       :editing-request="editRequest"
     />
 
-    <HttpImportCurl
-      :show="showCurlImportModal"
-      @hide-modal="showCurlImportModal = false"
-      @handle-import="handleImport"
-    />
-
-    <HttpCodegenModal
-      :show="showCodegenModal"
-      :requestTypeProp="requestType"
-      :requestCode="requestCode"
-      @hide-modal="showCodegenModal = false"
-      @set-request-type="setRequestType"
-    />
-
     <HttpTokenList
       :show="showTokenListModal"
       :tokens="tokens"
@@ -556,7 +542,6 @@ import "splitpanes/dist/splitpanes.css"
 
 import url from "url"
 import querystring from "querystring"
-import parseCurlCommand from "~/helpers/curlparser"
 import getEnvironmentVariablesFromScript from "~/helpers/preRequest"
 import runTestScriptWithVariables from "~/helpers/postwomanTesting"
 import parseTemplateString from "~/helpers/templating"
@@ -1065,41 +1050,6 @@ export default {
         .join("&")
       return result === "" ? "" : `?${result}`
     },
-    requestCode() {
-      let headers = []
-      if (this.preRequestScript || hasPathParams(this.params)) {
-        let environmentVariables = getEnvironmentVariablesFromScript(
-          this.preRequestScript
-        )
-        environmentVariables = addPathParamsToVariables(
-          this.params,
-          environmentVariables
-        )
-        for (let k of this.headers.filter((item) =>
-          item.hasOwnProperty("active") ? item.active == true : true
-        )) {
-          const kParsed = parseTemplateString(k.key, environmentVariables)
-          const valParsed = parseTemplateString(k.value, environmentVariables)
-          headers.push({ key: kParsed, value: valParsed })
-        }
-      }
-
-      return generateCodeWithGenerator(this.requestType, {
-        auth: this.auth,
-        method: this.method,
-        url: this.url,
-        pathName: this.pathName,
-        queryString: this.queryString,
-        httpUser: this.httpUser,
-        httpPassword: this.httpPassword,
-        bearerToken: this.bearerToken,
-        headers,
-        rawInput: this.rawInput,
-        rawParams: this.rawParams,
-        rawRequestBody: this.rawRequestBody,
-        contentType: this.contentType,
-      })
-    },
     tokenReqDetails() {
       const details = {
         oidcDiscoveryUrl: this.oidcDiscoveryUrl,
@@ -1593,48 +1543,6 @@ export default {
         }
       }
     },
-    handleImport() {
-      const { value: text } = document.getElementById("import-curl")
-      try {
-        const parsedCurl = parseCurlCommand(text)
-        const { origin, pathname } = new URL(
-          parsedCurl.url.replace(/"/g, "").replace(/'/g, "")
-        )
-        this.url = origin
-        this.path = pathname
-        this.uri = this.url + this.path
-        this.headers = []
-        if (parsedCurl.query) {
-          for (const key of Object.keys(parsedCurl.query)) {
-            this.$store.commit("addParams", {
-              key,
-              value: parsedCurl.query[key],
-              type: "query",
-              active: true,
-            })
-          }
-        }
-        if (parsedCurl.headers) {
-          for (const key of Object.keys(parsedCurl.headers)) {
-            this.$store.commit("addHeaders", {
-              key,
-              value: parsedCurl.headers[key],
-            })
-          }
-        }
-        this.method = parsedCurl.method.toUpperCase()
-        if (parsedCurl["data"]) {
-          this.rawInput = true
-          this.rawParams = parsedCurl["data"]
-        }
-        this.showCurlImportModal = false
-      } catch (error) {
-        this.showCurlImportModal = false
-        this.$toast.error(this.$t("curl_invalid_format"), {
-          icon: "error",
-        })
-      }
-    },
     switchVisibility() {
       this.passwordFieldType =
         this.passwordFieldType === "password" ? "text" : "password"