refactor: better tab dirty check

Mark the tab (saved request under a collection) as not dirty if the request contents are reset to the value since previous save.
hoppscotch · May 1, 2024 · 09c1221 · 09c1221
1 parent fcea882
commit 09c1221
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 33 deletions.
diff --git a/packages/hoppscotch-common/src/components/collections/SaveRequest.vue b/packages/hoppscotch-common/src/components/collections/SaveRequest.vue
@@ -266,16 +266,11 @@ const saveRequestAs = async () => {
       return
     }
 
-    const { providerID, requestID, workspaceID } = requestHandle.value.data
-
     RESTTabs.currentActiveTab.value.document = {
       request: updatedRequest,
       isDirty: false,
       saveContext: {
         originLocation: "workspace-user-collection",
-        workspaceID,
-        providerID,
-        requestID,
         requestHandle,
       },
     }
@@ -312,16 +307,12 @@ const saveRequestAs = async () => {
       return
     }
 
-    const { providerID, requestID, workspaceID } = requestHandle.value.data
-
     RESTTabs.currentActiveTab.value.document = {
       request: updatedRequest,
       isDirty: false,
       saveContext: {
         originLocation: "workspace-user-collection",
-        workspaceID,
-        providerID,
-        requestID,
+        requestHandle,
       },
     }
 

diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -512,34 +512,25 @@ const saveRequest = async () => {
     showSaveRequestModal.value = true
     return
   }
+
   if (saveCtx.originLocation === "workspace-user-collection") {
     const updatedRequest = tab.value.document.request
 
-    if (!workspaceService.activeWorkspaceHandle.value) {
+    if (
+      !workspaceService.activeWorkspaceHandle.value ||
+      !saveCtx.requestHandle
+    ) {
       return
     }
 
-    const { requestID } = saveCtx
-
-    const requestHandleResult = await workspaceService.getRequestHandle(
-      workspaceService.activeWorkspaceHandle.value,
-      requestID
-    )
-
-    if (E.isLeft(requestHandleResult)) {
-      // INVALID_COLLECTION_HANDLE | INVALID_REQUEST_ID | REQUEST_NOT_FOUND
-      showSaveRequestModal.value = true
+    const requestHandle = ref(saveCtx.requestHandle)
 
-      if (!tab.value.document.isDirty) {
-        tab.value.document.isDirty = true
-      }
+    if (!requestHandle.value) {
       return
     }
 
-    const requestHandle = requestHandleResult.right
-
     if (requestHandle.value.type === "invalid") {
-      // WORKSPACE_INVALIDATED
+      showSaveRequestModal.value = true
       return
     }
 

diff --git a/packages/hoppscotch-common/src/components/http/RequestTab.vue b/packages/hoppscotch-common/src/components/http/RequestTab.vue
@@ -17,10 +17,11 @@
 <script setup lang="ts">
 import { watch } from "vue"
 import { useVModel } from "@vueuse/core"
-import { cloneDeep } from "lodash-es"
-import { isEqualHoppRESTRequest } from "@hoppscotch/data"
+import { cloneDeep, isEqual } from "lodash-es"
 import { HoppTab } from "~/services/tab"
 import { HoppRESTDocument } from "~/helpers/rest/document"
+import { WorkspaceRequest } from "~/services/new-workspace/workspace"
+import { HandleRef } from "~/services/new-workspace/handle"
 
 // TODO: Move Response and Request execution code to over here
 
@@ -32,16 +33,44 @@ const emit = defineEmits<{
 
 const tab = useVModel(props, "modelValue", emit)
 
-// TODO: Come up with a better dirty check
 let oldRequest = cloneDeep(tab.value.document.request)
+
 watch(
   () => tab.value.document.request,
   (updatedValue) => {
+    // Request from the collection tree
     if (
-      !tab.value.document.isDirty &&
-      !isEqualHoppRESTRequest(oldRequest, updatedValue)
+      tab.value.document.saveContext?.originLocation ===
+      "workspace-user-collection"
     ) {
-      tab.value.document.isDirty = true
+      const requestHandle = tab.value.document.saveContext.requestHandle as
+        | HandleRef<WorkspaceRequest>["value"]
+        | undefined
+
+      if (!requestHandle || requestHandle.type === "invalid") {
+        return
+      }
+
+      if (
+        !tab.value.document.isDirty &&
+        !isEqual(oldRequest, requestHandle?.data.request)
+      ) {
+        tab.value.document.isDirty = true
+      }
+
+      if (
+        tab.value.document.isDirty &&
+        isEqual(oldRequest, requestHandle?.data.request)
+      ) {
+        tab.value.document.isDirty = false
+      }
+
+      return
+    }
+
+    // Unsaved request
+    if (tab.value.document.isDirty && isEqual(oldRequest, updatedValue)) {
+      tab.value.document.isDirty = false
     }
 
     oldRequest = cloneDeep(updatedValue)