feat: rest revamp (#2918)

Co-authored-by: Liyas Thomas <liyascthomas@gmail.com>
Co-authored-by: Nivedin <53208152+nivedin@users.noreply.github.com>
Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

packages/hoppscotch-common/src/components/history/index.vue

@@ -148,17 +148,6 @@
       @hide-modal="confirmRemove = false"
       @resolve="clearHistory"
     />
-    <HttpReqChangeConfirmModal
-      :show="confirmChange"
-      @hide-modal="confirmChange = false"
-      @save-change="saveRequestChange"
-      @discard-change="discardRequestChange"
-    />
-    <CollectionsSaveRequest
-      mode="rest"
-      :show="showSaveRequestModal"
-      @hide-modal="showSaveRequestModal = false"
-    />
   </div>
 </template>
 
@@ -169,17 +158,11 @@ import IconTrash from "~icons/lucide/trash"
 import IconFilter from "~icons/lucide/filter"
 import { computed, ref, Ref, toRaw } from "vue"
 import { useColorMode } from "@composables/theming"
-import {
-  HoppGQLRequest,
-  HoppRESTRequest,
-  isEqualHoppRESTRequest,
-  safelyExtractRESTRequest,
-} from "@hoppscotch/data"
+import { HoppGQLRequest, HoppRESTRequest } from "@hoppscotch/data"
 import { groupBy, escapeRegExp, filter } from "lodash-es"
 import { useTimeAgo } from "@vueuse/core"
 import { pipe } from "fp-ts/function"
 import * as A from "fp-ts/Array"
-import * as E from "fp-ts/Either"
 import { useI18n } from "@composables/i18n"
 import { useReadonlyStream } from "@composables/stream"
 import { useToast } from "@composables/toast"
@@ -195,20 +178,10 @@ import {
   RESTHistoryEntry,
   GQLHistoryEntry,
 } from "~/newstore/history"
-import {
-  getDefaultRESTRequest,
-  getRESTRequest,
-  getRESTSaveContext,
-  setRESTRequest,
-  setRESTSaveContext,
-} from "~/newstore/RESTSession"
-import { editRESTRequest } from "~/newstore/collections"
-import { runMutation } from "~/helpers/backend/GQLClient"
-import { UpdateRequestDocument } from "~/helpers/backend/graphql"
-import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
 
 import HistoryRestCard from "./rest/Card.vue"
 import HistoryGraphqlCard from "./graphql/Card.vue"
+import { createNewTab } from "~/helpers/rest/tab"
 
 type HistoryEntry = GQLHistoryEntry | RESTHistoryEntry
 
@@ -229,10 +202,6 @@ const filterText = ref("")
 const showMore = ref(false)
 const confirmRemove = ref(false)
 
-const clickedHistory = ref<HistoryEntry | null>(null)
-const confirmChange = ref(false)
-const showSaveRequestModal = ref(false)
-
 const history = useReadonlyStream<RESTHistoryEntry[] | GQLHistoryEntry[]>(
   props.page === "rest" ? restHistory$ : graphqlHistory$,
   []
@@ -326,111 +295,13 @@ const clearHistory = () => {
   toast.success(`${t("state.history_deleted")}`)
 }
 
-const setRestReq = (request: HoppRESTRequest | null | undefined) => {
-  setRESTRequest(safelyExtractRESTRequest(request, getDefaultRESTRequest()))
-}
-
 // NOTE: For GQL, the HistoryGraphqlCard component already implements useEntry
 // (That is not a really good behaviour tho ¯\_(ツ)_/¯)
 const useHistory = (entry: RESTHistoryEntry) => {
-  const currentFullReq = getRESTRequest()
-
-  const currentReqWithNoChange = getRESTSaveContext()?.req
-
-  // checks if the current request is the same as the save context request if present
-  if (
-    currentReqWithNoChange &&
-    isEqualHoppRESTRequest(currentReqWithNoChange, currentFullReq)
-  ) {
-    props.page === "rest" && setRestReq(entry.request)
-    clickedHistory.value = entry
-  }
-  // Initial state trigers a popup
-  else if (!clickedHistory.value) {
-    clickedHistory.value = entry
-    confirmChange.value = true
-    return
-  }
-  // Checks if there are any change done in current request and the history request
-  else if (
-    !isEqualHoppRESTRequest(
-      currentFullReq,
-      clickedHistory.value.request as HoppRESTRequest
-    )
-  ) {
-    clickedHistory.value = entry
-    confirmChange.value = true
-  } else {
-    props.page === "rest" && setRestReq(entry.request)
-    clickedHistory.value = entry
-  }
-}
-
-/** Save current request to the collection */
-const saveRequestChange = () => {
-  const saveCtx = getRESTSaveContext()
-  saveCurrentRequest(saveCtx)
-  confirmChange.value = false
-}
-
-/** Discard changes and change the current request and remove the collection context */
-const discardRequestChange = () => {
-  const saveCtx = getRESTSaveContext()
-  if (saveCtx) {
-    setRESTSaveContext(null)
-  }
-  clickedHistory.value &&
-    setRestReq(clickedHistory.value.request as HoppRESTRequest)
-  confirmChange.value = false
-}
-
-const saveCurrentRequest = (saveCtx: HoppRequestSaveContext | null) => {
-  if (!saveCtx) {
-    showSaveRequestModal.value = true
-    return
-  }
-  if (saveCtx.originLocation === "user-collection") {
-    try {
-      editRESTRequest(
-        saveCtx.folderPath,
-        saveCtx.requestIndex,
-        getRESTRequest()
-      )
-      clickedHistory.value &&
-        setRestReq(clickedHistory.value.request as HoppRESTRequest)
-      setRESTSaveContext(null)
-      toast.success(`${t("request.saved")}`)
-    } catch (e) {
-      console.error(e)
-      setRESTSaveContext(null)
-      saveCurrentRequest(null)
-    }
-  } else if (saveCtx.originLocation === "team-collection") {
-    const req = getRESTRequest()
-    try {
-      runMutation(UpdateRequestDocument, {
-        requestID: saveCtx.requestID,
-        data: {
-          title: req.name,
-          request: JSON.stringify(req),
-        },
-      })().then((result) => {
-        if (E.isLeft(result)) {
-          toast.error(`${t("profile.no_permission")}`)
-        } else {
-          toast.success(`${t("request.saved")}`)
-        }
-      })
-      clickedHistory.value &&
-        setRestReq(clickedHistory.value.request as HoppRESTRequest)
-      setRESTSaveContext(null)
-    } catch (error) {
-      showSaveRequestModal.value = true
-      toast.error(`${t("error.something_went_wrong")}`)
-      console.error(error)
-      setRESTSaveContext(null)
-    }
-  }
+  createNewTab({
+    request: entry.request,
+    isDirty: false,
+  })
 }
 
 const isRESTHistoryEntry = (