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>
2023-03-31 01:15:42 +06:00
parent dbb45e7253
commit defece95fc
63 changed files with 2262 additions and 1924 deletions
--- a/packages/hoppscotch-common/src/components/collections/AddRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/AddRequest.vue
@@ -43,7 +43,7 @@
 import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { getRESTRequest } from "~/newstore/RESTSession"
+import { currentActiveTab } from "~/helpers/rest/tab"

 const toast = useToast()
 const t = useI18n()
@@ -70,7 +70,7 @@ watch(
  () => props.show,
  (show) => {
    if (show) {
-      name.value = getRESTRequest().name
+      name.value = currentActiveTab.value.document.request.name
    }
  }
 )
--- a/packages/hoppscotch-common/src/components/collections/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/Collection.vue
@@ -203,7 +203,7 @@ const props = defineProps({
  parentID: {
    type: String as PropType<string | null>,
    default: null,
-    required: true,
+    required: false,
  },
  data: {
    type: Object as PropType<HoppCollection<HoppRESTRequest> | TeamCollection>,
--- a/packages/hoppscotch-common/src/components/collections/MyCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/MyCollections.vue
@@ -298,11 +298,10 @@ import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
-import { useReadonlyStream } from "~/composables/stream"
-import { restSaveContext$ } from "~/newstore/RESTSession"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
+import { currentActiveTab } from "~/helpers/rest/tab"

 export type Collection = {
  type: "collections"
@@ -508,23 +507,21 @@ const isSelected = computed(() => {
  }
 })

-const active = useReadonlyStream(restSaveContext$, null)
+const active = computed(() => currentActiveTab.value.document.saveContext)

-const isActiveRequest = computed(() => {
-  return (folderPath: string, requestIndex: number) => {
-    return pipe(
-      active.value,
-      O.fromNullable,
-      O.filter(
-        (active) =>
-          active.originLocation === "user-collection" &&
-          active.folderPath === folderPath &&
-          active.requestIndex === requestIndex
-      ),
-      O.isSome
-    )
-  }
-})
+const isActiveRequest = (folderPath: string, requestIndex: number) => {
+  return pipe(
+    active.value,
+    O.fromNullable,
+    O.filter(
+      (active) =>
+        active.originLocation === "user-collection" &&
+        active.folderPath === folderPath &&
+        active.requestIndex === requestIndex
+    ),
+    O.isSome
+  )
+}

 const selectRequest = (data: {
  request: HoppRESTRequest
@@ -532,6 +529,7 @@ const selectRequest = (data: {
  requestIndex: string
 }) => {
  const { request, folderPath, requestIndex } = data
+
  if (props.saveRequest) {
    emit("select", {
      pickedType: "my-request",
@@ -543,7 +541,7 @@ const selectRequest = (data: {
      request,
      folderPath,
      requestIndex,
-      isActive: isActiveRequest.value(folderPath, parseInt(requestIndex)),
+      isActive: isActiveRequest(folderPath, parseInt(requestIndex)),
    })
  }
 }
--- a/packages/hoppscotch-common/src/components/collections/Request.vue
+++ b/packages/hoppscotch-common/src/components/collections/Request.vue
@@ -152,14 +152,12 @@ import { ref, PropType, watch, computed } from "vue"
 import { HoppRESTRequest } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
 import { TippyComponent } from "vue-tippy"
-import { pipe } from "fp-ts/function"
-import * as RR from "fp-ts/ReadonlyRecord"
-import * as O from "fp-ts/Option"
 import {
  changeCurrentReorderStatus,
  currentReorderingStatus$,
 } from "~/newstore/reordering"
 import { useReadonlyStream } from "~/composables/stream"
+import { getMethodLabelColorClassOf } from "~/helpers/rest/labelColoring"

 type CollectionType = "my-collections" | "team-collections"

@@ -242,20 +240,8 @@ const currentReorderingStatus = useReadonlyStream(currentReorderingStatus$, {
  parentID: "",
 })

-const requestMethodLabels = {
-  get: "text-green-500",
-  post: "text-yellow-500",
-  put: "text-blue-500",
-  delete: "text-red-500",
-  default: "text-gray-500",
-} as const
-
 const requestLabelColor = computed(() =>
-  pipe(
-    requestMethodLabels,
-    RR.lookup(props.request.method.toLowerCase()),
-    O.getOrElseW(() => requestMethodLabels.default)
-  )
+  getMethodLabelColorClassOf(props.request)
 )

 watch(
--- a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
+++ b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -1,3 +1,4 @@
+<!-- eslint-disable prettier/prettier -->
 <template>
  <HoppSmartModal
    v-if="show"
@@ -61,8 +62,8 @@
 </template>

 <script setup lang="ts">
-import { useI18n } from "@composables/i18n"
-import { useToast } from "@composables/toast"
+import { reactive, ref, watch } from "vue"
+import { cloneDeep } from "lodash-es"
 import {
  HoppGQLRequest,
  HoppRESTRequest,
@@ -70,8 +71,6 @@ import {
 } from "@hoppscotch/data"
 import { pipe } from "fp-ts/function"
 import * as TE from "fp-ts/TaskEither"
-import { cloneDeep } from "lodash-es"
-import { reactive, ref, watch } from "vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
 import {
  createRequestInCollection,
@@ -79,11 +78,8 @@ import {
 } from "~/helpers/backend/mutations/TeamRequest"
 import { Picked } from "~/helpers/types/HoppPicked"
 import { getGQLSession, useGQLRequestName } from "~/newstore/GQLSession"
-import {
-  getRESTRequest,
-  setRESTSaveContext,
-  useRESTRequestName,
-} from "~/newstore/RESTSession"
+import { useI18n } from "@composables/i18n"
+import { useToast } from "@composables/toast"
 import {
  editGraphqlRequest,
  editRESTRequest,
@@ -91,6 +87,8 @@ import {
  saveRESTRequestAs,
 } from "~/newstore/collections"
 import { GQLError } from "~/helpers/backend/GQLClient"
+import { computedWithControl } from "@vueuse/core"
+import { currentActiveTab } from "~/helpers/rest/tab"

 const t = useI18n()
 const toast = useToast()
@@ -127,8 +125,13 @@ const emit = defineEmits<{
  (e: "hide-modal"): void
 }>()

-const requestName = ref(
-  props.mode === "rest" ? useRESTRequestName() : useGQLRequestName()
+const gqlRequestName = useGQLRequestName()
+const requestName = computedWithControl(
+  () => [currentActiveTab.value, gqlRequestName.value],
+  () =>
+    props.mode === "rest"
+      ? currentActiveTab.value.document.request.name
+      : gqlRequestName.value
 )

 const requestData = reactive({
@@ -186,7 +189,7 @@ const saveRequestAs = async () => {

  const requestUpdated =
    props.mode === "rest"
-      ? cloneDeep(getRESTRequest())
+      ? cloneDeep(currentActiveTab.value.document.request)
      : cloneDeep(getGQLSession().request)

  if (picked.value.pickedType === "my-collection") {
@@ -198,12 +201,15 @@ const saveRequestAs = async () => {
      requestUpdated
    )

-    setRESTSaveContext({
-      originLocation: "user-collection",
-      folderPath: `${picked.value.collectionIndex}`,
-      requestIndex: insertionIndex,
-      req: requestUpdated,
-    })
+    currentActiveTab.value.document = {
+      request: requestUpdated,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: `${picked.value.collectionIndex}`,
+        requestIndex: insertionIndex,
+      },
+    }

    requestSaved()
  } else if (picked.value.pickedType === "my-folder") {
@@ -215,12 +221,15 @@ const saveRequestAs = async () => {
      requestUpdated
    )

-    setRESTSaveContext({
-      originLocation: "user-collection",
-      folderPath: picked.value.folderPath,
-      requestIndex: insertionIndex,
-      req: requestUpdated,
-    })
+    currentActiveTab.value.document = {
+      request: requestUpdated,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: picked.value.folderPath,
+        requestIndex: insertionIndex,
+      },
+    }

    requestSaved()
  } else if (picked.value.pickedType === "my-request") {
@@ -233,12 +242,15 @@ const saveRequestAs = async () => {
      requestUpdated
    )

-    setRESTSaveContext({
-      originLocation: "user-collection",
-      folderPath: picked.value.folderPath,
-      requestIndex: picked.value.requestIndex,
-      req: requestUpdated,
-    })
+    currentActiveTab.value.document = {
+      request: requestUpdated,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: picked.value.folderPath,
+        requestIndex: picked.value.requestIndex,
+      },
+    }

    requestSaved()
  } else if (picked.value.pickedType === "teams-collection") {
@@ -341,13 +353,17 @@ const updateTeamCollectionOrFolder = (
      (result) => {
        const { createRequestInCollection } = result

-        setRESTSaveContext({
-          originLocation: "team-collection",
-          requestID: createRequestInCollection.id,
-          collectionID: createRequestInCollection.collection.id,
-          teamID: createRequestInCollection.collection.team.id,
-          req: requestUpdated,
-        })
+        currentActiveTab.value.document = {
+          request: requestUpdated,
+          isDirty: false,
+          saveContext: {
+            originLocation: "team-collection",
+            requestID: createRequestInCollection.id,
+            collectionID: createRequestInCollection.collection.id,
+            teamID: createRequestInCollection.collection.team.id,
+          },
+        }
+
        modalLoadingState.value = false
        requestSaved()
      }
--- a/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
+++ b/packages/hoppscotch-common/src/components/collections/TeamCollections.vue
@@ -316,11 +316,10 @@ import { TeamRequest } from "~/helpers/teams/TeamRequest"
 import { ChildrenResult, SmartTreeAdapter } from "~/helpers/treeAdapter"
 import { cloneDeep } from "lodash-es"
 import { HoppRESTRequest } from "@hoppscotch/data"
-import { useReadonlyStream } from "~/composables/stream"
-import { restSaveContext$ } from "~/newstore/RESTSession"
 import { pipe } from "fp-ts/function"
 import * as O from "fp-ts/Option"
 import { Picked } from "~/helpers/types/HoppPicked.js"
+import { currentActiveTab } from "~/helpers/rest/tab"

 const t = useI18n()
 const colorMode = useColorMode()
@@ -520,7 +519,7 @@ const isSelected = computed(() => {
  }
 })

-const active = useReadonlyStream(restSaveContext$, null)
+const active = computed(() => currentActiveTab.value.document.saveContext)

 const isActiveRequest = computed(() => {
  return (requestID: string) => {
--- a/packages/hoppscotch-common/src/components/collections/index.vue
+++ b/packages/hoppscotch-common/src/components/collections/index.vue
@@ -146,18 +146,6 @@
      @import-to-teams="importToTeams"
      @hide-modal="displayModalImportExport(false)"
    />
-    <HttpReqChangeConfirmModal
-      :show="confirmChangeToRequest"
-      :loading="modalLoadingState"
-      @hide-modal="confirmChangeToRequest = false"
-      @save-change="saveRequestChange"
-      @discard-change="discardRequestChange"
-    />
-    <CollectionsSaveRequest
-      mode="rest"
-      :show="showSaveRequestModal"
-      @hide-modal="showSaveRequestModal = false"
-    />
    <TeamsAdd
      :show="showTeamModalAdd"
      @hide-modal="displayTeamModalAdd(false)"
@@ -166,7 +154,7 @@
 </template>

 <script setup lang="ts">
-import { computed, PropType, reactive, ref, watch } from "vue"
+import { computed, PropType, ref, watch } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { Picked } from "~/helpers/types/HoppPicked"
@@ -183,7 +171,6 @@ import {
  editRESTCollection,
  editRESTFolder,
  editRESTRequest,
-  moveRESTFolder,
  moveRESTRequest,
  removeRESTCollection,
  removeRESTFolder,
@@ -192,23 +179,14 @@ import {
  saveRESTRequestAs,
  updateRESTRequestOrder,
  updateRESTCollectionOrder,
+  moveRESTFolder,
 } from "~/newstore/collections"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import {
  HoppCollection,
  HoppRESTRequest,
-  isEqualHoppRESTRequest,
  makeCollection,
-  safelyExtractRESTRequest,
-  translateToNewRequest,
 } from "@hoppscotch/data"
-import {
-  getDefaultRESTRequest,
-  getRESTRequest,
-  getRESTSaveContext,
-  setRESTRequest,
-  setRESTSaveContext,
-} from "~/newstore/RESTSession"
 import { cloneDeep, isEqual } from "lodash-es"
 import { GQLError } from "~/helpers/backend/GQLClient"
 import {
@@ -234,12 +212,26 @@ import {
  getTeamCollectionJSON,
  teamCollToHoppRESTColl,
 } from "~/helpers/backend/helpers"
-import { HoppRequestSaveContext } from "~/helpers/types/HoppRequestSaveContext"
 import * as E from "fp-ts/Either"
 import { platform } from "~/platform"
 import { createCollectionGists } from "~/helpers/gist"
 import { workspaceStatus$ } from "~/newstore/workspace"
 import IconListEnd from "~icons/lucide/list-end"
+import {
+  createNewTab,
+  currentActiveTab,
+  currentTabID,
+  getTabRefWithSaveContext,
+} from "~/helpers/rest/tab"
+import {
+  getRequestsByPath,
+  resolveSaveContextOnRequestReorder,
+} from "~/helpers/collection/request"
+import {
+  getFoldersByPath,
+  resolveSaveContextOnCollectionReorder,
+  updateSaveContextForAffectedRequests,
+} from "~/helpers/collection/collection"

 const t = useI18n()
 const toast = useToast()
@@ -314,15 +306,6 @@ const exportingTeamCollections = ref(false)
 const creatingGistCollection = ref(false)
 const importingMyCollections = ref(false)

-// Confirm Change to request modal
-const confirmChangeToRequest = ref(false)
-const showSaveRequestModal = ref(false)
-const clickedRequest = reactive({
-  folderPath: "" as string | undefined,
-  requestIndex: null as string | null,
-  request: null as HoppRESTRequest | null,
-})
-
 // TeamList-Adapter
 const teamListAdapter = new TeamListAdapter(true)
 const myTeams = useReadonlyStream(teamListAdapter.teamList$, null)
@@ -637,7 +620,7 @@ const addRequest = (payload: {

 const onAddRequest = (requestName: string) => {
  const newRequest = {
-    ...cloneDeep(getRESTRequest()),
+    ...cloneDeep(currentActiveTab.value.document.request),
    name: requestName,
  }

@@ -646,10 +629,14 @@ const onAddRequest = (requestName: string) => {
    if (!path) return
    const insertionIndex = saveRESTRequestAs(path, newRequest)

-    setRESTRequest(newRequest, {
-      originLocation: "user-collection",
-      folderPath: path,
-      requestIndex: insertionIndex,
+    createNewTab({
+      request: newRequest,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: path,
+        requestIndex: insertionIndex,
+      },
    })

    displayModalAddRequest(false)
@@ -677,12 +664,17 @@ const onAddRequest = (requestName: string) => {
        (result) => {
          const { createRequestInCollection } = result

-          setRESTRequest(newRequest, {
-            originLocation: "team-collection",
-            requestID: createRequestInCollection.id,
-            collectionID: createRequestInCollection.collection.id,
-            teamID: createRequestInCollection.collection.team.id,
+          createNewTab({
+            request: newRequest,
+            isDirty: false,
+            saveContext: {
+              originLocation: "team-collection",
+              requestID: createRequestInCollection.id,
+              collectionID: createRequestInCollection.collection.id,
+              teamID: createRequestInCollection.collection.team.id,
+            },
          })
+
          modalLoadingState.value = false
          displayModalAddRequest(false)
        }
@@ -873,27 +865,22 @@ const updateEditingRequest = (newName: string) => {
    ...request,
    name: newName || request.name,
  }
-
-  const saveCtx = getRESTSaveContext()
-
  if (collectionsType.value.type === "my-collections") {
    const folderPath = editingFolderPath.value
    const requestIndex = editingRequestIndex.value

    if (folderPath === null || requestIndex === null) return

+    const possibleActiveTab = getTabRefWithSaveContext({
+      originLocation: "user-collection",
+      requestIndex,
+      folderPath,
+    })
+
    editRESTRequest(folderPath, requestIndex, requestUpdated)

-    if (
-      saveCtx &&
-      saveCtx.originLocation === "user-collection" &&
-      saveCtx.requestIndex === editingRequestIndex.value &&
-      saveCtx.folderPath === editingFolderPath.value
-    ) {
-      setRESTRequest({
-        ...getRESTRequest(),
-        name: requestUpdated.name,
-      })
+    if (possibleActiveTab) {
+      possibleActiveTab.value.document.request.name = requestUpdated.name
    }

    displayModalEditRequest(false)
@@ -925,15 +912,13 @@ const updateEditingRequest = (newName: string) => {
      )
    )()

-    if (
-      saveCtx &&
-      saveCtx.originLocation === "team-collection" &&
-      saveCtx.requestID === editingRequestID.value
-    ) {
-      setRESTRequest({
-        ...getRESTRequest(),
-        name: requestName,
-      })
+    const possibleTab = getTabRefWithSaveContext({
+      originLocation: "team-collection",
+      requestID,
+    })
+
+    if (possibleTab) {
+      possibleTab.value.document.request.name = requestName
    }
  }
 }
@@ -1030,6 +1015,13 @@ const onRemoveCollection = () => {

    removeRESTCollection(collectionIndex)

+    resolveSaveContextOnCollectionReorder({
+      lastIndex: collectionIndex,
+      newIndex: -1,
+      folderPath: "", // root folder
+      length: myCollections.value.length,
+    })
+
    toast.success(t("state.deleted"))
    displayConfirmModal(false)
  } else if (hasTeamWriteAccess.value) {
@@ -1074,6 +1066,14 @@ const onRemoveFolder = () => {

    removeRESTFolder(folderPath)

+    const parentFolder = folderPath.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
+    resolveSaveContextOnCollectionReorder({
+      lastIndex: pathToLastIndex(folderPath),
+      newIndex: -1,
+      folderPath: parentFolder,
+      length: getFoldersByPath(myCollections.value, parentFolder).length,
+    })
+
    toast.success(t("state.deleted"))
    displayConfirmModal(false)
  } else if (hasTeamWriteAccess.value) {
@@ -1124,8 +1124,28 @@ const onRemoveRequest = () => {
      emit("select", null)
    }

+    const possibleTab = getTabRefWithSaveContext({
+      originLocation: "user-collection",
+      folderPath,
+      requestIndex,
+    })
+
+    // If there is a tab attached to this request, dissociate its state and mark it dirty
+    if (possibleTab) {
+      possibleTab.value.document.saveContext = null
+      possibleTab.value.document.isDirty = true
+    }
+
    removeRESTRequest(folderPath, requestIndex)

+    // the same function is used to reorder requests since after removing, it's basically doing reorder
+    resolveSaveContextOnRequestReorder({
+      lastIndex: requestIndex,
+      newIndex: -1,
+      folderPath,
+      length: getRequestsByPath(myCollections.value, folderPath).length,
+    })
+
    toast.success(t("state.deleted"))
    displayConfirmModal(false)
  } else if (hasTeamWriteAccess.value) {
@@ -1157,6 +1177,17 @@ const onRemoveRequest = () => {
        }
      )
    )()
+
+    // If there is a tab attached to this request, dissociate its state and mark it dirty
+    const possibleTab = getTabRefWithSaveContext({
+      originLocation: "team-collection",
+      requestID,
+    })
+
+    if (possibleTab) {
+      possibleTab.value.document.saveContext = undefined
+      possibleTab.value.document.isDirty = true
+    }
  }
 }

@@ -1165,41 +1196,6 @@ const selectPicked = (payload: Picked | null) => {
  emit("select", payload)
 }

-// select request change modal functions
-const noChangeSetRESTRequest = () => {
-  const folderPath = clickedRequest.folderPath
-  const requestIndex = clickedRequest.requestIndex
-  const request = clickedRequest.request
-
-  let newContext: HoppRequestSaveContext | null = null
-  if (collectionsType.value.type === "my-collections") {
-    if (!folderPath || !requestIndex || !request) return
-
-    newContext = {
-      originLocation: "user-collection",
-      requestIndex: parseInt(requestIndex),
-      folderPath,
-      req: cloneDeep(request),
-    }
-  } else if (collectionsType.value.type === "team-collections") {
-    if (!requestIndex || !request) return
-    newContext = {
-      originLocation: "team-collection",
-      requestID: requestIndex,
-      req: cloneDeep(request),
-    }
-  }
-  setRESTRequest(
-    cloneDeep(
-      safelyExtractRESTRequest(
-        translateToNewRequest(request),
-        getDefaultRESTRequest()
-      )
-    ),
-    newContext
-  )
-}
-
 /**
 * This function is called when the user clicks on a request
 * @param selectedRequest The request that the user clicked on emited from the collection tree
@@ -1210,131 +1206,51 @@ const selectRequest = (selectedRequest: {
  requestIndex: string
  isActive: boolean
 }) => {
-  const { request, folderPath, requestIndex, isActive } = selectedRequest
-  // If the request is already active, then we reset the save context
-  if (isActive) {
-    setRESTSaveContext(null)
-    return
-  }
+  const { request, folderPath, requestIndex } = selectedRequest

-  const currentRESTRequest = getRESTRequest()
+  // If there is a request with this save context, switch into it
+  let possibleTab = null

-  const currentRESTSaveContext = getRESTSaveContext()
-
-  clickedRequest.folderPath = folderPath
-  clickedRequest.requestIndex = requestIndex
-  clickedRequest.request = request
-
-  // If there is no active context,
-  if (!currentRESTSaveContext) {
-    // Check if the use is clicking on the same request
-    if (isEqualHoppRESTRequest(currentRESTRequest, request)) {
-      noChangeSetRESTRequest()
+  if (collectionsType.value.type === "team-collections") {
+    possibleTab = getTabRefWithSaveContext({
+      originLocation: "team-collection",
+      requestID: requestIndex,
+    })
+    if (possibleTab) {
+      currentTabID.value = possibleTab.value.id
    } else {
-      // can show the save change modal here since there is change in the request
-      // and the user is clicking on the different request
-      // and currently we dont have any active context
-
-      confirmChangeToRequest.value = true
-    }
-  } else {
-    if (isEqualHoppRESTRequest(currentRESTRequest, request)) {
-      noChangeSetRESTRequest()
-    } else {
-      const currentReqWithNoChange = currentRESTSaveContext.req
-      // now we compare the current request
-      // with the request inside the active context
-      if (
-        currentReqWithNoChange &&
-        isEqualHoppRESTRequest(currentReqWithNoChange, currentRESTRequest)
-      ) {
-        noChangeSetRESTRequest()
-      } else {
-        // there is change in the request
-        // so we can show the save change modal here
-        confirmChangeToRequest.value = true
-      }
-    }
-  }
-}
-
-/**
- * This function is called when the user clicks on the save button in the confirm change modal
- * There are two cases
- * 1. There is no active context
- * 2. There is active context
- * In the first case, we can show the save request as modal and user can select the location to save the request
- * In the second case, we can save the request in the same location and update the request
- */
-const saveRequestChange = () => {
-  const currentRESTSaveContext = getRESTSaveContext()
-
-  if (!currentRESTSaveContext) {
-    showSaveRequestModal.value = true
-    confirmChangeToRequest.value = false
-    return
-  }
-
-  const currentRESTRequest = getRESTRequest()
-
-  if (currentRESTSaveContext.originLocation === "user-collection") {
-    const folderPath = currentRESTSaveContext.folderPath
-    const requestIndex = currentRESTSaveContext.requestIndex
-
-    editRESTRequest(folderPath, requestIndex, currentRESTRequest)
-
-    // after saving the request, we need to change the context
-    // to the new request (clicked request)
-    noChangeSetRESTRequest()
-
-    toast.success(`${t("request.saved")}`)
-    confirmChangeToRequest.value = false
-  } else {
-    modalLoadingState.value = true
-
-    const requestID = currentRESTSaveContext.requestID
-
-    const data = {
-      request: JSON.stringify(currentRESTRequest),
-      title: currentRESTRequest.name,
-    }
-
-    pipe(
-      updateTeamRequest(requestID, data),
-      TE.match(
-        (err: GQLError<string>) => {
-          toast.error(`${getErrorMessage(err)}`)
-          confirmChangeToRequest.value = false
-          showSaveRequestModal.value = true
-          modalLoadingState.value = false
+      createNewTab({
+        request: cloneDeep(request),
+        isDirty: false,
+        saveContext: {
+          originLocation: "team-collection",
+          requestID: requestIndex,
        },
-        () => {
-          toast.success(`${t("request.saved")}`)
-          modalLoadingState.value = false
-          confirmChangeToRequest.value = false
-
-          const clickedRequestID = clickedRequest.requestIndex
-
-          if (!clickedRequestID) return
-
-          noChangeSetRESTRequest()
-        }
-      )
-    )()
+      })
+    }
+  } else {
+    possibleTab = getTabRefWithSaveContext({
+      originLocation: "user-collection",
+      requestIndex: parseInt(requestIndex),
+      folderPath: folderPath!,
+    })
+    if (possibleTab) {
+      currentTabID.value = possibleTab.value.id
+    } else {
+      // If not, open the request in a new tab
+      createNewTab({
+        request: cloneDeep(request),
+        isDirty: false,
+        saveContext: {
+          originLocation: "user-collection",
+          folderPath: folderPath!,
+          requestIndex: parseInt(requestIndex),
+        },
+      })
+    }
  }
 }

-/**
- * This function is called when the user clicks on the
- * don't save button in the confirm change modal
- * This function will change the request to the clicked request
- * without saving the changes
- */
-const discardRequestChange = () => {
-  noChangeSetRESTRequest()
-  confirmChangeToRequest.value = false
-}
-
 /**
 * Used to get the index of the request from the path
 * @param path The path of the request
@@ -1355,13 +1271,42 @@ const dropRequest = (payload: {
  destinationCollectionIndex: string
 }) => {
  const { folderPath, requestIndex, destinationCollectionIndex } = payload
+
  if (!requestIndex || !destinationCollectionIndex) return
+
  if (collectionsType.value.type === "my-collections" && folderPath) {
    moveRESTRequest(
      folderPath,
      pathToLastIndex(requestIndex),
      destinationCollectionIndex
    )
+
+    const possibleTab = getTabRefWithSaveContext({
+      originLocation: "user-collection",
+      folderPath,
+      requestIndex: pathToLastIndex(requestIndex),
+    })
+
+    // If there is a tab attached to this request, change save its save context
+    if (possibleTab) {
+      possibleTab.value.document.saveContext = {
+        originLocation: "user-collection",
+        folderPath: destinationCollectionIndex,
+        requestIndex: getRequestsByPath(
+          myCollections.value,
+          destinationCollectionIndex
+        ).length,
+      }
+    }
+
+    // When it's drop it's basically getting deleted from last folder. reordering last folder accordingly
+    resolveSaveContextOnRequestReorder({
+      lastIndex: pathToLastIndex(requestIndex),
+      newIndex: -1, // being deleted from last folder
+      folderPath,
+      length: getRequestsByPath(myCollections.value, folderPath).length,
+    })
+
    toast.success(`${t("request.moved")}`)
    draggingToRoot.value = false
  } else if (hasTeamWriteAccess.value) {
@@ -1384,6 +1329,18 @@ const dropRequest = (payload: {
            requestMoveLoading.value.indexOf(requestIndex),
            1
          )
+
+          const possibleTab = getTabRefWithSaveContext({
+            originLocation: "team-collection",
+            requestID: requestIndex,
+          })
+
+          if (possibleTab) {
+            possibleTab.value.document.saveContext = {
+              originLocation: "team-collection",
+              requestID: requestIndex,
+            }
+          }
          toast.success(`${t("request.moved")}`)
        }
      )
@@ -1440,6 +1397,7 @@ const dropCollection = (payload: {
  const { collectionIndexDragged, destinationCollectionIndex } = payload
  if (!collectionIndexDragged || !destinationCollectionIndex) return
  if (collectionIndexDragged === destinationCollectionIndex) return
+
  if (collectionsType.value.type === "my-collections") {
    if (
      checkIfCollectionIsAParentOfTheChildren(
@@ -1450,7 +1408,32 @@ const dropCollection = (payload: {
      toast.error(`${t("team.parent_coll_move")}`)
      return
    }
+
+    const parentFolder = collectionIndexDragged
+      .split("/")
+      .slice(0, -1)
+      .join("/") // remove last folder to get parent folder
+    const totalFoldersOfDestinationCollection =
+      getFoldersByPath(myCollections.value, destinationCollectionIndex).length -
+      (parentFolder === destinationCollectionIndex ? 1 : 0)
+
    moveRESTFolder(collectionIndexDragged, destinationCollectionIndex)
+
+    resolveSaveContextOnCollectionReorder(
+      {
+        lastIndex: pathToLastIndex(collectionIndexDragged),
+        newIndex: -1,
+        folderPath: parentFolder,
+        length: getFoldersByPath(myCollections.value, parentFolder).length,
+      },
+      "drop"
+    )
+
+    updateSaveContextForAffectedRequests(
+      collectionIndexDragged,
+      `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
+    )
+
    draggingToRoot.value = false
    toast.success(`${t("collection.moved")}`)
  } else if (hasTeamWriteAccess.value) {
@@ -1600,6 +1583,11 @@ const updateRequestOrder = (payload: {
        pathToLastIndex(destinationRequestIndex),
        destinationCollectionIndex
      )
+      resolveSaveContextOnRequestReorder({
+        lastIndex: pathToLastIndex(dragedRequestIndex),
+        newIndex: pathToLastIndex(destinationRequestIndex),
+        folderPath: destinationCollectionIndex,
+      })
      toast.success(`${t("request.order_changed")}`)
    }
  } else if (hasTeamWriteAccess.value) {
@@ -1654,6 +1642,11 @@ const updateCollectionOrder = (payload: {
        dragedCollectionIndex,
        destinationCollectionIndex
      )
+      resolveSaveContextOnCollectionReorder({
+        lastIndex: pathToLastIndex(dragedCollectionIndex),
+        newIndex: pathToLastIndex(destinationCollectionIndex),
+        folderPath: dragedCollectionIndex.split("/").slice(0, -1).join("/"),
+      })
      toast.success(`${t("collection.order_changed")}`)
    }
  } else if (hasTeamWriteAccess.value) {