chore(deps): bump

2022-01-03 11:34:42 +05:30
parent 41e39e2141 6e86e27437
commit 75ab7fdb00
42 changed files with 1236 additions and 2425 deletions
--- a/packages/hoppscotch-app/components/graphql/RequestOptions.vue
+++ b/packages/hoppscotch-app/components/graphql/RequestOptions.vue
@@ -131,7 +131,7 @@
              v-tippy="{ theme: 'tooltip' }"
              :title="t('action.clear_all')"
              svg="trash-2"
-              @click.native="clearHeaders()"
+              @click.native="clearContent()"
            />
            <ButtonSecondary
              v-tippy="{ theme: 'tooltip' }"
@@ -145,14 +145,14 @@
              :title="t('add.new')"
              svg="plus"
              :disabled="bulkMode"
-              @click.native="addRequestHeader"
+              @click.native="addHeader"
            />
          </div>
        </div>
        <div v-if="bulkMode" ref="bulkEditor"></div>
        <div v-else>
          <div
-            v-for="(header, index) in headers"
+            v-for="(header, index) in workingHeaders"
            :key="`header-${String(index)}`"
            class="flex border-b divide-x divide-dividerLight border-dividerLight"
          >
@@ -172,7 +172,7 @@
                "
              class="flex-1 !flex"
              @input="
