refactor: inherit header from multiple collecions

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

@@ -40,8 +40,8 @@
           <HttpAuthorization
             v-model="editableCollection.auth"
             :is-collection-property="true"
-            :is-root-collection="editingProperties.isRootCollection"
-            :inherited-properties="editingProperties.inheritedProperties"
+            :is-root-collection="editingProperties?.isRootCollection"
+            :inherited-properties="editingProperties?.inheritedProperties"
           />
           <AppBanner
             :banner="{
@@ -93,7 +93,7 @@ type EditingProperties = {
   collection: HoppCollection<HoppRESTRequest> | TeamCollection | null
   isRootCollection: boolean
   path: string
-  inheritedProperties: HoppInheritedProperty | null
+  inheritedProperties: HoppInheritedProperty | undefined
 }
 
 const props = withDefaults(

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

@@ -302,6 +302,7 @@ const editingProperties = ref<{
   collection: null,
   isRootCollection: false,
   path: "",
+  inheritedProperties: undefined,
 })
 
 const confirmModalTitle = ref<string | null>(null)
@@ -678,7 +679,7 @@ const onAddRequest = (requestName: string) => {
     if (!path) return
     const insertionIndex = saveRESTRequestAs(path, newRequest)
 
-    const { auth, headers, name } = cascaseParentCollectionForHeaderAuth(path)
+    const { auth, headers } = cascaseParentCollectionForHeaderAuth(path)
 
     tabs.createNewTab({
       request: newRequest,
@@ -691,8 +692,6 @@ const onAddRequest = (requestName: string) => {
       inheritedProperties: {
         auth,
         headers,
-        parentName: name,
-        parentId: path,
       },
     })
 
@@ -1330,8 +1329,7 @@ const selectRequest = (selectedRequest: {
   // If there is a request with this save context, switch into it
   let possibleTab = null
 
-  const { auth, headers, name } =
-    cascaseParentCollectionForHeaderAuth(folderPath)
+  const { auth, headers } = cascaseParentCollectionForHeaderAuth(folderPath)
 
   if (collectionsType.value.type === "team-collections") {
     possibleTab = tabs.getTabRefWithSaveContext({
@@ -1369,9 +1367,7 @@ const selectRequest = (selectedRequest: {
           requestIndex: parseInt(requestIndex),
         },
         inheritedProperties: {
-          parentId: folderPath || "",
-          parentName: name,
-          auth: auth,
+          auth,
           headers,
         },
       })
@@ -1405,7 +1401,7 @@ const dropRequest = (payload: {
   let possibleTab = null
 
   if (collectionsType.value.type === "my-collections" && folderPath) {
-    const { auth, headers, name } = cascaseParentCollectionForHeaderAuth(
+    const { auth, headers } = cascaseParentCollectionForHeaderAuth(
       destinationCollectionIndex
     )
 
@@ -1427,8 +1423,6 @@ const dropRequest = (payload: {
       }
 
       possibleTab.value.document.inheritedProperties = {
-        parentId: destinationCollectionIndex,
-        parentName: name,
         auth,
         headers,
       }
@@ -1600,13 +1594,11 @@ const dropCollection = (payload: {
       `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
     )
 
-    const { auth, headers, name } = cascaseParentCollectionForHeaderAuth(
+    const { auth, headers } = cascaseParentCollectionForHeaderAuth(
       `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
     )
 
     const inheritedProperty = {
-      parentId: `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`,
-      parentName: name,
       auth,
       headers,
     }
@@ -1983,12 +1975,9 @@ const editProperties = (payload: {
   let inheritedProperties = {}
 
   if (parentIndex) {
-    const { auth, headers, name } =
-      cascaseParentCollectionForHeaderAuth(parentIndex)
+    const { auth, headers } = cascaseParentCollectionForHeaderAuth(parentIndex)
 
     inheritedProperties = {
-      parentId: parentIndex ?? "",
-      parentName: name,
       auth,
       headers,
     } as HoppInheritedProperty
@@ -2016,12 +2005,10 @@ const setCollectionProperties = (newCollection: {
     editRESTFolder(path, collection)
   }
 
-  const { auth, headers, name } = cascaseParentCollectionForHeaderAuth(path)
+  const { auth, headers } = cascaseParentCollectionForHeaderAuth(path)
 
   nextTick(() => {
     updateInheritedPropertiesForAffectedRequests(path, {
-      parentId: path,
-      parentName: name,
       auth,
       headers,
     })

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

@@ -155,8 +155,8 @@
         <div v-if="auth.authType === 'inherit'" class="p-4">
           <span v-if="inheritedProperties?.auth">
             Inherited
-            {{ getAuthName(inheritedProperties.auth.authType) }} from Parent
-            Collection {{ inheritedProperties?.parentName }}
+            {{ getAuthName(inheritedProperties.auth.inheritedAuth.authType) }}
+            from Parent Collection {{ inheritedProperties?.auth.parentName }}
           </span>
           <span v-else>
             Please save this request in any collection to inherit the
@@ -232,7 +232,10 @@ const auth = useVModel(props, "modelValue", emit)
 onMounted(() => {
   if (props.isRootCollection && auth.value.authType === "inherit") {
     console.log("isRootCollection", auth.value.authType)
-    auth.value.authType = "none"
+    auth.value = {
+      authType: "none",
+      authActive: true,
+    }
   }
 })
 

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

@@ -242,17 +242,14 @@
               :placeholder="`${t('count.value', { count: index + 1 })}`"
               readonly
             />
-            <span class="">
-              <HoppButtonSecondary
-                v-tippy="{ theme: 'tooltip' }"
-                :title="t(masking ? 'state.show' : 'state.hide')"
-                :icon="
-                  masking && header.source === 'auth' ? IconEye : IconEyeOff
-                "
-                :disabled="header.source !== 'auth'"
-                @click="toggleMask()"
-              />
-            </span>
+            <HoppButtonSecondary
+              v-if="header.source === 'auth'"
+              v-tippy="{ theme: 'tooltip' }"
+              :title="t(masking ? 'state.show' : 'state.hide')"
+              :icon="masking && header.source === 'auth' ? IconEye : IconEyeOff"
+              @click="toggleMask()"
+            />
+            <span class="aspect-square w-[2.05rem]"></span>
             <span>
               <HoppButtonSecondary
                 v-tippy="{ theme: 'tooltip' }"
@@ -578,13 +575,13 @@ const inheritedProperties = computed(() => {
   )
 
   const headers = inheritedHeaders.map((header, index) => ({
-    inheritedFrom: props.inheritedProperties?.parentName,
+    inheritedFrom: props.inheritedProperties?.headers[index].parentName,
     source: "headers",
     id: `header-${index}`,
     header: {
-      key: header.key,
-      value: header.value,
-      active: header.active,
+      key: header.inheritedHeader?.key,
+      value: header.inheritedHeader?.value,
+      active: header.inheritedHeader?.active,
     },
   }))
 
@@ -602,7 +599,7 @@ const inheritedProperties = computed(() => {
   const computedAuthHeader = getComputedAuthHeaders(
     aggregateEnvs.value,
     request.value,
-    props.inheritedProperties.auth
+    props.inheritedProperties.auth.inheritedAuth
   )[0]
 
   if (
@@ -612,7 +609,7 @@ const inheritedProperties = computed(() => {
   ) {
     auth = [
       {
-        inheritedFrom: props.inheritedProperties?.parentName,
+        inheritedFrom: props.inheritedProperties?.auth.parentName,
         source: "auth",
         id: `header-auth`,
         header: computedAuthHeader,