refactor: update components to encapsulate

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

@@ -42,6 +42,18 @@
                   }
                 "
               />
+              <HoppSmartItem
+                v-if="!isRootCollection"
+                label="Inherit"
+                :icon="authName === 'Inherit' ? IconCircleDot : IconCircle"
+                :active="authName === 'Inherit'"
+                @click="
+                  () => {
+                    auth.authType = 'inherit'
+                    hide()
+                  }
+                "
+              />
               <HoppSmartItem
                 label="Basic Auth"
                 :icon="authName === 'Basic Auth' ? IconCircleDot : IconCircle"
@@ -140,6 +152,13 @@
         <div v-if="auth.authType === 'basic'">
           <HttpAuthorizationBasic v-model="auth" />
         </div>
+        <div v-if="auth.authType === 'inherit'">
+          <div class="p-4">
+            Inherited
+            {{ getAuthName(inheritedProperties?.auth?.authType) }} from Parent
+            Collection {{ inheritedProperties?.parentName }}
+          </div>
+        </div>
         <div v-if="auth.authType === 'bearer'">
           <div class="flex flex-1 border-b border-dividerLight">
             <SmartEnvInput v-model="auth.token" placeholder="Token" />
@@ -186,6 +205,8 @@ import { pluckRef } from "@composables/ref"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
 import { useVModel } from "@vueuse/core"
+import { onMounted } from "vue"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const t = useI18n()
 
