fix: resolve removing body parameters in requests (#2390) (#2428)

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

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

@@ -38,8 +38,8 @@
       drag-class="cursor-grabbing"
     >
       <div
-        v-for="(param, index) in workingParams"
-        :key="`param-${index}`"
+        v-for="({ id, entry }, index) in workingParams"
+        :key="`param=${id}-${index}`"
         class="flex border-b divide-x divide-dividerLight border-dividerLight draggable-content group"
       >
         <span>
@@ -54,21 +54,21 @@
           />
         </span>
         <SmartEnvInput
-          v-model="param.key"
+          v-model="entry.key"
           :placeholder="`${$t('count.parameter', { count: index + 1 })}`"
           @change="
             updateBodyParam(index, {
               key: $event,
-              value: param.value,
-              active: param.active,
-              isFile: param.isFile,
+              value: entry.value,
+              active: entry.active,
+              isFile: entry.isFile,
             })
           "
         />
-        <div v-if="param.isFile" class="file-chips-container hide-scrollbar">
+        <div v-if="entry.isFile" class="file-chips-container hide-scrollbar">
           <div class="space-x-2 file-chips-wrapper">
             <SmartFileChip
-              v-for="(file, fileIndex) in param.value"
+              v-for="(file, fileIndex) in entry.value"
               :key="`param-${index}-file-${fileIndex}`"
               >{{ file.name }}</SmartFileChip
             >
@@ -76,14 +76,14 @@
         </div>
         <span v-else class="flex flex-1">
           <SmartEnvInput
-            v-model="param.value"
+            v-model="entry.value"
             :placeholder="`${$t('count.value', { count: index + 1 })}`"
             @change="
               updateBodyParam(index, {
-                key: param.key,
+                key: entry.key,
                 value: $event,
-                active: param.active,
-                isFile: param.isFile,
+                active: entry.active,
+                isFile: entry.isFile,
               })
             "
           />
@@ -97,7 +97,7 @@
               type="file"
               multiple
               class="p-1 cursor-pointer transition 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)"
+              @change="setRequestAttachment(index, entry, $event)"
             />
           </label>
         </span>
@@ -105,15 +105,15 @@
           <ButtonSecondary
             v-tippy="{ theme: 'tooltip' }"
             :title="
-              param.hasOwnProperty('active')
-                ? param.active
+              entry.hasOwnProperty('active')
+                ? entry.active
                   ? $t('action.turn_off')
                   : $t('action.turn_on')
                 : $t('action.turn_off')
             "
             :svg="
-              param.hasOwnProperty('active')
-                ? param.active
+              entry.hasOwnProperty('active')
+                ? entry.active
                   ? 'check-circle'
                   : 'circle'
                 : 'check-circle'
@@ -121,10 +121,10 @@
             color="green"
             @click.native="
               updateBodyParam(index, {
-                key: param.key,
-                value: param.value,
-                active: param.hasOwnProperty('active') ? !param.active : false,
-                isFile: param.isFile,
+                key: entry.key,
+                value: entry.value,
+                active: entry.hasOwnProperty('active') ? !entry.active : false,
+                isFile: entry.isFile,
               })
             "
           />
@@ -164,6 +164,9 @@
 
 <script setup lang="ts">
 import { ref, Ref, watch } from "@nuxtjs/composition-api"
+import { flow, pipe } from "fp-ts/function"
+import * as O from "fp-ts/Option"
+import * as A from "fp-ts/Array"
 import { FormDataKeyValue } from "@hoppscotch/data"
 import isEqual from "lodash/isEqual"
 import { clone } from "lodash"
@@ -171,10 +174,14 @@ import draggable from "vuedraggable"
 import { pluckRef, useI18n, useToast } from "~/helpers/utils/composables"
 import { useRESTRequestBody } from "~/newstore/RESTSession"
 
+type WorkingFormDataKeyValue = { id: number; entry: FormDataKeyValue }
+
 const t = useI18n()
 
 const toast = useToast()
 
+const idTicker = ref(0)
+
 const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
 const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
@@ -182,23 +189,32 @@ const bodyParams = pluckRef<any, any>(useRESTRequestBody(), "body") as Ref<
 >
 
 // The UI representation of the parameters list (has the empty end param)
-const workingParams = ref<FormDataKeyValue[]>([
+const workingParams = ref<WorkingFormDataKeyValue[]>([
   {
-    key: "",
-    value: "",
-    active: true,
-    isFile: false,
+    id: idTicker.value++,
+    entry: {
+      key: "",
+      value: "",
+      active: true,
+      isFile: false,
+    },
   },
 ])
 
 // Rule: Working Params always have last element is always an empty param
 watch(workingParams, (paramsList) => {
-  if (paramsList.length > 0 && paramsList[paramsList.length - 1].key !== "") {
+  if (
+    paramsList.length > 0 &&
+    paramsList[paramsList.length - 1].entry.key !== ""
+  ) {
     workingParams.value.push({
-      key: "",
-      value: "",
-      active: true,
-      isFile: false,
+      id: idTicker.value++,
+      entry: {
+        key: "",
+        value: "",
+        active: true,
+        isFile: false,
+      },
     })
   }
 })
@@ -208,19 +224,37 @@ watch(
   bodyParams,
   (newParamsList) => {
     // Sync should overwrite working params
-    const filteredWorkingParams = workingParams.value.filter(
-      (e) => e.key !== ""
+    const filteredWorkingParams = pipe(
+      workingParams.value,
+      A.filterMap(
+        flow(
+          O.fromPredicate((e) => e.entry.key !== ""),
+          O.map((e) => e.entry)
+        )
+      )
     )
 
     if (!isEqual(newParamsList, filteredWorkingParams)) {
-      workingParams.value = newParamsList
+      workingParams.value = pipe(
+        newParamsList,
+        A.map((x) => ({ id: idTicker.value++, entry: x }))
+      )
     }
   },
   { immediate: true }
 )
 
 watch(workingParams, (newWorkingParams) => {
-  const fixedParams = newWorkingParams.filter((e) => e.key !== "")
+  const fixedParams = pipe(
+    newWorkingParams,
+    A.filterMap(
+      flow(
+        O.fromPredicate((e) => e.entry.key !== ""),
+        O.map((e) => e.entry)
+      )
+    )
+  )
+
   if (!isEqual(bodyParams.value, fixedParams)) {
     bodyParams.value = fixedParams
   }
@@ -228,16 +262,19 @@ watch(workingParams, (newWorkingParams) => {
 
 const addBodyParam = () => {
   workingParams.value.push({
-    key: "",
-    value: "",
-    active: true,
-    isFile: false,
+    id: idTicker.value++,
+    entry: {
+      key: "",
+      value: "",
+      active: true,
+      isFile: false,
+    },
   })
 }
 
-const updateBodyParam = (index: number, param: FormDataKeyValue) => {
+const updateBodyParam = (index: number, entry: FormDataKeyValue) => {
   workingParams.value = workingParams.value.map((h, i) =>
-    i === index ? param : h
+    i === index ? { id: h.id, entry } : h
   )
 }
 
@@ -280,10 +317,13 @@ const clearContent = () => {
   // set params list to the initial state
   workingParams.value = [
     {
-      key: "",
-      value: "",
-      active: true,
-      isFile: false,
+      id: idTicker.value++,
+      entry: {
+        key: "",
+        value: "",
+        active: true,
+        isFile: false,
+      },
     },
   ]
 }