feat: add undo when parameters and headers are deleted, resolves #1951 (#1955)

Co-authored-by: liyasthomas <liyascthomas@gmail.com>

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

@@ -172,7 +172,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, useContext, watch, onBeforeUpdate } from "@nuxtjs/composition-api"
+import { onBeforeUpdate, ref, useContext, watch } from "@nuxtjs/composition-api"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import {
   addRESTHeader,
@@ -238,13 +238,13 @@ watch(
 
 onBeforeUpdate(() => editBulkHeadersLine(-1, null))
 
-const editBulkHeadersLine = (index: number, item?: HoppRESTParam) => {
+const editBulkHeadersLine = (index: number, item?: HoppRESTHeader | null) => {
   const headers = headers$.value
 
   bulkHeaders.value = headers
     .reduce((all, header, pIndex) => {
       const current =
-        index === pIndex && item !== null
+        index === pIndex && item != null
           ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
           : `${header.active ? "" : "//"}${header.key}: ${header.value}`
       return [...all, current]
@@ -270,8 +270,27 @@ const updateHeader = (index: number, item: HoppRESTHeader) => {
 }
 
 const deleteHeader = (index: number) => {
+  const headersBeforeDeletion = headers$.value
+
   deleteRESTHeader(index)
   editBulkHeadersLine(index, null)
+
+  const deletedItem = headersBeforeDeletion[index]
+  if (deletedItem.key || deletedItem.value) {
+    $toast.success(t("state.deleted").toString(), {
+      icon: "delete",
+      action: [
+        {
+          text: t("action.undo").toString(),
+          onClick: (_, toastObject) => {
+            setRESTHeaders(headersBeforeDeletion as HoppRESTHeader[])
+            editBulkHeadersLine(index, deletedItem)
+            toastObject.goAway(0)
+          },
+        },
+      ],
+    })
+  }
 }
 
 const clearContent = () => {

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

@@ -231,13 +231,13 @@ watch(
 
 onBeforeUpdate(() => editBulkParamsLine(-1, null))
 
-const editBulkParamsLine = (index: number, item?: HoppRESTParam) => {
+const editBulkParamsLine = (index: number, item?: HoppRESTParam | null) => {
   const params = params$.value
 
   bulkParams.value = params
     .reduce((all, param, pIndex) => {
       const current =
-        index === pIndex && item !== null
+        index === pIndex && item != null
           ? `${item.active ? "" : "//"}${item.key}: ${item.value}`
           : `${param.active ? "" : "//"}${param.key}: ${param.value}`
       return [...all, current]
@@ -263,8 +263,27 @@ const updateParam = (index: number, item: HoppRESTParam) => {
 }
 
 const deleteParam = (index: number) => {
+  const parametersBeforeDeletion = params$.value
+
   deleteRESTParam(index)
   editBulkParamsLine(index, null)
+
+  const deletedItem = parametersBeforeDeletion[index]
+  if (deletedItem.key || deletedItem.value) {
+    $toast.success(t("state.deleted").toString(), {
+      icon: "delete",
+      action: [
+        {
+          text: t("action.undo").toString(),
+          onClick: (_, toastObject) => {
+            setRESTParams(parametersBeforeDeletion as HoppRESTParam[])
+            editBulkParamsLine(index, deletedItem)
+            toastObject.goAway(0)
+          },
+        },
+      ],
+    })
+  }
 }
 
 const clearContent = () => {