fix: resolve GraphQL collection tree and tab dissociation issues (#4537)

packages/hoppscotch-common/src/components/collections/SaveRequest.vue

@@ -135,6 +135,7 @@ import {
   useSubmitFeedback,
 } from "~/composables/ai-experiments"
 import { GQLError } from "~/helpers/backend/GQLClient"
+import { ReqType } from "~/helpers/backend/graphql"
 import {
   createRequestInCollection,
   updateTeamRequest,
@@ -521,6 +522,16 @@ const saveRequestAs = async () => {
       requestUpdated as HoppGQLRequest
     )
 
+    GQLTabs.currentActiveTab.value.document = {
+      request: requestUpdated as HoppGQLRequest,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: picked.value.folderPath,
+        requestIndex: picked.value.requestIndex,
+      },
+    }
+
     platform.analytics?.logEvent({
       type: "HOPP_SAVE_REQUEST",
       createdNow: false,
@@ -538,14 +549,24 @@ const saveRequestAs = async () => {
       headers,
     }
 
-    requestSaved()
+    requestSaved(ReqType.Gql)
   } else if (picked.value.pickedType === "gql-my-folder") {
     // TODO: Check for GQL request ?
-    saveGraphqlRequestAs(
+    const insertionIndex = saveGraphqlRequestAs(
       picked.value.folderPath,
       requestUpdated as HoppGQLRequest
     )
 
+    GQLTabs.currentActiveTab.value.document = {
+      request: requestUpdated as HoppGQLRequest,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: picked.value.folderPath,
+        requestIndex: insertionIndex,
+      },
+    }
+
     platform.analytics?.logEvent({
       type: "HOPP_SAVE_REQUEST",
       createdNow: true,
@@ -563,14 +584,24 @@ const saveRequestAs = async () => {
       headers,
     }
 
-    requestSaved()
+    requestSaved(ReqType.Gql)
   } else if (picked.value.pickedType === "gql-my-collection") {
     // TODO: Check for GQL request ?
-    saveGraphqlRequestAs(
+    const insertionIndex = saveGraphqlRequestAs(
       `${picked.value.collectionIndex}`,
       requestUpdated as HoppGQLRequest
     )
 
+    GQLTabs.currentActiveTab.value.document = {
+      request: requestUpdated as HoppGQLRequest,
+      isDirty: false,
+      saveContext: {
+        originLocation: "user-collection",
+        folderPath: `${picked.value.collectionIndex}`,
+        requestIndex: insertionIndex,
+      },
+    }
+
     platform.analytics?.logEvent({
       type: "HOPP_SAVE_REQUEST",
       createdNow: true,
@@ -588,7 +619,7 @@ const saveRequestAs = async () => {
       headers,
     }
 
-    requestSaved()
+    requestSaved(ReqType.Gql)
   }
 }
 
@@ -643,10 +674,14 @@ const updateTeamCollectionOrFolder = (
   )()
 }
 
-const requestSaved = () => {
+const requestSaved = (tab: ReqType = ReqType.Rest) => {
   toast.success(`${t("request.added")}`)
   nextTick(() => {
-    RESTTabs.currentActiveTab.value.document.isDirty = false
+    if (tab === ReqType.Rest) {
+      RESTTabs.currentActiveTab.value.document.isDirty = false
+    } else {
+      GQLTabs.currentActiveTab.value.document.isDirty = false
+    }
   })
   hideModal()
 }

packages/hoppscotch-common/src/components/collections/graphql/AddRequest.vue

@@ -96,7 +96,7 @@
 <script setup lang="ts">
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { HoppRESTRequest } from "@hoppscotch/data"
+import { HoppGQLRequest } from "@hoppscotch/data"
 import { useService } from "dioc/vue"
 import { ref, watch } from "vue"
 
@@ -106,8 +106,8 @@ import {
 } from "~/composables/ai-experiments"
 import { GQLTabService } from "~/services/tab/graphql"
 import IconSparkle from "~icons/lucide/sparkles"
-import IconThumbsUp from "~icons/lucide/thumbs-up"
 import IconThumbsDown from "~icons/lucide/thumbs-down"
+import IconThumbsUp from "~icons/lucide/thumbs-up"
 
 const toast = useToast()
 const t = useI18n()
@@ -117,7 +117,7 @@ const tabs = useService(GQLTabService)
 const props = defineProps<{
   show: boolean
   folderPath?: string
-  requestContext: HoppRESTRequest | null
+  requestContext: HoppGQLRequest | null
 }>()
 
 const emit = defineEmits<{

packages/hoppscotch-common/src/components/collections/graphql/EditRequest.vue

@@ -97,18 +97,21 @@
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppGQLRequest } from "@hoppscotch/data"
-import { ref, watch } from "vue"
+import { nextTick, ref, watch } from "vue"
+import { useService } from "dioc/vue"
 import {
   useRequestNameGeneration,
   useSubmitFeedback,
 } from "~/composables/ai-experiments"
 import { editGraphqlRequest } from "~/newstore/collections"
+import { GQLTabService } from "~/services/tab/graphql"
 import IconSparkle from "~icons/lucide/sparkles"
 import IconThumbsUp from "~icons/lucide/thumbs-up"
 import IconThumbsDown from "~icons/lucide/thumbs-down"
 
 const t = useI18n()
 const toast = useToast()
+const tabs = useService(GQLTabService)
 
 const props = defineProps<{
   show: boolean
@@ -163,8 +166,23 @@ const saveRequest = () => {
     name: editingName.value || (props.request as any).name,
   }
 
+  // Future TODO: Move below store and follow up tab updates to the page level
+  const possibleActiveTab = tabs.getTabRefWithSaveContext({
+    originLocation: "user-collection",
+    requestIndex: props.requestIndex!,
+    folderPath: props.folderPath!,
+  })
+
   editGraphqlRequest(props.folderPath, props.requestIndex, requestUpdated)
 
+  if (possibleActiveTab) {
+    possibleActiveTab.value.document.request.name = requestUpdated.name
+
+    nextTick(() => {
+      possibleActiveTab.value.document.isDirty = false
+    })
+  }
+
   hideModal()
 }
 

packages/hoppscotch-common/src/components/collections/graphql/index.vue

@@ -400,21 +400,13 @@ const duplicateCollection = ({
   collectionSyncID?: string
 }) => duplicateGraphQLCollection(path, collectionSyncID)
 
-const onAddRequest = ({
-  name,
-  path,
-  index,
-}: {
-  name: string
-  path: string
-  index: number
-}) => {
+const onAddRequest = ({ name, path }: { name: string; path: string }) => {
   const newRequest = {
     ...tabs.currentActiveTab.value.document.request,
     name,
   }
 
-  saveGraphqlRequestAs(path, newRequest)
+  const insertionIndex = saveGraphqlRequestAs(path, newRequest)
 
   const { auth, headers } = cascadeParentCollectionForHeaderAuth(
     path,
@@ -425,7 +417,7 @@ const onAddRequest = ({
     saveContext: {
       originLocation: "user-collection",
       folderPath: path,
-      requestIndex: index,
+      requestIndex: insertionIndex,
     },
     request: newRequest,
     isDirty: false,

packages/hoppscotch-common/src/newstore/collections.ts

@@ -1508,6 +1508,14 @@ export function editGraphqlRequest(
 }
 
 export function saveGraphqlRequestAs(path: string, request: HoppGQLRequest) {
+  // For calculating the insertion request index
+  const targetLocation = navigateToFolderWithIndexPath(
+    graphqlCollectionStore.value.state,
+    path.split("/").map((x) => parseInt(x))
+  )
+
+  const insertionIndex = targetLocation!.requests.length
+
   graphqlCollectionStore.dispatch({
     dispatcher: "saveRequestAs",
     payload: {
@@ -1515,6 +1523,8 @@ export function saveGraphqlRequestAs(path: string, request: HoppGQLRequest) {
       request,
     },
   })
+
+  return insertionIndex
 }
 
 export function removeGraphqlRequest(

packages/hoppscotch-common/src/services/persistence/validation-schemas/index.ts

@@ -279,8 +279,7 @@ const HoppGQLSaveContextSchema = z.nullable(
       .object({
         originLocation: z.literal("user-collection"),
         folderPath: z.string(),
-        // TODO: Investigate why this field is not populated at times
-        requestIndex: z.optional(z.number()),
+        requestIndex: z.number(),
       })
       .strict(),
     z