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

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

packages/hoppscotch-app/components/graphql/RequestOptions.vue

@@ -308,7 +308,7 @@ import { GQLConnection } from "~/helpers/GQLConnection"
 import { makeGQLHistoryEntry, addGraphqlHistoryEntry } from "~/newstore/history"
 import { logHoppRequestRunToAnalytics } from "~/helpers/fb/analytics"
 import { getCurrentStrategyID } from "~/helpers/network"
-import { makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { GQLHeader, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
 import { useCodemirror } from "~/helpers/editor/codemirror"
 import jsonLinter from "~/helpers/editor/linting/json"
 import { createGQLQueryLinter } from "~/helpers/editor/linting/gqlQuery"
@@ -402,18 +402,11 @@ watch(
   { deep: true }
 )
 
-const editBulkHeadersLine = (
-  index: number,
-  item?: {
-    key: string
-    value: string
-    active: boolean
-  }
-) => {
+const editBulkHeadersLine = (index: number, item?: GQLHeader | null) => {
   bulkHeaders.value = headers.value
     .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]
@@ -542,8 +535,27 @@ const updateRequestHeader = (
 }
 
 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").toString(), {
+      icon: "delete",
+      action: [
+        {
+          text: t("action.undo").toString(),
+          onClick: (_, toastObject) => {
+            setGQLHeaders(headersBeforeDeletion as GQLHeader[])
+            editBulkHeadersLine(index, deletedItem)
+            toastObject.goAway(0)
+          },
+        },
+      ],
+    })
+  }
 }
 
 const clearContent = () => {

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 = () => {