feat: collection level headers and authorization (#3505)

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

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

@@ -96,6 +96,7 @@
                   @keyup.e="edit?.$el.click()"
                   @keyup.delete="deleteAction?.$el.click()"
                   @keyup.x="exportAction?.$el.click()"
+                  @keyup.p="propertiesAction?.$el.click()"
                   @keyup.escape="hide()"
                 >
                   <HoppSmartItem
@@ -159,6 +160,18 @@
                       }
                     "
                   />
+                  <HoppSmartItem
+                    ref="propertiesAction"
+                    :icon="IconSettings2"
+                    :label="t('action.properties')"
+                    :shortcut="['P']"
+                    @click="
+                      () => {
+                        emit('edit-properties')
+                        hide()
+                      }
+                    "
+                  />
                 </div>
               </template>
             </tippy>
@@ -193,8 +206,9 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import IconEdit from "~icons/lucide/edit"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
+import IconSettings2 from "~icons/lucide/settings-2"
 import { ref, computed, watch } from "vue"
-import { HoppCollection, HoppRESTRequest } from "@hoppscotch/data"
+import { HoppCollection } from "@hoppscotch/data"
 import { useI18n } from "@composables/i18n"
 import { TippyComponent } from "vue-tippy"
 import { TeamCollection } from "~/helpers/teams/TeamCollection"
