refactor: inherit header from multiple collecions

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,