refactor: urlencoded key value pair system

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

@@ -50,6 +50,9 @@
       </span>
     </div>
     <HttpBodyParameters v-if="contentType === 'multipart/form-data'" />
+    <HttpURLEncodedParams
+      v-if="contentType === 'application/x-www-form-urlencoded'"
+    />
     <HttpRawBody v-else-if="contentType !== null" :content-type="contentType" />
     <div
       v-if="contentType == null"

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

@@ -0,0 +1,342 @@
+<template>
+  <div>
+    <div
+      class="sticky z-10 flex items-center justify-between flex-1 pl-4 border-b bg-primary border-dividerLight top-upperSecondaryStickyFold"
+    >
+      <label class="font-semibold text-secondaryLight">
+        {{ t("request.header_list") }}
+      </label>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          to="https://docs.hoppscotch.io/features/headers"
+          blank
+          :title="t('app.wiki')"
+          svg="help-circle"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('action.clear_all')"
+          svg="trash-2"
+          @click.native="clearContent()"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('state.bulk_mode')"
+          svg="edit"
+          :class="{ '!text-accent': bulkMode }"
+          @click.native="bulkMode = !bulkMode"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="t('add.new')"
+          svg="plus"
+          :disabled="bulkMode"
+          @click.native="addHeader"
+        />
+      </div>
+    </div>
+    <div v-if="bulkMode" ref="bulkEditor"></div>
+    <div v-else>
+      <div
+        v-for="(header, index) in workingUrlEncodedParams"
+        :key="`header-${index}`"
+        class="flex border-b divide-x divide-dividerLight border-dividerLight"
+      >
+        <SmartAutoComplete
+          :placeholder="`${t('count.header', { count: index + 1 })}`"
+          :source="commonHeaders"
+          :spellcheck="false"
+          :value="header.key"
+          autofocus
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+            truncate
+          "
+          class="flex-1 !flex"
+          @input="
+            updateHeader(index, {
+              key: $event,
+              value: header.value,
+              active: header.active,
+            })
+          "
+        />
+        <SmartEnvInput
+          v-model="header.value"
+          :placeholder="`${t('count.value', { count: index + 1 })}`"
+          styles="
+            bg-transparent
+            flex
+            flex-1
+            py-1
+            px-4
+          "
+          @change="
+            updateHeader(index, {
+              key: header.key,
+              value: $event,
+              active: header.active,
+            })
+          "
+        />
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? t('action.turn_off')
+                  : t('action.turn_on')
+                : t('action.turn_off')
+            "
+            :svg="
+              header.hasOwnProperty('active')
+                ? header.active
+                  ? 'check-circle'
+                  : 'circle'
+                : 'check-circle'
+            "
+            color="green"
+            @click.native="
+              updateHeader(index, {
+                key: header.key,
+                value: header.value,
+                active: !header.active,
+              })
+            "
+          />
+        </span>
+        <span>
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            :title="t('action.remove')"
+            svg="trash"
+            color="red"
+            @click.native="deleteHeader(index)"
+          />
+        </span>
+      </div>
+      <div
+        v-if="workingUrlEncodedParams.length === 0"
+        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+      >
+        <img
+          :src="`/images/states/${$colorMode.value}/add_category.svg`"
+          loading="lazy"
+          class="inline-flex flex-col object-contain object-center w-16 h-16 my-4"
+          :alt="`${t('empty.headers')}`"
+        />
+        <span class="pb-4 text-center">
+          {{ t("empty.headers") }}
+        </span>
+        <ButtonSecondary
+          filled
+          :label="`${t('add.new')}`"
+          svg="plus"
+          class="mb-4"
+          @click.native="addHeader"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Ref, ref, watch } from "@nuxtjs/composition-api"
+import isEqual from "lodash/isEqual"
+import clone from "lodash/clone"
+import { HoppRESTHeader } from "@hoppscotch/data"
+import { useCodemirror } from "~/helpers/editor/codemirror"
+import { restHeaders$, setRESTHeaders } from "~/newstore/RESTSession"
+import { commonHeaders } from "~/helpers/headers"
+import { useI18n, useStream, useToast } from "~/helpers/utils/composables"
+
+const t = useI18n()
+const toast = useToast()
+
+const bulkMode = ref(false)
+const bulkUrlEncodedParams = ref("")
+const bulkEditor = ref<any | null>(null)
+
+const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
+
+useCodemirror(bulkEditor, bulkUrlEncodedParams, {
+  extendedEditorConfig: {
+    mode: "text/x-yaml",
+    placeholder: `${t("state.bulk_mode_placeholder")}`,
+  },
+  linter: null,
+  completer: null,
+  environmentHighlights: true,
+})
+
+// The functional headers list (the headers actually in the system)
+const headers = useStream(restHeaders$, [], setRESTHeaders) as Ref<
+  HoppRESTHeader[]
+>
+
+// The UI representation of the headers list (has the empty end header)
+const workingUrlEncodedParams = ref<HoppRESTHeader[]>([
+  {
+    key: "",
+    value: "",
+    active: true,
+  },
+])
+
+// Rule: Working Headers always have one empty header or the last element is always an empty header
+watch(workingUrlEncodedParams, (headersList) => {
+  if (
+    headersList.length > 0 &&
+    headersList[headersList.length - 1].key !== ""
+  ) {
+    workingUrlEncodedParams.value.push({
+      key: "",
+      value: "",
+      active: true,
+    })
+  }
+})
+
+// Sync logic between headers and working headers
+watch(
+  headers,
+  (newHeadersList) => {
+    // Sync should overwrite working headers
+    const filteredWorkingUrlEncodedParams =
+      workingUrlEncodedParams.value.filter((e) => e.key !== "")
+
+    if (!isEqual(newHeadersList, filteredWorkingUrlEncodedParams)) {
+      workingUrlEncodedParams.value = newHeadersList
+    }
+  },
+  { immediate: true }
+)
+
+watch(workingUrlEncodedParams, (newWorkingUrlEncodedParams) => {
+  const fixedHeaders = newWorkingUrlEncodedParams.filter((e) => e.key !== "")
+  if (!isEqual(headers.value, fixedHeaders)) {
+    headers.value = fixedHeaders
+  }
+})
+
+// Bulk Editor Syncing with Working Headers
+watch(bulkUrlEncodedParams, () => {
+  try {
+    const transformation = bulkUrlEncodedParams.value
+      .split("\n")
+      .filter((x) => x.trim().length > 0 && x.includes(":"))
+      .map((item) => ({
+        key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
+        value: item.substring(item.indexOf(":") + 1).trimLeft(),
+        active: !item.trim().startsWith("#"),
+      }))
+
+    const filteredHeaders = workingUrlEncodedParams.value.filter(
+      (x) => x.key !== ""
+    )
+
+    if (!isEqual(filteredHeaders, transformation)) {
+      workingUrlEncodedParams.value = transformation
+    }
+  } catch (e) {
+    toast.error(`${t("error.something_went_wrong")}`)
+    console.error(e)
+  }
+})
+
+watch(workingUrlEncodedParams, (newHeadersList) => {
+  // If we are in bulk mode, don't apply direct changes
+  if (bulkMode.value) return
+
+  try {
+    const currentBulkUrlEncodedParams = bulkUrlEncodedParams.value
+      .split("\n")
+      .map((item) => ({
+        key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
+        value: item.substring(item.indexOf(":") + 1).trimLeft(),
+        active: !item.trim().startsWith("#"),
+      }))
+
+    const filteredHeaders = newHeadersList.filter((x) => x.key !== "")
+
+    if (!isEqual(currentBulkUrlEncodedParams, filteredHeaders)) {
+      bulkUrlEncodedParams.value = filteredHeaders
+        .map((header) => {
+          return `${header.active ? "" : "#"}${header.key}: ${header.value}`
+        })
+        .join("\n")
+    }
+  } catch (e) {
+    toast.error(`${t("error.something_went_wrong")}`)
+    console.error(e)
+  }
+})
+
+const addHeader = () => {
+  workingUrlEncodedParams.value.push({
+    key: "",
+    value: "",
+    active: true,
+  })
+}
+
+const updateHeader = (index: number, header: HoppRESTHeader) => {
+  workingUrlEncodedParams.value = workingUrlEncodedParams.value.map((h, i) =>
+    i === index ? header : h
+  )
+}
+
+const deleteHeader = (index: number) => {
+  const headersBeforeDeletion = clone(workingUrlEncodedParams.value)
+
+  if (
+    !(
+      headersBeforeDeletion.length > 0 &&
+      index === headersBeforeDeletion.length - 1
+    )
+  ) {
+    if (deletionToast.value) {
+      deletionToast.value.goAway(0)
+      deletionToast.value = null
+    }
+
+    deletionToast.value = toast.success(`${t("state.deleted")}`, {
+      action: [
+        {
+          text: `${t("action.undo")}`,
+          onClick: (_, toastObject) => {
+            workingUrlEncodedParams.value = headersBeforeDeletion
+            toastObject.goAway(0)
+            deletionToast.value = null
+          },
+        },
+      ],
+
+      onComplete: () => {
+        deletionToast.value = null
+      },
+    })
+  }
+
+  workingUrlEncodedParams.value.splice(index, 1)
+}
+
+const clearContent = () => {
+  // set headers list to the initial state
+  workingUrlEncodedParams.value = [
+    {
+      key: "",
+      value: "",
+      active: true,
+    },
+  ]
+
+  bulkUrlEncodedParams.value = ""
+}
+</script>