@@ -213,7 +227,7 @@ const props = withDefaults(
   defineProps<{
     id: string
     parentID?: string | null
-    data: HoppCollection<HoppRESTRequest> | TeamCollection
+    data: HoppCollection | TeamCollection
     /**
      * Collection component can be used for both collections and folders.
      * folderType is used to determine which one it is.
@@ -245,6 +259,7 @@ const emit = defineEmits<{
   (event: "add-request"): void
   (event: "add-folder"): void
   (event: "edit-collection"): void
+  (event: "edit-properties"): void
   (event: "export-data"): void
   (event: "remove-collection"): void
   (event: "drop-event", payload: DataTransfer): void
@@ -261,6 +276,7 @@ const edit = ref<HTMLButtonElement | null>(null)
 const deleteAction = ref<HTMLButtonElement | null>(null)
 const exportAction = ref<HTMLButtonElement | null>(null)
 const options = ref<TippyComponent | null>(null)
+const propertiesAction = ref<TippyComponent | null>(null)
 
 const dragging = ref(false)
 const ordering = ref(false)
@@ -294,8 +310,8 @@ const collectionIcon = computed(() => {
 })
 
 const collectionName = computed(() => {
-  if ((props.data as HoppCollection<HoppRESTRequest>).name)
-    return (props.data as HoppCollection<HoppRESTRequest>).name
+  if ((props.data as HoppCollection).name)
+    return (props.data as HoppCollection).name
   return (props.data as TeamCollection).title
 })
 

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

@@ -29,7 +29,6 @@ import { PropType, computed, ref } from "vue"
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
 import { HoppCollection } from "@hoppscotch/data"
-import { HoppRESTRequest } from "@hoppscotch/data"
 import { appendRESTCollections, restCollections$ } from "~/newstore/collections"
 import MyCollectionImport from "~/components/importExport/ImportExportSteps/MyCollectionImport.vue"
 import { GetMyTeamsQuery } from "~/helpers/backend/graphql"
@@ -88,9 +87,7 @@ const showImportFailedError = () => {
   toast.error(t("import.failed"))
 }
 
-const handleImportToStore = async (
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
+const handleImportToStore = async (collections: HoppCollection[]) => {
   const importResult =
     props.collectionsType.type === "my-collections"
       ? await importToPersonalWorkspace(collections)
@@ -104,26 +101,47 @@ const handleImportToStore = async (
   }
 }
 
-const importToPersonalWorkspace = (
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
+const importToPersonalWorkspace = (collections: HoppCollection[]) => {
   appendRESTCollections(collections)
   return E.right({
     success: true,
   })
 }
 
-const importToTeamsWorkspace = async (
-  collections: HoppCollection<HoppRESTRequest>[]
-) => {
+function translateToTeamCollectionFormat(x: HoppCollection) {
+  const folders: HoppCollection[] = (x.folders ?? []).map(
+    translateToTeamCollectionFormat
+  )
+
+  const data = {
+    auth: x.auth,
+    headers: x.headers,
+  }
+
+  const obj = {
+    ...x,
+    folders,
+    data,
+  }
+
+  if (x.id) obj.id = x.id
+
+  return obj
+}
+
+const importToTeamsWorkspace = async (collections: HoppCollection[]) => {
   if (!hasTeamWriteAccess.value || !selectedTeamID.value) {
     return E.left({
       success: false,
     })
   }
 
+  const transformedCollection = collections.map((collection) =>
+    translateToTeamCollectionFormat(collection)
+  )
+
   const res = await toTeamsImporter(
-    JSON.stringify(collections),
+    JSON.stringify(transformedCollection),
     selectedTeamID.value
   )()
 
@@ -407,7 +425,6 @@ const HoppTeamCollectionsExporter: ImporterOrExporter = {
   },
   action: async () => {
     isHoppTeamCollectionExporterInProgress.value = true
-
     if (
       props.collectionsType.type === "team-collections" &&
       props.collectionsType.selectedTeam

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

@@ -71,6 +71,13 @@
                   collection: node.data.data.data,
                 })
             "
+            @edit-properties="
+              node.data.type === 'collections' &&
+                emit('edit-properties', {
+                  collectionIndex: node.id,
+                  collection: node.data.data.data,
+                })
+            "
             @export-data="
               node.data.type === 'collections' &&
                 emit('export-data', node.data.data.data)
@@ -139,6 +146,13 @@
                   folder: node.data.data.data,
                 })
             "
+            @edit-properties="
+              node.data.type === 'folders' &&
+                emit('edit-properties', {
+                  collectionIndex: node.id,
+                  collection: node.data.data.data,
+                })
+            "
             @export-data="
               node.data.type === 'folders' &&
                 emit('export-data', node.data.data.data)
@@ -344,7 +358,7 @@ export type Collection = {
   isLastItem: boolean
   data: {
     parentIndex: null
-    data: HoppCollection<HoppRESTRequest>
+    data: HoppCollection
   }
 }
 
@@ -353,7 +367,7 @@ type Folder = {
   isLastItem: boolean
   data: {
     parentIndex: string
-    data: HoppCollection<HoppRESTRequest>
+    data: HoppCollection
   }
 }
 
@@ -380,7 +394,7 @@ type CollectionType =
 
 const props = defineProps({
   filteredCollections: {
-    type: Array as PropType<HoppCollection<HoppRESTRequest>[]>,
+    type: Array as PropType<HoppCollection[]>,
     default: () => [],
     required: true,
   },
@@ -412,28 +426,35 @@ const emit = defineEmits<{
     event: "add-request",
     payload: {
       path: string
-      folder: HoppCollection<HoppRESTRequest>
+      folder: HoppCollection
     }
   ): void
   (
     event: "add-folder",
     payload: {
       path: string
-      folder: HoppCollection<HoppRESTRequest>
+      folder: HoppCollection
     }
   ): void
   (
     event: "edit-collection",
     payload: {
       collectionIndex: string
-      collection: HoppCollection<HoppRESTRequest>
+      collection: HoppCollection
     }
   ): void
   (
     event: "edit-folder",
     payload: {
       folderPath: string
-      folder: HoppCollection<HoppRESTRequest>
+      folder: HoppCollection
+    }
+  ): void
+  (
+    event: "edit-properties",
+    payload: {
+      collectionIndex: string
+      collection: HoppCollection
     }
   ): void
   (
@@ -451,7 +472,7 @@ const emit = defineEmits<{
       request: HoppRESTRequest
     }
   ): void
-  (event: "export-data", payload: HoppCollection<HoppRESTRequest>): void
+  (event: "export-data", payload: HoppCollection): void
   (event: "remove-collection", payload: string): void
   (event: "remove-folder", payload: string): void
   (
@@ -665,10 +686,10 @@ const updateCollectionOrder = (
 type MyCollectionNode = Collection | Folder | Requests
 
 class MyCollectionsAdapter implements SmartTreeAdapter<MyCollectionNode> {
-  constructor(public data: Ref<HoppCollection<HoppRESTRequest>[]>) {}
+  constructor(public data: Ref<HoppCollection[]>) {}
 
   navigateToFolderWithIndexPath(
-    collections: HoppCollection<HoppRESTRequest>[],
+    collections: HoppCollection[],
     indexPaths: number[]
   ) {
     if (indexPaths.length === 0) return null

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

@@ -0,0 +1,166 @@
+<template>
+  <HoppSmartModal
+    v-if="show"
+    dialog
+    :title="t('collection.properties')"
+    :full-width-body="true"
+    @close="hideModal"
+  >
+    <template #body>
+      <HoppSmartTabs
+        v-model="selectedOptionTab"
+        styles="sticky overflow-x-auto flex-shrink-0 bg-primary top-0 z-10 !-py-4"
+        render-inactive-tabs
+      >
+        <HoppSmartTab :id="'headers'" :label="`${t('tab.headers')}`">
+          <HttpHeaders
+            v-model="editableCollection"
+            :is-collection-property="true"
+            @change-tab="changeOptionTab"
+          />
+          <div class="bg-bannerInfo p-2 flex items-center">
+            <icon-lucide-info class="svg-icons mr-2" />
+            {{ t("helpers.collection_properties_header") }}
+            <a href="hopp.sh" target="_blank" class="underline">{{
+              t("action.learn_more")
+            }}</a>
+          </div>
+        </HoppSmartTab>
+        <HoppSmartTab
+          :id="'authorization'"
+          :label="`${t('tab.authorization')}`"
+        >
+          <HttpAuthorization
+            v-model="editableCollection.auth"
+            :is-collection-property="true"
+            :is-root-collection="editingProperties?.isRootCollection"
+            :inherited-properties="editingProperties?.inheritedProperties"
+          />
+          <div class="bg-bannerInfo p-2 flex items-center">
+            <icon-lucide-info class="svg-icons mr-2" />
+            {{ t("helpers.collection_properties_authorization") }}
+            <a href="hopp.sh" target="_blank" class="underline">{{
+              t("action.learn_more")
+            }}</a>
+          </div>
+        </HoppSmartTab>
+      </HoppSmartTabs>
+    </template>
+    <template #footer>
+      <span class="flex space-x-2">
+        <HoppButtonPrimary
+          :label="t('action.save')"
+          :loading="loadingState"
+          outline
+          @click="saveEditedCollection"
+        />
+        <HoppButtonSecondary
+          :label="t('action.cancel')"
+          outline
+          filled
+          @click="hideModal"
+        />
+      </span>
+    </template>
+  </HoppSmartModal>
+</template>
+
+<script setup lang="ts">
+import { watch, ref } from "vue"
+import { useI18n } from "@composables/i18n"
+import { HoppCollection } 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
+  isRootCollection: boolean
+  path: string
+  inheritedProperties: HoppInheritedProperty | undefined
+}
+
+const props = withDefaults(
+  defineProps<{
+    show: boolean
+    loadingState: boolean
+    editingProperties: EditingProperties | null
+  }>(),
+  {
+    show: false,
+    loadingState: false,
+    editingProperties: null,
+  }
+)
+
+const emit = defineEmits<{
+  (e: "set-collection-properties", newCollection: any): void
+  (e: "hide-modal"): void
+}>()
+
+const editableCollection = ref({
+  body: {
+    contentType: null,
+    body: null,
+  },
+  headers: [],
+  auth: {
+    authType: "inherit",
+    authActive: false,
+  },
+}) as any
+
+const selectedOptionTab = ref("headers")
+
+const changeOptionTab = (tab: RESTOptionTabs) => {
+  selectedOptionTab.value = tab
+}
+
+watch(
+  () => props.show,
+  (show) => {
+    if (show && props.editingProperties?.collection) {
+      editableCollection.value.auth = clone(
+        props.editingProperties.collection.auth
+      )
+      editableCollection.value.headers = clone(
+        props.editingProperties.collection.headers
+      )
+    } else {
+      editableCollection.value = {
+        body: {
+          contentType: null,
+          body: null,
+        },
+        headers: [],
+        auth: {
+          authType: "inherit",
+          authActive: false,
+        },
+      }
+    }
+  }
+)
+
+const saveEditedCollection = () => {
+  if (!props.editingProperties) return
+  const finalCollection = clone(editableCollection.value)
+  delete finalCollection.body
+  const collection = {
+    path: props.editingProperties.path,
+    collection: {
+      ...props.editingProperties.collection,
+      ...finalCollection,
+    },
+    isRootCollection: props.editingProperties.isRootCollection,
+  }
+  emit("set-collection-properties", collection)
+}
+
+const hideModal = () => {
+  emit("hide-modal")
+}
+</script>

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

@@ -74,6 +74,7 @@ import { Picked } from "~/helpers/types/HoppPicked"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import {
+  cascadeParentCollectionForHeaderAuth,
   editGraphqlRequest,
   editRESTRequest,
   saveGraphqlRequestAs,
@@ -239,6 +240,16 @@ const saveRequestAs = async () => {
       },
     }
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      `${picked.value.collectionIndex}`,
+      "rest"
+    )
+
+    RESTTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
     platform.analytics?.logEvent({
       type: "HOPP_SAVE_REQUEST",
       createdNow: true,
@@ -266,6 +277,16 @@ const saveRequestAs = async () => {
       },
     }
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "rest"
+    )
+
+    RESTTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
     platform.analytics?.logEvent({
       type: "HOPP_SAVE_REQUEST",
       createdNow: true,
@@ -294,6 +315,16 @@ const saveRequestAs = async () => {
       },
     }
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "rest"
+    )
+
+    RESTTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
     platform.analytics?.logEvent({
       type: "HOPP_SAVE_REQUEST",
       createdNow: false,
@@ -378,6 +409,16 @@ const saveRequestAs = async () => {
       workspaceType: "team",
     })
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "graphql"
+    )
+
+    GQLTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
     requestSaved()
   } else if (picked.value.pickedType === "gql-my-folder") {
     // TODO: Check for GQL request ?
@@ -393,6 +434,16 @@ const saveRequestAs = async () => {
       workspaceType: "team",
     })
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      picked.value.folderPath,
+      "graphql"
+    )
+
+    GQLTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
     requestSaved()
   } else if (picked.value.pickedType === "gql-my-collection") {
     // TODO: Check for GQL request ?
@@ -408,6 +459,16 @@ const saveRequestAs = async () => {
       workspaceType: "team",
     })
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      `${picked.value.collectionIndex}`,
+      "graphql"
+    )
+
+    GQLTabs.currentActiveTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+
     requestSaved()
   }
 }

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

@@ -88,6 +88,13 @@
                   collection: node.data.data.data,
                 })
             "
+            @edit-properties="
+              node.data.type === 'collections' &&
+                emit('edit-properties', {
+                  collectionIndex: node.id,
+                  collection: node.data.data.data,
+                })
+            "
             @export-data="
               node.data.type === 'collections' &&
                 emit('export-data', node.data.data.data)
@@ -159,6 +166,13 @@
                   folder: node.data.data.data,
                 })
             "
+            @edit-properties="
+              node.data.type === 'folders' &&
+                emit('edit-properties', {
+                  collectionIndex: node.id,
+                  collection: node.data.data.data,
+                })
+            "
             @export-data="
               node.data.type === 'folders' &&
                 emit('export-data', node.data.data.data)
@@ -238,6 +252,7 @@
                 selectRequest({
                   request: node.data.data.data.request,
                   requestIndex: node.data.data.data.id,
+                  folderPath: getPath(node.id),
                 })
             "
             @share-request="
@@ -452,6 +467,13 @@ const emit = defineEmits<{
       folder: TeamCollection
     }
   ): void
+  (
+    event: "edit-properties",
+    payload: {
+      collectionIndex: string
+      collection: TeamCollection
+    }
+  ): void
   (
     event: "edit-request",
     payload: {
@@ -482,7 +504,7 @@ const emit = defineEmits<{
       request: HoppRESTRequest
       requestIndex: string
       isActive: boolean
-      folderPath?: string | undefined
+      folderPath: string
     }
   ): void
   (
@@ -530,6 +552,12 @@ const emit = defineEmits<{
   (event: "display-modal-import-export"): void
 }>()
 
+const getPath = (path: string) => {
+  const pathArray = path.split("/")
+  pathArray.pop()
+  return pathArray.join("/")
+}
+
 const teamCollectionsList = toRef(props, "teamCollectionList")
 
 const hasNoTeamAccess = computed(
@@ -586,6 +614,7 @@ const isActiveRequest = (requestID: string) => {
 const selectRequest = (data: {
   request: HoppRESTRequest
   requestIndex: string
+  folderPath: string | null
 }) => {
   const { request, requestIndex } = data
   if (props.saveRequest) {
@@ -598,6 +627,7 @@ const selectRequest = (data: {
       request: request,
       requestIndex: requestIndex,
       isActive: isActiveRequest(requestIndex),
+      folderPath: data.folderPath,
     })
   }
 }

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

@@ -32,58 +32,58 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { ref } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
-import { HoppGQLRequest, makeCollection } from "@hoppscotch/data"
+import { makeCollection } from "@hoppscotch/data"
 import { addGraphqlCollection } from "~/newstore/collections"
 import { platform } from "~/platform"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-  },
-  emits: ["hide-modal"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
-    }
-  },
-  data() {
-    return {
-      name: null as string | null,
-    }
-  },
-  methods: {
-    addNewCollection() {
-      if (!this.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
-        return
-      }
+const t = useI18n()
+const toast = useToast()
 
-      addGraphqlCollection(
-        makeCollection<HoppGQLRequest>({
-          name: this.name,
-          folders: [],
-          requests: [],
-        })
-      )
+defineProps<{
+  show: boolean
+}>()
 
-      this.hideModal()
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      platform.analytics?.logEvent({
-        type: "HOPP_CREATE_COLLECTION",
-        isRootCollection: true,
-        platform: "gql",
-        workspaceType: "personal",
-      })
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
-})
+const name = ref<string | null>(null)
+
+const addNewCollection = () => {
+  if (!name.value) {
+    toast.error(`${t("collection.invalid_name")}`)
+    return
+  }
+
+  addGraphqlCollection(
+    makeCollection({
+      name: name.value,
+      folders: [],
+      requests: [],
+      auth: {
+        authType: "inherit",
+        authActive: true,
+      },
+      headers: [],
+    })
+  )
+
+  hideModal()
+
+  platform.analytics?.logEvent({
+    type: "HOPP_CREATE_COLLECTION",
+    isRootCollection: true,
+    platform: "gql",
+    workspaceType: "personal",
+  })
+}
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
 </script>

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

@@ -3,7 +3,7 @@
     v-if="show"
     dialog
     :title="t('folder.new')"
-    @close="$emit('hide-modal')"
+    @close="hideModal"
   >
     <template #body>
       <HoppSmartInput
@@ -32,47 +32,49 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import { ref } from "vue"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
-import { defineComponent } from "vue"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-    folderPath: { type: String, default: null },
-    collectionIndex: { type: Number, default: null },
-  },
-  emits: ["hide-modal", "add-folder"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+  collectionIndex: number
+}>()
+
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+  (
+    e: "add-folder",
+    v: {
+      name: string
+      path: string | undefined
     }
-  },
-  data() {
-    return {
-      name: null,
-    }
-  },
-  methods: {
-    addFolder() {
-      if (!this.name) {
-        this.toast.error(`${this.t("folder.name_length_insufficient")}`)
-        return
-      }
+  ): void
+}>()
 
-      this.$emit("add-folder", {
-        name: this.name,
-        path: this.folderPath || `${this.collectionIndex}`,
-      })
+const name = ref<string | null>(null)
 
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = null
-      this.$emit("hide-modal")
-    },
-  },
-})
+const addFolder = () => {
+  if (!name.value) {
+    toast.error(`${t("folder.name_length_insufficient")}`)
+    return
+  }
+
+  emit("add-folder", {
+    name: name.value,
+    path: props.folderPath || `${props.collectionIndex}`,
+  })
+
+  hideModal()
+}
+
+const hideModal = () => {
+  name.value = null
+  emit("hide-modal")
+}
 </script>

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

@@ -128,6 +128,21 @@
                     }
                   "
                 />
+                <HoppSmartItem
+                  ref="propertiesAction"
+                  :icon="IconSettings2"
+                  :label="t('action.properties')"
+                  :shortcut="['P']"
+                  @click="
+                    () => {
+                      emit('edit-properties', {
+                        collectionIndex: String(collectionIndex),
+                        collection: collection,
+                      })
+                      hide()
+                    }
+                  "
+                />
               </div>
             </template>
           </tippy>
@@ -155,7 +170,15 @@
           @edit-folder="$emit('edit-folder', $event)"
           @edit-request="$emit('edit-request', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
+          @edit-properties="
+            $emit('edit-properties', {
+              collectionIndex: `${collectionIndex}/${String(index)}`,
+              collection: folder,
+            })
+          "
           @select="$emit('select', $event)"
+          @select-request="$emit('select-request', $event)"
+          @drop-request="$emit('drop-request', $event)"
         />
         <CollectionsGraphqlRequest
           v-for="(request, index) in collection.requests"
@@ -171,6 +194,7 @@
           @edit-request="$emit('edit-request', $event)"
           @duplicate-request="$emit('duplicate-request', $event)"
           @select="$emit('select', $event)"
+          @select-request="$emit('select-request', $event)"
         />
         <HoppSmartPlaceholder
           v-if="
@@ -214,25 +238,24 @@ import IconFolderPlus from "~icons/lucide/folder-plus"
 import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconEdit from "~icons/lucide/edit"
 import IconTrash2 from "~icons/lucide/trash-2"
+import IconSettings2 from "~icons/lucide/settings-2"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
-import {
-  removeGraphqlCollection,
-  moveGraphqlRequest,
-} from "~/newstore/collections"
+import { removeGraphqlCollection } from "~/newstore/collections"
 import { Picked } from "~/helpers/types/HoppPicked"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"
+import { HoppCollection } from "@hoppscotch/data"
 
-const props = defineProps({
-  picked: { type: Object, default: null },
+const props = defineProps<{
+  picked: Picked | null
   // Whether the viewing context is related to picking (activates 'select' events)
-  saveRequest: { type: Boolean, default: false },
-  collectionIndex: { type: Number, default: null },
-  collection: { type: Object, default: () => ({}) },
-  isFiltered: Boolean,
-})
+  saveRequest: boolean
+  collectionIndex: number | null
+  collection: HoppCollection
+  isFiltered: boolean
+}>()
 
 const colorMode = useColorMode()
 const toast = useToast()
@@ -248,7 +271,23 @@ const emit = defineEmits<{
   (e: "add-request", i: any): void
   (e: "add-folder", i: any): void
   (e: "edit-folder", i: any): void
+  (
+    e: "edit-properties",
+    payload: {
+      collectionIndex: string | null
+      collection: HoppCollection
+    }
+  ): void
   (e: "edit-collection"): void
+  (e: "select-request", i: any): void
+  (
+    e: "drop-request",
+    payload: {
+      folderPath: string
+      requestIndex: string
+      collectionIndex: number | null
+    }
+  ): void
 }>()
 
 // Template refs
@@ -324,6 +363,10 @@ const dropEvent = ({ dataTransfer }: any) => {
   dragging.value = !dragging.value
   const folderPath = dataTransfer.getData("folderPath")
   const requestIndex = dataTransfer.getData("requestIndex")
-  moveGraphqlRequest(folderPath, requestIndex, `${props.collectionIndex}`)
+  emit("drop-request", {
+    folderPath,
+    requestIndex,
+    collectionIndex: props.collectionIndex,
+  })
 }
 </script>

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

@@ -37,13 +37,14 @@ import { ref, watch } from "vue"
 import { editGraphqlCollection } from "~/newstore/collections"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { HoppCollection } from "@hoppscotch/data"
 
-const props = defineProps({
-  show: Boolean,
-  editingCollection: { type: Object, default: () => ({}) },
-  editingCollectionIndex: { type: Number, default: null },
-  editingCollectionName: { type: String, default: null },
-})
+const props = defineProps<{
+  show: boolean
+  editingCollectionIndex: number | null
+  editingCollection: HoppCollection | null
+  editingCollectionName: string
+}>()
 
 const emit = defineEmits<{
   (e: "hide-modal"): void

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

@@ -32,52 +32,47 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent } from "vue"
+<script setup lang="ts">
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { editGraphqlFolder } from "~/newstore/collections"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-    folder: { type: Object, default: () => ({}) },
-    folderPath: { type: String, default: null },
-    editingFolderName: { type: String, default: null },
-  },
-  emits: ["hide-modal"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
-    }
-  },
-  data() {
-    return {
-      name: "",
-    }
-  },
-  watch: {
-    editingFolderName(val) {
-      this.name = val
-    },
-  },
-  methods: {
-    editFolder() {
-      if (!this.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
-        return
-      }
-      editGraphqlFolder(this.folderPath, {
-        ...(this.folder as any),
-        name: this.name,
-      })
-      this.hideModal()
-    },
-    hideModal() {
-      this.name = ""
-      this.$emit("hide-modal")
-    },
-  },
-})
+const t = useI18n()
+const toast = useToast()
+
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+  folder: any
+  editingFolderName: string
+}>()
+
+const emit = defineEmits(["hide-modal"])
+
+const name = ref("")
+
+watch(
+  () => props.editingFolderName,
+  (val) => {
+    name.value = val
+  }
+)
+
+const editFolder = () => {
+  if (!name.value) {
+    toast.error(`${t("collection.invalid_name")}`)
+    return
+  }
+  editGraphqlFolder(props.folderPath, {
+    ...(props.folder as any),
+    name: name.value,
+  })
+  hideModal()
+}
+
+const hideModal = () => {
+  name.value = ""
+  emit("hide-modal")
+}
 </script>

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

@@ -32,61 +32,55 @@
   </HoppSmartModal>
 </template>
 
-<script lang="ts">
-import { defineComponent, PropType } from "vue"
+<script setup lang="ts">
+import { ref, watch } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
 import { HoppGQLRequest } from "@hoppscotch/data"
 import { editGraphqlRequest } from "~/newstore/collections"
 
-export default defineComponent({
-  props: {
-    show: Boolean,
-    folderPath: { type: String, default: null },
-    request: { type: Object as PropType<HoppGQLRequest>, default: () => ({}) },
-    requestIndex: { type: Number, default: null },
-    editingRequestName: { type: String, default: null },
-  },
-  emits: ["hide-modal"],
-  setup() {
-    return {
-      toast: useToast(),
-      t: useI18n(),
-    }
-  },
-  data() {
-    return {
-      requestUpdateData: {
-        name: null as any | null,
-      },
-    }
-  },
-  watch: {
-    editingRequestName(val) {
-      this.requestUpdateData.name = val
-    },
-  },
-  methods: {
-    saveRequest() {
-      if (!this.requestUpdateData.name) {
-        this.toast.error(`${this.t("collection.invalid_name")}`)
-        return
-      }
+const t = useI18n()
+const toast = useToast()
 
-      // TODO: Type safety goes brrrr. Proper typing plz
-      const requestUpdated = {
-        ...this.$props.request,
-        name: this.$data.requestUpdateData.name || this.$props.request.name,
-      }
+const props = defineProps<{
+  show: boolean
+  folderPath?: string
+  requestIndex: number | null
+  request: HoppGQLRequest | null
+  editingRequestName: string
+}>()
 
-      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+const emit = defineEmits<{
+  (e: "hide-modal"): void
+}>()
 
-      this.hideModal()
-    },
-    hideModal() {
-      this.requestUpdateData = { name: null }
-      this.$emit("hide-modal")
-    },
-  },
-})
+const requestUpdateData = ref({ name: null as string | null })
+
+watch(
+  () => props.editingRequestName,
+  (val) => {
+    requestUpdateData.value.name = val
+  }
+)
+
+const saveRequest = () => {
+  if (!requestUpdateData.value.name) {
+    toast.error(`${t("collection.invalid_name")}`)
+    return
+  }
+
+  const requestUpdated = {
+    ...(props.request as any),
+    name: requestUpdateData.value.name || (props.request as any).name,
+  }
+
+  editGraphqlRequest(props.folderPath, props.requestIndex, requestUpdated)
+
+  hideModal()
+}
+
+const hideModal = () => {
+  requestUpdateData.value = { name: null }
+  emit("hide-modal")
+}
 </script>

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

@@ -10,24 +10,25 @@
       @dragend="dragging = false"
       @contextmenu.prevent="options.tippy.show()"
     >
-      <span
-        class="flex cursor-pointer items-center justify-center px-4"
+      <div
+        class="flex min-w-0 flex-1 items-center justify-center cursor-pointer"
         @click="toggleShowChildren()"
       >
-        <component
-          :is="collectionIcon"
-          class="svg-icons"
-          :class="{ 'text-accent': isSelected }"
-        />
-      </span>
-      <span
-        class="flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
-        @click="toggleShowChildren()"
-      >
-        <span class="truncate" :class="{ 'text-accent': isSelected }">
-          {{ folder.name ? folder.name : folder.title }}
+        <span class="pointer-events-none flex items-center justify-center px-4">
+          <component
+            :is="collectionIcon"
+            class="svg-icons"
+            :class="{ 'text-accent': isSelected }"
+          />
         </span>
-      </span>
+        <span
+          class="pointer-events-none flex min-w-0 flex-1 cursor-pointer py-2 pr-2 transition group-hover:text-secondaryDark"
+        >
+          <span class="truncate" :class="{ 'text-accent': isSelected }">
+            {{ folder.name ? folder.name : folder.title }}
+          </span>
+        </span>
+      </div>
       <div class="flex">
         <HoppButtonSecondary
           v-tippy="{ theme: 'tooltip' }"
@@ -120,6 +121,21 @@
                     }
                   "
                 />
+                <HoppSmartItem
+                  ref="propertiesAction"
+                  :icon="IconSettings2"
+                  :label="t('action.properties')"
+                  :shortcut="['P']"
+                  @click="
+                    () => {
+                      emit('edit-properties', {
+                        collectionIndex: collectionIndex,
+                        collection: collection,
+                      })
+                      hide()
+                    }
+                  "
+                />
               </div>
             </template>
           </tippy>
@@ -148,7 +164,14 @@
           @edit-folder="emit('edit-folder', $event)"
           @edit-request="emit('edit-request', $event)"
           @duplicate-request="emit('duplicate-request', $event)"
+          @edit-properties="
+            emit('edit-properties', {
+              collectionIndex: `${folderPath}/${String(subFolderIndex)}`,
+              collection: subFolder,
+            })
+          "
           @select="emit('select', $event)"
+          @select-request="$emit('select-request', $event)"
         />
         <CollectionsGraphqlRequest
           v-for="(request, index) in folder.requests"
@@ -164,6 +187,7 @@
           @edit-request="emit('edit-request', $event)"
           @duplicate-request="emit('duplicate-request', $event)"
           @select="emit('select', $event)"
+          @select-request="$emit('select-request', $event)"
         />
 
         <HoppSmartPlaceholder
@@ -197,13 +221,16 @@ import IconMoreVertical from "~icons/lucide/more-vertical"
 import IconCheckCircle from "~icons/lucide/check-circle"
 import IconFolder from "~icons/lucide/folder"
 import IconFolderOpen from "~icons/lucide/folder-open"
+import IconSettings2 from "~icons/lucide/settings-2"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
 import { useColorMode } from "@composables/theming"
-import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
+import { removeGraphqlFolder } from "~/newstore/collections"
 import { computed, ref } from "vue"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"
+import { Picked } from "~/helpers/types/HoppPicked"
+import { HoppCollection } from "@hoppscotch/data"
 
 const toast = useToast()
 const t = useI18n()
@@ -211,16 +238,16 @@ const colorMode = useColorMode()
 
 const tabs = useService(GQLTabService)
 
-const props = defineProps({
-  picked: { type: Object, default: null },
+const props = defineProps<{
+  picked: Picked
   // Whether the request is in a selectable mode (activates 'select' event)
-  saveRequest: { type: Boolean, default: false },
-  folder: { type: Object, default: () => ({}) },
-  folderIndex: { type: Number, default: null },
-  collectionIndex: { type: Number, default: null },
-  folderPath: { type: String, default: null },
-  isFiltered: Boolean,
-})
+  saveRequest: boolean
+  folder: HoppCollection
+  folderIndex: number
+  collectionIndex: number
+  folderPath: string
+  isFiltered: boolean
+}>()
 
 const emit = defineEmits([
   "select",
@@ -229,6 +256,9 @@ const emit = defineEmits([
   "add-folder",
   "edit-folder",
   "duplicate-request",
+  "edit-properties",
+  "select-request",
+  "drop-request",
 ])
 
 // Template refs
@@ -303,6 +333,11 @@ const dropEvent = ({ dataTransfer }: any) => {
   dragging.value = !dragging.value
   const folderPath = dataTransfer.getData("folderPath")
   const requestIndex = dataTransfer.getData("requestIndex")
-  moveGraphqlRequest(folderPath, requestIndex, props.folderPath)
+
+  emit("drop-request", {
+    folderPath,
+    requestIndex,
+    collectionIndex: props.folderPath,
+  })
 }
 </script>

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

@@ -11,7 +11,7 @@
 <script setup lang="ts">
 import { useI18n } from "~/composables/i18n"
 import { useToast } from "~/composables/toast"
-import { HoppCollection, HoppGQLRequest } from "@hoppscotch/data"
+import { HoppCollection } from "@hoppscotch/data"
 import { ImporterOrExporter } from "~/components/importExport/types"
 import { FileSource } from "~/helpers/import-export/import/import-sources/FileSource"
 import { GistSource } from "~/helpers/import-export/import/import-sources/GistSource"
@@ -25,13 +25,14 @@ import { useReadonlyStream } from "~/composables/stream"
 
 import { platform } from "~/platform"
 import {
+  appendGraphqlCollections,
   graphqlCollections$,
-  setGraphqlCollections,
 } from "~/newstore/collections"
 import { hoppGqlCollectionsImporter } from "~/helpers/import-export/import/hoppGql"
 import { gqlCollectionsExporter } from "~/helpers/import-export/export/gqlCollections"
 import { gqlCollectionsGistExporter } from "~/helpers/import-export/export/gqlCollectionsGistExporter"
 import { computed } from "vue"
+import { hoppGQLImporter } from "~/helpers/import-export/import/hopp"
 
 const t = useI18n()
 const toast = useToast()
@@ -60,15 +61,20 @@ const GqlCollectionsHoppImporter: ImporterOrExporter = {
         showImportFailedError()
         return
       }
+      const validatedCollection = await hoppGQLImporter(
+        JSON.stringify(res.right)
+      )()
 
-      handleImportToStore(res.right)
+      if (E.isRight(validatedCollection)) {
+        handleImportToStore(validatedCollection.right)
 
-      platform.analytics?.logEvent({
-        type: "HOPP_IMPORT_COLLECTION",
-        platform: "gql",
-        workspaceType: "personal",
-        importer: "json",
-      })
+        platform.analytics?.logEvent({
+          type: "HOPP_IMPORT_COLLECTION",
+          platform: "gql",
+          workspaceType: "personal",
+          importer: "json",
+        })
+      }
 
       emit("hide-modal")
     },
@@ -214,11 +220,9 @@ const showImportFailedError = () => {
   toast.error(t("import.failed"))
 }
 
-const handleImportToStore = async (
-  gqlCollections: HoppCollection<HoppGQLRequest>[]
-) => {
-  setGraphqlCollections(gqlCollections)
-  toast.success(t("import.success"))
+const handleImportToStore = async (gqlCollections: HoppCollection[]) => {
+  appendGraphqlCollections(gqlCollections)
+  toast.success(t("state.file_imported"))
 }
 
 const emit = defineEmits<{

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

@@ -9,38 +9,41 @@
       @dragend="dragging = false"
       @contextmenu.prevent="options.tippy.show()"
     >
-      <span
-        class="flex w-16 cursor-pointer items-center justify-center truncate px-2"
+      <div
+        class="pointer-events-auto flex min-w-0 flex-1 cursor-pointer items-center justify-center"
         @click="selectRequest()"
       >
-        <component
-          :is="isSelected ? IconCheckCircle : IconFile"
-          class="svg-icons"
-          :class="{ 'text-accent': isSelected }"
-        />
-      </span>
-      <span
-        class="flex min-w-0 flex-1 cursor-pointer items-center py-2 pr-2 transition group-hover:text-secondaryDark"
-        @click="selectRequest()"
-      >
-        <span class="truncate" :class="{ 'text-accent': isSelected }">
-          {{ request.name }}
+        <span
+          class="pointer-events-none flex w-8 items-center justify-center truncate px-6"
+        >
+          <component
+            :is="isSelected ? IconCheckCircle : IconFile"
+            class="svg-icons"
+            :class="{ 'text-accent': isSelected }"
+          />
         </span>
         <span
-          v-if="isActive"
-          v-tippy="{ theme: 'tooltip' }"
-          class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
-          :title="`${t('collection.request_in_use')}`"
+          class="pointer-events-none flex min-w-0 flex-1 items-center py-2 pr-2 transition group-hover:text-secondaryDark"
         >
-          <span
-            class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
-          >
+          <span class="truncate" :class="{ 'text-accent': isSelected }">
+            {{ request.name }}
           </span>
           <span
-            class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
-          ></span>
+            v-if="isActive"
+            v-tippy="{ theme: 'tooltip' }"
+            class="relative mx-3 flex h-1.5 w-1.5 flex-shrink-0"
+            :title="`${t('collection.request_in_use')}`"
+          >
+            <span
+              class="absolute inline-flex h-full w-full flex-shrink-0 animate-ping rounded-full bg-green-500 opacity-75"
+            >
+            </span>
+            <span
+              class="relative inline-flex h-1.5 w-1.5 flex-shrink-0 rounded-full bg-green-500"
+            ></span>
+          </span>
         </span>
-      </span>
+      </div>
       <div class="flex">
         <span>
           <tippy
@@ -134,8 +137,7 @@ import IconTrash2 from "~icons/lucide/trash-2"
 import { PropType, computed, ref } from "vue"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
-import { HoppGQLRequest, makeGQLRequest } from "@hoppscotch/data"
-import { cloneDeep } from "lodash-es"
+import { HoppGQLRequest } from "@hoppscotch/data"
 import { removeGraphqlRequest } from "~/newstore/collections"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"
@@ -175,7 +177,12 @@ const isActive = computed(() => {
 })
 
 // TODO: Better types please
-const emit = defineEmits(["select", "edit-request", "duplicate-request"])
+const emit = defineEmits([
+  "select",
+  "edit-request",
+  "duplicate-request",
+  "select-request",
+])
 
 const dragging = ref(false)
 const confirmRemove = ref(false)
@@ -199,36 +206,11 @@ const selectRequest = () => {
   if (props.saveRequest) {
     pick()
   } else {
-    const possibleTab = tabs.getTabRefWithSaveContext({
-      originLocation: "user-collection",
+    emit("select-request", {
+      request: props.request,
       folderPath: props.folderPath,
       requestIndex: props.requestIndex,
     })
-
-    // Switch to that request if that request is open
-    if (possibleTab) {
-      tabs.setActiveTab(possibleTab.value.id)
-      return
-    }
-
-    tabs.createNewTab({
-      saveContext: {
-        originLocation: "user-collection",
-        folderPath: props.folderPath,
-        requestIndex: props.requestIndex,
-      },
-      request: cloneDeep(
-        makeGQLRequest({
-          name: props.request.name,
-          url: props.request.url,
-          query: props.request.query,
-          headers: props.request.headers,
-          variables: props.request.variables,
-          auth: props.request.auth,
-        })
-      ),
-      isDirty: false,
-    })
   }
 }
 

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

@@ -57,7 +57,10 @@
         @edit-request="editRequest($event)"
         @duplicate-request="duplicateRequest($event)"
         @select-collection="$emit('use-collection', collection)"
+        @edit-properties="editProperties($event)"
         @select="$emit('select', $event)"
+        @select-request="selectRequest($event)"
+        @drop-request="dropRequest($event)"
       />
     </div>
     <HoppSmartPlaceholder
@@ -142,19 +145,27 @@
       v-if="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
+    <CollectionsProperties
+      :show="showModalEditProperties"
+      :editing-properties="editingProperties"
+      @hide-modal="displayModalEditProperties(false)"
+      @set-collection-properties="setCollectionProperties"
+    />
   </div>
 </template>
 
-<script lang="ts">
-// TODO: TypeScript + Script Setup this :)
-import { defineComponent } from "vue"
-import { cloneDeep, clone } from "lodash-es"
+<script setup lang="ts">
+import { nextTick, ref } from "vue"
+import { clone, cloneDeep } from "lodash-es"
 import {
   graphqlCollections$,
   addGraphqlFolder,
   saveGraphqlRequestAs,
+  cascadeParentCollectionForHeaderAuth,
+  editGraphqlCollection,
+  editGraphqlFolder,
+  moveGraphqlRequest,
 } from "~/newstore/collections"
-
 import IconPlus from "~icons/lucide/plus"
 import IconHelpCircle from "~icons/lucide/help-circle"
 import IconImport from "~icons/lucide/folder-down"
@@ -164,213 +175,448 @@ import { useColorMode } from "@composables/theming"
 import { platform } from "~/platform"
 import { useService } from "dioc/vue"
 import { GQLTabService } from "~/services/tab/graphql"
+import { computed } from "vue"
+import {
+  HoppCollection,
+  HoppGQLRequest,
+  makeGQLRequest,
+} from "@hoppscotch/data"
+import { Picked } from "~/helpers/types/HoppPicked"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
+import { updateInheritedPropertiesForAffectedRequests } from "~/helpers/collection/collection"
+import { useToast } from "~/composables/toast"
+import { getRequestsByPath } from "~/helpers/collection/request"
 
-export default defineComponent({
-  props: {
-    // Whether to activate the ability to pick items (activates 'select' events)
-    saveRequest: { type: Boolean, default: false },
-    picked: { type: Object, default: null },
-  },
-  emits: ["select", "use-collection"],
-  setup() {
-    const collections = useReadonlyStream(graphqlCollections$, [], "deep")
-    const colorMode = useColorMode()
-    const t = useI18n()
-    const tabs = useService(GQLTabService)
+const t = useI18n()
+const toast = useToast()
 
-    return {
-      collections,
-      colorMode,
-      t,
-      tabs,
-      IconPlus,
-      IconHelpCircle,
-      IconImport,
-    }
-  },
-  data() {
-    return {
-      showModalAdd: false,
-      showModalEdit: false,
-      showModalImportExport: false,
-      showModalAddRequest: false,
-      showModalAddFolder: false,
-      showModalEditFolder: false,
-      showModalEditRequest: false,
-      editingCollection: undefined,
-      editingCollectionIndex: undefined,
-      editingFolder: undefined,
-      editingFolderName: undefined,
-      editingFolderIndex: undefined,
-      editingFolderPath: undefined,
-      editingRequest: undefined,
-      editingRequestIndex: undefined,
-      filterText: "",
-    }
-  },
-  computed: {
-    filteredCollections() {
-      const collections = clone(this.collections)
+defineProps<{
+  // Whether to activate the ability to pick items (activates 'select' events)
+  saveRequest: boolean
+  picked: Picked
+}>()
 
-      if (!this.filterText) return collections
+const collections = useReadonlyStream(graphqlCollections$, [], "deep")
+const colorMode = useColorMode()
+const tabs = useService(GQLTabService)
 
-      const filterText = this.filterText.toLowerCase()
-      const filteredCollections = []
+const showModalAdd = ref(false)
+const showModalEdit = ref(false)
+const showModalImportExport = ref(false)
+const showModalAddRequest = ref(false)
+const showModalAddFolder = ref(false)
+const showModalEditFolder = ref(false)
+const showModalEditRequest = ref(false)
+const showModalEditProperties = ref(false)
 
-      for (const collection of collections) {
-        const filteredRequests = []
-        const filteredFolders = []
-        for (const request of collection.requests) {
-          if (request.name.toLowerCase().includes(filterText))
-            filteredRequests.push(request)
-        }
-        for (const folder of collection.folders) {
-          const filteredFolderRequests = []
-          for (const request of folder.requests) {
-            if (request.name.toLowerCase().includes(filterText))
-              filteredFolderRequests.push(request)
-          }
-          if (filteredFolderRequests.length > 0) {
-            const filteredFolder = Object.assign({}, folder)
-            filteredFolder.requests = filteredFolderRequests
-            filteredFolders.push(filteredFolder)
-          }
-        }
+const editingCollection = ref<HoppCollection | null>(null)
+const editingCollectionIndex = ref<number | null>(null)
+const editingFolder = ref<HoppCollection | null>(null)
+const editingFolderName = ref("")
+const editingFolderIndex = ref<number | null>(null)
+const editingFolderPath = ref("")
+const editingRequest = ref<HoppGQLRequest | null>(null)
+const editingRequestIndex = ref<number | null>(null)
 
-        if (filteredRequests.length + filteredFolders.length > 0) {
-          const filteredCollection = Object.assign({}, collection)
-          filteredCollection.requests = filteredRequests
-          filteredCollection.folders = filteredFolders
-          filteredCollections.push(filteredCollection)
-        }
-      }
-
-      return filteredCollections
-    },
-  },
-  methods: {
-    displayModalAdd(shouldDisplay) {
-      this.showModalAdd = shouldDisplay
-    },
-    displayModalEdit(shouldDisplay) {
-      this.showModalEdit = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalImportExport(shouldDisplay) {
-      this.showModalImportExport = shouldDisplay
-    },
-    displayModalAddRequest(shouldDisplay) {
-      this.showModalAddRequest = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalAddFolder(shouldDisplay) {
-      this.showModalAddFolder = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalEditFolder(shouldDisplay) {
-      this.showModalEditFolder = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    displayModalEditRequest(shouldDisplay) {
-      this.showModalEditRequest = shouldDisplay
-
-      if (!shouldDisplay) this.resetSelectedData()
-    },
-    editCollection(collection, collectionIndex) {
-      this.$data.editingCollection = collection
-      this.$data.editingCollectionIndex = collectionIndex
-      this.displayModalEdit(true)
-    },
-    onAddRequest({ name, path, index }) {
-      const newRequest = {
-        ...this.tabs.currentActiveTab.value.document.request,
-        name,
-      }
-
-      saveGraphqlRequestAs(path, newRequest)
-
-      this.tabs.createNewTab({
-        saveContext: {
-          originLocation: "user-collection",
-          folderPath: path,
-          requestIndex: index,
-        },
-        request: newRequest,
-        isDirty: false,
-      })
-
-      platform.analytics?.logEvent({
-        type: "HOPP_SAVE_REQUEST",
-        platform: "gql",
-        createdNow: true,
-        workspaceType: "personal",
-      })
-
-      this.displayModalAddRequest(false)
-    },
-    addRequest(payload) {
-      const { path } = payload
-      this.$data.editingFolderPath = path
-      this.displayModalAddRequest(true)
-    },
-    onAddFolder({ name, path }) {
-      addGraphqlFolder(name, path)
-
-      platform.analytics?.logEvent({
-        type: "HOPP_CREATE_COLLECTION",
-        isRootCollection: false,
-        platform: "gql",
-        workspaceType: "personal",
-      })
-
-      this.displayModalAddFolder(false)
-    },
-    addFolder(payload) {
-      const { path } = payload
-      this.$data.editingFolderPath = path
-      this.displayModalAddFolder(true)
-    },
-    editFolder(payload) {
-      const { folder, folderPath } = payload
-      this.editingFolder = folder
-      this.editingFolderPath = folderPath
-      this.displayModalEditFolder(true)
-    },
-    editRequest(payload) {
-      const {
-        collectionIndex,
-        folderIndex,
-        folderName,
-        request,
-        requestIndex,
-        folderPath,
-      } = payload
-      this.$data.editingFolderPath = folderPath
-      this.$data.editingCollectionIndex = collectionIndex
-      this.$data.editingFolderIndex = folderIndex
-      this.$data.editingFolderName = folderName
-      this.$data.editingRequest = request
-      this.$data.editingRequestIndex = requestIndex
-      this.displayModalEditRequest(true)
-    },
-    resetSelectedData() {
-      this.$data.editingCollection = undefined
-      this.$data.editingCollectionIndex = undefined
-      this.$data.editingFolder = undefined
-      this.$data.editingFolderIndex = undefined
-      this.$data.editingRequest = undefined
-      this.$data.editingRequestIndex = undefined
-    },
-    duplicateRequest({ folderPath, request }) {
-      saveGraphqlRequestAs(folderPath, {
-        ...cloneDeep(request),
-        name: `${request.name} - ${this.t("action.duplicate")}`,
-      })
-    },
-  },
+const editingProperties = ref<{
+  collection: HoppCollection | null
+  isRootCollection: boolean
+  path: string
+  inheritedProperties?: HoppInheritedProperty
+}>({
+  collection: null,
+  isRootCollection: false,
+  path: "",
+  inheritedProperties: undefined,
 })
+
+const filterText = ref("")
+
+const filteredCollections = computed(() => {
+  const collectionsClone = clone(collections.value)
+
+  if (!filterText.value) return collectionsClone
+
+  const filterTextLower = filterText.value.toLowerCase()
+  const filteredCollections = []
+
+  for (const collection of collectionsClone) {
+    const filteredRequests = []
+    const filteredFolders = []
+
+    for (const request of collection.requests) {
+      if (request.name.toLowerCase().includes(filterTextLower))
+        filteredRequests.push(request)
+    }
+
+    for (const folder of collection.folders) {
+      const filteredFolderRequests = []
+      for (const request of folder.requests) {
+        if (request.name.toLowerCase().includes(filterTextLower))
+          filteredFolderRequests.push(request)
+      }
+      if (filteredFolderRequests.length > 0) {
+        const filteredFolder = { ...folder }
+        filteredFolder.requests = filteredFolderRequests
+        filteredFolders.push(filteredFolder)
+      }
+    }
+
+    if (filteredRequests.length + filteredFolders.length > 0) {
+      const filteredCollection = { ...collection }
+      filteredCollection.requests = filteredRequests
+      filteredCollection.folders = filteredFolders
+      filteredCollections.push(filteredCollection)
+    }
+  }
+
+  return filteredCollections
+})
+
+const displayModalAdd = (shouldDisplay: boolean) => {
+  showModalAdd.value = shouldDisplay
+}
+
+const displayModalEdit = (shouldDisplay: boolean) => {
+  showModalEdit.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalImportExport = (shouldDisplay: boolean) => {
+  showModalImportExport.value = shouldDisplay
+}
+
+const displayModalAddRequest = (shouldDisplay: boolean) => {
+  showModalAddRequest.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalAddFolder = (shouldDisplay: boolean) => {
+  showModalAddFolder.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditFolder = (shouldDisplay: boolean) => {
+  showModalEditFolder.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditRequest = (shouldDisplay: boolean) => {
+  showModalEditRequest.value = shouldDisplay
+
+  if (!shouldDisplay) resetSelectedData()
+}
+
+const displayModalEditProperties = (show: boolean) => {
+  showModalEditProperties.value = show
+
+  if (!show) resetSelectedData()
+}
+
+const editCollection = (
+  collection: HoppCollection,
+  collectionIndex: number
+) => {
+  editingCollection.value = collection
+  editingCollectionIndex.value = collectionIndex
+  displayModalEdit(true)
+}
+
+const onAddRequest = ({
+  name,
+  path,
+  index,
+}: {
+  name: string
+  path: string
+  index: number
+}) => {
+  const newRequest = {
+    ...tabs.currentActiveTab.value.document.request,
+    name,
+  }
+
+  saveGraphqlRequestAs(path, newRequest)
+
+  const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+    path,
+    "graphql"
+  )
+
+  tabs.createNewTab({
+    saveContext: {
+      originLocation: "user-collection",
+      folderPath: path,
+      requestIndex: index,
+    },
+    request: newRequest,
+    isDirty: false,
+    inheritedProperties: {
+      auth,
+      headers,
+    },
+  })
+
+  platform.analytics?.logEvent({
+    type: "HOPP_SAVE_REQUEST",
+    platform: "gql",
+    createdNow: true,
+    workspaceType: "personal",
+  })
+
+  displayModalAddRequest(false)
+}
+
+const addRequest = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+  displayModalAddRequest(true)
+}
+
+const onAddFolder = ({
+  name,
+  path,
+}: {
+  name: string
+  path: string | undefined
+}) => {
+  addGraphqlFolder(name, path ?? "0")
+
+  platform.analytics?.logEvent({
+    type: "HOPP_CREATE_COLLECTION",
+    isRootCollection: false,
+    platform: "gql",
+    workspaceType: "personal",
+  })
+
+  displayModalAddFolder(false)
+}
+
+const addFolder = (payload: { path: string }) => {
+  const { path } = payload
+  editingFolderPath.value = path
+  displayModalAddFolder(true)
+}
+
+const editFolder = (payload: {
+  folder: HoppCollection
+  folderPath: string
+}) => {
+  const { folder, folderPath } = payload
+  editingFolder.value = folder
+  editingFolderPath.value = folderPath
+  displayModalEditFolder(true)
+}
+
+const editRequest = (payload: {
+  collectionIndex: number
+  folderIndex: number
+  folderName: string
+  request: HoppGQLRequest
+  requestIndex: number
+  folderPath: string
+}) => {
+  const {
+    collectionIndex,
+    folderIndex,
+    folderName,
+    request,
+    requestIndex,
+    folderPath,
+  } = payload
+  editingFolderPath.value = folderPath
+  editingCollectionIndex.value = collectionIndex
+  editingFolderIndex.value = folderIndex
+  editingFolderName.value = folderName
+  editingRequest.value = request
+  editingRequestIndex.value = requestIndex
+  displayModalEditRequest(true)
+}
+
+const duplicateRequest = ({
+  folderPath,
+  request,
+}: {
+  folderPath: string
+  request: HoppGQLRequest
+}) => {
+  saveGraphqlRequestAs(folderPath, {
+    ...cloneDeep(request),
+    name: `${request.name} - ${t("action.duplicate")}`,
+  })
+}
+
+const selectRequest = ({
+  request,
+  folderPath,
+  requestIndex,
+}: {
+  request: HoppGQLRequest
+  folderPath: string
+  requestIndex: number
+}) => {
+  const possibleTab = tabs.getTabRefWithSaveContext({
+    originLocation: "user-collection",
+    folderPath: folderPath,
+    requestIndex: requestIndex,
+  })
+  const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+    folderPath,
+    "graphql"
+  )
+  // Switch to that request if that request is open
+  if (possibleTab) {
+    tabs.setActiveTab(possibleTab.value.id)
+    return
+  }
+
+  tabs.createNewTab({
+    saveContext: {
+      originLocation: "user-collection",
+      folderPath: folderPath,
+      requestIndex: requestIndex,
+    },
+    request: cloneDeep(
+      makeGQLRequest({
+        name: request.name,
+        url: request.url,
+        query: request.query,
+        headers: request.headers,
+        variables: request.variables,
+        auth: request.auth,
+      })
+    ),
+    isDirty: false,
+    inheritedProperties: {
+      auth,
+      headers,
+    },
+  })
+}
+
+const dropRequest = ({
+  folderPath,
+  requestIndex,
+  collectionIndex,
+}: {
+  folderPath: string
+  requestIndex: number
+  collectionIndex: number
+}) => {
+  const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+    `${collectionIndex}`,
+    "graphql"
+  )
+
+  const possibleTab = tabs.getTabRefWithSaveContext({
+    originLocation: "user-collection",
+    folderPath,
+    requestIndex: Number(requestIndex),
+  })
+
+  if (possibleTab) {
+    possibleTab.value.document.saveContext = {
+      originLocation: "user-collection",
+      folderPath: `${collectionIndex}`,
+      requestIndex: getRequestsByPath(collections.value, `${collectionIndex}`)
+        .length,
+    }
+
+    possibleTab.value.document.inheritedProperties = {
+      auth,
+      headers,
+    }
+  }
+
+  moveGraphqlRequest(folderPath, requestIndex, `${collectionIndex}`)
+
+  toast.success(`${t("request.moved")}`)
+}
+
+/**
+ * Checks if the collection is already in the root
+ * @param id - path of the collection
+ * @returns boolean - true if the collection is already in the root
+ */
+const isAlreadyInRoot = (id: string) => {
+  const indexPath = id.split("/")
+  return indexPath.length === 1
+}
+
+const editProperties = ({
+  collectionIndex,
+  collection,
+}: {
+  collectionIndex: string | null
+  collection: HoppCollection | null
+}) => {
+  if (collectionIndex === null || collection === null) return
+
+  const parentIndex = collectionIndex.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
+  let inheritedProperties = {}
+
+  if (parentIndex) {
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      parentIndex,
+      "graphql"
+    )
+
+    inheritedProperties = {
+      auth,
+      headers,
+    } as HoppInheritedProperty
+  }
+
+  editingProperties.value = {
+    collection,
+    isRootCollection: isAlreadyInRoot(collectionIndex),
+    path: collectionIndex,
+    inheritedProperties,
+  }
+
+  displayModalEditProperties(true)
+}
+
+const setCollectionProperties = (newCollection: {
+  collection: HoppCollection
+  path: string
+  isRootCollection: boolean
+}) => {
+  const { collection, path, isRootCollection } = newCollection
+  if (isRootCollection) {
+    editGraphqlCollection(parseInt(path), collection)
+  } else {
+    editGraphqlFolder(path, collection)
+  }
+
+  const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+    path,
+    "graphql"
+  )
+
+  nextTick(() => {
+    updateInheritedPropertiesForAffectedRequests(
+      path,
+      {
+        auth,
+        headers,
+      },
+      "graphql"
+    )
+  })
+
+  displayModalEditProperties(false)
+}
+const resetSelectedData = () => {
+  editingCollection.value = null
+  editingCollectionIndex.value = null
+  editingFolder.value = null
+  editingFolderIndex.value = null
+  editingRequest.value = null
+  editingRequestIndex.value = null
+}
 </script>

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