-                updateRequestHeader(index, {
+                updateHeader(index, {
                  key: $event,
                  value: header.value,
                  active: header.active,
@@ -186,7 +186,7 @@
              :value="header.value"
              autofocus
              @change="
-                updateRequestHeader(index, {
+                updateHeader(index, {
                  key: header.key,
                  value: $event.target.value,
                  active: header.active,
@@ -212,7 +212,7 @@
                "
                color="green"
                @click.native="
-                  updateRequestHeader(index, {
+                  updateHeader(index, {
                    key: header.key,
                    value: header.value,
                    active: !header.active,
@@ -226,12 +226,12 @@
                :title="t('action.remove')"
                svg="trash"
                color="red"
-                @click.native="removeRequestHeader(index)"
+                @click.native="deleteHeader(index)"
              />
            </span>
          </div>
          <div
-            v-if="headers.length === 0"
+            v-if="workingHeaders.length === 0"
            class="flex flex-col items-center justify-center p-4 text-secondaryLight"
          >
            <img
@@ -248,7 +248,7 @@
              filled
              svg="plus"
              class="mb-4"
-              @click.native="addRequestHeader"
+              @click.native="addHeader"
            />
          </div>
        </div>
@@ -263,16 +263,11 @@
 </template>

 <script setup lang="ts">
-import {
-  computed,
-  onMounted,
-  reactive,
-  ref,
-  watch,
-} from "@nuxtjs/composition-api"
+import { Ref, computed, reactive, ref, watch } from "@nuxtjs/composition-api"
 import clone from "lodash/clone"
 import * as gql from "graphql"
 import { GQLHeader, makeGQLRequest } from "@hoppscotch/data"
+import isEqual from "lodash/isEqual"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import {
  useNuxt,
@@ -282,18 +277,15 @@ import {
  useToast,
 } from "~/helpers/utils/composables"
 import {
-  addGQLHeader,
  gqlHeaders$,
  gqlQuery$,
  gqlResponse$,
  gqlURL$,
  gqlVariables$,
-  removeGQLHeader,
  setGQLHeaders,
  setGQLQuery,
  setGQLResponse,
  setGQLVariables,
-  updateGQLHeader,
 } from "~/newstore/GQLSession"
 import { commonHeaders } from "~/helpers/headers"
 import { GQLConnection } from "~/helpers/GQLConnection"
@@ -314,33 +306,18 @@ const props = defineProps<{
 }>()

 const toast = useToast()
-
 const nuxt = useNuxt()

-const bulkMode = ref(false)
-const bulkHeaders = ref("")
-
-watch(bulkHeaders, () => {
-  try {
-    const transformation = bulkHeaders.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trim().replace(/^#/, ""),
-      value: item.substring(item.indexOf(":") + 1).trim(),
-      active: !item.trim().startsWith("#"),
-    }))
-    setGQLHeaders(transformation as GQLHeader[])
-  } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
-    console.error(e)
-  }
-})
-
 const url = useReadonlyStream(gqlURL$, "")
 const gqlQueryString = useStream(gqlQuery$, "", setGQLQuery)
 const variableString = useStream(gqlVariables$, "", setGQLVariables)
-const headers = useStream(gqlHeaders$, [], setGQLHeaders)

+const bulkMode = ref(false)
+const bulkHeaders = ref("")
 const bulkEditor = ref<any | null>(null)

+const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
+
 useCodemirror(bulkEditor, bulkHeaders, {
  extendedEditorConfig: {
    mode: "text/x-yaml",
@@ -351,6 +328,166 @@ useCodemirror(bulkEditor, bulkHeaders, {
  environmentHighlights: false,
 })

+// The functional headers list (the headers actually in the system)
+const headers = useStream(gqlHeaders$, [], setGQLHeaders) as Ref<GQLHeader[]>
+
+// The UI representation of the headers list (has the empty end header)
+const workingHeaders = ref<GQLHeader[]>([
+  {
+    key: "",
+    value: "",
+    active: true,
+  },
+])
+
+// Rule: Working Headers always have one empty header or the last element is always an empty header
+watch(workingHeaders, (headersList) => {
+  if (
+    headersList.length > 0 &&
+    headersList[headersList.length - 1].key !== ""
+  ) {
+    workingHeaders.value.push({
+      key: "",
+      value: "",
+      active: true,
+    })
+  }
+})
+
+// Sync logic between headers and working headers
+watch(
+  headers,
+  (newHeadersList) => {
+    // Sync should overwrite working headers
+    const filteredWorkingHeaders = workingHeaders.value.filter(
+      (e) => e.key !== ""
+    )
+
+    if (!isEqual(newHeadersList, filteredWorkingHeaders)) {
+      workingHeaders.value = newHeadersList
+    }
+  },
+  { immediate: true }
+)
+
+watch(workingHeaders, (newWorkingHeaders) => {
+  const fixedHeaders = newWorkingHeaders.filter((e) => e.key !== "")
+  if (!isEqual(headers.value, fixedHeaders)) {
+    headers.value = fixedHeaders
+  }
+})
+
+// Bulk Editor Syncing with Working Headers
+watch(bulkHeaders, () => {
+  try {
+    const transformation = bulkHeaders.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 = workingHeaders.value.filter((x) => x.key !== "")
+
+    if (!isEqual(filteredHeaders, transformation)) {
+      workingHeaders.value = transformation
+    }
+  } catch (e) {
+    toast.error(`${t("error.something_went_wrong")}`)
+    console.error(e)
+  }
+})
+
+watch(workingHeaders, (newHeadersList) => {
+  // If we are in bulk mode, don't apply direct changes
+  if (bulkMode.value) return
+
+  try {
+    const currentBulkHeaders = bulkHeaders.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(currentBulkHeaders, filteredHeaders)) {
+      bulkHeaders.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 = () => {
+  workingHeaders.value.push({
+    key: "",
+    value: "",
+    active: true,
+  })
+}
+
+const updateHeader = (index: number, header: GQLHeader) => {
+  workingHeaders.value = workingHeaders.value.map((h, i) =>
+    i === index ? header : h
+  )
+}
+
+const deleteHeader = (index: number) => {
+  const headersBeforeDeletion = clone(workingHeaders.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) => {
+            workingHeaders.value = headersBeforeDeletion
+            toastObject.goAway(0)
+            deletionToast.value = null
+          },
+        },
+      ],
+
+      onComplete: () => {
+        deletionToast.value = null
+      },
+    })
+  }
+
+  workingHeaders.value.splice(index, 1)
+}
+
+const clearContent = () => {
+  // set headers list to the initial state
+  workingHeaders.value = [
+    {
+      key: "",
+      value: "",
+      active: true,
+    },
+  ]
+
+  bulkHeaders.value = ""
+}
+
 const activeGQLHeadersCount = computed(
  () =>
    headers.value.filter((x) => x.active && (x.key !== "" || x.value !== ""))
@@ -395,42 +532,6 @@ const prettifyVariablesIcon = ref("wand")

 const showSaveRequestModal = ref(false)

-watch(
-  headers,
-  () => {
-    if (!bulkMode.value)
-      if (
-        (headers.value[headers.value.length - 1]?.key !== "" ||
-          headers.value[headers.value.length - 1]?.value !== "") &&
-        headers.value.length
-      )
-        addRequestHeader()
-  },
-  { deep: true }
-)
-
-const editBulkHeadersLine = (index: number, item?: GQLHeader | null) => {
-  bulkHeaders.value = headers.value
-    .reduce((all, header, pIndex) => {
-      const current =
-        index === pIndex && item != null
-          ? `${item.active ? "" : "#"}${item.key}: ${item.value}`
-          : `${header.active ? "" : "#"}${header.key}: ${header.value}`
-      return [...all, current]
-    }, [] as string[])
-    .join("\n")
-}
-
-const clearBulkEditor = () => {
-  bulkHeaders.value = ""
-}
-
-onMounted(() => {
-  if (!headers.value?.length) {
-    addRequestHeader()
-  }
-})
-
 const copyQuery = () => {
  copyToClipboard(gqlQueryString.value)
  copyQueryIcon.value = "check"
@@ -535,50 +636,6 @@ const prettifyVariableString = () => {
  setTimeout(() => (prettifyVariablesIcon.value = "wand"), 1000)
 }

-const addRequestHeader = () => {
-  const empty = { key: "", value: "", active: true }
-  const index = headers.value.length
-
-  addGQLHeader(empty)
-  editBulkHeadersLine(index, empty)
-}
-
-const updateRequestHeader = (
-  index: number,
-  item: { key: string; value: string; active: boolean }
-) => {
-  updateGQLHeader(index, item)
-  editBulkHeadersLine(index, item)
-}
-
-const removeRequestHeader = (index: number) => {
-  const headersBeforeDeletion = headers.value
-
-  removeGQLHeader(index)
-  editBulkHeadersLine(index, null)
-
-  const deletedItem = headersBeforeDeletion[index]
-  if (deletedItem.key || deletedItem.value) {
-    toast.success(`${t("state.deleted")}`, {
-      action: [
-        {
-          text: `${t("action.undo")}`,
-          onClick: (_, toastObject) => {
-            setGQLHeaders(headersBeforeDeletion as GQLHeader[])
-            editBulkHeadersLine(index, deletedItem)
-            toastObject.goAway(0)
-          },
-        },
-      ],
-    })
-  }
-}
-
-const clearHeaders = () => {
-  headers.value = []
-  clearBulkEditor()
-}
-
 const clearGQLQuery = () => {
  gqlQueryString.value = ""
 }
--- a/packages/hoppscotch-app/components/http/BodyParameters.vue
+++ b/packages/hoppscotch-app/components/http/BodyParameters.vue
@@ -54,13 +54,12 @@
      />
      <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
        <div class="space-x-2 file-chips-wrapper">
-          <SmartDeletableChip
+          <SmartFileChip
            v-for="(file, fileIndex) in param.value"
            :key="`param-${index}-file-${fileIndex}`"
-            @chip-delete="chipDelete(index, fileIndex)"
          >
            {{ file.name }}
-          </SmartDeletableChip>
+          </SmartFileChip>
        </div>
      </div>
      <span v-else class="flex flex-1">
@@ -85,21 +84,17 @@
        />
      </span>
      <span>
-        <label for="attachment" class="p-0">
-          <ButtonSecondary
-            class="w-full"
-            svg="paperclip"
-            @click.native="$refs.attachment[index].click()"
+        <label :for="`attachment${index}`" class="p-0">
+          <input
+            :id="`attachment${index}`"
+            :ref="`attachment${index}`"
+            :name="`attachment${index}`"
+            type="file"
+            multiple
+            class="p-1 transition cursor-pointer file:transition file:cursor-pointer text-secondaryLight hover:text-secondaryDark file:mr-2 file:py-1 file:px-4 file:rounded file:border-0 file:text-tiny text-tiny file:text-secondary hover:file:text-secondaryDark file:bg-primaryLight hover:file:bg-primaryDark"
+            @change="setRequestAttachment(index, param, $event)"
          />
        </label>
-        <input
-          ref="attachment"
-          class="input"
-          name="attachment"
-          type="file"
-          multiple
-          @change="setRequestAttachment(index, param, $event)"
-        />
      </span>
      <span>
        <ButtonSecondary
@@ -163,8 +158,8 @@
  </div>
 </template>

-<script lang="ts">
-import { defineComponent, onMounted, Ref, watch } from "@nuxtjs/composition-api"
+<script setup lang="ts">
+import { onMounted, Ref, watch } from "@nuxtjs/composition-api"
 import { FormDataKeyValue } from "@hoppscotch/data"
 import { pluckRef } from "~/helpers/utils/composables"
 import {
@@ -175,87 +170,66 @@ import {
  useRESTRequestBody,
 } from "~/newstore/RESTSession"

-export default defineComponent({
-  setup() {
-    const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
-      FormDataKeyValue[]
-    >
+const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
+  FormDataKeyValue[]
+>

-    const addBodyParam = () => {
-      addFormDataEntry({ key: "", value: "", active: true, isFile: false })
-    }
+const addBodyParam = () => {
+  addFormDataEntry({ key: "", value: "", active: true, isFile: false })
+}

-    const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
-      updateFormDataEntry(index, entry)
-    }
+const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
+  updateFormDataEntry(index, entry)
+}

-    const deleteBodyParam = (index: number) => {
-      deleteFormDataEntry(index)
-    }
+const deleteBodyParam = (index: number) => {
+  deleteFormDataEntry(index)
+}

-    const clearContent = () => {
-      deleteAllFormDataEntries()
-    }
+const clearContent = () => {
+  deleteAllFormDataEntries()
+}

-    const chipDelete = (paramIndex: number, fileIndex: number) => {
-      const entry = bodyParams.value[paramIndex]
-      if (entry.isFile) {
-        entry.value.splice(fileIndex, 1)
-        if (entry.value.length === 0) {
-          updateFormDataEntry(paramIndex, {
-            ...entry,
-            isFile: false,
-            value: "",
-          })
-          return
-        }
-      }
-
-      updateFormDataEntry(paramIndex, entry)
-    }
-
-    const setRequestAttachment = (
-      index: number,
-      entry: FormDataKeyValue,
-      event: InputEvent
-    ) => {
-      const fileEntry: FormDataKeyValue = {
-        ...entry,
-        isFile: true,
-        value: Array.from((event.target as HTMLInputElement).files!),
-      }
-      updateFormDataEntry(index, fileEntry)
-    }
-
-    watch(
-      bodyParams,
-      () => {
-        if (
-          bodyParams.value.length > 0 &&
-          (bodyParams.value[bodyParams.value.length - 1].key !== "" ||
-            bodyParams.value[bodyParams.value.length - 1].value !== "")
-        )
-          addBodyParam()
-      },
-      { deep: true }
-    )
-
-    onMounted(() => {
-      if (!bodyParams.value?.length) {
-        addBodyParam()
-      }
+const setRequestAttachment = (
+  index: number,
+  entry: FormDataKeyValue,
+  event: InputEvent
+) => {
+  // check if file exists or not
+  if ((event.target as HTMLInputElement).files?.length === 0) {
+    updateFormDataEntry(index, {
+      ...entry,
+      isFile: false,
+      value: "",
    })
+    return
+  }

-    return {
-      bodyParams,
-      addBodyParam,
-      updateBodyParam,
-      deleteBodyParam,
-      clearContent,
-      setRequestAttachment,
-      chipDelete,
-    }
+  const fileEntry: FormDataKeyValue = {
+    ...entry,
+    isFile: true,
+    value: Array.from((event.target as HTMLInputElement).files!),
+  }
+  updateFormDataEntry(index, fileEntry)
+}
+
+watch(
+  bodyParams,
+  () => {
+    if (
+      bodyParams.value.length > 0 &&
+      (bodyParams.value[bodyParams.value.length - 1].key !== "" ||
+        bodyParams.value[bodyParams.value.length - 1].value !== "")
+    )
+      addBodyParam()
  },
+  { deep: true }
+)
+
+onMounted(() => {
+  if (!bodyParams.value?.length) {
+    addBodyParam()
+  }
 })
 </script>

@@ -268,8 +242,7 @@ export default defineComponent({

  .file-chips-wrapper {
    @apply flex;
-    @apply px-4;
-    @apply py-1;
+    @apply p-1;
    @apply w-0;
  }
 }
--- a/packages/hoppscotch-app/components/http/CodegenModal.vue
+++ b/packages/hoppscotch-app/components/http/CodegenModal.vue
@@ -13,25 +13,40 @@
          <template #trigger>
            <span class="select-wrapper">
              <ButtonSecondary
-                :label="codegens.find((x) => x.id === codegenType).name"
+                :label="
+                  CodegenDefinitions.find((x) => x.name === codegenType).caption
+                "
                outline
                class="flex-1 pr-8"
              />
            </span>
          </template>
-          <SmartItem
-            v-for="(gen, index) in codegens"
-            :key="`gen-${index}`"
-            :label="gen.name"
-            :info-icon="gen.id === codegenType ? 'done' : ''"
-            :active-info-icon="gen.id === codegenType"
-            @click.native="
-              () => {
-                codegenType = gen.id
-                options.tippy().hide()
-              }
-            "
-          />
+          <div class="flex flex-col space-y-2">
+            <div class="sticky top-0">
+              <input
+                v-model="searchQuery"
+                type="search"
+                autocomplete="off"
+                class="flex w-full p-4 py-2 !bg-popover input"
+                :placeholder="`${t('action.search')}`"
+              />
+            </div>
+            <div class="flex flex-col">
+              <SmartItem
+                v-for="codegen in filteredCodegenDefinitions"
+                :key="codegen.name"
+                :label="codegen.caption"
+                :info-icon="codegen.name === codegenType ? 'done' : ''"
+                :active-info-icon="codegen.name === codegenType"
+                @click.native="
+                  () => {
+                    codegenType = codegen.name
+                    options.tippy().hide()
+                  }
+                "
+              />
+            </div>
+          </div>
        </tippy>
        <div class="flex justify-between flex-1">
          <label for="generatedCode" class="p-4">
@@ -39,7 +54,13 @@
          </label>
        </div>
        <div
-          v-if="codegenType"
+          v-if="errorState"
+          class="bg-primaryLight rounded font-mono w-full py-2 px-4 text-red-400 overflow-auto whitespace-normal"
+        >
+          {{ t("error.something_went_wrong") }}
+        </div>
+        <div
+          v-else-if="codegenType"
          ref="generatedCode"
          class="border rounded border-dividerLight"
        ></div>
@@ -63,13 +84,22 @@

 <script setup lang="ts">
 import { computed, ref, watch } from "@nuxtjs/composition-api"
-import { codegens, generateCodegenContext } from "~/helpers/codegen/codegen"
+import * as O from "fp-ts/Option"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
-import { getEffectiveRESTRequest } from "~/helpers/utils/EffectiveURL"
-import { getCurrentEnvironment } from "~/newstore/environments"
+import {
+  getEffectiveRESTRequest,
+  resolvesEnvsInBody,
+} from "~/helpers/utils/EffectiveURL"
+import { Environment, getAggregateEnvs } from "~/newstore/environments"
 import { getRESTRequest } from "~/newstore/RESTSession"
 import { useI18n, useToast } from "~/helpers/utils/composables"
+import {
+  CodegenDefinitions,
+  CodegenName,
+  generateCode,
+} from "~/helpers/new-codegen"
+import { makeRESTRequest } from "~/../hoppscotch-data/dist"

 const t = useI18n()

@@ -86,18 +116,44 @@ const toast = useToast()
 const options = ref<any | null>(null)

 const request = ref(getRESTRequest())
-const codegenType = ref("curl")
+const codegenType = ref<CodegenName>("shell-curl")
 const copyIcon = ref("copy")
+const errorState = ref(false)

 const requestCode = computed(() => {
-  const effectiveRequest = getEffectiveRESTRequest(
-    request.value as any,
-    getCurrentEnvironment()
+  const aggregateEnvs = getAggregateEnvs()
+  const env: Environment = {
+    name: "Env",
+    variables: aggregateEnvs,
+  }
+  const effectiveRequest = getEffectiveRESTRequest(request.value, env)
+
+  if (!props.show) return ""
+
+  const result = generateCode(
+    codegenType.value,
+    makeRESTRequest({
+      ...effectiveRequest,
+      body: resolvesEnvsInBody(effectiveRequest.body, env),
+      headers: effectiveRequest.effectiveFinalHeaders.map((header) => ({
+        ...header,
+        active: true,
+      })),
+      params: effectiveRequest.effectiveFinalParams.map((param) => ({
+        ...param,
+        active: true,
+      })),
+      endpoint: effectiveRequest.effectiveFinalURL,
+    })
  )

-  return codegens
-    .find((x) => x.id === codegenType.value)!
-    .generator(generateCodegenContext(effectiveRequest))
+  if (O.isSome(result)) {
+    errorState.value = false
+    return result.value
+  } else {
+    errorState.value = true
+    return ""
+  }
 })

 const generatedCode = ref<any | null>(null)
@@ -129,4 +185,12 @@ const copyRequestCode = () => {
  toast.success(`${t("state.copied_to_clipboard")}`)
  setTimeout(() => (copyIcon.value = "copy"), 1000)
 }
+
+const searchQuery = ref("")
+
+const filteredCodegenDefinitions = computed(() => {
+  return CodegenDefinitions.filter((obj) =>
+    Object.values(obj).some((val) => val.includes(searchQuery.value))
+  )
+})
 </script>
--- a/packages/hoppscotch-app/components/http/Headers.vue
+++ b/packages/hoppscotch-app/components/http/Headers.vue
@@ -39,7 +39,7 @@
    <div v-if="bulkMode" ref="bulkEditor"></div>
    <div v-else>
      <div
-        v-for="(header, index) in headers$"
+        v-for="(header, index) in workingHeaders"
        :key="`header-${index}`"
        class="flex border-b divide-x divide-dividerLight border-dividerLight"
      >
@@ -106,9 +106,7 @@
              updateHeader(index, {
                key: header.key,
                value: header.value,
-                active: header.hasOwnProperty('active')
-                  ? !header.active
-                  : false,
+                active: !header.active,
              })
            "
          />
@@ -124,8 +122,8 @@
        </span>
      </div>
      <div
-        v-if="headers$.length === 0"
-        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
+        v-if="workingHeaders.length === 0"
+        class="flex flex-col text-secondaryLight p-4 items-center justify-center"
      >
        <img
          :src="`/images/states/${$colorMode.value}/add_category.svg`"
@@ -149,32 +147,24 @@
 </template>

 <script setup lang="ts">
-import { onBeforeUpdate, ref, watch } from "@nuxtjs/composition-api"
+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 {
-  addRESTHeader,
-  deleteAllRESTHeaders,
-  deleteRESTHeader,
-  restHeaders$,
-  setRESTHeaders,
-  updateRESTHeader,
-} from "~/newstore/RESTSession"
+import { restHeaders$, setRESTHeaders } from "~/newstore/RESTSession"
 import { commonHeaders } from "~/helpers/headers"
-import {
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
+import { useI18n, useStream, useToast } from "~/helpers/utils/composables"

 const t = useI18n()
-
 const toast = useToast()

 const bulkMode = ref(false)
 const bulkHeaders = ref("")
 const bulkEditor = ref<any | null>(null)

+const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
+
 useCodemirror(bulkEditor, bulkHeaders, {
  extendedEditorConfig: {
    mode: "text/x-yaml",
@@ -185,92 +175,165 @@ useCodemirror(bulkEditor, bulkHeaders, {
  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 workingHeaders = ref<HoppRESTHeader[]>([
+  {
+    key: "",
+    value: "",
+    active: true,
+  },
+])
+
+// Rule: Working Headers always have one empty header or the last element is always an empty header
+watch(workingHeaders, (headersList) => {
+  if (
+    headersList.length > 0 &&
+    headersList[headersList.length - 1].key !== ""
+  ) {
+    workingHeaders.value.push({
+      key: "",
+      value: "",
+      active: true,
+    })
+  }
+})
+
+// Sync logic between headers and working headers
+watch(
+  headers,
+  (newHeadersList) => {
+    // Sync should overwrite working headers
+    const filteredWorkingHeaders = workingHeaders.value.filter(
+      (e) => e.key !== ""
+    )
+
+    if (!isEqual(newHeadersList, filteredWorkingHeaders)) {
+      workingHeaders.value = newHeadersList
+    }
+  },
+  { immediate: true }
+)
+
+watch(workingHeaders, (newWorkingHeaders) => {
+  const fixedHeaders = newWorkingHeaders.filter((e) => e.key !== "")
+  if (!isEqual(headers.value, fixedHeaders)) {
+    headers.value = fixedHeaders
+  }
+})
+
+// Bulk Editor Syncing with Working Headers
 watch(bulkHeaders, () => {
  try {
-    const transformation = bulkHeaders.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trim().replace(/^#/, ""),
-      value: item.substring(item.indexOf(":") + 1).trim(),
-      active: !item.trim().startsWith("#"),
-    }))
-    setRESTHeaders(transformation as HoppRESTHeader[])
+    const transformation = bulkHeaders.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 = workingHeaders.value.filter((x) => x.key !== "")
+
+    if (!isEqual(filteredHeaders, transformation)) {
+      workingHeaders.value = transformation
+    }
  } catch (e) {
    toast.error(`${t("error.something_went_wrong")}`)
    console.error(e)
  }
 })

-const headers$ = useReadonlyStream(restHeaders$, [])
+watch(workingHeaders, (newHeadersList) => {
+  // If we are in bulk mode, don't apply direct changes
+  if (bulkMode.value) return

-watch(
-  headers$,
-  (newValue) => {
-    if (!bulkMode.value)
-      if (
-        (newValue[newValue.length - 1]?.key !== "" ||
-          newValue[newValue.length - 1]?.value !== "") &&
-        newValue.length
-      )
-        addHeader()
-  },
-  { deep: true }
-)
+  try {
+    const currentBulkHeaders = bulkHeaders.value.split("\n").map((item) => ({
+      key: item.substring(0, item.indexOf(":")).trimLeft().replace(/^#/, ""),
+      value: item.substring(item.indexOf(":") + 1).trimLeft(),
+      active: !item.trim().startsWith("#"),
+    }))

-onBeforeUpdate(() => editBulkHeadersLine(-1, null))
+    const filteredHeaders = newHeadersList.filter((x) => x.key !== "")

-const editBulkHeadersLine = (index: number, item?: HoppRESTHeader | null) => {
-  bulkHeaders.value = headers$.value
-    .reduce((all, header, pIndex) => {
-      const current =
-        index === pIndex && item != null
-          ? `${item.active ? "" : "#"}${item.key}: ${item.value}`
-          : `${header.active ? "" : "#"}${header.key}: ${header.value}`
-      return [...all, current]
-    }, [])
-    .join("\n")
-}
-
-const clearBulkEditor = () => {
-  bulkHeaders.value = ""
-}
+    if (!isEqual(currentBulkHeaders, filteredHeaders)) {
+      bulkHeaders.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 = () => {
-  const empty = { key: "", value: "", active: true }
-  const index = headers$.value.length
-
-  addRESTHeader(empty)
-  editBulkHeadersLine(index, empty)
+  workingHeaders.value.push({
+    key: "",
+    value: "",
+    active: true,
+  })
 }

-const updateHeader = (index: number, item: HoppRESTHeader) => {
-  updateRESTHeader(index, item)
-  editBulkHeadersLine(index, item)
+const updateHeader = (index: number, header: HoppRESTHeader) => {
+  workingHeaders.value = workingHeaders.value.map((h, i) =>
+    i === index ? header : h
+  )
 }

 const deleteHeader = (index: number) => {
-  const headersBeforeDeletion = headers$.value
+  const headersBeforeDeletion = clone(workingHeaders.value)

-  deleteRESTHeader(index)
-  editBulkHeadersLine(index, null)
+  if (
+    !(
+      headersBeforeDeletion.length > 0 &&
+      index === headersBeforeDeletion.length - 1
+    )
+  ) {
+    if (deletionToast.value) {
+      deletionToast.value.goAway(0)
+      deletionToast.value = null
+    }

-  const deletedItem = headersBeforeDeletion[index]
-  if (deletedItem.key || deletedItem.value) {
-    toast.success(`${t("state.deleted")}`, {
+    deletionToast.value = toast.success(`${t("state.deleted")}`, {
      action: [
        {
          text: `${t("action.undo")}`,
          onClick: (_, toastObject) => {
-            setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
-            editBulkHeadersLine(index, deletedItem)
+            workingHeaders.value = headersBeforeDeletion
            toastObject.goAway(0)
+            deletionToast.value = null
          },
        },
      ],
+
+      onComplete: () => {
+        deletionToast.value = null
+      },
    })
  }
+
+  workingHeaders.value.splice(index, 1)
 }

 const clearContent = () => {
-  deleteAllRESTHeaders()
-  clearBulkEditor()
+  // set headers list to the initial state
+  workingHeaders.value = [
+    {
+      key: "",
+      value: "",
+      active: true,
+    },
+  ]
+
+  bulkHeaders.value = ""
 }
 </script>
--- a/packages/hoppscotch-app/components/http/Parameters.vue
+++ b/packages/hoppscotch-app/components/http/Parameters.vue
@@ -39,7 +39,7 @@
    <div v-if="bulkMode" ref="bulkEditor"></div>
    <div v-else>
      <div
-        v-for="(param, index) in params$"
+        v-for="(param, index) in workingParams"
        :key="`param-${index}`"
        class="flex border-b divide-x divide-dividerLight border-dividerLight"
      >
@@ -117,7 +117,7 @@
        </span>
      </div>
      <div
-        v-if="params$.length === 0"
+        v-if="workingParams.length === 0"
        class="flex flex-col items-center justify-center p-4 text-secondaryLight"
      >
        <img
@@ -142,22 +142,13 @@
 </template>

 <script setup lang="ts">
-import { ref, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
+import { ref, watch } from "@nuxtjs/composition-api"
 import { HoppRESTParam } from "@hoppscotch/data"
+import isEqual from "lodash/isEqual"
+import clone from "lodash/clone"
 import { useCodemirror } from "~/helpers/editor/codemirror"
-import {
-  useReadonlyStream,
-  useI18n,
-  useToast,
-} from "~/helpers/utils/composables"
-import {
-  restParams$,
-  addRESTParam,
-  updateRESTParam,
-  deleteRESTParam,
-  deleteAllRESTParams,
-  setRESTParams,
-} from "~/newstore/RESTSession"
+import { useI18n, useToast, useStream } from "~/helpers/utils/composables"
+import { restParams$, setRESTParams } from "~/newstore/RESTSession"

 const t = useI18n()

@@ -166,19 +157,7 @@ const toast = useToast()
 const bulkMode = ref(false)
 const bulkParams = ref("")

-watch(bulkParams, () => {
-  try {
-    const transformation = bulkParams.value.split("\n").map((item) => ({
-      key: item.substring(0, item.indexOf(":")).trim().replace(/^#/, ""),
-      value: item.substring(item.indexOf(":") + 1).trim(),
-      active: !item.trim().startsWith("#"),
-    }))
-    setRESTParams(transformation as HoppRESTParam[])
-  } catch (e) {
-    toast.error(`${t("error.something_went_wrong")}`)
-    console.error(e)
-  }
-})
+const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)

 const bulkEditor = ref<any | null>(null)

@@ -192,78 +171,160 @@ useCodemirror(bulkEditor, bulkParams, {
  environmentHighlights: true,
 })

-const params$ = useReadonlyStream(restParams$, [])
+// The functional parameters list (the parameters actually applied to the session)
+const params = useStream(restParams$, [], setRESTParams)

-watch(
-  params$,
-  (newValue) => {
-    if (!bulkMode.value)
-      if (
-        (newValue[newValue.length - 1]?.key !== "" ||
-          newValue[newValue.length - 1]?.value !== "") &&
-        newValue.length
-      )
-        addParam()
+// The UI representation of the parameters list (has the empty end param)
+const workingParams = ref<HoppRESTParam[]>([
+  {
+    key: "",
+    value: "",
+    active: true,
  },
-  { deep: true }
+])
+
+// Rule: Working Params always have last element is always an empty param
+watch(workingParams, (paramsList) => {
+  if (paramsList.length > 0 && paramsList[paramsList.length - 1].key !== "") {
+    workingParams.value.push({
+      key: "",
+      value: "",
+      active: true,
+    })
+  }
+})
+
+// Sync logic between params and working params
+watch(
+  params,
+  (newParamsList) => {
+    // Sync should overwrite working params
+    const filteredWorkingParams = workingParams.value.filter(
+      (e) => e.key !== ""
+    )
+
+    if (!isEqual(newParamsList, filteredWorkingParams)) {
+      workingParams.value = newParamsList
+    }
+  },
+  { immediate: true }
 )

-onBeforeUpdate(() => editBulkParamsLine(-1, null))
+watch(workingParams, (newWorkingParams) => {
+  const fixedParams = newWorkingParams.filter((e) => e.key !== "")
+  if (!isEqual(params.value, fixedParams)) {
+    params.value = fixedParams
+  }
+})

-const editBulkParamsLine = (index: number, item?: HoppRESTParam | null) => {
-  bulkParams.value = params$.value
-    .reduce((all, param, pIndex) => {
-      const current =
-        index === pIndex && item != null
-          ? `${item.active ? "" : "#"}${item.key}: ${item.value}`
-          : `${param.active ? "" : "#"}${param.key}: ${param.value}`
-      return [...all, current]
-    }, [])
-    .join("\n")
-}
+// Bulk Editor Syncing with Working Params
+watch(bulkParams, () => {
+  try {
+    const transformation = bulkParams.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 clearBulkEditor = () => {
-  bulkParams.value = ""
-}
+    const filteredParams = workingParams.value.filter((x) => x.key !== "")
+
+    if (!isEqual(filteredParams, transformation)) {
+      workingParams.value = transformation
+    }
+  } catch (e) {
+    toast.error(`${t("error.something_went_wrong")}`)
+    console.error(e)
+  }
+})
+
+watch(workingParams, (newParamsList) => {
+  // If we are in bulk mode, don't apply direct changes
+  if (bulkMode.value) return
+
+  try {
+    const currentBulkParams = bulkParams.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 filteredParams = newParamsList.filter((x) => x.key !== "")
+
+    if (!isEqual(currentBulkParams, filteredParams)) {
+      bulkParams.value = filteredParams
+        .map((param) => {
+          return `${param.active ? "" : "#"}${param.key}: ${param.value}`
+        })
+        .join("\n")
+    }
+  } catch (e) {
+    toast.error(`${t("error.something_went_wrong")}`)
+    console.error(e)
+  }
+})

 const addParam = () => {
-  const empty = { key: "", value: "", active: true }
-  const index = params$.value.length
-
-  addRESTParam(empty)
-  editBulkParamsLine(index, empty)
+  workingParams.value.push({
+    key: "",
+    value: "",
+    active: true,
+  })
 }

-const updateParam = (index: number, item: HoppRESTParam) => {
-  updateRESTParam(index, item)
-  editBulkParamsLine(index, item)
+const updateParam = (index: number, param: HoppRESTParam) => {
+  workingParams.value = workingParams.value.map((h, i) =>
+    i === index ? param : h
+  )
 }

 const deleteParam = (index: number) => {
-  const parametersBeforeDeletion = params$.value
+  const paramsBeforeDeletion = clone(workingParams.value)

-  deleteRESTParam(index)
-  editBulkParamsLine(index, null)
+  if (
+    !(
+      paramsBeforeDeletion.length > 0 &&
+      index === paramsBeforeDeletion.length - 1
+    )
+  ) {
+    if (deletionToast.value) {
+      deletionToast.value.goAway(0)
+      deletionToast.value = null
+    }

-  const deletedItem = parametersBeforeDeletion[index]
-  if (deletedItem.key || deletedItem.value) {
-    toast.success(`${t("state.deleted")}`, {
+    deletionToast.value = toast.success(`${t("state.deleted")}`, {
      action: [
        {
          text: `${t("action.undo")}`,
          onClick: (_, toastObject) => {
-            setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
-            editBulkParamsLine(index, deletedItem)
+            workingParams.value = paramsBeforeDeletion
            toastObject.goAway(0)
+            deletionToast.value = null
          },
        },
      ],
+
+      onComplete: () => {
+        deletionToast.value = null
+      },
    })
  }
+
+  workingParams.value.splice(index, 1)
 }

 const clearContent = () => {
-  deleteAllRESTParams()
-  clearBulkEditor()
+  // set params list to the initial state
+  workingParams.value = [
+    {
+      key: "",
+      value: "",
+      active: true,
+    },
+  ]
+
+  bulkParams.value = ""
 }
 </script>
--- a/packages/hoppscotch-app/components/smart/EnvInput.vue
+++ b/packages/hoppscotch-app/components/smart/EnvInput.vue
@@ -120,9 +120,11 @@ export default defineComponent({
    },
    handleChange() {
      this.debouncedHandler = debounce(function () {
-        if (this.internalValue !== this.$refs.editor.textContent) {
-          this.internalValue = this.$refs.editor.textContent
-          this.processHighlights()
+        if (this.$refs.editor) {
+          if (this.internalValue !== this.$refs.editor.textContent) {
+            this.internalValue = this.$refs.editor.textContent
+            this.processHighlights()
+          }
        }
      }, 5)
      this.debouncedHandler()
--- a/packages/hoppscotch-app/components/smart/DeletableChip.vue
+++ b/packages/hoppscotch-app/components/smart/DeletableChip.vue
@@ -1,12 +1,7 @@
 <template>
  <span class="chip">
    <i class="opacity-75 material-icons">attachment</i>
-    <span class="px-2 truncate max-w-64"><slot></slot></span>
-    <ButtonSecondary
-      class="rounded close-button"
-      svg="x"
-      @click.native="$emit('chip-delete')"
-    />
+    <span class="px-2 truncate max-w-32"><slot></slot></span>
  </span>
 </template>

@@ -18,11 +13,6 @@
  @apply rounded;
  @apply pl-2;
  @apply pr-0.5;
-  @apply bg-transparent;
-  @apply border border-divider;
-}
-
-.close-button {
-  @apply p-0.5;
+  @apply bg-primaryDark;
 }
 </style>