packages/hoppscotch-app/helpers/functional/array.ts

@@ -0,0 +1,2 @@
+export const stringArrayJoin = (separator: string) => (arr: string[]) =>
+  arr.join(separator)

packages/hoppscotch-app/helpers/rawKeyValue.ts

@@ -0,0 +1,39 @@
+import * as A from "fp-ts/Array"
+import * as RA from "fp-ts/ReadonlyArray"
+import * as S from "fp-ts/string"
+import { pipe, flow } from "fp-ts/function"
+import { stringArrayJoin } from "./functional/array"
+
+export type RawKeyValueEntry = {
+  key: string
+  value: string
+  active: boolean
+}
+
+const parseRawKeyValueEntry = (str: string): RawKeyValueEntry => {
+  const trimmed = str.trim()
+  const inactive = trimmed.startsWith("#")
+
+  const [key, value] = trimmed.split(":").map(S.trim)
+
+  return {
+    key: inactive ? key.replaceAll(/^#+\s*/g, "") : key, // Remove comment hash and early space
+    value,
+    active: !inactive,
+  }
+}
+
+export const parseRawKeyValueEntries = flow(
+  S.split("\n"),
+  RA.map(parseRawKeyValueEntry),
+  RA.toArray
+)
+
+export const rawKeyValueEntriesToString = (entries: RawKeyValueEntry[]) =>
+  pipe(
+    entries,
+    A.map(({ key, value, active }) =>
+      active ? `${key}: ${value}` : `# ${key}: ${value}`
+    ),
+    stringArrayJoin("\n")
+  )

packages/hoppscotch-app/helpers/utils/EffectiveURL.ts

@@ -1,7 +1,6 @@
-import * as RA from "fp-ts/ReadonlyArray"
+import * as A from "fp-ts/Array"
-import * as S from "fp-ts/string"
 import qs from "qs"
-import { pipe, flow } from "fp-ts/function"
+import { pipe } from "fp-ts/function"
 import { combineLatest, Observable } from "rxjs"
 import { map } from "rxjs/operators"
 import {
@@ -11,6 +10,7 @@ import {
 } from "@hoppscotch/data"
 import { parseTemplateString, parseBodyEnvVariables } from "../templating"
 import { tupleToRecord } from "../functional/record"
+import { parseRawKeyValueEntries } from "../rawKeyValue"
 import { Environment, getGlobalVariables } from "~/newstore/environments"
 
 export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
@@ -66,18 +66,15 @@ function getFinalBodyFromRequest(
   if (request.body.contentType === "application/x-www-form-urlencoded") {
     return pipe(
       request.body.body,
-      S.split("\n"),
+      parseRawKeyValueEntries,
-      RA.map(
-        flow(
-          // Define how each lines are parsed
 
-          S.split(":"), // Split by ":"
+      // Filter out active
-          RA.map(S.trim), // Remove trailing spaces in key/value begins and ends
+      A.filter((x) => x.active),
-          ([key, value]) => [key, value ?? ""] as [string, string] // Add a default empty by default
+      // Convert to tuple
-        )
+      A.map(({ key, value }) => [key, value] as [string, string]),
-      ),
+      // Tuple to Record object
-      RA.toArray,
+      tupleToRecord,
-      tupleToRecord, // Convert the tuple to a record
+      // Stringify
       qs.stringify
     )
   }

packages/hoppscotch-app/newstore/RESTSession.ts

@@ -1,3 +1,5 @@
+import * as A from "fp-ts/Array"
+import { pipe } from "fp-ts/function"
 import { pluck, distinctUntilChanged, map, filter } from "rxjs/operators"
 import { Ref } from "@nuxtjs/composition-api"
 import {
@@ -15,6 +17,11 @@ import { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { useStream } from "~/helpers/utils/composables"
 import { HoppTestResult } from "~/helpers/types/HoppTestResult"
 import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
+import {
+  parseRawKeyValueEntries,
+  rawKeyValueEntriesToString,
+  RawKeyValueEntry,
+} from "~/helpers/rawKeyValue"
 
 type RESTSession = {
   request: HoppRESTRequest
@@ -203,9 +210,30 @@ const dispatchers = defineDispatchers({
     curr: RESTSession,
     { newContentType }: { newContentType: ValidContentTypes | null }
   ) {
+    // TODO: Cleaner implementation
     // TODO: persist body evenafter switching content typees
     if (curr.request.body.contentType !== "multipart/form-data") {
       if (newContentType === "multipart/form-data") {
+        // Preserve entries when comping from urlencoded to multipart
+        if (
+          curr.request.body.contentType === "application/x-www-form-urlencoded"
+        ) {
+          return {
+            ...curr.request,
+            body: <HoppRESTReqBody>{
+              contentType: "multipart/form-data",
+              body: pipe(
+                curr.request.body.body,
+                parseRawKeyValueEntries,
+                A.map(
+                  ({ key, value, active }) =>
+                    <FormDataKeyValue>{ key, value, active, isFile: false }
+                )
+              ),
+            },
+          }
+        }
+
         // Going from non-formdata to form-data, discard contents and set empty array as body
         return {
           request: {
@@ -232,6 +260,29 @@ const dispatchers = defineDispatchers({
         }
       }
     } else if (newContentType !== "multipart/form-data") {
+      if (newContentType === "application/x-www-form-urlencoded") {
+        return {
+          request: {
+            ...curr.request,
+            body: <HoppRESTReqBody>{
+              contentType: newContentType,
+              body: pipe(
+                curr.request.body.body,
+                A.map(
+                  ({ key, value, isFile, active }) =>
+                    <RawKeyValueEntry>{
+                      key,
+                      value: isFile ? "" : value,
+                      active,
+                    }
+                ),
+                rawKeyValueEntriesToString
+              ),
+            },
+          },
+        }
+      }
+
       // Going from formdata to non-formdata, discard contents and set empty string
       return {
         request: {