@@ -194,6 +215,8 @@ const colorMode = useColorMode()
 const props = defineProps<{
   modelValue: HoppRESTAuth
   isCollectionProperty?: boolean
+  isRootCollection?: boolean
+  inheritedProperties?: HoppInheritedProperty
 }>()
 
 const emit = defineEmits<{
@@ -202,18 +225,32 @@ const emit = defineEmits<{
 
 const auth = useVModel(props, "modelValue", emit)
 
+onMounted(() => {
+  if (props.isRootCollection && auth.value.authType === "inherit") {
+    console.log("isRootCollection", auth.value.authType)
+    auth.value.authType = "none"
+  }
+})
+
 const AUTH_KEY_NAME = {
   basic: "Basic Auth",
   bearer: "Bearer",
   "oauth-2": "OAuth 2.0",
   "api-key": "API key",
   none: "None",
+  inherit: "Inherit",
 } as const
 
 const authType = pluckRef(auth, "authType")
 const authName = computed(() =>
   AUTH_KEY_NAME[authType.value] ? AUTH_KEY_NAME[authType.value] : "None"
 )
+
+const getAuthName = (type: HoppRESTAuth["authType"] | undefined) => {
+  if (!type) return "None"
+  return AUTH_KEY_NAME[type] ? AUTH_KEY_NAME[type] : "None"
+}
+
 const authActive = pluckRef(auth, "authActive")
 
 const clearContent = () => {

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

@@ -208,6 +208,64 @@
           </div>
         </template>
       </draggable>
+
+      <draggable
+        v-model="inheritedProperties"
+        item-key="id"
+        animation="250"
+        handle=".draggable-handle"
+        draggable=".draggable-content"
+        ghost-class="cursor-move"
+        chosen-class="bg-primaryLight"
+        drag-class="cursor-grabbing"
+      >
+        <template #item="{ element: header, index }">
+          <div
+            class="draggable-content group flex divide-x divide-dividerLight border-b border-dividerLight"
+          >
+            <span>
+              <HoppButtonSecondary
+                :icon="IconLock"
+                class="cursor-auto bg-divider text-secondaryLight opacity-25"
+                tabindex="-1"
+              />
+            </span>
+            <SmartEnvInput
+              v-model="header.header.key"
+              :placeholder="`${t('count.value', { count: index + 1 })}`"
+              readonly
+            />
+            <SmartEnvInput
+              :model-value="
+                header.source === 'auth' ? mask(header) : header.header.value
+              "
+              :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>
+            <span>
+              <HoppButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :icon="IconInfo"
+                :title="`This header is inherited from Parent Collection ${
+                  header.inheritedFrom ?? ''
+                }`"
+              />
+            </span>
+          </div>
+        </template>
+      </draggable>
+
       <HoppSmartPlaceholder
         v-if="workingHeaders.length === 0"
         :src="`/images/states/${colorMode.value}/add_category.svg`"
@@ -241,6 +299,7 @@ import IconEye from "~icons/lucide/eye"
 import IconEyeOff from "~icons/lucide/eye-off"
 import IconArrowUpRight from "~icons/lucide/arrow-up-right"
 import IconWrapText from "~icons/lucide/wrap-text"
+import IconInfo from "~icons/lucide/info"
 import { useColorMode } from "@composables/theming"
 import { computed, reactive, ref, watch } from "vue"
 import { isEqual, cloneDeep } from "lodash-es"
@@ -269,12 +328,14 @@ import { objRemoveKey } from "~/helpers/functional/object"
 import {
   ComputedHeader,
   getComputedHeaders,
+  getComputedAuthHeaders,
 } from "~/helpers/utils/EffectiveURL"
 import { aggregateEnvs$, getAggregateEnvs } from "~/newstore/environments"
 import { useVModel } from "@vueuse/core"
 import { useService } from "dioc/vue"
 import { InspectionService, InspectorResult } from "~/services/inspection"
 import { RESTTabService } from "~/services/tab/rest"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const t = useI18n()
 const toast = useToast()
@@ -296,6 +357,7 @@ const deletionToast = ref<{ goAway: (delay: number) => void } | null>(null)
 const props = defineProps<{
   modelValue: HoppRESTRequest
   isCollectionProperty?: boolean
+  inheritedProperties?: HoppInheritedProperty
 }>()
 
 const emit = defineEmits<{
@@ -502,6 +564,65 @@ const computedHeaders = computed(() =>
   )
 )
 
+const inheritedProperties = computed(() => {
+  if (!props.inheritedProperties?.auth || !props.inheritedProperties.headers)
+    return []
+
+  //filter out headers that are already in the request headers
+
+  const inheritedHeaders = props.inheritedProperties.headers.filter(
+    (header) =>
+      !request.value.headers.some(
+        (requestHeader) => requestHeader.key === header.key
+      )
+  )
+
+  const headers = inheritedHeaders.map((header, index) => ({
+    inheritedFrom: props.inheritedProperties?.parentName,
+    source: "headers",
+    id: `header-${index}`,
+    header: {
+      key: header.key,
+      value: header.value,
+      active: header.active,
+    },
+  }))
+
+  let auth = [] as {
+    inheritedFrom: string
+    source: "auth"
+    id: string
+    header: {
+      key: string
+      value: string
+      active: boolean
+    }
+  }[]
+
+  const computedAuthHeader = getComputedAuthHeaders(
+    aggregateEnvs.value,
+    request.value,
+    props.inheritedProperties.auth
+  )[0]
+
+  if (
+    computedAuthHeader &&
+    request.value.auth.authType === "inherit" &&
+    request.value.auth.authActive
+  ) {
+    auth = [
+      {
+        inheritedFrom: props.inheritedProperties?.parentName,
+        source: "auth",
+        id: `header-auth`,
+        header: computedAuthHeader,
+      },
+    ]
+  }
+
+  return [...headers, ...auth]
+})
+
 const masking = ref(true)
 
 const toggleMask = () => {

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

@@ -29,14 +29,21 @@
       :label="`${t('tab.headers')}`"
       :info="`${newActiveHeadersCount$}`"
     >
-      <HttpHeaders v-model="request" @change-tab="changeOptionTab" />
+      <HttpHeaders
+        v-model="request"
+        :inherited-properties="inheritedProperties"
+        @change-tab="changeOptionTab"
+      />
     </HoppSmartTab>
     <HoppSmartTab
       v-if="properties ? properties.includes('authorization') : true"
       :id="'authorization'"
       :label="`${t('tab.authorization')}`"
     >
-      <HttpAuthorization v-model="request.auth" />
+      <HttpAuthorization
+        v-model="request.auth"
+        :inherited-properties="inheritedProperties"
+      />
     </HoppSmartTab>
     <HoppSmartTab
       v-if="properties ? properties.includes('preRequestScript') : true"
@@ -69,6 +76,7 @@ import { HoppRESTRequest } from "@hoppscotch/data"
 import { useVModel } from "@vueuse/core"
 import { computed } from "vue"
 import { defineActionHandler } from "~/helpers/actions"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const VALID_OPTION_TABS = [
   "params",
@@ -89,6 +97,7 @@ const props = withDefaults(
     modelValue: HoppRESTRequest
     optionTab: RESTOptionTabs
     properties?: string[]
+    inheritedProperties?: HoppInheritedProperty
   }>(),
   {
     optionTab: "params",

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

@@ -5,6 +5,7 @@
       <HttpRequestOptions
         v-model="tab.document.request"
         v-model:option-tab="tab.document.optionTabPreference"
+        v-model:inherited-properties="tab.document.inheritedProperties"
       />
     </template>
     <template #secondary>