@@ -38,6 +38,7 @@
       @add-request="addRequest"
       @edit-collection="editCollection"
       @edit-folder="editFolder"
+      @edit-properties="editProperties"
       @export-data="exportData"
       @remove-collection="removeCollection"
       @remove-folder="removeFolder"
@@ -69,6 +70,7 @@
       @add-folder="addFolder"
       @edit-collection="editCollection"
       @edit-folder="editFolder"
+      @edit-properties="editProperties"
       @export-data="exportData"
       @remove-collection="removeCollection"
       @remove-folder="removeFolder"
@@ -151,6 +153,12 @@
       :show="showTeamModalAdd"
       @hide-modal="displayTeamModalAdd(false)"
     />
+    <CollectionsProperties
+      :show="showModalEditProperties"
+      :editing-properties="editingProperties"
+      @hide-modal="displayModalEditProperties(false)"
+      @set-collection-properties="setCollectionProperties"
+    />
   </div>
 </template>
 
@@ -181,10 +189,13 @@ import {
   moveRESTFolder,
   navigateToFolderWithIndexPath,
   restCollectionStore,
+  cascadeParentCollectionForHeaderAuth,
 } from "~/newstore/collections"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import {
   HoppCollection,
+  HoppRESTAuth,
+  HoppRESTHeaders,
   HoppRESTRequest,
   makeCollection,
 } from "@hoppscotch/data"
