fix: collection auth headers active tab update bug and type fix (#3899)

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

@@ -66,19 +66,18 @@
 <script setup lang="ts">
 import { watch, ref } from "vue"
 import { useI18n } from "@composables/i18n"
-import { HoppCollection } from "@hoppscotch/data"
+import { HoppCollection, HoppRESTAuth, HoppRESTHeaders } from "@hoppscotch/data"
 import { RESTOptionTabs } from "../http/RequestOptions.vue"
-import { TeamCollection } from "~/helpers/teams/TeamCollection"
 import { clone } from "lodash-es"
 import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const t = useI18n()
 
 type EditingProperties = {
-  collection: HoppCollection | TeamCollection | null
+  collection: Partial<HoppCollection> | null
   isRootCollection: boolean
   path: string
-  inheritedProperties: HoppInheritedProperty | undefined
+  inheritedProperties?: HoppInheritedProperty
 }
 
 const props = withDefaults(
@@ -95,21 +94,23 @@ const props = withDefaults(
 )
 
 const emit = defineEmits<{
-  (e: "set-collection-properties", newCollection: any): void
+  (
+    e: "set-collection-properties",
+    newCollection: Omit<EditingProperties, "inheritedProperties">
+  ): void
   (e: "hide-modal"): void
 }>()
 
-const editableCollection = ref({
+const editableCollection = ref<{
-  body: {
+  headers: HoppRESTHeaders
-    contentType: null,
+  auth: HoppRESTAuth
-    body: null,
+}>({
-  },
   headers: [],
   auth: {
     authType: "inherit",
     authActive: false,
   },
-}) as any
+})
 
 const selectedOptionTab = ref("headers")
 
@@ -122,17 +123,13 @@ watch(
   (show) => {
     if (show && props.editingProperties?.collection) {
       editableCollection.value.auth = clone(
-        props.editingProperties.collection.auth
+        props.editingProperties.collection.auth as HoppRESTAuth
       )
       editableCollection.value.headers = clone(
-        props.editingProperties.collection.headers
+        props.editingProperties.collection.headers as HoppRESTHeaders
       )
     } else {
       editableCollection.value = {
-        body: {
-          contentType: null,
-          body: null,
-        },
         headers: [],
         auth: {
           authType: "inherit",
@@ -146,7 +143,6 @@ watch(
 const saveEditedCollection = () => {
   if (!props.editingProperties) return
   const finalCollection = clone(editableCollection.value)
-  delete finalCollection.body
   const collection = {
     path: props.editingProperties.path,
     collection: {
@@ -155,7 +151,7 @@ const saveEditedCollection = () => {
     },
     isRootCollection: props.editingProperties.isRootCollection,
   }
-  emit("set-collection-properties", collection)
+  emit("set-collection-properties", collection as EditingProperties)
 }
 
 const hideModal = () => {

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

@@ -292,7 +292,7 @@ const editingRequestIndex = ref<number | null>(null)
 const editingRequestID = ref<string | null>(null)
 
 const editingProperties = ref<{
-  collection: Omit<HoppCollection, "v"> | TeamCollection | null
+  collection: Partial<HoppCollection> | null
   isRootCollection: boolean
   path: string
   inheritedProperties?: HoppInheritedProperty
@@ -739,7 +739,7 @@ const onAddRequest = (requestName: string) => {
             saveContext: {
               originLocation: "team-collection",
               requestID: createRequestInCollection.id,
-              collectionID: createRequestInCollection.collection.id,
+              collectionID: path,
               teamID: createRequestInCollection.collection.team.id,
             },
             inheritedProperties: {
@@ -2021,7 +2021,7 @@ const editProperties = (payload: {
         {
           parentID: "",
           parentName: "",
-          inheritedHeaders: [],
+          inheritedHeader: {},
         },
       ],
     } as HoppInheritedProperty
@@ -2039,7 +2039,7 @@ const editProperties = (payload: {
     }
 
     editingProperties.value = {
-      collection,
+      collection: collection as Partial<HoppCollection>,
       isRootCollection: isAlreadyInRoot(collectionIndex),
       path: collectionIndex,
       inheritedProperties,
@@ -2083,7 +2083,7 @@ const editProperties = (payload: {
     }
 
     editingProperties.value = {
-      collection: coll,
+      collection: coll as unknown as Partial<HoppCollection>,
       isRootCollection: isAlreadyInRoot(collectionIndex),
       path: collectionIndex,
       inheritedProperties,
@@ -2094,11 +2094,12 @@ const editProperties = (payload: {
 }
 
 const setCollectionProperties = (newCollection: {
-  collection: HoppCollection
+  collection: Partial<HoppCollection> | null
-  path: string
   isRootCollection: boolean
+  path: string
 }) => {
   const { collection, path, isRootCollection } = newCollection
+  if (!collection) return
 
   if (collectionsType.value.type === "my-collections") {
     if (isRootCollection) {
@@ -2148,8 +2149,7 @@ const setCollectionProperties = (newCollection: {
           auth,
           headers,
         },
-        "rest",
+        "rest"
-        "team"
       )
     }, 200)
   }

packages/hoppscotch-common/src/components/http/Headers.vue

@@ -307,6 +307,7 @@ import { useColorMode } from "@composables/theming"
 import { computed, reactive, ref, watch } from "vue"
 import { isEqual, cloneDeep } from "lodash-es"
 import {
+  HoppRESTAuth,
   HoppRESTHeader,
   HoppRESTRequest,
   parseRawKeyValueEntriesE,
@@ -364,7 +365,12 @@ const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 
 // v-model integration with props and emit
 const props = defineProps<{
-  modelValue: HoppRESTRequest
+  modelValue:
+    | HoppRESTRequest
+    | {
+        headers: HoppRESTHeader[]
+        auth: HoppRESTAuth
+      }
   isCollectionProperty?: boolean
   inheritedProperties?: HoppInheritedProperty
   envs?: AggregateEnvironment[]

packages/hoppscotch-common/src/helpers/collection/collection.ts

@@ -109,7 +109,6 @@ export function updateSaveContextForAffectedRequests(
     }
   }
 }
-
 /**
  * Used to check the new folder path is close to the save context folder path or not
  * @param folderPathCurrent The path saved as the inherited path in the inherited properties
@@ -123,120 +122,109 @@ function folderPathCloseToSaveContext(
   saveContextPath: string
 ) {
   if (!folderPathCurrent) return newFolderPath
+
   const folderPathCurrentArray = folderPathCurrent.split("/")
   const newFolderPathArray = newFolderPath.split("/")
-
   const saveContextFolderPathArray = saveContextPath.split("/")
 
-  let folderPathCurrentMatch = 0
+  const folderPathCurrentMatch = folderPathCurrentArray.filter(
+    (folder, i) => folder === saveContextFolderPathArray[i]
+  ).length
 
-  for (let i = 0; i < folderPathCurrentArray.length; i++) {
+  const newFolderPathMatch = newFolderPathArray.filter(
-    if (folderPathCurrentArray[i] === saveContextFolderPathArray[i]) {
+    (folder, i) => folder === saveContextFolderPathArray[i]
-      folderPathCurrentMatch++
+  ).length
+
+  return folderPathCurrentMatch > newFolderPathMatch
+    ? folderPathCurrent
+    : newFolderPath
+}
+
+function removeDuplicatesAndKeepLast(arr: HoppInheritedProperty["headers"]) {
+  const keyMap: { [key: string]: number[] } = {} // Map to store array of indices for each key
+
+  // Populate keyMap with the indices of each key
+  arr.forEach((item, index) => {
+    const key = item.inheritedHeader.key
+    if (!(key in keyMap)) {
+      keyMap[key] = []
+    }
+    keyMap[key].push(index)
+  })
+
+  // Create a new array containing only the last occurrence of each key
+  const result = []
+  for (const key in keyMap) {
+    if (Object.prototype.hasOwnProperty.call(keyMap, key)) {
+      const lastIndex = keyMap[key][keyMap[key].length - 1]
+      result.push(arr[lastIndex])
     }
   }
 
-  let newFolderPathMatch = 0
+  // Sort the result array based on the parentID
-
+  result.sort((a, b) => a.parentID.localeCompare(b.parentID))
-  for (let i = 0; i < newFolderPathArray.length; i++) {
+  return result
-    if (newFolderPathArray[i] === saveContextFolderPathArray[i]) {
-      newFolderPathMatch++
-    }
-  }
-
-  if (folderPathCurrentMatch > newFolderPathMatch) {
-    return folderPathCurrent
-  }
-  return newFolderPath
 }
 
 export function updateInheritedPropertiesForAffectedRequests(
   path: string,
   inheritedProperties: HoppInheritedProperty,
-  type: "rest" | "graphql",
+  type: "rest" | "graphql"
-  workspace: "personal" | "team" = "personal"
 ) {
   const tabService =
     type === "rest" ? getService(RESTTabService) : getService(GQLTabService)
 
-  let tabs
+  const effectedTabs = tabService.getTabsRefTo((tab) => {
-  if (workspace === "personal") {
+    const saveContext = tab.document.saveContext
-    tabs = tabService.getTabsRefTo((tab) => {
-      return (
-        tab.document.saveContext?.originLocation === "user-collection" &&
-        tab.document.saveContext.folderPath.startsWith(path)
-      )
-    })
-  } else {
-    tabs = tabService.getTabsRefTo((tab) => {
-      return (
-        tab.document.saveContext?.originLocation === "team-collection" &&
-        tab.document.saveContext.collectionID?.startsWith(path)
-      )
-    })
-  }
 
-  const tabsEffectedByAuth = tabs.filter((tab) => {
+    const saveContextPath =
-    if (workspace === "personal") {
+      saveContext?.originLocation === "team-collection"
-      return (
+        ? saveContext.collectionID
-        tab.value.document.saveContext?.originLocation === "user-collection" &&
+        : saveContext?.folderPath
-        tab.value.document.saveContext.folderPath.startsWith(path) &&
-        path ===
-          folderPathCloseToSaveContext(
-            tab.value.document.inheritedProperties?.auth.parentID,
-            path,
-            tab.value.document.saveContext.folderPath
-          )
-      )
-    }
 
-    return (
+    return saveContextPath?.startsWith(path) ?? false
-      tab.value.document.saveContext?.originLocation === "team-collection" &&
-      tab.value.document.saveContext.collectionID?.startsWith(path) &&
-      path ===
-        folderPathCloseToSaveContext(
-          tab.value.document.inheritedProperties?.auth.parentID,
-          path,
-          tab.value.document.saveContext.collectionID
-        )
-    )
   })
 
-  const tabsEffectedByHeaders = tabs.filter((tab) => {
+  effectedTabs.map((tab) => {
-    return (
+    const inheritedParentID =
-      tab.value.document.inheritedProperties &&
+      tab.value.document.inheritedProperties?.auth.parentID
-      tab.value.document.inheritedProperties.headers.some(
+
+    const contextPath =
+      tab.value.document.saveContext?.originLocation === "team-collection"
+        ? tab.value.document.saveContext.collectionID
+        : tab.value.document.saveContext?.folderPath
+
+    const effectedPath = folderPathCloseToSaveContext(
+      inheritedParentID,
+      path,
+      contextPath ?? ""
+    )
+
+    if (effectedPath === path) {
+      if (tab.value.document.inheritedProperties) {
+        tab.value.document.inheritedProperties.auth = inheritedProperties.auth
+      }
+    }
+
+    if (tab.value.document.inheritedProperties?.headers) {
+      // filter out the headers with the parentID not as the path
+      const headers = tab.value.document.inheritedProperties.headers.filter(
+        (header) => header.parentID !== path
+      )
+
+      // filter out the headers with the parentID as the path in the inheritedProperties
+      const inheritedHeaders = inheritedProperties.headers.filter(
         (header) => header.parentID === path
       )
-    )
-  })
 
-  for (const tab of tabsEffectedByAuth) {
+      // merge the headers with the parentID as the path
-    tab.value.document.inheritedProperties = inheritedProperties
+      const mergedHeaders = removeDuplicatesAndKeepLast([
-  }
+        ...new Set([...inheritedHeaders, ...headers]),
+      ])
 
-  for (const tab of tabsEffectedByHeaders) {
+      tab.value.document.inheritedProperties.headers = mergedHeaders
-    const headers = tab.value.document.inheritedProperties?.headers.map(
-      (header) => {
-        if (header.parentID === path) {
-          return {
-            ...header,
-            inheritedHeader: inheritedProperties.headers.find(
-              (inheritedHeader) =>
-                inheritedHeader.inheritedHeader?.key ===
-                header.inheritedHeader?.key
-            )?.inheritedHeader,
-          }
-        }
-        return header
-      }
-    )
-
-    tab.value.document.inheritedProperties = {
-      ...tab.value.document.inheritedProperties,
-      headers,
     }
-  }
+  })
 }
 
 function resetSaveContextForAffectedRequests(folderPath: string) {

packages/hoppscotch-common/src/helpers/utils/EffectiveURL.ts

@@ -18,6 +18,8 @@ import {
   HoppRESTParam,
   parseRawKeyValueEntriesE,
   parseTemplateStringE,
+  HoppRESTAuth,
+  HoppRESTHeaders,
 } from "@hoppscotch/data"
 import { arrayFlatMap, arraySort } from "../functional/array"
 import { toFormData } from "../functional/formData"
@@ -44,7 +46,12 @@ export interface EffectiveHoppRESTRequest extends HoppRESTRequest {
  */
 export const getComputedAuthHeaders = (
   envVars: Environment["variables"],
-  req?: HoppRESTRequest,
+  req?:
+    | HoppRESTRequest
+    | {
+        auth: HoppRESTAuth
+        headers: HoppRESTHeaders
+      },
   auth?: HoppRESTRequest["auth"],
   parse = true
 ) => {
@@ -108,7 +115,12 @@ export const getComputedAuthHeaders = (
  * @returns The list of headers
  */
 export const getComputedBodyHeaders = (
-  req: HoppRESTRequest
+  req:
+    | HoppRESTRequest
+    | {
+        auth: HoppRESTAuth
+        headers: HoppRESTHeaders
+      }
 ): HoppRESTHeader[] => {
   // If a content-type is already defined, that will override this
   if (
@@ -118,8 +130,10 @@ export const getComputedBodyHeaders = (
   )
     return []
 
+  if (!("body" in req)) return []
+
   // Body should have a non-null content-type
-  if (req.body.contentType === null) return []
+  if (!req.body || req.body.contentType === null) return []
 
   return [
     {
@@ -143,7 +157,12 @@ export type ComputedHeader = {
  * @returns The headers that are generated along with the source of that header
  */
 export const getComputedHeaders = (
-  req: HoppRESTRequest,
+  req:
+    | HoppRESTRequest
+    | {
+        auth: HoppRESTAuth
+        headers: HoppRESTHeaders
+      },
   envVars: Environment["variables"],
   parse = true
 ): ComputedHeader[] => {