@@ -193,10 +204,10 @@ import { GQLError } from "~/helpers/backend/GQLClient"
 import {
   createNewRootCollection,
   createChildCollection,
-  renameCollection,
   deleteCollection,
   moveRESTTeamCollection,
   updateOrderRESTTeamCollection,
+  updateTeamCollection,
 } from "~/helpers/backend/mutations/TeamCollection"
 import {
   updateTeamRequest,
@@ -220,6 +231,7 @@ import {
   getFoldersByPath,
   resolveSaveContextOnCollectionReorder,
   updateSaveContextForAffectedRequests,
+  updateInheritedPropertiesForAffectedRequests,
   resetTeamRequestsContext,
 } from "~/helpers/collection/collection"
 import { currentReorderingStatus$ } from "~/newstore/reordering"
@@ -227,6 +239,7 @@ import { defineActionHandler, invokeAction } from "~/helpers/actions"
 import { WorkspaceService } from "~/services/workspace.service"
 import { useService } from "dioc/vue"
 import { RESTTabService } from "~/services/tab/rest"
+import { HoppInheritedProperty } from "~/helpers/types/HoppInheritedProperties"
 
 const t = useI18n()
 const toast = useToast()
@@ -266,15 +279,11 @@ const collectionsType = ref<CollectionType>({
 })
 
 // Collection Data
-const editingCollection = ref<
-  HoppCollection<HoppRESTRequest> | TeamCollection | null
->(null)
+const editingCollection = ref<HoppCollection | TeamCollection | null>(null)
 const editingCollectionName = ref<string | null>(null)
 const editingCollectionIndex = ref<number | null>(null)
 const editingCollectionID = ref<string | null>(null)
-const editingFolder = ref<
-  HoppCollection<HoppRESTRequest> | TeamCollection | null
->(null)
+const editingFolder = ref<HoppCollection | TeamCollection | null>(null)
 const editingFolderName = ref<string | null>(null)
 const editingFolderPath = ref<string | null>(null)
 const editingRequest = ref<HoppRESTRequest | null>(null)
@@ -282,6 +291,18 @@ const editingRequestName = ref("")
 const editingRequestIndex = ref<number | null>(null)
 const editingRequestID = ref<string | null>(null)
 
+const editingProperties = ref<{
+  collection: Omit<HoppCollection, "v"> | TeamCollection | null
+  isRootCollection: boolean
+  path: string
+  inheritedProperties?: HoppInheritedProperty
+}>({
+  collection: null,
+  isRootCollection: false,
+  path: "",
+  inheritedProperties: undefined,
+})
+
 const confirmModalTitle = ref<string | null>(null)
 
 const filterTexts = ref("")
@@ -520,6 +541,7 @@ const showModalEditCollection = ref(false)
 const showModalEditFolder = ref(false)
 const showModalEditRequest = ref(false)
 const showModalImportExport = ref(false)
+const showModalEditProperties = ref(false)
 const showConfirmModal = ref(false)
 const showTeamModalAdd = ref(false)
 
@@ -565,6 +587,12 @@ const displayModalImportExport = (show: boolean) => {
   if (!show) resetSelectedData()
 }
 
+const displayModalEditProperties = (show: boolean) => {
+  showModalEditProperties.value = show
+
+  if (!show) resetSelectedData()
+}
+
 const displayConfirmModal = (show: boolean) => {
   showConfirmModal.value = show
 
@@ -584,6 +612,11 @@ const addNewRootCollection = (name: string) => {
         name,
         folders: [],
         requests: [],
+        headers: [],
+        auth: {
+          authType: "inherit",
+          authActive: false,
+        },
       })
     )
 
@@ -625,7 +658,7 @@ const addNewRootCollection = (name: string) => {
 
 const addRequest = (payload: {
   path: string
-  folder: HoppCollection<HoppRESTRequest> | TeamCollection
+  folder: HoppCollection | TeamCollection
 }) => {
   const { path, folder } = payload
   editingFolder.value = folder
@@ -639,11 +672,13 @@ const onAddRequest = (requestName: string) => {
     name: requestName,
   }
 
+  const path = editingFolderPath.value
+  if (!path) return
   if (collectionsType.value.type === "my-collections") {
-    const path = editingFolderPath.value
-    if (!path) return
     const insertionIndex = saveRESTRequestAs(path, newRequest)
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(path, "rest")
+
     tabs.createNewTab({
       request: newRequest,
       isDirty: false,
@@ -652,6 +687,10 @@ const onAddRequest = (requestName: string) => {
         folderPath: path,
         requestIndex: insertionIndex,
       },
+      inheritedProperties: {
+        auth,
+        headers,
+      },
     })
 
     platform.analytics?.logEvent({
@@ -692,7 +731,8 @@ const onAddRequest = (requestName: string) => {
         },
         (result) => {
           const { createRequestInCollection } = result
-
+          const { auth, headers } =
+            teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(path)
           tabs.createNewTab({
             request: newRequest,
             isDirty: false,
@@ -702,6 +742,10 @@ const onAddRequest = (requestName: string) => {
               collectionID: createRequestInCollection.collection.id,
               teamID: createRequestInCollection.collection.team.id,
             },
+            inheritedProperties: {
+              auth,
+              headers,
+            },
           })
 
           modalLoadingState.value = false
@@ -714,7 +758,7 @@ const onAddRequest = (requestName: string) => {
 
 const addFolder = (payload: {
   path: string
-  folder: HoppCollection<HoppRESTRequest> | TeamCollection
+  folder: HoppCollection | TeamCollection
 }) => {
   const { path, folder } = payload
   editingFolder.value = folder
@@ -773,15 +817,13 @@ const onAddFolder = (folderName: string) => {
 
 const editCollection = (payload: {
   collectionIndex: string
-  collection: HoppCollection<HoppRESTRequest> | TeamCollection
+  collection: HoppCollection | TeamCollection
 }) => {
   const { collectionIndex, collection } = payload
   editingCollection.value = collection
   if (collectionsType.value.type === "my-collections") {
     editingCollectionIndex.value = parseInt(collectionIndex)
-    editingCollectionName.value = (
-      collection as HoppCollection<HoppRESTRequest>
-    ).name
+    editingCollectionName.value = (collection as HoppCollection).name
   } else {
     editingCollectionName.value = (collection as TeamCollection).title
   }
@@ -816,7 +858,7 @@ const updateEditingCollection = (newName: string) => {
     modalLoadingState.value = true
 
     pipe(
-      renameCollection(editingCollection.value.id, newName),
+      updateTeamCollection(editingCollection.value.id, undefined, newName),
       TE.match(
         (err: GQLError<string>) => {
           toast.error(`${getErrorMessage(err)}`)
@@ -834,13 +876,13 @@ const updateEditingCollection = (newName: string) => {
 
 const editFolder = (payload: {
   folderPath: string | undefined
-  folder: HoppCollection<HoppRESTRequest> | TeamCollection
+  folder: HoppCollection | TeamCollection
 }) => {
   const { folderPath, folder } = payload
   editingFolder.value = folder
   if (collectionsType.value.type === "my-collections" && folderPath) {
     editingFolderPath.value = folderPath
-    editingFolderName.value = (folder as HoppCollection<HoppRESTRequest>).name
+    editingFolderName.value = (folder as HoppCollection).name
   } else {
     editingFolderName.value = (folder as TeamCollection).title
   }
@@ -854,7 +896,7 @@ const updateEditingFolder = (newName: string) => {
     if (!editingFolderPath.value) return
 
     editRESTFolder(editingFolderPath.value, {
-      ...(editingFolder.value as HoppCollection<HoppRESTRequest>),
+      ...(editingFolder.value as HoppCollection),
       name: newName,
     })
     displayModalEditFolder(false)
@@ -865,7 +907,7 @@ const updateEditingFolder = (newName: string) => {
     /* renameCollection can be used to rename both collections and folders
      since folder is treated as collection in the BE. */
     pipe(
-      renameCollection(editingFolder.value.id, newName),
+      updateTeamCollection(editingFolder.value.id, undefined, newName),
       TE.match(
         (err: GQLError<string>) => {
           if (err.error === "team_coll/short_title") {
@@ -1279,16 +1321,18 @@ const selectPicked = (payload: Picked | null) => {
  */
 const selectRequest = (selectedRequest: {
   request: HoppRESTRequest
-  folderPath: string | undefined
+  folderPath: string
   requestIndex: string
   isActive: boolean
 }) => {
   const { request, folderPath, requestIndex } = selectedRequest
-
   // If there is a request with this save context, switch into it
   let possibleTab = null
 
   if (collectionsType.value.type === "team-collections") {
+    const { auth, headers } =
+      teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(folderPath)
+
     possibleTab = tabs.getTabRefWithSaveContext({
       originLocation: "team-collection",
       requestID: requestIndex,
@@ -1302,10 +1346,19 @@ const selectRequest = (selectedRequest: {
         saveContext: {
           originLocation: "team-collection",
           requestID: requestIndex,
+          collectionID: folderPath,
+        },
+        inheritedProperties: {
+          auth,
+          headers,
         },
       })
     }
   } else {
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      folderPath,
+      "rest"
+    )
     possibleTab = tabs.getTabRefWithSaveContext({
       originLocation: "user-collection",
       requestIndex: parseInt(requestIndex),
@@ -1323,6 +1376,10 @@ const selectRequest = (selectedRequest: {
           folderPath: folderPath!,
           requestIndex: parseInt(requestIndex),
         },
+        inheritedProperties: {
+          auth,
+          headers,
+        },
       })
     }
   }
@@ -1349,16 +1406,17 @@ const dropRequest = (payload: {
 }) => {
   const { folderPath, requestIndex, destinationCollectionIndex } = payload
 
-  if (!requestIndex || !destinationCollectionIndex) return
+  if (!requestIndex || !destinationCollectionIndex || !folderPath) return
 
-  if (collectionsType.value.type === "my-collections" && folderPath) {
-    moveRESTRequest(
-      folderPath,
-      pathToLastIndex(requestIndex),
-      destinationCollectionIndex
+  let possibleTab = null
+
+  if (collectionsType.value.type === "my-collections") {
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      destinationCollectionIndex,
+      "rest"
     )
 
-    const possibleTab = tabs.getTabRefWithSaveContext({
+    possibleTab = tabs.getTabRefWithSaveContext({
       originLocation: "user-collection",
       folderPath,
       requestIndex: pathToLastIndex(requestIndex),
@@ -1374,6 +1432,11 @@ const dropRequest = (payload: {
           destinationCollectionIndex
         ).length,
       }
+
+      possibleTab.value.document.inheritedProperties = {
+        auth,
+        headers,
+      }
     }
 
     // When it's drop it's basically getting deleted from last folder. reordering last folder accordingly
@@ -1383,6 +1446,11 @@ const dropRequest = (payload: {
       folderPath,
       length: getRequestsByPath(myCollections.value, folderPath).length,
     })
+    moveRESTRequest(
+      folderPath,
+      pathToLastIndex(requestIndex),
+      destinationCollectionIndex
+    )
 
     toast.success(`${t("request.moved")}`)
     draggingToRoot.value = false
@@ -1406,8 +1474,12 @@ const dropRequest = (payload: {
             requestMoveLoading.value.indexOf(requestIndex),
             1
           )
+          const { auth, headers } =
+            teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(
+              destinationCollectionIndex
+            )
 
-          const possibleTab = tabs.getTabRefWithSaveContext({
+          possibleTab = tabs.getTabRefWithSaveContext({
             originLocation: "team-collection",
             requestID: requestIndex,
           })
@@ -1417,6 +1489,10 @@ const dropRequest = (payload: {
               originLocation: "team-collection",
               requestID: requestIndex,
             }
+            possibleTab.value.document.inheritedProperties = {
+              auth,
+              headers,
+            }
           }
           toast.success(`${t("request.moved")}`)
         }
@@ -1537,6 +1613,22 @@ const dropCollection = (payload: {
       `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`
     )
 
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+      `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`,
+      "rest"
+    )
+
+    const inheritedProperty = {
+      auth,
+      headers,
+    }
+
+    updateInheritedPropertiesForAffectedRequests(
+      `${destinationCollectionIndex}/${totalFoldersOfDestinationCollection}`,
+      inheritedProperty,
+      "rest"
+    )
+
     draggingToRoot.value = false
     toast.success(`${t("collection.moved")}`)
   } else if (hasTeamWriteAccess.value) {
@@ -1562,6 +1654,22 @@ const dropCollection = (payload: {
             collectionMoveLoading.value.indexOf(collectionIndexDragged),
             1
           )
+
+          const { auth, headers } =
+            teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(
+              destinationCollectionIndex
+            )
+
+          const inheritedProperty = {
+            auth,
+            headers,
+          }
+
+          updateInheritedPropertiesForAffectedRequests(
+            `${destinationCollectionIndex}`,
+            inheritedProperty,
+            "rest"
+          )
         }
       )
     )()
@@ -1846,13 +1954,11 @@ const initializeDownloadCollection = async (
  * Triggered by the export button in the tippy menu
  * @param collection - Collection or folder to be exported
  */
-const exportData = async (
-  collection: HoppCollection<HoppRESTRequest> | TeamCollection
-) => {
+const exportData = async (collection: HoppCollection | TeamCollection) => {
   if (collectionsType.value.type === "my-collections") {
     const collectionJSON = JSON.stringify(collection)
 
-    const name = (collection as HoppCollection<HoppRESTRequest>).name
+    const name = (collection as HoppCollection).name
 
     initializeDownloadCollection(collectionJSON, name)
   } else {
@@ -1893,6 +1999,164 @@ const shareRequest = ({ request }: { request: HoppRESTRequest }) => {
   }
 }
 
+const editProperties = (payload: {
+  collectionIndex: string
+  collection: HoppCollection | TeamCollection
+}) => {
+  const { collection, collectionIndex } = payload
+
+  if (collectionsType.value.type === "my-collections") {
+    const parentIndex = collectionIndex.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
+
+    let inheritedProperties = {
+      auth: {
+        parentID: "",
+        parentName: "",
+        inheritedAuth: {
+          authType: "inherit",
+          authActive: true,
+        },
+      },
+      headers: [
+        {
+          parentID: "",
+          parentName: "",
+          inheritedHeaders: [],
+        },
+      ],
+    } as HoppInheritedProperty
+
+    if (parentIndex) {
+      const { auth, headers } = cascadeParentCollectionForHeaderAuth(
+        parentIndex,
+        "rest"
+      )
+
+      inheritedProperties = {
+        auth,
+        headers,
+      }
+    }
+
+    editingProperties.value = {
+      collection,
+      isRootCollection: isAlreadyInRoot(collectionIndex),
+      path: collectionIndex,
+      inheritedProperties,
+    }
+  } else if (hasTeamWriteAccess.value) {
+    const parentIndex = collectionIndex.split("/").slice(0, -1).join("/") // remove last folder to get parent folder
+
+    const data = (collection as TeamCollection).data
+      ? JSON.parse((collection as TeamCollection).data ?? "")
+      : null
+
+    let inheritedProperties = undefined
+    let coll = {
+      id: collection.id,
+      name: (collection as TeamCollection).title,
+      auth: {
+        authType: "inherit",
+        authActive: true,
+      } as HoppRESTAuth,
+      headers: [] as HoppRESTHeaders,
+      folders: null,
+      requests: null,
+    }
+
+    if (parentIndex) {
+      const { auth, headers } =
+        teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(parentIndex)
+
+      inheritedProperties = {
+        auth,
+        headers,
+      }
+    }
+
+    if (data) {
+      coll = {
+        ...coll,
+        auth: data.auth,
+        headers: data.headers as HoppRESTHeaders,
+      }
+    }
+
+    editingProperties.value = {
+      collection: coll,
+      isRootCollection: isAlreadyInRoot(collectionIndex),
+      path: collectionIndex,
+      inheritedProperties,
+    }
+  }
+
+  displayModalEditProperties(true)
+}
+
+const setCollectionProperties = (newCollection: {
+  collection: HoppCollection
+  path: string
+  isRootCollection: boolean
+}) => {
+  const { collection, path, isRootCollection } = newCollection
+
+  if (collectionsType.value.type === "my-collections") {
+    if (isRootCollection) {
+      editRESTCollection(parseInt(path), collection)
+    } else {
+      editRESTFolder(path, collection)
+    }
+
+    const { auth, headers } = cascadeParentCollectionForHeaderAuth(path, "rest")
+
+    nextTick(() => {
+      updateInheritedPropertiesForAffectedRequests(
+        path,
+        {
+          auth,
+          headers,
+        },
+        "rest"
+      )
+    })
+    toast.success(t("collection.properties_updated"))
+  } else if (hasTeamWriteAccess.value && collection.id) {
+    const data = {
+      auth: collection.auth,
+      headers: collection.headers,
+    }
+    pipe(
+      updateTeamCollection(collection.id, JSON.stringify(data), undefined),
+      TE.match(
+        (err: GQLError<string>) => {
+          toast.error(`${getErrorMessage(err)}`)
+        },
+        () => {
+          toast.success(t("collection.properties_updated"))
+        }
+      )
+    )()
+
+    //This is a hack to update the inherited properties of the requests if there an tab opened
+    // since it takes a little bit of time to update the collection tree
+    setTimeout(() => {
+      const { auth, headers } =
+        teamCollectionAdapter.cascadeParentCollectionForHeaderAuth(path)
+      updateInheritedPropertiesForAffectedRequests(
+        path,
+        {
+          auth,
+          headers,
+        },
+        "rest",
+        "team"
+      )
+    }, 200)
+  }
+
+  displayModalEditProperties(false)
+}
+
 const resolveConfirmModal = (title: string | null) => {
   if (title === `${t("confirm.remove_collection")}`) onRemoveCollection()
   else if (title === `${t("confirm.remove_request")}`) onRemoveRequest()